/* ================================================================
   WATCHAMIGO — Main Stylesheet
   Phase 1 · Static Frontend
   ================================================================

   TABLE OF CONTENTS
   1.  Google Fonts  (DEV — self-host before launch)
   2.  CSS Custom Properties  (Design Tokens)
   3.  CSS Reset
   4.  Layout Helper — .container
   5.  Base Typography
   6.  ── HEADER / TOP BAR ──────────────────────────────────────────
       5a. Site Header
       5b. Logo
       5c. Desktop Navigation
       5d. Header Action Icons
       5e. Hamburger (mobile)
   7.  ── SEARCH OVERLAY ────────────────────────────────────────────
   8.  ── MOBILE MENU ────────────────────────────────────────────────
   9.  ── HERO CAROUSEL ─────────────────────────────────────────────
       9a. Section wrapper
       9b. Slides track
       9c. Slide layout
       9d. Slide text
       9e. CTA Buttons
       9f. Slide visual / image area
       9g. Decorative elements
       9h. Carousel controls
  10.  ── WHATSAPP FAB ─────────────────────────────────────────────
  11.  Responsive — Tablet  640 px+
  12.  Responsive — Desktop 1024 px+
  13.  Responsive — Wide    1280 px+
  14.  Focus / Accessibility
  15.  Scroll-locked body
   ================================================================ */

/* ----------------------------------------------------------------
   1. Google Fonts  (DEV ONLY — replace with @font-face + self-hosted
      files before deploying to production)
   ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ----------------------------------------------------------------
   2. CSS Custom Properties  (Design Tokens)
      Extracted from home-hero-reference.png mockup and adapted for
      Watchamigo premium / luxury brand tone.
   ---------------------------------------------------------------- */
:root {
  /* ── Core Palette ─────────────────────────────────────────────── */
  --color-white:          #FFFFFF;
  --color-bg:             #FFFFFF;
  --color-surface:        #FAFAF8;

  /* Hero slide backgrounds — neutral fallback while image loads */
  --color-hero-1:         #F0EEEC;
  --color-hero-2:         #ECEEF0;
  --color-hero-3:         #ECEAEE;

  /* Text */
  --color-text:           #111111;
  --color-text-secondary: #3D3830;
  --color-text-muted:     #7A756E;
  --color-text-light:     #A09890;

  /* Brand red — from WatchAmigo logo */
  --color-brand:          #E31E24;
  --color-brand-dark:     #C01820;
  --color-brand-light:    #FFBFBF;
  --color-brand-bg:       #FFF5F5;
  --color-brand-border:   #FFCCCC;

  /* Borders & surfaces */
  --color-border:         #E5DDD5;
  --color-border-light:   #EEE8E2;

  /* Semantic */
  --color-whatsapp:       #25D366;
  --color-success:        #2E7D52;
  --color-error:          #C0392B;

  /* ── Typography ───────────────────────────────────────────────── */
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Helvetica Neue", Arial, sans-serif;

  /* Font sizes — minor-third scale (×1.2) from 16px base */
  --text-xs:    0.694rem;  /* ~11px */
  --text-sm:    0.833rem;  /* ~13px */
  --text-base:  1rem;      /*  16px */
  --text-md:    1.125rem;  /*  18px */
  --text-lg:    1.2rem;    /* ~19px */
  --text-xl:    1.44rem;   /* ~23px */
  --text-2xl:   1.728rem;  /* ~28px */
  --text-3xl:   2.074rem;  /* ~33px */
  --text-4xl:   2.488rem;  /* ~40px */
  --text-5xl:   2.986rem;  /* ~48px */
  --text-6xl:   3.583rem;  /* ~57px */
  --text-7xl:   4.3rem;    /* ~69px */

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing — 4-point scale ─────────────────────────────────── */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */

  /* ── Border Radius ───────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.10);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.14);

  /* ── Transitions ─────────────────────────────────────────────── */
  --ease-fast:   150ms ease;
  --ease-base:   250ms ease;
  --ease-slow:   400ms ease;
  --ease-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ──────────────────────────────────────────────────── */
  --max-width:     1280px;
  --header-height: 72px;
  --page-px:       1.25rem;   /* horizontal padding on mobile */
}

/* ----------------------------------------------------------------
   3. CSS Reset
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button, input, select, textarea {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.1;
  font-weight: var(--weight-bold);
}

/* ----------------------------------------------------------------
   4. Layout Helper — .container
   ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-px);
}

/* ----------------------------------------------------------------
   5. Base Typography
   ---------------------------------------------------------------- */
p { line-height: 1.7; }

/* ================================================================
   6. HEADER / TOP BAR
   ================================================================ */

/* 6a. Site Header ──────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  transition: box-shadow var(--ease-base);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  height: var(--header-height);
  gap: var(--sp-6);
}

/* 6b. Logo ─────────────────────────────────────────────────────── */
.site-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.logo-img {
  height: 46px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Shown if logo image fails to load */
.logo-fallback {
  display: none;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  color: var(--color-text);
  line-height: 1;
}

.logo-fallback em {
  font-style: italic;
  color: var(--color-brand-dark);
}

/* 6c. Desktop Navigation ───────────────────────────────────────── */
.main-nav {
  display: none;       /* visible at 1024 px+ via media query */
  flex: 1;
  justify-content: center;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* Nav link */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.015em;
  border-radius: var(--r-sm);
  transition: color var(--ease-fast);
  white-space: nowrap;
}

/* Brand-red underline bar */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  inset-inline-start: var(--sp-3);
  inset-inline-end: var(--sp-3);
  height: 1.5px;
  background-color: var(--color-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--ease-base);
  border-radius: var(--r-full);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--color-text);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

/* Chevron icon */
.nav-chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform var(--ease-base);
  margin-top: 1px;
}

/* Dropdown */
.has-dropdown {
  position: relative;
}

.has-dropdown:hover .nav-chevron,
.has-dropdown:focus-within .nav-chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  inset-inline-start: 0;
  min-width: 210px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--ease-base),
    transform var(--ease-base),
    visibility var(--ease-base);
  z-index: 20;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: background-color var(--ease-fast), color var(--ease-fast);
}

.dropdown-menu a:hover {
  background-color: var(--color-brand-bg);
  color: var(--color-brand-dark);
}

.dropdown-menu .dd-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
  padding: var(--sp-4) var(--sp-5) var(--sp-1);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--color-border-light);
  margin: var(--sp-2) 0;
}

/* 6d. Header Action Icons ──────────────────────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: background-color var(--ease-fast), color var(--ease-fast);
}

.icon-btn:hover {
  background-color: var(--color-border-light);
  color: var(--color-text);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  pointer-events: none;
}

/* ── Profile dropdown ─────────────────────────────────────────── */
.profile-wrap {
  position: relative;
}

/* Small avatar circle shown when logged in */
.profile-avatar-sm {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
}

/* Dropdown panel */
.profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  background: var(--color-white);
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  z-index: 500;
  overflow: hidden;
  animation: ddFadeIn 150ms ease;
}
.profile-dropdown.is-open { display: block; }

/* Guest state */
.profile-guest {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.profile-login-btn + .profile-signup-btn {
  margin-top: var(--sp-2);
}
.profile-guest-title { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.profile-guest-sub   { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; margin-bottom: var(--sp-1); }

.profile-login-btn {
  display: block; text-align: center;
  padding: 10px;
  background: var(--color-text); color: var(--color-white);
  border-radius: var(--r-full);
  font-size: 13.5px; font-weight: 700;
  text-decoration: none;
  transition: background 160ms ease;
}
.profile-login-btn:hover { background: #374151; }

.profile-signup-btn {
  display: block; text-align: center;
  padding: 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--r-full);
  font-size: 13.5px; font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.profile-signup-btn:hover { border-color: var(--color-text); background: #F9FAFB; }

/* Logged-in state */
.profile-user-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.profile-avatar-lg {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.profile-user-name { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.profile-user-city { font-size: 12px; color: #16A34A; font-weight: 500; }

.profile-divider { border: none; border-top: 1px solid #F3F4F6; margin: 0; }

/* Nav items */
.profile-nav { padding: var(--sp-2) 0; }
.profile-nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-5);
  font-size: 13.5px; font-weight: 500; color: var(--color-text);
  text-decoration: none;
  background: none; border: none; width: 100%; text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
  font-family: inherit;
}
.profile-nav-item:hover { background: #F9FAFB; }
.profile-nav-item svg   { color: var(--color-text-muted); flex-shrink: 0; }

.profile-logout { color: #DC2626; }
.profile-logout svg { color: #DC2626; }

/* Cart badge */
.cart-badge {
  position: absolute;
  top: 5px;
  inset-inline-end: 4px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  background-color: var(--color-brand);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--weight-bold);
  font-family: var(--font-body);
  line-height: 1;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 6e. Hamburger (mobile) ───────────────────────────────────────── */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  transition: background-color var(--ease-fast);
}

.hamburger:hover {
  background-color: var(--color-border-light);
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-secondary);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform var(--ease-base),
    opacity   var(--ease-base),
    width     var(--ease-base);
}

/* X shape when open */
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ================================================================
   7. SEARCH OVERLAY
   ================================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(17,17,17,0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  padding-top: calc(var(--header-height) + var(--sp-8));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--ease-base),
    visibility var(--ease-base);
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.search-bar-wrap {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--page-px);
}

.search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);
  box-shadow: var(--shadow-xl);
}

.search-input {
  flex: 1;
  font-size: var(--text-md);
  color: var(--color-text);
  padding: var(--sp-3) 0;
  background: none;
  min-width: 0;
}

.search-input::placeholder {
  color: var(--color-text-light);
}

.search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  transition: background-color var(--ease-fast);
}

.search-submit-btn {
  background-color: var(--color-text);
  color: var(--color-white);
}
.search-submit-btn:hover { background-color: var(--color-brand-dark); }

.search-close-btn {
  color: var(--color-text-muted);
}
.search-close-btn:hover {
  background-color: var(--color-border-light);
  color: var(--color-text);
}

.search-btn svg { width: 17px; height: 17px; }

/* ================================================================
   8. MOBILE MENU
   ================================================================ */

/* Backdrop — dims the page behind the open menu */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;          /* below header (100) but above page content */
  background: rgba(0, 0, 0, 0.40);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity     var(--ease-base),
    visibility  var(--ease-base);
}

.menu-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: absolute;   /* float over page — does NOT push content down */
  top: 100%;            /* directly below the header bar */
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border-light);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;    /* smooth iOS momentum scroll */

  /* Slide-down + fade animation */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity    320ms ease,
    transform  320ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 320ms ease;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav {
  padding: var(--sp-2) 0 var(--sp-6);
}

.mobile-nav-list {
  padding-inline: var(--page-px);
}

.mobile-nav-item {
  border-bottom: 1px solid var(--color-border-light);
}

.mobile-nav-item:last-child {
  border-bottom: none;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  width: 100%;
  text-align: start;
}

.mobile-nav-link:hover,
.mobile-nav-link.is-active {
  color: var(--color-brand-dark);
}

.mobile-nav-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--ease-base);
}

.mobile-nav-link[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mobile-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--ease-slow);
}

.mobile-submenu.is-open {
  max-height: 400px;
}

.mobile-submenu a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-radius: var(--r-sm);
  margin-inline: calc(var(--sp-4) * -1);
  padding-inline: var(--sp-4);
  transition: background-color var(--ease-fast), color var(--ease-fast);
}

.mobile-submenu a:hover {
  background-color: var(--color-brand-bg);
  color: var(--color-brand-dark);
}

/* WhatsApp in mobile menu */
.mobile-menu-footer {
  padding: var(--sp-5) var(--page-px) var(--sp-4);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--sp-2);
}

.mobile-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4) var(--sp-6);
  background-color: var(--color-whatsapp);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--r-full);
  transition: background-color var(--ease-fast), box-shadow var(--ease-fast);
}

.mobile-wa-btn:hover {
  background-color: #1EB858;
  box-shadow: var(--shadow-md);
}

.mobile-wa-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ================================================================
   9. HERO CAROUSEL
   ================================================================ */

/* 9a. Section wrapper ──────────────────────────────────────────── */
.hero-section {
  padding: var(--sp-4) var(--page-px) var(--sp-10);
}

/* 9b. Carousel — outer wrapper + track ─────────────────────────── */
.hero-carousel {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  padding-inline: 0;              /* override .container padding — slides must fill edge to edge */
  max-width: calc(var(--max-width) - var(--page-px) * 2);
  margin-inline: auto;
}

.slides-track {
  display: flex;
  will-change: transform;
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 9c. Individual slide — full-width image background ─────────── */
.hero-slide {
  min-width: 100%;
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 360px;       /* mobile */
}

/* Slide color fallbacks (shown when no image is available) */
.hero-slide--1 { background-color: var(--color-hero-1); }
.hero-slide--2 { background-color: var(--color-hero-2); }
.hero-slide--3 { background-color: var(--color-hero-3); }

/* Background image — fills entire slide */
.slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Gradient overlay for text readability over image */
.slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.58) 45%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

/* When no image is loaded, hide the overlay so cream bg + dark text shows */
.slide-bg:not(:has(img[src])) ~ .slide-overlay,
.no-image .slide-overlay {
  opacity: 0;
}

/* 9d. Slide text block (overlaid on image, vertically centered) ── */
.slide-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--sp-10) var(--sp-6);
}

.slide-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 560px;
}

.slide-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--r-full);
  padding: 5px 14px;
}

.slide-eyebrow::before {
  display: none;
}

/* Dark-background fallback (no image): brand color eyebrow */
.hero-slide--no-img .slide-eyebrow {
  color: var(--color-brand-dark);
}

.slide-heading {
  font-family: var(--font-body);
  font-size: var(--text-4xl);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Line 1 — white */
.slide-heading-line1 {
  display: block;
  color: var(--color-white);
}

/* Line 2 — brand red accent */
.slide-heading-line2 {
  display: block;
  color: var(--color-brand);
}

.slide-desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.65;
  max-width: 380px;
}

/* 9e. CTA Buttons ──────────────────────────────────────────────── */
.slide-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px var(--sp-6);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.015em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--ease-fast),
    color            var(--ease-fast),
    box-shadow       var(--ease-fast),
    transform        var(--ease-fast);
  text-decoration: none;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform var(--ease-fast);
}

.btn:hover svg { transform: translateX(3px); }

/* White (primary on image) */
.btn-white {
  background-color: var(--color-white);
  color: var(--color-text);
}

.btn-white:hover {
  background-color: var(--color-brand-bg);
  color: var(--color-brand-dark);
  box-shadow: var(--shadow-md);
}

/* Dark (usable off-image) */
.btn-dark {
  background-color: var(--color-text);
  color: var(--color-white);
}

.btn-dark:hover {
  background-color: #2A2A2A;
  box-shadow: var(--shadow-md);
}

/* Ghost white (secondary on image) */
.btn-outline {
  background-color: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.80);
}

/* Brand red (primary on image) */
.btn-brand {
  background-color: var(--color-brand);
  color: var(--color-white);
}

