/* ==========================================================================
   Design tokens - blue/orange modern storefront theme.
   Variable NAMES kept from the previous theme so every page (incl. admin)
   re-skins automatically without hunting down inline var() usage.
   ========================================================================== */
:root {
  --paper: #E8EEFB;
  --card: #FFFFFF;
  --ink: #101828;
  --ink-soft: #5B6478;
  --green: #1657E0;
  --green-dark: #0B2545;
  --brass: #F15C0F;
  --brass-light: #FF8A47;
  /* Tuned to match the logo's true orange (#F15C0F) rather than the old
     amber/brass tone. #F15C0F only passes ~3.35:1 against white/near-white
     - under WCAG AA's 4.5:1 for text (fine for large decorative shapes and
     icons, and for text on the DARK navy backgrounds - footer, hero-center
     - where it already tests well). These two keep the same orange hue but
     darkened just enough for AA text contrast on light backgrounds, so
     nothing drifts toward brown. */
  --brass-text: #D2470A;
  --brass-deep: #9A3406;
  --stamp-red: #DC2626;
  --rule: #E6E9F2;

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 2px 6px rgba(11,37,69,0.06), 0 10px 24px -12px rgba(11,37,69,0.18);
  --shadow-pop: 0 16px 40px -12px rgba(11,37,69,0.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Subtle brand-toned wash (echoes the hero gradient) instead of a flat
     fill, so every page - not just the homepage - feels considered rather
     than blank. Fixed attachment keeps it steady while the page scrolls. */
  background:
    radial-gradient(1200px circle at 12% 0%, rgba(22,87,224,0.05), transparent 55%),
    radial-gradient(1000px circle at 100% 0%, rgba(241,92,15,0.045), transparent 50%),
    var(--paper);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 700px) {
  /* fixed backgrounds cause repaint jank on mobile scroll/keyboard toggle */
  body { background-attachment: scroll; }
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
  color: var(--green-dark);
}
h1 { font-size: clamp(1.9rem, 3.4vw, 2.65rem); line-height: 1.14; }
h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 0.85em; color: var(--ink-soft); }
.container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Accessibility: skip link ---- */
/* Visually hidden until a keyboard user tabs to it - lets them jump past
   the header/nav straight to the page's main content instead of having to
   tab through every nav link first. */
.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  z-index: 1000;
  background: var(--green-dark);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
}

/* .shop-search suppresses the input's own outline (below) so a plain
   rectangle doesn't cut across the rounded search pill - but that means a
   keyboard user tabbing into it needs the *pill itself* to show focus
   instead, or there'd be no visible indicator at all. */
.shop-search:focus-within {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ---- Header / nav ---- */
.site-header {
  /* Solid, quiet background instead of a blue/orange wash - the logo itself
     is the colorful element (sky blue + gold), so a busy gradient behind it
     competed with it instead of framing it. A clean white field lets the
     logo read immediately, with the brand-gradient rule along the bottom
     edge still carrying the color story - now a slowly shifting gradient
     (see ::after below) instead of one flat static bar, so it reads as a
     bit of live color rather than a hard "boundary" line under the header. */
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(11,37,69,0.06), 0 6px 20px -14px rgba(11,37,69,0.25);
  position: sticky; top: 0; z-index: 60;
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  /* Seamless loop requires the tiled pattern's start and end colors to
     match - the previous version went green -> brass -> green -> brass,
     ending on a different color than it started, so wherever that seam
     fell in the tiled background it created a visible hard jump that
     scrolled across the bar throughout the animation, not just at reset.
     This one is a closed loop (green -> brass -> green) doubled in a
     220%-wide background, then shifted by exactly one pattern-width
     (110%, i.e. half the background-size) - so the tile boundary always
     lands on matching green-to-green, with no seam ever visible. */
  background: linear-gradient(90deg, var(--green) 0%, var(--brass) 25%, var(--green) 50%, var(--brass) 75%, var(--green) 100%);
  background-size: 220% 100%;
  animation: headerGradientShift 8s linear infinite;
}
@keyframes headerGradientShift {
  from { background-position: 0% 0; }
  to   { background-position: -110% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::after { animation: none; }
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; gap: 18px; }
.site-header .icon-btn { background: var(--paper); }

/* Category / menu button - a plain 3-line "hamburger" icon, the universal
   menu symbol, so its purpose is obvious at a glance. Positioned purely by
   the container's flex gap (no negative margins) so its spacing from the
   logo stays correct and collision-free at every viewport width.
   Selector is doubled up (.icon-btn.cat-menu-btn) so it reliably wins over
   the plain .icon-btn circle styling regardless of stylesheet order. */
.icon-btn.cat-menu-btn {
  width: 44px; height: 44px; border-radius: 999px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  border: none; color: #fff; box-shadow: 0 4px 14px -4px rgba(22,87,224,0.55);
  flex-shrink: 0;
}
.icon-btn.cat-menu-btn:hover { background: var(--green-dark); }

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); flex-shrink: 1; min-width: 0; overflow: hidden; }
.brand-logo { height: 40px; width: auto; display: block; }
.footer-brand .brand-logo { height: 32px; }
/* The logo file already has "Excello Books" lettering baked into it (it's
   a full wordmark lockup, not a standalone icon) - so the header just
   shows it plain and a bit larger for presence, instead of wrapping it in
   a badge that crops/squashes its wide aspect ratio. */
