/* ============================================================
   KICKSY NEPAL — MAIN STYLESHEET
   Premium sneaker store. Mobile-first.
   v2 — Full responsive overflow fixes
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg: #F7F1E8;
  --surface: #FFFDF8;
  --surface2: #F0E9DE;
  --primary: #161616;
  --secondary: #6B6259;
  --accent: #B58A5A;
  --accent-dk: #8C6540;
  --dark: #0F0F0F;
  --border: #E6D8C8;
  --border-dk: #D4C2AD;
  --success: #2F7D4E;
  --sale: #B42318;
  --white: #FFFFFF;
  --shadow-sm: 0 1px 4px rgba(22, 22, 22, .07);
  --shadow-md: 0 4px 16px rgba(22, 22, 22, .10);
  --shadow-lg: 0 12px 36px rgba(22, 22, 22, .13);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --max-w: 1280px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 220ms;
}

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

/* KEY FIX: prevent horizontal scroll without breaking position:sticky
   (overflow-x:hidden on BODY breaks sticky children in Safari/Chrome) */
html {
  overflow-x: hidden;
  max-width: 100%;
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  max-width: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul,
ol {
  list-style: none;
}

input,
textarea,
select {
  font-family: inherit;
}

/* ── Utilities ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  /* comfortable mobile padding */
}

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

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {
  display: grid;
}

.hidden {
  display: none !important;
}

/* ── Typography helpers ────────────────────────────────────── */
.display-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.section-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary);
}

.section-sub {
  color: var(--secondary);
  font-size: var(--text-base);
  max-width: 56ch;
  margin: var(--sp-3) auto 0;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .02em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
  max-width: 100%;
}

.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.btn-primary:hover {
  background: #333;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-accent {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.btn-accent:hover {
  background: var(--accent-dk);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--border-dk);
}

.btn-ghost:hover {
  background: var(--surface2);
  border-color: var(--primary);
}

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
  border-color: #25D366;
}

.btn-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, .3);
}

.btn-preorder {
  background: transparent;
  color: var(--accent-dk);
  border-color: var(--accent-dk);
}

.btn-preorder:hover {
  background: var(--accent-dk);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-lg {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--text-base);
}

.btn-sm {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-xs);
}

.btn-block {
  width: 100%;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.badge-sale {
  background: var(--sale);
  color: var(--white);
}

.badge-new {
  background: var(--primary);
  color: var(--white);
}

.badge-bestseller {
  background: var(--accent);
  color: var(--white);
}

.badge-daily {
  background: #6A3E96;
  color: var(--white);
}

.badge-stock {
  background: var(--success);
  color: var(--white);
}

.badge-low {
  background: #D97706;
  color: var(--white);
}

.badge-out {
  background: #9CA3AF;
  color: var(--white);
}

.badge-customizable {
  background: #1D7A8C;
  color: var(--white);
}

.badge-preorder {
  background: var(--accent-dk);
  color: var(--white);
}

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 241, 232, .95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease), transform 280ms var(--ease);
  width: 100%;
  transform: translateY(0);
  will-change: transform;
}

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

/* Hide navbar when scrolling down, slide back in on scroll up */
.site-header.nav-hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: box-shadow var(--dur) var(--ease);
  }

  .site-header.nav-hidden {
    transform: translateY(0);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: var(--sp-3);
  min-width: 0;
  /* allow flex children to shrink */
}

.site-logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--primary);
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex-shrink: 0;
}

.site-logo span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2px;
}

.site-nav {
  display: none;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.site-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--secondary);
  transition: color var(--dur) var(--ease);
  position: relative;
  white-space: nowrap;
}

.site-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--primary);
}

.site-nav a:hover::after,
.site-nav a.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.header-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: transparent;
  flex-shrink: 0;
}

.header-icon-btn:hover {
  background: var(--surface2);
  color: var(--primary);
}

.header-icon-btn svg {
  width: 20px;
  height: 20px;
}

.header-wa-btn {
  display: none;
  background: #25D366;
  color: var(--white);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  gap: var(--sp-1);
  transition: background var(--dur) var(--ease);
  white-space: nowrap;
}

.header-wa-btn:hover {
  background: #1ebe5d;
}

.hamburger-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
  flex-shrink: 0;
}

.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
  transform-origin: center;
}

.hamburger-btn.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.open span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.logo-image {
  max-width: 120px;
  height: auto;
  border-radius: 5px;
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.mobile-nav.open {
  visibility: visible;
  opacity: 1;
}

.mobile-nav-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, .5);
}

.mobile-nav-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(80vw, 300px);
  background: var(--surface);
  padding: calc(60px + var(--sp-5)) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto;
}

.mobile-nav.open .mobile-nav-drawer {
  transform: translateX(0);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.mobile-nav-links a {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--primary);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Search overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 15, 15, .7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

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

.search-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-2);
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  box-shadow: var(--shadow-lg);
  transform: scale(.96) translateY(-8px);
  opacity: 0;
  transition: transform 250ms var(--ease), opacity 250ms var(--ease);
}

.search-overlay.open .search-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

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

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

.search-close {
  color: var(--secondary);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  transition: background var(--dur) var(--ease);
  flex-shrink: 0;
}

.search-close:hover {
  background: var(--surface2);
}

/* ── Hero ──────────────────────────────────────────────────── */
/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: #0F0F0F;
  color: var(--white);
  overflow: hidden;
  width: 100%;
}

/* ── Hero background ─────────────────────────────────────── */
/* Rich multi-layer background: deep char base with a warm cognac
   bloom behind the video slot and a cool dark vignette on the text
   side, giving the hero depth without any image. The grain layer on
   top (.hero-grain) adds a premium tactile texture. */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 75% 50%, rgba(181, 138, 90, .18) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 5% 80%, rgba(140, 101, 64, .10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 50% 0%, rgba(60, 40, 20, .55) 0%, transparent 70%),
    linear-gradient(150deg, #0a0a0a 0%, #18100a 50%, #0a0a0a 100%);
}

/* ── Hero inline video ───────────────────────────────────────
   Sits inside .hero-img-wrap replacing the old static shoe img.
   The glowing ring border + soft shadow give it a premium "floating
   product" feel rather than a plain rectangle. */
.hero-video-wrap {
  position: relative;
  width: 100%;
  max-width: 460px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 5/4;
  /* Layered shadow: a tight near-shadow for depth + a wide warm
     accent glow that ties into the background bloom behind it */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .55),
    0 0 80px rgba(181, 138, 90, .18);
  /* Subtle warm border ring — makes it look intentionally "framed"
     rather than just a rectangle sitting on the background */
  outline: 1.5px solid rgba(181, 138, 90, .2);
}

.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  opacity: .55;
  pointer-events: none;
}

/* ── Mobile hero: full-bleed video/image at top, content below ── */
.hero-mobile-img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center 30%;
  position: relative;
  z-index: 1;
}

/* gradient fade from video into dark content area */
.hero-mobile-img-fade {
  display: block;
  position: relative;
  z-index: 1;
  height: 46px;
  margin-top: -44px;
  background: linear-gradient(to bottom, transparent, #2a1e16);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-8);
  width: 100%;
}

.hero-inner {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Desktop image wrap — hidden on mobile */
.hero-img-wrap {
  display: none;
  position: relative;
  justify-content: center;
  align-items: center;
}

.hero-img-glow {
  position: absolute;
  width: min(360px, 65vw);
  height: min(360px, 65vw);
  background: radial-gradient(circle, rgba(181, 138, 90, .22) 0%, transparent 68%);
  border-radius: 50%;
}

.hero-img {
  /* kept for backwards compat */
  width: 100%;
  max-width: 460px;
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .55);
  object-fit: cover;
  aspect-ratio: 5/4;
}

/* ── Hero tag pill ─────────────── */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  border: 1px solid rgba(181, 138, 90, .45);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(181, 138, 90, .07);
  backdrop-filter: blur(4px);
  width: fit-content;
}

