:root {
 --navy: #0F2C5A;
 --navy-mid: #1E3A5F;
 --ruby: #8B1E3D;
 --gold: #C9A227;
 --cream: #FDF8F0;
 --parchment: #F5F0E6;
}
html { scroll-behavior: smooth; }
body {
 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
 background: var(--cream);
 color: var(--navy);
}
.font-latin, .latin-text {
 font-family: Georgia, Cambria, 'Times New Roman', serif;
 font-size: 1.125rem;
 line-height: 1.75;
 letter-spacing: 0.01em;
}
.stained-glass {
 background:
 linear-gradient(135deg, rgba(15,44,90,0.92) 0%, rgba(30,58,95,0.88) 40%, rgba(139,30,61,0.55) 70%, rgba(15,44,90,0.95) 100%),
 repeating-linear-gradient(60deg, transparent, transparent 28px, rgba(201,162,39,0.06) 28px, rgba(201,162,39,0.06) 30px),
 repeating-linear-gradient(-60deg, transparent, transparent 28px, rgba(201,162,39,0.04) 28px, rgba(201,162,39,0.04) 30px);
}
.stained-glass-soft {
 background:
 linear-gradient(180deg, rgba(253,248,240,0.97) 0%, rgba(245,240,230,1) 100%),
 radial-gradient(ellipse at 20% 0%, rgba(201,162,39,0.12), transparent 50%),
 radial-gradient(ellipse at 80% 100%, rgba(139,30,61,0.06), transparent 45%);
}
.glass-panel {
 background: linear-gradient(145deg, rgba(255,254,249,0.95), rgba(245,240,230,0.9));
 border: 1px solid rgba(201, 162, 39, 0.28);
 box-shadow: 0 4px 24px rgba(15, 44, 90, 0.08);
}
.lead-lines {
 background-image:
 linear-gradient(to right, rgba(15,44,90,0.06) 1px, transparent 1px),
 linear-gradient(to bottom, rgba(15,44,90,0.06) 1px, transparent 1px);
 background-size: 48px 48px;
}
.section-divider {
 height: 3px;
 background: linear-gradient(90deg, transparent, #C9A227 20%, #8B1E3D 50%, #C9A227 80%, transparent);
 opacity: 0.55;
}
.nav-link {
 color: rgba(253, 248, 240, 0.88);
 font-size: 0.875rem;
 font-weight: 500;
 transition: color 0.2s;
 white-space: nowrap;
}
.nav-link:hover, .nav-link:focus-visible { color: #E0C04A; outline: none; }
.btn-gold {
 background: linear-gradient(180deg, #D4AF37, #C9A227 55%, #B8921F);
 color: #0A1F42;
 font-weight: 600;
 border: 1px solid rgba(201, 162, 39, 0.6);
 transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.btn-gold:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(201, 162, 39, 0.35); }
.btn-gold:focus-visible { outline: 2px solid #E0C04A; outline-offset: 2px; }
.btn-outline {
 border: 1.5px solid #C9A227;
 color: #0F2C5A;
 background: transparent;
 font-weight: 600;
 transition: background 0.15s, color 0.15s;
}
.btn-outline:hover { background: rgba(201, 162, 39, 0.12); }
.btn-navy {
 background: #0F2C5A;
 color: #FDF8F0;
 font-weight: 600;
 transition: background 0.15s;
}
.btn-navy:hover { background: #1E3A5F; }
.btn-ruby {
 background: #8B1E3D;
 color: #FDF8F0;
 font-weight: 600;
}
.btn-ruby:hover { background: #A52A4A; }
.bead {
 width: 14px; height: 14px; border-radius: 50%;
 background: #C9A227;
 border: 2px solid #0F2C5A;
 transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
 display: inline-flex; align-items: center; justify-content: center;
 font-size: 8px; font-weight: 700; color: #0F2C5A;
}
.bead.done { background: #0F2C5A; color: #C9A227; box-shadow: 0 0 0 2px rgba(201,162,39,0.4); }
.bead.current { background: #8B1E3D; color: #FDF8F0; transform: scale(1.35); box-shadow: 0 0 10px rgba(139,30,61,0.45); }
.bead.pending { background: #E8DFC8; border-color: #1E3A5F55; color: #1E3A5F88; }
.bead.clickable {
 cursor: pointer;
 min-width: 1.5rem;
 min-height: 1.5rem;
}
.bead.clickable:hover {
 filter: brightness(1.08);
 box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.55);
}
.bead.clickable:focus-visible {
 outline: 2px solid #C9A227;
 outline-offset: 2px;
}
/*
 * Square gold markers: Rosary Pater/Gloria/Credo + Divine Mercy Pater/EF.
 * Must come last so .done gold text never wins (gold-on-gold).
 */
.bead.our-father,
.bead.our-father.pending,
.bead.our-father.current,
.bead.our-father.done {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #C9A227;
  font-size: 7px;
  font-weight: 700;
  color: #0A0A0A;
}
.bead.our-father.done {
  box-shadow: 0 0 0 2px rgba(15, 44, 90, 0.45);
}
.bead.our-father.current {
  transform: scale(1.35);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.65);
}

/* Side-by-side: wooden rosary LEFT | prayer content RIGHT */
.rosary-player {
 display: grid;
 grid-template-columns: minmax(260px, 340px) 1fr;
 gap: 1.25rem 1.75rem;
 align-items: start;
}
@media (max-width: 900px) {
 .rosary-player { grid-template-columns: 1fr; }
 .rosary-visual-panel { max-width: 360px; margin: 0 auto; }
}
.rosary-visual-panel {
 position: sticky;
 top: 4.5rem;
 border-radius: 1rem;
 overflow: visible;
 background: transparent;
 box-shadow: none;
 border: none;
}
.rosary-visual-panel .rosary-svg-wrap {
 position: relative;
 width: 100%;
 aspect-ratio: 320 / 640;
 min-height: 520px;
 overflow: visible;
}
.rosary-product-svg {
 width: 100%;
 height: 100%;
 display: block;
 overflow: visible;
}
.rosary-product-svg ellipse.cord-line,
.rosary-product-svg path.cord-line {
 fill: none !important;
 pointer-events: none;
}
.rosary-product-svg .rb {
 cursor: pointer;
 transition: filter 0.2s ease, transform 0.2s ease;
 transform-box: fill-box;
 transform-origin: center;
}
.rosary-product-svg .rb:hover { filter: brightness(1.08); }
.rosary-product-svg .rb.current {
 filter: drop-shadow(0 0 7px rgba(201, 162, 39, 0.9));
 animation: beadPulse 1.4s ease-in-out infinite;
}
.rosary-product-svg .rb.done { opacity: 0.78; }
.rosary-product-svg .decade-arc {
 fill: none !important;
 stroke: transparent;
 stroke-width: 20;
 stroke-linecap: butt;
 pointer-events: none;
 transition: stroke 0.35s ease;
}
.rosary-product-svg .decade-arc.active {
 stroke: rgba(201, 162, 39, 0.45);
}
.rosary-product-svg .decade-arc.done {
 stroke: rgba(15, 44, 90, 0.12);
}
/* Empty cord “Glory / Fatima” zones - no bead; soft gold pulse when current */
.rosary-product-svg .glory-zone {
 fill: none !important;
 stroke: transparent;
 stroke-width: 16;
 stroke-linecap: round;
 pointer-events: stroke;
 cursor: pointer;
 transition: stroke 0.25s ease, filter 0.25s ease;
}
.rosary-product-svg .glory-zone:hover {
 stroke: rgba(201, 162, 39, 0.28);
}
.rosary-product-svg .glory-zone.done {
 stroke: rgba(15, 44, 90, 0.14);
}
.rosary-product-svg .glory-zone.current {
 stroke: rgba(201, 162, 39, 0.72);
 filter: drop-shadow(0 0 6px rgba(201, 162, 39, 0.85));
 animation: cordZonePulse 1.4s ease-in-out infinite;
}
@keyframes cordZonePulse {
 0%, 100% { stroke-width: 14; opacity: 0.85; }
 50% { stroke-width: 20; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
 .rosary-product-svg .glory-zone.current { animation: none; }
}
.rosary-product-svg .ornament { pointer-events: none; }
.rosary-product-svg .decade-num-btn {
 cursor: pointer;
 outline: none;
 pointer-events: auto !important;
}
.rosary-product-svg .decade-num-btn circle.decade-num-face {
 fill: rgba(253, 248, 240, 0.95);
 stroke: #C9A227;
 stroke-width: 1.4;
 pointer-events: auto;
 transition: fill 0.2s, stroke 0.2s;
}
.rosary-product-svg .decade-num-btn:hover circle.decade-num-face,
.rosary-product-svg .decade-num-btn:focus-visible circle.decade-num-face {
 fill: #0F2C5A;
 stroke: #E0C04A;
}
.rosary-product-svg .decade-num-btn text {
 font-family: Georgia, serif;
 font-weight: 700;
 font-size: 11px;
 fill: #0F2C5A;
 pointer-events: none;
 user-select: none;
}
.rosary-product-svg .decade-num-btn:hover text,
.rosary-product-svg .decade-num-btn:focus-visible text {
 fill: #FDF8F0;
}
.rosary-product-svg .decade-num-btn.active circle.decade-num-face {
 fill: #8B1E3D;
 stroke: #E0C04A;
}
.rosary-product-svg .decade-num-btn.active text {
 fill: #FDF8F0;
}
.rosary-product-svg .section-btn {
 cursor: pointer;
 pointer-events: auto !important;
 outline: none;
}
.rosary-product-svg .section-btn rect {
 fill: rgba(253, 248, 240, 0.95);
 stroke: #C9A227;
 stroke-width: 1.3;
 pointer-events: auto;
 transition: fill 0.2s, stroke 0.2s;
}
.rosary-product-svg .section-btn:hover rect,
.rosary-product-svg .section-btn:focus-visible rect {
 fill: #0F2C5A;
 stroke: #E0C04A;
}
.rosary-product-svg .section-btn text {
 font-family: system-ui, -apple-system, sans-serif;
 font-weight: 600;
 font-size: 8.5px;
 fill: #0F2C5A;
 pointer-events: none;
}
.rosary-product-svg .section-btn:hover text,
.rosary-product-svg .section-btn:focus-visible text {
 fill: #FDF8F0;
}
.rosary-product-svg .section-btn.active rect {
 fill: #8B1E3D;
 stroke: #E0C04A;
}
.rosary-product-svg .section-btn.active text {
 fill: #FDF8F0;
}
.rosary-product-svg .opening-arc {
 fill: none !important;
 stroke: transparent;
 stroke-width: 24;
 stroke-linecap: round;
 pointer-events: none;
 transition: stroke 0.35s ease;
}
.rosary-product-svg .opening-arc.active {
 stroke: rgba(201, 162, 39, 0.45);
}
.rosary-product-svg .opening-arc.done {
 stroke: rgba(15, 44, 90, 0.12);
}
.rosary-product-svg .closing-glow {
 fill: transparent;
 stroke: transparent;
 stroke-width: 3;
 pointer-events: none;
 transition: stroke 0.35s ease, fill 0.35s ease;
}
.rosary-product-svg .closing-glow.active {
 fill: rgba(201, 162, 39, 0.12);
 stroke: rgba(201, 162, 39, 0.5);
}
.rosary-visual-caption {
 text-align: center;
 font-size: 0.7rem;
 color: #1E3A5F;
 padding: 0.35rem 0.5rem 0;
 background: transparent;
}
.rosary-prayer-panel {
 min-width: 0;
}
.rosary-prayer-panel #mystery-panel {
 padding: 1rem 1.15rem;
 margin-bottom: 1rem;
 border-radius: 0.85rem;
 background: linear-gradient(145deg, rgba(255,254,249,0.98), rgba(245,240,230,0.95));
 border: 1px solid rgba(201, 162, 39, 0.28);
}
.rosary-prayer-panel #mystery-meditation {
 font-size: 0.95rem;
 line-height: 1.6;
 max-height: none;
}
.rosary-prayer-panel #mystery-scripture {
 font-size: 0.88rem;
 line-height: 1.55;
 max-height: none;
 overflow: visible;
 text-align: left;
}
.rosary-prayer-panel #step-latin {
 font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}
.rosary-prayer-panel #step-title {
 font-size: clamp(1.25rem, 2.5vw, 1.6rem);
}
@keyframes beadPulse {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
 .rosary-product-svg .rb.current { animation: none; }
}
.decade-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 justify-content: center;
 margin-bottom: 0.75rem;
}
.decade-chip {
 font-size: 0.7rem;
 font-weight: 600;
 padding: 0.3rem 0.65rem;
 border-radius: 999px;
 border: 1px solid rgba(15,44,90,0.18);
 background: #F5F0E6;
 color: #1E3A5F;
 transition: all 0.25s ease;
}
.decade-chip.active {
 background: #0F2C5A;
 color: #FDF8F0;
 border-color: #C9A227;
 box-shadow: 0 0 0 2px rgba(201,162,39,0.35);
}
.decade-chip.done {
 background: rgba(15,44,90,0.12);
 color: #0F2C5A;
 border-color: rgba(201,162,39,0.45);
}
.decade-chip.clickable {
 cursor: pointer;
}
.decade-chip.clickable:hover {
 border-color: #C9A227;
 background: rgba(201,162,39,0.15);
}
.ave-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 2.25rem;
 height: 2.25rem;
 border-radius: 999px;
 background: #8B1E3D;
 color: #FDF8F0;
 font-family: Georgia, serif;
 font-weight: 700;
 font-size: 1.05rem;
 margin-bottom: 0.5rem;
 box-shadow: 0 0 0 3px rgba(201,162,39,0.35);
}
.virtue-note {
 background: linear-gradient(135deg, rgba(201,162,39,0.12), rgba(139,30,61,0.06));
 border: 1px solid rgba(201,162,39,0.35);
}
.promise-num {
 font-family: Georgia, serif;
 color: #C9A227;
 font-weight: 700;
 font-size: 1.25rem;
}
.product-art {
 background: linear-gradient(145deg, #0F2C5A 0%, #1E3A5F 45%, #8B1E3D 100%);
 position: relative;
 overflow: hidden;
}
.product-art::after {
 content: '';
 position: absolute; inset: 0;
 background:
 repeating-linear-gradient(60deg, transparent, transparent 12px, rgba(201,162,39,0.08) 12px, rgba(201,162,39,0.08) 13px),
 repeating-linear-gradient(-60deg, transparent, transparent 12px, rgba(255,255,255,0.03) 12px, rgba(255,255,255,0.03) 13px);
}
.cart-drawer {
 transform: translateX(100%);
 transition: transform 0.3s ease;
}
.cart-drawer.open { transform: translateX(0); }
.cart-overlay {
 opacity: 0; pointer-events: none;
 transition: opacity 0.3s;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.milestone-pop {
 animation: milestoneIn 0.5s ease;
}
@keyframes milestoneIn {
 0% { transform: scale(0.9); opacity: 0; }
 50% { transform: scale(1.03); }
 100% { transform: scale(1); opacity: 1; }
}
.filter-btn.active {
 background: #0F2C5A;
 color: #FDF8F0;
 border-color: #0F2C5A;
}
.skip-link {
 position: absolute; left: -9999px; top: 0;
 background: #C9A227; color: #0A1F42; padding: 0.5rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Multipage & mobile polish */
.nav-link[aria-current="page"] {
 color: #E0C04A;
 font-weight: 700;
}
.page-hero {
 padding: 1.75rem 0 1.25rem;
}
.page-hero h1 {
 font-family: Georgia, Cambria, 'Times New Roman', serif;
 font-size: clamp(1.75rem, 5vw, 2.5rem);
 font-weight: 700;
 color: #0F2C5A;
 line-height: 1.2;
}
.phonetic-text {
 font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
 font-size: 0.95rem;
 line-height: 1.7;
 color: #1E3A5F;
 letter-spacing: 0.02em;
 word-break: break-word;
}
.control-toggles {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 0.75rem 1.25rem;
}
.control-toggles label {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 cursor: pointer;
 user-select: none;
 min-height: 44px;
 font-size: 0.875rem;
 font-weight: 500;
 color: #1E3A5F;
}
.control-toggles input[type="checkbox"] {
 width: 1.15rem;
 height: 1.15rem;
 accent-color: #0F2C5A;
 flex-shrink: 0;
}
/* Touch-friendly controls on small screens */
@media (max-width: 640px) {
 .btn-gold, .btn-navy, .btn-outline, .btn-ruby {
 min-height: 44px;
 padding-left: 1rem;
 padding-right: 1rem;
 }
 .rosary-visual-panel {
 position: relative;
 top: 0;
 }
 .rosary-visual-panel .rosary-svg-wrap {
 min-height: 420px;
 }
 .nav-link {
 font-size: 1rem;
 padding: 0.35rem 0;
 }
 #mobile-menu {
 max-height: min(70vh, 28rem);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 }
 .cart-drawer {
 max-width: 100%;
 }
 .control-toggles {
 flex-direction: column;
 align-items: stretch;
 }
 .control-toggles label {
 justify-content: flex-start;
 }
 input[type="range"] {
 min-height: 44px;
 }
}
/* Safe areas for notched phones */
@supports (padding: max(0px)) {
 body {
 padding-left: env(safe-area-inset-left);
 padding-right: env(safe-area-inset-right);
 }
 header.sticky {
 padding-top: env(safe-area-inset-top);
 }
}

.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}