/**
 * Ittar Waly — shared storefront design system.
 * One stylesheet for every static page (previously ~230 lines of near-identical
 * CSS were duplicated inline in each of ~20 HTML files). Organized as:
 *   1. Design tokens      5. Header / nav / footer   9. Cart
 *   2. Legacy var bridge   6. Buttons / forms        10. Checkout
 *   3. Base / typography   7. Cards / badges / grid  11. Account / auth
 *   4. Layout utilities    8. Product detail         12. Content pages (blog/faq/contact)
 *
 * IMPORTANT: several classnames/ids below are generated directly by the page
 * JS (js/*.js) — e.g. .product-card, .cart-item, .order-status, #productGrid,
 * #cartItems. Do not rename them without also updating the JS that emits them.
 */

/* ===========================================================
   1. DESIGN TOKENS
   =========================================================== */
:root {
  /* Brand: near-black with a subtle navy undertone, restrained warm gold,
     off-white text. Premium fragrance-house palette. */
  --color-primary: #C9A227;
  --color-primary-dark: #8C711A;
  --color-primary-hover: #E0BB47;
  --color-on-primary: #17130A;

  --color-accent: #D8B44A;
  --color-accent-hover: #C9A227;
  --color-accent-light: #F3E3B0;
  --color-on-accent: #17130A;

  --color-background: #0A0C10;
  --color-surface: #12141B;
  --color-surface-alt: #181B24;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(216, 180, 74, 0.35);

  --color-text: #F3F1E9;
  --color-text-muted: #A8A296;
  --color-text-soft: #726C60;

  --color-success: #5FA872;
  --color-success-bg: rgba(95, 168, 114, 0.12);
  --color-warning: #D9A441;
  --color-warning-bg: rgba(217, 164, 65, 0.12);
  --color-danger: #C85C50;
  --color-danger-bg: rgba(200, 92, 80, 0.12);

  /* Legacy variable names — kept ONLY because js/*.js writes inline
     style="color:var(--gold-light)" etc. directly into innerHTML. These alias
     to the new tokens above so every existing inline reference repaints
     correctly under the new palette without touching JS files. Do not remove
     without first checking product-page.js / cart-page.js / checkout-page.js /
     account-page.js for var(--gold)/var(--card)/var(--text-dim)/etc. usage. */
  --bg: var(--color-background);
  --bg-alt: var(--color-surface-alt);
  --card: var(--color-surface);
  --card-border: var(--color-border);
  --gold: var(--color-accent);
  --gold-light: var(--color-primary);
  --text: var(--color-text);
  --text-dim: var(--color-text-muted);
  --text-muted: var(--color-text-muted);
  --line: var(--color-border);
  --danger: var(--color-danger);

  /* Typography */
  --font-display: 'Manrope', sans-serif;
  --font-sans: 'Manrope', sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius — deliberately restrained (spec calls out "no excessive rounded
     cards"); premium reads as sharp/thin-bordered, not soft/bubbly. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 6px;
  --radius-full: 999px;

  /* Shadow — near-black + a very restrained warm glow variant for gold-accent
     hover states (glow, not a colored drop shadow). */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 6px 20px rgba(201, 162, 39, 0.18);

  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* ===========================================================
   3. BASE / RESET / TYPOGRAPHY
   =========================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
h1 { color: var(--color-text); }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: var(--font-sans); }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===========================================================
   SCROLL REVEAL
   Applied by js/scroll-reveal.js via IntersectionObserver — a plain class
   toggle, no animation library. `.reveal` is the pre-scroll hidden state,
   `.reveal.in-view` is added once the element crosses the viewport threshold.
   Skipped entirely (elements start visible) under prefers-reduced-motion.
   =========================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 650ms ease, transform 650ms ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > * { transition-delay: calc(var(--reveal-i, 0) * 80ms); }

/* ===========================================================
   4. LAYOUT UTILITIES
   =========================================================== */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-wide { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 800px; margin: 0 auto; padding: 0 32px; }
.wrap-article { max-width: 720px; margin: 0 auto; padding: 0 32px; }

.section { padding: 90px 0; border-bottom: 1px solid var(--color-border); }
.section:last-of-type { border-bottom: none; }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.section-head h2 { font-size: 36px; }
.section-head a { font-size: 13px; color: var(--color-primary); font-weight: 600; border-bottom: 1px solid var(--color-accent); padding-bottom: 2px; }
.section-head a:hover { color: var(--color-primary-hover); }

@media (max-width: 900px) {
  .wrap, .wrap-wide, .wrap-narrow, .wrap-article { padding: 0 20px; }
  .section { padding: 56px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-head h2 { font-size: 26px; }
}

/* ===========================================================
   5. HEADER / NAV / FOOTER
   =========================================================== */
.announce {
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-align: center;
  font-size: 13px;
  padding: 9px 12px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--color-primary-dark);
}

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 36, 23, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow var(--transition-base), background var(--transition-base);
}
/* .scrolled is toggled by js/nav-toggle.js once the page scrolls past a small
   threshold — a very subtle lift, not a layout/height change. */
header.scrolled {
  box-shadow: var(--shadow-sm);
  background: rgba(13, 36, 23, 0.98);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: 1180px;
  margin: 0 auto;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--color-text);
  white-space: nowrap;
}
.logo-mark { height: 42px; width: auto; flex-shrink: 0; }
.logo-text { font-weight: 700; color: var(--color-text); }
.footer-brand .logo-mark { height: 46px; }

@media (max-width: 900px) {
  .logo-mark { height: 34px; }
}

.nav-links { display: flex; align-items: center; gap: 32px; font-size: 14px; color: var(--color-text-muted); position: relative; }
.nav-links a { transition: color var(--transition-fast); position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--color-primary); }
.nav-links a.active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -20px;
  height: 2px; background: var(--color-accent);
}

/* ---------- Accessories nav dropdown ----------
   Structure: .nav-dropdown > .nav-dropdown-head (link + toggle button) + .nav-dropdown-menu.
   Opens on hover/focus-within (desktop mouse/keyboard) AND via the JS-toggled
   `.open` class (desktop click, and the only mechanism on mobile/touch, where
   :hover doesn't apply) — see js/nav-dropdown.js. Never hover-only. */