/* ── Hero title ───────────────── */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 11vw, 5.5rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -.03em;
  color: var(--white);
}

/* "Premium" in italic accent — on mobile it goes on its own line,
   on desktop it flows inline with the rest of the title */
.hero-title em {
  font-style: italic;
  color: var(--accent);
  display: block;
  /* Very subtle text-shadow gives the accent word a gentle warm
     glow that ties into the background without being overdone */
  text-shadow: 0 0 60px rgba(181, 138, 90, .45);
}

/* ── Hero description ─────────── */
.hero-desc {
  color: rgba(255, 255, 255, .55);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 38ch;
}

/* ── Hero CTA buttons ─────────── */
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hero-actions .btn {
  width: 100%;
  justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--text-sm);
}

.hero-actions .btn-ghost-hero {
  background: rgba(255, 255, 255, .06);
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  width: 100%;
  backdrop-filter: blur(4px);
}

.hero-actions .btn-ghost-hero:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
}

/* ── Hero scroll cue ──────────── */
.hero-scroll-cue {
  position: absolute;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  color: rgba(255, 255, 255, .4);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: scrollCue 2s ease-in-out infinite;
}

@keyframes scrollCue {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(6px);
  }
}

/* ── Promise strip ─────────────────────────────────────────── */
.promise-strip {
  background: var(--primary);
  color: var(--white);
  padding: var(--sp-4) 0;
  overflow: hidden;
  width: 100%;
}

.promise-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-2);
  padding: var(--sp-1) 0;
}

.promise-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 255, 255, .05);
  border-radius: var(--radius-md);
}

.promise-item svg {
  color: var(--accent);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.promise-divider {
  display: none;
}

/* ── Section shared ────────────────────────────────────────── */
.section {
  padding: var(--sp-12) 0;
}

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

.section-header.centered {
  text-align: center;
}

.section-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  transition: gap var(--dur) var(--ease);
  white-space: nowrap;
}

.section-link:hover {
  gap: var(--sp-2);
}

/* ── Product card ──────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 cols on mobile */
  gap: var(--sp-3);
}

.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* prevent overflow */
}

/* product-card hover moved to @media (hover: hover) block below */
.product-card-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface2);
}

.product-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card-img {
    transform: scale(1.04);
  }
}

.product-card-badges {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 1;
  max-height: calc(100% - var(--sp-4));
  /* never overflow image area */
  overflow: hidden;
}

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

.product-brand {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

.product-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-top: var(--sp-1);
}

.product-sale-price {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--primary);
}

.product-old-price {
  font-size: var(--text-xs);
  text-decoration: line-through;
  color: var(--secondary);
}

.product-discount {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--sale);
}

.product-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: var(--sp-1);
}

.product-size-chip {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 10px;
  color: var(--secondary);
}

.product-card-footer {
  padding: 0 var(--sp-3) var(--sp-3);
  margin-top: auto;
}

.product-card-cta {
  width: 100%;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .03em;
  padding: var(--sp-2) var(--sp-3);
}

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0% {
    background-position: 200% 0
  }

  100% {
    background-position: -200% 0
  }
}

.skeleton-card {
  height: 320px;
  border-radius: var(--radius-lg);
}

.skeleton-text {
  height: 14px;
  margin-bottom: var(--sp-2);
}

.skeleton-text.short {
  width: 40%;
}

.skeleton-text.medium {
  width: 70%;
}

/* ── Daily picks ───────────────────────────────────────────── */
.daily-picks {
  background: var(--surface2);
}

.daily-picks-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}

.daily-pick-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  min-width: 0;
}

/* daily-pick hover moved to @media (hover: hover) block below */
.daily-pick-img-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface2);
}

.daily-pick-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}

/* daily-pick img hover moved to @media (hover: hover) block below */
.daily-pick-body {
  padding: var(--sp-3);
}

.daily-pick-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.daily-pick-price {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--accent);
}

/* ── Brands section ────────────────────────────────────────── */
.brands-section {
  background: var(--surface);
}

.brands-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  align-items: center;
}

.brand-chip {
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--secondary);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}

.brand-chip:hover,
.brand-chip.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* ── Offers banner ─────────────────────────────────────────── */
.offers-section {
  background: var(--accent);
  color: var(--white);
  padding: var(--sp-12) 0;
}

.offers-inner {
  text-align: center;
  padding: 0 var(--sp-4);
}

.offers-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.offers-desc {
  color: rgba(255, 255, 255, .85);
  margin-bottom: var(--sp-6);
  font-size: var(--text-sm);
}

.offers-badge {
  display: inline-block;
  background: var(--white);
  color: var(--accent-dk);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: .02em;
  margin-bottom: var(--sp-5);
}

/* ── About mini section ────────────────────────────────────── */
.about-mini {
  background: var(--primary);
  color: var(--white);
}

.about-mini-inner {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

.about-mini-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}

.about-mini-title em {
  font-style: italic;
  color: var(--accent);
}

.about-mini-desc {
  color: rgba(255, 255, 255, .7);
  font-size: var(--text-base);
  line-height: 1.8;
}

.about-mini-desc+.about-mini-desc {
  margin-top: var(--sp-3);
}

.values-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.value-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.value-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.value-text {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .75);
}

.value-text strong {
  color: var(--white);
  font-weight: 700;
}

/* ── Testimonials ──────────────────────────────────────────── */
.testimonials {
  background: var(--bg);
}

.testimonials-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  /* single col on mobile */
}

.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  color: #F59E0B;
}

.testimonial-text {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--secondary);
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface2);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
}

.testimonial-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--primary);
}

.testimonial-product {
  font-size: var(--text-xs);
  color: var(--secondary);
}

/* ── WhatsApp CTA section ──────────────────────────────────── */
.wa-section {
  background: var(--surface2);
}

.wa-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-2);
}

.wa-icon {
  width: 64px;
  height: 64px;
  background: #25D366;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  font-weight: 700;
}

.wa-desc {
  color: var(--secondary);
  max-width: 44ch;
  font-size: var(--text-sm);
}

.wa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  width: 100%;
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  background: var(--dark);
  color: rgba(255, 255, 255, .7);
  padding: var(--sp-12) 0 var(--sp-8);
}

.footer-grid {
  display: grid;
  gap: var(--sp-8);
}

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

.footer-logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--white);
}

.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .5);
  line-height: 1.6;
}

.footer-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin-bottom: var(--sp-4);
}

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

.footer-links a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .6);
  transition: color var(--dur) var(--ease);
}

.footer-links a:hover {
  color: var(--white);
}

.social-links {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.social-link {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .6);
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}

.social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.footer-bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .35);
}

/* ── Shop page ─────────────────────────────────────────────── */
.shop-hero {
  background: var(--primary);
  color: var(--white);
  padding: var(--sp-8) 0;
}

.shop-hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-5xl));
  font-weight: 700;
}

.shop-hero-sub {
  color: rgba(255, 255, 255, .6);
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
}

/* ── Category switcher: Shoes / Leather Goods toggle ─────────
   Used on shop.html (dark hero) and leather.html (light section) */
.category-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-full);
  margin-top: var(--sp-5);
}

.category-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, .65);
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
}

