/* CHASQUI — fiel 100% al original chasqui.store */

:root {
  --bg:         #231f20;
  --bg-card:    linear-gradient(-25deg, rgb(141,134,137), rgb(114,110,112), rgb(85,78,81), rgb(62,58,59));
  --bg-elev:    #3a3536;
  --fg:         #ffffff;
  --fg-muted:   #d9d9d9;
  --fg-dim:     #8a8a8a;
  --border:     rgba(255,255,255,.06);
  --lime:       #cad636;
  --lime-hi:    #d8e345;
  --lime-fg:    #1a1a1a;
  --btn:        #cad636;
  --btn-hi:     #d8e345;
  --btn-fg:     #1a1a1a;
  --danger:     #ff5e5e;
  --radius:     15px;
  --radius-lg:  15px;
  --ease:       cubic-bezier(.2,.8,.2,1);
}

[data-theme="light"] {
  --bg:         #d9d9d9;
  --bg-card:    linear-gradient(-25deg, rgb(240,240,240), rgb(228,228,228), rgb(218,218,218), rgb(200,200,200));
  --bg-elev:    #c8c8c8;
  --fg:         #231f20;
  --fg-muted:   #3b3635;
  --fg-dim:     #6a6a6a;
  --border:     rgba(0,0,0,.08);
  --lime:       #5a6b10;
  --lime-hi:    #6d8014;
  --lime-fg:    #ffffff;
  --btn:        #5a6b10;
  --btn-hi:     #6d8014;
  --btn-fg:     #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100vw;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
/* Offset para header fixed — solo en páginas no-home */
body:not(.page-home) main { padding-top: 76px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
[x-cloak] { display: none !important; }
h1,h2,h3,h4 { margin: 0; color: var(--fg); font-weight: 700; letter-spacing: 0; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }

/* === Form loading spinner === */
.btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Skip-to-main link (a11y) — visually hidden until focused === */
.skip-link {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.skip-link:focus {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: var(--lime);
  color: var(--lime-fg);
  padding: .75rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 .5rem 0;
  z-index: 1000;
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* === HEADER === */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: transparent;
  padding: 1rem 1.5rem;
  pointer-events: none;
}
.site-header-inner > *, .site-header-inner a { pointer-events: auto; }
/* Al hacer scroll, el header toma fondo */
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1440px; margin: 0 auto;
  gap: 1rem;
}
.header-left, .header-right { display: flex; align-items: center; gap: 1rem; }

/* Hamburger animated icon */
.menu-btn {
  width: 32px; height: 32px;
  background: transparent; border: none; color: var(--fg);
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  padding: 0;
  transition: color .2s var(--ease);
}
.menu-btn:hover { color: var(--lime); }
.menu-btn .bar {
  display: block; width: 22px; height: 2px; background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
  transform-origin: center;
}
.menu-btn.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-btn.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* === Cart link + hover dropdown === */
.cart-link {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--fg);
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color .2s var(--ease);
}
.cart-link:hover { color: var(--lime); }
.cart-pill {
  position: absolute;
  top: -6px; right: -6px;
  background: none;
  color: var(--lime);
  font-size: .6rem; font-weight: 800;
  min-width: 14px; text-align: center;
  box-shadow: none;
}
/* Cart click dropdown */
.cart-wrap { position: relative; }
.cart-dropdown {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  width: 320px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  padding: 1rem;
  z-index: 50;
}
@media(max-width: 640px) {
  .cart-dropdown { position: fixed; top: 60px; right: 1rem; left: 1rem; width: auto; }
}
.cart-dropdown-empty { color: var(--fg-dim); font-size: .85rem; text-align: center; padding: 1.5rem 0; }
.cart-dropdown-item {
  display: flex; gap: .6rem; align-items: center;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.cart-dropdown-item:last-of-type { border-bottom: none; }
.cart-dropdown-img {
  width: 38px; height: 46px; background: var(--bg); border-radius: 6px; overflow: hidden; flex-shrink: 0;
}
.cart-dropdown-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-dropdown-info { flex: 1; min-width: 0; }
.cart-dropdown-info b { display: block; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.cart-dropdown-info span { font-size: .7rem; color: var(--fg-dim); }
.cart-dropdown-total {
  display: flex; justify-content: space-between;
  padding-top: .6rem; margin-top: .4rem; border-top: 1px solid var(--border);
  font-weight: 700; font-size: .9rem;
}

/* === Theme toggle (icono sol/luna con animación rotate+crossfade) === */
.theme-btn {
  width: 40px; height: 40px;
  background: transparent; border: none; color: var(--fg);
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  transition: background-color .25s var(--ease);
}
.theme-btn:hover .icon {
  animation: theme-glow .6s var(--ease);
}
@keyframes theme-glow {
  0% { transform: rotate(0) scale(1); filter: brightness(1); }
  40% { transform: rotate(20deg) scale(1.15); filter: brightness(1.3); }
  70% { transform: rotate(-8deg) scale(1.05); filter: brightness(1.1); }
  100% { transform: rotate(0) scale(1); filter: brightness(1); }
}
/* Keep visible icon stable during hover */
[data-theme="dark"] .theme-btn:hover .ico-sun,
[data-theme="light"] .theme-btn:hover .ico-moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-btn .icon {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  transition: transform .5s var(--ease), opacity .35s var(--ease);
}
.theme-btn .icon svg { width: 20px; height: 20px; }
.theme-btn .ico-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(.4);
  color: #e08a00;
}
[data-theme="light"] .theme-btn .ico-sun { color: #8a5500; }
.theme-btn .ico-moon {
  opacity: 0;
  transform: rotate(90deg) scale(.4);
  color: #e2e8ff;
}
[data-theme="light"] .theme-btn .ico-moon { color: #333; }
[data-theme="dark"] .theme-btn .ico-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}
[data-theme="light"] .theme-btn .ico-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}
/* stars twinkling around moon (visible in light mode) */
.theme-btn .ico-moon::before,
.theme-btn .ico-moon::after {
  content: "";
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #555;
  opacity: 0;
}
[data-theme="light"] .theme-btn .ico-moon::before {
  top: 6px; right: 8px; opacity: .5;
  animation: twinkle 2s ease-in-out infinite;
}
[data-theme="light"] .theme-btn .ico-moon::after {
  top: 22px; right: 5px; opacity: .4;
  animation: twinkle 2.5s ease-in-out infinite .8s;
}
@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(.6); }
  50% { opacity: .8; transform: scale(1.3); }
}

