/* ==========================================================================
   SkyKite — Premium Kite E-Commerce Design System
   Author: SkyKite Studio
   ========================================================================== */

/* Fonts — self-hosted variable fonts (latin subset) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Inter-Variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2-variations');
}

/* --------------------------------------------------------------------------
   1. Design Tokens (CSS Variables)
   -------------------------------------------------------------------------- */
:root {
  /* Color — Premium Kite Palette */
  --color-primary: #E8620C;
  --color-primary-hover: #CC550A;
  --color-primary-dark: #B34A08;
  --color-primary-bright: #FF8A3D;
  --color-primary-light: #FFF3E9;
  --color-secondary: #151A2E;
  --color-secondary-light: #232A45;
  --color-accent: #00A8CC;
  --color-accent-light: #E6F7FB;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Neutral — Warm grays */
  --color-bg: #FBFAF8;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F3F0;
  --color-border: #EAE6E0;
  --color-border-strong: #DCD6CE;

  /* Text */
  --color-text: #1E1B16;
  --color-text-secondary: #6B645C;
  --color-text-muted: #A39B92;
  --color-text-inverse: #FFFFFF;

  /* Typography — Fluid scale */
  --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-script: 'Berkshire Swash', 'Brush Script MT', 'Segoe Script', cursive;

  --fs-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm: clamp(0.8rem, 0.78rem + 0.15vw, 0.88rem);
  --fs-base: clamp(0.92rem, 0.9rem + 0.2vw, 1rem);
  --fs-md: clamp(0.98rem, 0.94rem + 0.3vw, 1.1rem);
  --fs-lg: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  --fs-xl: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  --fs-2xl: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-3xl: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem);
  --fs-4xl: clamp(2.5rem, 1.7rem + 3.2vw, 4rem);

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows — Layered elevation */
  --shadow-xs: 0 1px 2px rgba(21, 26, 46, 0.05);
  --shadow-sm: 0 1px 3px rgba(21, 26, 46, 0.06), 0 1px 2px rgba(21, 26, 46, 0.04);
  --shadow-md: 0 4px 8px rgba(21, 26, 46, 0.05), 0 2px 4px rgba(21, 26, 46, 0.04);
  --shadow-lg: 0 12px 20px rgba(21, 26, 46, 0.06), 0 4px 6px rgba(21, 26, 46, 0.04);
  --shadow-xl: 0 24px 40px rgba(21, 26, 46, 0.08), 0 8px 12px rgba(21, 26, 46, 0.04);
  --shadow-primary: 0 10px 20px rgba(232, 98, 12, 0.25);

  /* Transitions */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 360ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-offcanvas: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Layout */
  --container-max: 1320px;
  --nav-height: 78px;
  --announcement-height: 40px;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

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

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

input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-base);
}

ul, ol {
  list-style: none;
}

::selection {
  background: var(--color-primary);
  color: #fff;
}

/* Focus visibility */
:focus-visible {
  outline: 3px solid rgba(232, 98, 12, 0.35);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  background: var(--color-secondary);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-3);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. Typography & Section Helpers
   -------------------------------------------------------------------------- */
.container-wide {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--space-16);
}

.section-sm {
  padding-block: var(--space-10);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.section-title {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-2);
}

/* Script accent for other primary headings */
.story__title,
.promo-banner__title,
.newsletter__title {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
}

.section-sub {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  max-width: 520px;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  transform: rotate(-4deg) translateY(-1px);
  border-radius: var(--radius-full);
}

/* Kite string separator */
.kite-separator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block: var(--space-6);
}

.kite-separator::before {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-border-strong) 0 8px,
    transparent 8px 14px
  );
}

.kite-separator__diamond {
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  transform: rotate(45deg);
  border-radius: 2px;
}

.kite-separator--center { justify-content: center; }

/* Golla-thread divider stripe */
.thread-divider {
  position: relative;
  aspect-ratio: 1369 / 161;
  height: auto;
  width: 100%;
  pointer-events: none;
  background-image: url("../assets/images/decor/door-golla-icon-img.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: all var(--transition-base);
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn i {
  font-size: 1.1em;
}

.btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Primary */
.btn-primary {
  background: linear-gradient(165deg, var(--color-primary), var(--color-primary-hover));
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  background: linear-gradient(165deg, var(--color-primary-hover), var(--color-primary-dark));
  border-color: var(--color-primary-hover);
  color: #fff;
  box-shadow: 0 14px 26px rgba(232, 98, 12, 0.3);
}

/* Secondary (dark) */
.btn-dark {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
}

.btn-dark:hover {
  background: var(--color-secondary-light);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Outline */
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Ghost / text */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  padding-inline: var(--space-4);
}

.btn-ghost:hover {
  background: var(--color-surface-alt);
  color: var(--color-primary);
}

/* Light */
.btn-light {
  background: #fff;
  color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}

.btn-light:hover {
  background: var(--color-surface-alt);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--fs-base);
}

.btn-sm {
  padding: 0.55rem 1.1rem;
  font-size: var(--fs-xs);
}

.btn-icon {
  padding: 0.65rem;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
}

.btn-block {
  width: 100%;
}

.btn .btn__shine {
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: skewX(-20deg);
  transition: left var(--transition-slow);
  pointer-events: none;
}

.btn:hover .btn__shine {
  left: 125%;
}

/* --------------------------------------------------------------------------
   5. Badges & Chips
   -------------------------------------------------------------------------- */
.badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

.badge--sale {
  background: var(--color-error);
  color: #fff;
}

.badge--new {
  background: var(--color-accent);
  color: #fff;
}

.badge--top {
  background: var(--color-secondary);
  color: #fff;
}

.badge--promo {
  position: relative;
  top: auto;
  left: auto;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   6. Announcement Bar
   -------------------------------------------------------------------------- */
.announcement {
  position: relative;
  z-index: var(--z-sticky) + 1;
  background: var(--color-secondary);
  color: #d8dbe8;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-align: center;
  padding: var(--space-2) var(--space-12);
  height: var(--announcement-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement__inner {
  width: 100%;
  max-width: var(--container-max);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.announcement__msg {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
}

.announcement__msg i {
  color: var(--color-primary);
  font-size: 1.05rem;
}

.announcement__close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9aa0b8;
  font-size: var(--fs-sm);
  padding: var(--space-2);
  transition: color var(--transition-fast);
}

.announcement__close:hover {
  color: #fff;
}

@media (max-width: 575.98px) {
  :root {
    --announcement-height: 40px;
  }
  .announcement__msg span {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Navbar
   -------------------------------------------------------------------------- */
.navbar-wrap {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--nav-height);
}

.navbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  height: 100%;
  transition: background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.navbar-wrap.is-scrolled .navbar,
.navbar.is-scrolled {
  box-shadow: var(--shadow-lg);
  border-bottom-color: var(--color-border);
}

/* Glass overlap mode — transparent frosted bar over a dark image hero */
.navbar-wrap.is-overlap .navbar {
  background: rgba(21, 26, 46, 0.22);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.navbar-wrap.is-overlap .logo__name,
.navbar-wrap.is-overlap .nav__link,
.navbar-wrap.is-overlap .nav-action,
.navbar-wrap.is-overlap .nav-toggle__bar {
  color: #fff;
}

.navbar-wrap.is-overlap .logo__name span,
.navbar-wrap.is-overlap .nav__link:hover,
.navbar-wrap.is-overlap .nav__link.is-active,
.navbar-wrap.is-overlap .nav-action:hover {
  color: var(--color-primary-bright);
}

.navbar-wrap.is-overlap .logo__tagline {
  color: rgba(255, 255, 255, 0.72);
}

.navbar-wrap.is-overlap .nav-action:hover {
  background: rgba(255, 255, 255, 0.14);
}

.navbar-wrap.is-overlap .nav-toggle {
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
}

/* Solid white nav once scrolled past the glass zone */
.navbar-wrap.is-overlap.is-scrolled .navbar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-lg);
  border-bottom-color: var(--color-border);
}

.navbar-wrap.is-overlap.is-scrolled .logo__name,
.navbar-wrap.is-overlap.is-scrolled .nav__link,
.navbar-wrap.is-overlap.is-scrolled .nav-action,
.navbar-wrap.is-overlap.is-scrolled .nav-toggle__bar {
  color: var(--color-text);
}

.navbar-wrap.is-overlap.is-scrolled .logo__name span,
.navbar-wrap.is-overlap.is-scrolled .nav__link:hover,
.navbar-wrap.is-overlap.is-scrolled .nav__link.is-active,
.navbar-wrap.is-overlap.is-scrolled .nav-action:hover {
  color: var(--color-primary);
}

.navbar-wrap.is-overlap.is-scrolled .logo__tagline {
  color: var(--color-text-muted);
}

.navbar-wrap.is-overlap.is-scrolled .nav-action:hover {
  background: var(--color-surface-alt);
}

.navbar-wrap.is-overlap.is-scrolled .nav-toggle {
  background: var(--color-surface-alt);
}

.navbar__container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.logo__mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, var(--color-primary), var(--color-primary-hover));
  color: #fff;
  font-size: 1.2rem;
  box-shadow: var(--shadow-primary);
  transition: transform var(--transition-slow);
}

.logo:hover .logo__mark {
  transform: rotate(8deg);
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--color-text);
  letter-spacing: -0.03em;
}

.logo__name span {
  color: var(--color-primary);
}

.logo__tagline {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Nav links */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 8px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--color-primary);
}

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

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

.nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-slow);
  z-index: var(--z-dropdown);
}

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

.nav__dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.nav__dropdown-link i {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  transition: color var(--transition-fast);
}

.nav__dropdown-link:hover {
  background: var(--color-surface-alt);
  color: var(--color-primary);
}

.nav__dropdown-link:hover i {
  color: var(--color-primary);
}

/* Nav actions (icons) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-action {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 1.2rem;
  transition: all var(--transition-base);
}

.nav-action:hover {
  background: var(--color-surface-alt);
  color: var(--color-primary);
}

.nav-action__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  border: 2px solid #fff;
  line-height: 1;
}

.nav-action__count.is-hidden {
  display: none;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.nav-toggle__bar {
  height: 2px;
  width: 100%;
  background: var(--color-text);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(85vw, 360px);
  background: var(--color-surface);
  z-index: var(--z-offcanvas);
  transform: translateX(-105%);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  overflow-y: auto;
}

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

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.mobile-drawer__body {
  flex: 1;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.mobile-nav__link:hover,
.mobile-nav__link.is-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.mobile-nav__sub {
  padding-inline: var(--space-4) var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav__sub-link {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
}

.mobile-nav__sub-link:hover {
  color: var(--color-primary);
  background: var(--color-surface-alt);
}

.mobile-drawer__footer {
  padding: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 26, 46, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-slow);
  z-index: calc(var(--z-offcanvas) - 1);
  backdrop-filter: blur(2px);
}

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

/* Search overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.97);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-slow);
}

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

.search-overlay__box {
  width: min(680px, 90vw);
}

.search-overlay__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 3px solid var(--color-secondary);
  padding-bottom: var(--space-3);
}

.search-overlay__field i {
  font-size: 1.5rem;
  color: var(--color-primary);
}

.search-overlay__field input {
  flex: 1;
  border: none;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  font-family: var(--font-heading);
  font-weight: 600;
  background: transparent;
  color: var(--color-text);
}

.search-overlay__field input:focus {
  outline: none;
}

.search-overlay__close {
  font-size: 1.6rem;
  color: var(--color-text-secondary);
  padding: var(--space-2);
}

.search-overlay__hint {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Responsive nav */
@media (max-width: 1199.98px) {
  .nav, .nav-actions .nav-action:not(.nav-action--cart) {
    display: flex;
  }
}

@media (max-width: 991.98px) {
  .nav,
  .nav-actions .nav-action:not(.nav-action--cart):not(.nav-action--menu-btn) {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  :root {
    --nav-height: 64px;
  }

  .logo__mark {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .logo__name {
    font-size: 1.15rem;
  }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, #FFF8F2 0%, var(--color-bg) 100%);
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 6rem);
}

.hero__wind {
  position: absolute;
  top: 0;
  right: -10%;
  width: 60%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.hero__wind svg {
  width: 100%;
  height: 100%;
}

.hero__diamond {
  position: absolute;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  opacity: 0.06;
  transform: rotate(45deg);
  border-radius: 4px;
  pointer-events: none;
  z-index: 0;
}

.hero__diamond--1 { width: 42px; height: 42px; top: 14%; left: 4%; }
.hero__diamond--2 { width: 28px; height: 28px; bottom: 18%; left: 8%; }
.hero__diamond--3 { width: 20px; height: 20px; top: 22%; right: 30%; }

.hero__container {
  position: relative;
  z-index: 2;
}

.hero__row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-10);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.hero__eyebrow .dot {
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.hero__title {
  font-size: var(--fs-4xl);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-6);
}

.hero__title .grad {
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__title .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-secondary);
}

.hero__lead {
  font-size: var(--fs-lg);
  color: var(--color-text-secondary);
  max-width: 480px;
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-8);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.hero__stats {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.hero__stat {
  text-align: center;
}

.hero__stat + .hero__stat {
  padding-left: var(--space-8);
  border-left: 1px solid var(--color-border-strong);
}

.hero__stat-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--color-text);
  line-height: 1;
}

.hero__stat-num sup {
  color: var(--color-primary);
  font-size: 0.6em;
}