.nav-dropdown { position: relative; }
.nav-dropdown-head { display: inline-flex; align-items: center; gap: 3px; }
.nav-dropdown-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  background: none; border: none; border-radius: var(--radius-sm);
  color: inherit; cursor: pointer;
}
.nav-dropdown-toggle:hover { color: var(--color-primary); }
.nav-dropdown-caret { width: 9px; height: 9px; transition: transform var(--transition-base); }
.nav-dropdown.open .nav-dropdown-caret,
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  /* Right-aligned, not left — Accessories is the rightmost nav item (next to
     the account/cart icons), so opening leftward keeps the menu on-screen
     instead of risking overflow past the viewport edge. */
  position: absolute; top: calc(100% + 14px); right: 0;
  min-width: 195px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
  /* Fade + slide, not display:none toggling, so it can actually transition.
     pointer-events off while hidden so an invisible panel can't eat clicks. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear var(--transition-base);
}
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s;
}

.nav-dropdown-menu a {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text);
  white-space: nowrap;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-primary);
}

.nav-icons { display: flex; gap: 18px; align-items: center; }
.icon-btn { width: 19px; height: 19px; display: inline-block; color: var(--color-primary); }
.nav-icons a { position: relative; display: inline-flex; }

/* Cart item-count badge — opt-in via #cartCountBadge; harmless if a page has no such element */
.cart-count-badge {
  position: absolute; top: -7px; right: -9px;
  background: var(--color-accent); color: var(--color-on-accent);
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 15px; height: 15px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

@media (max-width: 900px) {
  .nav-inner { padding: 14px 20px; }
  .nav-links {
    display: none;
    gap: 4px;
  }
  .nav-links.nav-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--color-surface);
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    gap: 4px;
  }
  .nav-links.nav-open a { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
  .nav-links.nav-open a:last-child { border-bottom: none; }
  .nav-links a.active::after { display: none; }
  .menu-toggle { display: block; }

  /* Accessories dropdown collapses into the mobile hamburger nav as a
     parent row (link + toggle) with an indented submenu that expands below it. */
  .nav-dropdown { display: flex; flex-direction: column; }
  .nav-dropdown-head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
  }
  .nav-links.nav-open .nav-dropdown:last-child .nav-dropdown-head { border-bottom: none; }
  /* Higher-specificity overrides — must beat .nav-links.nav-open a (line above)
     which would otherwise win on padding/border-bottom despite coming first. */
  .nav-links.nav-open .nav-dropdown-head a { padding: 0; border-bottom: none; }
  .nav-dropdown-toggle { width: 30px; height: 30px; }
  .nav-dropdown-caret { width: 11px; height: 11px; }
  .nav-dropdown-menu {
    position: static;
    display: none;
    background: none; border: none; box-shadow: none;
    padding: 2px 0 10px 14px;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: flex; }
  .nav-links.nav-open .nav-dropdown-menu a { padding: 8px 0; font-size: 13px; color: var(--color-text-muted); border-bottom: none; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 12px; color: var(--color-text-soft); padding: 22px 0 0; }
.breadcrumb a { color: var(--color-text-soft); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .sep { margin: 0 8px; }
.breadcrumb .current { color: var(--color-primary); }

.page-title { padding: 16px 0 40px; }
.page-title h1 { font-size: 38px; }
.page-title.with-action { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.page-title p { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; }

.page-head { padding: 36px 0 32px; border-bottom: 1px solid var(--color-border); }
.page-head h1 { font-size: 42px; margin-bottom: 8px; }
.page-head p { font-size: 14px; color: var(--color-text-muted); max-width: 520px; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--color-border);
  padding: 64px 0 32px;
  background: var(--color-surface-alt);
}
footer.footer-simple { padding: 32px 0; text-align: center; }
footer.footer-simple p { font-size: 12px; color: var(--color-text-muted); }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer-brand .logo { margin-bottom: 14px; }
.footer-brand p { font-size: 13px; color: var(--color-text-muted); max-width: 260px; }

/* Social icons live in the footer only (js/api.js builds the row from Store
   Content CMS fields — absent entirely when no platform is configured). Normal
   document flow: never fixed, sticky or floating. */
.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  color: var(--color-primary);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.footer-social a:hover, .footer-social a:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.footer-social a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.footer-social svg { width: 18px; height: 18px; }
footer.footer-simple .footer-social { justify-content: center; margin-top: 16px; }

.footer-col h4 {
  font-size: 12px; color: var(--color-primary);
  margin-bottom: 16px; letter-spacing: 0.04em;
  font-family: var(--font-sans); font-weight: 700;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13px; color: var(--color-text-muted); transition: color var(--transition-fast); }
.footer-col ul li a:hover, .footer-col ul li a.active { color: var(--color-primary); }

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--color-text-soft);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-bottom .footer-social { margin-top: 8px; }
  .page-title h1 { font-size: 28px; }
}

/* ===========================================================
   6. BUTTONS / FORMS
   =========================================================== */
.btn, .btn-primary, .btn-checkout, .btn-place-order, .btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px;
  font-size: 14px; font-weight: 600; font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  text-align: center;
}
.btn:hover:not(:disabled), .btn-primary:hover:not(:disabled), .btn-checkout:hover:not(:disabled), .btn-place-order:hover:not(:disabled), .btn-submit:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled), .btn-primary:active:not(:disabled), .btn-checkout:active:not(:disabled), .btn-place-order:active:not(:disabled), .btn-submit:active:not(:disabled) { transform: translateY(0); }
.btn:disabled, .btn-primary:disabled, .btn-checkout:disabled, .btn-place-order:disabled, .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 13px; }

.btn-primary, .btn-checkout, .btn-place-order, .btn-submit {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover, .btn-checkout:hover, .btn-place-order:hover, .btn-submit:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-glow);
}

/* Premium compact CTA — Add to Cart (Checkout/UI §6): content-sized with
   generous padding rather than stretching the full content column width. */
.btn-add-cart {
  min-width: 240px;
  max-width: 380px;
  padding: 17px 44px;
  min-height: 54px;
}
@media (max-width: 600px) {
  .btn-add-cart { width: 100%; max-width: none; }
}

/* Proceed to Checkout / Place Order (Checkout/UI §8-9): fill their compact
   .summary card (never the full page row) with comfortable padding/height
   instead of shrink-wrapping tightly around the label text. */
.btn-checkout, .btn-place-order {
  width: 100%;
  padding: 17px 30px;
  min-height: 54px;
  margin-top: 8px;
}

.btn-ghost, .btn-outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn-ghost:hover, .btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}
.btn-accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); box-shadow: 0 6px 16px rgba(201, 162, 39, 0.25); }