.site-header .brand-logo {
  height: 64px;
  /* The wordmark's lighter blues sit close to white and lose their edges
     on the header's white field. A thin white halo (four 1px offset
     drop-shadows) restores that edge - outline only, no shadow, per the
     chosen treatment. */
  filter:
    drop-shadow(1.2px 0 0 #fff)
    drop-shadow(-1.2px 0 0 #fff)
    drop-shadow(0 1.2px 0 #fff)
    drop-shadow(0 -1.2px 0 #fff);
}
.site-header .brand { align-items: center; }
/* Slogan sits beside the wordmark - no rule/divider between them, just
   generous breathing room via margin-left. Same brass tone used elsewhere
   for small accent labels, so it reads as an intentional accent rather
   than a mismatched afterthought. */
.brand-slogan {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass-text);
  white-space: nowrap;
  margin-left: 14px;
}
@media (max-width: 1040px) {
  /* Between the point the nav wraps onto its own row (900px) and where the
     single-row header has enough breathing room for logo + slogan + full
     nav + actions side by side (~1040px), there isn't quite enough width
     for all of it - the slogan would collide with the nav links. Simplest
     fix: the slogan steps aside a little earlier than that, so it only
     ever appears once there's genuinely room for it. */
  .brand-slogan { display: none; }
}
.site-nav { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; }
.site-nav > li { position: relative; }
.site-nav a { display: inline-flex; align-items: center; gap: 4px; padding: 9px 14px; text-decoration: none; color: var(--ink); border-radius: var(--radius-sm); background: none; border: none; font: inherit; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.site-nav a:hover { background: var(--paper); color: var(--green); }
.site-nav a.active { color: var(--green); font-weight: 600; }

.header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; row-gap: 6px; gap: 8px; flex-shrink: 0; position: relative; max-width: 100%; }
.search-popover { position: absolute; top: 50px; right: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); padding: 8px; z-index: 70; }
.search-popover.hidden { display: none; }
.search-popover input { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--font-body); font-size: 0.9rem; width: 220px; }
.shop-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 0 12px; margin-bottom: 14px; }
.shop-search svg { flex-shrink: 0; color: var(--ink-soft); }
.shop-search input { border: 0; outline: 0; padding: 11px 0; font-family: var(--font-body); font-size: 0.92rem; width: 100%; background: transparent; color: var(--ink); }
.shop-search .clear-search { background: none; border: 0; color: var(--ink-soft); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 4px; }
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--rule); background: #fff; color: var(--ink); text-decoration: none; cursor: pointer; position: relative; transition: background 0.15s ease, border-color 0.15s ease; }
.icon-btn:hover { background: var(--paper); border-color: var(--green); }
.icon-btn .badge-count { position: absolute; top: -5px; right: -5px; background: var(--brass-text); color: #fff; font-size: 0.65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-family: var(--font-body); }
.auth-slot-inline { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; }
.auth-slot-inline a { text-decoration: none; }
.header-actions .auth-nav-slot { display: flex; align-items: center; gap: 8px; }
.header-actions .auth-nav-slot a { font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; color: var(--green); text-decoration: none; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--green); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.header-actions .auth-nav-slot a:hover { background: var(--paper); }
/* First link in the slot is always the primary action (Log in, or My
   Library when signed in) - give it a solid fill so it reads as the
   header's main call-to-action, not just another nav link. The second
   link (Log out) stays outlined/secondary. */
.header-actions .auth-nav-slot a:first-child { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 2px 10px -4px rgba(22,87,224,0.55); }
.header-actions .auth-nav-slot a:first-child:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

/* ---- Category drawer (replaces the old Categories dropdown) ---- */
.cat-drawer-overlay { position: fixed; inset: 0; background: rgba(11,37,69,0.45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; z-index: 120; }
.cat-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.cat-drawer {
  position: fixed; top: 0; left: 0; height: 100%; width: 300px; max-width: 84vw;
  background: var(--card); z-index: 125;
  box-shadow: 30px 0 60px -18px rgba(11,37,69,0.45), 1px 0 0 rgba(255,255,255,0.5) inset;
  transform: perspective(1400px) translateX(-108%) rotateY(10deg);
  transition: transform 0.36s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column; padding: 20px 0;
  border-right: 1px solid var(--rule);
}
.cat-drawer.open { transform: perspective(1400px) translateX(0) rotateY(0deg); }
.cat-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--green-dark); }
.cat-drawer-close { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-soft); flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; }
.cat-drawer-close:hover { background: var(--paper); color: var(--green); }
.cat-drawer-body { flex: 1 1 auto; overflow-y: auto; }
.cat-drawer-section { padding: 2px 10px 12px; }
.cat-drawer-section + .cat-drawer-section { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 16px; }
.cat-drawer-label { padding: 2px 12px 8px; font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--brass-text); }
.cat-drawer-links { display: flex; flex-direction: column; gap: 2px; }
.cat-drawer-links a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.cat-drawer-links a:hover { background: var(--paper); color: var(--green); transform: translateX(4px); }
.cat-drawer-links .cat-ico { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--brass-text); flex-shrink: 0; }
.cat-drawer-links .cat-ico svg { width: 18px; height: 18px; }
.cat-drawer-viewall { flex-shrink: 0; margin: 10px 16px 4px; text-align: center; padding: 12px; border-radius: var(--radius-sm); background: var(--green); color: #fff; font-weight: 700; text-decoration: none; font-family: var(--font-body); font-size: 0.9rem; box-shadow: var(--shadow-card); transition: background 0.15s ease; }
.cat-drawer-viewall:hover { background: var(--green-dark); }

/* ---- Expandable "Books" entry (Ebooks/Textbooks/Workbooks/... nested
   under one row) and its nested Textbooks -> subject accordion. ---- */
.cat-drawer-accordion-row { display: flex; align-items: stretch; }
.cat-drawer-accordion-link { flex: 1; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; transition: background 0.15s ease, color 0.15s ease; }
.cat-drawer-accordion-link:hover { background: var(--paper); color: var(--green); }
.cat-drawer-accordion-toggle { width: 40px; flex-shrink: 0; border: none; background: none; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background 0.15s ease, color 0.15s ease; }
.cat-drawer-accordion-toggle:hover { background: var(--paper); color: var(--green); }
.cat-drawer-accordion-toggle .chev { transition: transform 0.18s ease; }
.cat-drawer-accordion-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.cat-drawer-accordion-panel { display: flex; flex-direction: column; padding-left: 20px; }
.cat-drawer-accordion-panel[hidden] { display: none; }
.cat-drawer-accordion-panel a.cat-drawer-sublink { padding: 8px 12px; font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; border-radius: var(--radius-sm); transition: background 0.15s ease, color 0.15s ease; }
.cat-drawer-accordion-panel a.cat-drawer-sublink:hover { background: var(--paper); color: var(--green); }
.cat-drawer-accordion.nested { margin: 2px 0; }
.cat-drawer-accordion.nested .cat-drawer-accordion-link { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); padding: 8px 12px; }
.cat-drawer-accordion.nested .cat-drawer-accordion-toggle { width: 34px; }
.cat-drawer-grade-label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--brass-text); opacity: 0.85; margin: 8px 0 2px 12px; }
.cat-drawer-grade-label:first-child { margin-top: 2px; }
body.drawer-open { overflow: hidden; }