.logo-cs {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.logo-cs img { width: 100%; height: 100%; object-fit: contain; transition: filter .25s var(--ease); }
[data-theme="light"] .logo-cs img { filter: brightness(0) saturate(100%); }

/* HOMEPAGE MOBILE only — pre-scroll, the header sits over the enlarged lime hero circle
   that wraps around it. Logo + icons go in solid charcoal on the lime for high contrast.
   On desktop the circle is centered/smaller and the header sits on the dark page background,
   so we keep the normal fg-color icons there. Other pages don't have a circle either. */
@media (max-width: 767px) {
  body.page-home .site-header:not(.scrolled) .logo-cs img { filter: brightness(0); }
  [data-theme="light"] body.page-home .site-header:not(.scrolled) .logo-cs img { filter: brightness(0); }
  body.page-home .site-header:not(.scrolled) .menu-btn,
  body.page-home .site-header:not(.scrolled) .cart-link,
  body.page-home .site-header:not(.scrolled) .theme-btn {
    color: #231f20;
  }
  body.page-home .site-header:not(.scrolled) .menu-btn:hover,
  body.page-home .site-header:not(.scrolled) .cart-link:hover,
  body.page-home .site-header:not(.scrolled) .theme-btn:hover { color: rgba(35,31,32,.6); }
}
[data-theme="light"] .menu-btn,
[data-theme="light"] .cart-link,
[data-theme="light"] .theme-btn { color: #231f20; }
[data-theme="light"] .cart-link:hover,
[data-theme="light"] .menu-btn:hover { color: var(--lime); }

/* Slide-out menu with smooth animations */
.menu-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }
.menu-panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 101;
  width: min(320px, 85vw);
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: 1.75rem 1.5rem;
  transform: translateX(-105%);
  transition: transform .4s var(--ease);
  display: flex; flex-direction: column; gap: .25rem;
  box-shadow: 20px 0 60px rgba(0,0,0,.4);
}
.menu-panel.open { transform: translateX(0); }
.menu-panel .close {
  background: transparent; border: none; color: var(--fg);
  font-size: 1.5rem; cursor: pointer;
  transition: transform .2s var(--ease), color .2s;
}
.menu-panel .close:hover { color: var(--lime); transform: rotate(90deg); }
.menu-panel a {
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem; font-weight: 500;
  color: var(--fg);
  display: flex; align-items: center; gap: .65rem;
  transition: color .15s, padding-left .2s var(--ease);
  opacity: 0; transform: translateX(-20px);
}
.menu-panel.open a {
  opacity: 1; transform: translateX(0);
  transition: color .15s, padding-left .2s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
.menu-panel.open a:nth-child(2) { transition-delay: .05s; }
.menu-panel.open a:nth-child(3) { transition-delay: .1s; }
.menu-panel.open a:nth-child(4) { transition-delay: .15s; }
.menu-panel.open a:nth-child(5) { transition-delay: .2s; }
.menu-panel.open a:nth-child(6) { transition-delay: .25s; }
.menu-panel.open a:nth-child(7) { transition-delay: .3s; }
.menu-panel a:hover { color: var(--lime); padding-left: .5rem; }
.menu-panel a svg, .menu-dropdown-head svg:first-child { color: var(--lime); flex-shrink: 0; opacity: .7; transition: opacity .2s var(--ease); }
.menu-panel a:hover svg, .menu-dropdown-head:hover svg:first-child { opacity: 1; }
.menu-panel .cart-count { background: var(--lime); color: var(--lime-fg); padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700;}

/* Menu dropdown (contacto) */
.menu-dropdown { border-bottom: 1px solid var(--border); }
.menu-dropdown-head {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 0;
  font-size: 1.05rem; font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  transition: color .15s, padding-left .2s var(--ease);
}
.menu-dropdown-head::-webkit-details-marker { display: none; }
.menu-dropdown-head:hover { color: var(--lime); padding-left: .5rem; }
.menu-dropdown-head svg:last-child { transition: transform .25s var(--ease); color: var(--fg-dim); }
.menu-dropdown[open] > .menu-dropdown-head svg:last-child { transform: rotate(180deg); }
.menu-dropdown-body {
  padding: 0 0 1rem;
  animation: menu-drop-open .3s var(--ease);
}
@keyframes menu-drop-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Contact icons — small FA icons only */
.menu-contact-row {
  display: flex; gap: .75rem; justify-content: center;
  margin-top: .65rem; padding-top: .65rem;
  border-top: 1px solid var(--border);
}
.menu-contact-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 1rem;
  color: var(--fg-dim);
  border-radius: 50%;
  transition: all .2s var(--ease);
  border: none !important; padding: 0 !important;
  background: none !important;
}
.menu-contact-icon:hover { animation: icon-pop .4s var(--ease); }
@keyframes icon-pop {
  0% { transform: scale(1); }
  25% { transform: scale(1.25) rotate(-8deg); }
  50% { transform: scale(1.1) rotate(4deg); }
  75% { transform: scale(1.18) rotate(-2deg); }
  100% { transform: scale(1.15) rotate(0); }
}
.menu-contact-icon.wa { color: #25d366; }
.menu-contact-icon.em { color: var(--lime); }
.menu-contact-icon.wa:hover { color: #1ebe57; }
.menu-contact-icon.em:hover { color: var(--lime-hi); }

/* View cart link with arrow slide */
.view-cart-link {
  display: block; text-align: center; margin-top: .5rem;
  font-size: .78rem; color: var(--fg-muted);
  transition: color .2s var(--ease);
  border: none !important; padding: 0 !important;
}
.view-cart-link:hover { color: var(--lime); }
.view-cart-link .arrow {
  display: inline-block;
  transition: transform .3s var(--ease);
}
.view-cart-link:hover .arrow { transform: translateX(4px); }

/* Menu cart items */
.menu-cart-item {
  display: flex; gap: .6rem; align-items: center;
  padding: .45rem 0;
  font-size: .82rem;
  border-bottom: 1px solid var(--border);
}
.menu-cart-item:last-of-type { border-bottom: none; }
.menu-cart-img {
  width: 36px; height: 44px; background: var(--bg); border-radius: 6px; overflow: hidden; flex-shrink: 0;
}
.menu-cart-img img { width: 100%; height: 100%; object-fit: cover; }
.menu-cart-info { flex: 1; min-width: 0; }
.menu-cart-info b { display: block; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-cart-info span { font-size: .7rem; color: var(--fg-dim); }
.btn-ghost {
  background: transparent; color: var(--fg);
  border: 1.5px solid var(--border) !important;
}
.btn-ghost:hover { border-color: var(--lime) !important; color: var(--lime); }
.menu-quick-form {
  display: flex; flex-direction: column; gap: .4rem;
}
.menu-quick-form input,
.menu-quick-form textarea {
  font-size: .8rem;
  padding: .5rem .7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg);
}
.menu-quick-form input::placeholder,
.menu-quick-form textarea::placeholder { color: var(--fg-dim); }
.menu-quick-form textarea { resize: none; }
.menu-quick-form .btn { margin-top: .3rem; }

/* === TOAST === */
#toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 99999;
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none; max-width: 380px; width: calc(100% - 2rem);
}
.toast {
  pointer-events: auto;
  padding: .75rem 1rem .75rem .85rem;
  border-radius: var(--radius, 12px);
  font-size: .85rem; line-height: 1.4;
  display: flex; align-items: center; gap: .6rem;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,.25);
  animation: toast-in .3s ease-out;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.toast-success { background: rgba(202,214,54,.15); border: 1px solid rgba(202,214,54,.3); color: var(--lime, #cad636); }
.toast-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: var(--danger, #ef4444); }
.toast-info { background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.3); color: #60a5fa; }
.toast-icon { flex-shrink: 0; width: 18px; height: 18px; }
.toast-msg { flex: 1; }
.toast-close { flex-shrink: 0; cursor: pointer; opacity: .6; transition: opacity .2s; background: none; border: none; color: inherit; padding: 2px; }
.toast-close:hover { opacity: 1; }
.toast.removing { animation: toast-out .25s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }

/* === BUTTON === */
a.btn, button.btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 2rem;
  font-family: inherit; font-weight: 700; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  border: none; border-radius: 15px;
  cursor: pointer;
  transition: all .25s var(--ease);
  text-align: center;
  text-decoration: none;
}
.btn-accent, a.btn-accent, button.btn-accent {
  background: var(--btn) !important;
  color: var(--btn-fg) !important;
  box-shadow: 0 4px 12px rgba(202,214,54,.15);
  text-align: center;
  justify-content: center;
}
.btn-accent:hover { background: var(--btn-hi); box-shadow: 0 8px 20px rgba(202,214,54,.3); transform: translateY(-2px); }
.btn-accent:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(202,214,54,.15); }
.btn-ghost { background: transparent; color: var(--fg); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--lime); color: var(--lime); }

/* === HERO: medidas exactas del original === */
.hero {
  padding: 0 20px 10px;
  margin: 0;
  position: relative;
  display: flex;
  justify-content: center;
  overflow: visible;
  max-width: 100%;
}
@media (max-width: 640px) {
  .hero { overflow-x: clip; }
}
.hero-wrap {
  position: relative;
  width: min(94vw, 600px);
  height: min(94vw, 600px);
  flex-shrink: 0;
  margin: -60px 0 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #dde44a 0%, #c6d12e 38%, #a3ad28 72%, #818917 100%);
  box-shadow:
    inset -30px -60px 120px rgba(50,55,10,.25),
    inset 30px 40px 80px rgba(255,255,200,.08);
}
.hero-circle {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 35% 30%, #dde44a 0%, #c6d12e 38%, #a3ad28 72%, #818917 100%);
  border-radius: 50%;
  z-index: 1;
  box-shadow:
    inset -30px -60px 120px rgba(50,55,10,.25),
    inset 30px 40px 80px rgba(255,255,200,.08);
}
.hero-wrap img {
  position: absolute;
  z-index: 2;
  left: 20%;          /* Original: 120/600 = 20% left offset */
  top: 20%;           /* Original: 120/600 = 20% top offset (vert center for 600x480) */
  width: 100%;        /* 600px de 600px */
  height: auto;
  max-width: none;    /* Permite overflow */
}
.hero-text {
  position: absolute;
  z-index: 3;
  top: 32%; left: -30%;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,.3);
  pointer-events: none;
  width: 75%;
  line-height: 1.05;
  text-align: right;
}
[data-theme="light"] .hero-text { color: #1a1a1a; text-shadow: none; }
[data-theme="light"] .hero-text .brand { opacity: .7; }
[data-theme="light"] .hero-text .sub { opacity: .7; }
.hero-text .brand {
  font-size: clamp(.72rem, 1.1vw, .95rem);
  font-weight: 500;
  margin-bottom: .5rem;
  opacity: .9;
}
.hero-text .title {
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: .97;
}
.hero-text .sub {
  font-size: clamp(.68rem, 1.1vw, .88rem);
  font-weight: 500;
  margin-top: .85rem;
  opacity: .9;
}
@media (max-width: 767px){
  /* Header compact */
  .logo-cs { width: 32px; height: 32px; }
  .site-header { padding: .6rem 1rem; }

  /* Hero mobile: enlarged lime circle that wraps around the top header.
     The circle pushes up (negative top margin) and out (negative side margins) so
     its top arc covers the full width behind the logo / hamburger / cart icons.
     The book image stays roughly where it was — only repositioned for the new size. */
  .hero { padding: 0 0 0; overflow: visible; }
  .section:first-of-type { padding-top: 0; }
  .hero-wrap {
    width: 100vw; height: 100vw;
    margin: -90px -10px 0;  /* extends above header + slightly past viewport edges */
    flex-shrink: 0;
  }
  .hero-text { top: 30%; left: -22%; width: 72%; }
  .hero-text .title { font-size: clamp(.95rem, 4.5vw, 1.3rem); }
  .hero-text .brand { font-size: .72rem; letter-spacing: .08em; }
  .hero-text .sub { font-size: .72rem; margin-top: .5rem; }
  /* Book image: re-centered for the bigger circle. Original 25% / 16% drifted off. */
  .hero-wrap img { left: 22%; top: 26%; width: 95%; }

  /* Section right after hero gets a bit more breathing room since the circle now extends down. */
  #products { padding-top: 1.25rem; }

  /* Pickup 4 cols even on mobile (compact like OG) */
  .pickup-grid { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .pickup-card { padding: .65rem .4rem; }
  .pickup-card b { font-size: .72rem; }
  .pickup-card span { font-size: .6rem; }

  /* Product cards on mobile — three clear vertical sections:
     1) Image (own framed area)
     2) Identity (title + price)
     3) Order form / Added state
     We force `display:block` on .pcard-top so flex children never stay side-by-side. */
  .products-grid { grid-template-columns: 1fr; gap: 1rem; }
  .pcard {
    display: block;
    padding: 0;
    text-align: left;
  }
  .pcard-top {
    display: block;
    padding: 0;
  }
  .pcard-image {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 240px;  /* fixed so toggling A/B never reflows the card */
    max-width: none;
    margin: 0; padding: 1.25rem;
    background: var(--bg-elev);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-sizing: border-box;
  }
  .pcard-image img {
    max-height: 100%; max-width: 100%;
    width: auto; height: auto;
    object-fit: contain;
  }
  .pcard-info {
    display: block;
    padding: 1.1rem 1.25rem .75rem;
    text-align: left;
  }
  .pcard-title {
    font-size: 1.15rem; font-weight: 700;
    margin: 0 0 .35rem; text-align: left;
  }
  .pcard-price {
    font-size: 1.4rem; margin: 0; padding: 0;
    text-align: left;
  }
  .pcard-price .old { font-size: .85rem; display: inline; margin-right: .4rem; }

  /* The form sits in its own bordered section underneath */
  .pcard-form {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--border);
  }
  .pcard-cta { padding: .75rem 1.5rem; font-size: .85rem; width: 100%; max-width: none; min-width: 0; }
  .pcard-added {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .pcard-soldout { margin: 0 1.25rem 1.25rem; }

  /* Past grid: 2 cols compact (kept tight — these are thumbnails of older years) */
  .past-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .past-grid .pcard {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: .6rem .5rem .75rem;
  }
  .past-grid .pcard-image {
    background: transparent; padding: 0; min-height: auto;
    width: auto; height: auto; border-radius: 0;
  }
  .past-grid .pcard-info { padding: .5rem 0 0; text-align: center; }
  .past-grid .pcard-title { font-size: .78rem; margin-bottom: .3rem; text-align: center; }
  .past-grid .pcard-price { text-align: center; font-size: 1rem; }
  .past-grid .pcard-image img { max-height: 120px; max-width: 100%; }
  .past-grid .pcard-price { font-size: .9rem; margin: .1rem 0 .4rem; }
  .past-grid .pcard-cta { padding: .35rem .8rem; font-size: .6rem; align-self: center; }

  /* Sections tighter */
  .section { padding: 1.25rem 0; }
  .section h2 { font-size: 1rem; padding: 0 .25rem; word-break: break-word; }
  .section .lead { font-size: .75rem; margin-bottom: .75rem; padding: 0 .25rem; word-break: break-word; overflow-wrap: anywhere; hyphens: auto; }
  /* Container shouldn't push beyond viewport on small screens */
  .container { max-width: 100%; padding: 0 1rem; }

  /* Footer mobile */
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
  .footer-logos { justify-content: center; }
  .footer-links { justify-content: center; }
  .footer-credit { align-self: center; }
}

/* === SECTION === */
.section { padding: 1.75rem 0; }
.section:first-of-type { padding-top: 1rem; }
.section h2 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 700;
  margin-bottom: .2rem;
}
.section .lead {
  color: var(--fg-muted);
  font-size: .88rem; font-weight: 400;
  margin: 0 0 1rem;
}
.section .lead.regular { font-weight: 400; color: var(--fg-muted); }

/* === PICKUP CARDS === */
.pickup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
}
@media(min-width: 768px){ .pickup-grid { grid-template-columns: repeat(4, 1fr); } }
.pickup-card {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius);
  padding: 1.15rem 1rem;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
  text-align: center;
  transition: transform .25s var(--ease);
  cursor: default;
}
.pickup-card:hover { transform: translateY(-2px); }
.pickup-card b {
  display: block;
  font-size: .95rem; font-weight: 700;
  color: var(--fg);
  margin-bottom: .15rem;
}
.pickup-card span {
  display: block;
  font-size: .8rem;
  color: var(--fg-muted);
  font-weight: 400;
}