.btn-icon {
  width: 52px; padding: 0;
  border: 1px solid var(--color-border-strong);
  background: transparent; color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.btn-icon:hover { border-color: var(--color-primary); }
.btn-icon svg { width: 18px; height: 18px; }

/* ---------- Form fields ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--color-text);
  font-size: 14px;
  transition: border-color var(--transition-fast);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-soft); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-primary); }
.field .error-msg { display: none; color: var(--color-danger); font-size: 12px; margin-top: 6px; }
.field.invalid input, .field.invalid select { border-color: var(--color-danger); }
.field.invalid .error-msg { display: block; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-row.single { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ===========================================================
   7. CARDS / BADGES / PRODUCT GRID
   =========================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--color-accent); color: var(--color-on-accent);
  font-size: 10px; font-weight: 700;
  padding: 4px 9px; letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
}
.badge-outline { background: transparent; border: 1px solid var(--color-accent); color: var(--color-primary); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.product-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.product-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); transform: translateY(-3px); }

.product-img {
  aspect-ratio: 1;
  background: var(--color-surface-alt);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
  padding: 14px;
}
.product-img svg { width: 42px; height: 42px; color: var(--color-accent); opacity: 0.9; }
.product-img img { transition: transform 420ms ease; }
.product-card:hover .product-img img { transform: scale(1.035); }

/* Hover photo (Product Image Management) — fades in over the first-view photo
   on hover; CSS-only, no JS needed. Absent entirely when a product has none. */
.product-img-hover {
  position: absolute; top: 14px; right: 14px; bottom: 14px; left: 14px;
  opacity: 0;
  transition: opacity 300ms ease, transform 420ms ease;
}
.product-card:hover .product-img-hover { opacity: 1; transform: scale(1.035); }

.product-body { padding: 16px 18px 18px; }
.product-tag { font-size: 11px; color: var(--color-accent-hover); margin-bottom: 6px; letter-spacing: 0.03em; font-weight: 600; text-transform: uppercase; }
.product-title { font-size: 15px; color: var(--color-text); margin-bottom: 10px; transition: color var(--transition-fast); }
.product-card:hover .product-title { color: var(--color-primary); }
.product-card-rating { margin-bottom: 10px; font-size: 12px; }
.product-card-rating .stars { font-size: 13px; }
.product-card-rating--empty { color: var(--color-text-soft); font-style: italic; }
.product-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-price { font-size: 14px; color: var(--color-primary); font-weight: 700; }
.product-price .old-price { font-size: 12px; color: var(--color-text-soft); text-decoration: line-through; font-weight: 400; margin-left: 8px; }
.product-stock-note { font-size: 11px; color: var(--color-text-soft); margin-top: 4px; }
.product-stock-note.low { color: var(--color-warning); }

/* Decorative cart-icon affordance — the whole card is already the real link
   to the product page (variant/qty selection happens there), so this is not
   a second, separate control; it's part of the same click target. */
.product-cart-btn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-accent); color: var(--color-on-accent);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.product-card:hover .product-cart-btn { background: var(--color-accent-hover); transform: scale(1.08); }
.product-cart-btn svg { width: 14px; height: 14px; }

/* Shared object-fit rule for every JS-generated product/cart/order image —
   `contain` (not `cover`) so bottle/box photography never gets cropped;
   the surrounding container's background fills any letterboxing. */
.product-img img,
.product-img-hover,
.gallery-main img,
.thumb img,
.item-img img,
.s-img img,
.order-item-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ---------- Shop layout: category/curated listing pages ---------- */
.shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 48px 0 90px;
}

.filters h3 {
  font-size: 12px; color: var(--color-primary);
  letter-spacing: 0.04em; font-weight: 700;
  margin-bottom: 16px;
}
.filter-group { margin-bottom: 32px; }
.filter-option {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--color-text-muted);
  margin-bottom: 10px; cursor: pointer;
}
.filter-option input { accent-color: var(--color-primary); }
.filter-option:hover { color: var(--color-text); }
.filter-count { color: var(--color-text-soft); margin-left: auto; font-size: 12px; }

.price-range { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); }
.price-range input[type="range"] { accent-color: var(--color-primary); flex: 1; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; font-size: 13px; color: var(--color-text-muted); }
.sort-select {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 9px 12px;
  font-size: 13px;
}

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.pagination a, .pagination span {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--color-text-muted);
}
.pagination .active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.filters-toggle { display: none; }

.filters-clear {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.filters-clear:hover { border-color: var(--color-primary); color: var(--color-primary); }

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; gap: 28px; }
  .filters { border-bottom: 1px solid var(--color-border); padding-bottom: 24px; }
  .filters-toggle {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 13px 16px; margin-bottom: 20px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); color: var(--color-text);
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .filters-toggle svg { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }
  .filters { display: none; }
  .filters.is-open { display: block; }
}

/* ---------- State messages (loading / empty / error) ---------- */
#stateMessage, .state-message {
  text-align: center; padding: 60px 20px;
  color: var(--color-text-muted); font-size: 14px;
}

/* ===========================================================
   HERO / HOMEPAGE
   =========================================================== */
.hero {
  padding: 64px 0 0;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 500px at 78% 18%, rgba(216, 180, 74, 0.10), transparent 60%),
    var(--color-background);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr auto; gap: 56px; align-items: center; padding-bottom: 56px; }
.hero-eyebrow { font-size: 12px; color: var(--color-accent); margin-bottom: 20px; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; }
.hero h1 { font-size: 52px; line-height: 1.14; color: var(--color-text); max-width: 480px; font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero p { margin-top: 22px; color: var(--color-text-muted); max-width: 400px; font-size: 16px; }
.hero-ctas { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }

/* Right-side vertical stat stack — real, non-fabricated trust facts already
   published elsewhere on the site, formatted like a premium stat list
   (bold headline + label) rather than invented customer/revenue counts. */
.hero-stats { display: flex; flex-direction: column; gap: 26px; padding-left: 32px; border-left: 1px solid var(--color-border); }
.hero-stat .stat-value { font-size: 26px; font-weight: 800; color: var(--color-accent); line-height: 1; }
.hero-stat .stat-label { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; white-space: nowrap; }

/* Entrance animation: a gentle, staggered fade-up on load only (not scroll-tied,
   the hero is always in view first paint) — disabled entirely under
   prefers-reduced-motion via the global `animation: none !important` rule above. */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-eyebrow { animation: heroFadeUp 700ms ease both; }
.hero h1 { animation: heroFadeUp 700ms ease 90ms both; }
.hero p { animation: heroFadeUp 700ms ease 170ms both; }
.hero-ctas { animation: heroFadeUp 700ms ease 250ms both; }
.hero-visual { animation: heroFadeIn 900ms ease 200ms both; }

.hero-visual-wrap { position: relative; }
.hero-visual {
  aspect-ratio: 4/5;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(216, 180, 74, 0.16), transparent 70%),
    linear-gradient(160deg, var(--color-surface) 0%, var(--color-background) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.hero-visual::before {
  content: ''; position: absolute; inset: 22px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  opacity: 0.5;
}
/* Vignette so the silhouette reads as lit-from-above studio product
   photography rather than a flat icon on a card. */
.hero-visual::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(0, 0, 0, 0.55), transparent 60%);
  pointer-events: none;
}
.bottle-mark { width: 108px; height: 108px; color: var(--color-accent); opacity: 0.95; position: relative; z-index: 1; filter: drop-shadow(0 18px 36px rgba(216, 180, 74, 0.25)); }
/* Admin-uploaded hero image (Homepage Hero Image Management) — fills the same
   card the decorative bottle graphic sits in; hidden unless CMS content sets one. */
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-visual-caption {
  position: absolute; left: 28px; bottom: 26px; z-index: 2;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted);
}
.hero-visual-caption b { color: var(--color-text); font-weight: 700; letter-spacing: 0.02em; text-transform: none; display: block; font-size: 15px; margin-top: 4px; }