.category-switch-btn:hover {
  color: var(--white);
  background: rgba(255, 255, 255, .08);
}

.category-switch-btn.active {
  background: var(--white);
  color: var(--primary);
}

/* Light-background context override (e.g. leather.html shop section) */
.leather-shop-section .category-switcher {
  background: var(--surface2);
  border-color: var(--border);
}

.leather-shop-section .category-switch-btn {
  color: var(--secondary);
}

.leather-shop-section .category-switch-btn:hover {
  color: var(--primary);
  background: var(--surface);
}

.leather-shop-section .category-switch-btn.active {
  background: var(--leather-bg);
  color: var(--white);
}

.shop-layout {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
}

.shop-filters-panel {
  display: none;
  /* hidden on mobile — mobile drawer (.filter-overlay) handles filters */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  height: fit-content;
  position: sticky;
  top: 72px;
}

.filter-section {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: var(--sp-3);
  display: block;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.filter-chip {
  padding: var(--sp-1) var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--secondary);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  background: transparent;
  white-space: nowrap;
}

.filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-chip.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.price-range-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.price-range-inputs {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.price-range-input {
  flex: 1;
  min-width: 0;
  /* allow shrink */
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--bg);
  color: var(--primary);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}

.price-range-input:focus {
  border-color: var(--accent);
}

.shop-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.shop-result-count {
  font-size: var(--text-sm);
  color: var(--secondary);
}

.sort-select {
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur) var(--ease);
  max-width: 100%;
}

.sort-select:focus {
  border-color: var(--accent);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-3);
}

.active-filter-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  background: var(--accent);
  color: var(--white);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.active-filter-chip button {
  color: rgba(255, 255, 255, .8);
  display: flex;
  flex-shrink: 0;
}

.shop-search-wrap {
  position: relative;
  margin-bottom: var(--sp-3);
}

.shop-search {
  width: 100%;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 2.6rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  background: var(--bg);
  color: var(--primary);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.shop-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(181, 138, 90, .12);
}

.shop-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--secondary);
  pointer-events: none;
}

.filter-mobile-btn {
  display: flex;
}

/* ── Product detail ────────────────────────────────────────── */
.product-detail {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-20);
}

.product-detail-grid {
  display: grid;
  gap: var(--sp-6);
}

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
}

/* ── Zoom effect on desktop hover ─────────────────────────── */
.gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 180ms ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-main:hover .gallery-main-img {
    transform: scale(1.08);
  }
}

/* On touch devices, use lightbox (handled via JS click), no hover zoom */
@media (hover: none) {
  .gallery-main {
    cursor: pointer;
  }
}

/* Badges overlay on product detail gallery image */
.product-detail-badges {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}

.product-detail-badges .badge {
  font-size: var(--text-xs);
  padding: 4px 10px;
}

.gallery-thumbs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 4px;
}

.gallery-thumbs::-webkit-scrollbar {
  height: 4px;
}

.gallery-thumbs::-webkit-scrollbar-track {
  background: var(--border);
  border-radius: 2px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 2px;
}

.gallery-thumb {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
  flex-shrink: 0;
  background: var(--surface2);
}

.gallery-thumb.active {
  border-color: var(--accent);
}

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

.product-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.product-detail-brand {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.product-detail-name {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  font-weight: 700;
  line-height: 1.15;
}

.product-detail-prices {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.product-detail-sale {
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  font-weight: 800;
  color: var(--primary);
}

.product-detail-old {
  font-size: var(--text-base);
  text-decoration: line-through;
  color: var(--secondary);
}

.product-detail-discount {
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--sale);
  color: var(--white);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

.selector-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selector-label span {
  font-weight: 400;
  color: var(--secondary);
}

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.color-btn {
  padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--secondary);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  background: var(--surface);
  white-space: nowrap;
}

.color-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.color-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--surface2);
  font-weight: 700;
}

.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.size-btn {
  min-width: 44px;
  height: auto;
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--secondary);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  text-align: center;
  line-height: 1.4;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.size-btn.active {
  border-color: var(--primary);
  color: var(--white);
  background: var(--primary);
}

.size-btn.unavailable {
  opacity: .4;
  cursor: not-allowed;
  position: relative;
}

.size-btn.unavailable::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
}

.stock-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
}

.stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stock-dot.in {
  background: var(--success);
}

.stock-dot.low {
  background: #D97706;
}

.stock-dot.out {
  background: #9CA3AF;
}

.delivery-info {
  background: var(--surface2);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--secondary);
}

.delivery-info svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.product-description {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--secondary);
}

.product-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.product-actions .btn {
  font-size: var(--text-sm);
}

.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  gap: var(--sp-3);
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(22, 22, 22, .1);
}

.sticky-cta-bar .btn {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
}

/* ── Order inquiry form ────────────────────────────────────── */
.order-form-section {
  background: var(--surface2);
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  margin-top: var(--sp-6);
}

.order-form-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}

.form-grid {
  display: grid;
  gap: var(--sp-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
}

.form-input,
.form-textarea,
.form-select {
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--surface);
  color: var(--primary);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(181, 138, 90, .12);
}

.form-textarea {
  resize: vertical;
  min-height: 90px;
}

.form-error {
  font-size: var(--text-xs);
  color: var(--sale);
  display: none;
}

.form-field.error .form-input,
.form-field.error .form-textarea {
  border-color: var(--sale);
}

.form-field.error .form-error {
  display: block;
}

.hp-field {
  display: none !important;
  visibility: hidden !important;
}

.success-message {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  text-align: center;
  display: none;
  gap: var(--sp-3);
  flex-direction: column;
  align-items: center;
}

.success-message.show {
  display: flex;
}

.success-icon {
  width: 48px;
  height: 48px;
  background: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Related products ──────────────────────────────────────── */
.related-section {
  padding: var(--sp-10) 0;
}

/* ── About page ────────────────────────────────────────────── */
.about-hero {
  background: var(--primary);
  color: var(--white);
  padding: var(--sp-12) 0;
  text-align: center;
}

.about-hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 6vw, var(--text-5xl));
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--sp-4);
}

.about-hero-sub {
  color: rgba(255, 255, 255, .65);
  font-size: var(--text-base);
  max-width: 56ch;
  margin: 0 auto;
  padding: 0 var(--sp-2);
}

/* Breadcrumb sitting on a dark hero (e.g. terms.html) needs light text */
.about-hero .breadcrumb {
  justify-content: center;
  color: rgba(255, 255, 255, .5);
  margin-bottom: var(--sp-3);
}

.about-hero .breadcrumb a {
  color: rgba(255, 255, 255, .6);
}

.about-hero .breadcrumb a:hover {
  color: var(--white);
}

.about-hero .breadcrumb-sep {
  color: rgba(255, 255, 255, .3);
}

.about-hero .breadcrumb [aria-current="page"] {
  color: rgba(255, 255, 255, .85);
}

.legal-updated {
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .4);
}

/* ── Terms & Conditions page content ─────────────────────────── */
.legal-section {
  background: var(--surface);
}

.legal-content {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.legal-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.legal-heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary);
}

.legal-block p {
  color: var(--secondary);
  line-height: 1.8;
  font-size: var(--text-base);
}

.legal-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-left: var(--sp-5);
  list-style: disc;
}

.legal-list li {
  color: var(--secondary);
  line-height: 1.75;
  font-size: var(--text-base);
}

.legal-list-plain {
  list-style: none;
  padding-left: 0;
  gap: var(--sp-2);
}

.legal-list-plain li::before {
  content: none;
}

.legal-list a {
  color: var(--accent-dk);
  font-weight: 600;
}

