/* ============================================================
   Xuanzhen Ge · layout & legibility fixes
   Always loaded LAST, after fonts.css / xzg(-en).css / woo.css.

   1. Only the site header <nav id="nav"> may be fixed to the viewport.
   2. WooCommerce pagination stays in the normal flow (no logo overlap).
   3. Fixed header is offset below the WordPress admin bar.
   4. A legible handwriting face replaces the thin italic display font.
   ============================================================ */

/* ------------------------------------------------------------------
   1. Scope the fixed header rule.
   The original stylesheet says `nav{position:fixed;top:0;...}`, which also
   catches WooCommerce's <nav class="woocommerce-pagination"> and pins the
   page buttons over the logo in the top-left corner.
   ------------------------------------------------------------------ */
nav:not(#nav) {
  position: static;
  top: auto; right: auto; bottom: auto; left: auto;
  z-index: auto;
  display: block;
  padding: 0;
  background: none;
  backdrop-filter: none;
  transition: none;
}

/* ------------------------------------------------------------------
   2. Pagination: centred, below the product grid, never overlapping.
   ------------------------------------------------------------------ */
.woocommerce nav.woocommerce-pagination,
nav.woocommerce-pagination {
  display: block;
  position: static;
  float: none;
  clear: both;
  width: 100%;
  text-align: center;
  margin: 2.5rem 0 0;
  padding: 0;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce nav.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(138,156,184,0.35);
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  line-height: 1;
  text-decoration: none;
  float: none;
}
.woocommerce nav.woocommerce-pagination .page-numbers.current,
.woocommerce nav.woocommerce-pagination .page-numbers:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

/* ------------------------------------------------------------------
   3. WordPress admin bar. WP adds 32px (46px on small screens) at the
   very top with z-index 99999; every fixed element must start below it.
   A single --xzg-admin-offset keeps the nav, the announcement bar and
   the floating offer banner in sync. Previously only the nav was shifted,
   so the offer box (still pinned at 67px) slid up over the menu links.
   ------------------------------------------------------------------ */
:root { --xzg-admin-offset: 0px; }
body.admin-bar { --xzg-admin-offset: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --xzg-admin-offset: 46px; }
}
body.admin-bar #nav,
body.admin-bar .announce-bar { top: var(--xzg-admin-offset); }
/* The offer box hangs below the nav, so it needs the same offset. */
.offer-banner { top: calc(67px + var(--xzg-admin-offset)); }
/* On short desktop viewports the 100vh hero centres its copy high enough
   that the (now lower) floating box touches the eyebrow. Nudge the hero
   copy down only when the admin bar is present; visitors see the original
   layout untouched. `top` is used instead of padding so the flex centring
   and the fadeUp transform stay intact. */
@media screen and (min-width: 901px) {
  body.admin-bar .hero-inner { position: relative; top: 48px; }
}
/* Keep the cart drawer and modal overlays above the admin bar. */
body.admin-bar .cart-overlay,
body.admin-bar .usdt-modal-overlay { z-index: 100000; }
body.admin-bar .cart-drawer,
body.admin-bar .modal-overlay { z-index: 100001; }

/* ------------------------------------------------------------------
   4. Legible handwriting.
   The old decorative text was Cormorant Garamond italic — very thin and
   slanted, effectively unreadable at 13-19px. Kalam keeps a brush-pen /
   calligraphic character but has clear, separated letterforms.
   To use the lighter alternative, change the value below to
   'XZG Hand Light' (Caveat, also self-hosted in /assets/fonts).
   ------------------------------------------------------------------ */
:root {
  --font-hand: 'XZG Hand', 'Noto Serif SC', serif;
}

.section-sub,
.prod-tagline,
.cat-desc,
.team-intro,
.master-headline,
.step-desc,
.testi-text,
.newsletter p,
.footer-tagline,
.contact-note-small,
.blog-excerpt,
.cart-note,
.cart-empty,
.pm-story-lead,
.pm-craft-seal-text,
.usdt-note,
.modal-body .talisman-desc,
.hero-title em,
.woocommerce .woocommerce-result-count {
  font-family: var(--font-hand) !important;
  font-style: normal !important;
  letter-spacing: 0.012em !important;
}

/* Contrast / size polish so the small print is actually readable. */
.section-sub { font-size: 1.35rem; color: rgba(241,235,221,0.85); }
.prod-tagline,
.cat-desc,
.step-desc,
.testi-text,
.newsletter p,
.footer-tagline { color: rgba(241,235,221,0.72); }
.woocommerce .woocommerce-result-count { font-size: 1rem; color: rgba(241,235,221,0.8); }
.cart-note { font-size: 0.82rem; line-height: 1.65; }

/* Navigation links were tiny and widely tracked; keep the look, improve clarity. */
.nav-links a { color: rgba(241,235,221,0.9); font-size: 1.05rem; letter-spacing: 0.16em; }
.eyebrow, .hero-eyebrow { letter-spacing: 0.42em; opacity: 0.95; }
.woocommerce .woocommerce-ordering select { font-family: 'Cinzel', serif; font-size: 0.78rem; }