/* Slider dots + arrows — cycles the caption/icon above between the site's
   real categories (Perfume/Attar/Herbal), not a fabricated image carousel. */
.hero-slider-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.hero-dots { display: flex; gap: 10px; font-size: 11px; color: var(--color-text-soft); letter-spacing: 0.04em; }
.hero-dots button {
  background: none; border: none; padding: 2px 0; cursor: pointer;
  color: var(--color-text-soft); font-size: 11px; font-family: var(--font-sans); letter-spacing: 0.04em;
  border-bottom: 2px solid transparent;
}
.hero-dots button.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.hero-arrows { display: flex; gap: 8px; }
.hero-arrows button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.hero-arrows button:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hero-arrows svg { width: 13px; height: 13px; }

/* Soft floating decorative accents — pure CSS, no image assets, very low
   opacity so they read as ambient light rather than decoration competing
   with the product mark. */
.hero-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: heroFloat 7s ease-in-out infinite;
}
.hero-glow-1 {
  width: 160px; height: 160px; top: -30px; right: -30px;
  background: radial-gradient(circle, rgba(216, 180, 74, 0.18) 0%, rgba(216, 180, 74, 0) 70%);
}
.hero-glow-2 {
  width: 200px; height: 200px; bottom: -50px; left: -40px;
  background: radial-gradient(circle, rgba(23, 74, 124, 0.16) 0%, rgba(23, 74, 124, 0) 70%);
  animation-delay: -3.5s;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.05); }
}

.trust { border-bottom: 1px solid var(--color-border); padding: 26px 0; background: var(--color-surface-alt); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trust-item { display: flex; align-items: center; gap: 14px; justify-content: center; font-size: 13px; color: var(--color-text-muted); }
.trust-item svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; }

/* ---------- Secondary feature strip (below hero) ---------- */
.feature-strip { padding: 64px 0; border-bottom: 1px solid var(--color-border); }
.feature-strip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature-strip h2 { font-size: 32px; line-height: 1.25; }
.feature-strip h2 em { font-style: normal; color: var(--color-accent); }
.feature-strip p { color: var(--color-text-muted); font-size: 15px; max-width: 440px; }
.feature-strip-cta { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.feature-arrow-btn {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-accent); color: var(--color-on-accent);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.feature-arrow-btn:hover { background: var(--color-accent-hover); transform: translateX(2px); }
.feature-arrow-btn svg { width: 18px; height: 18px; }
.feature-strip-cta .feature-cta-label { font-size: 14px; font-weight: 600; color: var(--color-text); }
.feature-strip-line { flex: 1; height: 1px; background: var(--color-border); position: relative; }
.feature-strip-line::before, .feature-strip-line::after {
  content: ''; position: absolute; top: 50%; width: 6px; height: 6px; border: 1px solid var(--color-border-strong);
  border-radius: 50%; transform: translateY(-50%);
}
.feature-strip-line::before { left: 40%; }
.feature-strip-line::after { left: 55%; }

@media (max-width: 900px) {
  .feature-strip-grid { grid-template-columns: 1fr; gap: 20px; }
  .feature-strip-line { display: none; }
}

.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.cat-card {
  background: var(--color-surface); padding: 44px 24px; text-align: center;
  position: relative; z-index: 0;
  transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.cat-card:hover { background: var(--color-surface-alt); transform: translateY(-3px); box-shadow: var(--shadow-sm); z-index: 1; }
.cat-card svg { width: 30px; height: 30px; color: var(--color-accent); margin: 0 auto 18px; transition: transform var(--transition-base); }
.cat-card:hover svg { transform: scale(1.08); }
.cat-card h3 { font-size: 22px; color: var(--color-text); margin-bottom: 6px; transition: color var(--transition-fast); }
.cat-card:hover h3 { color: var(--color-primary); }
.cat-card p { font-size: 12px; color: var(--color-text-muted); }

/* Compact trust-icon row used inside the brand-story panel — spec section 14
   (Natural Ingredients / Non-Alcoholic / Premium Quality), distinct from the
   hero's vertical stat stack so the same three real facts aren't repeated. */
.mini-trust-row { display: flex; gap: 26px; flex-wrap: wrap; margin: 26px 0 4px; }
.mini-trust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); }
.mini-trust-item svg { width: 16px; height: 16px; color: var(--color-accent); flex-shrink: 0; }