/* === PRODUCT CARDS === */
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media(min-width: 680px){ .products-grid { grid-template-columns: repeat(2, 1fr); } }
.pcard {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  text-align: left;
  position: relative;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -6px rgba(0,0,0,.3); }
.pcard-image img { transition: transform .4s var(--ease); }
.pcard:hover .pcard-image img { transform: scale(1.04); }
.pcard-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}
.pcard-image {
  width: 170px; height: 210px; flex-shrink: 0;
  display: grid; place-items: center;
}
.pcard-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,.35));
}
.pcard-price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fg);
  margin: .15rem 0;
}
.pcard-price .old {
  display: block;
  font-size: 1rem;
  text-decoration: line-through;
  color: var(--fg-dim);
  margin-bottom: .15rem;
  font-weight: 400;
}
.pcard-cta { min-width: 100px; }

/* Card top: image left, info right */
.pcard-top {
  display: flex; gap: 1rem; align-items: stretch;
  width: 100%; flex: 1;
}
.pcard-info {
  display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0;
  justify-content: flex-start; gap: .25rem;
}
.pcard-soldout {
  display: inline-block; padding: .35rem .85rem; border-radius: 10px;
  background: var(--fg-dim); color: #fff; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}

/* Inline order form inside card */
.pcard-form {
  width: 100%;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
  animation: pcard-slide .25s var(--ease);
}
@keyframes pcard-slide {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 500px; }
}
.pcard-form form { display: flex; flex-direction: column; gap: .4rem; }
.pcard-student-row {
  display: flex; gap: .35rem; align-items: center;
}
.pcard-input {
  flex: 1;
  padding: .4rem .55rem !important;
  font-size: .75rem !important;
  border-radius: 8px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  min-width: 0;
}
.pcard-select { flex: 0 0 90px; }
.pcard-remove {
  background: none; border: none; color: var(--fg-dim); cursor: pointer;
  font-size: .8rem; padding: .25rem; border-radius: 6px;
  transition: color .15s;
}
.pcard-remove:hover { color: #ff5e5e; }
.pcard-actions {
  display: flex; gap: .4rem; margin-top: .35rem; align-items: center; justify-content: space-between;
}
.pcard-add-student {
  background: none;
  border: 1px dashed color-mix(in srgb, var(--lime) 30%, transparent);
  color: var(--lime);
  padding: .35rem .6rem; border-radius: 8px; cursor: pointer;
  font-size: .68rem; font-family: inherit; font-weight: 500; white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s;
  opacity: .8;
}
.pcard-add-student:hover { background: color-mix(in srgb, var(--lime) 8%, transparent); border-color: var(--lime); opacity: 1; }
.pcard-submit {
  padding: .4rem .85rem !important;
  font-size: .68rem !important;
  border-radius: 10px !important;
  letter-spacing: .04em !important;
}
.pcard-added {
  display: flex; align-items: center; gap: .4rem;
  color: var(--lime); font-size: .8rem; font-weight: 600;
}

/* Fly-to-cart animation */
@keyframes fly-to-cart {
  0% { opacity: 1; transform: scale(1) translate(0, 0); }
  70% { opacity: .6; transform: scale(.4) translate(var(--fly-x, 300px), var(--fly-y, -400px)); }
  100% { opacity: 0; transform: scale(.2) translate(var(--fly-x, 300px), var(--fly-y, -400px)); }
}
.fly-dot {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--lime);
  border-radius: 50%;
  z-index: 999;
  pointer-events: none;
  animation: fly-to-cart .6s var(--ease) forwards;
}
.pcard-add-more {
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--lime) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--lime) 25%, transparent);
  color: var(--lime);
  padding: .4rem .85rem; border-radius: 8px; cursor: pointer;
  font-size: .72rem; font-family: inherit; font-weight: 600;
  line-height: 1; text-decoration: none; box-sizing: border-box;
  min-height: 30px;
  transition: background .2s var(--ease), border-color .2s;
}
.pcard-add-more:hover { background: color-mix(in srgb, var(--lime) 20%, transparent); border-color: var(--lime); }