/* Strict exchange/return policy clause — visually distinct so it
   cannot be missed by customers */
.legal-block-highlight {
  background: #FEF9F0;
  border: 1.5px solid #F0DDBE;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

.legal-strict-notice {
  font-size: var(--text-lg) !important;
  color: var(--primary) !important;
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border-left: 3px solid var(--sale);
  border-radius: var(--radius-sm);
}

.about-story {
  padding: var(--sp-12) 0;
}

.about-story-grid {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

.about-story-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.about-story-img {
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* aspect-ratio: 4/3; */
  background: var(--surface2);
}

.about-story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Sub-brand story cards (Kicksy Nepal / Kicksy Leather) ──── */
.about-substory-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  margin-top: var(--sp-8);
}

.about-substory-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

.about-substory-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--sp-3);
}

.about-substory-card:nth-child(2) .about-substory-title {
  color: var(--leather-bg, var(--accent-dk));
}

.about-story-closing {
  margin-top: var(--sp-8);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  font-style: italic;
  color: var(--primary);
  line-height: 1.6;
  max-width: 70ch;
}

/* ── Founder signature ────────────────────────────────────── */
.about-signature-wrap {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.about-signature {
  font-size: var(--text-lg);
  color: var(--secondary);
}

.signature-name {
  font-family: 'Allura', cursive;
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--accent-dk);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 0 2px;
  transition: color 280ms var(--ease), transform 280ms var(--ease), text-shadow 280ms var(--ease);
}

.signature-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--ease);
  opacity: .5;
}

@media (hover: hover) and (pointer: fine) {
  .signature-name:hover {
    color: var(--primary);
    transform: translateY(-2px) rotate(-1.5deg) scale(1.05);
    text-shadow: 0 4px 14px rgba(140, 101, 64, .35);
  }

  .signature-name:hover::after {
    transform: scaleX(1);
  }
}

.signature-name:active {
  transform: translateY(0) scale(0.97);
  color: var(--leather-bg, var(--accent-dk));
}

/* ── Unified Mission section ─────────────────────────────── */
.mission-section {
  background: var(--primary);
}

.mission-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.mission-statement {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 3.4vw, var(--text-3xl));
  font-weight: 700;
  line-height: 1.4;
  color: var(--white);
  margin-top: var(--sp-3);
}

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

.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.value-icon {
  width: 44px;
  height: 44px;
  background: var(--surface2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.value-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--primary);
}

.value-desc {
  font-size: var(--text-sm);
  color: var(--secondary);
  line-height: 1.7;
}

/* Stats section on about page — see .stats-grid + .stat-item in additional component styles below */

/* How-to steps on about page */
.steps-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--sp-8);
}

.step-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Contact page ──────────────────────────────────────────── */
.contact-hero {
  background: var(--surface2);
  padding: var(--sp-8) 0;
}

.contact-grid {
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-6) 0;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.contact-info-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--surface2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.contact-info-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--secondary);
}

.contact-info-value {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--primary);
  word-break: break-word;
}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-section {
  padding: var(--sp-12) 0;
  background: var(--surface2);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--primary);
  text-align: left;
  gap: var(--sp-3);
}

.faq-q svg {
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.faq-item.open .faq-q svg {
  transform: rotate(180deg);
}

/* .faq-a base styles consolidated below in animations section */

/* ── 404 page ──────────────────────────────────────────────── */
.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
}

.error-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 20vw, 10rem);
  font-weight: 700;
  line-height: 1;
  color: var(--border);
}

.error-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.error-desc {
  color: var(--secondary);
  margin-bottom: var(--sp-6);
}

/* ── Toast ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  pointer-events: none;
  max-width: calc(100vw - 32px);
}

.toast {
  background: var(--dark);
  color: var(--white);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  transform: translateX(120%);
  transition: transform 320ms var(--ease), opacity 320ms var(--ease);
  max-width: 300px;
  pointer-events: auto;
  word-break: break-word;
}

.toast.show {
  transform: translateX(0);
}

.toast.success {
  border-left: 3px solid var(--success);
}

.toast.error {
  border-left: 3px solid var(--sale);
}

/* ── Loading ───────────────────────────────────────────────── */
.page-loading {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.page-loading.done {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

/* ── Empty state ───────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.empty-icon {
  font-size: 2.5rem;
}

.empty-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
}

.empty-desc {
  color: var(--secondary);
  max-width: 40ch;
  font-size: var(--text-sm);
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--secondary);
  padding: var(--sp-3) 0;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--secondary);
  transition: color var(--dur) var(--ease);
}

.breadcrumb a:hover {
  color: var(--primary);
}

.breadcrumb-sep {
  color: var(--border-dk);
}

/* ── Coupon banner ─────────────────────────────────────────── */
.coupon-banner {
  background: linear-gradient(135deg, #6A3E96, #B58A5A);
  color: var(--white);
  padding: var(--sp-3) var(--sp-10) var(--sp-3) 0;
  font-size: var(--text-xs);
  font-weight: 600;
  position: relative;
  overflow: hidden;
  animation: bannerSlideDown 400ms var(--ease) both;
}

.coupon-marquee {
  overflow: hidden;
  width: 100%;
}

.coupon-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  --marquee-distance: 0px;
  /* set at runtime in JS once text is measured */
  animation:
    couponMarqueeEnter 900ms var(--ease) both,
    couponMarquee 22s linear 900ms infinite;
  will-change: transform;
}

.coupon-banner:hover .coupon-track,
.coupon-banner:focus-within .coupon-track {
  animation-play-state: paused;
}

.coupon-text {
  display: inline-block;
  padding-right: var(--sp-10);
}

/* Travels exactly one copy's width (including its trailing padding)
   so the next repeated copy lines up pixel-perfectly where the
   previous one started — a truly seamless, gap-free loop regardless
   of offer text length or screen width. Distance is set by JS via
   the --marquee-distance custom property once the text is measured. */
@keyframes couponMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--marquee-distance)));
  }
}

/* One-time entrance: the track starts fully off-screen to the right,
   then slides in before the continuous marquee loop (couponMarquee)
   takes over seamlessly from translateX(0). Uses 100vw (viewport
   width) so it's always a true off-screen start regardless of how
   long the offer text is or how many repeated copies exist. */
@keyframes couponMarqueeEnter {
  from {
    transform: translateX(100vw);
  }

  to {
    transform: translateX(0);
  }
}

.coupon-banner a {
  color: var(--white);
  text-decoration: underline;
}

.coupon-close {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .7);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 4px;
  flex-shrink: 0;
  z-index: 1;
}

/* ── Image placeholders ────────────────────────────────────── */
.img-placeholder {
  background: linear-gradient(135deg, var(--surface2) 0%, var(--border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border-dk);
}

.img-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: .5;
}

/* ── Stars ─────────────────────────────────────────────────── */
.stars {
  display: inline-flex;
  gap: 2px;
}

.star {
  color: #F59E0B;
  font-size: .9em;
}

.star.empty {
  color: var(--border);
}

/* ── Filter overlay (mobile) ───────────────────────────────── */
.filter-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

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

.filter-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, .5);
}

.filter-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--sp-5) var(--sp-4);
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}

.filter-overlay.open .filter-drawer {
  transform: translateY(0);
}

.filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}

.filter-drawer-title {
  font-weight: 700;
  font-size: var(--text-lg);
}

/* ── Pagination ────────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  flex-wrap: wrap;
}

.page-btn {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--secondary);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.page-btn.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.page-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

/* ── 480px — small phones ────────────────────────────────── */
@media (min-width: 480px) {
  .hero-tag {
    font-size: 11px;
  }
}