/* ------------------------------------------------------------------
   5. Product grid safety net.
   WooCommerce's float clearfix pseudo-elements become real grid items once
   ul.products is a grid, eating the first cell (only 2 products in row 1).
   ------------------------------------------------------------------ */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products { width: 100%; clear: both; }

/* ------------------------------------------------------------------
   6. Header controls & trust bar: real SVG icons instead of emoji.
   The emoji (🛒 📦 🔄) rendered in full colour on phones and broke the
   black / gold palette, so every icon is now a strokeable inline SVG that
   inherits `currentColor`.
   ------------------------------------------------------------------ */
.nav-lang {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  border: 1px solid rgba(138,156,184,0.3);
  padding: 0.45rem 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, color 0.3s;
}
.nav-lang:hover { border-color: var(--gold); color: var(--gold2); }

.cart-btn { white-space: nowrap; }
.cart-ico { width: 15px; height: 15px; flex-shrink: 0; display: block; }
.cart-label { line-height: 1; }

.nav-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.nav-menu-btn svg { width: 18px; height: 18px; display: block; }
.nav-menu-btn .ico-close { display: none; }
body.menu-open .nav-menu-btn .ico-open { display: none; }
body.menu-open .nav-menu-btn .ico-close { display: block; }

/* Trust bar: icon + title + subtitle instead of one broken <br> blob. */
.trust-item { display: flex; flex-direction: column; align-items: center; }
.trust-icon {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 0.95rem;
  color: var(--gold);
  opacity: 0.8;
  font-size: 0;
}
.trust-icon svg { width: 100%; height: 100%; display: block; }
.trust-text { font-family: 'Cinzel', serif; }
.trust-text strong {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241,235,221,0.92);
  margin-bottom: 0.45rem;
}
.trust-text span {
  display: block;
  font-family: var(--font-hand);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.012em;
  color: rgba(241,235,221,0.6);
}

/* ── Nav breathing room between the tablet menu (≤900px) and wide desktop ──
   At 1024–1400px the full menu is shown but the original 2rem gaps and
   0.28em brand tracking overflowed, wrapping the brand onto two lines and
   pushing links under the fixed offer banner. Tighten instead of wrap. */
#nav { flex-wrap: nowrap; }
.nav-brand { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1400px) {
  #nav { padding-left: 1.6rem; padding-right: 1.6rem; }
  .nav-brand { font-size: 1.2rem; letter-spacing: 0.2em; }
  .nav-links { gap: 1.25rem; }
  .nav-links a { font-size: 0.88rem; letter-spacing: 0.1em; }
  .nav-lang { padding: 0.35rem 0.55rem; }
  .cart-btn { padding: 0.4rem 0.7rem; }
}
@media (min-width: 901px) and (max-width: 1120px) {
  .nav-links { gap: 0.95rem; }
  .nav-links a { font-size: 0.8rem; letter-spacing: 0.06em; }
}

/* ------------------------------------------------------------------
   6. Narrow-container hardening.
   In preview iframes / embedded WebViews the mobile stylesheet may not be
   in the cascade. Keep the brand from hard-clipping ("XUANZHE" with the
   rest cut off) even at the base stylesheet level.
   ------------------------------------------------------------------ */
.nav-brand {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------
   7. Blank-page failsafe (works without JavaScript).
   The base stylesheet starts .reveal at opacity:0 and gives .hero-inner
   "animation:fadeUp ... both" — the `both` fill mode pins the opacity:0
   keyframe even before playback starts. In device simulation, background
   preview iframes, reduced-motion emulation or when xzg.js is blocked by
   a stale cache, those elements can stay invisible forever and the page
   looks like a blank navy panel with only the nav brand showing.

   - html.xzg-js is added by xzg.js itself. If the script is missing or is
     an older build, the class is absent and everything stays visible.
   - .hero-inner keeps its entrance animation but no longer uses `both`,
     so a disabled/paused animation falls back to the visible base style.
   ------------------------------------------------------------------ */
html:not(.xzg-js) .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html:not(.xzg-js) .hero-inner {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.hero-inner {
  opacity: 1;
  animation: fadeUp 1.2s ease;
}

/* ------------------------------------------------------------------
   8. Latin hero typography (desktop / tablet only).
   The display size in the base sheet was tuned for short CJK headlines
   (6-8 glyphs). The English copy is 3-4x longer: at 1200px the headline
   wraps to four 108px lines, the eyebrow and subtitle wrap too, and both
   CTA buttons are pushed below the fold — the English homepage looks
   "broken" while the Chinese one looks fine. Scale the latin display
   type down and tighten its tracking. Phone sizing stays untouched:
   mobile.css is the last sheet and owns everything <= 900px.
   ------------------------------------------------------------------ */
@media (min-width: 901px) {
  html[lang^="en"] .hero-title {
    font-size: clamp(2.4rem, 4.8vw, 4rem);
    line-height: 1.08;
    letter-spacing: 0.025em;
  }
  html[lang^="en"] .hero-title em { font-size: 0.94em; }
  html[lang^="en"] .hero-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.3em;
  }
  html[lang^="en"] .hero-cn {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    letter-spacing: 0.2em;
  }
  html[lang^="en"] .hero-sub {
    font-size: clamp(1rem, 1.45vw, 1.18rem);
    max-width: 640px;
    line-height: 1.75;
  }
}