.hero__stat-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Hero visual */
.hero__visual {
  position: relative;
}

.hero__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 4.4;
}

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

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(21, 26, 46, 0.25));
  pointer-events: none;
}

.hero__orb {
  position: absolute;
  z-index: -1;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(232, 98, 12, 0.22), transparent 65%);
  filter: blur(40px);
}

.hero__orb--1 { top: -10%; right: -15%; }
.hero__orb--2 { bottom: -15%; left: -10%; background: radial-gradient(circle at 60% 40%, rgba(0, 168, 204, 0.18), transparent 65%); }

/* Floating cards */
.hero__float {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: float 6s ease-in-out infinite;
}

.hero__float--rating { bottom: 10%; left: -7%; animation-delay: 0.5s; }
.hero__float--delivery { top: 12%; right: -6%; animation-delay: 1.5s; }

.float__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-size: 1.25rem;
}

.float__icon--primary { background: var(--color-primary-light); color: var(--color-primary); }
.float__icon--accent { background: var(--color-accent-light); color: var(--color-accent); }

.float__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.2;
}

.float__sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

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

@media (max-width: 991.98px) {
  .hero__row {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .hero__content {
    text-align: center;
  }

  .hero__content .hero__lead {
    margin-inline: auto;
  }

  .hero__ctas {
    justify-content: center;
  }

  .hero__stats {
    justify-content: center;
  }

  .hero__visual {
    max-width: 520px;
    margin-inline: auto;
  }

  .hero__float--rating { left: -3%; }
  .hero__float--delivery { right: -3%; }
}

@media (max-width: 575.98px) {
  .hero__stats { gap: var(--space-4); }
  .hero__stat + .hero__stat { padding-left: var(--space-4); }
  .hero__float { padding: var(--space-3); }
  .float__icon { width: 36px; height: 36px; font-size: 1rem; }
  .hero__float--rating { bottom: 6%; left: -4%; }
  .hero__float--delivery { top: 6%; right: -4%; }
}

/* --------------------------------------------------------------------------
   8a. Preloader (Basant-style kite intro)
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal) + 900;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #151A2E 0%, #232A45 55%, #31395F 120%);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.preloading {
  overflow: hidden;
}

.preloader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.preloader__logo .logo__mark {
  width: 66px;
  height: 66px;
  font-size: 1.7rem;
  animation: pulse-soft 1.6s ease-in-out infinite;
}

.preloader__name {
  font-family: var(--font-script);
  font-size: var(--fs-3xl);
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1;
}

.preloader__tagline {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.preloader__kite {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  animation: kiteFloat 3.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(21, 26, 46, 0.35));
}

.preloader__kite--1 { width: 54px; left: -76px; top: -46px; animation-delay: 0.2s; }
.preloader__kite--2 { width: 34px; right: -52px; top: -30px; animation-duration: 3.8s; animation-delay: 0.9s; }
.preloader__kite--3 { width: 26px; right: -34px; bottom: -56px; animation-duration: 4.4s; animation-delay: 1.4s; }

@keyframes pulse-soft {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.07) rotate(5deg); }
}

/* --------------------------------------------------------------------------
   8b. Hero v2 — static festival backdrop with floating kites (Basant style)
   -------------------------------------------------------------------------- */
.hero-v2 {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: visible;
  color: #fff;
  background: var(--color-secondary);
  margin-top: calc(var(--nav-height) * -1);
  margin-bottom: 40px;
  padding-block: calc(var(--nav-height) + clamp(4rem, 9vw, 7rem)) clamp(5rem, 9vw, 7rem);
}

.hero-v2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-v2__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-v2__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* centered scrim so the text reads over the kite + fort art */
    radial-gradient(ellipse 70% 72% at 50% 52%, rgba(21, 26, 46, 0.58) 0%, rgba(21, 26, 46, 0.32) 55%, transparent 80%),
    /* soft bottom vignette for the badge */
    linear-gradient(0deg, rgba(21, 26, 46, 0.45) 0%, transparent 34%),
    /* mild top dim behind the glass navbar */
    linear-gradient(180deg, rgba(21, 26, 46, 0.35) 0%, transparent 28%);
}

.hero-v2__container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-v2__content {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.hero-v2__eyebrow {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.hero-v2__eyebrow .dot {
  background: var(--color-primary-bright);
}

.hero-v2__title {
  font-size: var(--fs-4xl);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--space-6);
}

.hero-v2__script {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.45em;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 0.14em 0 0.2em;
  background: linear-gradient(120deg, var(--color-primary-bright) 0%, #FFC94A 42%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-v2__lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  max-width: 470px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.hero-v2__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.hero-v2__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.hero-v2 .hero__stat + .hero__stat {
  padding-left: var(--space-8);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-v2 .hero__stat-num { color: #fff; }
.hero-v2 .hero__stat-num sup { color: var(--color-primary-bright); }
.hero-v2 .hero__stat-label { color: rgba(255, 255, 255, 0.65); }

/* Floating kites */
.hero-kite {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
  animation: kiteFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(21, 26, 46, 0.28));
}

.hero-kite--1 { width: clamp(56px, 7vw, 96px); top: 15%; left: 5%; animation-duration: 6.5s; }
.hero-kite--2 { width: clamp(40px, 5vw, 64px); top: 11%; right: 8%; animation-duration: 7.4s; animation-delay: 0.8s; }
.hero-kite--3 { width: clamp(34px, 4vw, 52px); bottom: 16%; left: 14%; animation-duration: 8.2s; animation-delay: 1.6s; }
.hero-kite--4 { width: clamp(46px, 6vw, 76px); bottom: 20%; right: 16%; animation-duration: 6.9s; animation-delay: 2.2s; }

@keyframes kiteFloat {
  0%, 100% { transform: translateY(0) rotate(24deg); }
  25% { transform: translateY(-18px) translateX(6px) rotate(20deg); }
  50% { transform: translateY(-34px) translateX(-2px) rotate(28deg); }
  75% { transform: translateY(-12px) translateX(-8px) rotate(22deg); }
}

/* Overlapping promo badge */
.hero-v2__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-3) var(--space-6);
  max-width: calc(100% - 32px);
  white-space: normal;
  text-align: left;
}

.hero-v2__badge-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, var(--color-primary), var(--color-primary-hover));
  color: #fff;
  font-size: 1.2rem;
}

.hero-v2__badge strong {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: var(--color-text);
  display: block;
  line-height: 1.2;
}

.hero-v2__badge span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