/* ── 640px — large phones / small tablets ────────────────── */
@media (min-width: 640px) {
  .container {
    padding: 0 var(--sp-5);
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  .product-card-body {
    padding: var(--sp-4);
  }

  .product-name {
    font-size: var(--text-base);
  }

  .product-sale-price {
    font-size: var(--text-lg);
  }

  .product-card-cta {
    font-size: var(--text-sm);
  }

  .promise-divider {
    display: block;
  }

  .promise-item {
    font-size: var(--text-sm);
  }

  .promise-item svg {
    width: 18px;
    height: 18px;
  }

  .daily-picks-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero-scroll-cue {
    display: flex;
  }
}

/* ── 768px — tablets ─────────────────────────────────────── */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--sp-6);
  }

  .section {
    padding: var(--sp-16) 0;
  }

  /* Hero: switch from mobile full-bleed image to side-by-side layout */
  .hero {
    min-height: min(85vh, 700px);
    display: flex;
    align-items: center;
  }

  .hero-mobile-img,
  .hero-mobile-img-fade {
    display: none;
  }

  .hero-content {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-16);
  }

  .hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .hero-img-wrap {
    display: flex;
  }

  .hero-tag {
    font-size: var(--text-xs);
    padding: 6px 16px;
  }

  .hero-desc {
    font-size: var(--text-base);
    max-width: 46ch;
  }

  .hero-title em {
    display: inline;
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero-actions .btn,
  .hero-actions .btn-ghost-hero {
    width: auto;
  }

  .hero-scroll-cue {
    display: flex;
  }

  /* Promise strip: single row on tablet+ */
  .promise-items {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
  }

  .promise-item {
    background: transparent;
    padding: var(--sp-2) 0;
    font-size: var(--text-sm);
  }

  .promise-item svg {
    width: 18px;
    height: 18px;
  }

  .promise-divider {
    display: block;
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, .1);
  }

  .about-mini-inner {
    grid-template-columns: 1fr 1fr;
  }

  .about-story-grid {
    grid-template-columns: 1fr 1fr;
  }

  .about-substory-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid .full-width {
    grid-column: 1 / -1;
  }

  .product-detail-grid {
    grid-template-columns: 1fr 1fr;
  }

  .daily-picks-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .header-wa-btn {
    display: flex;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 1024px — desktop ────────────────────────────────────── */
@media (min-width: 1024px) {
  .container {
    padding: 0 var(--sp-8);
  }

  .site-nav {
    display: flex;
  }

  .hamburger-btn {
    display: none;
  }

  .shop-layout {
    grid-template-columns: 260px 1fr;
  }

  .shop-filters-panel {
    display: block;
  }

  .filter-mobile-btn {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .sticky-cta-bar {
    display: none;
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── 1280px — wide desktop ───────────────────────────────── */
@media (min-width: 1280px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Animations ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

.fade-in {
  animation: fadeIn .5s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════
   ADDITIONAL COMPONENT STYLES (v2 additions)
   ════════════════════════════════════════════════════════════ */

/* ── About page: stats section ──────────────────────────────── */
.about-stats-section {
  background: var(--primary);
  padding: var(--sp-12) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.stat-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .55);
  margin-top: 4px;
}

/* ── About page: how-to-order section ───────────────────────── */
.how-section {
  background: var(--surface2);
}

.step-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--primary);
}

.step-desc {
  font-size: var(--text-sm);
  color: var(--secondary);
}

/* ── About mini: image wrapper ───────────────────────────────── */
.about-mini-img-wrap {
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about-mini-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  /* aspect-ratio: 4/3; */
  object-fit: cover;
}

/* ── Contact page: WA card ─────────────────────────────────── */
.wa-contact-card {
  margin-top: var(--sp-5);
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.wa-contact-card-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: #065F46;
  margin-bottom: var(--sp-2);
}

.wa-contact-card-desc {
  font-size: var(--text-sm);
  color: #047857;
  margin-bottom: var(--sp-4);
}

/* ── Section header flex row (best sellers) ─────────────────── */
.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

/* ── Responsive extras ──────────────────────────────────────── */
@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .about-mini-img-wrap {
    display: flex;
  }
}

/* ── Utility: form submit wrapper ────────────────────────────── */
.form-submit-wrap {
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.form-submit-wrap p {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--secondary);
}

/* ── Utility: social section ────────────────────────────────── */
.social-section {
  margin-top: var(--sp-5);
}

.social-section .footer-heading {
  color: var(--secondary);
}

/* ── Shop: mobile filter row ────────────────────────────────── */
.mobile-filter-row {
  padding: var(--sp-4) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

.mobile-filter-row .sort-select {
  max-width: 55%;
}

/* ── Utility: text hint below inputs ────────────────────────── */
.form-hint {
  font-size: var(--text-xs);
  color: var(--secondary);
  margin-top: var(--sp-1);
}

/* ── Product page: about-mini image hidden on mobile, shown md+ */
@media (max-width: 767px) {
  .about-mini-img-wrap {
    display: none;
  }
}

/* ── Filter drawer action buttons ──────────────────────────── */
.filter-actions-row {
  margin-top: var(--sp-5);
  display: flex;
  gap: var(--sp-3);
}

.filter-action-btn {
  flex: 1;
}

/* ── Badge size: tighter on mobile cards ──────────────────── */
.product-card-badges .badge {
  font-size: 9px;
  padding: 2px 6px;
  line-height: 1.4;
}

/* ── Card hover effects: only on mouse devices ────────────── */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
  }

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

  .daily-pick-card:hover .daily-pick-img {
    transform: scale(1.05);
  }
}

/* Remove hover transforms on touch to prevent stuck states */
@media (hover: none) {

  .product-card:hover,
  .daily-pick-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE PADDING & SPACING FIXES
   Ensure no content ever touches screen edges on small screens
   ════════════════════════════════════════════════════════════ */

/* ── Mobile nav: close button in top-right corner ───────────── */
.mobile-nav-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  z-index: 10;
}

/* ── Shop page: ensure inner content has breathing room ─────── */
@media (max-width: 1023px) {

  /* Products grid inside shop-layout needs horizontal room */
  .shop-layout>div {
    min-width: 0;
  }

  /* Filter mobile row: don't let sort select overflow */
  .mobile-filter-row {
    padding: var(--sp-3) 0;
    gap: var(--sp-2);
  }

  .mobile-filter-row .sort-select {
    flex: 1;
    min-width: 0;
    max-width: 55%;
    font-size: var(--text-xs);
    padding: var(--sp-2) var(--sp-2);
  }

  .mobile-filter-row .btn {
    flex-shrink: 0;
    font-size: var(--text-xs);
    padding: var(--sp-2) var(--sp-3);
  }
}

/* ── Product detail: ensure container provides side padding ─── */
@media (max-width: 767px) {

  /* product-detail + container on same div — ensure padding applies */
  .product-detail.container {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  /* Order form section: comfortable mobile padding */
  .order-form-section {
    padding: var(--sp-4) var(--sp-3);
    border-radius: var(--radius-md);
    margin-top: var(--sp-4);
  }

  /* Product gallery thumbs: smaller on mobile */
  .gallery-thumb {
    width: 54px;
    height: 54px;
    min-width: 54px;
  }

  /* Size buttons: slightly more compact on mobile, width still dynamic */
  .size-btn {
    min-width: 38px;
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--text-xs);
  }

  /* Product actions buttons: full width stack on mobile */
  .product-actions {
    gap: var(--sp-2);
  }

  .product-actions .btn {
    font-size: var(--text-sm);
    padding: var(--sp-3) var(--sp-4);
  }

  /* Shop hero: comfortable padding */
  .shop-hero {
    padding: var(--sp-6) 0;
  }

  .shop-hero-title {
    font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl));
  }

  /* Breadcrumb: tight on mobile */
  .breadcrumb {
    font-size: var(--text-xs);
    padding: var(--sp-2) 0;
    gap: var(--sp-1);
  }

  /* Related section spacing */
  .related-section {
    padding: var(--sp-8) 0;
  }

  /* FAQ padding */
  .faq-q {
    padding: var(--sp-3) var(--sp-3);
    font-size: var(--text-xs);
  }

  .faq-a {
    padding: 0 var(--sp-3);
    font-size: var(--text-xs);
  }

  .faq-item.open .faq-a {
    padding: 0 var(--sp-3) var(--sp-3);
  }

  /* Contact grid: add breathing room */
  .contact-grid {
    padding: var(--sp-4) 0;
  }

  /* Contact info items: tighter gap */
  .contact-info {
    gap: var(--sp-3);
  }
}