.btn-brand:hover {
  background-color: var(--color-brand-dark);
  box-shadow: var(--shadow-md);
}

/* 9f–9g. Removed: .slide-visual, .slide-img-wrap, .deco-* ────────
   Image is now the full-width background. Decorative elements
   are no longer needed for the banner.
   ────────────────────────────────────────────────────────────── */

.placeholder-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 9g. Decorative elements ─────────────────────────────────────── */

/* Large ring — evokes a watch case / bezel */
.deco-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(227,30,36,0.15);
  pointer-events: none;
  z-index: 1;
}

.deco-ring--lg {
  width: 420px;
  height: 420px;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
}

.deco-ring--sm {
  width: 220px;
  height: 220px;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
}

/* Filled accent circles */
.deco-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.deco-circle--1 {
  width: 140px;
  height: 140px;
  background-color: rgba(227,30,36,0.05);
  bottom: -50px;
  right: 8%;
}

.deco-circle--2 {
  width: 60px;
  height: 60px;
  background-color: rgba(227,30,36,0.07);
  top: 24px;
  right: 15%;
}

/* Small brand-red dots */
.deco-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.deco-dot--a {
  width: 10px;
  height: 10px;
  background-color: var(--color-brand);
  opacity: 0.6;
  bottom: 48px;
  left: 10%;
}

.deco-dot--b {
  width: 7px;
  height: 7px;
  background-color: var(--color-brand-light);
  top: 36px;
  right: 28%;
}

/* 9h. Carousel controls ────────────────────────────────────────── */

/* Arrows — float on the sides of the carousel */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-full);
  color: var(--color-white);
  flex-shrink: 0;
  transition:
    border-color     var(--ease-fast),
    background-color var(--ease-fast);
}

#carousel-prev { left:  var(--sp-4); }
#carousel-next { right: var(--sp-4); }

.carousel-arrow:hover {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}

.carousel-arrow svg { width: 16px; height: 16px; }

/* Dots strip — centered below the carousel */
.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
}

.carousel-dot {
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background-color: var(--color-border);
  transition:
    width            var(--ease-base),
    background-color var(--ease-base);
}

.carousel-dot.is-active {
  width: 24px;
  background-color: var(--color-brand);
}

/* ================================================================
   10. DISCOVER / CATEGORIES SECTION
   ================================================================ */
.discover-section {
  padding-block: var(--sp-12) var(--sp-16);
}

/* Section header row */
.discover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.discover-title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.3;
}

.discover-title-sub {
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

/* Arrows — hidden on desktop, shown only on small screens */
.discover-nav {
  display: none;          /* hidden by default (desktop) */
  gap: var(--sp-2);
  flex-shrink: 0;
}

.discover-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-full);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition:
    border-color     var(--ease-fast),
    background-color var(--ease-fast),
    color            var(--ease-fast);
}

.discover-arrow:hover {
  border-color: var(--color-brand);
  background-color: var(--color-brand-bg);
  color: var(--color-brand-dark);
}

.discover-arrow svg { width: 15px; height: 15px; }

/* Cards track — 3-column grid on desktop */
.discover-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

/* Individual card */
.discover-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-2) var(--sp-6) var(--sp-6);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
  min-height: 180px;
}

.discover-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Card colour themes */
.discover-card--1 { background-color: #F7F3EE; } /* warm cream */
.discover-card--2 { background-color: #EDF4EE; } /* soft mint  */
.discover-card--3 { background-color: #EEF2F8; } /* soft blue  */

/* Left: text block */
.discover-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 1;
}

.discover-card-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.discover-card-heading {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--color-text);
}

.discover-card-cta {
  display: inline-flex;
  align-items: center;
  margin-top: var(--sp-2);
  padding: 7px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  background: rgba(255,255,255,0.70);
  transition: border-color var(--ease-fast), color var(--ease-fast);
  width: fit-content;
}

.discover-card:hover .discover-card-cta {
  border-color: var(--color-brand);
  color: var(--color-brand-dark);
}

/* Right: product image */
.discover-card-visual {
  width: 130px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.discover-card-visual img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--r-lg);
  transition: transform var(--ease-base);
}

.discover-card:hover .discover-card-visual img {
  transform: scale(1.05);
}

/* ── Responsive ──────────────────────────────────────────── */

/* Tablet (640 – 1023 px): 2 cards visible, third peeks */
@media (max-width: 1023px) {
  .discover-nav   { display: flex; }   /* show arrows */

  .discover-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* switch to horizontal scroll */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--sp-4);
    padding-bottom: var(--sp-1);
  }

  .discover-track::-webkit-scrollbar { display: none; }

  .discover-card {
    flex: 0 0 calc(50% - var(--sp-2)); /* 2 cards visible */
    scroll-snap-align: start;
  }
}

/* Mobile (< 640 px): 1 card + peek of next */
@media (max-width: 639px) {
  .discover-title      { font-size: var(--text-lg); }

  .discover-card {
    flex: 0 0 calc(85vw - var(--page-px));  /* ~85% viewport — next card peeks */
  }

  .discover-card-heading { font-size: var(--text-base); }

  .discover-card-visual       { width: 100px; }
  .discover-card-visual img   { width: 100px; height: 100px; }
}

/* ================================================================
   11. WHATSAPP FLOATING ACTION BUTTON
   ================================================================ */
.whatsapp-fab {
  position: fixed;
  inset-block-end: var(--sp-6);
  inset-inline-end: var(--sp-6);
  width: 54px;
  height: 54px;
  background-color: var(--color-whatsapp);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.35), var(--shadow-md);
  z-index: 90;
  transition:
    transform    var(--ease-fast),
    box-shadow   var(--ease-fast);
}

.whatsapp-fab:hover {
  transform: scale(1.09);
  box-shadow: 0 8px 32px rgba(37,211,102,0.40), var(--shadow-lg);
}

.whatsapp-fab svg { width: 27px; height: 27px; }

/* Tooltip */
.whatsapp-fab::before {
  content: 'Chat with us';
  position: absolute;
  inset-inline-end: calc(100% + var(--sp-3));
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-text);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-base);
}

.whatsapp-fab:hover::before { opacity: 1; }

/* ================================================================
   11. NEW ARRIVALS SECTION
   ================================================================ */

.new-arrivals {
  padding-block: var(--sp-12) var(--sp-16);
  background-color: var(--color-bg-alt);
}

/* ── Section header ─────────────────────────────────────── */
.arrivals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.arrivals-title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.3;
}

.arrivals-title-sub {
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

/* ── Arrows (always visible) ─────────────────────────────── */
.arrivals-nav {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.arrivals-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-full);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition:
    border-color     var(--ease-fast),
    background-color var(--ease-fast),
    color            var(--ease-fast);
}

.arrivals-arrow:hover {
  border-color: var(--color-brand);
  background-color: var(--color-brand-bg);
  color: var(--color-brand-dark);
}

.arrivals-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.arrivals-arrow svg { width: 15px; height: 15px; }

/* ── Cards track ────────────────────────────────────────── */
.arrivals-track {
  position: relative;
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--sp-1);
}

.arrivals-track::-webkit-scrollbar { display: none; }

/* ── Product card ───────────────────────────────────────── */
.pcard {
  flex: 0 0 calc(25% - var(--sp-3));   /* 4 visible on desktop */
  scroll-snap-align: start;
  background-color: var(--color-white);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: box-shadow var(--ease-fast), transform var(--ease-fast);
}

.pcard:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ── Image area ─────────────────────────────────────────── */
.pcard-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: #F4F4F4;
  overflow: hidden;
}

.pcard-img-link {
  display: block;
  width: 100%;
  height: 100%;
}

.pcard-img-link img,
.pcard-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--ease-base);
}

.pcard:hover .pcard-img-link img { transform: scale(1.04); }

/* ── Hover action buttons ───────────────────────────────── */
.pcard-hover-actions {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: flex;
  gap: var(--sp-2);
  opacity: 0;
  transition:
    opacity  220ms ease,
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

.pcard:hover .pcard-hover-actions {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.pcard-add-btn,
.pcard-qv-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--ease-fast), transform var(--ease-fast);
}

.pcard-add-btn {
  background-color: #111;
  color: #fff;
}

.pcard-add-btn:hover { background-color: #333; transform: scale(1.03); }

.pcard-qv-btn {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--color-text);
  border: 1px solid rgba(0,0,0,0.08);
}

.pcard-qv-btn:hover { background-color: #fff; transform: scale(1.03); }

.pcard-add-btn svg,
.pcard-qv-btn  svg { width: 11px; height: 11px; flex-shrink: 0; }

/* "New in" badge */
.pcard-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  background-color: rgba(255,255,255,0.88);
  backdrop-filter: blur(4px);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  pointer-events: none;
  z-index: 1;
}

.pcard-badge svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Wishlist button */
.pcard-wishlist {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,0.88);
  backdrop-filter: blur(4px);
  border-radius: var(--r-full);
  color: var(--color-text-muted);
  z-index: 1;
  transition: color var(--ease-fast), background-color var(--ease-fast);
}

.pcard-wishlist:hover { color: var(--color-brand); }

.pcard-wishlist--active { color: var(--color-brand); }
.pcard-wishlist--active:hover { color: var(--color-brand-dark); }

.pcard-wishlist svg { width: 15px; height: 15px; }

/* ── Info area ──────────────────────────────────────────── */
.pcard-info {
  display: block;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  text-decoration: none;
  color: inherit;
}

/* Swatches */
.pcard-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-2);
}

.pcard-swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--r-full);
  background-color: var(--sw, #ccc);
  border: 1.5px solid rgba(0,0,0,0.12);
  cursor: default;
  transition: transform var(--ease-fast);
}

.pcard-swatch:hover { transform: scale(1.25); }

/* Name & brand */
.pcard-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: 1.35;
  margin-bottom: 2px;
}

.pcard-brand {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-3);
}

/* Footer row: price + rating */
.pcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.pcard-price {
  display: inline-block;
  padding: 4px 10px;
  background-color: #E8F5E9;
  color: #1B5E20;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  border-radius: var(--r-full);
  white-space: nowrap;
}

.pcard-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.pcard-rating svg {
  width: 12px; height: 12px;
  color: #F59E0B;
  flex-shrink: 0;
}

.pcard-reviews { font-weight: var(--weight-normal); color: var(--color-text-muted); }

/* ── Responsive ──────────────────────────────────────────── */

/* Tablet: 2 cards + peek of 3rd */
@media (max-width: 1023px) {
  .pcard { flex: 0 0 calc(50% - var(--sp-2)); }
}

/* Mobile: 1 card + peek of 2nd */
@media (max-width: 639px) {
  .arrivals-title { font-size: var(--text-lg); }
  .pcard          { flex: 0 0 calc(85vw - var(--page-px)); }
  .pcard-name     { font-size: var(--text-xs); }
}


.best-sellers {
  padding-block: var(--sp-12) var(--sp-16);
  background-color: var(--color-white);
}

/* ================================================================
   Shop by Department
   ================================================================ */
.shop-dept {
  padding-block: var(--sp-12) var(--sp-16);
  background: var(--color-white);
}

/* Header row */
.dept-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.dept-title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.2;
}

.dept-title-muted {
  font-weight: var(--weight-regular);
  color: #9CA3AF;
}

/* Arrow buttons */
.dept-arrows {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.dept-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid #E5E7EB;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}

.dept-arrow:hover {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-white);
}

/* Cards track — 4-col grid on desktop, scrollable on smaller screens */
.dept-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 1023px) {
  .dept-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--sp-3);
    padding-bottom: var(--sp-1);
  }
  .dept-track::-webkit-scrollbar { display: none; }
}

/* Individual card */
.dept-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .dept-card { width: calc(50% - var(--sp-3)); }
}
@media (max-width: 639px) {
  .dept-card { width: calc(72vw - var(--page-px)); }
}

/* Card image box */
.dept-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F4F5F7;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
  transition: background 200ms ease;
}

.dept-card:hover .dept-card-img {
  background: #ECEEF2;
}

.dept-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  mix-blend-mode: multiply;
  transition: transform 300ms ease;
}

.dept-card:hover .dept-card-img img {
  transform: scale(1.04);
}

/* Card text */
.dept-card-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--sp-1);
}

.dept-card-count {
  font-size: var(--text-sm);
  color: #9CA3AF;
  text-align: center;
}

/* ================================================================
   15. START EXPLORING — category grid
   ================================================================ */

.explore-section {
  padding-block: var(--sp-16) var(--sp-20);
  background: #F4F6F9;
}

.explore-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--sp-6);
  letter-spacing: -0.02em;
}

/* ── Filter tabs ────────────────────────────────────────── */
.explore-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

.explore-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1.5px solid transparent;
  transition: color var(--ease-fast), background-color var(--ease-fast), border-color var(--ease-fast);
}

.explore-tab svg { width: 14px; height: 14px; flex-shrink: 0; }

.explore-tab:hover {
  color: var(--color-text);
  border-color: var(--color-border);
  background-color: var(--color-white);
}

.explore-tab.is-active {
  background-color: var(--color-text);
  color: var(--color-white);
  border-color: var(--color-text);
}

/* ── Cards grid ─────────────────────────────────────────── */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

/* ── Individual card ────────────────────────────────────── */
.ecat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--color-white);
  border-radius: var(--r-2xl);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  min-height: 180px;
  transition: box-shadow var(--ease-fast), transform var(--ease-fast);
}

.ecat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Hidden state for tab filtering */
.ecat-card.is-hidden {
  display: none;
}

/* Top row: icon + arrow */
.ecat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

/* Watch icon container */
.ecat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ecat-icon svg { width: 28px; height: 40px; }

.ecat-icon--blue   { background: #EFF6FF; }
.ecat-icon--rose   { background: #FFF1F2; }
.ecat-icon--teal   { background: #F0FDFA; }
.ecat-icon--amber  { background: #FFFBEB; }
.ecat-icon--purple { background: #F5F3FF; }
.ecat-icon--pink   { background: #FDF2F8; }

/* Arrow icon */
.ecat-arrow {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  border: 1.5px solid var(--color-border-light);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: border-color var(--ease-fast), color var(--ease-fast);
}

.ecat-card:hover .ecat-arrow {
  border-color: var(--color-text);
  color: var(--color-text);
}

.ecat-arrow svg { width: 12px; height: 12px; }

/* Text */
.ecat-label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ecat-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.2;
  margin-top: var(--sp-1);
}

.ecat-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: var(--sp-3);
}

/* Decorative pattern — positioned bottom-right */
.ecat-deco {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 110px;
  height: 90px;
  pointer-events: none;
  overflow: hidden;
}

.ecat-deco svg {
  width: 100%;
  height: 100%;
}

/* ── Footer link ────────────────────────────────────────── */
.explore-footer {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-8);
}

.explore-all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-brand);
  text-decoration: none;
  transition: gap var(--ease-fast);
}

.explore-all-link:hover { gap: var(--sp-3); }
.explore-all-link svg { width: 16px; height: 16px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1023px) {
  .explore-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .explore-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .ecat-title    { font-size: var(--text-base); }
  .ecat-deco     { width: 80px; height: 70px; }
  .explore-tabs  { gap: var(--sp-1); }
  .explore-tab   { padding: 6px 12px; font-size: var(--text-xs); }
}


/* ================================================================
   14. FREE DELIVERY PROMO BANNER
   ================================================================ */

.promo-banner {
  background: var(--color-white);
  border-top:    1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  overflow: hidden;
}

.promo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 420px;
  gap: var(--sp-8);
  padding-block: var(--sp-12);
}