@media (max-width: 991.98px) {
  .hero-v2 { min-height: 78vh; }

  .hero-v2__content {
    text-align: center;
    margin-inline: auto;
  }

  .hero-v2__content .hero__lead,
  .hero-v2__content .hero-v2__lead {
    margin-inline: auto;
  }

  .hero-v2__ctas,
  .hero-v2__stats {
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .hero-v2 { margin-bottom: 32px; }

  .hero-v2__title { font-size: var(--fs-3xl); }
  .hero-v2__script { font-size: 1.35em; }
  .hero-v2__stats { gap: var(--space-3); flex-wrap: wrap; }
  .hero-v2 .hero__stat + .hero__stat { padding-left: var(--space-3); }

  .hero-v2__badge { padding: var(--space-2) var(--space-4); }
  .hero-v2__badge-icon { width: 36px; height: 36px; font-size: 1rem; }

  .hero-kite--1 { left: 3%; top: 14%; }
  .hero-kite--2 { right: 4%; }
  .hero-kite--3 { left: 8%; }
  .hero-kite--4 { right: 6%; }
}

/* --------------------------------------------------------------------------
   8c. Basant-style cards — colored festival borders
   -------------------------------------------------------------------------- */
.category-card {
  border: 2px solid var(--color-border);
}

.category-card:hover {
  border-color: rgba(232, 98, 12, 0.55);
}

.feature-card {
  border: 2px solid var(--color-border);
}

.feature-card:has(.feature-card__icon--primary) { border-color: rgba(232, 98, 12, 0.4); }
.feature-card:has(.feature-card__icon--accent) { border-color: rgba(0, 168, 204, 0.4); }
.feature-card:has(.feature-card__icon--success) { border-color: rgba(16, 185, 129, 0.4); }
.feature-card:has(.feature-card__icon--secondary) { border-color: rgba(21, 26, 46, 0.35); }

.feature-card:has(.feature-card__icon--primary):hover { border-color: var(--color-primary); box-shadow: 0 12px 20px rgba(232, 98, 12, 0.14); }
.feature-card:has(.feature-card__icon--accent):hover { border-color: var(--color-accent); box-shadow: 0 12px 20px rgba(0, 168, 204, 0.14); }
.feature-card:has(.feature-card__icon--success):hover { border-color: var(--color-success); box-shadow: 0 12px 20px rgba(16, 185, 129, 0.14); }
.feature-card:has(.feature-card__icon--secondary):hover { border-color: var(--color-secondary); box-shadow: 0 12px 20px rgba(21, 26, 46, 0.12); }

.product-card {
  border: 1px solid var(--color-border);
}

.product-card:hover {
  border-color: rgba(232, 98, 12, 0.6);
}

/* AOS fallback — keep content visible if the AOS script fails to load */
.aos-fallback [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   9. Product Cards
   -------------------------------------------------------------------------- */
.product-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-border-strong);
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card__img {
  transform: scale(1.08);
}

.product-card__img--second {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.product-card:hover .product-card__img--second {
  opacity: 1;
}

/* Quick actions */
.product-card__actions {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 0;
  transform: translateX(10px);
  transition: all var(--transition-base);
  z-index: 3;
}

.product-card:hover .product-card__actions {
  opacity: 1;
  transform: translateX(0);
}

.quick-action {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
  backdrop-filter: blur(4px);
}

.quick-action:hover {
  background: var(--color-primary);
  color: #fff;
}

.quick-action.is-wishlisted {
  background: var(--color-error);
  color: #fff;
}

/* Quick view bar */
.product-card__view {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translate(-50%, 10px);
  background: rgba(21, 26, 46, 0.92);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  opacity: 0;
  transition: all var(--transition-slow);
  white-space: nowrap;
  backdrop-filter: blur(4px);
  z-index: 3;
  width: max-content;
}

.product-card:hover .product-card__view {
  opacity: 1;
  transform: translate(-50%, 0);
}

.product-card__view:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Body */
.product-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card__cat {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.product-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-text);
  transition: color var(--transition-fast);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.product-card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.stars {
  color: var(--color-warning);
  font-size: 0.85rem;
  display: inline-flex;
  gap: 2px;
}

.stars i {
  line-height: 1;
}

.rating-count {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}

.product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--color-text);
}

.price--sm { font-size: var(--fs-md); }

.price__old {
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.price__off {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-success);
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.product-card__footer {
  margin-top: auto;
  padding-top: var(--space-4);
}

.add-to-cart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
  transition: all var(--transition-base);
  border: 1px solid transparent;
}

.add-to-cart:hover {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}

.add-to-cart.is-added {
  background: var(--color-success);
  color: #fff;
}

/* Responsive product card actions */
@media (max-width: 575.98px) {
  .product-card__actions {
    opacity: 1;
    top: var(--space-3);
    right: var(--space-3);
  }
  .product-card__view {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10. Category Cards
   -------------------------------------------------------------------------- */
.category-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: block;
  isolation: isolate;
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    185deg,
    transparent 35%,
    rgba(21, 26, 46, 0.15) 60%,
    rgba(21, 26, 46, 0.82) 100%
  );
  transition: background var(--transition-slow);
  z-index: 1;
}

.category-card:hover img {
  transform: scale(1.08);
}

.category-card:hover::after {
  background: linear-gradient(
    185deg,
    rgba(232, 98, 12, 0.05) 35%,
    rgba(232, 98, 12, 0.6) 60%,
    rgba(179, 74, 8, 0.92) 100%
  );
}

.category-card__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-6);
  z-index: 2;
  transform: translateY(0);
  transition: transform var(--transition-slow);
}

.category-card:hover .category-card__content {
  transform: translateY(-4px);
}

.category-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: #fff;
  margin-bottom: var(--space-1);
}

.category-card__desc {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all var(--transition-slow);
}

.category-card:hover .category-card__desc {
  max-height: 60px;
  opacity: 1;
  margin-bottom: var(--space-3);
}

.category-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-sm);
  opacity: 0.9;
}

.category-card__link i {
  transition: transform var(--transition-fast);
}

.category-card:hover .category-card__link i {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   11. Promo Banner
   -------------------------------------------------------------------------- */
.promo-banner {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
}

.promo-banner__bg {
  position: absolute;
  inset: 0;
}

.promo-banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(21, 26, 46, 0.88) 0%, rgba(21, 26, 46, 0.6) 45%, rgba(21, 26, 46, 0.05) 100%);
}

.promo-banner__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: var(--space-10);
  color: #fff;
}

.promo-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}

.promo-banner__title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}

.promo-banner__title .accent {
  color: #FFB386;
}

.promo-banner__text {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
}

@media (max-width: 575.98px) {
  .promo-banner { min-height: 380px; }
  .promo-banner__content { padding: var(--space-8); }
}

/* --------------------------------------------------------------------------
   12. Feature Blocks (Why Choose Us)
   -------------------------------------------------------------------------- */
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: all var(--transition-base);
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-border-strong);
}

.feature-card__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-size: 1.55rem;
  margin-bottom: var(--space-5);
  position: relative;
}