/* ── Ensure sticky CTA bar clears safe area on iPhone ───────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sticky-cta-bar {
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  }
}

/* ════════════════════════════════════════════════════════════
   SITE-WIDE ANIMATIONS — modern, clean, lightweight
   ════════════════════════════════════════════════════════════ */

/* ── Global smooth transitions for interactive elements ─────── */
a,
button,
.btn,
.product-card,
.daily-pick-card,
.brand-chip,
.filter-chip,
.color-btn,
.size-btn,
.gallery-thumb,
.faq-item,
.value-card,
.testimonial-card,
.header-icon-btn,
.social-link,
.page-btn,
input,
textarea,
select {
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

/* ── Button press feedback (all devices) ─────────────────────── */
.btn:active,
.btn-ghost-hero:active,
.brand-chip:active,
.filter-chip:active,
.color-btn:active,
.size-btn:active,
.page-btn:active,
.header-icon-btn:active,
.social-link:active {
  transform: scale(0.96);
}

/* Small "L" badge distinguishing Kicksy Leather social accounts
   from the main Kicksy Nepal (shoes) accounts in the footer */
.social-link-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  background: var(--leather-accent, var(--accent));
  color: var(--leather-bg, #2B1B12);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  border: 1.5px solid var(--primary);
}

.footer-social-note {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .4);
}

/* ── Hover lift for interactive cards (mouse only) ───────────── */
@media (hover: hover) and (pointer: fine) {

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

  .brand-chip:hover {
    transform: translateY(-2px);
  }

  .social-link:hover {
    transform: translateY(-2px);
  }

  .faq-q:hover {
    color: var(--accent);
  }

  .gallery-thumb:hover {
    border-color: var(--accent);
    transform: scale(1.04);
  }

  .color-btn:hover,
  .size-btn:not(.unavailable):hover {
    transform: translateY(-1px);
  }

  .footer-links a:hover {
    padding-left: 2px;
  }

  .section-link svg {
    transition: transform var(--dur) var(--ease);
  }

  .section-link:hover svg {
    transform: translateX(3px);
  }
}

/* ── Logo hover ──────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .site-logo {
    transition: opacity var(--dur) var(--ease);
  }

  .site-logo:hover {
    opacity: .75;
  }
}

/* ── Scroll-reveal animation (applied via JS on intersection) ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger>* {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

.reveal-stagger.in-view>* {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.in-view>*:nth-child(1) {
  transition-delay: 0ms;
}

.reveal-stagger.in-view>*:nth-child(2) {
  transition-delay: 60ms;
}

.reveal-stagger.in-view>*:nth-child(3) {
  transition-delay: 120ms;
}

.reveal-stagger.in-view>*:nth-child(4) {
  transition-delay: 180ms;
}

.reveal-stagger.in-view>*:nth-child(5) {
  transition-delay: 240ms;
}

.reveal-stagger.in-view>*:nth-child(6) {
  transition-delay: 300ms;
}

.reveal-stagger.in-view>*:nth-child(7) {
  transition-delay: 360ms;
}

.reveal-stagger.in-view>*:nth-child(8) {
  transition-delay: 420ms;
}

/* ── Hero entrance animation ─────────────────────────────────── */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-mobile-img {
  animation: heroFadeUp 700ms var(--ease) both;
}

.hero-tag {
  animation: heroFadeUp 600ms var(--ease) 80ms both;
}

.hero-title {
  animation: heroFadeUp 650ms var(--ease) 140ms both;
}

.hero-desc {
  animation: heroFadeUp 650ms var(--ease) 200ms both;
}

.hero-actions {
  animation: heroFadeUp 650ms var(--ease) 260ms both;
}

.hero-img-wrap {
  animation: heroFadeUp 700ms var(--ease) 180ms both;
}

/* Leather hero entrance */
.leather-hero-img {
  animation: heroFadeUp 700ms var(--ease) both;
}

.leather-hero-tag {
  animation: heroFadeUp 600ms var(--ease) 80ms both;
}

.leather-hero-title {
  animation: heroFadeUp 650ms var(--ease) 140ms both;
}

.leather-hero-desc {
  animation: heroFadeUp 650ms var(--ease) 200ms both;
}

.leather-hero-actions {
  animation: heroFadeUp 650ms var(--ease) 260ms both;
}

.leather-hero-visual {
  animation: heroFadeUp 700ms var(--ease) 180ms both;
}

/* ── Page transition fade-in ──────────────────────────────────── */
@keyframes pageFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

body {
  animation: pageFadeIn 320ms ease both;
}

/* ── Mobile nav drawer link stagger ───────────────────────────── */
.mobile-nav.open .mobile-nav-links a {
  animation: heroFadeUp 350ms var(--ease) both;
}

.mobile-nav.open .mobile-nav-links a:nth-child(1) {
  animation-delay: 60ms;
}

.mobile-nav.open .mobile-nav-links a:nth-child(2) {
  animation-delay: 110ms;
}

.mobile-nav.open .mobile-nav-links a:nth-child(3) {
  animation-delay: 160ms;
}

.mobile-nav.open .mobile-nav-links a:nth-child(4) {
  animation-delay: 210ms;
}

/* .toast transition refined in base rule above */

/* ── Skeleton shimmer already exists — keep as is ─────────────── */

/* ── Active nav link underline animation (already has ::after) ─ */

/* .search-box animation merged into base rule above */

/* ── Filter drawer / mobile nav already animate via transform ──── */

/* ── FAQ answer smooth expand ─────────────────────────────────── */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  padding: 0 var(--sp-4);
  overflow: hidden;
  transition: grid-template-rows 320ms var(--ease), opacity 280ms var(--ease), padding 320ms var(--ease);
}

.faq-a>* {
  overflow: hidden;
  min-height: 0;
  margin: 0;
}