/* ── Left: text ──────────────────────────────────────────── */
.promo-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.promo-brand {
  display: flex;
  align-items: center;
}

.promo-logo { height: 28px; width: auto; }

.promo-logo-text {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.promo-logo-text em {
  font-style: normal;
  color: var(--color-brand);
}

.promo-heading {
  font-family: var(--font-body);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.promo-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 380px;
}

.promo-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.promo-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background-color: var(--color-text);
  color: var(--color-white);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background-color var(--ease-fast), transform var(--ease-fast);
}

.promo-btn-primary:hover {
  background-color: #333;
  transform: translateY(-1px);
}

.promo-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  border: 1.5px solid var(--color-border);
  transition: border-color var(--ease-fast), color var(--ease-fast);
}

.promo-btn-ghost:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

/* ── Right: illustration ─────────────────────────────────── */
.promo-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  /* Subtle float animation */
  animation: promoFloat 5s ease-in-out infinite;
}

@keyframes promoFloat {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-10px); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1023px) {
  .promo-inner { grid-template-columns: 1fr; min-height: auto; }
  .promo-visual { order: -1; }
  .promo-img { max-width: 360px; }
  .promo-img { animation: none; }
}

@media (max-width: 639px) {
  .promo-heading { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .promo-img { max-width: 280px; }
}


/* ================================================================
   13. HOW IT WORKS
   ================================================================ */

.how-it-works {
  padding-block: var(--sp-16) var(--sp-20);
  background: var(--color-white);
}

/* 4-column grid with dashed connector line */
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  position: relative;
}

/* Dashed line between steps */
.hiw-grid::before {
  content: '';
  position: absolute;
  top: 80px; /* vertically centred in the image area */
  left: calc(12.5% + 40px);  /* starts after first image centre */
  right: calc(12.5% + 40px); /* ends before last image centre */
  border-top: 2px dashed #D1D5DB;
  z-index: 0;
  pointer-events: none;
}

/* Individual step */
.hiw-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  position: relative;
  z-index: 1;
}

/* Illustration */
.hiw-img-wrap {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hiw-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Step badges */
.hiw-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

.hiw-badge--1 { background: #FEE2E2; color: #B91C1C; }
.hiw-badge--2 { background: #DBEAFE; color: #1D4ED8; }
.hiw-badge--3 { background: #FEF3C7; color: #92400E; }
.hiw-badge--4 { background: #EDE9FE; color: #6D28D9; }

/* Title & description */
.hiw-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.3;
}

.hiw-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 200px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hiw-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10) var(--sp-6); }
  .hiw-grid::before { display: none; }
}

@media (max-width: 639px) {
  .hiw-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-4); }
  .hiw-img-wrap { width: 120px; height: 120px; }
  .hiw-desc { font-size: var(--text-xs); }
}


/* ================================================================
   12. QUICK VIEW DRAWER
   ================================================================ */

/* Overlay */
.qv-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.50);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.qv-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Drawer panel */
.qv-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  width: min(680px, 100vw);
  background: var(--color-white);
  box-shadow: -8px 0 48px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.qv-drawer.is-open { transform: translateX(0); }

/* Close button */
.qv-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 10;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-white);
  flex-shrink: 0;
  transition: border-color var(--ease-fast), color var(--ease-fast);
}

.qv-close:hover { border-color: var(--color-brand); color: var(--color-brand); }
.qv-close svg { width: 16px; height: 16px; }

/* Inner scroll container */
.qv-inner {
  display: grid;
  grid-template-columns: 44% 56%;
  height: 100%;
  overflow: hidden;
}

/* ── Gallery ────────────────────────────────────────────── */
.qv-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: #F7F7F7;
  overflow-y: auto;
}

.qv-gallery-main {
  flex: 1;
  aspect-ratio: 1 / 1;
  background: #EFEFEF;
  border-radius: var(--r-xl);
  overflow: hidden;
}

.qv-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.qv-gallery-thumbs {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.qv-thumb {
  flex: 1;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--ease-fast);
}

.qv-thumb img { width: 100%; height: 100%; object-fit: cover; }

.qv-thumb.is-active { border-color: var(--color-brand); }

/* ── Details ────────────────────────────────────────────── */
.qv-details {
  padding: var(--sp-8) var(--sp-6) var(--sp-8) var(--sp-5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.qv-name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: var(--sp-3);
  padding-right: var(--sp-10); /* don't overlap close btn */
}

/* Meta row */
.qv-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.qv-price {
  display: inline-block;
  padding: 5px 12px;
  background-color: #E8F5E9;
  color: #1B5E20;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--r-full);
}

.qv-rating-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.qv-star { width: 13px; height: 13px; color: #F59E0B; }

.qv-dot { color: var(--color-border); }

.qv-stock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #2E7D32;
  font-weight: var(--weight-medium);
}

.qv-stock svg { width: 12px; height: 12px; stroke: #2E7D32; }

/* Divider */
.qv-divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin-block: var(--sp-4);
}

/* Option groups */
.qv-option-group { margin-bottom: var(--sp-4); }

.qv-option-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
}

/* Swatches inside drawer */
.qv-swatches { display: flex; gap: 10px; flex-wrap: wrap; }

.qv-swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-color: var(--sw, #ccc);
  cursor: pointer;
  outline-offset: 3px;
  transition: transform var(--ease-fast), border-color var(--ease-fast);
}

.qv-swatch:hover  { transform: scale(1.15); }
.qv-swatch.is-active { border-color: var(--color-text); }

/* Strap pills */
.qv-straps { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.qv-strap-btn {
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: border-color var(--ease-fast), color var(--ease-fast), background-color var(--ease-fast);
}

.qv-strap-btn:hover { border-color: var(--color-text); color: var(--color-text); }

.qv-strap-btn.is-active {
  border-color: var(--color-text);
  background-color: var(--color-text);
  color: var(--color-white);
}

/* Qty + Add to cart */
.qv-purchase {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.qv-qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-full);
  overflow: hidden;
  flex-shrink: 0;
}

.qv-qty-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: background-color var(--ease-fast);
}

.qv-qty-btn:hover { background-color: var(--color-bg-alt); }
.qv-qty-btn svg { width: 14px; height: 14px; }

.qv-qty-val {
  min-width: 32px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  border-left: 1.5px solid var(--color-border-light);
  border-right: 1.5px solid var(--color-border-light);
}

.qv-add-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px var(--sp-5);
  background-color: #111;
  color: var(--color-white);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: background-color var(--ease-fast);
}

.qv-add-btn:hover { background-color: #333; }
.qv-add-btn svg { width: 15px; height: 15px; }

/* Accordion */
.qv-acc-item { border-top: 1px solid var(--color-border-light); }
.qv-acc-item:last-child { border-bottom: 1px solid var(--color-border-light); }

.qv-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-align: left;
}

.qv-acc-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform var(--ease-fast);
}

.qv-acc-body {
  overflow: hidden;
  max-height: 300px;
  transition: max-height 300ms ease, padding 300ms ease;
  padding-bottom: var(--sp-3);
}

.qv-acc-body--closed { max-height: 0; padding-bottom: 0; }

.qv-acc-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* Full page link */
.qv-full-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color var(--ease-fast);
}

.qv-full-link:hover { color: var(--color-brand); }
.qv-full-link svg { width: 13px; height: 13px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 639px) {
  .qv-drawer { width: 100vw; }

  .qv-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }

  .qv-gallery {
    padding: var(--sp-4);
    overflow-y: visible;
  }

  .qv-gallery-main { aspect-ratio: 4 / 3; flex: none; }

  .qv-details {
    overflow-y: visible;
    padding: var(--sp-5) var(--sp-4) var(--sp-8);
  }

  .qv-name { font-size: var(--text-xl); }
}


/* ================================================================
   10b. SITE FOOTER
   ================================================================ */
.site-footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--sp-16);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-10);
}

/* Brand column */
.footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--sp-4);
}

.footer-logo-img {
  height: 34px;
  width: auto;
  object-fit: contain;
}

.footer-logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.footer-logo-text em {
  font-style: italic;
  color: var(--color-brand-dark);
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 280px;
  margin-bottom: var(--sp-4);
}

.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-whatsapp);
  transition: opacity var(--ease-fast);
}

.footer-contact-link:hover { opacity: 0.8; }

/* Nav columns */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}

.footer-col-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-bottom: var(--sp-4);
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }

.footer-col a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--ease-fast);
}

.footer-col a:hover { color: var(--color-brand-dark); }

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid var(--color-border-light);
  padding: var(--sp-4) 0;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  text-align: center;
}

.footer-copyright,
.footer-delivery {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

@media (min-width: 640px) {
  .footer-inner { grid-template-columns: 1fr 2fr; }
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }
}

@media (min-width: 1024px) {
  .footer-inner { grid-template-columns: 280px 1fr; }
}

/* ================================================================
   11. Responsive — Tablet  640 px+
   ================================================================ */
@media (min-width: 640px) {
  :root {
    --page-px: 1.75rem;   /* 28px */
  }

  .hero-slide {
    min-height: 420px;
  }

  .slide-heading {
    font-size: var(--text-5xl);
  }

  .slide-content {
    padding: var(--sp-10) var(--sp-10);
  }
}

/* ================================================================
   12. Responsive — Desktop  1024 px+
   ================================================================ */
@media (min-width: 1024px) {
  :root {
    --page-px: 2.5rem;   /* 40px */
  }

  /* Show desktop nav, hide hamburger */
  .main-nav  { display: flex; }
  .hamburger { display: none; }

  /* Hero on desktop */
  .hero-slide {
    min-height: 480px;
  }

  .slide-text { max-width: 55%; }

  .slide-heading {
    font-size: var(--text-6xl);
  }

  .slide-content {
    padding: var(--sp-12) var(--sp-16);
  }
}

/* ================================================================
   13. Responsive — Wide  1280 px+
   ================================================================ */
@media (min-width: 1280px) {
  .hero-slide {
    min-height: 500px;
  }
}

/* ================================================================
   Latest News / Blog Section
   ================================================================ */
.blog-section {
  padding-block: var(--sp-12) var(--sp-16);
  background: var(--color-white);
}

.blog-header {
  margin-bottom: var(--sp-8);
}

.blog-title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.blog-title-muted {
  font-weight: var(--weight-regular);
  color: #9CA3AF;
}

/* Two-column layout */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
}

/* ── Featured post ── */
.blog-featured-img-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.blog-featured-img-link img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 300ms ease;
}

.blog-featured-img-link:hover img {
  transform: scale(1.03);
}

.blog-featured-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  margin-bottom: var(--sp-2);
}

.blog-featured-title a {
  color: var(--color-text);
  text-decoration: none;
}

.blog-featured-title a:hover {
  color: var(--color-brand);
}

.blog-featured-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--sp-3);
}

/* ── Author row ── */
.blog-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}

.blog-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #6B7280;
  color: #fff;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.blog-avatar--blue { background: #3B82F6; }
.blog-avatar--rose { background: #EC4899; }

.blog-author-name {
  color: #3B82F6;
  font-weight: var(--weight-medium);
}

.blog-author-sep,
.blog-author-date {
  color: #9CA3AF;
}

/* ── Small posts list ── */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.blog-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--color-border-light);
}

.blog-item:first-child {
  border-top: 1px solid var(--color-border-light);
}

.blog-item-body {
  flex: 1;
  min-width: 0;
}

.blog-item-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  margin-bottom: var(--sp-1);
}

.blog-item-title a {
  color: var(--color-text);
  text-decoration: none;
}

.blog-item-title a:hover {
  color: var(--color-brand);
}

.blog-item-excerpt {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--sp-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-item-thumb {
  flex-shrink: 0;
  width: 100px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  display: block;
}

.blog-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.blog-item-thumb:hover img {
  transform: scale(1.05);
}

/* ── Show all button ── */
.blog-footer {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-10);
}

.blog-show-all {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 11px 28px;
  border: 1.5px solid #D1D5DB;
  border-radius: var(--r-full);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.blog-show-all:hover {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-white);
}

/* Responsive */
@media (max-width: 767px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .blog-item-thumb {
    width: 80px;
    height: 68px;
  }
}

/* ================================================================
   In Their Words — Testimonials
   ================================================================ */
.reviews-section {
  padding-block: var(--sp-14) var(--sp-16);
  background: var(--color-white);
  overflow: hidden;
}

.reviews-head {
  text-align: center;
  margin-bottom: var(--sp-10);
}

.reviews-title {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}

.reviews-sub {
  font-size: var(--text-sm);
  color: #9CA3AF;
}

/* Stage holds everything (avatars + cards + dots) */
.reviews-stage {
  position: relative;
  padding-block: var(--sp-6);
}

/* ── Floating avatars ── */
.rv-float {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  flex-shrink: 0;
}

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

/* Positions & sizes — mirroring reference layout */
.rv-float--tl { width: 50px;  height: 50px;  top: 0;    left: 8%;  border: 3px solid #F472B6; }
.rv-float--tc { width: 78px;  height: 78px;  top: -10px;left: 50%; transform: translateX(-50%); border: 3px solid #5EEAD4; }
.rv-float--tr { width: 44px;  height: 44px;  top: 4px;  right: 8%; border: 3px solid #F472B6; }
.rv-float--ml { width: 48px;  height: 48px;  top: 42%;  left: 0;   border: 3px solid #5EEAD4; }
.rv-float--mr { width: 48px;  height: 48px;  top: 38%;  right: 0;  border: 3px solid #FCD34D; }
.rv-float--bl { width: 54px;  height: 54px;  bottom: 8px; left: 22%; border: 3px solid #5EEAD4; }
.rv-float--br { width: 44px;  height: 44px;  bottom: 8px; right: 22%; border: 3px solid #A78BFA; }

/* ── Carousel track ── */
.rv-track {
  display: flex;
  overflow: hidden;
  width: 100%;
}

.rv-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  min-width: 100%;
  padding-inline: 14%;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Review card ── */
.rv-card {
  padding: var(--sp-6) var(--sp-5);
  text-align: left;
}

.rv-quote {
  display: block;
  font-size: 4.5rem;
  line-height: 1;
  color: #5EEAD4;
  font-family: Georgia, serif;
  margin-bottom: var(--sp-2);
  opacity: 0.5;
}

.rv-text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: var(--sp-3);
  font-style: normal;
}

.rv-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--sp-1);
}

.rv-stars {
  color: #F59E0B;
  font-size: 1rem;
  letter-spacing: 2px;
}

.rv-star--empty {
  color: #D1D5DB;
}

/* ── Navigation dots ── */
.rv-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.rv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #D1D5DB;
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease, transform 200ms ease;
}

.rv-dot.is-active {
  background: var(--color-text);
  transform: scale(1.2);
}

/* Responsive */
@media (max-width: 767px) {
  .rv-slide {
    grid-template-columns: 1fr;
    padding-inline: 5%;
  }

  .rv-float--ml,
  .rv-float--mr,
  .rv-float--tl,
  .rv-float--tr { display: none; }

  .rv-float--tc { width: 60px; height: 60px; }
}

/* ================================================================
   Collections / Category Listing Page
   ================================================================ */
.coll-main {
  padding-block: var(--sp-10) var(--sp-16);
  min-height: 70vh;
}

.coll-page-header { margin-bottom: var(--sp-8); }

.coll-page-title {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}

.coll-page-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 400px;
}

/* Filter bar */
.coll-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  margin-bottom: var(--sp-4);
  /* NOTE: no overflow:auto here — it would clip the absolute-pos dropdowns */
}

.coll-chips {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
  overflow-x: auto;          /* scroll only the chips row, not the whole bar */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;       /* space so focus ring isn't clipped */
}
.coll-chips::-webkit-scrollbar { display: none; }

/* Push sort chip to the far right */
.coll-chips + .coll-chip-wrap {
  margin-left: auto;
  flex-shrink: 0;
}

.coll-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--r-full);
  background: var(--color-white);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 160ms ease;
  white-space: nowrap;
}