.feature-card__icon::after {
  content: "";
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  opacity: 0.12;
  transform: rotate(45deg);
}

.feature-card__icon i {
  position: relative;
  z-index: 2;
}

.feature-card__icon--primary { background: var(--color-primary-light); color: var(--color-primary); }
.feature-card__icon--accent { background: var(--color-accent-light); color: var(--color-accent); }
.feature-card__icon--success { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
.feature-card__icon--secondary { background: rgba(21, 26, 46, 0.06); color: var(--color-secondary); }

.feature-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}

.feature-card__text {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* --------------------------------------------------------------------------
   13. Brand Story
   -------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.story__media {
  position: relative;
}

.story__img-main {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  box-shadow: var(--shadow-xl);
}

.story__img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__img-accent {
  position: absolute;
  bottom: -8%;
  right: -6%;
  width: 55%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 6px solid var(--color-bg);
  box-shadow: var(--shadow-lg);
}

.story__img-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__badge {
  position: absolute;
  top: -6%;
  left: -4%;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-primary);
  text-align: center;
  transform: rotate(-4deg);
}

.story__badge-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1;
}

.story__badge-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
  margin-top: 4px;
}

.story__content .section-eyebrow { margin-bottom: var(--space-3); }

.story__title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.story__text {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-5);
}

.story__points {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.story__point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.story__point-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: grid;
  place-items: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 1.1rem;
}

.story__point h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  margin-bottom: 2px;
}

.story__point p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

@media (max-width: 991.98px) {
  .story {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .story__media { max-width: 520px; margin-inline: auto; }
  .story__img-accent { right: -2%; }
}

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */
.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  height: 100%;
  position: relative;
  transition: all var(--transition-base);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.testimonial-card__quote {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-border);
  font-family: Georgia, serif;
}

.testimonial-card__stars {
  color: var(--color-warning);
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
  display: flex;
  gap: 2px;
}

.testimonial-card__text {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--color-primary-light);
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.testimonial-card__meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   15. Newsletter
   -------------------------------------------------------------------------- */
.newsletter {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}

.newsletter__diamonds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
}

.newsletter__diamonds::before,
.newsletter__diamonds::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: #fff;
  transform: rotate(45deg);
}

.newsletter__diamonds::before { top: -60px; left: 8%; }
.newsletter__diamonds::after { bottom: -60px; right: 10%; }

.newsletter__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-5);
  display: grid;
  place-items: center;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  color: #fff;
  font-size: 1.7rem;
  box-shadow: var(--shadow-primary);
  transform: rotate(-3deg);
}

.newsletter__title {
  color: #fff;
  font-size: var(--fs-2xl);
  font-weight: 800;
  margin-bottom: var(--space-2);
}

.newsletter__text {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-md);
  max-width: 480px;
  margin: 0 auto var(--space-8);
}

.newsletter__form {
  display: flex;
  gap: var(--space-3);
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  padding: 6px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xl);
}

.newsletter__input {
  flex: 1;
  border: none;
  padding: 0 var(--space-5);
  font-size: var(--fs-md);
  color: var(--color-text);
  background: transparent;
  min-height: 46px;
}

.newsletter__input:focus {
  outline: none;
}

.newsletter__submit {
  border-radius: var(--radius-full);
  padding-inline: var(--space-6);
  min-height: 46px;
}

.newsletter__note {
  margin-top: var(--space-4);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

@media (max-width: 575.98px) {
  .newsletter__form {
    flex-direction: column;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
  }
  .newsletter__input { min-height: 44px; border-radius: var(--radius-full); }
  .newsletter__submit { width: 100%; }
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  overflow: visible;
  background: var(--color-secondary);
  color: #B8BDD0;
  margin-top: 60px;
  padding-top: calc(var(--space-10) + 160px);
}

.footer__topper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1920px;
  pointer-events: none;
  z-index: 0;
  display: flex;
  justify-content: center;
}

.footer__topper img {
  width: 100%;
  height: auto;
  min-width: 800px;
  display: block;
}

.footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
}

.footer__brand .logo__mark {
  box-shadow: 0 10px 20px rgba(232, 98, 12, 0.35);
}

.footer__brand .logo__name {
  color: #fff;
}

.footer__brand .logo__tagline {
  color: rgba(255, 255, 255, 0.45);
}

.footer__about {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: #8F95AB;
  max-width: 300px;
  margin-top: var(--space-5);
}

.footer__heading {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: calc(var(--fs-base) + 0.1rem);
  color: #fff;
  margin-bottom: var(--space-5);
  position: relative;
  padding-bottom: var(--space-3);
}

.footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  top: auto;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__link {
  color: #8F95AB;
  font-size: var(--fs-sm);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__link i {
  font-size: 0.9rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-primary);
  padding-left: 2px;
}

.footer__link:hover i {
  opacity: 1;
  transform: translateX(0);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: #8F95AB;
  line-height: var(--lh-normal);
}

.footer__contact-item i {
  color: var(--color-primary);
  font-size: 1rem;
  margin-top: 3px;
}

.footer__socials {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.footer__social {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: #B8BDD0;
  font-size: 1.05rem;
  transition: all var(--transition-base);
}

.footer__social:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-3px);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--space-6);
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer__copy {
  font-size: var(--fs-xs);
  color: #7C8298;
}

.footer__payments {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  color: #8F95AB;
  border: 1px solid rgba(255, 255, 255, 0.09);
  letter-spacing: 0.04em;
}