.faq-a p {
  color: var(--secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.faq-item.open .faq-a {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 0 var(--sp-4) var(--sp-4);
}

/* ── Coupon banner slide-down on load (keyframes; applied in base rule) ─ */
@keyframes bannerSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── Reduced motion: disable all of the above ─────────────────── */
@media (prefers-reduced-motion: reduce) {

  .hero-mobile-img,
  .hero-tag,
  .hero-title,
  .hero-desc,
  .hero-actions,
  .hero-img-wrap,
  .leather-hero-img,
  .leather-hero-tag,
  .leather-hero-title,
  .leather-hero-desc,
  .leather-hero-actions,
  .leather-hero-visual,
  body,
  .mobile-nav.open .mobile-nav-links a,
  .coupon-banner,
  .coupon-track {
    animation: none !important;
  }

  /* Pause the hero video for users who prefer reduced motion.
     The poster image on the <video> element shows as a static
     frame instead. */
  .hero-video {
    animation-play-state: paused !important;
  }

  .hero-video-wrap .hero-video {
    animation: none;
  }

  .coupon-text:not(:first-child) {
    display: none;
  }

  /* with reduced motion, show only one static copy — the track may now contain many repeated copies (dynamically sized to the screen), not just two */
  .reveal,
  .reveal-stagger>* {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   QUALITY & SOURCING SECTION (About page)
   ════════════════════════════════════════════════════════════ */
.quality-section {
  background: var(--surface2);
}

.quality-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  margin-top: var(--sp-4);
}

.quality-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
}

.quality-card-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--success);
  color: var(--white);
}

.quality-card-badge-alt {
  background: var(--accent);
}

.quality-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary);
}

.quality-card-desc {
  font-size: var(--text-sm);
  color: var(--secondary);
  line-height: 1.7;
}

.quality-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.quality-list li {
  font-size: var(--text-sm);
  color: var(--primary);
  padding-left: var(--sp-5);
  position: relative;
}

.quality-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

.quality-note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--secondary);
  margin-top: var(--sp-6);
}

.quality-note a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .quality-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Product page: quality/sourcing info box ────────────────── */
.quality-info-box {
  background: #FEF9F0;
  border: 1px solid #F0DDBE;
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--secondary);
  line-height: 1.6;
}

.quality-info-box svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.quality-info-box strong {
  color: var(--primary);
}

.quality-info-box a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════
   LEATHER GOODS PAGE
   Warm cognac/tan palette layered onto the base design system
   ════════════════════════════════════════════════════════════ */

:root {
  --leather-bg: #2B1B12;
  --leather-bg2: #3D2817;
  --leather-accent: #C8935A;
  --leather-light: #E8D5C0;
  --leather-stitch: rgba(232, 213, 192, .25);
}

/* ── Leather hero ──────────────────────────────────────────── */
.leather-hero {
  position: relative;
  background: var(--leather-bg);
  color: var(--leather-light);
  overflow: hidden;
  width: 100%;
}

.leather-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #2B1B12 0%, #4A3220 55%, #2B1B12 100%);
}

.leather-hero-texture {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
  opacity: .5;
  pointer-events: none;
}

.leather-hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.leather-hero-img-fade {
  display: block;
  position: relative;
  z-index: 1;
  height: 49px;
  margin-top: -48px;
  background: linear-gradient(to bottom, transparent, var(--leather-bg));
  pointer-events: none;
}

.leather-hero-content {
  position: relative;
  z-index: 2;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-6);
  width: 100%;
}

.leather-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 12px;
  border: 1px solid rgba(200, 147, 90, .5);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leather-accent);
  background: rgba(200, 147, 90, .08);
}

.leather-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 10vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--leather-light);
  margin-top: var(--sp-4);
}

.leather-hero-title em {
  font-style: italic;
  color: var(--leather-accent);
  display: block;
}

.leather-hero-desc {
  color: rgba(232, 213, 192, .65);
  font-size: var(--text-xs);
  line-height: 1.65;
  max-width: 38ch;
  margin-top: var(--sp-3);
}

.leather-hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.leather-hero-actions .btn {
  width: 100%;
  justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
}

.btn-leather {
  background: var(--leather-accent);
  color: var(--leather-bg);
  border-color: var(--leather-accent);
}

.btn-leather:hover {
  background: #DCAA75;
}

.btn-ghost-leather {
  background: rgba(232, 213, 192, .08);
  color: var(--leather-light);
  border: 1.5px solid rgba(232, 213, 192, .2);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--dur) var(--ease);
  width: 100%;
}

.btn-ghost-leather:hover {
  background: rgba(232, 213, 192, .14);
}

/* ── Category showcase ─────────────────────────────────────── */
/* Leather categories section — tighter padding than the generic
   .section rule since it sits immediately below the hero and directly
   above the product grid: no need for full section-sized breathing room
   on both sides, just enough to separate it visually. */
.leather-categories {
  background: var(--bg);
  padding: var(--sp-8) 0 var(--sp-6);
}

.leather-categories .section-header {
  margin-bottom: var(--sp-5);
}

.leather-categories .section-title {
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
}

.leather-categories .section-sub {
  font-size: var(--text-sm);
  margin-top: var(--sp-2);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

/* Text-only category pill — no image required, name shown exactly
   as received from the backend (Products/LeatherProducts sheet) */
.category-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  background: var(--surface);
  padding: var(--sp-4) var(--sp-3);
  min-height: 64px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.category-card-label {
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: .02em;
}

.category-card.active {
  background: var(--leather-bg);
  border-color: var(--leather-bg);
}

.category-card.active .category-card-label {
  color: var(--leather-light);
}

@media (hover: hover) and (pointer: fine) {
  .category-card:hover {
    border-color: var(--leather-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }

  .category-card.active:hover {
    border-color: var(--leather-bg2);
  }
}

/* ── Leather product card price accent ────────────────────── */
.leather-section .product-sale-price {
  color: var(--leather-bg);
}

.leather-section .product-brand {
  color: var(--leather-accent);
}

.leather-section .product-card-cta.btn-primary {
  background: var(--leather-bg);
  border-color: var(--leather-bg);
}

.leather-section .product-card-cta.btn-primary:hover {
  background: var(--leather-bg2);
}

.leather-section .product-card-cta.btn-preorder {
  color: var(--leather-bg);
  border-color: var(--leather-bg);
}

.leather-section .product-card-cta.btn-preorder:hover {
  background: var(--leather-bg);
  color: var(--white);
}

/* ── Craftsmanship / material story section ────────────────── */
.craft-section {
  background: var(--leather-bg);
  color: var(--leather-light);
}

.craft-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

.craft-card {
  background: rgba(232, 213, 192, .05);
  border: 1px solid rgba(232, 213, 192, .12);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.craft-icon {
  width: 44px;
  height: 44px;
  background: rgba(200, 147, 90, .15);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--leather-accent);
  flex-shrink: 0;
}

.craft-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--leather-light);
}

.craft-desc {
  font-size: var(--text-sm);
  color: rgba(232, 213, 192, .6);
  line-height: 1.7;
}

/* ── Leather shop layout (filters + grid) ───────────────────── */
.leather-shop-section {
  background: var(--bg);
  padding: var(--sp-4) 0 var(--sp-12);
}

.leather-shop-section .section-header {
  margin-bottom: var(--sp-4) !important;
}

.leather-shop-section .section-title {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
}

.leather-filter-chip.active {
  background: var(--leather-bg);
  border-color: var(--leather-bg);
  color: var(--white);
}

.leather-filter-chip:hover {
  border-color: var(--leather-accent);
  color: var(--leather-accent);
}

/* ── Care guide / FAQ accent for leather page ───────────────── */
.care-section {
  background: var(--surface2);
}

.care-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 720px;
  margin: 0 auto;
}

.care-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}

.care-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: rgba(200, 147, 90, .12);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--leather-accent);
}

.care-text {
  font-size: var(--text-sm);
  color: var(--secondary);
  line-height: 1.7;
}