/* Past compact */
.past-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media(min-width: 600px){ .past-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width: 900px){ .past-grid { grid-template-columns: repeat(5, 1fr); } }
.past-grid .pcard { padding: 1rem .85rem 1.25rem; }
.past-grid .pcard-title { font-size: 1rem; line-height: 1.2; margin-bottom: .85rem; }
.past-grid .pcard-image { min-height: 180px; }
.past-grid .pcard-image img { max-height: 180px; }
.past-grid .pcard-price { font-size: 1.3rem; margin: .25rem 0 .85rem; }
.past-grid .pcard-price .old { font-size: .85rem; }
.past-grid .pcard-cta { padding: .45rem 1.25rem; font-size: .7rem; }

.past-notice {
  font-size: .85rem;
  color: var(--fg-muted);
  font-weight: 500;
  margin-bottom: 1rem;
}
.past-selector { max-width: 100%; }
@media(min-width: 680px) { .past-selector { max-width: calc(50% - .5rem); } }
.past-dropdown {
  width: 100%;
  padding: .7rem 1rem;
  font-size: .95rem;
  font-weight: 600;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .2s var(--ease);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 2.5rem;
}
.past-dropdown:focus { border-color: var(--lime); outline: none; }
.past-dropdown:hover { border-color: var(--fg-dim); }