.story, .story-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.story-visual { aspect-ratio: 3/4; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
/* Admin-uploaded section image (Homepage Section Image Management) — fills the
   same decorative box; hidden unless CMS content sets one. */
.story-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.story h2, .story-copy h2 { font-size: 34px; line-height: 1.25; max-width: 440px; }
.story p, .story-copy p { margin-top: 20px; color: var(--color-text-muted); max-width: 460px; }
.story-copy p:first-of-type { margin-top: 0; }

.newsletter { text-align: center; padding: 90px 0; }
.newsletter h2 { font-size: 32px; margin-bottom: 12px; }
.newsletter p { color: var(--color-text-muted); margin-bottom: 30px; font-size: 14px; }
.newsletter-form { display: flex; justify-content: center; max-width: 420px; margin: 0 auto; }
.newsletter-form input {
  flex: 1; min-width: 0; background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 14px 18px; color: var(--color-text); font-size: 14px;
}
.newsletter-form input::placeholder { color: var(--color-text-soft); }
.newsletter-form input:focus { outline: none; border-color: var(--color-primary); }
.newsletter-form button {
  background: var(--color-primary); color: var(--color-on-primary);
  border: 1px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0 22px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.newsletter-form button:hover { background: var(--color-primary-hover); }

/* ---------- Accessories hub (subcategory tiles) ---------- */
.subcat-section { padding: 56px 0 96px; }
.subcat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.subcat-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.subcat-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.subcat-card .subcat-icon { width: 44px; height: 44px; color: var(--color-accent); margin-bottom: 20px; }
.subcat-card h2 { font-size: 26px; margin-bottom: 10px; }
.subcat-card p { font-size: 13px; color: var(--color-text-muted); margin-bottom: 18px; }
.subcat-card .subcat-link { font-size: 13px; color: var(--color-primary); font-weight: 600; letter-spacing: 0.02em; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr 0.85fr; }
  .hero-stats {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap; gap: 28px;
    border-left: none; border-top: 1px solid var(--color-border);
    padding: 24px 0 0;
  }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .subcat-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero { padding: 40px 0 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .hero h1 { font-size: 34px; max-width: 100%; }
  .hero p { max-width: 100%; }
  .hero-visual { max-width: 320px; margin: 0 auto; }
  .hero-visual-wrap { max-width: 320px; margin: 0 auto; }
  .hero-stats { justify-content: center; text-align: center; }
  .newsletter-form { max-width: 100%; }
  .trust-grid { grid-template-columns: 1fr; gap: 14px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .story, .story-grid { grid-template-columns: 1fr; gap: 28px; }
  .story h2, .story p, .story-copy h2, .story-copy p { max-width: 100%; }
}

/* ===========================================================
   8. PRODUCT DETAIL
   =========================================================== */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 32px 0 80px; }

.gallery-main {
  aspect-ratio: 1;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
  padding: 28px;
}
.gallery-main svg { width: 100px; height: 100px; color: var(--color-accent); opacity: 0.85; }
.gallery-main img { transition: transform 450ms ease; cursor: zoom-in; }
.gallery-main:hover img { transform: scale(1.06); }
.gallery-thumbs { display: flex; gap: 10px; }
.thumb {
  width: 68px; height: 68px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
}
.thumb.active { border-color: var(--color-primary); }
.thumb svg { width: 26px; height: 26px; color: var(--color-accent); opacity: 0.7; }

.rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); margin-bottom: 20px; }
.rating .stars { color: var(--color-accent); letter-spacing: 2px; }

.rating .rating-link { color: inherit; border-bottom: 1px solid transparent; transition: border-color var(--transition-fast), color var(--transition-fast); }
.rating .rating-link:hover, .rating .rating-link:focus-visible { color: var(--color-primary); border-bottom-color: var(--color-accent); }

.reviews-section { padding-top: 40px; padding-bottom: 56px; border-top: 1px solid var(--color-border); scroll-margin-top: 90px; }
.reviews-heading { font-size: 24px; margin-bottom: 20px; }
.rating-summary { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; margin-bottom: 8px; }
.rating-summary:empty { display: none; }
.rating-summary__score { display: flex; flex-direction: column; gap: 4px; }
.rating-summary__avg { font-size: 44px; line-height: 1; color: var(--color-text); }
.rating-summary__stars { color: var(--color-accent); letter-spacing: 3px; font-size: 18px; }
.rating-summary__count { font-size: 12px; color: var(--color-text-muted); }
.rating-bars { list-style: none; margin: 0; padding: 0; flex: 1 1 260px; max-width: 420px; display: grid; gap: 6px; }
.rating-bars li { display: grid; grid-template-columns: 34px 1fr 36px; align-items: center; gap: 10px; font-size: 12px; color: var(--color-text-muted); }
.rating-bars__track { height: 6px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.rating-bars__fill { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-full); }
.rating-bars__n { text-align: right; }

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

/* Review star picker — native radios (value 1–5) are the source of truth; the
   inputs stay focusable but visually hidden so keyboard/screen-reader use works. */