@media (max-width: 991.98px) {
  .footer {
    margin-top: 0;
    padding-top: calc(var(--space-10) + 80px);
  }

  .footer__topper {
    transform: translate(-50%, -40%);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 575.98px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .footer__bottom-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */
.form-group {
  position: relative;
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.form-label .required {
  color: var(--color-error);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(232, 98, 12, 0.12);
}

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

.form-control.is-invalid {
  border-color: var(--color-error);
}

.form-control.is-valid {
  border-color: var(--color-success);
}

.invalid-feedback {
  display: none;
  color: var(--color-error);
  font-size: var(--fs-xs);
  margin-top: 6px;
}

.is-invalid ~ .invalid-feedback {
  display: block;
}

/* Floating label */
.form-floating-group {
  position: relative;
  margin-bottom: var(--space-5);
}

.form-floating-group input,
.form-floating-group textarea,
.form-floating-group select {
  width: 100%;
  padding: 1.1rem 1rem 0.45rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.form-floating-group input:focus,
.form-floating-group textarea:focus,
.form-floating-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(232, 98, 12, 0.12);
}

.form-floating-group label {
  position: absolute;
  top: 0.85rem;
  left: 1rem;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  pointer-events: none;
  transition: all var(--transition-base);
  transform-origin: left top;
}

.form-floating-group input:focus + label,
.form-floating-group input:not(:placeholder-shown) + label,
.form-floating-group textarea:focus + label,
.form-floating-group textarea:not(:placeholder-shown) + label,
.form-floating-group select:focus + label,
.form-floating-group select.has-value + label {
  transform: translateY(-0.6rem) scale(0.78);
  color: var(--color-primary);
  font-weight: 600;
}

.form-floating-group input:focus:not(:placeholder-shown) + label {
  color: var(--color-primary);
}

/* Custom checkbox */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.form-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  transition: all var(--transition-fast);
  margin-top: 2px;
  cursor: pointer;
}

.form-check input::before {
  content: "";
  width: 10px;
  height: 10px;
  background: transparent;
  border-radius: 2px;
  transition: all var(--transition-fast);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.form-check input:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check input:checked::before {
  background: #fff;
}

.form-check--radio input {
  border-radius: 50%;
}

.form-check--radio input::before {
  border-radius: 50%;
  clip-path: none;
  width: 8px;
  height: 8px;
}

.form-check--radio input:checked::before {
  background: #fff;
}

.form-check__label {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: var(--lh-normal);
}

.form-check__label small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Select styling */
.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "\F229";
  font-family: "bootstrap-icons";
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
}

/* --------------------------------------------------------------------------
   18. Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  margin: 0;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
}

.breadcrumb__item a {
  color: var(--color-text-muted);
}

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

.breadcrumb__item--current {
  color: var(--color-text);
  font-weight: 600;
}

.breadcrumb__sep {
  color: var(--color-border-strong);
  font-size: 0.8rem;
}

/* Page hero (inner pages) */
.page-hero {
  background: linear-gradient(180deg, #FFF6F0 0%, var(--color-bg) 100%);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  position: relative;
}

.page-hero__title {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  font-size: var(--fs-2xl);
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.page-hero__desc {
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  max-width: 560px;
}

.page-hero .kite-diamond-decor {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.08;
}

/* --------------------------------------------------------------------------
   19. Shop Layout
   -------------------------------------------------------------------------- */
.shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-8);
}

.shop-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--nav-height) - 48px);
  overflow-y: auto;
  padding-right: var(--space-2);
  scrollbar-width: thin;
}

.filters-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.filters-card + .filters-card {
  margin-top: var(--space-4);
}

.filters-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  margin-bottom: var(--space-4);
  cursor: pointer;
}

.filters-card__title i {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  transition: transform var(--transition-base);
}

.filters-card__title.is-collapsed i {
  transform: rotate(-90deg);
}

.filter-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.filter-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
}

.filter-check .count {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* Price range (custom dual slider) */
.price-range {
  position: relative;
  height: 6px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  margin-top: var(--space-6);
}

.price-range__fill {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
  border-radius: var(--radius-full);
}

.price-range__thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: #fff;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  cursor: grab;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast);
}

.price-range__thumb:hover {
  transform: translate(-50%, -50%) scale(1.15);
}

.price-range__thumb:active {
  cursor: grabbing;
}

.price-range__inputs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
}

/* Color swatches */
.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-fast);
  position: relative;
}

.swatch:hover {
  transform: scale(1.12);
}

.swatch.is-active {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px #fff inset;
  transform: scale(1.12);
}

/* Shop toolbar */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

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

.shop-toolbar__count strong {
  color: var(--color-text);
  font-weight: 700;
}

.toolbar-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.view-toggle {
  display: inline-flex;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 3px;
}

.view-toggle__btn {
  width: 36px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.view-toggle__btn.is-active {
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Active filter pills */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.filter-pill button {
  color: inherit;
  font-size: 0.9em;
  display: grid;
  place-items: center;
}

.filter-pill:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Mobile filter button */
.filter-toggle-mobile {
  display: none;
}

@media (max-width: 991.98px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }
  .shop-sidebar {
    display: none;
  }
  .filter-toggle-mobile {
    display: inline-flex;
  }
}

/* Offcanvas (Bootstrap) customization */
.offcanvas {
  border: none;
  box-shadow: var(--shadow-xl);
}

.offcanvas-header {
  border-bottom: 1px solid var(--color-border);
}

.offcanvas-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   20. Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
}

.page-link {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0 var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: all var(--transition-fast);
}

.page-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.page-link.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}

/* --------------------------------------------------------------------------
   21. Product Details
   -------------------------------------------------------------------------- */
.pd-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

/* Gallery */
.pd-gallery {
  position: relative;
}

.pd-gallery__main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt);
  cursor: zoom-in;
}

.pd-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}

.pd-gallery__main.is-zoomed img {
  transform: scale(2);
  cursor: zoom-out;
}

.pd-gallery__badges {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 2;
}

.pd-gallery__zoom-hint {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  padding: 7px 14px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-base);
  box-shadow: var(--shadow-md);
}

.pd-gallery:hover .pd-gallery__zoom-hint {
  opacity: 1;
}

.pd-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pd-thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
  background: var(--color-surface-alt);
}

.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.pd-thumb:hover {
  border-color: var(--color-border-strong);
}

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

.pd-thumb.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 98, 12, 0.15);
}

/* Info */
.pd-info__cat {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.pd-info__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

.pd-info__rating-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.pd-info__rating-row .stars { font-size: 1rem; }

.pd-info__rating-link {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.pd-info__rating-link:hover { color: var(--color-primary); }

.pd-info__price-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.pd-info__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  color: var(--color-text);
}

.pd-info__old-price {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-weight: 500;
}

.pd-info__off-badge {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 5px 12px;
  border-radius: var(--radius-full);
}

.pd-info__short-desc {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}

/* Variants */
.variant-group {
  margin-bottom: var(--space-6);
}

.variant-group__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}

.variant-group__label .is-selected {
  color: var(--color-text-muted);
  font-weight: 500;
}

.swatch-xl {
  width: 38px;
  height: 38px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.swatch-xl:hover { transform: scale(1.1); }

.swatch-xl.is-active {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px #fff inset;
}

.pd-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pd-size:hover { border-color: var(--color-primary); color: var(--color-primary); }

.pd-size.is-active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* Quantity + CTA row */
.pd-buy-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.qty-stepper__btn {
  width: 44px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.qty-stepper__btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.qty-stepper__input {
  width: 48px;
  height: 48px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-text);
  -moz-appearance: textfield;
}

.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pd-buy-row .btn {
  flex: 1;
  height: 52px;
}

.pd-actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.pd-wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 20px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
  transition: all var(--transition-base);
}

.pd-wishlist:hover {
  border-color: var(--color-error);
  color: var(--color-error);
  background: rgba(239, 68, 68, 0.05);
}