/* Photo toggle A/B */
.photo-toggle {
  display: flex; gap: .3rem; margin: .25rem 0;
}
.photo-toggle-btn {
  background: var(--bg); border: 1px solid var(--border); color: var(--fg-muted);
  padding: .3rem .65rem; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: .72rem; font-weight: 600;
  transition: all .2s var(--ease);
}
.photo-toggle-btn.active {
  background: var(--lime); color: var(--lime-fg); border-color: var(--lime);
}
.photo-toggle-btn:hover:not(.active) { border-color: var(--lime); color: var(--lime); }
/* Reserve enough vertical space so toggling between Photo Package A and B (which have
   descriptions of different length) doesn't shift the card height as the user clicks. */
.pcard-desc { font-size: .75rem; color: var(--fg-muted); margin: .15rem 0 0; line-height: 1.35; min-height: 4em; }

/* === STORE CLOSED === */
.store-closed {
  position: fixed; inset: 0;
  z-index: 999;
  background: rgba(0,0,0,.85);
  color: white;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 2rem;
  backdrop-filter: blur(8px);
}
.store-closed-inner {
  max-width: 560px;
  background: var(--bg-card);
  border: none;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: 0 25px 60px rgba(0,0,0,.5);
}
.store-closed-inner h2 {
  font-size: 1.5rem; font-weight: 800; margin: 0 0 1rem; color: var(--fg);
}
.store-closed-inner p {
  font-size: .9rem; line-height: 1.7; color: var(--fg-muted); margin: 0;
}
[data-theme="light"] .store-closed { background: rgba(255,255,255,.9); }
[data-theme="light"] .store-closed-inner { box-shadow: 0 25px 60px rgba(0,0,0,.15); }