.care-text strong {
  color: var(--primary);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (min-width: 480px) {
  .leather-hero-tag {
    font-size: 11px;
  }
}

.leather-hero-visual {
  padding-top: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: var(--radius-xl);
}

.leather-hero-visual img {
  width: 100%;
  max-width: width 440px;
  ;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  /* aspect-ratio: 4/3; */
}

@media (min-width: 768px) {
  .leather-hero {
    min-height: min(80vh, 640px);
    display: flex;
    align-items: center;
  }

  .leather-hero-img,
  .leather-hero-img-fade {
    display: none;
  }

  .leather-hero-content {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-16);
  }

  .leather-hero-inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: var(--sp-8);
    align-items: center;
  }

  .leather-hero-title {
    font-size: clamp(3rem, 6vw, 4.5rem);
    margin-top: var(--sp-5);
  }

  .leather-hero-title em {
    display: inline;
  }

  .leather-hero-desc {
    font-size: var(--text-base);
    max-width: 44ch;
    margin-top: var(--sp-4);
  }

  .leather-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: var(--sp-6);
  }

  .leather-hero-actions .btn,
  .leather-hero-actions .btn-ghost-leather {
    width: auto;
  }

  .leather-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: var(--radius-xl);
  }

  .leather-hero-visual img {
    width: 100%;
    max-width: width 440px;
    ;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
    /* aspect-ratio: 4/3; */
  }

  .leather-hero-glow {
    position: absolute;
    width: min(280px, 50vw);
    height: min(280px, 50vw);
    background: radial-gradient(circle, rgba(200, 147, 90, .25) 0%, transparent 70%);
    border-radius: 50%;
  }

  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .craft-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE: LEATHER GOODS PROMO BANNER
   ════════════════════════════════════════════════════════════ */
.leather-promo {
  background: var(--leather-bg);
  color: var(--leather-light);
  padding: var(--sp-10) 0;
  overflow: hidden;
}

.leather-promo-inner {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.leather-promo-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leather-accent);
  margin-bottom: var(--sp-2);
}

.leather-promo-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--leather-light);
  margin-bottom: var(--sp-3);
}

.leather-promo-title em {
  font-style: italic;
  color: var(--leather-accent);
}

.leather-promo-desc {
  font-size: var(--text-sm);
  color: rgba(232, 213, 192, .65);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
  max-width: 46ch;
}

.leather-promo-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  align-items: center;
}

.leather-promo-images img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .leather-promo-inner {
    grid-template-columns: 1.1fr .9fr;
    gap: var(--sp-10);
  }

  .leather-promo-title {
    font-size: clamp(2rem, 4vw, 2.8rem);
  }

  .leather-promo-desc {
    font-size: var(--text-base);
  }
}

/* ════════════════════════════════════════════════════════════
   IMAGE LIGHTBOX (mobile tap-to-zoom on product detail page)
   ════════════════════════════════════════════════════════════ */
.img-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 15, 15, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease);
}

.img-lightbox-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.img-lightbox-img {
  max-width: 100%;
  max-height: 90svh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: scale(0.96);
  transition: transform 300ms var(--ease);
}

.img-lightbox-overlay.open .img-lightbox-img {
  transform: scale(1);
}

.img-lightbox-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  border: none;
}

.img-lightbox-close:hover {
  background: rgba(255, 255, 255, .22);
}

/* ════════════════════════════════════════════════════════════
   MARQUEE — mobile font size fix
   The banner base font-size (var(--text-xs)) already looks fine
   on desktop. On mobile it renders slightly larger relative to
   the narrower viewport, so we reduce it one step further on
   small screens and restore it from 768px up.
   ════════════════════════════════════════════════════════════ */
.coupon-text {
  font-size: 10px;
  /* slightly smaller than --text-xs on mobile */
}

@media (min-width: 768px) {
  .coupon-text {
    font-size: var(--text-xs);
    /* restore to normal on desktop/tablet */
  }
}


/* ════════════════════════════════════════════════════════════
   PAGE LOADER — context-aware transition overlay
   Injected and controlled by assets/js/loader.js
   ════════════════════════════════════════════════════════════ */

#kicksyPageLoader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background: var(--kpl-bg, #0d0d0d);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

#kicksyPageLoader.kpl-visible {
  opacity: 1;
  pointer-events: auto;
}

#kicksyPageLoader.kpl-hiding {
  opacity: 0;
  pointer-events: none;
}

.kpl-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.kpl-icon-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpl-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--kpl-accent, #B58A5A);
  border-right-color: var(--kpl-ring, rgba(181, 138, 90, 0.3));
  animation: kplSpin 1.1s linear infinite;
}

.kpl-ring::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-bottom-color: var(--kpl-accent, #B58A5A);
  opacity: 0.45;
  animation: kplSpin 1.8s linear infinite reverse;
}

.kpl-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  color: var(--kpl-accent, #B58A5A);
  animation: kplPulse 2s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpl-icon svg {
  width: 100%;
  height: 100%;
}

.kpl-icon img.kpl-favicon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

#kicksyPageLoader[data-context="brand"] .kpl-icon {
  width: 44px;
}

.kpl-label {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  animation: kplFade 1.6s ease-in-out infinite alternate;
}

.kpl-bar-wrap {
  width: 120px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  overflow: hidden;
}

.kpl-bar {
  height: 100%;
  width: 0%;
  background: var(--kpl-accent, #B58A5A);
  border-radius: 1px;
  animation: kplProgress 1.4s ease-in-out infinite;
}

@keyframes kplSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes kplPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.92);
    opacity: 0.75;
  }
}

@keyframes kplFade {
  from {
    opacity: 0.3;
  }

  to {
    opacity: 0.65;
  }
}

@keyframes kplProgress {
  0% {
    width: 0%;
    margin-left: 0%;
  }

  50% {
    width: 60%;
    margin-left: 20%;
  }

  100% {
    width: 0%;
    margin-left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kpl-ring {
    animation: none;
    border-top-color: var(--kpl-accent);
  }

  .kpl-ring::after {
    animation: none;
  }

  .kpl-icon {
    animation: none;
  }

  .kpl-bar {
    animation: none;
    width: 40%;
    margin-left: 30%;
  }

  .kpl-label {
    animation: none;
    opacity: 0.5;
  }

  #kicksyPageLoader {
    transition: opacity 80ms ease;
  }
}

/* ════════════════════════════════════════════════════════════
   PRODUCT SHARE STRIP
   Sits between the star rating and the short description on the
   product detail page. Compact, minimal — three platform links
   (WhatsApp, Facebook, X) + a copy-link button.
   ════════════════════════════════════════════════════════════ */

.product-share {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.product-share-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--secondary);
  flex-shrink: 0;
}

.product-share-btns {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* Base share button — icon + short label side by side */
.product-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--secondary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  white-space: nowrap;
  font-family: inherit;
}

/* Per-platform accent colours on hover */
.product-share-btn:hover,
.product-share-btn:focus-visible {
  border-color: transparent;
}

.product-share-wa:hover,
.product-share-wa:focus-visible {
  background: #25D366;
  color: #fff;
}

.product-share-fb:hover,
.product-share-fb:focus-visible {
  background: #1877F2;
  color: #fff;
}

.product-share-x:hover,
.product-share-x:focus-visible {
  background: #000;
  color: #fff;
}

.product-share-copy:hover,
.product-share-copy:focus-visible {
  background: var(--primary);
  color: #fff;
}

/* Subtle lift on hover (mouse only) */
@media (hover: hover) and (pointer: fine) {
  .product-share-btn:hover {
    transform: translateY(-1px);
  }
}

/* Active press feedback */
.product-share-btn:active {
  transform: scale(0.95);
}

/* On very small screens hide the text labels — keep just the icon */
@media (max-width: 400px) {
  .product-share-btn span {
    display: none;
  }

  .product-share-btn {
    padding: 7px 9px;
  }
}