.pd-wishlist.is-wishlisted {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Delivery info */
.pd-delivery {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pd-delivery__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.pd-delivery__item i {
  color: var(--color-success);
  font-size: 1.1rem;
}

.pd-delivery__item strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Tabs */
.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-8);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  position: relative;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.tab-btn::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.tab-btn:hover { color: var(--color-text); }

.tab-btn.is-active {
  color: var(--color-primary);
}

.tab-btn.is-active::after {
  transform: scaleX(1);
}

.tab-pane[hidden] {
  display: none;
}

.tab-pane__body {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  max-width: 720px;
}

.tab-pane__body h4 {
  margin-block: var(--space-5) var(--space-3);
  color: var(--color-text);
}

/* Specs table */
.spec-table {
  width: 100%;
  max-width: 720px;
  border-collapse: collapse;
}

.spec-table tr {
  border-bottom: 1px solid var(--color-border);
}

.spec-table th,
.spec-table td {
  padding: var(--space-4);
  text-align: left;
  font-size: var(--fs-sm);
}

.spec-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
  width: 40%;
}

.spec-table td {
  color: var(--color-text-secondary);
}

.spec-table tr:nth-child(odd) th,
.spec-table tr:nth-child(odd) td {
  background: var(--color-surface-alt);
}

/* Review item */
.review-item {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-bottom: var(--space-4);
  max-width: 720px;
}

.review-item__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.review-item__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-primary-light);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
}

.review-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-item__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.review-item__date {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.review-item__body {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* Sticky mobile buy bar */
.mobile-buybar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
  display: none;
  gap: var(--space-3);
  transform: translateY(105%);
  transition: transform var(--transition-slow);
}

.mobile-buybar.is-visible {
  transform: translateY(0);
  display: flex;
}

.mobile-buybar__price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 90px;
}

.mobile-buybar__price .price { font-size: var(--fs-md); }

.mobile-buybar__price .price__old { font-size: var(--fs-xs); }

.mobile-buybar .btn { flex: 1; }

@media (max-width: 991.98px) {
  .pd-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .mobile-buybar { display: none; }
  .mobile-buybar.is-visible { display: flex; }
}

/* --------------------------------------------------------------------------
   22. Cart
   -------------------------------------------------------------------------- */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

.cart-items {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cart-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--space-5);
  padding: var(--space-6);
  align-items: center;
  transition: background var(--transition-fast);
  position: relative;
}

.cart-item + .cart-item {
  border-top: 1px solid var(--color-border);
}

.cart-item:hover {
  background: var(--color-surface-alt);
}

.cart-item__thumb {
  width: 110px;
  height: 110px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-alt);
}

.cart-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: color var(--transition-fast);
  display: block;
  margin-bottom: var(--space-1);
}

.cart-item__name:hover { color: var(--color-primary); }

.cart-item__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.cart-item__price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.cart-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.qty-stepper--sm .qty-stepper__btn {
  width: 34px;
  height: 36px;
  font-size: 0.9rem;
}

.qty-stepper--sm .qty-stepper__input {
  width: 38px;
  height: 36px;
  font-size: var(--fs-sm);
}

.cart-item__remove {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.cart-item__remove:hover {
  color: var(--color-error);
}

.cart-item__subtotal {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-base);
  color: var(--color-text);
}

/* Cart summary */
.cart-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.cart-summary__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.cart-summary__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  padding-block: var(--space-2);
}

.cart-summary__line strong {
  color: var(--color-text);
  font-weight: 600;
}

.cart-summary__discount {
  color: var(--color-success);
}

.cart-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
}

.cart-summary__total-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
}

.cart-summary__total-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  color: var(--color-primary);
}

.cart-summary__note {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

/* Coupon */
.coupon-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.coupon-row .form-control {
  flex: 1;
}

.coupon-applied {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-top: var(--space-3);
}

/* Cart empty */
.cart-empty {
  text-align: center;
  padding-block: var(--space-16);
}

.cart-empty__icon {
  width: 110px;
  height: 110px;
  margin: 0 auto var(--space-6);
  display: grid;
  place-items: center;
  background: var(--color-primary-light);
  border-radius: 50%;
  font-size: 3rem;
  color: var(--color-primary);
}

.cart-empty__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  margin-bottom: var(--space-2);
}

.cart-empty__text {
  color: var(--color-text-secondary);
  max-width: 380px;
  margin: 0 auto var(--space-6);
}

@media (max-width: 1199.98px) {
  .cart-layout {
    grid-template-columns: 1fr 340px;
  }
}

@media (max-width: 991.98px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .cart-summary {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .cart-item {
    grid-template-columns: 80px 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .cart-item__thumb {
    width: 80px;
    height: 80px;
  }
  .cart-item__right {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   23. Checkout
   -------------------------------------------------------------------------- */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-10);
  align-items: start;
}

.checkout-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
}

.checkout-step__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.checkout-step__num {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-sm);
  border-radius: var(--radius-full);
}

.checkout-step.is-done .checkout-step__num {
  background: var(--color-success);
  color: #fff;
}

.checkout-step__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
}

.checkout-step__sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Shipping method */
.ship-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: var(--space-3);
}

.ship-option:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
}

.ship-option.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(232, 98, 12, 0.1);
}

.ship-option__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: var(--radius-md);
  font-size: 1.3rem;
  color: var(--color-primary);
}

.ship-option__info {
  flex: 1;
}

.ship-option__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.ship-option__time {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.ship-option__price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

/* Payment methods */
.pay-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: var(--space-3);
}

.pay-option:hover {
  border-color: var(--color-border-strong);
}

.pay-option.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(232, 98, 12, 0.1);
}

.pay-option__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: var(--radius-md);
  font-size: 1.2rem;
  color: var(--color-secondary);
}

.pay-option__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  flex: 1;
}

.pay-option__tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-success);
  color: #fff;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.pay-option__tag--new {
  background: var(--color-accent);
}

/* Order summary */
.order-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.order-summary__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.order-summary__item + .order-summary__item {
  border-top: 1px solid var(--color-border);
}

.order-summary__thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface-alt);
}

.order-summary__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-summary__thumb-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  background: var(--color-secondary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-full);
}

.order-summary__info {
  flex: 1;
  min-width: 0;
}

.order-summary__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-summary__meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.order-summary__price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.order-summary__totals {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

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

@media (max-width: 991.98px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
  .order-summary {
    order: -1;
    position: static;
  }
}

/* --------------------------------------------------------------------------
   24. Toast
   -------------------------------------------------------------------------- */
.toast-host {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: min(360px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  transform: translateX(120%);
  transition: transform var(--transition-slow);
}

.toast.is-showing {
  transform: translateX(0);
}

.toast__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success);
  font-size: 1.1rem;
}

.toast__icon--primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.toast__icon--error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-error);
}

.toast__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.toast__msg {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

@media (max-width: 575.98px) {
  .toast-host {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   25. Modal (Quick View)
   -------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 5;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-full);
  font-size: 1.2rem;
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--color-error);
  color: #fff;
}