/* === FORMS === */
input:not([type=radio]):not([type=checkbox]), select, textarea {
  width: 100%;
  padding: .7rem .95rem;
  font-family: inherit; font-size: .9rem;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--lime); }
label { display: block; font-size: .82rem; font-weight: 500; margin-bottom: .35rem; color: var(--fg); }
.hint { font-size: .72rem; color: var(--fg-muted) !important; margin-top: .3rem; opacity: .7; }

/* === FOOTER (fiel: 2 logos + credit) === */
footer.site-footer {
  background: var(--bg);
  padding: 2rem 1.5rem 1.25rem;
  margin-top: 2.5rem;
}
.footer-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 1rem;
}
.footer-logos { display: flex; gap: 1.25rem; align-items: center; }
.footer-logos img { height: 36px; width: auto; opacity: .7; }
.footer-logos img[alt*="libro"] { height: 44px; }
.footer-credit {
  font-size: .75rem; color: var(--fg-dim);
  text-align: center;
}
.footer-credit b { color: var(--fg-muted); font-weight: 500; }
@media(min-width: 768px){
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .8rem; }
.footer-links a { color: var(--fg-muted); }
.footer-links a:hover { color: var(--lime); }

/* === MOBILE STICKY CART === */
.mcb {
  display: none;
  position: fixed; bottom: .75rem; left: .75rem; right: .75rem;
  z-index: 35;
  background: var(--bg-elev);
  border: none;
  border-radius: 999px;
  padding: .45rem .45rem .45rem 1.25rem;
  align-items: center; gap: .75rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
@media(max-width: 768px){ .mcb { display: flex; } body.has-cart { padding-bottom: 80px; } }
.mcb-info { flex: 1; display: flex; flex-direction: column; }
.mcb-info b { font-size: .95rem; }
.mcb-info span { font-size: .7rem; color: var(--fg-muted); }
.mcb .btn { padding: .5rem 1.1rem; font-size: .7rem; }

/* === ACCORDION === */
.accordion { border: none; }
.accordion-head {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  list-style: none;
  padding: .5rem 0;
  user-select: none;
}
.accordion-head::-webkit-details-marker { display: none; }
.accordion-head h2 { margin: 0; }
.accordion-chevron {
  transition: transform .3s var(--ease);
  color: var(--fg-dim);
  flex-shrink: 0;
}
.accordion[open] > .accordion-head .accordion-chevron { transform: rotate(180deg); }
.accordion-body {
  animation: accordion-open .35s var(--ease);
  overflow: hidden;
}
@keyframes accordion-open {
  from { opacity: 0; max-height: 0; transform: translateY(-10px); }
  to { opacity: 1; max-height: 2000px; transform: translateY(0); }
}

/* Focus visible for keyboard navigation */
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* utils */
.muted { color: var(--fg-muted); }
.dim { color: var(--fg-dim); }
.text-center { text-align: center; }

/* ─── MOBILE OVERRIDES (must come AFTER desktop rules to win the cascade) ───────
   Earlier mobile rules inside the @media block at line ~595 were being overridden
   by the global `.pcard*` and `.hero*` rules defined later in the file (CSS picks
   the last rule when specificity is equal, regardless of @media wrapping).
   This block re-applies the critical mobile-only layout rules at the END so they
   always win on small viewports. */
@media (max-width: 767px) {
  /* Container & section text: prevent overflow on narrow viewports */
  .container { max-width: 100%; padding: 0 1rem; box-sizing: border-box; }
  .section h2 { font-size: 1rem; padding: 0; word-break: break-word; }
  .section .lead {
    font-size: .8rem; margin-bottom: .85rem;
    padding: 0; line-height: 1.4;
    word-break: break-word; overflow-wrap: anywhere; hyphens: auto;
    max-width: 100%;
  }

  /* HERO — enlarged lime circle that wraps the header.
     Layout: text on the LEFT half, book image on the RIGHT half. They must NOT
     overlap. Both pushed slightly down so they sit comfortably under the header. */
  .hero-wrap {
    width: 95vw; height: 95vw;
    margin: -90px auto 0;
    flex-shrink: 0;
  }
  .hero-wrap img {
    /* Book image bigger — almost reaches the right edge of the circle.
       Pushed down so it sits in the lower half, leaving more space above. */
    left: 28%;
    top: 42%;
    width: 78%;
    height: auto;
    max-width: none;
  }
  .hero-text {
    /* Text on the left half, RIGHT-aligned so it visually points toward the book.
       Wider area + smaller-but-bold title so "Yearbooks & Photo packages" stays as
       2 clean lines (one per content noun) instead of wrapping awkwardly. */
    top: 50%;
    left: 0;
    width: 50%;
    text-align: right;
    padding-right: 4px;
    box-sizing: border-box;
  }
  .hero-text .title {
    font-size: clamp(.95rem, 4.6vw, 1.3rem);
    line-height: 1.08;
    font-weight: 800;
    word-break: keep-all;       /* don't break words */
    overflow-wrap: normal;       /* break only at spaces */
  }
  .hero-text .brand { font-size: .68rem; margin-bottom: .35rem; letter-spacing: .1em; }
  .hero-text .sub   { font-size: .58rem; margin-top: .35rem; line-height: 1.3; }

  /* PRODUCT CARDS — vertical stack, three sections (image / identity / form). */
  .products-grid { grid-template-columns: 1fr; gap: 1rem; }
  .pcard {
    display: block;
    flex-direction: column;
    padding: 0;
    text-align: left;
    align-items: stretch;
  }
  .pcard-top {
    display: block;
    flex-direction: column;
    padding: 0;
    gap: 0;
    width: 100%;
  }
  .pcard-image {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 240px;  /* fixed so toggling A/B never reflows the card */
    max-width: none;
    margin: 0; padding: 1.25rem;
    background: var(--bg-elev);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-sizing: border-box;
  }
  .pcard-image img {
    max-height: 100%; max-width: 100%;
    width: auto; height: auto;
    object-fit: contain;
  }
  .pcard-info {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 1.1rem 1.25rem .75rem;
    text-align: left;
    width: 100%;
    gap: .25rem;
  }
  .pcard-title {
    font-size: 1.15rem; font-weight: 700;
    margin: 0 0 .35rem; text-align: left;
  }
  .pcard-price {
    font-size: 1.4rem; margin: 0; padding: 0;
    text-align: left;
  }
  .pcard-price .old { font-size: .85rem; display: inline; margin-right: .4rem; }
  .pcard-form {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--border);
    margin-top: 0;
  }
  .pcard-cta { padding: .75rem 1.5rem; font-size: .85rem; width: 100%; max-width: none; min-width: 0; }
  .pcard-added {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .pcard-soldout { margin: 0 1.25rem 1.25rem; }

  /* Past yearbooks grid — keep 2 cols, compact thumbnails */
  .past-grid .pcard {
    display: flex; flex-direction: column;
    text-align: center;
    padding: .6rem .5rem .75rem;
  }
  .past-grid .pcard-image {
    background: transparent; padding: 0; min-height: auto;
    width: auto; height: auto; border-radius: 0;
  }
  .past-grid .pcard-info { padding: .5rem 0 0; text-align: center; align-items: center; }
  .past-grid .pcard-title { font-size: .78rem; margin-bottom: .3rem; text-align: center; }
  .past-grid .pcard-price { text-align: center; font-size: .9rem; margin: .1rem 0 .4rem; }
  .past-grid .pcard-image img { max-height: 120px; max-width: 100%; }
  .past-grid .pcard-cta { padding: .35rem .8rem; font-size: .6rem; align-self: center; }
}