.star-picker { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.star-picker__stars { display: inline-flex; margin-left: -7px; }
.star-picker__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.star-picker__star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--color-text-muted); user-select: none; -webkit-tap-highlight-color: transparent;
}
.star-picker__star.is-on { color: var(--color-accent); }
.star-picker__input:focus-visible + .star-picker__star { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.star-picker.is-locked .star-picker__star { cursor: default; }
.star-picker__text { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

.product-desc { font-size: 14px; color: var(--color-text-muted); margin-bottom: 28px; max-width: 460px; }

.option-group { margin-bottom: 24px; }
.option-label { font-size: 12px; color: var(--color-primary); letter-spacing: 0.03em; margin-bottom: 10px; display: block; font-weight: 700; }
.size-options { display: flex; gap: 10px; flex-wrap: wrap; }
.size-btn {
  position: relative;
  padding: 10px 18px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text);
  font-size: 13px; cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.size-btn.selected {
  border-color: var(--color-primary); color: var(--color-primary);
  background: rgba(201, 162, 39, 0.08);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.size-btn.selected::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -7px;
  height: 2px; background: var(--color-accent); border-radius: var(--radius-full);
}
.size-btn:hover:not(:disabled) { border-color: var(--color-primary); transform: translateY(-1px); }

/* Brief pulse when the price updates after a variant switch — see
   js/product-page.js updatePriceAndStock(). Purely visual, not layout-shifting. */
@keyframes priceUpdate {
  0% { opacity: 0.35; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
#productPrice.price-flash { animation: priceUpdate 260ms ease; }

.qty-row { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.qty-control { display: flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.qty-control button { width: 38px; height: 42px; background: none; border: none; color: var(--color-primary); font-size: 16px; cursor: pointer; }
.qty-control span, .qty-control .qty-val { width: 40px; text-align: center; font-size: 14px; }

.stock-note { font-size: 13px; color: var(--color-text-muted); }
.stock-note .dot { color: var(--color-success); }

@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
#cartFeedback.cart-feedback-in { animation: feedbackIn 260ms ease; }
/* Added to Cart + View Cart (Checkout/UI §7): stacked with real spacing, and
   View Cart reads as a distinct button rather than plain inline text. */
#cartFeedback.cart-feedback-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.cart-feedback-msg { display: inline-flex; align-items: center; gap: 6px; }
.cart-feedback-viewcart {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: 13px; font-weight: 600;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.cart-feedback-viewcart:hover, .cart-feedback-viewcart:focus-visible {
  border-color: var(--color-primary);
  background: rgba(201, 162, 39, 0.08);
  color: var(--color-primary-hover);
}
@media (max-width: 600px) {
  #cartFeedback.cart-feedback-row { flex-direction: column; align-items: flex-start; }
}

.action-row { display: flex; gap: 14px; margin-bottom: 32px; }

.info-list { border-top: 1px solid var(--color-border); padding-top: 20px; }
.info-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-text-muted); padding: 8px 0; }
.info-row svg { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }

.tabs-section { padding-bottom: 90px; }
.tab-nav { display: flex; gap: 40px; border-bottom: 1px solid var(--color-border); margin-bottom: 32px; }
.tab-btn {
  background: none; border: none; color: var(--color-text-soft);
  font-size: 14px; padding: 0 0 16px; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.tab-content { font-size: 14px; color: var(--color-text-muted); max-width: 640px; }
.tab-content p { margin-bottom: 14px; }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.notes-grid div h4 { font-size: 12px; color: var(--color-primary); margin-bottom: 6px; letter-spacing: 0.03em; font-weight: 700; }
.notes-grid div p { font-size: 13px; color: var(--color-text-muted); }

@media (max-width: 900px) {
  .product-detail { grid-template-columns: 1fr; gap: 32px; }
  .product-title { font-size: 28px !important; }
  .notes-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ===========================================================
   9. CART
   =========================================================== */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 56px; padding-bottom: 90px; }

.cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  align-items: center;
  gap: 20px;
  padding: 20px 12px;
  margin: 0 -12px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}
.cart-item:hover { background: var(--color-surface-alt); }
.cart-item:first-child { border-top: 1px solid var(--color-border); }

.item-img {
  width: 80px; height: 80px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.item-img svg { width: 32px; height: 32px; color: var(--color-accent); opacity: 0.85; }

.item-info .item-tag { font-size: 11px; color: var(--color-accent-hover); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; }
.item-info .item-name { font-size: 15px; color: var(--color-text); margin-bottom: 4px; }
.item-info .item-size { font-size: 12px; color: var(--color-text-soft); }

.qty-control button.qty-inc, .qty-control button.qty-dec { width: 32px; height: 36px; }
.item-price { font-size: 15px; color: var(--color-primary); font-weight: 700; white-space: nowrap; }

.remove-btn { background: none; border: none; color: var(--color-text-soft); cursor: pointer; padding: 4px; }
.remove-btn:hover { color: var(--color-danger); }
.remove-btn svg { width: 16px; height: 16px; }

.cart-actions { display: flex; justify-content: space-between; padding-top: 24px; }
.continue-link { font-size: 13px; color: var(--color-primary); font-weight: 600; border-bottom: 1px solid var(--color-accent); padding-bottom: 2px; }

.cart-empty, .empty-state { text-align: center; padding: 70px 20px; }
.cart-empty svg, .empty-state svg { width: 48px; height: 48px; color: var(--color-accent); margin: 0 auto 20px; opacity: 0.7; }
.cart-empty h2, .empty-state h2 { font-size: 26px; margin-bottom: 10px; }
.cart-empty p, .empty-state p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 24px; }

.summary { width: 100%; max-width: 100%; min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; height: fit-content; }
.summary h3 { font-size: 20px; margin-bottom: 20px; }

.summary-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--color-text-muted); padding: 10px 0; }
.summary-row.total { border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 16px; font-size: 16px; color: var(--color-text); font-weight: 700; }
.summary-row.total span:last-child { color: var(--color-primary); }

.promo-row { display: flex; gap: 8px; margin: 20px 0; }
.promo-row input {
  flex: 1; background: var(--color-background); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px; color: var(--color-text); font-size: 13px;
}
.promo-row input::placeholder { color: var(--color-text-soft); }
.promo-row button {
  background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  padding: 0 16px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.promo-row button:hover { background: var(--color-accent); color: var(--color-on-accent); }

.summary-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-soft); margin-top: 16px; }
.summary-note svg { width: 14px; height: 14px; color: var(--color-primary); flex-shrink: 0; }

.summary-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.summary-item:last-child { border-bottom: none; }
.summary-item .s-img {
  width: 48px; height: 48px; background: var(--color-surface-alt);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.summary-item .s-img svg { width: 20px; height: 20px; color: var(--color-accent); opacity: 0.85; }
.summary-item .s-info { flex: 1; }
.summary-item .s-name { font-size: 13px; color: var(--color-text); }
.summary-item .s-meta { font-size: 11px; color: var(--color-text-soft); margin-top: 2px; }
.summary-item .s-price { font-size: 13px; color: var(--color-primary); font-weight: 700; white-space: nowrap; }

@media (max-width: 900px) {
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; gap: 32px; }
  .cart-item { grid-template-columns: 60px 1fr; grid-template-areas: "img info" "img qty" "img price"; row-gap: 8px; }
  .item-img { grid-area: img; }
  .item-info { grid-area: info; }
  .qty-control { grid-area: qty; }
  .item-price { grid-area: price; }
  .remove-btn { position: absolute; top: 0; right: 0; }
}

/* ===========================================================
   10. CHECKOUT
   =========================================================== */
.checkout-header { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; }
.secure-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); }
.secure-note svg { width: 15px; height: 15px; color: var(--color-primary); }

.steps { display: flex; gap: 6px; font-size: 12px; color: var(--color-text-soft); padding-bottom: 32px; }
.steps span.current { color: var(--color-primary); font-weight: 600; }

.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 56px; padding-bottom: 90px; }

.form-section { margin-bottom: 36px; }
.form-section h2 { font-size: 20px; margin-bottom: 18px; }

/* Payment methods (Checkout/UI §10): 4 cards in one row on desktop, 2 on
   tablet, 1 on mobile. Grid rows stretch every card to equal height for free. */
.payment-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .payment-options { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .payment-options { grid-template-columns: 1fr; } }
.payment-option {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.payment-option:hover { border-color: var(--color-primary); }
.payment-option.selected { border-color: var(--color-primary); background: rgba(201, 162, 39, 0.07); box-shadow: 0 0 0 1px var(--color-primary); }
.payment-option input { accent-color: var(--color-primary); }
.payment-option .p-label { font-size: 14px; color: var(--color-text); font-weight: 600; }
.payment-option .p-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

.checkout-error-box {
  display: none; background: var(--color-danger-bg); border: 1px solid var(--color-danger);
  color: var(--color-danger); padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px;
}

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ===========================================================
   11. ACCOUNT / AUTH / ORDER CONFIRMATION
   =========================================================== */
.account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; padding-bottom: 90px; }

.side-nav a {
  display: block; font-size: 14px; color: var(--color-text-muted);
  padding: 12px 0; border-bottom: 1px solid var(--color-border);
}
.side-nav a.active { color: var(--color-primary); font-weight: 600; }
.side-nav a:hover { color: var(--color-primary); }

.logout-link { font-size: 13px; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-strong); padding-bottom: 2px; }
.logout-link:hover { color: var(--color-primary); border-color: var(--color-primary); }

.order-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 20px; overflow: hidden; }
.order-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; gap: 8px; }
.order-head .o-id { font-size: 14px; color: var(--color-text); font-weight: 600; }
.order-head .o-date { font-size: 12px; color: var(--color-text-soft); margin-top: 2px; }