.qv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.qv__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt);
}

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

.qv__content {
  padding: var(--space-8);
}

@media (max-width: 767.98px) {
  .qv-grid {
    grid-template-columns: 1fr;
  }
  .qv__media {
    aspect-ratio: 1 / 0.8;
  }
}

/* --------------------------------------------------------------------------
   26. About Page
   -------------------------------------------------------------------------- */
.about-hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
}

.about-hero__bg {
  position: absolute;
  inset: 0;
}

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

.about-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(185deg, rgba(21, 26, 46, 0.25), rgba(21, 26, 46, 0.82));
}

.about-hero__content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: var(--space-10);
  max-width: 620px;
}

.about-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #FFB386;
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: var(--space-4);
}

.about-hero__title {
  color: #fff;
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-3);
}

.about-hero__text {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

/* Stats bar */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.stats-bar__item {
  text-align: center;
  padding-inline: var(--space-4);
}

.stats-bar__item + .stats-bar__item {
  border-left: 1px solid var(--color-border);
}

.stats-bar__num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  color: var(--color-primary);
  line-height: 1;
}

.stats-bar__num .suffix {
  color: var(--color-text);
}

.stats-bar__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

@media (max-width: 767.98px) {
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
  .stats-bar__item:nth-child(3) {
    border-left: none;
  }
}

/* Values cards */
.value-card {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.value-card__icon {
  width: 70px;
  height: 70px;
  margin: 0 auto var(--space-5);
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 1.8rem;
  position: relative;
}

.value-card__icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: all var(--transition-slow);
  transform: rotate(10deg);
}

.value-card:hover .value-card__icon::before {
  opacity: 1;
  transform: rotate(0);
}

/* Journey timeline */
.journey-timeline {
  position: relative;
  display: grid;
  gap: var(--space-10);
  padding-left: var(--space-8);
}

.journey-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(
    180deg,
    var(--color-primary) 0 6px,
    transparent 6px 12px
  );
}

.journey-item {
  position: relative;
}

.journey-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-8));
  top: 6px;
  width: var(--space-4);
  height: var(--space-4);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
}

.journey-item__year {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.journey-item__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  margin-bottom: var(--space-2);
}

.journey-item__text {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* Team */
.team-card {
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.team-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.team-card:hover .team-card__media img {
  transform: scale(1.06);
}

.team-card__body {
  padding: var(--space-6);
}

.team-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
}

.team-card__role {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Feature text helpers (About) */
.feature-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.feature-text {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

.split-media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-xl);
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  height: 100%;
}

.mini-feature i {
  font-size: 1.3rem;
  color: var(--color-primary);
}

.mini-feature strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}

.mini-feature span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

/* Order success modal */
.order-success {
  text-align: center;
  padding: var(--space-10) var(--space-8);
}

.order-success__icon {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-6);
  display: grid;
  place-items: center;
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success);
  border-radius: 50%;
  font-size: 2.6rem;
}

.order-success__title {
  font-weight: 800;
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
}

.order-success__text {
  color: var(--color-text-secondary);
  max-width: 360px;
  margin: 0 auto;
  line-height: var(--lh-relaxed);
}

.order-success__id {
  display: inline-block;
  margin-top: var(--space-5);
  padding: 10px 20px;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   27. Contact Page
   -------------------------------------------------------------------------- */
.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  height: 100%;
  transition: all var(--transition-base);
}

.contact-info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.contact-info-card__icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: grid;
  place-items: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 1.35rem;
}

.contact-info-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  margin-bottom: var(--space-1);
}

.contact-info-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
}

.map-placeholder {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 380px;
  background: var(--color-surface-alt);
}

.map-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.map-placeholder__overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 26, 46, 0.35);
  display: grid;
  place-items: center;
}

.map-placeholder__pin {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: var(--shadow-xl);
  animation: pin-bounce 2.5s infinite;
}

.map-placeholder__pin i {
  font-size: 1.5rem;
  color: var(--color-primary);
  transform: rotate(45deg);
}

@keyframes pin-bounce {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 14px; }
}

.map-placeholder__btn {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 2;
}

/* FAQ */
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.faq-item.is-open {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--color-text);
  text-align: left;
  transition: color var(--transition-fast);
}

.faq-item__q:hover {
  color: var(--color-primary);
}

.faq-item__q-icon {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--color-surface-alt);
  border-radius: 50%;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.faq-item.is-open .faq-item__q-icon {
  transform: rotate(45deg);
  background: var(--color-primary);
  color: #fff;
}

.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.faq-item.is-open .faq-item__a {
  max-height: 300px;
}

.faq-item__a-inner {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* --------------------------------------------------------------------------
   28. Login / Signup Page
   -------------------------------------------------------------------------- */
.auth-wrap {
  min-height: 640px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
}

.auth-aside {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 420px;
}

.auth-aside img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 26, 46, 0.3), rgba(21, 26, 46, 0.85));
}

.auth-aside__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  color: #fff;
  padding: var(--space-8);
}

.auth-aside__quote {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  max-width: 340px;
}

.auth-aside__meta {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
  margin-top: var(--space-3);
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}

.auth-panel__inner {
  width: 100%;
  max-width: 400px;
}

@media (max-width: 991.98px) {
  .auth-wrap {
    grid-template-columns: 1fr;
  }
  .auth-aside {
    min-height: 260px;
  }
}

/* --------------------------------------------------------------------------
   29. Animations & Reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--left {
  transform: translateX(-30px);
}

.reveal--right {
  transform: translateX(30px);
}

.reveal--left.is-visible,
.reveal--right.is-visible {
  transform: translateX(0);
}

[data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Kite diamond decorative accent */
.kite-diamond {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* Wind swish decoration */
.swish {
  position: relative;
  overflow: hidden;
}

.swish::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.9s ease;
  pointer-events: none;
}

.swish:hover::before {
  left: 130%;
}

/* --------------------------------------------------------------------------
   30. Utilities
   -------------------------------------------------------------------------- */
.text-primary { color: var(--color-primary) !important; }
.text-muted-2 { color: var(--color-text-muted) !important; }
.bg-surface { background: var(--color-surface) !important; }
.bg-surface-alt { background: var(--color-surface-alt) !important; }

.divider-string {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.divider-string::before,
.divider-string::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--color-border-strong) 0 6px, transparent 6px 12px);
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: var(--space-6);
  left: var(--space-6);
  z-index: var(--z-sticky);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 1.2rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--transition-base);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Scroll progress */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: calc(var(--z-sticky) + 5);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
}

@media (max-width: 575.98px) {
  .back-to-top {
    bottom: var(--space-4);
    left: var(--space-4);
  }
}

/* ==========================================================================
   End of Design System
   ========================================================================== */