.coll-chip:hover { border-color: var(--color-text); }
.coll-chip-arrow { opacity: 0.5; }

/* ── Filter chip wrappers & dropdowns ─────────────────────────── */
.coll-chip-wrap {
  position: relative;
}

.coll-chip[aria-expanded="true"] {
  border-color: var(--color-text);
  background: #F9FAFB;
}
.coll-chip[aria-expanded="true"] .coll-chip-arrow {
  transform: rotate(180deg);
}
.coll-chip-arrow {
  opacity: 0.5;
  transition: transform 160ms ease, opacity 160ms ease;
}
.coll-chip-count {
  display: none;             /* hidden until JS reveals it */
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--color-text);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  margin-left: 2px;
}
/* shown by JS via style="display:inline-flex" */

/* Dropdown panel */
.coll-dropdown {
  display: none;           /* hidden by default — shown via .is-open */
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  min-width: 220px;
  background: var(--color-white);
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  overflow: hidden;
}
.coll-dropdown.is-open {
  display: block;
  animation: ddFadeIn 150ms ease;
}
@keyframes ddFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.coll-dropdown-inner {
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
  overscroll-behavior: contain;
}
.coll-dropdown-inner::-webkit-scrollbar { width: 4px; }
.coll-dropdown-inner::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; }

/* Checkbox rows */
label.coll-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--color-text);
  transition: background 120ms ease;
  user-select: none;
}
label.coll-dropdown-item:hover { background: #F3F4F6; }
label.coll-dropdown-item input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
}

/* Sort button rows */
button.coll-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--color-text);
  text-align: left;
  transition: background 120ms ease;
}
button.coll-dropdown-item:hover { background: #F3F4F6; }
button.coll-dropdown-item.is-active { font-weight: 600; }

/* Footer with Clear / Apply */
.coll-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 10px;
  border-top: 1px solid #F3F4F6;
  gap: 8px;
}
.coll-dd-clear,
.coll-dd-apply {
  flex: 1;
  padding: 7px 0;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.coll-dd-clear {
  background: none;
  border: 1.5px solid #E5E7EB;
  color: var(--color-muted);
}
.coll-dd-clear:hover { border-color: var(--color-text); color: var(--color-text); }
.coll-dd-apply {
  background: var(--color-text);
  border: 1.5px solid var(--color-text);
  color: var(--color-white);
}
.coll-dd-apply:hover { background: #374151; border-color: #374151; }

/* Sort dropdown sits to the right — align panel to right edge */
.coll-sort-dropdown {
  left: auto;
  right: 0;
  min-width: 210px;
}

.coll-divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin-bottom: var(--sp-8);
}

/* 4-column product grid */
.coll-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-12);
}

/* Green price badge on collections page */
.coll-price-badge {
  background: #DCFCE7 !important;
  color: #15803D   !important;
  padding: 3px 10px !important;
  border-radius: var(--r-full) !important;
  font-weight: var(--weight-semibold) !important;
  font-size: 12.5px !important;
}

/* Pagination */
.coll-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-4);
}

.coll-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--r-full);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-white);
  transition: border-color 160ms ease, background 160ms ease;
}

.coll-page-btn:hover:not(.is-disabled) {
  border-color: var(--color-text);
  background: #F9FAFB;
}

.coll-page-btn.is-disabled { color: #D1D5DB; pointer-events: none; }

.coll-page-numbers { display: flex; gap: var(--sp-1); }

.coll-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: background 160ms ease;
}

.coll-page-num:hover:not(.is-active) { background: #F3F4F6; }

.coll-page-num.is-active {
  background: var(--color-text);
  color: var(--color-white);
  font-weight: var(--weight-bold);
}

@media (max-width: 1023px) {
  .coll-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .coll-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .coll-filter-bar { flex-wrap: wrap; overflow-x: visible; }
  .coll-chips { flex-wrap: wrap; }
  .coll-chips + .coll-chip-wrap { margin-left: 0; }
}

/* ================================================================
   Cookie Consent Banner
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  padding: 14px 20px 14px 18px;
  max-width: 620px;
  width: calc(100vw - 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Close ×  */
.cookie-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: #9CA3AF;
  padding: 2px;
  line-height: 1;
  transition: color 150ms ease;
}
.cookie-close:hover { color: var(--color-text); }

/* Cookie emoji */
.cookie-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Text block */
.cookie-body { flex: 1; min-width: 0; }

.cookie-title {
  font-size: 13.5px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: 3px;
}

.cookie-text {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.5;
}

.cookie-policy-link {
  color: var(--color-text);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Buttons */
.cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 8px 20px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
  white-space: nowrap;
}

.cookie-btn--decline {
  background: #fff;
  border: 1.5px solid #D1D5DB;
  color: var(--color-text);
}
.cookie-btn--decline:hover {
  border-color: var(--color-text);
  background: #F9FAFB;
}

.cookie-btn--accept {
  background: var(--color-text);
  border: 1.5px solid var(--color-text);
  color: #fff;
}
.cookie-btn--accept:hover {
  background: #333;
  border-color: #333;
}

@media (max-width: 600px) {
  .cookie-banner {
    flex-wrap: wrap;
    bottom: 16px;
    padding: 14px 16px;
    gap: 10px;
  }
  .cookie-actions { width: 100%; justify-content: flex-end; }
}

/* ================================================================
   Cookie Consent Banner — end
   ================================================================ */

/* ================================================================
   14. Focus / Accessibility
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-to-main {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--sp-4);
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-text);
  color: var(--color-white);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: inset-block-start var(--ease-fast);
}

.skip-to-main:focus {
  inset-block-start: var(--sp-4);
}

/* ================================================================
   15. Scroll-locked body (search overlay or mobile menu open)
   ================================================================ */
body.is-locked {
  overflow: hidden;
}

/* ================================================================
   PRODUCT DETAIL PAGE  (.page-product)
   ================================================================ */

/* Layout */
.prod-main { padding: var(--sp-8) 0 var(--sp-16); }

/* Breadcrumb */
.prod-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.prod-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.prod-breadcrumb a:hover { color: var(--color-text); }
.prod-breadcrumb svg { opacity: 0.4; flex-shrink: 0; }
.prod-breadcrumb span { color: var(--color-text); font-weight: var(--weight-medium); }

/* 2-col main layout */
.prod-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
  margin-bottom: var(--sp-16);
}

/* ── Gallery ───────────────────────────────────────────────── */
.prod-gallery { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: 88px; }

.prod-gallery-main {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #F4F5F7;
  aspect-ratio: 1 / 1;
}
.prod-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 200ms ease;
}
.prod-img-fade { opacity: 0.4; }

.prod-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: var(--r-full);
  pointer-events: none;
}

.prod-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
}
.prod-thumb {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: #F4F5F7;
  aspect-ratio: 1 / 1;
  transition: border-color 160ms ease;
}
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-thumb.is-active { border-color: var(--color-text); }
.prod-thumb:hover { border-color: #9CA3AF; }

/* ── Details panel ─────────────────────────────────────────── */
.prod-brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-1);
}
.prod-name {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--sp-1);
}
.prod-variant {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-4);
}

.prod-price-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.prod-price {
  display: inline-block;
  background: #DCFCE7;
  color: #15803D;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--r-full);
}
.prod-price-orig {
  font-size: 14px;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.prod-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: var(--sp-4);
}
.prod-stars { display: flex; gap: 2px; }
.prod-rating-num { font-weight: 600; }
.prod-rating-dot { color: var(--color-text-muted); }
.prod-reviews-link { color: var(--color-text); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 2px; }
.prod-stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #16A34A;
  font-weight: 500;
  font-size: 12.5px;
}

.prod-divider { border: none; border-top: 1px solid var(--color-border-light); margin: var(--sp-4) 0; }

/* Options */
.prod-option-group { margin-bottom: var(--sp-5); }
.prod-option-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--sp-2);
  display: flex;
  gap: 6px;
  align-items: center;
}
.prod-option-chosen {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 12.5px;
}

/* Colour swatches */
.prod-swatches { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.prod-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 160ms ease, border-color 160ms ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.prod-swatch.is-active { outline-color: var(--color-text); border-color: var(--color-white); }
.prod-swatch:hover { outline-color: #9CA3AF; }

/* Size buttons */
.prod-sizes { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.prod-size-btn {
  padding: 7px 16px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.prod-size-btn:hover { border-color: var(--color-text); }
.prod-size-btn.is-active {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-white);
}

/* Purchase row */
.prod-purchase {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
  margin-bottom: var(--sp-6);
}
.prod-qty {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  padding: 0 var(--sp-3);
  background: var(--color-white);
  flex-shrink: 0;
}
.prod-qty-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 2px;
  color: var(--color-text);
  display: flex;
  align-items: center;
}
.prod-qty-btn svg { width: 16px; height: 16px; }
.prod-qty-val { font-size: 15px; font-weight: 600; min-width: 24px; text-align: center; }

.prod-add-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px var(--sp-6);
  background: var(--color-text);
  color: var(--color-white);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease;
}
.prod-add-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.prod-add-btn:hover { background: #374151; }

/* Delivery badges */
.prod-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: #F9FAFB;
  border-radius: 12px;
  border: 1px solid #F3F4F6;
}
.prod-badge-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--color-text);
}
.prod-badge-item svg { flex-shrink: 0; color: var(--color-text-muted); margin-top: 1px; }
.prod-badge-title { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.prod-badge-sub { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.4; }

/* Accordion */
.prod-accordion { border-top: 1px solid var(--color-border-light); }
.prod-acc-item { border-bottom: 1px solid var(--color-border-light); }
.prod-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) 0;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  gap: var(--sp-3);
}
.prod-acc-icon { flex-shrink: 0; width: 16px; height: 16px; }
.prod-acc-body { padding-bottom: var(--sp-4); }
.prod-acc-body--closed { display: none; }
.prod-acc-text { font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; margin: 0; }
.prod-acc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.prod-acc-list li {
  font-size: 14px;
  color: var(--color-text-secondary);
  padding-left: var(--sp-4);
  position: relative;
  line-height: 1.6;
}
.prod-acc-list li::before {
  content: '·';
  position: absolute;
  left: var(--sp-1);
  color: var(--color-text-muted);
  font-weight: 700;
}

/* ── Reviews ────────────────────────────────────────────────── */
.prod-reviews {
  padding: var(--sp-12) 0;
  border-top: 1px solid var(--color-border-light);
}
.prod-reviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.prod-reviews-summary { display: flex; align-items: center; gap: var(--sp-4); }
.prod-reviews-avg {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.prod-reviews-stars { display: flex; flex-direction: column; gap: 4px; }
.prod-reviews-stars > span:first-child { display: flex; gap: 3px; }
.prod-reviews-count { font-size: 13px; color: var(--color-text-muted); }
.prod-write-review {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid var(--color-text);
  border-radius: var(--r-full);
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.prod-write-review:hover { background: var(--color-text); color: var(--color-white); }

.prod-reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.prod-review-card {
  padding: var(--sp-5);
  background: #F9FAFB;
  border-radius: 14px;
  border: 1px solid #F3F4F6;
}
.prod-rv-top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.prod-rv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.prod-rv-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.prod-rv-date { font-size: 12px; color: var(--color-text-muted); }
.prod-rv-stars { display: flex; gap: 2px; margin-left: auto; }
.prod-rv-body { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.65; margin: 0; }

/* ── Related products ───────────────────────────────────────── */
.prod-related {
  padding: var(--sp-12) 0 var(--sp-4);
  border-top: 1px solid var(--color-border-light);
}
.prod-related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.prod-related-title { font-size: 1.4rem; font-weight: 700; }
.prod-related-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
}
.prod-related-all:hover { text-decoration: underline; text-underline-offset: 2px; }
.prod-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5) var(--sp-4);
}
@media (max-width: 1023px) {
  .prod-layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .prod-gallery { position: static; }
  .prod-gallery-thumbs { grid-template-columns: repeat(5, 1fr); }
  .prod-reviews-grid { grid-template-columns: 1fr; }
  .prod-related-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 639px) {
  .prod-badges { grid-template-columns: 1fr; }
  .prod-purchase { flex-direction: column; }
  .prod-qty { justify-content: center; }
  .prod-related-grid { grid-template-columns: 1fr 1fr; }
  .prod-reviews-avg { font-size: 2.2rem; }
  .prod-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* ── Add-to-cart popup ──────────────────────────────────────── */
.atc-popup {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  width: 320px;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.13), 0 2px 10px rgba(0,0,0,0.07);
  border: 1px solid #F3F4F6;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events: none;
}
.atc-popup.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.atc-popup-inner { padding: 16px; }

.atc-popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--color-text);
}
.atc-popup-header svg { flex-shrink: 0; }
.atc-popup-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px;
  display: flex;
  align-items: center;
}
.atc-popup-close:hover { color: var(--color-text); }

.atc-popup-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.atc-popup-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  background: #F4F5F7;
  flex-shrink: 0;
}
.atc-popup-info { flex: 1; min-width: 0; }
.atc-popup-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atc-popup-variant {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.atc-popup-qty {
  font-size: 12px;
  color: var(--color-text-muted);
}
.atc-popup-price {
  display: inline-block;
  background: #DCFCE7;
  color: #15803D;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  white-space: nowrap;
}

.atc-popup-cart-btn {
  display: block;
  text-align: center;
  padding: 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease;
}
.atc-popup-cart-btn:hover {
  background: #F9FAFB;
  border-color: var(--color-text);
}

/* Button feedback when added */
.prod-add-btn.is-added {
  background: #16A34A;
}
.prod-add-btn.is-added::after {
  content: ' ✓';
}

@media (max-width: 400px) {
  .atc-popup { right: 12px; left: 12px; width: auto; }
}

/* ================================================================
   CART PAGE  (.page-cart)
   ================================================================ */
.cart-main { padding: var(--sp-10) 0 var(--sp-16); }

.cart-page-header { margin-bottom: var(--sp-4); }
.cart-page-title  { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: var(--sp-2); }
.cart-breadcrumb  { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--color-text-muted); }
.cart-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.cart-breadcrumb a:hover { color: var(--color-text); }