.order-status {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 5px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--color-primary); color: var(--color-primary);
}
.order-status.delivered { border-color: var(--color-success); color: var(--color-success); background: var(--color-success-bg); }
.order-status.transit { border-color: var(--color-border-strong); color: var(--color-text-muted); background: var(--color-surface-alt); }
.order-status.cancelled { border-color: var(--color-danger); color: var(--color-danger); background: var(--color-danger-bg); }

.order-items { padding: 18px 22px; display: flex; gap: 14px; flex-wrap: wrap; }
.order-item-thumb { width: 52px; height: 52px; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.order-item-thumb svg { width: 22px; height: 22px; color: var(--color-accent); opacity: 0.85; }

.order-foot { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-top: 1px solid var(--color-border); flex-wrap: wrap; gap: 10px; }
.order-total { font-size: 14px; color: var(--color-primary); font-weight: 700; }
.order-actions a { font-size: 12px; color: var(--color-text-muted); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 8px 16px; margin-left: 8px; }
.order-actions a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.empty-orders { text-align: center; padding: 60px 20px; color: var(--color-text-muted); font-size: 14px; }

@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; gap: 24px; }
  .side-nav { display: flex; overflow-x: auto; gap: 4px; border-bottom: 1px solid var(--color-border); padding-bottom: 4px; }
  .side-nav a { border-bottom: none; padding: 8px 14px; white-space: nowrap; }
}

/* ---------- Auth (login/signup) ---------- */
body.auth-body { min-height: 100vh; display: flex; flex-direction: column; }
body.auth-body header { position: static; padding: 24px 32px; text-align: center; }
body.auth-body main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 20px; }

.auth-card { width: 100%; max-width: 400px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-sm); }

.tabs { display: flex; border-bottom: 1px solid var(--color-border); margin-bottom: 28px; }
.tabs .tab-btn { flex: 1; padding: 0 0 14px; font-size: 14px; }

.auth-panel { display: none; }
.auth-panel.active { display: block; }
.auth-panel h1 { font-size: 26px; margin-bottom: 6px; }
.auth-panel .sub { font-size: 13px; color: var(--color-text-muted); margin-bottom: 24px; }

.forgot-row { text-align: right; margin: -6px 0 20px; }
.forgot-row a { font-size: 12px; color: var(--color-primary); border-bottom: 1px solid var(--color-accent); padding-bottom: 1px; }

.divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; font-size: 11px; color: var(--color-text-soft); letter-spacing: 0.03em; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

.guest-link { display: block; text-align: center; font-size: 13px; color: var(--color-text-muted); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 12px; cursor: pointer; }
.guest-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

.success-note {
  display: none; align-items: center; gap: 10px;
  background: var(--color-success-bg); border: 1px solid var(--color-success);
  border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: 13px; color: var(--color-success); margin-top: 16px;
}
.success-note svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Order confirmation ---------- */
.confirm-hero { text-align: center; padding: 64px 0 40px; }
.check-circle {
  width: 64px; height: 64px;
  border: 1px solid var(--color-success);
  background: var(--color-success-bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.check-circle svg { width: 28px; height: 28px; color: var(--color-success); }
.confirm-hero h1 { font-size: 34px; margin-bottom: 10px; }
.confirm-hero p { font-size: 14px; color: var(--color-text-muted); }
.order-number { font-size: 13px; color: var(--color-primary); font-weight: 600; margin-top: 14px; letter-spacing: 0.02em; }

.info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; margin-bottom: 24px; }
.info-card h3 { font-size: 18px; margin-bottom: 18px; }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail-grid h4 { font-size: 12px; color: var(--color-primary); letter-spacing: 0.03em; margin-bottom: 8px; font-weight: 700; }
.detail-grid p { font-size: 13px; color: var(--color-text-muted); line-height: 1.7; }

.track-note {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--color-text-muted);
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 20px; margin-bottom: 32px;
}
.track-note svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }

.actions { display: flex; gap: 14px; padding-bottom: 90px; }

@media (max-width: 600px) {
  .confirm-hero h1 { font-size: 26px; }
  .detail-grid { grid-template-columns: 1fr; gap: 18px; }
  .actions { flex-direction: column; }
}

/* ===========================================================
   12. CONTENT PAGES (blog / faq / contact / policy / about)
   =========================================================== */