.cart-pill { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; border: none; color: #fff; background: var(--green); padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none; }
.cart-pill:hover { background: var(--green-dark); }

.nav-toggle { display: none; }
@media (max-width: 900px) {
  /* Hamburger removed per request - full nav shown directly instead.
     Logo and header icons (category drawer, search, cart) stay on one row
     (there's room), and the nav wraps onto its own full-width second row
     underneath, since Home + Custom Orders + About Us + Contact + logo +
     icons all on one line would be too tight to fit on a phone screen
     without something getting squeezed or truncated. */
  .site-header .container { flex-wrap: wrap; }
  .brand { order: 1; }
  .header-actions { order: 2; }
  .site-nav {
    display: flex;
    flex-wrap: wrap;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
  }
}
@media (max-width: 480px) {
  .icon-btn { width: 36px; height: 36px; }
  .header-actions .auth-nav-slot a { padding: 7px 10px; font-size: 0.82rem; }
  .site-header .brand-logo { height: 46px; }
  .icon-btn.cat-menu-btn { width: 38px; height: 38px; }
}

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--green) 0%, #2A6BF0 100%); color: #fff; box-shadow: 0 10px 24px -10px rgba(22,87,224,0.55); }
.btn-primary:hover { background: linear-gradient(135deg, #1550cf 0%, var(--green) 100%); box-shadow: 0 14px 30px -10px rgba(22,87,224,0.65); transform: translateY(-1px); }
.btn-outline { background: #fff; border-color: var(--rule); color: var(--ink); box-shadow: 0 1px 3px rgba(11,37,69,0.05); }
.btn-outline:hover { border-color: var(--green); color: var(--green); background: var(--paper); transform: translateY(-1px); }
.btn-brass { background: var(--brass-text); color: #fff; }
.btn-brass:hover { background: var(--brass-deep); }
.btn-danger { background: transparent; border-color: var(--stamp-red); color: var(--stamp-red); }
.btn-danger:hover { background: var(--stamp-red); color: #fff; }
.btn-small { padding: 8px 14px; font-size: 0.8rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- Hero + slider ---- */
.hero {
  padding: 26px 0 18px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px circle at 88% -10%, rgba(241,92,15,0.10), transparent 55%),
    radial-gradient(1100px circle at 8% 0%, rgba(22,87,224,0.10), transparent 60%),
    var(--paper);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(11,37,69,0.10) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 78%);
  mask-image: linear-gradient(to bottom, black, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
.hero .container.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 900px) { .hero .container.hero-grid { grid-template-columns: 1fr; } }
.hero .eyebrow { font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 10px; }
.hero h1 { max-width: 15ch; }
.hero h1 .accent { color: var(--brass-text); }
.hero .lede { max-width: 44ch; font-size: 0.96rem; }
.hero-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.hero-trust .item { display: flex; align-items: flex-start; gap: 8px; max-width: 190px; }
.hero-trust .ico { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(150deg, var(--paper) 0%, #DCE4F5 100%); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.hero-trust .t { font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.hero-trust .s { font-size: 0.71rem; color: var(--ink-soft); }

.hero-art { position: relative; }
/* Visually hidden but still readable by screen readers / search engines -
   used where the visible page no longer has a plain-text headline (e.g.
   the hero banner images carry the message instead) but the page should
   still have one real, accessible H1 for SEO and assistive tech. */
.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; }

/* ---- Centered hero variant (landing page) ---- */
.hero-center .container.hero-grid { grid-template-columns: 1fr; max-width: 660px; text-align: center; }
.hero-center h1 { max-width: none; }
.hero-center .lede { max-width: none; margin-left: auto; margin-right: auto; }
.hero-center .hero-actions { justify-content: center; }
.hero-center .hero-trust { justify-content: center; }
.hero-center .hero-trust .item { text-align: left; }
.hero-art .deco { position: absolute; border-radius: 9px; box-shadow: var(--shadow-pop); z-index: 4; }
.hero-art .deco-1 { width: 34px; height: 34px; background: var(--brass); top: -16px; left: 20%; transform: rotate(18deg); }
.hero-art .deco-2 { width: 25px; height: 25px; background: var(--green); top: 30%; right: -14px; transform: rotate(-12deg); }
.hero-art .deco-3 { width: 21px; height: 21px; background: var(--brass-light); bottom: 10%; left: -14px; transform: rotate(10deg); }
.hero-art .deco-4 { width: 16px; height: 16px; border-radius: 999px; background: var(--green-dark); bottom: -10px; right: 22%; }
.hero-art::before { content: ''; position: absolute; top: 50%; left: 50%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 999px; background: radial-gradient(circle, #EAF0FE 0%, rgba(234,240,254,0) 72%); z-index: 0; }

.hero-slider { position: relative; aspect-ratio: 5 / 3.6; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #EAF0FE 0%, #F5F8FD 60%); z-index: 2; }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.6s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide svg { width: 100%; height: 100%; }
.hero-slider-dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 5; }
.hero-slider-dots button { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(11,37,69,0.25); cursor: pointer; padding: 0; }
.hero-slider-dots button.active { background: var(--green); width: 22px; }
/* Hero showcase: full-width banner carousel (own text baked into the
   images) + intro video side by side. Banner gets the bigger share since
   it's carrying the actual message now; video keeps its own native 16:9
   shape instead of being force-cropped into a mismatched box. */
.hero-showcase { position: relative; z-index: 2; display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: center; margin-bottom: 28px; }
@media (max-width: 780px) { .hero-showcase { grid-template-columns: 1fr; } }

.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-video { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--green-dark); box-shadow: var(--shadow-pop); }
.hero-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.hero-video-badge {
  position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translate(-50%, 6px);
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; background: rgba(11,37,69,0.88); color: #fff;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
}
.hero-video:hover .hero-video-badge, .hero-video:focus-visible .hero-video-badge { opacity: 1; transform: translate(-50%, 0); }
.hero-video:hover { box-shadow: 0 0 0 3px rgba(22,87,224,0.35), var(--shadow-pop); }

.hero-actions-center { justify-content: center; }
.hero-trust-center { justify-content: center; }
.hero-trust-center .item { text-align: left; }

/* ---- Hero (professional two-column variant) ---- */
.hero-pro { padding: 40px 0 0; background: var(--paper); }
.hero-pro::before { display: none; } /* swap the dot-grid for the cloud sky below */

/* ---- Hero cloud sky (landing page background) ----
   Sits behind the highlight strip + slider/video only, then fades into the
   ordinary --paper background before hero-actions-row - so the CTA row and
   trust items never sit on top of busy sky and stay fully readable. */
.hero-sky {
  position: absolute; inset: 0; bottom: auto; height: 480px;
  z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 62%, transparent 96%);
  mask-image: linear-gradient(to bottom, black 0%, black 62%, transparent 96%);
}
.hero-sky-svg { width: 100%; height: 100%; display: block; }
.hero-sky-svg .cloud { animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes cloudDriftA { from { transform: translateX(-16px); } to { transform: translateX(20px); } }
@keyframes cloudDriftB { from { transform: translateX(-24px); } to { transform: translateX(12px); } }
@keyframes cloudDriftC { from { transform: translateX(-12px); } to { transform: translateX(28px); } }
.cloud.drift-a { animation-name: cloudDriftA; animation-duration: var(--dur, 70s); }
.cloud.drift-b { animation-name: cloudDriftB; animation-duration: var(--dur, 55s); }
.cloud.drift-c { animation-name: cloudDriftC; animation-duration: var(--dur, 65s); }
@media (prefers-reduced-motion: reduce) { .hero-sky-svg .cloud, .float-icon { animation: none !important; } }

.hero-float-icons { position: absolute; inset: 0; bottom: auto; height: 480px; z-index: 1; pointer-events: none; }
.float-icon {
  position: absolute; left: var(--x); top: var(--y);
  width: 38px; height: 38px; border-radius: 999px;
  background: linear-gradient(150deg, #FFFFFF 0%, #DCE7FB 100%);
  color: var(--green); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(11,37,69,0.4), inset 0 1px 0 rgba(255,255,255,0.85);
  animation: iconFloat ease-in-out infinite;
  animation-duration: var(--dur, 7s);
  animation-delay: var(--delay, 0s);
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
@media (max-width: 700px) { .hero-float-icons .fi-hide-mobile { display: none; } }

/* Frosted pill so the highlight strip stays legible over the sky */
.hero-pro .hero-highlight-strip {
  position: relative; background: rgba(255,255,255,0.85); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 10px 20px; width: fit-content; margin: 0 auto 20px;
  box-shadow: var(--shadow-card);
}
.hero-pro .hero-visual-grid { position: relative; z-index: 1; }

/* ---- Hero two-column layout: real copy left, banner slider right ---- */
.hero-pro-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; position: relative; z-index: 1; }
@media (max-width: 900px) { .hero-pro-layout { grid-template-columns: 1fr; gap: 28px; } }
/* Both sit directly on the sky gradient/clouds behind them, which range from
   vivid blue near the top to near-white lower down - neither the site-wide
   brass nor ink-soft colors hold reliable contrast across that whole range.
   The tag gets the same frosted-pill treatment as the highlight strip below
   it (so it's legible regardless of what's behind it); the lede gets a
   darker, hero-only shade of ink-soft rather than a pill, since a full
   paragraph in a pill reads as a box, not a line of text. */
.hero-pro-tag {
  display: inline-block; font-family: var(--font-body); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 14px;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 6px 14px; box-shadow: var(--shadow-card);
}
.hero-pro-copy h1 { max-width: 14ch; margin: 0 0 14px; text-shadow: 0 1px 12px rgba(255,255,255,0.35); }
.hero-pro-copy .lede { font-size: 1.04rem; max-width: 44ch; margin: 0 0 22px; color: #2E323C; }
.hero-pro-copy .hero-highlight-strip { justify-content: flex-start; margin: 0 0 4px; width: fit-content; }
.hero-pro-visual { position: relative; }
@media (max-width: 900px) { .hero-pro-visual { max-width: 460px; margin: 0 auto; } }

/* Natural ratio of the source banner photos (1478x1064) - matching it here
   means "cover" no longer has to crop the sides, which is what was slicing
   the on-image text off before. */
.hero-slider { aspect-ratio: 1478 / 1064; box-shadow: var(--shadow-pop); }

.hero-highlight-strip {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 12px; margin-bottom: 18px;
  font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.01em;
}
.hero-highlight-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.hero-highlight-item svg { color: var(--brass-text); flex-shrink: 0; }
.hero-highlight-divider { width: 3px; height: 3px; border-radius: 999px; background: var(--ink-soft); opacity: 0.35; }
@media (max-width: 560px) { .hero-highlight-divider:nth-of-type(2) { display: none; } }

.hero-actions-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 20px; margin-top: 26px; padding: 22px 0; border-top: 1px solid var(--rule);
}
@media (max-width: 700px) { .hero-actions-row { flex-direction: column; align-items: flex-start; } }
.hero-actions-row .hero-trust { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---- Decorative side-edge rail (home page only) ----
   Fills the unused margin outside the 1440px container on wide screens.
   Purely visual - no text, no images, no animation, no JS - so it can't
   affect load time or layout. Only shown once the viewport guarantees
   enough margin (1700px+) that it can never sit near real content. */
.edge-rail {
  display: none;
  position: fixed; top: 0; bottom: 0; width: 64px;
  z-index: 1; pointer-events: none; color: var(--green);
}
.page-home .edge-rail { display: block; }
.edge-rail--left { left: 22px; }
.edge-rail--right { right: 22px; }
.edge-rail-line {
  position: absolute; top: 8%; bottom: 8%; left: 50%;
  width: 1px; background: linear-gradient(180deg, transparent, var(--rule) 15%, var(--rule) 85%, transparent);
  opacity: 0.9;
}
.edge-rail-ico {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  opacity: 0.16;
}
@media (max-width: 1699px) { .edge-rail { display: none !important; } }
.trust-bar {
  display: grid; grid-template-columns: repeat(6, auto);
  column-gap: 0; row-gap: 22px; justify-content: start;
  padding-bottom: 26px; margin-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.trust-item {
  display: flex; align-items: center; gap: 12px;
  padding: 0 26px; border-right: 1px solid rgba(255,255,255,0.16);
}
.trust-item:first-child { padding-left: 0; }
.trust-item:last-child { border-right: none; padding-right: 0; }
.trust-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 10px -3px rgba(0,0,0,0.35);
}
.trust-icon--blue { background: linear-gradient(150deg, #2A6BF0 0%, var(--green) 100%); }
.trust-icon--orange { background: linear-gradient(150deg, var(--brass-light) 0%, var(--brass) 100%); }
.trust-text { font-size: 0.92rem; color: rgba(255,255,255,0.72); white-space: nowrap; }
.trust-text strong { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.02rem; }

@media (max-width: 1100px) {
  .trust-bar { grid-template-columns: repeat(3, auto); }
  .trust-item:nth-child(3n) { border-right: none; padding-right: 0; }
  .trust-item:nth-child(3n+1) { padding-left: 0; }
}
@media (max-width: 700px) {
  .trust-bar { grid-template-columns: repeat(2, auto); }
  .trust-item:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.16); padding-right: 26px; }
  .trust-item:nth-child(2n) { border-right: none; padding-right: 0; }
  .trust-item:nth-child(2n+1) { padding-left: 0; }
  .trust-text { white-space: normal; }
}
@media (max-width: 480px) {
  .trust-bar { grid-template-columns: 1fr; }
  .trust-item { border-right: none; padding: 0; }
}

/* ---- Sections ---- */
section { padding: 26px 0; }
.section-tint-warm { background: linear-gradient(180deg, #FFF8F0 0%, #FFFDFB 100%); }
.section-tint-cool { background: linear-gradient(180deg, #F0F6FF 0%, #FBFDFF 100%); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.section-head .tag { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-text); }

/* ---- Category icon grid (homepage) ---- */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-card); }
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; text-decoration: none; color: var(--ink); padding: 12px 6px; border-radius: var(--radius-sm); transition: background 0.15s ease, transform 0.15s ease; }
.cat-tile:hover { background: var(--paper); transform: translateY(-3px); }
.cat-tile .ico { width: 44px; height: 44px; border-radius: 13px; background: var(--paper); color: var(--brass-text); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 3px 8px -3px rgba(11,37,69,0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.cat-tile:hover .ico { background: #FFF1E2; transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 14px -4px rgba(11,37,69,0.28); }
.cat-tile .label { font-size: 0.76rem; font-weight: 600; color: var(--green-dark); }
/* Distinct accent per category - livelier / less monochrome than a single brass tone everywhere */
.cat-tile.c-ebook .ico { background: linear-gradient(150deg, #EAF0FE 0%, #D9E5FC 100%); color: #1657E0; }
.cat-tile.c-ebook:hover .ico { background: linear-gradient(150deg, #DCE7FD 0%, #C9DAFB 100%); }
.cat-tile.c-book .ico { background: linear-gradient(150deg, #FFF1E2 0%, #FDE3C4 100%); color: var(--brass-text); }
.cat-tile.c-book:hover .ico { background: linear-gradient(150deg, #FDE3C4 0%, #FBD4A4 100%); }
.cat-tile.c-stationery .ico { background: linear-gradient(150deg, #E7F7EF 0%, #D3F0E1 100%); color: #12946B; }
.cat-tile.c-stationery:hover .ico { background: linear-gradient(150deg, #D3F0E1 0%, #BFE9D2 100%); }
.cat-tile.c-toys .ico { background: linear-gradient(150deg, #F4EBFC 0%, #E9D9F7 100%); color: #8B3FD1; }
.cat-tile.c-toys:hover .ico { background: linear-gradient(150deg, #E9D9F7 0%, #DEC7F2 100%); }
.cat-tile.c-misc .ico { background: linear-gradient(150deg, #FDECEC 0%, #FBD9D9 100%); color: #DC2626; }
.cat-tile.c-misc:hover .ico { background: linear-gradient(150deg, #FBD9D9 0%, #F9C6C6 100%); }
.cat-tile.c-all .ico { background: linear-gradient(150deg, var(--paper) 0%, #DCE4F5 100%); color: var(--green-dark); }
.cat-tile.c-all:hover .ico { background: linear-gradient(150deg, #DCE4F5 0%, #CDD8ED 100%); }

/* ---- Stats strip (home page, right under hero) ---- */
.stats-strip-section { padding-top: 0; }
.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: linear-gradient(120deg, var(--green-dark) 0%, #123363 55%, #7A2FD8 100%);
  border-radius: 999px; padding: 22px 10px;
  box-shadow: 0 14px 32px -16px rgba(11,37,69,0.45);
  position: relative; overflow: hidden;
}
.stats-strip::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120px 60px at 8% 50%, rgba(241,92,15,0.35), transparent 70%),
              radial-gradient(140px 70px at 94% 50%, rgba(241,92,15,0.28), transparent 70%);
}
.stats-strip > * { position: relative; z-index: 1; }
.stat-item { text-align: center; padding: 0 8px; position: relative; }
.stat-item + .stat-item::before { content: ''; position: absolute; left: -4px; top: 8%; bottom: 8%; width: 1px; background: rgba(255,255,255,0.16); }
.stat-item .n { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: #fff; line-height: 1.1; }
.stat-item .n span { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.7); }
.stat-item .l { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 3px; }
@media (max-width: 700px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); border-radius: var(--radius); gap: 18px 8px; }
  .stat-item + .stat-item::before { display: none; }
}

/* ---- Our Services grid (home page) ---- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }
.service-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 22px 20px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-card); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.service-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0.55; z-index: 0;
  background: linear-gradient(160deg, var(--sc-tint-1, #EAF0FE) 0%, #fff 62%);
}
.service-card > * { position: relative; z-index: 1; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: transparent; }
.service-card:hover::before { opacity: 0.85; }
.service-card .ico { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.service-card .ico-blue { background: linear-gradient(150deg, #EAF0FE 0%, #D9E5FC 100%); color: var(--green); }
.service-card .ico-brass { background: linear-gradient(150deg, #FFF1E2 0%, #FDE3C4 100%); color: var(--brass-text); }
.service-card .ico-purple { background: linear-gradient(150deg, #F4EBFC 0%, #E9D9F7 100%); color: #8B3FD1; }
.service-card .ico-teal { background: linear-gradient(150deg, #E7F7EF 0%, #D3F0E1 100%); color: #12946B; }
.service-card.tint-blue { --sc-tint-1: #EAF0FE; }
.service-card.tint-brass { --sc-tint-1: #FFF1E2; }
.service-card.tint-purple { --sc-tint-1: #F4EBFC; }
.service-card.tint-teal { --sc-tint-1: #E7F7EF; }
.service-card h3 { font-family: var(--font-display); font-size: 1.02rem; margin: 0; color: var(--green-dark); }
.service-card p { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 6px; line-height: 1.5; }
.service-card .go { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 700; color: var(--brass-text); margin-top: auto; }
.service-card .go svg { transition: transform 0.15s ease; }
.service-card:hover .go svg { transform: translateX(3px); }

/* ---- Closing CTA banner (home page, before footer) ---- */
.cta-closing {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(120deg, #4A2FB8 0%, #6C3FE0 55%, #8A4FF0 100%);
  border-radius: 20px; padding: 44px 28px; box-shadow: 0 20px 44px -18px rgba(74,47,184,0.55);
}
.cta-closing-text h2 { color: #fff; margin: 0 0 8px; }
.cta-closing-text p { color: rgba(255,255,255,0.82); max-width: 46ch; margin: 0 auto 22px; }
.cta-closing-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-ghost-light { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.5); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,0.22); border-color: #fff; transform: translateY(-1px); }
.cta-closing-float { position: absolute; color: rgba(255,255,255,0.35); pointer-events: none; }
.cta-closing-float.f1 { top: 14%; left: 8%; animation: iconFloat 7s ease-in-out infinite; }
.cta-closing-float.f2 { bottom: 18%; left: 16%; animation: iconFloat 8s ease-in-out infinite; animation-delay: 1.2s; }
.cta-closing-float.f3 { top: 20%; right: 10%; animation: iconFloat 6.5s ease-in-out infinite; animation-delay: 0.6s; }
@media (max-width: 700px) { .cta-closing-float { display: none; } }

/* ---- Product rail + book cards ---- */
.rail-wrap { position: relative; }
.book-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(165px, 210px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.book-rail::-webkit-scrollbar { display: none; }
.book-rail .book-card { scroll-snap-align: start; }
.rail-arrow { position: absolute; top: 38%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 999px; background: #fff; border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; box-shadow: var(--shadow-card); }
.rail-arrow.prev { left: -16px; }
.rail-arrow.next { right: -16px; }
@media (max-width: 700px) { .rail-arrow { display: none; } }

.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tab-btn { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; }
.tab-btn.sub { font-size: 0.76rem; padding: 6px 12px; opacity: 0.85; }
.tab-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
.subject-tabs { align-items: center; padding: 10px 12px; background: var(--paper); border-radius: var(--radius-sm); margin-top: -6px; }
.subject-tabs .tab-btn.subject { background: #fff; }
/* .subject-tabs .tab-btn.subject (3 classes) was more specific than
   .tab-btn.active (2 classes), so its plain white background silently
   beat the active state's blue fill while .active's white text still
   applied on top - white text on a white pill, invisible. This selector
   out-specifies both, so an active grade/subject pill is reliably blue
   with readable white text again. */
.subject-tabs .tab-btn.subject.active { background: var(--green); border-color: var(--green); color: #fff; }
.subject-group-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-right: 2px; }
.subject-group-label:not(:first-child) { margin-left: 10px; }

@media (max-width: 640px) {
  /* Wrapping pills on a narrow screen turns into several cramped rows with
     awkward gaps ("shows vertically, space issues"). Swap to a single
     horizontally-scrollable row instead - the standard mobile pattern for
     category chips (same idea as Amazon/Instagram category bars): nothing
     wraps, nothing stacks, you just swipe sideways to see the rest. */
  .category-tabs { flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 2px; }
  .category-tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; white-space: nowrap; }
}
.badge-cod { background: rgba(241,92,15,0.14); color: var(--brass-text); }

.book-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rule); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: rgba(22,87,224,0.18); }
.book-card.out-of-stock { opacity: 0.55; filter: grayscale(0.4); }
.book-card .tab { display: none; }
.book-cover { aspect-ratio: 3 / 4; background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%); display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 14px; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.book-cover.cat-book { background: linear-gradient(160deg, var(--brass-text) 0%, #9A3412 100%); }
.book-cover.cat-stationery { background: linear-gradient(160deg, var(--green-dark) 0%, var(--green) 100%); }
.book-cover.cat-toys { background: linear-gradient(160deg, #0B2545 0%, var(--brass-text) 100%); }
.book-cover.cat-misc, .book-cover.cat-costume { background: linear-gradient(160deg, var(--brass-text) 0%, var(--brass-deep) 100%); }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-info { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.book-info .cat-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brass-text); margin: 0; }
.book-info .title { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: var(--ink); margin: 0; }
.book-info .author { font-size: 0.79rem; color: var(--ink-soft); margin: 0; }
.book-info .desc { font-size: 0.81rem; color: var(--ink-soft); flex: 1; margin: 3px 0 6px; }
.price-tag { font-family: var(--font-display); font-weight: 700; font-size: 0.96rem; color: var(--green-dark); width: fit-content; }
.book-actions { display: flex; gap: 8px; margin-top: 8px; }
.stars { color: var(--brass-text); font-size: 0.78rem; letter-spacing: 1px; }
.stars .count { color: var(--ink-soft); font-size: 0.72rem; letter-spacing: normal; margin-left: 4px; }

/* ---- Shop layout: minibar + content ---- */
.shop-layout { display: grid; grid-template-columns: 76px 1fr; gap: 22px; align-items: start; }
.shop-layout > div { min-width: 0; }
.minibar { position: sticky; top: 84px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 12px 6px; display: flex; flex-direction: column; gap: 6px; }
.minibar a { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; color: var(--ink-soft); padding: 10px 4px; border-radius: var(--radius-sm); font-size: 0.62rem; font-weight: 700; text-align: center; letter-spacing: 0.01em; transition: background 0.15s ease, color 0.15s ease; }
.minibar a .ico { width: 32px; height: 32px; border-radius: 9px; background: var(--paper); color: var(--brass-text); display: flex; align-items: center; justify-content: center; }
.minibar a:hover, .minibar a.active { color: var(--green); }
.minibar a:hover .ico, .minibar a.active .ico { background: #EAF0FE; color: var(--green); }
@media (max-width: 780px) { .shop-layout { grid-template-columns: 1fr; } .minibar { display: none; } }

/* ---- Stats banner ---- */
.stats-banner { background: linear-gradient(120deg, var(--brass-text) 0%, var(--brass-deep) 100%); border-radius: var(--radius); padding: 20px 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 720px) { .stats-banner { grid-template-columns: repeat(2, 1fr); } }
.stats-banner .stat-item { display: flex; align-items: center; gap: 12px; color: #fff; }
.stats-banner .stat-item .ico { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stats-banner .num { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; display: block; }
.stats-banner .label { font-size: 0.78rem; opacity: 0.92; }

/* ---- Testimonial + newsletter split ---- */
.split-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .split-panel { grid-template-columns: 1fr; } }
.panel-box { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-card); }
.quote-mark { font-family: var(--font-display); font-size: 2.4rem; color: var(--brass-text); line-height: 1; margin-bottom: 6px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.testimonial-author .avatar { width: 42px; height: 42px; border-radius: 999px; background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--green); font-weight: 700; font-family: var(--font-display); flex-shrink: 0; }
.testimonial-author .t { font-weight: 700; color: var(--ink); font-size: 0.88rem; }
.testimonial-author .s { font-size: 0.78rem; color: var(--ink-soft); }

/* ---- Testimonials grid (homepage) ---- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-card { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--tc-accent, var(--brass)); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.testimonial-card.accent-blue { --tc-accent: var(--green); }
.testimonial-card.accent-purple { --tc-accent: #8B3FD1; }
.testimonial-card .stars { color: var(--brass-text); font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-card .quote { color: var(--ink); font-size: 0.92rem; flex: 1; }
.testimonial-placeholder-tag { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper); border: 1px dashed var(--rule); border-radius: 999px; padding: 3px 10px; margin-bottom: 14px; }

/* ---- Payment method badges (footer) ---- */
.payment-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-badge { display: inline-flex; align-items: center; justify-content: center; height: 24px; border-radius: 6px; background: transparent; }
.pay-badge svg { display: block; height: 100%; width: auto; }
.pay-badge-stripe { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); font-size: 0.7rem; font-weight: 600; }
.pay-badge-stripe svg { height: 12px; width: auto; }
.newsletter-box { background: var(--green-dark); color: #fff; }
.newsletter-box h3 { color: #fff; }
.newsletter-box p { color: rgba(255,255,255,0.72); }
.newsletter-box .ico-lg { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; color: var(--brass-light); }
.newsletter-form { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.newsletter-form input { flex: 1; min-width: 180px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-family: var(--font-body); }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.55); }

/* ---- Forms ---- */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select { width: 100%; padding: 11px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font-family: var(--font-body); font-size: 0.95rem; }
.form-field textarea { resize: vertical; min-height: 110px; }
.form-hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }
.card-panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 28px; }

/* Legal pages (privacy, returns, shipping, terms): compact centered hero +
   centered narrow body. Both the hero copy and the .legal-card are capped
   at the same max-width and auto-centered, so they line up with each other
   on the page. */
.hero-legal { padding-top: 40px; padding-bottom: 32px; text-align: center; }
.hero-legal .container { max-width: 700px; }
.hero-legal .eyebrow { display: flex; justify-content: center; align-items: center; gap: 8px; }
.hero-legal h1 { max-width: none; }
.hero-legal .lede { max-width: none; margin: 0 auto; }
.legal-card {
  max-width: 840px;
  margin: 0 auto 48px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 44px clamp(24px, 5vw, 64px);
}
.legal-card h2 { margin-top: 1.6em; padding-top: 0.6em; border-top: 1px solid var(--rule); }
.legal-card h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-card ul { padding-left: 1.2em; }
.legal-card li { color: var(--ink-soft); margin-bottom: 0.4em; }
@media (max-width: 600px) {
  .legal-card { padding: 28px 20px; border-radius: var(--radius-sm); }
}

/* Auth pages (login, register): centered card on solid background */
.auth-page { background: var(--green-dark); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; position: relative; overflow: hidden; }

/* Same book/stationery/toy motif as the homepage hero, but slower, dimmer,
   and fewer of them - ambient rather than a focal point, since the point
   of this page is the form, not the background. */
.auth-float-field { position: absolute; inset: 0; pointer-events: none; }
.auth-float-item { position: absolute; opacity: 0; color: rgba(255,255,255,0.3); animation: authFloatUp linear infinite; }
.auth-float-item svg { display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.3)); }
.auth-float-item.brass { color: rgba(253,186,116,0.34); }
.auth-float-item.blue { color: rgba(110,161,255,0.34); }
@keyframes authFloatUp {
  0%   { opacity: 0; transform: translateY(0) rotate(var(--r0, 0deg)); }
  16%  { opacity: 1; }
  86%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-70vh) rotate(var(--r1, 18deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-float-item { animation: none !important; opacity: 0.22 !important; }
}
.auth-page .brand { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); padding: 14px 26px; border-radius: var(--radius); box-shadow: 0 0 40px -6px rgba(241,92,15,0.35); margin-left: 0; }
.auth-page .brand .brand-logo { height: 34px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card .eyebrow { margin-bottom: 6px; }
.auth-card h2 { margin-bottom: 20px; }
.auth-card .btn { width: 100%; justify-content: center; }
.auth-card .form-hint { margin-top: 16px; }
.auth-card .form-hint + .form-hint { margin-top: 0; }

/* ---- About / static content ---- */
.stat-row { display: flex; gap: 32px; flex-wrap: wrap; margin: 28px 0; }
.stat { font-family: var(--font-body); }
.stat .num { font-family: var(--font-display); font-size: 2rem; color: var(--green-dark); display: block; }
.stat .label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.divider { border: none; border-top: 1px solid var(--rule); margin: 32px 0; }

/* ---- About page: company profile blocks ---- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 24px 0; }
.info-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px; }
.info-card h4 { font-family: var(--font-display); font-size: 0.98rem; margin: 0 0 8px; color: var(--green-dark); }
.info-card p { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
@media (max-width: 700px) { .vm-grid { grid-template-columns: 1fr; } }
.vm-card { background: var(--green-dark); color: rgba(255,255,255,0.85); border-radius: var(--radius); padding: 26px; }
.vm-card h4 { color: #fff; font-family: var(--font-display); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.vm-card h4::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--brass); display: inline-block; flex: none; }
.vm-card p, .vm-card ul { font-size: 0.9rem; margin: 0; color: rgba(255,255,255,0.85); }
.vm-card ul { padding-left: 18px; display: grid; gap: 6px; }
.office-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 24px 0; }
.office-card { border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; }
.office-card .country { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 6px; }
.office-card .addr { font-size: 0.86rem; color: var(--ink-soft); }
.office-card .phone { margin-top: 10px; font-size: 0.86rem; }
.office-card .phone a { color: var(--green-dark); font-weight: 600; }

/* ---- Custom Orders page: steps + video gallery ---- */
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; }
.step-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 22px; }
.step-card .step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; margin-bottom: 14px; }
.step-card h4 { font-family: var(--font-display); font-size: 0.98rem; margin: 0 0 6px; color: var(--green-dark); }
.step-card p { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin: 24px 0; }
.video-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.video-card video { width: 100%; display: block; aspect-ratio: 16 / 9; background: var(--green-dark); object-fit: cover; }

.yt-embed { position: relative; display: block; width: 100%; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); background: var(--green-dark); }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
/* The iframe only needs pointer events for actual playback controls once the
   video has started - but since this loads muted/autoplay purely as a decorative
   preview and the whole card is a link to the channel, we keep it click-through
   so the one obvious interactive thing is "go to the channel," not the player. */
.yt-embed-badge {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(11,37,69,0.88); color: #fff;
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 700;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  backdrop-filter: blur(2px);
}
.yt-embed:hover .yt-embed-badge, .yt-embed:focus-visible .yt-embed-badge { opacity: 1; transform: translateY(0); }
.yt-embed:hover { box-shadow: 0 0 0 3px rgba(22,87,224,0.35), var(--shadow-card); }
.video-card .cap { padding: 14px 16px; }
.video-card .cap .t { font-weight: 600; font-size: 0.92rem; margin-bottom: 2px; color: var(--ink); }
.video-card .cap .s { font-size: 0.82rem; color: var(--ink-soft); }
.bulk-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; position: relative; overflow: hidden; background: linear-gradient(120deg, var(--green-dark) 0%, #123363 60%, #4A2FB8 100%); border-radius: var(--radius); padding: 26px 28px; margin: 24px 0; box-shadow: 0 14px 32px -16px rgba(11,37,69,0.45); }
.bulk-banner::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(220px 140px at 92% 0%, rgba(241,92,15,0.32), transparent 70%); }
.bulk-banner > * { position: relative; z-index: 1; }
.bulk-banner h4 { color: #fff; font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 6px; }
.bulk-banner p { color: rgba(255,255,255,0.75); font-size: 0.9rem; margin: 0; max-width: 480px; }

/* ---- Footer ---- */
.site-footer { background: var(--green-dark); color: rgba(255,255,255,0.65); padding: 44px 0 20px; margin-top: 48px; font-size: 0.86rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.1fr; gap: 30px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: #fff; font-family: var(--font-body); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-grid a { text-decoration: none; color: rgba(255,255,255,0.65); }
.footer-grid a:hover { color: var(--brass-light); }
.footer-about p { color: rgba(255,255,255,0.6); font-size: 0.86rem; max-width: 30ch; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand .name { color: #fff; font-family: var(--font-display); font-weight: 800; }
.footer-brand .name.sub { color: var(--brass); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.footer-social a:hover { background: rgba(255,255,255,0.18); color: #fff; transform: translateY(-2px); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--brass); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 20px; font-size: 0.8rem; }
.footer-pay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-pay .pay-chip { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 4px 8px; }
.site-footer .container a { color: var(--brass-light); }

/* ---- Simple footer (static/info pages) ---- */
.footer-simple-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-legal-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; }
.footer-office { color: rgba(255,255,255,0.55); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal-links a { text-decoration: none; }
.footer-explore-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; }
.footer-explore-links a { text-decoration: none; color: rgba(255,255,255,0.75); }
.footer-explore-links a:hover { color: #fff; }

/* ---- Utility ---- */
.muted { color: var(--ink-soft); }
.empty-state { text-align: center; padding: 60px 20px; font-family: var(--font-body); color: var(--ink-soft); border: 1px dashed var(--rule); border-radius: var(--radius); }
.badge { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; }
.badge-paid { background: rgba(22,87,224,0.12); color: var(--green); }
.badge-pending { background: rgba(241,92,15,0.14); color: var(--brass-text); }
.badge-hidden { background: rgba(220,38,38,0.1); color: var(--stamp-red); }
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--green-dark); color: #fff; padding: 14px 18px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.85rem; box-shadow: var(--shadow-pop); z-index: 200; }

/* ---- Admin ---- */
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: var(--paper); }
.admin-sidebar { background: linear-gradient(180deg, var(--green-dark) 0%, #081b38 100%); color: #fff; padding: 26px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.admin-sidebar .name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: #fff; display: flex; align-items: center; gap: 10px; }
.admin-sidebar .name .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brass); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; flex-shrink: 0; }
.admin-sidebar .name small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.68rem; opacity: 0.6; letter-spacing: 0.04em; text-transform: uppercase; }
.admin-sidebar nav { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; text-decoration: none; color: rgba(255,255,255,0.72); font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; }
.admin-sidebar nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-sidebar nav a.active { background: rgba(241,92,15,0.16); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--brass); }
.admin-sidebar nav a .ico { width: 18px; text-align: center; flex-shrink: 0; }
.admin-sidebar nav a.logout-row { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 14px; }
.admin-main { padding: 32px 40px 60px; }
.admin-main .section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
.admin-main .section-head .tag { color: var(--brass-text); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.admin-main .section-head h2 { margin: 0; }
.admin-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.admin-stat-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-card); }
.admin-stat-card .num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--green-dark); display: block; }
.admin-stat-card .label { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }

.table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.table th, .table td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--rule); font-size: 0.88rem; vertical-align: middle; }
.table th { font-family: var(--font-body); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); background: var(--paper); }
.table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover { background: #f7f9fd; }
.table tbody tr:last-child td { border-bottom: none; }
.table .thumb { width: 42px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--green); }
@media (max-width: 820px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 4px; padding: 16px 18px; }
  .admin-sidebar .name { margin-bottom: 0; margin-right: auto; }
  .admin-sidebar nav { flex-direction: row; flex-wrap: wrap; margin-top: 0; }
  .admin-sidebar nav a.logout-row { margin-top: 0; border-top: none; padding-top: 0; }
  .admin-main { padding: 24px 18px 48px; }
}
.row-actions { display: flex; gap: 8px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(11,37,69,0.5); display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; z-index: 100; }
.modal { background: var(--card); border-radius: var(--radius); padding: 28px; width: 100%; max-width: 560px; box-shadow: var(--shadow-pop); }
.modal h3 { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hidden { display: none !important; }

.gallery-modal { max-width: 640px; position: relative; }
.gallery-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.gallery-viewer { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 12px; background: #f4f2ee; border-radius: 8px; min-height: 260px; }
.gallery-viewer img { max-width: 100%; max-height: 420px; object-fit: contain; border-radius: 8px; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); border: none; border-radius: 50%; width: 36px; height: 36px; font-size: 1.3rem; cursor: pointer; box-shadow: var(--shadow-pop); }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }
.gallery-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.gallery-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); cursor: pointer; }
.gallery-dots span.active { background: var(--brass); }

.book-card .cover-wrap { position: relative; }
.gallery-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(11,37,69,0.72); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 20px; cursor: pointer; border: none; }
.format-select { width: 100%; margin: 6px 0; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--rule); font-size: 0.82rem; font-family: inherit; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.checkbox-label input { width: auto; }
.gallery-existing { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gallery-existing .thumb-wrap { position: relative; width: 64px; height: 64px; }
.gallery-existing img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rule); }
.gallery-existing button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--stamp-red); color: #fff; border: none; font-size: 0.75rem; line-height: 1; cursor: pointer; }
.error-text { color: var(--stamp-red); font-size: 0.85rem; margin-top: -8px; margin-bottom: 14px; }

/* ==========================================================================
   Site-wide motion - scroll reveals for static sections, card entrance for
   dynamically-rendered grids (book rails, shop grid, library). Same
   language as the landing page: quiet fade + rise, never a slide-in from
   the side or anything bouncy. Fully inert without JS (.js gate) and fully
   inert under prefers-reduced-motion.
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in-view { opacity: 1; transform: translateY(0); }
.js .reveal-stagger.in-view .reveal-item:nth-child(1) { transition-delay: 0.02s; }
.js .reveal-stagger.in-view .reveal-item:nth-child(2) { transition-delay: 0.09s; }
.js .reveal-stagger.in-view .reveal-item:nth-child(3) { transition-delay: 0.16s; }
.js .reveal-stagger.in-view .reveal-item:nth-child(4) { transition-delay: 0.23s; }
.js .reveal-stagger.in-view .reveal-item:nth-child(5) { transition-delay: 0.30s; }
.js .reveal-stagger.in-view .reveal-item:nth-child(6) { transition-delay: 0.37s; }
.js .reveal-stagger .reveal-item { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal-stagger.in-view .reveal-item { opacity: 1; transform: translateY(0); }

/* Dynamically-rendered cards (home rail, shop grid, library grid) animate
   in on insertion - pure CSS, no JS hook needed since these are freshly
   created DOM nodes each time books.js / library.js render them. */
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.book-card { animation: cardIn 0.5s ease both; }
.book-card:nth-child(1) { animation-delay: 0.02s; }
.book-card:nth-child(2) { animation-delay: 0.06s; }
.book-card:nth-child(3) { animation-delay: 0.10s; }
.book-card:nth-child(4) { animation-delay: 0.14s; }
.book-card:nth-child(5) { animation-delay: 0.18s; }
.book-card:nth-child(6) { animation-delay: 0.22s; }
.book-card:nth-child(7) { animation-delay: 0.26s; }
.book-card:nth-child(8) { animation-delay: 0.30s; }
.book-card:nth-child(n+9) { animation-delay: 0.34s; }

/* Form cards (login/register) and result cards (order success) get a
   single quiet entrance on load rather than scroll-triggered reveal,
   since they're short pages with everything above the fold. */
@keyframes cardInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .load-in { animation: cardInUp 0.6s ease both; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-stagger .reveal-item, .book-card, .js .load-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Sitewide page transitions - every internal link fades the page out
   before the browser navigates, then the new page fades in. Handled in
   main.js (initPageTransitions). Same .js gate as the rest of the motion
   system: with JS off, pages just render normally with no hidden state.
   ========================================================================== */
html.js body { opacity: 0; }
html.js.page-ready body { opacity: 1; transition: opacity 0.32s ease; }
body.page-exit { opacity: 0 !important; transition: opacity 0.18s ease !important; }

@media (prefers-reduced-motion: reduce) {
  html.js body, html.js.page-ready body, body.page-exit {
    opacity: 1 !important;
    transition: none !important;
  }
}