.cart-divider-top { border: none; border-top: 1px solid var(--color-border-light); margin-bottom: var(--sp-8); }

/* Empty state */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-16) var(--sp-4);
  gap: var(--sp-3);
  color: var(--color-text-muted);
}
.cart-empty svg { opacity: 0.3; }
.cart-empty h2 { font-size: 1.2rem; font-weight: 700; color: var(--color-text); }
.cart-empty p  { font-size: 14px; }
.cart-empty-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 28px;
  background: var(--color-text);
  color: var(--color-white);
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-top: var(--sp-2);
  transition: background 160ms ease;
}
.cart-empty-btn:hover { background: #374151; }

/* 2-col layout */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-12);
  align-items: start;
}

/* ── Cart items ───────────────────────────────────────────── */
.cart-item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
}
.cart-item--bordered { border-bottom: 1px solid var(--color-border-light); }

.cart-item-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
  background: #F4F5F7;
  flex-shrink: 0;
}

.cart-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }

.cart-item-top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.cart-item-meta { flex: 1; min-width: 0; }
.cart-item-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item-attrs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.cart-item-attr {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cart-item-sep::before {
  content: '|';
  margin-right: var(--sp-2);
  opacity: 0.3;
}
.cart-item-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}

/* Qty controls */
.cart-item-qty-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1.5px solid #E5E7EB;
  border-radius: var(--r-full);
  padding: 4px 10px;
  flex-shrink: 0;
}
.cart-qty-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #E5E7EB;
  background: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 140ms ease, background 140ms ease;
}
.cart-qty-btn svg { width: 12px; height: 12px; }
.cart-qty-btn:hover { border-color: var(--color-text); background: #F9FAFB; }
.cart-qty-val { font-size: 14px; font-weight: 600; min-width: 18px; text-align: center; }

/* Price */
.cart-item-price {
  display: inline-block;
  background: #DCFCE7;
  color: #15803D;
  font-size: 13.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--r-full);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Bottom row */
.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-item-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: #16A34A;
  font-weight: 500;
}
.cart-item-remove {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: #2563EB;
  cursor: pointer;
  padding: 0;
}
.cart-item-remove:hover { text-decoration: underline; }

/* ── Order Summary ────────────────────────────────────────── */
.cart-summary {
  background: #F9FAFB;
  border: 1px solid #F3F4F6;
  border-radius: 16px;
  padding: var(--sp-6);
  position: sticky;
  top: 88px;
}
.cart-summary-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--sp-5);
}
.cart-summary-rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--color-text-muted);
}
.cart-summary-row span:last-child { font-weight: var(--weight-medium); color: var(--color-text); }
.cart-summary-free { color: #16A34A !important; font-weight: 600 !important; }

.cart-summary-divider { border: none; border-top: 1px solid #E5E7EB; margin: var(--sp-4) 0; }

.cart-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: var(--sp-5);
}

.cart-checkout-btn {
  display: block;
  text-align: center;
  padding: 14px;
  background: var(--color-text);
  color: var(--color-white);
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 160ms ease;
  margin-bottom: var(--sp-4);
}
.cart-checkout-btn:hover { background: #374151; }

.cart-summary-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.cart-summary-note svg { flex-shrink: 0; margin-top: 1px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 560px) {
  .cart-item-top { flex-wrap: wrap; }
  .cart-item-qty-wrap { order: -1; }
}

/* ================================================================
   CHECKOUT PAGE  (.page-checkout)
   ================================================================ */
.co-main { padding: var(--sp-10) 0 var(--sp-16); }

.co-page-header { margin-bottom: var(--sp-6); }
.co-page-title  { font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; margin-bottom: var(--sp-2); }
.co-breadcrumb  { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--color-text-muted); }
.co-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.co-breadcrumb a:hover { color: var(--color-text); }
.co-breadcrumb span { color: var(--color-text-muted); }
.co-breadcrumb span[aria-current] { color: var(--color-text); font-weight: var(--weight-medium); }

/* 2-col layout */
.co-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--sp-12);
  align-items: start;
}

/* ── Steps ────────────────────────────────────────────────── */
.co-steps { display: flex; flex-direction: column; gap: 0; }

.co-step {
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  transition: border-color 200ms ease;
}
.co-step--locked { opacity: 0.6; pointer-events: none; }
.co-step--locked:has(#form-shipping[style*="block"]),
.co-step--locked:has(#form-payment[style*="block"]) {
  opacity: 1;
  pointer-events: auto;
}

.co-step-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  gap: var(--sp-3);
  background: var(--color-white);
}
.co-step-summary-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.co-step-summary-left svg { flex-shrink: 0; color: var(--color-text-muted); }
.co-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.co-step-check { flex-shrink: 0; }
.co-step-value { font-size: 13.5px; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.co-step-change {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--r-full);
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 140ms ease, background 140ms ease;
}
.co-step-change:hover { border-color: var(--color-text); background: #F9FAFB; }

.co-step-form {
  padding: var(--sp-5);
  border-top: 1px solid #F3F4F6;
  background: var(--color-white);
}

/* Form fields */
.co-form-grid { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.co-form-grid--2 { grid-template-columns: 1fr 1fr; }
.co-field--full { grid-column: 1 / -1; }

.co-label { font-size: 13px; font-weight: 600; color: var(--color-text); display: block; margin-bottom: 6px; }

.co-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-white);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  font-family: inherit;
  box-sizing: border-box;
}
.co-input:focus { border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }
.co-input[readonly] { background: #F9FAFB; color: var(--color-text-muted); cursor: default; }
.co-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }

/* Address type */
.co-addr-types { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.co-addr-type { cursor: pointer; }
.co-addr-type input { display: none; }
.co-addr-type-inner {
  display: flex;
  flex-direction: column;
  padding: 10px 18px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  transition: border-color 160ms ease, background 160ms ease;
}
.co-addr-type input:checked + .co-addr-type-inner {
  border-color: var(--color-text);
  background: #F9FAFB;
}
.co-addr-type-title { font-size: 13.5px; font-weight: 600; }
.co-addr-type-sub   { font-size: 11.5px; color: var(--color-text-muted); }

/* Payment methods */
.co-payment-methods { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.co-payment-opt { cursor: pointer; }
.co-payment-opt input { display: none; }
.co-payment-opt-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  transition: border-color 160ms ease, background 160ms ease;
}
.co-payment-opt.is-active .co-payment-opt-inner { border-color: var(--color-text); background: #F9FAFB; }
.co-payment-opt-inner svg:first-child { flex-shrink: 0; color: var(--color-text-muted); }
.co-pm-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.co-pm-sub   { font-size: 12px; color: var(--color-text-muted); }
.co-pm-check { margin-left: auto; flex-shrink: 0; }

/* Step actions */
.co-step-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.co-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  background: var(--color-text);
  color: var(--color-white);
  border: none;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease;
}
.co-btn-primary:hover { background: #374151; }
.co-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: none;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.co-btn-ghost:hover { border-color: var(--color-text); background: #F9FAFB; }

/* ── Right summary panel ──────────────────────────────────── */
.co-summary {
  background: var(--color-white);
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: var(--sp-6);
  position: sticky;
  top: 88px;
}
.co-summary-title { font-size: 1.05rem; font-weight: 700; margin-bottom: var(--sp-4); }

/* Summary cart item */
.co-sum-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid #F3F4F6;
}
.co-sum-item:last-child { border-bottom: none; }
.co-sum-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
  background: #F4F5F7;
  flex-shrink: 0;
}
.co-sum-info { flex: 1; min-width: 0; }
.co-sum-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-sum-attrs { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 6px; }
.co-sum-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.co-sum-sep { opacity: 0.3; }
.co-sum-qty-row { display: flex; align-items: center; gap: 6px; }
.co-sum-qty-btn {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid #E5E7EB;
  background: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text);
}
.co-sum-qty-btn:hover { border-color: var(--color-text); }
.co-sum-qty  { font-size: 13px; font-weight: 600; min-width: 16px; text-align: center; }
.co-sum-remove { background: none; border: none; font-size: 12px; color: #2563EB; cursor: pointer; margin-left: auto; }
.co-sum-remove:hover { text-decoration: underline; }
.co-sum-price {
  font-size: 13px; font-weight: 700;
  background: #DCFCE7; color: #15803D;
  padding: 3px 10px; border-radius: var(--r-full);
  white-space: nowrap; flex-shrink: 0;
}

/* Discount */
.co-discount { display: flex; gap: var(--sp-2); margin: var(--sp-4) 0; }
.co-discount-input { flex: 1; }
.co-discount-apply {
  padding: 10px 18px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 140ms ease, background 140ms ease;
}
.co-discount-apply:hover { border-color: var(--color-text); background: #F9FAFB; }

.co-summary-rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.co-summary-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--color-text-muted); }
.co-summary-row span:last-child { color: var(--color-text); font-weight: var(--weight-medium); }
.co-free { color: #16A34A !important; font-weight: 600 !important; }

.co-summary-divider { border: none; border-top: 1px solid #E5E7EB; margin: var(--sp-4) 0; }
.co-summary-total { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; margin-bottom: var(--sp-5); }

.co-confirm-btn {
  display: block; width: 100%;
  padding: 14px;
  background: var(--color-text); color: var(--color-white);
  border: none; border-radius: var(--r-full);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease;
  margin-bottom: var(--sp-4);
}
.co-confirm-btn:hover { background: #374151; }

.co-summary-note {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; color: var(--color-text-muted); line-height: 1.5;
}
.co-note-link { color: var(--color-text); font-weight: 600; text-underline-offset: 2px; }

/* ── Order Success Modal ──────────────────────────────────── */
.co-success-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.co-success-modal {
  background: var(--color-white);
  border-radius: 20px;
  padding: var(--sp-10) var(--sp-8);
  max-width: 420px; width: 100%;
  text-align: center;
}
.co-success-icon {
  width: 64px; height: 64px;
  background: #16A34A; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-5);
}
.co-success-title { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--sp-2); }
.co-success-sub   { font-size: 14px; color: var(--color-text-muted); margin-bottom: var(--sp-4); line-height: 1.6; }
.co-success-id    { font-size: 13px; font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--sp-6); }
.co-success-btn {
  display: inline-flex; align-items: center;
  padding: 12px 32px;
  background: var(--color-text); color: var(--color-white);
  border-radius: var(--r-full);
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: background 160ms ease;
}
.co-success-btn:hover { background: #374151; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .co-layout { grid-template-columns: 1fr; }
  .co-summary { position: static; }
  .co-summary { order: -1; }
}
@media (max-width: 600px) {
  .co-form-grid--2 { grid-template-columns: 1fr; }
  .co-addr-types { flex-direction: column; }
}

/* ================================================================
   ORDER SUCCESS PAGE  (.os-main)
   ================================================================ */
.os-main { padding: var(--sp-16) 0 var(--sp-20); }

.os-wrap {
  max-width: 640px;
  margin: 0 auto;
}

/* Header */
.os-header    { margin-bottom: var(--sp-8); }
.os-thanks    { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.os-title     { font-size: clamp(1.9rem,4vw,2.6rem); font-weight: 800; margin-bottom: var(--sp-3); }
.os-sub       { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.65; max-width: 520px; }

/* Order number */
.os-order-num {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  margin-bottom: var(--sp-6);
}
.os-order-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.os-order-id    { font-size: 1.35rem; font-weight: 800; color: var(--color-text); letter-spacing: -.01em; }

/* Items */
.os-items { border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; margin-bottom: 0; }

.os-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid #F3F4F6;
}
.os-item:last-child { border-bottom: none; }

.os-item-img-wrap {
  width: 72px; height: 72px;
  border-radius: 10px;
  background: #F4F5F7;
  overflow: hidden;
  flex-shrink: 0;
}
.os-item-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.os-item-body { flex: 1; min-width: 0; }
.os-item-name  { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.os-item-attrs {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--color-text-muted);
  margin-bottom: 5px;
}
.os-item-swatch {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; border: 1px solid rgba(0,0,0,.12);
  flex-shrink: 0;
}
.os-item-qty   { font-size: 12.5px; color: var(--color-text-muted); }

.os-item-price {
  font-size: 13px; font-weight: 700;
  background: #DCFCE7; color: #15803D;
  padding: 4px 12px; border-radius: var(--r-full);
  white-space: nowrap; flex-shrink: 0;
  align-self: center;
}

/* Totals */
.os-totals {
  border: 1px solid #E5E7EB;
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-8);
}
.os-total-row {
  display: flex; justify-content: space-between;
  font-size: 13.5px; color: var(--color-text-muted);
  padding: var(--sp-2) 0;
}
.os-total-row span:last-child { color: var(--color-text); font-weight: 500; }
.os-free  { color: #16A34A !important; font-weight: 600 !important; }
.os-divider { border: none; border-top: 1px solid #E5E7EB; margin: var(--sp-3) 0; }
.os-total-final { font-size: 15px; font-weight: 800; }
.os-total-final span { color: var(--color-text) !important; }

/* Info grid */
.os-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  padding: var(--sp-8) 0;
  border-top: 1px solid #E5E7EB;
  margin-bottom: var(--sp-8);
}
.os-info-title { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.os-info-body  { font-size: 13.5px; line-height: 1.8; color: var(--color-text); }
.os-info-body p { margin: 0; }

.os-pm-row { display: flex; align-items: center; gap: var(--sp-3); font-size: 13.5px; color: var(--color-text); font-weight: 500; }
.os-pm-row svg { flex-shrink: 0; color: var(--color-text-muted); }

/* CTA */
.os-cta { text-align: right; padding-top: var(--sp-4); border-top: 1px solid #E5E7EB; }
.os-cta-link {
  font-size: 13.5px; font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: .01em;
  transition: opacity 160ms ease;
}
.os-cta-link:hover { opacity: 0.6; }

.os-no-items { padding: var(--sp-5); font-size: 14px; color: var(--color-text-muted); text-align: center; }

/* Responsive */
@media (max-width: 600px) {
  .os-info-grid { grid-template-columns: 1fr; }
  .os-item-price { font-size: 12px; padding: 3px 10px; }
}

/* ================================================================
   AUTH PAGES  (login.php / signup.php)
   ================================================================ */
.auth-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) var(--sp-4);
  background: #F9FAFB;
}

.auth-wrap {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

/* Brand */
.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* Card */
.auth-card {
  width: 100%;
  background: var(--color-white);
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: var(--sp-8) var(--sp-7);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

/* Header */
.auth-header    { text-align: center; margin-bottom: var(--sp-6); }
.auth-title     { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--sp-1); }
.auth-sub       { font-size: 14px; color: var(--color-text-muted); }

/* Social */
.auth-social    { margin-bottom: var(--sp-5); }
.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 11px;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  background: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 140ms ease, background 140ms ease;
}
.auth-social-btn:hover { border-color: #D1D5DB; background: #F9FAFB; }

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  color: var(--color-text-muted);
  font-size: 12.5px;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: #E5E7EB; }

/* Form */
.auth-form       { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.auth-field      { display: flex; flex-direction: column; gap: 6px; }
.auth-label      { font-size: 13px; font-weight: 600; color: var(--color-text); }
.auth-label-row  { display: flex; justify-content: space-between; align-items: baseline; }
.auth-forgot     { font-size: 12.5px; color: var(--color-text-muted); text-decoration: none; }
.auth-forgot:hover { color: var(--color-text); text-decoration: underline; }

.auth-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-white);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  font-family: inherit;
  box-sizing: border-box;
}
.auth-input:focus { border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }
.auth-input::placeholder { color: #C4C4C4; }

/* Input with eye icon */
.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input { padding-right: 44px; }
.auth-eye {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--color-text-muted);
  cursor: pointer; padding: 2px;
  display: flex; align-items: center;
}
.auth-eye:hover { color: var(--color-text); }

/* Phone input */
.auth-phone-wrap { display: flex; align-items: center; border: 1.5px solid #E5E7EB; border-radius: 10px; overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease; }
.auth-phone-wrap:focus-within { border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }
.auth-phone-prefix { padding: 10px 12px; font-size: 13.5px; color: var(--color-text); background: #F9FAFB; border-right: 1.5px solid #E5E7EB; white-space: nowrap; flex-shrink: 0; }
.auth-input--phone { border: none; border-radius: 0; box-shadow: none !important; }
.auth-input--phone:focus { box-shadow: none; }

/* Password strength */
.auth-strength {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 4px;
}
.auth-strength-bar {
  flex: 1;
  height: 4px;
  background: #E5E7EB;
  border-radius: var(--r-full);
  overflow: hidden;
}
.auth-strength-fill {
  height: 100%;
  border-radius: var(--r-full);
  width: 0;
  transition: width 300ms ease, background 300ms ease;
}
.auth-strength-label { font-size: 11.5px; font-weight: 600; white-space: nowrap; }

/* Checkbox */
.auth-remember      { margin-top: var(--sp-1); }
.auth-check-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
}
.auth-check-label input { display: none; }
.auth-checkmark {
  width: 18px; height: 18px;
  border: 1.5px solid #D1D5DB;
  border-radius: 5px;
  background: var(--color-white);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color 140ms ease, background 140ms ease;
}
.auth-check-label input:checked + .auth-checkmark {
  background: var(--color-text);
  border-color: var(--color-text);
}
.auth-check-label input:checked + .auth-checkmark::after {
  content: '';
  display: block;
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* Error messages */
.auth-error { font-size: 12px; color: #DC2626; min-height: 16px; }

/* Submit button */
.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 13px;
  background: var(--color-text);
  color: var(--color-white);
  border: none;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms ease;
  margin-top: var(--sp-2);
}
.auth-submit:hover    { background: #374151; }
.auth-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.auth-spinner { display: inline-flex; align-items: center; }

/* Footer link */
.auth-alt      { text-align: center; font-size: 13.5px; color: var(--color-text-muted); }
.auth-alt-link { color: var(--color-text); font-weight: 600; text-decoration: none; }
.auth-alt-link:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 480px) {
  .auth-card       { padding: var(--sp-6) var(--sp-5); border-radius: 16px; }
  .auth-form-grid  { grid-template-columns: 1fr; }
}

/* ================================================================
   CONTACT PAGE  (.page-contact)
   ================================================================ */
.ct-main { padding: var(--sp-12) 0 var(--sp-20); }

/* Page header */
.ct-page-header { max-width: 560px; margin-bottom: var(--sp-12); }
.ct-eyebrow     { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.ct-title       { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--sp-3); line-height: 1.15; }
.ct-subtitle    { font-size: 15px; color: var(--color-text-muted); line-height: 1.7; }

/* 2-col layout */
.ct-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-16);
  align-items: start;
}

/* ── Form ─────────────────────────────────────────────────── */
.ct-form { display: flex; flex-direction: column; gap: var(--sp-5); }

.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.ct-field { display: flex; flex-direction: column; gap: 7px; }

.ct-label { font-size: 13px; font-weight: 600; color: var(--color-text); }

.ct-input {
  width: 100%;
  padding: 11px 15px;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-white);
  outline: none;
  font-family: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  box-sizing: border-box;
}
.ct-input::placeholder { color: #C4C4C4; }
.ct-input:focus { border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }

/* Phone */
.ct-phone {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ct-phone:focus-within { border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }
.ct-phone-code { display: flex; align-items: center; padding: 11px 13px; font-size: 13.5px; font-weight: 500; background: #F9FAFB; border-right: 1.5px solid #E5E7EB; white-space: nowrap; flex-shrink: 0; }
.ct-phone .ct-input { border: none; border-radius: 0; box-shadow: none !important; }

/* Select */
.ct-select-wrap { position: relative; }
.ct-select { appearance: none; cursor: pointer; padding-right: 40px; }
.ct-select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }

/* Textarea */
.ct-textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

/* Error */
.ct-err { font-size: 12px; color: #DC2626; min-height: 16px; }

/* Success */
.ct-success {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: #F0FDF4;
  border: 1.5px solid #BBF7D0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #15803D;
}

/* Submit */
.ct-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 32px;
  background: var(--color-text);
  color: var(--color-white);
  border: none;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms ease;
  align-self: flex-start;
}
.ct-submit:hover    { background: #374151; }
.ct-submit:disabled { opacity: 0.65; cursor: not-allowed; }
.ct-submit-spin { display: inline-flex; align-items: center; }

/* ── Info column ──────────────────────────────────────────── */
.ct-info-cards { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); }

.ct-info-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-white);
  border: 1.5px solid #E5E7EB;
  border-radius: 14px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ct-info-card:not(.ct-info-card--static):hover {
  border-color: var(--color-text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.ct-info-card--green { border-color: #BBF7D0; background: #F0FDF4; }
.ct-info-card--green:hover { border-color: #16A34A !important; }
.ct-info-card--green .ct-info-card-icon { background: #DCFCE7; color: #16A34A; }

.ct-info-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #F3F4F6;
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ct-info-card-body { flex: 1; min-width: 0; }
.ct-info-card-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 3px; }
.ct-info-card-val   { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.ct-info-card-hint  { font-size: 12px; color: var(--color-text-muted); }

.ct-info-card-arrow { flex-shrink: 0; color: var(--color-text-muted); transition: transform 160ms ease; }
.ct-info-card:hover .ct-info-card-arrow { transform: translateX(3px); }

/* ── FAQ ──────────────────────────────────────────────────── */
.ct-faq-title { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-3); }

.ct-faq-list  { display: flex; flex-direction: column; }

.ct-faq-item { border-bottom: 1px solid #F3F4F6; }
.ct-faq-item:first-child { border-top: 1px solid #F3F4F6; }

.ct-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4) 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  gap: var(--sp-3);
}
.ct-faq-q::-webkit-details-marker { display: none; }

.ct-faq-chevron { flex-shrink: 0; color: var(--color-text-muted); transition: transform 200ms ease; }
.ct-faq-item[open] .ct-faq-chevron { transform: rotate(180deg); }

.ct-faq-a {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.7;
  padding-bottom: var(--sp-4);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .ct-layout { grid-template-columns: 1fr; }
  .ct-info-col { order: -1; }
  .ct-info-cards { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ct-row { grid-template-columns: 1fr; }
  .ct-info-cards { grid-template-columns: 1fr; }
  .ct-submit { width: 100%; }
}

/* ================================================================
   BLOG LISTING  (.page-blog)
   ================================================================ */
.bl-main { padding: var(--sp-12) 0 var(--sp-20); }

/* Header */
.bl-header    { margin-bottom: var(--sp-8); }
.bl-eyebrow   { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.bl-title     { font-size: clamp(1.8rem,4vw,2.5rem); font-weight: 800; letter-spacing: -.02em; }

/* Category chips */
.bl-cats {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-10);
}
.bl-cat-chip {
  padding: 7px 18px;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.bl-cat-chip:hover      { border-color: var(--color-text); color: var(--color-text); }
.bl-cat-chip.is-active  { background: var(--color-text); border-color: var(--color-text); color: var(--color-white); }

/* Category badge (on cards) */
.bl-cat-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: #F3F4F6;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Meta row */
.bl-meta        { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); flex-wrap: wrap; }
.bl-meta-sep    { opacity: 0.35; }
.bl-meta-author { display: flex; align-items: center; gap: 7px; color: var(--color-text); font-weight: 500; }
.bl-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bl-avatar--sm { width: 22px; height: 22px; font-size: 10px; }

/* ── Featured post ─────────────────────────────────────────── */
.bl-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
  margin-bottom: var(--sp-16);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  transition: box-shadow 200ms ease;
}
.bl-featured:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.09); }

.bl-featured-img-wrap { overflow: hidden; aspect-ratio: 4/3; }
.bl-featured-img      { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.bl-featured:hover .bl-featured-img { transform: scale(1.03); }

.bl-featured-body  { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
.bl-featured-title { font-size: clamp(1.3rem,2.5vw,1.7rem); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.bl-featured-excerpt { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.7; }

/* ── Post grid ─────────────────────────────────────────────── */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}

.bl-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-text);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.bl-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.09); transform: translateY(-2px); }

.bl-card-img-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.bl-card-img      { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.bl-card:hover .bl-card-img { transform: scale(1.04); }
.bl-card-badge    { position: absolute; top: 12px; left: 12px; }

.bl-card-body    { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.bl-card-title   { font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.bl-card-excerpt { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.65; flex: 1;
                   display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card-meta    { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid #F3F4F6; }

/* Empty state */
.bl-empty { text-align: center; padding: var(--sp-20) 0; color: var(--color-text-muted); font-size: 15px; }
.bl-empty-link { display: inline-block; margin-top: var(--sp-4); color: var(--color-text); font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; }

/* Blog listing responsive */
@media (max-width: 960px) {
  .bl-featured { grid-template-columns: 1fr; }
  .bl-featured-img-wrap { aspect-ratio: 16/9; }
  .bl-featured-body { padding: var(--sp-6); }
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bl-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   BLOG POST  (.page-blog-post)
   ================================================================ */
.bp-main { padding-bottom: var(--sp-20); }

/* Header */
.bp-header { padding: var(--sp-10) 0 var(--sp-8); background: #F9FAFB; border-bottom: 1px solid #E5E7EB; margin-bottom: var(--sp-8); }
.bp-header-inner { max-width: 760px; display: flex; flex-direction: column; gap: var(--sp-4); }
.bp-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--color-text-muted);
  text-decoration: none; margin-bottom: var(--sp-2);
  transition: color 140ms ease;
}
.bp-back:hover { color: var(--color-text); }
.bp-title   { font-size: clamp(1.7rem,3.5vw,2.4rem); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; }
.bp-excerpt { font-size: 15.5px; color: var(--color-text-muted); line-height: 1.7; max-width: 640px; }
.bp-meta    { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--color-text-muted); flex-wrap: wrap; }

/* Hero image */
.bp-hero-img-wrap { border-radius: 16px; overflow: hidden; aspect-ratio: 21/9; margin-bottom: var(--sp-10); }
.bp-hero-img      { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 2-col layout */
.bp-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-12); align-items: start; }

/* Prose */
.bp-prose { font-size: 16px; line-height: 1.8; color: #374151; max-width: 680px; }
.bp-prose h2 { font-size: 1.35rem; font-weight: 800; color: var(--color-text); margin: var(--sp-8) 0 var(--sp-3); letter-spacing: -.02em; line-height: 1.25; }
.bp-prose p  { margin-bottom: var(--sp-4); }
.bp-prose ul, .bp-prose ol { margin: var(--sp-4) 0 var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.bp-prose li { line-height: 1.7; }
.bp-prose strong { font-weight: 700; color: var(--color-text); }
.bp-prose blockquote {
  border-left: 3px solid var(--color-text);
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  background: #F9FAFB;
  border-radius: 0 12px 12px 0;
  font-size: 17px;
  font-style: italic;
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.6;
}

/* Sidebar */
.bp-sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--sp-5); }

.bp-author-card { display: flex; align-items: center; gap: var(--sp-3); }
.bp-author-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-text); color: var(--color-white);
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bp-author-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.bp-author-role { font-size: 12px; color: var(--color-text-muted); }
.bp-author-bio  { font-size: 13px; color: var(--color-text-muted); line-height: 1.65; }

.bp-sidebar-divider { border: none; border-top: 1px solid #E5E7EB; }
.bp-sidebar-label   { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }

/* Share */
.bp-share { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.bp-share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 600;
  background: none; cursor: pointer;
  color: var(--color-text);
  text-decoration: none; font-family: inherit;
  transition: border-color 140ms ease, background 140ms ease;
}
.bp-share-btn:hover { border-color: var(--color-text); background: #F9FAFB; }
.bp-share-wa  { color: #16A34A; border-color: #BBF7D0; background: #F0FDF4; }
.bp-share-wa:hover { background: #DCFCE7 !important; border-color: #16A34A !important; }

/* Sidebar CTA */
.bp-sidebar-cta { background: var(--color-text); border-radius: 14px; padding: var(--sp-5); color: var(--color-white); }
.bp-sidebar-cta-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.bp-sidebar-cta-sub   { font-size: 12.5px; opacity: 0.7; line-height: 1.5; margin-bottom: var(--sp-4); }
.bp-sidebar-cta-btn {
  display: inline-flex;
  padding: 9px 20px;
  background: var(--color-white); color: var(--color-text);
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: opacity 140ms ease;
}
.bp-sidebar-cta-btn:hover { opacity: 0.85; }

/* Related posts */
.bp-related { padding: var(--sp-12) 0; border-top: 1px solid #E5E7EB; margin-top: var(--sp-12); }
.bp-related-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-6); }
.bp-related-grid  { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }

/* Blog post responsive */
@media (max-width: 900px) {
  .bp-layout { grid-template-columns: 1fr; }
  .bp-sidebar { position: static; }
  .bp-related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bp-hero-img-wrap { aspect-ratio: 4/3; border-radius: 12px; }
  .bp-prose { font-size: 15px; }
}

/* ================================================================
   ABOUT PAGE  (.page-about)
   ================================================================ */
.ab-main { overflow: hidden; }

/* ── Hero ─────────────────────────────────────────────────── */
.ab-hero { padding: var(--sp-16) 0; }
.ab-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.ab-eyebrow      { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.ab-hero-title   { font-size: clamp(2rem,4vw,3rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; margin-bottom: var(--sp-5); }
.ab-hero-sub     { font-size: 16px; color: var(--color-text-muted); line-height: 1.75; }
.ab-hero-img-wrap { border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; }
.ab-hero-img      { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Stats bar ────────────────────────────────────────────── */
.ab-stats-bar {
  background: var(--color-text);
  color: var(--color-white);
  padding: var(--sp-10) 0;
}
.ab-stats-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.ab-stat         { display: flex; flex-direction: column; gap: 6px; text-align: center; flex: 1; }
.ab-stat-num     { font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; letter-spacing: -.02em; }
.ab-stat-label   { font-size: 13px; opacity: 0.65; font-weight: 500; }
.ab-stat-divider { width: 1px; height: 48px; background: rgba(255,255,255,.15); flex-shrink: 0; }

/* ── Generic section ──────────────────────────────────────── */
.ab-section          { padding: var(--sp-16) 0; }
.ab-section-eyebrow  { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.ab-section-title    { font-size: clamp(1.5rem,3vw,2.1rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; margin-bottom: var(--sp-5); }
.ab-section-body     { font-size: 15px; color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--sp-4); max-width: 560px; }

/* Two-col text + image */
.ab-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.ab-two-col-img { border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; }
.ab-two-col-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Values ───────────────────────────────────────────────── */
.ab-values-section { padding: var(--sp-16) 0; background: #F9FAFB; }
.ab-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.ab-value-card {
  background: var(--color-white);
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: box-shadow 200ms ease;
}
.ab-value-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.08); }
.ab-value-icon {
  width: 48px; height: 48px;
  background: #F3F4F6;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text);
  flex-shrink: 0;
}
.ab-value-title { font-size: 15px; font-weight: 700; }
.ab-value-body  { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.7; }

/* ── Team ─────────────────────────────────────────────────── */
.ab-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.ab-team-card  { display: flex; flex-direction: column; gap: var(--sp-2); }
.ab-team-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  color: var(--color-white);
  font-size: 26px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-2);
}
.ab-team-name { font-size: 15px; font-weight: 700; }
.ab-team-role { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; margin-bottom: var(--sp-2); }
.ab-team-bio  { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.7; }

/* ── CTA section ──────────────────────────────────────────── */
.ab-cta-section {
  background: var(--color-text);
  padding: var(--sp-16) 0;
  margin-top: var(--sp-4);
}
.ab-cta-inner   { text-align: center; max-width: 560px; margin: 0 auto; }
.ab-cta-title   { font-size: clamp(1.6rem,3.5vw,2.2rem); font-weight: 800; color: var(--color-white); margin-bottom: var(--sp-3); line-height: 1.2; }
.ab-cta-sub     { font-size: 15px; color: rgba(255,255,255,.65); margin-bottom: var(--sp-7); line-height: 1.65; }
.ab-cta-btns    { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.ab-cta-btn-primary {
  padding: 13px 32px; background: var(--color-white); color: var(--color-text);
  border-radius: var(--r-full); font-size: 15px; font-weight: 700;
  text-decoration: none; transition: opacity 140ms ease;
}
.ab-cta-btn-primary:hover { opacity: 0.85; }
.ab-cta-btn-ghost {
  padding: 13px 32px; border: 1.5px solid rgba(255,255,255,.3); color: var(--color-white);
  border-radius: var(--r-full); font-size: 15px; font-weight: 700;
  text-decoration: none; transition: border-color 140ms ease, background 140ms ease;
}
.ab-cta-btn-ghost:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); }

/* About responsive */
@media (max-width: 1024px) {
  .ab-values-grid { grid-template-columns: repeat(2,1fr); }
  .ab-team-grid   { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .ab-hero-inner  { grid-template-columns: 1fr; }
  .ab-two-col     { grid-template-columns: 1fr; }
  .ab-stat-divider{ display: none; }
}
@media (max-width: 480px) {
  .ab-values-grid { grid-template-columns: 1fr; }
  .ab-team-grid   { grid-template-columns: 1fr; }
}

/* ================================================================
   LEGAL / PRIVACY POLICY PAGE  (.page-legal)
   ================================================================ */
.legal-main { padding: var(--sp-12) 0 var(--sp-20); }

.legal-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-14);
  align-items: start;
}

/* Sidebar TOC */
.legal-toc { position: sticky; top: 88px; }
.legal-toc-title { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.legal-toc nav   { display: flex; flex-direction: column; gap: 2px; }
.legal-toc-link  {
  display: block;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: 8px;
  border-left: 2px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.legal-toc-link:hover    { background: #F3F4F6; color: var(--color-text); }
.legal-toc-link.is-active { background: #F3F4F6; color: var(--color-text); font-weight: 600; border-left-color: var(--color-text); }

/* Main content */
.legal-header { margin-bottom: var(--sp-10); padding-bottom: var(--sp-8); border-bottom: 1px solid #E5E7EB; }
.legal-title  { font-size: clamp(1.8rem,3.5vw,2.4rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: var(--sp-2); }
.legal-meta   { font-size: 13.5px; color: var(--color-text-muted); margin-bottom: var(--sp-5); }
.legal-intro  { font-size: 15px; color: var(--color-text-muted); line-height: 1.75; max-width: 680px; }

.legal-section { margin-bottom: var(--sp-10); padding-bottom: var(--sp-10); border-bottom: 1px solid #F3F4F6; }
.legal-section:last-child { border-bottom: none; }

.legal-section h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: var(--sp-4); letter-spacing: -.015em; scroll-margin-top: 100px; }
.legal-section h3 { font-size: 14px; font-weight: 700; color: var(--color-text); margin: var(--sp-5) 0 var(--sp-3); }
.legal-section p  { font-size: 14.5px; color: #374151; line-height: 1.8; margin-bottom: var(--sp-4); }
.legal-section ul { margin: var(--sp-2) 0 var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.legal-section li { font-size: 14.5px; color: #374151; line-height: 1.7; }
.legal-section a  { color: var(--color-text); font-weight: 600; text-underline-offset: 3px; }

/* Table */
.legal-table-wrap { overflow-x: auto; margin: var(--sp-4) 0; border-radius: 12px; border: 1px solid #E5E7EB; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.legal-table th { background: #F9FAFB; padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid #E5E7EB; }
.legal-table td { padding: 12px 16px; color: #374151; border-bottom: 1px solid #F3F4F6; }
.legal-table tr:last-child td { border-bottom: none; }
.legal-table code { font-family: monospace; background: #F3F4F6; padding: 2px 7px; border-radius: 5px; font-size: 12.5px; color: var(--color-text); }

/* Contact box */
.legal-contact-box {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: var(--sp-5) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: 14.5px; color: #374151;
}

/* Legal responsive */
@media (max-width: 900px) {
  .legal-wrap { grid-template-columns: 1fr; }
  .legal-toc  { position: static; display: none; }
}

/* ================================================================
   ACCOUNT / CUSTOMER DASHBOARD  (.page-account)
   ================================================================ */
.acc-main { padding: var(--sp-10) 0 var(--sp-20); }

/* Header */
.acc-header  { margin-bottom: var(--sp-5); }
.acc-title   { font-size: 1.6rem; font-weight: 800; letter-spacing: -.025em; margin-bottom: var(--sp-1); }
.acc-meta    { display: flex; align-items: center; gap: 6px; font-size: 13.5px; flex-wrap: wrap; }
.acc-meta-name  { font-weight: 600; color: var(--color-text); }
.acc-meta-email { color: #2563EB; }
.acc-meta-city  { color: var(--color-text-muted); }
.acc-meta-sep   { color: var(--color-text-muted); opacity: 0.4; }

/* Tabs */
.acc-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.acc-tab {
  display: inline-block;
  background: none; border: none;
  padding: 10px 16px 10px;
  font-size: 13.5px; font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer; font-family: inherit;
  position: relative;
  transition: color 140ms ease;
  text-decoration: none;
}
.acc-tab::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px; background: var(--color-text);
  transform: scaleX(0); transition: transform 200ms ease;
}
.acc-tab:hover { color: var(--color-text); }
.acc-tab.is-active { color: var(--color-text); font-weight: 600; }
.acc-tab.is-active::after { transform: scaleX(1); }
.acc-tab-rule { border: none; border-top: 1px solid #E5E7EB; margin-bottom: var(--sp-8); }

/* Panels */
.acc-panel-title  { font-size: 1.1rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: var(--sp-6); color: var(--color-text); }
.acc-panel-header { margin-bottom: var(--sp-6); }
.acc-panel-sub    { font-size: 13.5px; color: var(--color-text-muted); margin-top: var(--sp-1); }

/* ── Settings form ─────────────────────────────────────────── */
.acc-avatar-row {
  display: flex; align-items: center; gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.acc-avatar-wrap { position: relative; flex-shrink: 0; }
.acc-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-text); color: var(--color-white);
  font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.acc-avatar-change {
  position: absolute; bottom: 0; right: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-white); border: 1.5px solid #E5E7EB;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-text-muted);
  transition: border-color 140ms ease, color 140ms ease;
}
.acc-avatar-change:hover { border-color: var(--color-text); color: var(--color-text); }
.acc-avatar-hint-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.acc-avatar-hint-sub  { font-size: 12.5px; color: var(--color-text-muted); }

.acc-form { max-width: 640px; }
.acc-form--narrow { max-width: 420px; }
.acc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.acc-field       { display: flex; flex-direction: column; gap: 6px; }
.acc-field--full { grid-column: 1 / -1; }

.acc-label { font-size: 13px; font-weight: 600; color: var(--color-text); }

.acc-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 14px; color: var(--color-text);
  background: var(--color-white);
  outline: none; font-family: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  box-sizing: border-box;
}
.acc-input::placeholder { color: #C4C4C4; }
.acc-input:focus { border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }
.acc-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

/* Input with icon */
.acc-input-icon-wrap { position: relative; }
.acc-input-icon  { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.acc-input--icon { padding-left: 36px; }

/* Select */
.acc-select-wrap { position: relative; }
.acc-select      { appearance: none; cursor: pointer; padding-right: 36px; }
.acc-select-arrow{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }

/* Password input */
.acc-pw-wrap { position: relative; }
.acc-pw-wrap .acc-input { padding-right: 42px; }
.acc-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--color-text-muted);
  cursor: pointer; padding: 2px; display: flex; align-items: center;
  transition: color 120ms ease;
}
.acc-eye:hover { color: var(--color-text); }
.acc-err { font-size: 12px; color: #DC2626; min-height: 16px; }

/* Form footer */
.acc-form-footer { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.acc-success-msg {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #15803D;
}
.acc-btn {
  padding: 11px 28px;
  background: var(--color-text); color: var(--color-white);
  border: none; border-radius: var(--r-full);
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background 160ms ease;
}
.acc-btn:hover { background: #374151; }

/* ── Wishlist grid ─────────────────────────────────────────── */
.acc-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.acc-wl-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--color-text);
  border: 1px solid #E5E7EB; border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 200ms ease;
}
.acc-wl-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.09); }

.acc-wl-img-wrap { position: relative; aspect-ratio: 4/3; background: #F4F5F7; overflow: hidden; }
.acc-wl-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.acc-wl-card:hover .acc-wl-img-wrap img { transform: scale(1.04); }

.acc-wl-heart {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-white); border: 1.5px solid #E5E7EB;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #EF4444;
  transition: transform 160ms ease;
}
.acc-wl-heart:hover { transform: scale(1.15); }

.acc-wl-body    { padding: var(--sp-4); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.acc-wl-name    { font-size: 14px; font-weight: 700; }
.acc-wl-brand   { font-size: 12.5px; color: var(--color-text-muted); }
.acc-wl-footer  { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--sp-2); }
.acc-wl-price   { background: #DCFCE7; color: #15803D; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); }
.acc-wl-rating  { font-size: 12px; color: var(--color-text-muted); }

/* Wishlist / orders empty */
.acc-wishlist-empty,
.acc-orders-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3); padding: var(--sp-16) 0;
  color: var(--color-text-muted);
  text-align: center;
}
.acc-wishlist-empty svg,
.acc-orders-empty svg { opacity: 0.3; }
.acc-wishlist-empty p,
.acc-orders-empty p   { font-size: 15px; font-weight: 500; }
.acc-empty-link {
  padding: 10px 24px; background: var(--color-text); color: var(--color-white);
  border-radius: var(--r-full); font-size: 13.5px; font-weight: 700;
  text-decoration: none; transition: background 160ms ease;
}
.acc-empty-link:hover { background: #374151; }

/* Show more */
.acc-show-more-wrap { text-align: center; margin-top: var(--sp-6); }
.acc-show-more {
  padding: 10px 28px;
  border: 1.5px solid #E5E7EB; border-radius: var(--r-full);
  background: none; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: border-color 140ms ease;
}
.acc-show-more:hover { border-color: var(--color-text); }

/* ── Orders history ────────────────────────────────────────── */
#orders-list { display: flex; flex-direction: column; gap: var(--sp-5); }

.acc-order-card {
  border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden;
}
.acc-order-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid #F3F4F6;
  background: #F9FAFB;
  gap: var(--sp-3);
}
.acc-order-num  { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.acc-order-date { font-size: 12.5px; color: var(--color-text-muted); }
.acc-order-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.acc-order-btn {
  padding: 7px 16px;
  border: 1.5px solid #E5E7EB; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 600;
  background: var(--color-white); color: var(--color-text);
  text-decoration: none; cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.acc-order-btn:hover { border-color: var(--color-text); }
.acc-order-btn--ghost { background: none; }

.acc-order-item {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid #F9FAFB;
}
.acc-order-item:last-child { border-bottom: none; }
.acc-order-item-img {
  width: 64px; height: 64px; border-radius: 10px;
  background: #F4F5F7; overflow: hidden; flex-shrink: 0;
}
.acc-order-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-order-item-body  { flex: 1; min-width: 0; }
.acc-order-item-name  { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.acc-order-item-attrs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.acc-order-swatch     { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }
.acc-order-item-qty   { font-size: 12px; color: var(--color-text-muted); }
.acc-order-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); flex-shrink: 0; }
.acc-order-price      { background: #DCFCE7; color: #15803D; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); }
.acc-order-review     { font-size: 12px; color: #2563EB; text-decoration: none; }
.acc-order-review:hover { text-decoration: underline; }

/* ── Billing ───────────────────────────────────────────────── */
.acc-billing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.acc-billing-card {
  border: 1px solid #E5E7EB; border-radius: 14px;
  padding: var(--sp-5);
}
.acc-billing-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); }
.acc-billing-card-title { font-size: 14px; font-weight: 700; }
.acc-billing-add {
  font-size: 13px; font-weight: 600; color: #2563EB;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.acc-addr-item  { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.acc-addr-body  { flex: 1; }
.acc-addr-tag   { display: inline-block; background: #F3F4F6; color: var(--color-text-muted); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.acc-addr-name  { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.acc-addr-detail{ font-size: 13px; color: var(--color-text-muted); }
.acc-addr-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.acc-addr-btn   { font-size: 12.5px; font-weight: 600; color: #2563EB; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
.acc-addr-btn--danger { color: #DC2626; }
.acc-pay-method { display: flex; align-items: center; gap: var(--sp-3); }
.acc-pay-icon   { width: 40px; height: 40px; background: #F3F4F6; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-text-muted); }
.acc-pay-title  { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.acc-pay-sub    { font-size: 12px; color: var(--color-text-muted); }
.acc-pay-badge  { margin-left: auto; background: #DCFCE7; color: #15803D; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); }

/* ── Not-logged-in gate ────────────────────────────────────── */
.acc-gate {
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: var(--sp-3);
  color: var(--color-text-muted); padding: var(--sp-10);
}
.acc-gate svg { opacity: 0.25; margin-bottom: var(--sp-2); }
.acc-gate-title { font-size: 1.3rem; font-weight: 800; color: var(--color-text); }
.acc-gate-sub   { font-size: 14px; color: var(--color-text-muted); }
.acc-gate-btn {
  margin-top: var(--sp-2);
  padding: 12px 32px;
  background: var(--color-text); color: var(--color-white);
  border-radius: var(--r-full); font-size: 15px; font-weight: 700;
  text-decoration: none; transition: background 160ms ease;
}
.acc-gate-btn:hover { background: #374151; }
.acc-gate-switch { font-size: 13.5px; }
.acc-gate-switch a { color: var(--color-text); font-weight: 600; }

/* Responsive */
@media (max-width: 860px) {
  .acc-billing-grid { grid-template-columns: 1fr; }
  .acc-wishlist-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .acc-form-grid  { grid-template-columns: 1fr; }
  .acc-field--full{ grid-column: 1; }
  .acc-wishlist-grid { grid-template-columns: 1fr; }
  .acc-order-head { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   TRACK ORDER PAGE  (.page-track)
   ================================================================ */
.tr-main { padding: var(--sp-12) 0 var(--sp-20); }

/* Header */
.tr-header    { max-width: 560px; margin-bottom: var(--sp-10); }
.tr-eyebrow   { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.tr-title     { font-size: clamp(1.8rem,4vw,2.4rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: var(--sp-3); }
.tr-sub       { font-size: 15px; color: var(--color-text-muted); line-height: 1.7; }

/* ── Search card ─────────────────────────────────────────── */
.tr-search-card {
  max-width: 680px;
  background: var(--color-white);
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: var(--sp-8);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}

.tr-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.tr-field { display: flex; flex-direction: column; gap: 7px; }
.tr-label { font-size: 13px; font-weight: 600; color: var(--color-text); }

.tr-input-wrap { position: relative; }
.tr-input-icon {
  position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none;
}
.tr-input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  border: 1.5px solid #E5E7EB; border-radius: 12px;
  font-size: 14px; color: var(--color-text); background: var(--color-white);
  outline: none; font-family: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  box-sizing: border-box;
}
.tr-input::placeholder { color: #C4C4C4; }
.tr-input:focus { border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }

.tr-err { font-size: 12px; color: #DC2626; min-height: 16px; }

.tr-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 13px 32px;
  background: var(--color-text); color: var(--color-white);
  border: none; border-radius: var(--r-full);
  font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background 160ms ease;
  margin-bottom: var(--sp-4);
}
.tr-submit:hover    { background: #374151; }
.tr-submit:disabled { opacity: 0.65; cursor: not-allowed; }
.tr-submit-spin     { display: inline-flex; align-items: center; }

.tr-form-hint {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 13px; color: var(--color-text-muted); line-height: 1.5;
}
.tr-form-hint a { color: var(--color-text); font-weight: 600; text-underline-offset: 2px; }

/* ── Result layout ───────────────────────────────────────── */
.tr-result-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-8); gap: var(--sp-4);
}
.tr-result-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px; }
.tr-result-id    { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }

.tr-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  border: 1.5px solid #E5E7EB; border-radius: var(--r-full);
  background: none; font-size: 13px; font-weight: 600;
  color: var(--color-text); cursor: pointer; font-family: inherit;
  transition: border-color 140ms ease, background 140ms ease;
  flex-shrink: 0;
}
.tr-back-btn:hover { border-color: var(--color-text); background: #F9FAFB; }

.tr-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-8);
  align-items: start;
}

/* Status banner */
.tr-status-banner {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border: 1.5px solid var(--tr-color, #E5E7EB);
  border-radius: 16px;
  background: var(--color-white);
  margin-bottom: var(--sp-6);
}
.tr-status-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: #F3F4F6;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tr-status-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px; }
.tr-status-val   { font-size: 1.1rem; font-weight: 800; color: var(--color-text); margin-bottom: 5px; }
.tr-status-eta   { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.5; }

/* Timeline */
.tr-timeline { display: flex; flex-direction: column; }

.tr-step {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  position: relative;
}

.tr-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #E5E7EB;
  background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--color-text-muted);
  position: relative; z-index: 1;
  transition: border-color 200ms ease, background 200ms ease;
}
.tr-step.is-done .tr-step-dot {
  background: #F0FDF4; border-color: #16A34A; color: #16A34A;
}
.tr-step.is-active .tr-step-dot {
  background: var(--color-text); border-color: var(--color-text); color: var(--color-white);
  box-shadow: 0 0 0 4px rgba(17,17,17,0.08);
}

.tr-step-line {
  position: absolute; left: 13px; top: 28px;
  width: 2px; height: calc(100% + 4px);
  background: #E5E7EB;
}
.tr-step:last-child .tr-step-line { display: none; }
.tr-step.is-done .tr-step-line { background: #BBF7D0; }

.tr-step-body  { padding: 4px 0 var(--sp-7); }
.tr-step-label { font-size: 14px; font-weight: 700; margin-bottom: 3px; color: var(--color-text-muted); }
.tr-step-sub   { font-size: 12.5px; color: var(--color-text-muted); }
.tr-step.is-done  .tr-step-label { color: var(--color-text); }
.tr-step.is-active .tr-step-label { color: var(--color-text); }

/* Right cards */
.tr-right { display: flex; flex-direction: column; gap: var(--sp-4); }

.tr-items-card,
.tr-info-card,
.tr-help-card {
  background: var(--color-white);
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: var(--sp-5);
}

.tr-card-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-4); }

/* Items */
.tr-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid #F3F4F6;
}
.tr-item:last-child { border-bottom: none; }
.tr-item-img { width: 52px; height: 52px; border-radius: 8px; background: #F4F5F7; overflow: hidden; flex-shrink: 0; }
.tr-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-item-body { flex: 1; min-width: 0; }
.tr-item-name { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-item-meta { font-size: 12px; color: var(--color-text-muted); }
.tr-item-price { background: #DCFCE7; color: #15803D; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); white-space: nowrap; flex-shrink: 0; }

/* Info rows */
.tr-info-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid #F3F4F6; }
.tr-info-row:last-child { border-bottom: none; }
.tr-info-row > svg { flex-shrink: 0; color: var(--color-text-muted); margin-top: 2px; }
.tr-info-key { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.tr-info-val { font-size: 13.5px; font-weight: 500; color: var(--color-text); }

/* Help card */
.tr-help-sub { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--sp-4); }
.tr-help-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: #F0FDF4; border: 1.5px solid #BBF7D0;
  border-radius: var(--r-full);
  font-size: 13.5px; font-weight: 700; color: #16A34A;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease;
}
.tr-help-btn:hover { background: #DCFCE7; border-color: #16A34A; }

/* ── Not found ───────────────────────────────────────────── */
.tr-not-found {
  flex-direction: column; align-items: center;
  text-align: center; gap: var(--sp-4);
  padding: var(--sp-16) 0;
  color: var(--color-text-muted);
}
.tr-not-found svg { opacity: 0.25; }
.tr-nf-title { font-size: 1.3rem; font-weight: 800; color: var(--color-text); }
.tr-nf-sub   { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.7; max-width: 440px; }
.tr-nf-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }
.tr-nf-retry {
  padding: 11px 28px; background: var(--color-text); color: var(--color-white);
  border: none; border-radius: var(--r-full); font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background 160ms ease;
}
.tr-nf-retry:hover { background: #374151; }
.tr-nf-contact {
  padding: 11px 28px; border: 1.5px solid #E5E7EB;
  border-radius: var(--r-full); font-size: 14px; font-weight: 600;
  color: var(--color-text); text-decoration: none;
  transition: border-color 140ms ease;
}
.tr-nf-contact:hover { border-color: var(--color-text); }

/* Responsive */
@media (max-width: 900px) {
  .tr-layout { grid-template-columns: 1fr; }
  .tr-right { order: -1; }
}
@media (max-width: 560px) {
  .tr-form-row { grid-template-columns: 1fr; }
  .tr-search-card { padding: var(--sp-5); }
  .tr-submit { width: 100%; }
}

/* ================================================================
   HELP / FAQ PAGE  (.page-help)
   ================================================================ */
.hp-hero {
  background: #FAFAF8;
  border-bottom: 1px solid #EEE8E2;
  padding: var(--sp-16) 0 var(--sp-12);
}
.hp-hero-inner { max-width: 720px; }
.hp-eyebrow, .br-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-text-muted);
  margin-bottom: var(--sp-2);
}
.hp-title, .br-title {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
  margin-bottom: var(--sp-3);
}
.hp-sub, .br-sub {
  font-size: 15px; color: var(--color-text-muted); line-height: 1.7;
  max-width: 560px; margin-bottom: var(--sp-6);
}
.hp-search, .br-search {
  display: flex; align-items: center; gap: 12px;
  max-width: 520px; padding: 14px 18px;
  background: #fff; border: 1.5px solid #E5E7EB; border-radius: 14px;
}
.hp-search:focus-within, .br-search:focus-within {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(17,17,17,.06);
}
.hp-search svg, .br-search svg { color: var(--color-text-muted); flex-shrink: 0; }
.hp-search-input, .br-search-input {
  flex: 1; border: none; outline: none; background: none;
  font-size: 15px; font-family: inherit; color: var(--color-text);
}
.hp-quick {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3); margin-top: var(--sp-8);
}
.hp-quick-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: #fff;
  border: 1px solid #EEE8E2; border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.hp-quick-card:hover { border-color: #d1d5db; box-shadow: var(--shadow-xs); }
.hp-quick-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: #F3F4F6; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--color-text);
}
.hp-quick-card strong { display: block; font-size: 13.5px; font-weight: 650; }
.hp-quick-card em { display: block; font-style: normal; font-size: 12px; color: var(--color-text-muted); }

.hp-body { padding: var(--sp-12) 0 var(--sp-20); max-width: 820px; }

.hp-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-10); }
.hp-cat {
  border: 1.5px solid #E5E7EB; background: #fff;
  padding: 7px 14px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 550; font-family: inherit;
  color: var(--color-text-muted); cursor: pointer;
}
.hp-cat:hover { border-color: #d1d5db; color: var(--color-text); }
.hp-cat.is-active { background: var(--color-text); border-color: var(--color-text); color: #fff; }

.hp-empty, .br-empty {
  padding: var(--sp-10); text-align: center;
  color: var(--color-text-muted); font-size: 14px;
}

.hp-group { margin-bottom: var(--sp-10); }
.hp-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); }
.hp-group-icon {
  width: 34px; height: 34px; border-radius: 9px; background: #F3F4F6;
  display: flex; align-items: center; justify-content: center; color: var(--color-text);
}
.hp-group-title { font-size: 1.05rem; font-weight: 750; letter-spacing: -.015em; }

.hp-faq { border-bottom: 1px solid #F3F4F6; }
.hp-faq:first-child { border-top: 1px solid #F3F4F6; }
.hp-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; font-size: 14.5px; font-weight: 600; cursor: pointer; list-style: none;
}
.hp-faq-q::-webkit-details-marker { display: none; }
.hp-faq-chevron { flex-shrink: 0; color: var(--color-text-muted); transition: transform 200ms ease; }
.hp-faq[open] .hp-faq-chevron { transform: rotate(180deg); }
.hp-faq-a {
  padding: 0 0 16px; margin: 0; font-size: 14px;
  color: var(--color-text-muted); line-height: 1.7; max-width: 64ch;
}

.hp-cta {
  margin-top: var(--sp-16); padding: var(--sp-8);
  background: #111; color: #fff; border-radius: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}
.hp-cta h2 { font-size: 1.25rem; font-weight: 750; margin-bottom: 6px; }
.hp-cta p { font-size: 14px; color: #C4C4C4; line-height: 1.6; max-width: 42ch; }
.hp-cta-actions { display: flex; gap: 10px; flex-shrink: 0; }
.hp-cta-wa {
  background: #25D366; color: #fff; text-decoration: none;
  padding: 11px 20px; border-radius: var(--r-full); font-size: 14px; font-weight: 650;
}
.hp-cta-ghost {
  background: transparent; color: #fff; text-decoration: none;
  padding: 11px 20px; border-radius: var(--r-full); font-size: 14px; font-weight: 650;
  border: 1.5px solid rgba(255,255,255,.25);
}
.hp-cta-ghost:hover { border-color: #fff; }

@media (max-width: 720px) {
  .hp-quick { grid-template-columns: 1fr; }
  .hp-cta { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   ALL BRANDS PAGE  (.page-brands)
   ================================================================ */
.br-hero {
  background: #FAFAF8;
  border-bottom: 1px solid #EEE8E2;
  padding: var(--sp-16) 0 var(--sp-12);
}
.br-body { padding: var(--sp-12) 0 var(--sp-20); }

.br-section-head { margin-bottom: var(--sp-6); }
.br-section-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; }
.br-section-sub { font-size: 13.5px; color: var(--color-text-muted); margin-top: 4px; }

.br-featured { margin-bottom: var(--sp-12); }
.br-featured-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
.br-feat-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #EEE8E2; border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.br-feat-card:hover { border-color: #d1d5db; box-shadow: var(--shadow-xs); transform: translateY(-2px); }
.br-feat-img-wrap { aspect-ratio: 4/3; overflow: hidden; background: #F3F4F6; }
.br-feat-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-feat-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.br-feat-name { font-size: 16px; font-weight: 750; }
.br-feat-meta { font-size: 12px; color: var(--color-text-muted); }
.br-feat-desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; margin: 6px 0 10px; }
.br-feat-cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 650;
}

.br-az {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 14px 0; margin-bottom: var(--sp-8);
  border-top: 1px solid #EEE8E2; border-bottom: 1px solid #EEE8E2;
}
.br-az-link {
  width: 28px; height: 28px; display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 650; text-decoration: none;
  color: var(--color-text); border-radius: 6px;
}
.br-az-link:hover { background: #F3F4F6; }
.br-az-link.is-disabled { color: #D1D5DB; pointer-events: none; }

.br-letter-block { margin-bottom: var(--sp-8); }
.br-letter {
  font-size: 13px; font-weight: 800; letter-spacing: .08em;
  color: var(--color-text-muted); margin-bottom: var(--sp-3);
}
.br-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.br-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: #fff;
  border: 1px solid #EEE8E2; border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.br-card:hover { border-color: #d1d5db; box-shadow: var(--shadow-xs); }
.br-card-mark {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 750; font-size: 15px;
}
.br-card-name { display: block; font-size: 14.5px; font-weight: 650; }
.br-card-meta { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.br-card-arrow { margin-left: auto; color: #C4C4C4; flex-shrink: 0; }
.br-card:hover .br-card-arrow { color: var(--color-text); }

@media (max-width: 1024px) {
  .br-featured-grid { grid-template-columns: repeat(2, 1fr); }
  .br-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .br-featured-grid, .br-grid { grid-template-columns: 1fr; }
}