/* About */
.about-hero { padding: 40px 0 70px; border-bottom: 1px solid var(--color-border); text-align: center; }
.about-hero .eyebrow { font-size: 12px; color: var(--color-accent-hover); letter-spacing: 0.04em; margin-bottom: 14px; font-weight: 600; }
.about-hero h1 { font-size: 46px; max-width: 640px; margin: 0 auto 18px; line-height: 1.2; }
.about-hero p { font-size: 15px; color: var(--color-text-muted); max-width: 520px; margin: 0 auto; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.value-card { background: var(--color-surface); padding: 40px 28px; }
.value-card svg { width: 26px; height: 26px; color: var(--color-accent); margin-bottom: 16px; }
.value-card h3 { font-size: 20px; margin-bottom: 8px; }
.value-card p { font-size: 13px; color: var(--color-text-muted); }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-num { font-size: 42px; color: var(--color-primary); font-family: var(--font-display); }
.stat-label { font-size: 12px; color: var(--color-text-soft); margin-top: 6px; letter-spacing: 0.03em; }

.cta-band { text-align: center; padding: 80px 0 90px; }
.cta-band h2 { font-size: 30px; margin-bottom: 16px; }

@media (max-width: 900px) {
  .about-hero h1 { font-size: 30px; }
  .values-grid, .stats-row { grid-template-columns: 1fr 1fr; }
  .value-card { grid-column: span 1; }
}
@media (max-width: 600px) {
  .stats-row { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* FAQ */
.faq-group { margin-bottom: 44px; }
.faq-group h2 { font-size: 22px; margin-bottom: 18px; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 18px 0; font-size: 15px; color: var(--color-text); font-family: var(--font-sans); font-weight: 600;
}
.faq-question .plus { color: var(--color-accent-hover); font-size: 18px; transition: transform var(--transition-base); flex-shrink: 0; margin-left: 16px; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  font-size: 14px; color: var(--color-text-muted); line-height: 1.7;
  transition: max-height var(--transition-base), padding var(--transition-base);
}
.faq-item.open .faq-answer { max-height: 300px; padding-bottom: 20px; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-bottom: 90px; }
.contact-info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; margin-bottom: 20px; }
.icon-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; }
.icon-row:last-child { margin-bottom: 0; }
.icon-row svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.icon-row h4 { font-size: 13px; color: var(--color-text); margin-bottom: 3px; }
.icon-row p, .icon-row a { font-size: 13px; color: var(--color-text-muted); }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* Blog */
.page-title.center, .page-title-center { text-align: center; }

.featured-post {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px;
  align-items: center; padding-bottom: 70px; border-bottom: 1px solid var(--color-border); margin-bottom: 60px;
}
.featured-visual { aspect-ratio: 4/3; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.featured-copy .eyebrow { font-size: 12px; color: var(--color-accent-hover); margin-bottom: 12px; letter-spacing: 0.03em; font-weight: 600; }
.featured-copy h2 { font-size: 30px; line-height: 1.25; margin-bottom: 14px; }
.featured-copy p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 18px; max-width: 460px; }
.post-meta { font-size: 12px; color: var(--color-text-soft); }
.read-link { font-size: 13px; color: var(--color-primary); font-weight: 600; border-bottom: 1px solid var(--color-accent); padding-bottom: 2px; display: inline-block; margin-top: 16px; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-bottom: 90px; }
.post-card { display: block; }
.post-card .post-visual { aspect-ratio: 4/3; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 16px; }
.post-card .post-cat { font-size: 11px; color: var(--color-accent-hover); letter-spacing: 0.03em; margin-bottom: 8px; font-weight: 600; }
.post-card h3 { font-size: 19px; line-height: 1.3; margin-bottom: 8px; }
.post-card .post-excerpt { font-size: 13px; color: var(--color-text-muted); margin-bottom: 10px; }

.cover-visual { aspect-ratio: 16/9; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 48px; }
.article-head { padding: 24px 0 36px; }
.article-head .eyebrow { font-size: 12px; color: var(--color-accent-hover); letter-spacing: 0.03em; margin-bottom: 14px; font-weight: 600; }
.article-head h1 { font-size: 38px; line-height: 1.2; margin-bottom: 14px; }
.article-head .meta { font-size: 13px; color: var(--color-text-muted); }

.article-body p { font-size: 15px; color: var(--color-text-muted); margin-bottom: 20px; }
.article-body h2 { font-size: 24px; color: var(--color-primary); margin: 36px 0 14px; }
.article-body blockquote {
  border-left: 2px solid var(--color-accent); padding-left: 20px;
  font-family: var(--font-display); font-style: normal;
  font-size: 20px; color: var(--color-text); margin: 28px 0;
}
.article-body ul { list-style: disc; padding-left: 20px; margin-bottom: 20px; }
.article-body ul li { font-size: 15px; color: var(--color-text-muted); margin-bottom: 8px; }

.article-foot { padding: 40px 0 90px; border-top: 1px solid var(--color-border); margin-top: 40px; }
.tags { display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.tag { font-size: 11px; color: var(--color-primary); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); padding: 5px 12px; }
.share-row { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--color-text-muted); flex-wrap: wrap; }
.share-row a { color: var(--color-primary); font-weight: 600; }

@media (max-width: 900px) {
  .featured-post { grid-template-columns: 1fr; gap: 24px; }
  .post-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .article-head h1 { font-size: 28px; }
}
@media (max-width: 600px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* Policy / plain article pages (terms/privacy/shipping/returns) */
.article { padding: 24px 0 100px; }
.article h1 { font-size: 36px; margin-bottom: 8px; }
.article .updated { font-size: 12px; color: var(--color-text-soft); margin-bottom: 36px; }
.article h2 { font-size: 20px; margin: 36px 0 12px; color: var(--color-primary); }
.article h2:first-of-type { margin-top: 0; }
.article p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 14px; }
.article ul, .article ol { padding-left: 20px; margin-bottom: 14px; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { font-size: 14px; color: var(--color-text-muted); margin-bottom: 8px; }
.article a { color: var(--color-primary); border-bottom: 1px solid var(--color-accent); }
.article table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; }
.article table th, .article table td { text-align: left; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--color-border); }
.article table th { color: var(--color-primary); font-weight: 700; }
.article table td { color: var(--color-text-muted); }

@media (max-width: 600px) {
  .article h1 { font-size: 28px; }
}

/* ===========================================================
   13. WHATSAPP FLOATING BUTTON
   =========================================================== */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 70;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
@media (max-width: 600px) {
  .whatsapp-float { right: 14px; bottom: 14px; width: 50px; height: 50px; }
}

/* ===========================================================
   14. BACK-IN-STOCK NOTIFY FORM (product.html)
   =========================================================== */
.notify-restock { margin-top: 14px; }
.notify-restock-text { font-size: 13px; color: var(--color-text-muted); margin-bottom: 10px; }
#notifyRestockForm { display: flex; gap: 10px; }
#notifyRestockForm input {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--color-text);
  font-size: 14px;
}
#notifyRestockForm input::placeholder { color: var(--color-text-soft); }
#notifyRestockForm input:focus { outline: none; border-color: var(--color-primary); }
.notify-restock-feedback { font-size: 13px; margin-top: 8px; }
@media (max-width: 480px) {
  #notifyRestockForm { flex-direction: column; }
}

/* ===========================================================
   15. HEADER SEARCH
   =========================================================== */
.nav-search { position: relative; }
.search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; color: inherit;
}
.search-panel {
  position: absolute; top: calc(100% + 14px); right: 0;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 12px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear var(--transition-base);
}
.search-panel.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s;
}
.search-input {
  width: 100%;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--color-text);
  font-size: 14px;
}
.search-input:focus { outline: none; border-color: var(--color-primary); }
.search-results { max-height: 360px; overflow-y: auto; margin-top: 8px; }
.search-result-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--radius-sm);
}
.search-result-item:hover { background: var(--color-surface-alt); }
.search-result-img { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-alt); }
.search-result-img img { width: 100%; height: 100%; object-fit: cover; }
.search-result-name { font-size: 13px; color: var(--color-text); }
.search-result-price { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.search-empty { font-size: 13px; color: var(--color-text-muted); padding: 10px 4px; }
@media (max-width: 600px) {
  .search-panel { right: -60px; }
}

/* ===========================================================
   16. WISHLIST HEART
   =========================================================== */
.wishlist-heart {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18, 20, 27, 0.7);
  border: none; border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.wishlist-heart svg { width: 17px; height: 17px; }
.wishlist-heart:hover { transform: scale(1.1); }
.wishlist-heart.active { color: #E0526B; }
.wishlist-heart.active svg { fill: #E0526B; }

.product-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wishlist-heart-detail {
  position: static;
  background: none;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  width: 40px; height: 40px;
  flex-shrink: 0;
}
.wishlist-heart-detail svg { width: 19px; height: 19px; }
.wishlist-heart-detail:hover { border-color: var(--color-primary); color: var(--color-primary); }
.wishlist-heart-detail.active { border-color: #E0526B; color: #E0526B; }
.wishlist-heart-detail.active svg { fill: #E0526B; }