:root {
      --brand:        #C8391A;
      --brand-dark:   #A02D13;
      --brand-light:  #FFF0ED;

      /* Secondary brand (deep blue) */
      --secondary:        #1e3c87;
      --secondary-dark:   #15296b;
      --secondary-light:  #E7F0FF;

      /* Useful brand gradients */
      --grad-brand:        linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
      --grad-secondary:    linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
      --grad-duo:          linear-gradient(135deg, var(--brand) 0%, var(--secondary) 100%);
      --grad-duo-soft:     linear-gradient(135deg, #FFF0ED 0%, #E7F0FF 100%);
      --grad-dark-duo:     linear-gradient(155deg, #1A1A1A 0%, var(--secondary-dark) 70%, var(--brand-dark) 130%);

      --ink:          #1A1A1A;
      --muted:        #6B6B6B;
      --border:       #E8E4DF;
      --bg:           #FAFAF8;
      --white:        #FFFFFF;
      --topbar-bg:    #1A1A1A;
      --shadow-sm:    0 1px 4px rgba(0,0,0,.07);
      --shadow-md:    0 4px 20px rgba(0,0,0,.10);
    }

    * { box-sizing: border-box; }
    body {
      font-family: 'Open Sans', sans-serif;
      background: #fafaf800;
      color: var(--ink);
      margin: 0;
    }

    /* ── TOP BAR ─────────────────────────────────────────── */
    .topbar {
      background: var(--topbar-bg);
      color: #ffffff;
      font-size: 12px;
      letter-spacing: .03em;
      padding: 7px 0;
    }
    .topbar a { color: #ffffff; text-decoration: none; }
    .topbar a:hover { color: #fff; }
    .topbar .sep { margin: 0 10px; opacity: .35; }
    .topbar .lang-switch {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .topbar .lang-switch button {
      background: none;
      border: 1px solid #444;
      color: #aaa;
      padding: 1px 8px;
      font-size: 11px;
      border-radius: 3px;
      cursor: pointer;
      transition: .2s;
    }
    .topbar .lang-switch button:hover,
    .topbar .lang-switch button.active { border-color: var(--brand); color: #fff; }

    @media (max-width: 768px) {
      .topbar .container > div {
        flex-direction: column;
        gap: 5px;
        text-align: center;
      }
      .topbar .d-flex.align-items-center.gap-1,
      .topbar .d-flex.align-items-center.gap-3 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
      }
      .topbar .sep {
        display: none;
      }
    }

    /* ── MAIN HEADER ─────────────────────────────────────── */
    .main-header {
      background: var(--white);
     
      padding: 14px 0;
      position: sticky;
      top: 0;
      z-index: 1000;
     
    }

    @media (max-width: 991px) {
      .main-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .main-header .main-header-row {
        display: grid !important; /* override any utility; was losing to d-flex */
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        width: 100%;
      }
      .main-header .search-wrap {
        display: none !important; /* Hide search bar on smaller screens */
      }
      .main-header .mobile-header-actions {
        grid-column: 1;
        justify-self: start;
        display: flex;
        align-items: center;
        gap: 2px;
      }
      .main-header .mobile-menu-trigger,
      .main-header .mobile-search-trigger {
        display: flex;
        padding: 6px 8px;
      }
      .main-header .mobile-menu-trigger span,
      .main-header .mobile-search-trigger span {
        display: none;
      }
      .main-header .logo-wrap {
        grid-column: 2;
        justify-self: center;
        text-align: center;
      }
      .main-header .logo-wrap > div {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .main-header .header-icons .icon-btn:nth-child(2) { /* Target the second icon, which is Wishlist */
        display: none !important;
      }
      .main-header .header-icons {
        gap: 12px;
        grid-column: 3;
        justify-self: end;
      }
      .main-header .icon-btn {
        padding: 6px 8px;
      }
      .main-header .icon-btn span {
        display: none; /* Hide text below icons on smaller screens */
      }
      .main-header .badge-dot {
        top: 2px; right: 2px;
      }
      .main-nav {
        display: none; /* Hide main nav on smaller screens, will be replaced by a mobile menu */
      }
    }

    /* ── MOBILE SEARCH ───────────────────────────────────── */
    .mobile-search-panel {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      background: var(--white, #fff);
      border-top: 1px solid var(--border, #e7e3dd);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
      z-index: 1099;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .2s ease, transform .2s ease;
      padding: 12px 0;
    }
    .mobile-search-panel.is-open {
      opacity: 1;
      transform: translateY(0);
    }
    .mobile-search-input-group {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f5f4f2;
      border: 1px solid var(--border, #e7e3dd);
      border-radius: 10px;
      padding: 6px 10px;
      transition: border-color .15s, background .15s;
      width: 370px;
    }
    .mobile-search-input-group:focus-within {
      border-color: var(--brand, #f1592a);
      background: #fff;
    }
    .mobile-search-icon {
      color: var(--brand, #f1592a);
      font-size: 16px;
      flex-shrink: 0;
    }
    .mobile-search-input.form-control {
      border: none;
      background: transparent;
      box-shadow: none;
      padding: 8px 4px;
      font-size: 15px;
      height: 40px;
      min-width: 0;
      flex: 1;
    }
    .mobile-search-input.form-control:focus {
      box-shadow: none;
      background: transparent;
    }
    .mobile-search-close {
      background: none;
      border: none;
      color: var(--muted, #6b6b6b);
      padding: 6px 8px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      flex-shrink: 0;
      transition: background .15s, color .15s;
    }
    .mobile-search-close:hover {
      background: #ece8e2;
      color: var(--ink, #1c1c1c);
    }
    .mobile-search-results {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      max-height: 60vh;
      overflow: auto;
      z-index: 1100;
    }
    @media (max-width: 991px) {
      body.mobile-search-open { overflow: hidden; }
    }

    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }
    .logo-icon {
      width: 40px; height: 40px;
      background: var(--brand);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      font-size: 20px;
    }
    .logo-text {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: 26px;
      color: var(--ink);
      line-height: 1;
    }
    .logo-text span { color: var(--brand); }
    .logo-tagline {
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
    }

    /* Search */
    .search-wrap {
      flex: 1;
      max-width: 1200px;
      position: relative;
    }
    .search-wrap .form-select {
      border-right: none;
      border-radius: 6px 0 0 6px;
      font-size: 12px;
      color: var(--muted);
      background-color: #f5f4f2;
      border-color: var(--border);
      max-width: 130px;
      height: 44px;
    }
    .search-wrap input {
      border-left: none;
      border-right: none;
      border-radius: 0;
      font-size: 14px;
      height: 44px;
      background: #f5f4f2;
      border-color: var(--border);
    }
    .search-wrap input:focus {
      box-shadow: none;
      border-color: var(--brand);
      background: #fff;
      z-index: 1;
    }
    .search-wrap .btn-search {
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 0 6px 6px 0;
      height: 44px;
      width: 50px;
      font-size: 16px;
      transition: background .2s;
    }
    .search-wrap .btn-search:hover { background: var(--brand-dark); }

    /* Icons */
    .header-icons {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .icon-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 6px 12px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--ink);
      text-decoration: none;
      border-radius: 8px;
      transition: background .15s;
      position: relative;
    }
    .icon-btn:hover { background: #f0eeeb; color: var(--brand); }
    .icon-btn i { font-size: 20px; }
    /* Iconoir header actions: black + strong weight (size bumps stroke presence) */
    .header-icons .icon-btn > i[class^='iconoir-'],
    .header-icons .icon-btn > i[class*=' iconoir-'] {
      color: #000;
      font-weight: 700;
      font-size: 25px;
      line-height: 1;
    }
    .header-icons .icon-btn:hover > i[class^='iconoir-'],
    .header-icons .icon-btn:hover > i[class*=' iconoir-'] {
      color: #000;
    }
    .icon-btn span {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .02em;
      color: black;
    }
    .icon-btn:hover span { color: var(--brand); }
    .badge-dot {
      position: absolute;
      top: 4px; right: 8px;
      background: var(--brand);
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      border-radius: 10px;
      padding: 1px 5px;
      min-width: 16px;
      text-align: center;
      line-height: 14px;
    }

    /* ── NAV MENU ────────────────────────────────────────── */
    .main-nav {
      background: var(--white);
      border-bottom: 1px solid var(--border);
    }
    .main-nav .nav-inner {
      display: flex;
      align-items: center;
      gap: 0;
    }
    .nav-all-cats {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--brand);
      color: #fff;
      padding: 10px 18px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .02em;
      text-decoration: none;
      transition: background .2s;
      white-space: nowrap;
    }
    .nav-all-cats:hover { background: var(--brand-dark); color: #fff; }
    .main-nav ul {
      list-style: none;
      margin: 0; padding: 0;
      display: flex;
    }
    .main-nav ul li a {
      display: block;
      padding: 11px 16px;
      font-size: 13.5px;
      font-weight: 500;
      color: var(--ink);
      text-decoration: none;
      transition: color .15s;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
      letter-spacing: .01em;
    }
    .main-nav ul li a:hover,
    .main-nav ul li a.active {
      color: var(--brand);
      border-bottom-color: var(--brand);
    }
    .nav-promo-badge {
      font-size: 10px;
      background: #FFE5B4;
      color: #A05A00;
      border-radius: 4px;
      padding: 1px 5px;
      font-weight: 700;
      margin-left: 4px;
      vertical-align: middle;
    }

    @media (max-width: 991px) {
      .main-nav {
        display: none;
      }
    }

    @media (min-width: 992px) {
      .main-nav {
        display: block;
      }
    }

/* Mobile Menu Offcanvas Styling */
#mobileMenuSidebar {
    width: 280px;
}

#mobileMenuSidebar .offcanvas-header {
    background: var(--bg);
}

#mobileMenuSidebar .offcanvas-title .logo-text {
    font-size: 24px;
}

#mobileMenuSidebar .offcanvas-body .nav-link {
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    transition: background 0.2s;
    border-radius: 6px;
}

#mobileMenuSidebar .offcanvas-body .nav-link:hover,
#mobileMenuSidebar .offcanvas-body .nav-link.active {
    background: var(--brand-light);
    color: var(--brand);
}

#mobileMenuSidebar .offcanvas-body .nav-item {
    margin-bottom: 5px;
}

    /* ── PROMO SLIDER ────────────────────────────────────── */
    .promo-bar {
      background: var(--brand-light);
      border-bottom: 1px solid #fdd8ce;
      padding: 9px 0;
      overflow: hidden;
    }
    .promo-track {
      display: flex;
      align-items: center;
      gap: 60px;
      white-space: nowrap;
      animation: slide-promo 30s linear infinite;
    }
    .promo-track:hover { animation-play-state: paused; }
    @keyframes slide-promo {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .promo-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--brand-dark);
      flex-shrink: 0;
    }
    .promo-item i { font-size: 15px; }
    .promo-item strong { font-weight: 700; }

    /* ── HERO BANNERS ────────────────────────────────────── */
    .hero-section { padding: 28px 15px 0; }

    .banner {
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 30px 28px;
      text-decoration: none;
      transition: transform .3s, box-shadow .3s;
    }
    .banner:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }
    .banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: inherit;
      z-index: 0;
    }
    .banner-content { position: relative; z-index: 1; }

    /* Big left banner */
    .banner-main {
      height: 440px;
      margin-bottom: 1rem; /* Add some space between stacked banners on mobile */
      background:
        linear-gradient(160deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,.15) 60%),
        #2b2b2b;
    }
    .banner-main .banner-bg {
      position: absolute; inset: 0; z-index: 0;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .banner-main .banner-bg svg { width: 100%; height: 100%; }

    .banner-main.banner-main--photo {
      padding: 0;
    }
    .hero-banner-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .banner.banner-main--photo::before,
    .banner.banner-side--photo::before {
      display: none;
    }

    /* Side banners with uploaded image */
    .banner-side.banner-side--photo {
      padding: 0;
    }
    .banner-side.banner-side--photo .banner-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      display: block;
    }

    .banner-tag {
      display: inline-block;
      background: var(--brand);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 4px;
      margin-bottom: 10px;
    }
    .banner-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: 38px;
      line-height: 1.1;
      color: #fff;
      margin-bottom: 8px;
    }
    .banner-sub {
      font-size: 14px;
      color: rgba(255,255,255,.75);
      margin-bottom: 20px;
      font-weight: 400;
    }
    .banner-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--brand);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .04em;
      padding: 10px 22px;
      border-radius: 6px;
      text-decoration: none;
      transition: background .2s, gap .2s;
    }
    .banner-cta:hover { background: var(--brand-dark); color: #fff; gap: 12px; }

    /* Side banners */
    .banner-side {
      height: 210px;
    }
    .banner-side-1 {
      background: linear-gradient(135deg, #EAF3FF 0%, #C8DEFF 100%);
    }
    .banner-side-2 {
      background: linear-gradient(135deg, #FFF8E7 0%, #FFE9A0 100%);
    }
    .banner-side .banner-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      color: var(--ink);
      font-size: 26px;
      margin-bottom: 4px;
    }
    .banner-side .banner-sub {
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 14px;
    }
    .banner-cta-outline {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1.5px solid var(--ink);
      color: var(--ink);
      font-size: 12px;
      font-weight: 600;
      padding: 7px 16px;
      border-radius: 5px;
      text-decoration: none;
      transition: .2s;
    }
    .banner-cta-outline:hover {
      background: var(--ink);
      color: #fff;
    }
    .banner-cta-outline.red {
      border-color: var(--brand);
      color: var(--brand);
    }
    .banner-cta-outline.red:hover { background: var(--brand); color: #fff; }

    /* Decorative corner graphic */
    .banner-deco {
      position: absolute;
      right: -10px; bottom: -10px;
      opacity: .18;
      font-size: 120px;
      line-height: 1;
      z-index: 0;
    }
    .banner-deco-top {
      position: absolute;
      right: 16px; top: 16px;
      opacity: .12;
      font-size: 90px;
    }

    /* ── TRUST STRIP ─────────────────────────────────────── */
    /* ── TRUST STRIP (UPGRADED) ──────────────────────────── */
/* ── TRUST STRIP (4-COLUMN UPGRADE) ──────────────────── */
.trust-strip {
  margin: 40px 0;
}
.trust-strip-inner {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  padding: 30px; /* Slightly more padding for the 4-item look */
}

@media (max-width: 768px) {
  .trust-strip-inner {
    padding: 20px;
  }
  .trust-item {
    padding: 8px;
  }
  .trust-item h6 {
    font-size: 14px;
  }
  .trust-item p {
    font-size: 11px;
  }
  .trust-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px;
  border-radius: 12px;
  transition: all 0.25s ease;
}

@media (max-width: 768px) {
  .trust-item {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}
.trust-item:hover {
  background: var(--bg);
  transform: translateY(-3px);
}
.trust-icon {
  width: 52px; height: 52px; /* Slightly larger icon */
  background: var(--brand-light);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  font-size: 22px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.trust-item:hover .trust-icon {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 15px rgba(200, 57, 26, 0.2);
}
.trust-item h6 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--ink);
}
.trust-item p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

    /* ── SECTION HEADING ─────────────────────────────────── */
    .section-heading {
      display: flex;
      align-items: baseline;
      gap: 16px;
      margin-bottom: 20px;
    }
    .section-heading h2 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 28px;
      font-weight: 700;
      margin: 0;
    }
    .section-heading a {
      font-size: 12.5px;
      color: var(--secondary);
      text-decoration: none;
      font-weight: 500;
    }
    .section-heading a:hover { text-decoration: underline; }

    @media (max-width: 768px) {
      .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 15px;
      }
      .section-heading h2 {
        font-size: 22px;
      }
      .section-heading a {
        font-size: 11.5px;
      }
    }

    /* ── CATEGORIES ──────────────────────────────────────── */
    .cat-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--ink);
      transition: .2s;
      text-align: center;
    }
    .cat-card:hover {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px var(--brand-light);
      color: var(--brand);
      transform: translateY(-2px);
    }
    .cat-icon {
      width: 52px; height: 52px;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px;
    }
    .cat-card p {
      font-size: 12px;
      color: var(--muted);
      margin: 0;
    }
    .cat-card strong { font-size: 13.5px; font-weight: 600; }

    /* responsive tweaks */
    @media (max-width: 991px) {
      .hero-section {
        padding-top: 20px;
      }
      .banner-main {
        height: 280px;
        margin-bottom: 15px;
      }
      .banner-main .banner-title {
        font-size: 28px;
      }
      .banner-main .banner-sub {
        font-size: 13px;
      }
      .banner-side {
        height: 180px;
      }
      .banner-side .banner-title {
        font-size: 22px;
      }
      .banner-side .banner-sub {
        font-size: 12px;
      }
    }

    /* ── PRODUCT SELECTION ──────────────────────────────── */
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 15px;
  transition: all 0.3s ease;
  position: relative;
  height: 100%;
}

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

.product-img-wrapper {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* Zone grise + centrage : uniquement sans vraie photo (icône ou fallback géré en PHP) */
.product-img-wrapper--placeholder {
  background: #f9f9f9;
  height: 200px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.product-card-hit {
  display: block;
}

/* Badge « Économisez » à la place du libellé catégorie (Notre sélection) */
.home-selection-section .product-card-economisez-line {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.25;
}

/* Plein cadre pour la grille d’accueil (voir plus bas `.product-detail-section` avec contain pour la fiche) */
.home-selection-section .product-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Notre sélection : carrousel Bootstrap (défilement auto + swipe), sans flèches ni pastilles */

.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.product-cat {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  display: block;
}

.product-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.35;
  min-height: 2.7em;
  height: auto;
  display: block;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 576px) {
  .product-name {
    font-size: 14px;
  }
  .product-price {
    font-size: 16px;
  }
  .price-old {
    font-size: 12px;
  }
  .add-to-cart-btn {
    font-size: 12px !important;
    padding: 6px !important;
  }
}

.product-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  display: flex;
  align-items: center;
  gap: 5px;
}

.price-old {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 400;
}

.add-to-cart-btn {
  width: 100%;
  margin-top: 15px;
  border: 1.5px solid var(--ink);
  background: black;
  color:white;
  font-size: 13px;
  font-weight: 600;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product-card:hover .add-to-cart-btn {
  background: var(--ink);
  color: #fff;
}

/* ── TOP VENTE TABS ─────────────────────────────────── */
.top-vente-tabs {
  border-bottom: none;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.top-vente-tabs .nav-item {
  flex-shrink: 0;
}
.top-vente-tabs .nav-link {
  border: 1px solid var(--border) !important;
  border-radius: 30px !important;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 20px;
  transition: all 0.2s;
  background: var(--white);
}
@media (max-width: 576px) {
  .top-vente-tabs {
    gap: 8px;
    margin-bottom: 20px;
  }
  .top-vente-tabs .nav-link {
    font-size: 12px;
    padding: 6px 15px;
  }
}
.top-vente-tabs .nav-link.active {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(30, 60, 135, 0.22);
}
.top-vente-tabs .nav-link:hover:not(.active) {
  border-color: var(--secondary);
  color: var(--secondary);
}

/* Reusing your product card styles for consistency */
.tab-pane .row {
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ── NOS UNIVERS — category cards ───────────────────────── */
.section-nos-univers .row {
  align-items: stretch;
}

.univers-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.25s ease;
}

.univers-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(200, 57, 26, 0.28);
}

.univers-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.univers-card__photo {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: linear-gradient(145deg, #eae8e4 0%, #f5f4f2 100%);
}

.univers-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(26, 26, 26, 0.14) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.univers-card:hover .univers-card__photo::after {
  opacity: 1;
}

.univers-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.univers-card:hover .univers-card__img {
  transform: scale(1.07);
}

.univers-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 20px;
  flex: 1;
  border-top: 1px solid var(--border);
}

.univers-card__text {
  min-width: 0;
}

.univers-card__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px;
}

.univers-card__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 8px;
  color: var(--ink);
}

.univers-card__meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

.univers-card__meta strong {
  color: var(--ink);
  font-weight: 600;
}

.univers-card__arrow {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.univers-card__arrow i {
  font-size: 18px;
  line-height: 1;
}

.univers-card:hover .univers-card__arrow {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translate(2px, -2px);
}

@media (max-width: 768px) {
  .univers-card__body {
    padding: 15px;
  }
  .univers-card__title {
    font-size: 1.15rem;
  }
  .univers-card__meta {
    font-size: 11.5px;
  }
  .univers-card__arrow {
    width: 36px;
    height: 36px;
  }
  .univers-card__arrow i {
    font-size: 16px;
  }
}

/* ── NOS MARQUES — brand showcase ───────────────────────── */
.section-nos-marques .home-marques-carousel .owl-stage {
  display: flex;
  align-items: stretch;
}

.section-nos-marques .home-marques-carousel .item {
  height: 100%;
  padding: 4px;
}

.marque-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 20px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.25s ease;
}

a.marque-card {
  cursor: pointer;
}

.marque-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 57, 26, 0.28);
  box-shadow: var(--shadow-md);
}

a.marque-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.marque-card__logo-wrap {
  width: 100%;
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
  padding: 14px;
  transition: background 0.25s ease;
}

.marque-card:hover .marque-card__logo-wrap {
  background: #fff;
}

.marque-card__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(20%);
  opacity: 0.92;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.marque-card:hover .marque-card__logo {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.04);
}

.marque-card__placeholder {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.marque-card__name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 768px) {
  .marque-card {
    padding: 14px 12px;
    gap: 10px;
    border-radius: 14px;
  }
  .marque-card__logo-wrap {
    padding: 10px;
    border-radius: 10px;
  }
  .marque-card__placeholder {
    font-size: 24px;
  }
  .marque-card__name {
    font-size: 12.5px;
  }
}

/* ── UPGRADED FOOTER ────────────────────────────────── */
footer {
  background: #0A1629; /* Deep Professional Navy */
  color: #FFFFFF;
  padding: 80px 0 40px;
  margin-top: 60px;
  font-family: 'Open Sans', sans-serif;
}

.footer-heading {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #FFFFFF;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #A3ABB7;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

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

.app-badges img {
  height: 40px;
  margin-bottom: 10px;
  display: block;
}

.social-icons {
  display: flex;
  gap: 15px;
  font-size: 20px;
  margin-top: 20px;
}

.social-icons a {
  color: #FFFFFF;
  transition: opacity 0.2s;
}

.social-icons a:hover {
  opacity: 0.7;
}

.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.payment-card {
  background: #FFFFFF;
  border-radius: 4px;
  padding: 4px 8px;
  height: 28px;
  display: flex;
  align-items: center;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 60px;
  padding-top: 30px;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.footer-bottom-links a {
  color: #A3ABB7;
  font-size: 12px;
  text-decoration: none;
}

.copyright {
  text-align: center;
  color: #6B7280;
  font-size: 13px;
  margin-bottom: 15px;
}

/* Sidebar Cart Styling */
#cartSidebar {
    width: 380px; /* Slightly wider for professional look */
    border-left: none;
}

#wishlistSidebar {
    width: 380px;
    border-left: none;
}

#cartSidebar .offcanvas-header {
    background: var(--bg);
}

#wishlistSidebar .offcanvas-header {
    background: var(--bg);
}

#cartSidebar .btn-close:focus {
    box-shadow: none;
}

#wishlistSidebar .btn-close:focus {
    box-shadow: none;
}

#cartSidebar .offcanvas-footer {
    box-shadow: 0 -10px 20px rgba(0,0,0,0.03);
}

#cartSidebar .cart-line-product-title {
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

/* Specific button fix for the icon trigger */
button.icon-btn {
    background: none;
    border: none;
    outline: none;
}

/* Custom Quantity Selector */
.qty-selector {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF; /* White background */
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 50px !important; /* Important/Significant rounded corners */
  box-shadow: var(--shadow-sm);
  height: 38px;
}

.btn-qty {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg); /* Light grey for the button circle */
  color: var(--ink);
  border-radius: 50% !important; /* Circular buttons */
  font-size: 14px;
  transition: all 0.2s ease;
}

.btn-qty:hover {
  background: var(--brand);
  color: #FFFFFF;
}

.qty-input {
  width: 35px;
  border: none;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  background: transparent;
  color: var(--ink);
  outline: none;
}

/* Cart modal: make qty selector look like a white card */
#cartSidebar .cart-qty-controls {
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 18px !important;
  padding: 4px 6px;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
  height: auto;
  gap: 8px;
}

#cartSidebar .cart-qty-controls .btn-qty {
  background: #f5f6f8;
}

#cartSidebar .cart-qty-controls .qty-input {
  background: #fff;
  min-width: 34px;
  border: none !important;
  box-shadow: none !important;
}

/* ── BREADCRUMB ───────────────────────────────────────── */
    .breadcrumb-section {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 12px 0;
    }
    .breadcrumb {
      margin: 0; padding: 0; font-size: 12.5px;
    }
    .breadcrumb-item a {
      color: var(--muted); text-decoration: none;
      transition: color .15s;
    }
    .breadcrumb-item a:hover { color: var(--brand); }
    .breadcrumb-item.active { color: var(--ink); font-weight: 500; }
    .breadcrumb-item + .breadcrumb-item::before {
      color: var(--border);
    }

    /* ── PRODUCT DETAIL SECTION ───────────────────────────── */
    .product-detail-section { padding: 36px 0 20px; }

    /* ── IMAGE GALLERY ────────────────────────────────────── */
    .gallery-wrap { position: sticky; top: 80px; }

    .gallery-main {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      aspect-ratio: 1 / 1;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; position: relative;
      margin-bottom: 12px;
    }
    .gallery-main img {
      width: 100%; height: 100%; object-fit: contain;
      transition: transform .4s ease;
      padding: 20px;
    }
    .gallery-main:hover img { transform: scale(1.04); }

    .gallery-badge-stack {
      position: absolute;
      top: 14px; left: 14px;
      display: flex; flex-direction: column; gap: 6px;
      z-index: 2;
    }
    .gb {
      display: inline-block;
      font-size: 10px; font-weight: 700;
      padding: 4px 9px; border-radius: 5px;
      letter-spacing: .06em; text-transform: uppercase;
    }
    .gb-promo    { background: var(--brand); color: #fff; }
    .gb-new      { background: #1A1A1A; color: #fff; }
    .gb-stock    { background: #E8F5E9; color: #2E7D32; }
    .gb-pro      { background: #FFF8E7; color: #7B5800; }
    .gb-warranty { background: #EAF3FF; color: #1A4B8B; }

    .gallery-action-btns {
      position: absolute; top: 14px; right: 14px;
      display: flex; flex-direction: column; gap: 8px; z-index: 2;
    }
    .gallery-fab {
      width: 38px; height: 38px;
      background: var(--white); border: 1px solid var(--border);
      border-radius: 10px; display: flex; align-items: center; justify-content: center;
      font-size: 17px; cursor: pointer; color: var(--muted);
      transition: .2s; box-shadow: var(--shadow-sm);
    }
    .gallery-fab:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
    .gallery-fab.active { color: var(--brand); border-color: var(--brand); }

    .gallery-thumbs {
      display: flex; gap: 8px;
    }
    .gallery-thumb {
      flex: 1; aspect-ratio: 1/1;
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: 10px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: .2s; padding: 6px;
    }
    .gallery-thumb img {
      width: 100%; height: 100%; object-fit: contain;
    }
    .gallery-thumb:hover,
    .gallery-thumb.active {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px var(--brand-light);
    }

    /* ── PRODUCT INFO PANEL ───────────────────────────────── */
    .product-info-panel { padding-left: 32px; }

    .product-info-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px 26px;
      position: relative;
    }

    .detail-wishlist-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transition: .2s;
      box-shadow: var(--shadow-sm);
      z-index: 2;
    }
    .detail-wishlist-btn:hover {
      color: #d63384;
      border-color: #f5bfd7;
      background: #fff3f8;
    }

    .product-category-trail {
      display: flex; align-items: center; gap: 6px;
      flex-wrap: wrap; margin-bottom: 12px;
    }
    .cat-pill {
      font-size: 11px; font-weight: 600; letter-spacing: .06em;
      text-transform: uppercase; color: var(--brand);
      background: var(--brand-light); padding: 3px 10px;
      border-radius: 20px; text-decoration: none;
      transition: .15s;
    }
    .cat-pill:hover { background: var(--brand); color: #fff; }
    .cat-sep { color: var(--border); font-size: 14px; }

    .product-brand-link {
      display: inline-block;
      text-decoration: none;
      margin-bottom: 12px;
      line-height: 0;
      transition: opacity .2s;
    }
    .product-brand-link:hover { opacity: .85; }
    .product-brand-logo {
      display: block;
      height: 36px;
      width: auto;
      max-width: 180px;
      object-fit: contain;
      object-position: left center;
    }

    .product-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 28px; font-weight: 700;
      line-height: 1.25; color: var(--ink);
      margin-bottom: 10px;
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
    }

    /* Ratings row */
    .ratings-row {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 18px; flex-wrap: wrap;
    }
    .stars { color: #F59E0B; font-size: 14px; letter-spacing: 1px; }
    .ratings-count { font-size: 12.5px; color: var(--muted); }
    .ratings-count a { color: var(--brand); text-decoration: none; }
    .sku-ref { font-size: 12px; color: var(--muted); }
    .sku-ref strong { color: var(--ink); }

    /* Price block */
    .price-block {
    /* background: linear-gradient(135deg, #FFF6F4 0%, var(--white) 100%); */
    /* border: 1px solid #FDDDD5; */
    border-radius: 14px;
    /* padding: 20px 22px; */
    margin-bottom: 22px;
}

    .product-description-below-price {
      margin-top: 4px;
      margin-bottom: 8px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
      font-size: 15px;
      line-height: 1.75;
      color: var(--ink);
    }
    .product-description-below-price p:last-child {
      margin-bottom: 0;
    }
    .product-description-below-price img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
    }
    .price-main {
      font-size: 36px; font-weight: 700;
      color: var(--brand); line-height: 1;
      margin-bottom: 4px;
    }
    .price-main sup { font-size: 18px; vertical-align: super; }
    .price-old-row {
      display: flex; align-items: center; gap: 10px;
      font-size: 13.5px; color: var(--muted);
    }
    .price-was { text-decoration: line-through; }
    .price-discount-badge {
      background: var(--brand); color: #fff;
      font-size: 11px; font-weight: 700;
      padding: 2px 8px; border-radius: 4px;
    }
    .price-vat { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

    /* Variant selector */
    .variant-section { margin-bottom: 20px; }
    .variant-label {
      font-size: 12.5px; font-weight: 600;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--muted); margin-bottom: 10px;
    }
    .variant-label strong { color: var(--ink); font-weight: 700; }
    .variant-options { display: flex; gap: 8px; flex-wrap: wrap; }
    .variant-btn {
      padding: 7px 16px; border: 1.5px solid var(--border);
      border-radius: 8px; font-size: 13px; font-weight: 500;
      cursor: pointer; background: var(--white);
      color: var(--ink); transition: .2s;
    }
    .variant-btn:hover,
    .variant-btn.active {
      border-color: var(--brand); background: var(--brand-light);
      color: var(--brand);
    }
    .variant-btn.disabled {
      opacity: .4; cursor: not-allowed; text-decoration: line-through;
    }

    /* Quantity + CTA */
    .cta-section { margin-bottom: 22px; }
    .qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
    .qty-label { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
    .qty-control {
      display: flex; align-items: center;
      border: 1.5px solid var(--border); border-radius: 10px;
      overflow: hidden;
    }
    .qty-btn {
      width: 38px; height: 38px;
      background: none; border: none; cursor: pointer;
      font-size: 18px; color: var(--ink);
      display: flex; align-items: center; justify-content: center;
      transition: background .15s;
    }
    .qty-btn:hover { background: var(--bg); }
    .qty-input {
      width: 48px; height: 38px; border: none; border-left: 1px solid var(--border);
      border-right: 1px solid var(--border); text-align: center;
      font-size: 14px; font-weight: 600; color: var(--ink);
      background: var(--white);
    }
    .qty-input:focus { outline: none; }

    .btn-add-cart {
      width: 100%; padding: 14px;
      background: var(--ink); color: #fff;
      border: none; border-radius: 10px;
      font-size: 15px; font-weight: 600;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      cursor: pointer; transition: .2s; margin-bottom: 10px;
      letter-spacing: .02em;
    }
    .btn-add-cart:hover { background: #2d2d2d; transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .btn-add-cart-inline {
      width: auto;
      margin-bottom: 0;
      padding: 10px 16px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    @media (max-width: 576px) {
      .qty-row {
        flex-wrap: nowrap;
        gap: 8px;
      }
      .qty-btn {
        width: 36px;
        height: 44px;
        font-size: 18px;
      }
      .qty-input {
        width: 44px;
        height: 44px;
        font-size: 14px;
      }
      .btn-add-cart-inline {
        flex: 1;
        min-width: 0;
        justify-content: center;
        font-size: 15px;
        padding: 14px 16px;
        font-weight: 700;
      }
    }
    .btn-buy-now {
      width: 100%; padding: 14px;
      background: var(--brand); color: #fff;
      border: none; border-radius: 10px;
      font-size: 15px; font-weight: 600;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      cursor: pointer; transition: .2s;
      letter-spacing: .02em;
    }
    .btn-buy-now:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200,57,26,.25); }

    /* Trust mini strip */
    .mini-trust {
      display: flex; flex-wrap: wrap; gap: 10px;
      margin-top: 18px;
    }
    .mini-trust-item {
      display: flex; align-items: center; gap: 7px;
      font-size: 12px; color: var(--muted); flex: 1; min-width: 140px;
    }
    .mini-trust-item i { font-size: 15px; color: var(--brand); }

    /* ── BADGES SECTION ───────────────────────────────────── */
    .badges-strip {
      display: flex; flex-wrap: wrap; gap: 10px;
      padding: 16px 0; margin-bottom: 4px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      margin-top: 18px;
    }
    .badge-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px; border-radius: 30px;
      font-size: 12px; font-weight: 600;
      border: 1.5px solid;
    }
    .badge-chip i { font-size: 14px; }
    .badge-chip.green  { color: #2E7D32; border-color: #C8E6C9; background: #F1F8F1; }
    .badge-chip.blue   { color: #1A4B8B; border-color: #BBDEFB; background: #EAF3FF; }
    .badge-chip.orange { color: #7B5800; border-color: #FFE0B2; background: #FFF8E7; }
    .badge-chip.red    { color: var(--brand); border-color: #FDDDD5; background: var(--brand-light); }
    .badge-chip.dark   { color: var(--ink); border-color: #CCC; background: #F5F5F5; }

    /* ── TABS SECTION ─────────────────────────────────────── */
    .product-tabs-section { margin-top: 48px; margin-bottom: 40px; }

    .detail-tabs .nav-link {
      font-size: 14px; font-weight: 600; color: var(--muted);
      border: none; border-bottom: 2px solid transparent;
      padding: 12px 20px; border-radius: 0;
      transition: .2s;
    }
    .detail-tabs .nav-link:hover { color: var(--brand); }
    .detail-tabs .nav-link.active {
      color: var(--brand); border-bottom-color: var(--brand);
      background: none;
    }
    .detail-tabs-content {
      background: var(--white);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 16px 16px;
      padding: 32px;
    }
    .tab-nav-wrap {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px 16px 0 0;
      border-bottom: none;
    }

    /* Description tab */
    .desc-lead {
      font-size: 15px; line-height: 1.8; color: var(--ink);
      margin-bottom: 24px;
    }
    .desc-feature-list {
      list-style: none; margin: 0; padding: 0;
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .desc-feature-list li {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 14px; color: var(--ink); line-height: 1.5;
    }
    .desc-feature-list li i {
      color: var(--brand); font-size: 16px; margin-top: 1px; flex-shrink: 0;
    }
    @media (max-width: 600px) {
      .desc-feature-list { grid-template-columns: 1fr; }
    }

    /* Specs tab */
    .specs-table {
      width: 100%; border-collapse: collapse;
    }
    .specs-table tr:nth-child(even) td { background: var(--bg); }
    .specs-table td {
      padding: 11px 16px; font-size: 13.5px;
      border-bottom: 1px solid var(--border);
    }
    .specs-table td:first-child {
      font-weight: 600; color: var(--muted);
      width: 38%; white-space: nowrap;
    }
    .specs-table td:last-child { color: var(--ink); }

    /* Reviews tab */
    .rating-summary-box {
      display: flex; align-items: center; gap: 40px;
      padding: 24px; background: var(--bg);
      border-radius: 14px; margin-bottom: 28px;
    }
    .rating-big {
      text-align: center; min-width: 80px;
    }
    .rating-big .num {
      font-size: 52px; font-weight: 700; color: var(--ink); line-height: 1;
    }
    .rating-big .stars-big { color: #F59E0B; font-size: 16px; letter-spacing: 2px; margin: 4px 0; }
    .rating-big .total { font-size: 12px; color: var(--muted); }
    .rating-bars { flex: 1; }
    .rating-bar-row {
      display: flex; align-items: center; gap: 10px;
      font-size: 12.5px; color: var(--muted); margin-bottom: 5px;
    }
    .rating-bar-row .label { min-width: 30px; }
    .bar-track {
      flex: 1; height: 6px; background: var(--border);
      border-radius: 10px; overflow: hidden;
    }
    .bar-fill { height: 100%; background: #F59E0B; border-radius: 10px; }
    .rating-bar-row .count { min-width: 20px; text-align: right; }

    .review-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 14px; padding: 20px;
      margin-bottom: 14px;
    }
    .review-top {
      display: flex; align-items: flex-start; justify-content: space-between;
      margin-bottom: 10px;
    }
    .reviewer-name { font-weight: 700; font-size: 14px; }
    .reviewer-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .review-stars { color: #F59E0B; font-size: 13px; }
    .review-verified {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; color: #2E7D32; font-weight: 600;
      background: #F1F8F1; padding: 2px 8px; border-radius: 20px;
    }
    .review-body { font-size: 13.5px; color: var(--ink); line-height: 1.65; }

    /* ── SECTION HEADING ──────────────────────────────────── */
    .section-heading {
      display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px;
    }
    .section-heading h2 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 26px; font-weight: 700; margin: 0;
    }
    .section-heading a {
      font-size: 12.5px;
      color: var(--secondary);
      text-decoration: none;
      font-weight: 600;
    }
    .section-heading a:hover { text-decoration: underline; }

    /* ── RELATED PRODUCTS ─────────────────────────────────── */
    .related-section { padding: 0 0 60px; }

    .product-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: 16px; padding: 15px;
      transition: all 0.3s ease; position: relative; height: 100%;
    }
    .product-card:hover {
      border-color: var(--brand); box-shadow: var(--shadow-md);
      transform: translateY(-5px);
    }

    .product-img-wrapper img {
      width: 100%; height: 100%; object-fit: contain; padding: 10px;
    }
    .product-badge {
      position: absolute; top: 10px; left: 10px;
      background: var(--brand); color: #fff;
      font-size: 10px; font-weight: 700; padding: 3px 8px;
      border-radius: 4px; text-transform: uppercase;
    }
    .product-badge.new-badge { background: #1A1A1A; }
    .product-cat {
      font-size: 11px; color: var(--muted);
      text-transform: uppercase; letter-spacing: .05em;
      margin-bottom: 4px; display: block;
    }
    .product-name {
      font-size: 14px; font-weight: 600; color: var(--ink);
      margin-bottom: 8px; line-height: 1.35;
      min-height: 2.7em;
      height: auto;
      display: block;
      overflow: visible;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .product-price {
      font-size: 17px; font-weight: 700; color: var(--brand);
      display: flex; align-items: center; gap: 5px;
    }
    .price-old {
      font-size: 13px; color: var(--muted);
      text-decoration: line-through; font-weight: 400;
    }
    .add-to-cart-btn {
      width: 100%; margin-top: 12px;
      border: 1.5px solid var(--ink); background: black;
      color: white; font-size: 13px; font-weight: 600;
      padding: 8px; border-radius: 8px; transition: all 0.2s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      cursor: pointer;
    }
    .product-card:hover .add-to-cart-btn { background: #222; }

    /* ── PROMO BAR ────────────────────────────────────────── */
    .promo-bar {
      background: var(--brand-light); border-bottom: 1px solid #fdd8ce;
      padding: 9px 0; overflow: hidden;
    }
    .promo-track {
      display: flex; align-items: center; gap: 60px;
      white-space: nowrap; animation: slide-promo 30s linear infinite;
    }
    .promo-track:hover { animation-play-state: paused; }
    @keyframes slide-promo {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .promo-item {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 13px; font-weight: 500; color: var(--brand-dark); flex-shrink: 0;
    }
    .promo-item i { font-size: 15px; }
    .promo-item strong { font-weight: 700; }

    /* ── STOCK INDICATOR ──────────────────────────────────── */
    .stock-indicator {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; font-weight: 600; margin-bottom: 18px;
    }
    .stock-indicator.in-stock {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #2E7D32;
      color: #fff;
      padding: 7px 14px;
      border-radius: 25px;
    }
    .stock-indicator.in-stock i.bi {
      font-size: 15px;
      line-height: 1;
      color: #fff !important;
      -webkit-text-fill-color: #fff;
    }
    .stock-indicator.in-stock i.bi::before {
      color: #fff !important;
    }
    .stock-indicator.out-stock {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #B71C1C;
      color: #fff;
      padding: 7px 14px;
      border-radius: 25px;
    }
    .stock-indicator.out-stock i.bi {
      color: #fff !important;
      -webkit-text-fill-color: #fff;
    }
    .stock-last-pieces {
      display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 600;
    color: #B45309;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 25px;
    padding: 5px 12px;
    margin: 0 0 14px;
    }
    .stock-last-pieces i.bi {
      font-size: 14px;
      flex-shrink: 0;
      color: #D97706;
    }
    .stock-hints-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin: 0 0 14px;
    }
    .stock-hints-row .stock-last-pieces {
      margin: 0;
    }
    .stock-dot {
      width: 8px; height: 8px; border-radius: 50%;
      flex-shrink: 0;
    }
    .stock-dot.in-stock { background: #4CAF50; box-shadow: 0 0 0 3px #C8E6C9; }
    .stock-dot.low-stock { background: #FF9800; box-shadow: 0 0 0 3px #FFE0B2; }
    .stock-text.in  { color: #2E7D32; }
    .stock-text.low { color: #E65100; }

    /* ── FOOTER ───────────────────────────────────────────── */
    footer {
      background: #0A1629; color: #fff;
      padding: 80px 0 40px; margin-top: 0;
      font-family: 'Open Sans', sans-serif;
    }
    .footer-heading { font-size: 16px; font-weight: 700; margin-bottom: 25px; color: #fff; }
    .footer-links { list-style: none; padding: 0; margin: 0; }
    .footer-links li { margin-bottom: 12px; }
    .footer-links a { color: #A3ABB7; text-decoration: none; font-size: 14px; transition: color .2s; }
    .footer-links a:hover { color: var(--brand); }
    .app-badges img { height: 40px; margin-bottom: 10px; display: block; }
    .social-icons { display: flex; gap: 15px; font-size: 20px; margin-top: 20px; }
    .social-icons a { color: #fff; transition: opacity .2s; }
    .social-icons a:hover { opacity: .7; }
    .payment-methods { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
    .payment-card {
      background: #fff; border-radius: 4px; padding: 4px 8px;
      height: 28px; display: flex; align-items: center;
    }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.1);
      margin-top: 60px; padding-top: 24px;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px;
    }
    .copyright { font-size: 12.5px; color: #A3ABB7; margin: 0; }
    .footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
    .footer-bottom-links a { color: #A3ABB7; font-size: 12px; text-decoration: none; }
    .footer-bottom-links a:hover { color: var(--brand); }

    @media (max-width: 768px) {
      footer {
        padding: 50px 0 30px;
      }
      .footer-heading {
        margin-bottom: 15px;
        font-size: 15px;
      }
      .footer-links li {
        margin-bottom: 8px;
      }
      .footer-links a {
        font-size: 13px;
      }
      .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        margin-top: 40px;
        padding-top: 20px;
      }
      .footer-bottom-links {
        justify-content: center;
      }
      .copyright {
        font-size: 11.5px;
      }
      .social-icons {
        justify-content: center;
      }
    }

    /* ── RESPONSIVE ───────────────────────────────────────── */
    @media (max-width: 768px) {
      .product-info-panel { padding-left: 0; margin-top: 24px; }
      .product-info-card { padding: 20px 18px; border-radius: 14px; }
      .product-title { font-size: 22px; }
      .price-main { font-size: 28px; }
      .rating-summary-box { flex-direction: column; gap: 20px; }
      .detail-tabs-content { padding: 20px; }
    }

    /* ── STICKY BUY BAR (mobile) ──────────────────────────── */
    .sticky-buy-bar {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      background: var(--white); border-top: 1px solid var(--border);
      padding: 12px 20px; z-index: 999;
      box-shadow: 0 -4px 20px rgba(0,0,0,.1);
      gap: 10px;
    }
    @media (max-width: 768px) {
      .sticky-buy-bar { display: flex; }
      body { padding-bottom: 80px; }
    }
    .sticky-buy-bar .price { font-size: 20px; font-weight: 700; color: var(--brand); }
    .sticky-buy-bar .btn-add-cart,
    .sticky-buy-bar .btn-buy-now { margin: 0; flex: 1; padding: 12px; font-size: 14px; }

    /* ── ZOOM MODAL ───────────────────────────────────────── */
    .zoom-backdrop {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.85); z-index: 9999;
      align-items: center; justify-content: center;
    }
    .zoom-backdrop.open { display: flex; }
    .zoom-backdrop img {
      max-width: 90vw; max-height: 90vh;
      object-fit: contain; border-radius: 8px;
    }
    .zoom-close {
      position: absolute; top: 20px; right: 24px;
      color: #fff; font-size: 28px; cursor: pointer; background: none; border: none;
    }
    .cart-section {
      padding: 28px 0 60px;
      min-height: 60vh;
  }

  .cart-page-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 28px;
  }

  .cart-page-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 30px;
      font-weight: 700;
      margin: 0;
      color: var(--ink);
  }

  .cart-count-label {
      background: var(--brand-light);
      color: var(--brand);
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      border: 1px solid #fdd8ce;
  }

  /* ── EMPTY STATE ──────────────────────────────────── */
  .cart-empty-state {
      text-align: center;
      padding: 80px 20px;
  }

  .cart-empty-icon {
      font-size: 72px;
      color: var(--border);
      margin-bottom: 24px;
      line-height: 1;
  }

  .cart-empty-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 26px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 12px;
  }

  .cart-empty-text {
      font-size: 15px;
      color: var(--muted);
      max-width: 420px;
      margin: 0 auto 32px;
      line-height: 1.6;
  }

  /* ── ITEMS WRAP ───────────────────────────────────── */
  .cart-items-wrap {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
  }

  .cart-items-header {
      display: grid;
      grid-template-columns: 1fr 140px 140px 120px;
      gap: 12px;
      padding: 14px 24px;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
  }

  /* ── SINGLE CART ITEM ─────────────────────────────── */
  .cart-item {
      display: grid;
      grid-template-columns: 1fr 140px 140px 120px;
      gap: 12px;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      transition: background .15s;
  }

  .cart-item:last-child { border-bottom: none; }
  .cart-item:hover { background: #fdfcfb; }

  .cart-item-product {
      display: flex;
      align-items: center;
      gap: 16px;
  }

  .cart-item-img-wrap {
      width: 88px;
      height: 88px;
      border-radius: 10px;
      border: 1px solid var(--border);
      overflow: hidden;
      flex-shrink: 0;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .cart-item-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 6px;
  }

  .cart-item-meta {
      flex: 1;
      min-width: 0;
  }

  .cart-item-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.35;
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .cart-item-variant {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 8px;
      display: block;
  }

  .cart-item-remove-btn {
      background: none;
      border: none;
      padding: 0;
      font-size: 12px;
      color: #cc3300;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: opacity .15s;
      font-weight: 500;
  }

  .cart-item-remove-btn:hover { opacity: .7; }

  .cart-item-price {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
  }

  .cart-item-price-old {
      display: block;
      font-size: 12px;
      color: var(--muted);
      text-decoration: line-through;
      font-weight: 400;
      margin-top: 2px;
  }

  .cart-item-subtotal {
      font-size: 16px;
      font-weight: 700;
      color: var(--brand);
  }

  /* qty control (reuses product-detail style) */
  .cart-item .qty-control {
      display: inline-flex;
      align-items: center;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: var(--bg);
  }

  .cart-item .qty-btn {
      width: 34px;
      height: 34px;
      background: none;
      border: none;
      font-size: 18px;
      cursor: pointer;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s, color .15s;
      line-height: 1;
  }

  .cart-item .qty-btn:hover {
      background: var(--brand);
      color: #fff;
  }

  .cart-item .qty-input {
      width: 44px;
      text-align: center;
      border: none;
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      background: var(--white);
      height: 34px;
      outline: none;
      -moz-appearance: textfield;
  }

  .cart-item .qty-input::-webkit-inner-spin-button,
  .cart-item .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

  /* ── CART FOOTER ACTIONS ──────────────────────────── */
  .cart-actions-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      background: var(--bg);
      border-top: 1px solid var(--border);
  }

  .cart-continue-btn {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color .15s;
  }

  .cart-continue-btn:hover { color: var(--brand); }

  .cart-clear-btn {
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color .15s;
  }

  .cart-clear-btn:hover { color: #cc3300; }

  /* ── TRUST STRIP IN CART ──────────────────────────── */
  .cart-trust-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
  }

  .cart-trust-item {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
      transition: all .2s;
  }

  .cart-trust-item:hover {
      border-color: var(--brand);
      color: var(--ink);
      transform: translateY(-2px);
  }

  .cart-trust-icon {
      width: 40px;
      height: 40px;
      background: var(--brand-light);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--brand);
      font-size: 18px;
      transition: all .2s;
  }

  .cart-trust-item:hover .cart-trust-icon {
      background: var(--brand);
      color: #fff;
  }

  /* ── SUMMARY CARD ─────────────────────────────────── */
  .cart-summary-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px;
      box-shadow: var(--shadow-sm);
      position: sticky;
      top: 90px;
  }

  .cart-summary-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 20px;
      color: var(--ink);
  }

  .cart-summary-lines {
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .cart-summary-line {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: var(--ink);
  }

  .cart-summary-line span:first-child { color: var(--muted); }

  .cart-summary-divider {
      border-top: 1px solid var(--border);
      margin: 18px 0;
  }

  .cart-summary-total {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 20px;
  }

  .cart-summary-total span:last-child {
      font-size: 22px;
      color: var(--brand);
  }

  /* ── FREE SHIPPING PROGRESS ───────────────────────── */
  .cart-delivery-info {
      background: var(--brand-light);
      border: 1px solid #fdd8ce;
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 18px;
  }

  .delivery-bar-label {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--brand-dark);
      margin-bottom: 8px;
  }

  .delivery-progress-bg {
      height: 6px;
      background: #fdd8ce;
      border-radius: 3px;
      overflow: hidden;
  }

  .delivery-progress-fill {
      height: 100%;
      background: var(--brand);
      border-radius: 3px;
      transition: width .4s ease;
  }

  /* ── COUPON ───────────────────────────────────────── */
  .cart-coupon-wrap {
      margin-bottom: 20px;
  }

  .cart-coupon-label {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink);
      display: block;
      margin-bottom: 8px;
  }

  .cart-coupon-row {
      display: flex;
      gap: 0;
  }

  .cart-coupon-input {
      flex: 1;
      border: 1.5px solid var(--border);
      border-right: none;
      border-radius: 8px 0 0 8px;
      padding: 10px 14px;
      font-size: 13.5px;
      color: var(--ink);
      background: var(--bg);
      outline: none;
      transition: border-color .2s;
  }

  .cart-coupon-input:focus {
      border-color: var(--brand);
      background: var(--white);
  }

  .cart-coupon-btn {
      background: var(--ink);
      color: var(--white);
      border: none;
      border-radius: 0 8px 8px 0;
      padding: 10px 18px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s;
      white-space: nowrap;
  }

  .cart-coupon-btn:hover { background: var(--brand); }

  .cart-coupon-msg {
      font-size: 12px;
      margin: 6px 0 0;
      min-height: 18px;
  }

  .cart-coupon-msg.success { color: #2E7D32; }
  .cart-coupon-msg.error   { color: #B71C1C; }

  /* ── CHECKOUT BTN ─────────────────────────────────── */
  .cart-checkout-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 16px;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .02em;
      border-radius: 10px;
      text-decoration: none;
      margin-bottom: 12px;
  }

  .cart-secure-note {
      text-align: center;
      font-size: 12px;
      color: var(--muted);
      margin: 0;
  }

  /* ── CONFIRM DELETE MODAL ─────────────────────────── */
  .cart-confirm-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      z-index: 9000;
      align-items: center;
      justify-content: center;
  }

  .cart-confirm-backdrop.open { display: flex; }

  .cart-confirm-modal {
      background: var(--white);
      border-radius: 14px;
      padding: 28px 32px;
      box-shadow: var(--shadow-md);
      width: 100%;
      max-width: 340px;
      text-align: center;
  }

  .cart-confirm-text {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 20px;
  }

  .cart-confirm-actions {
      display: flex;
      gap: 12px;
  }

  .cart-confirm-cancel,
  .cart-confirm-ok {
      flex: 1;
      padding: 11px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: .15s;
  }

  .cart-confirm-cancel {
      background: var(--bg);
      border: 1.5px solid var(--border);
      color: var(--ink);
  }

  .cart-confirm-cancel:hover { background: #eee; }

  .cart-confirm-ok {
      background: #B71C1C;
      color: #fff;
  }

  .cart-confirm-ok:hover { background: #8B0000; }

  /* ── RESPONSIVE ───────────────────────────────────── */
  @media (max-width: 991px) {
      .cart-summary-card { position: static; }
  }

  @media (max-width: 767px) {
      .cart-items-header { display: none; }

      .cart-item {
          grid-template-columns: 1fr;
          gap: 10px;
          padding: 16px;
      }

      .cart-item-price,
      .cart-item-subtotal {
          font-size: 14px;
      }

      .cart-item-price::before { content: 'Prix : '; font-weight: 400; color: var(--muted); font-size: 12px; }
      .cart-item-subtotal::before { content: 'Sous-total : '; font-weight: 400; color: var(--muted); font-size: 12px; }

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

      .cart-actions-bar {
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
      }

      .cart-page-title { font-size: 22px; }
  }

  @media (max-width: 480px) {
      .cart-trust-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
      .cart-summary-card { padding: 20px; }
  }

  
        /* ── PAGE LAYOUT ──────────────────────────────────────── */
        .checkout-section {
            padding: 28px 0 80px;
            min-height: 70vh;
        }
 
        /* ── STEP PROGRESS ────────────────────────────────────── */
        .checkout-steps {
            display: flex;
            align-items: center;
            gap: 0;
            margin-bottom: 32px;
            max-width: 420px;
        }
 
        .checkout-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: 60px;
        }
 
        .step-circle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--bg);
            border: 2px solid var(--border);
            color: var(--muted);
            font-size: 14px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .2s;
        }
 
        .checkout-step.done .step-circle {
            background: #2E7D32;
            border-color: #2E7D32;
            color: #fff;
        }
 
        .checkout-step.active .step-circle {
            background: var(--brand);
            border-color: var(--brand);
            color: #fff;
            box-shadow: 0 4px 12px rgba(200,57,26,.25);
        }
 
        .step-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .05em;
        }
 
        .checkout-step.done .step-label,
        .checkout-step.active .step-label { color: var(--ink); }
 
        .step-line {
            flex: 1;
            height: 2px;
            background: var(--border);
            margin-bottom: 22px;
            transition: background .3s;
        }
 
        .step-line.done { background: #2E7D32; }
 
        /* ── CHECKOUT CARD ────────────────────────────────────── */
        .checkout-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
 
        .checkout-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 18px 22px;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }
 
        .checkout-section-num {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--brand);
            color: #fff;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
 
        .checkout-card-title {
            font-family: 'Bricolage Grotesque', sans-serif;
            font-size: 17px;
            font-weight: 700;
            margin: 0;
            color: var(--ink);
        }
 
        .checkout-card-body {
            padding: 22px;
        }
 
        /* ── FORM CONTROLS ────────────────────────────────────── */
        .co-label {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--ink);
            display: block;
            margin-bottom: 7px;
            letter-spacing: .01em;
        }
 
        .co-required { color: var(--brand); margin-left: 2px; }
        .co-optional {
            font-size: 11px;
            font-weight: 400;
            color: var(--muted);
            margin-left: 4px;
        }
 
        .co-input,
        .co-select,
        .co-textarea {
            width: 100%;
            padding: 11px 14px;
            border: 1.5px solid var(--border);
            border-radius: 10px;
            font-size: 14px;
            color: var(--ink);
            background: var(--bg);
            outline: none;
            transition: border-color .2s, background .2s, box-shadow .2s;
            font-family: 'Open Sans', sans-serif;
        }
 
        .co-input:focus,
        .co-select:focus,
        .co-textarea:focus {
            border-color: var(--brand);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(200,57,26,.08);
        }
 
        .co-input::placeholder,
        .co-textarea::placeholder { color: #bbb; }
 
        .co-input.error { border-color: #B71C1C; background: #fff5f5; }
        .co-input.valid { border-color: #2E7D32; }
 
        .co-input-group {
            display: flex;
            align-items: stretch;
        }
 
        .co-input-prefix {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 12px;
            background: var(--bg);
            border: 1.5px solid var(--border);
            border-right: none;
            border-radius: 10px 0 0 10px;
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            white-space: nowrap;
            flex-shrink: 0;
        }
 
        .co-input--prefixed {
            border-radius: 0 10px 10px 0;
        }
 
        .co-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 38px;
            cursor: pointer;
        }
 
        .co-textarea {
            resize: vertical;
            min-height: 90px;
        }

        /* ── INLINE FIELD ERRORS ──────────────────────────────── */
        .co-field-error {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            margin-top: 6px;
            font-size: 12.5px;
            line-height: 1.4;
            color: #B71C1C;
            font-weight: 500;
        }

        .co-field-error::before {
            content: "\F33A"; /* bootstrap-icons exclamation-circle-fill */
            font-family: "bootstrap-icons";
            font-weight: 400;
            font-size: 13px;
            line-height: 1.3;
            margin-top: 1px;
            flex-shrink: 0;
        }

        .co-field-error[hidden] {
            display: none;
        }

        /* ── GLOBAL FORM ERROR BANNER ─────────────────────────── */
        .co-global-error {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 16px;
            padding: 12px 14px;
            border-radius: 10px;
            background: #fff5f5;
            border: 1.5px solid #f5c2c0;
            color: #B71C1C;
            font-size: 13.5px;
            line-height: 1.5;
            font-weight: 500;
        }

        .co-global-error[hidden] {
            display: none;
        }

        .co-global-error i {
            font-size: 18px;
            line-height: 1.2;
            flex-shrink: 0;
        }

        .co-global-error-text {
            flex: 1;
        }

        /* ── CREATE ACCOUNT CHECKBOX ──────────────────────────── */
        .co-create-account {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-top: 4px;
            padding: 14px 14px;
            background: linear-gradient(135deg, #fff7f0 0%, #fff 100%);
            border: 1.5px solid var(--border);
            border-radius: 12px;
            cursor: pointer;
            transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
        }

        .co-create-account:hover {
            border-color: var(--brand);
            background: linear-gradient(135deg, #fff1e3 0%, #fff 100%);
        }

        .co-create-account input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
            width: 0;
            height: 0;
        }

        .co-create-account-box {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border: 1.5px solid var(--border);
            border-radius: 6px;
            background: #fff;
            color: transparent;
            font-size: 14px;
            flex-shrink: 0;
            margin-top: 1px;
            transition: background .15s ease, border-color .15s ease, color .15s ease;
        }

        .co-create-account input[type="checkbox"]:checked + .co-create-account-box {
            background: var(--brand);
            border-color: var(--brand);
            color: #fff;
        }

        .co-create-account input[type="checkbox"]:focus-visible + .co-create-account-box {
            box-shadow: 0 0 0 3px rgba(244, 109, 39, 0.2);
        }

        .co-create-account-text {
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 13.5px;
            color: var(--ink);
            line-height: 1.4;
        }

        .co-create-account-text strong {
            font-weight: 600;
            color: var(--ink);
        }

        .co-create-account-sub {
            font-size: 12.5px;
            font-weight: 400;
            color: var(--muted);
        }

        /* ── DELIVERY OPTIONS ─────────────────────────────────── */
        .delivery-options { display: flex; flex-direction: column; gap: 10px; }
 
        .delivery-option {
            display: block;
            cursor: pointer;
        }
 
        .delivery-option input[type="radio"] { display: none; }
 
        .delivery-option-body {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px;
            border: 1.5px solid var(--border);
            border-radius: 12px;
            background: var(--bg);
            transition: all .2s;
        }
 
        .delivery-option:has(input:checked) .delivery-option-body {
            border-color: var(--brand);
            background: var(--brand-light);
            box-shadow: 0 0 0 3px rgba(200,57,26,.07);
        }
 
        .delivery-option-icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: var(--white);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--muted);
            flex-shrink: 0;
            transition: all .2s;
        }
 
        .delivery-option:has(input:checked) .delivery-option-icon {
            background: var(--brand);
            border-color: var(--brand);
            color: #fff;
        }
 
        .delivery-option-text {
            flex: 1;
            min-width: 0;
        }
 
        .delivery-option-text strong {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 2px;
        }
 
        .delivery-option-text span {
            font-size: 12px;
            color: var(--muted);
        }
 
        .delivery-option-price {
            font-size: 14px;
            font-weight: 700;
            color: var(--ink);
            white-space: nowrap;
        }
 
        .co-free { color: #2E7D32 !important; }
 
        .co-delivery-note {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            background: #EAF3FF;
            border: 1px solid #BBDEFB;
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 13px;
            color: #1A4B8B;
            margin-top: 12px;
        }
 
        .co-delivery-note i { margin-top: 1px; flex-shrink: 0; }
 
        /* ── PAYMENT OPTIONS ──────────────────────────────────── */
        .payment-option { display: block; cursor: pointer; }
        .payment-option input[type="radio"] { display: none; }
 
        .payment-option-body {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px;
            border: 1.5px solid var(--border);
            border-radius: 12px;
            background: var(--bg);
            transition: all .2s;
        }
 
        .payment-option.active .payment-option-body {
            border-color: var(--brand);
            background: var(--brand-light);
        }
 
        .payment-option-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
 
        .payment-icon-cash { background: #FFF8E7; color: #7B5800; border: 1px solid #FFE0B2; }
        .payment-icon-ccp  { background: #EAF3FF; color: #1A4B8B; border: 1px solid #BBDEFB; }
 
        .payment-option-body > div:nth-child(2) { flex: 1; }
 
        .payment-option-body strong {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 2px;
        }
 
        .payment-sub {
            font-size: 12px;
            color: var(--muted);
        }
 
        .payment-check {
            font-size: 20px;
            color: var(--border);
            transition: color .2s;
        }
 
        .payment-option.active .payment-check { color: var(--brand); }
 
        .co-payment-info {
            background: #EAF3FF;
            border: 1px solid #BBDEFB;
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 13px;
            color: #1A4B8B;
            margin-top: 12px;
            line-height: 1.6;
        }
 
        /* ── ORDER SUMMARY (RIGHT COL) ────────────────────────── */
        .co-summary-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 26px;
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 88px;
        }
 
        .co-summary-title {
            font-family: 'Bricolage Grotesque', sans-serif;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--ink);
        }
 
        /* Items list */
        .co-items-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
 
        .co-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }
 
        .co-item-img {
            width: 58px;
            height: 58px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg);
            overflow: hidden;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
 
        .co-item-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 4px;
        }
 
        .co-item-info { flex: 1; min-width: 0; }
 
        .co-item-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 2px;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
 
        .co-item-variant {
            font-size: 11.5px;
            color: var(--muted);
        }
 
        .co-item-qty-badge {
            font-size: 11px;
            font-weight: 700;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 2px 8px;
            color: var(--ink);
            white-space: nowrap;
            flex-shrink: 0;
        }
 
        .co-item-price {
            font-size: 14px;
            font-weight: 700;
            color: var(--brand);
            white-space: nowrap;
            flex-shrink: 0;
        }
 
        /* Totals */
        .co-summary-divider { border-top: 1px solid var(--border); margin: 16px 0; }
 
        .co-summary-lines { display: flex; flex-direction: column; gap: 10px; }
 
        .co-summary-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: var(--ink);
        }
 
        .co-summary-line > span:first-child { color: var(--muted); }
 
        .co-discount-label { color: #2E7D32; font-weight: 500; }
        .co-discount-value { color: #2E7D32; font-weight: 600; }
 
        .co-total-line {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 18px;
        }
 
        .co-total-line span:last-child {
            font-size: 22px;
            color: var(--brand);
        }
 
        .co-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }
 
        .co-submit-btn {
            width: 100%;
            padding: 16px;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: .03em;
            border-radius: 12px;
            margin-bottom: 14px;
            cursor: pointer;
        }
 
        .co-terms-note {
            font-size: 11.5px;
            color: var(--muted);
            text-align: center;
            margin: 0;
            line-height: 1.6;
        }
 
        /* ── SUCCESS OVERLAY ──────────────────────────────────── */
        .co-success-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(10,22,41,.7);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
 
        .co-success-overlay.open { display: flex; }
 
        .co-success-modal {
            background: var(--white);
            border-radius: 20px;
            padding: 48px 40px;
            text-align: center;
            max-width: 440px;
            width: 100%;
            box-shadow: 0 24px 60px rgba(0,0,0,.2);
            animation: popIn .35s cubic-bezier(.22,1,.36,1);
        }
 
        @keyframes popIn {
            from { transform: scale(.88); opacity: 0; }
            to   { transform: scale(1);  opacity: 1; }
        }
 
        .co-success-icon {
            font-size: 64px;
            color: #2E7D32;
            margin-bottom: 20px;
            line-height: 1;
        }
 
        .co-success-title {
            font-family: 'Bricolage Grotesque', sans-serif;
            font-size: 26px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 12px;
        }
 
        .co-success-text {
            font-size: 15px;
            color: var(--muted);
            line-height: 1.65;
            margin-bottom: 20px;
        }
 
        .co-success-ref {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 20px;
            font-size: 15px;
            color: var(--ink);
            display: inline-block;
        }
 
        /* ── FORM VALIDATION MESSAGES ─────────────────────────── */
        .co-field-error {
            font-size: 12px;
            color: #B71C1C;
            margin-top: 5px;
            display: none;
        }
 
        .co-field-error.visible { display: block; }
 
        /* ── RESPONSIVE ───────────────────────────────────────── */
        @media (max-width: 991px) {
            .co-summary-card { position: static; }
        }

        /* Mobile: contact → paiement → livraison → résumé commande (dernier) */
        @media (max-width: 991.98px) {
            .checkout-section .checkout-main-row {
                display: flex;
                flex-direction: column;
                align-items: stretch !important; /* overrides .align-items-start so all cards span full width */
                row-gap: 1.5rem;
                --bs-gutter-x: 0;
                margin-left: 0;
                margin-right: 0;
            }
            .checkout-section .checkout-main-row > .checkout-col-form,
            .checkout-section .checkout-main-row > .checkout-col-aside,
            .checkout-section .checkout-col-aside .co-right-sticky {
                display: contents;
            }
            .checkout-section .co-checkout-order-alert { order: 0; }
            .checkout-section .co-checkout-order-contact { order: 1; }
            .checkout-section .co-checkout-order-payment { order: 2; }
            .checkout-section .co-checkout-order-delivery { order: 3; }
            .checkout-section .co-checkout-order-summary { order: 4; }
        }
 
        @media (max-width: 767px) {
            .checkout-steps { max-width: 100%; }
            .checkout-card-body { padding: 16px; }
            .co-summary-card { padding: 18px; }
            .co-success-modal { padding: 32px 20px; }
            .co-success-title { font-size: 22px; }
            .co-badges .badge-chip { font-size: 11px; padding: 5px 10px; }
        }
        .trust-strip {
          padding: 1.25rem 0;
          border-top: 1px solid #e8e8e8;
          border-bottom: 1px solid #e8e8e8;
          background: #fff;
          font-family: 'Bricolage Grotesque', sans-serif;
      }

      .trust-strip .trust-text h6,
      .trust-strip .trust-text p,
      .trust-strip .trust-text a {
          font-family: 'Bricolage Grotesque', sans-serif;
      }
      
      .trust-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
      }
      
      .trust-item {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 0.75rem 1.5rem;
         
      }
      
      .trust-item:last-child {
          border-right: none;
      }
      
      .trust-icon-wrap {
          flex-shrink: 0;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          background: var(--secondary-light);
          display: flex;
          align-items: center;
          justify-content: center;
      }
      
      .trust-icon-wrap i {
          font-size: 22px;
          color: var(--secondary);
      }

      .trust-icon-wrap img {
          width: 26px;
          height: 26px;
          object-fit: contain;
          display: block;
      }
      
      .trust-text h6 {
          font-size: 17px;
          font-weight: 600;
          color: #1a1a1a;
          margin: 0 0 2px;
      }
      
      .trust-text p {
          font-size: 12px;
          color: #6b7280;
          margin: 0;
          line-height: 1.4;
      }
      
      .trust-text a {
          font-size: 12px;
          color: var(--secondary);
          text-decoration: underline;
      }
      
      /* Responsive */
      @media (max-width: 768px) {
          .trust-grid {
              grid-template-columns: repeat(2, 1fr);
          }
      
          .trust-item {
              border-right: none;
              border-bottom: 1px solid #e8e8e8;
          }
      
          .trust-item:nth-child(odd) {
              border-right: 1px solid #e8e8e8;
          }
      
          .trust-item:nth-last-child(-n+2) {
              border-bottom: none;
          }
      }
      
      @media (max-width: 480px) {
          .trust-item {
              padding: 0.75rem 1rem;
              gap: 10px;
          }
      }

/* ══════════════════════════════════════════════════════
   CLIENT AUTH (Login / Register / Forgot)
═══════════════════════════════════════════════════════ */
.auth-section {
    padding: 36px 0 60px;
    background: var(--bg);
    min-height: calc(100vh - 200px);
}

.auth-aside {
    background: var(--grad-dark-duo);
    color: #fff;
    border-radius: 20px;
    padding: 44px 38px;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.auth-aside::before {
    content: '';
    position: absolute;
    left: -100px; top: -100px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(30,60,135,.45), transparent 70%);
    border-radius: 50%;
    z-index: 0;
}
.auth-aside::after {
    content: '';
    position: absolute;
    right: -80px; bottom: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(200,57,26,.4), transparent 70%);
    border-radius: 50%;
    z-index: 0;
}
.auth-aside--alt {
  background: linear-gradient(155deg, #000000 0%, #000000 55%, var(--brand) 130%);
}
.auth-aside--alt::before { background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
.auth-aside--alt::after  { background: radial-gradient(circle, rgba(200,57,26,.35), transparent 70%); }
.auth-aside-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}
.auth-aside-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 44px;
    line-height: 1.05;
    font-weight: 700;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.auth-aside-sub {
    font-size: 15px;
    color: rgba(255,255,255,.78);
    line-height: 1.55;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}
.auth-aside-list {
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 1;
}
.auth-aside-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255,255,255,.92);
}
.auth-aside-list li i {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12);
    border-radius: 10px;
    font-size: 17px;
    flex-shrink: 0;
}
.auth-aside-foot {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: rgba(255,255,255,.6);
    position: relative;
    z-index: 1;
}

.auth-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px 38px;
    box-shadow: var(--shadow-sm);
}
.auth-card-head { margin-bottom: 24px; }
.auth-card-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.auth-card-sub {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}
.auth-card-sub a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}
.auth-card-sub a:hover { text-decoration: underline; }

.auth-icon-circle {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--grad-duo-soft);
    color: var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; }
.auth-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}
.auth-link-small {
    font-size: 12.5px;
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}
.auth-link-small:hover { text-decoration: underline; }

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    padding: 0 14px;
    font-size: 14px;
    color: var(--ink);
    transition: border-color .2s, background .2s, box-shadow .2s;
    outline: none;
}
.auth-input:focus {
    border-color: var(--brand);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(200,57,26,.12);
}
.auth-input-icon {
    position: absolute;
    left: 14px;
    color: var(--muted);
    font-size: 16px;
    pointer-events: none;
}
.auth-input-wrap .auth-input { padding-left: 42px; }
.auth-input-wrap .auth-input:not(:has(+ .auth-input-toggle)) { padding-right: 14px; }
.auth-input-toggle {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--muted);
    width: 36px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}
.auth-input-toggle:hover { color: var(--brand); background: var(--brand-light); }
.auth-input-prefix {
    position: absolute;
    left: 0;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-right: 1.5px solid var(--border);
    background: #f5f4f2;
    border-radius: 10px 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.auth-input--prefixed { padding-left: 62px !important; }

.auth-strength {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.auth-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    transition: background-color .18s ease;
}
.auth-strength-bar.active { background: var(--brand); }

.auth-strength[data-level="1"] .auth-strength-bar.active { background: #e63946; }
.auth-strength[data-level="2"] .auth-strength-bar.active { background: #f4a261; }
.auth-strength[data-level="3"] .auth-strength-bar.active { background: #f1c40f; }
.auth-strength[data-level="4"] .auth-strength-bar.active { background: #2a9d8f; }
.auth-help-text {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 6px;
}

.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}
.auth-check input[type="checkbox"] {
    margin-top: 2px;
    width: 16px; height: 16px;
    accent-color: var(--brand);
    flex-shrink: 0;
}
.auth-check a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
}
.auth-check a:hover { text-decoration: underline; }

.auth-submit {
    margin-top: 4px;
    width: 100%;
    background: black;
    background-size: 180% 180%;
    background-position: 0% 50%;
    color: #fff;
    border: none;
    height: 52px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background-position .35s ease, transform .15s, box-shadow .2s;
}
.auth-submit:hover {
    background-position: 100% 50%;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(200,57,26,.28);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    color: var(--muted);
    font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.auth-social-btn {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 11px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: .2s;
}
.auth-social-btn:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}
.auth-social-btn i { font-size: 17px; }

.auth-terms {
    font-size: 11.5px;
    color: var(--muted);
    text-align: center;
    margin: 6px 0 0;
    line-height: 1.6;
}
.auth-terms a {
    color: var(--muted);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .auth-section { padding: 20px 0 40px; }
    .auth-card { padding: 28px 22px; }
    .auth-card-title { font-size: 24px; }
    .auth-social { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   CLIENT ACCOUNT (Dashboard, Orders, Profile, ...)
═══════════════════════════════════════════════════════ */
.account-section {
    padding: 28px 0 60px;
    background: var(--bg);
    min-height: calc(100vh - 200px);
}

.account-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.account-page-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ink);
}
.account-page-sub {
    color: var(--muted);
    margin: 0;
    font-size: 14px;
}
.account-search {
    position: relative;
    min-width: 280px;
}
.account-search i {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
}
.account-search input {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--border);
    background: var(--white);
    border-radius: 10px;
    padding: 0 14px 0 42px;
    font-size: 13.5px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.account-search input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(30,60,135,.12);
}

/* ── Sidebar ──────────────────────────────────────────── */
.account-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account-user-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
}
.account-avatar {
    width: 78px; height: 78px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #1e3c87;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px;
    font-weight: 700;
    position: relative;
    box-shadow: 0 6px 16px rgba(30,60,135,.28);
}
.account-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.account-avatar-status {
    position: absolute;
    bottom: 4px; right: 4px;
    width: 14px; height: 14px;
    background: #22c55e;
    border: 2px solid var(--white);
    border-radius: 50%;
}
.account-user-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}
.account-user-email {
    font-size: 12.5px;
    color: var(--muted);
    margin: 2px 0 10px;
}
.account-loyalty-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFF7E6;
    color: #B45309;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid #FCE3B0;
}

.account-nav {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.account-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-radius: 10px;
    transition: background .15s, color .15s;
    position: relative;
}
.account-nav-link i:first-child {
    font-size: 18px;
    color: var(--muted);
    width: 22px;
    transition: color .15s;
}
.account-nav-link span { flex: 1; }
.account-nav-badge {
    background: var(--secondary-light);
    color: var(--secondary);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.account-nav-chevron {
    color: var(--muted);
    font-size: 12px;
    opacity: 0;
    transition: opacity .15s, transform .15s;
}
.account-nav-link:hover {
    background: var(--bg);
    color: var(--ink);
}
.account-nav-link:hover .account-nav-chevron {
    opacity: 1;
    transform: translateX(2px);
}
.account-nav-link.is-active {
    background: var(--secondary-light);
    color: var(--secondary);
}
.account-nav-link.is-active i:first-child { color: var(--secondary); }
.account-nav-link.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    background: var(--secondary);
    border-radius: 3px;
}
.account-nav-link--danger { color: #b91c1c; }
.account-nav-link--danger i:first-child { color: #b91c1c; }
.account-nav-link--danger:hover { background: #FEF2F2; color: #b91c1c; }
.account-nav-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 8px;
}

.account-help-card {
    background: linear-gradient(135deg, #1A1A1A 0%, #2b2b2b 100%);
    color: #fff;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.account-help-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--grad-duo);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(30,60,135,.25);
}
.account-help-card strong { font-size: 14px; }
.account-help-card p {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    margin: 2px 0 6px;
}
.account-help-link {
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}
.account-help-link:hover { color: var(--brand-light); }

@media (max-width: 991.98px) {
    .account-sidebar { position: static; }
}

/* ── Buttons (account-scoped) ─────────────────────────── */
.btn-account-primary,
.btn-account-secondary,
.btn-account-ghost,
.btn-account-danger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
}
.btn-account-primary {
  background: #000000;
  color: #fff;
}
.btn-account-primary:hover { background: var(--brand-dark); color: #fff; transform: translateY(-1px); }
.btn-account-secondary {
    background: var(--white);
    border-color: var(--ink);
    color: var(--ink);
}
.btn-account-secondary:hover { background: var(--ink); color: #fff; }
.btn-account-secondary--sm { padding: 7px 12px; font-size: 12.5px; }
.btn-account-ghost {
    background: transparent;
    color: var(--muted);
    border-color: var(--border);
}
.btn-account-ghost:hover { background: var(--bg); color: var(--ink); }
.btn-account-danger {
    background: #fff;
    border-color: #fecaca;
    color: #b91c1c;
}
.btn-account-danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.btn-account-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--white);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s;
}
.btn-account-icon:hover { color: var(--brand); border-color: var(--brand); }

/* ── Stat cards ───────────────────────────────────────── */
.stat-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.stat-card-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 14px;
}
.stat-card-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 4px;
}
.stat-card-label {
    font-size: 13.5px;
    color: var(--muted);
    font-weight: 500;
}
.stat-card-sub {
    font-size: 11.5px;
    color: var(--ink);
    margin-top: 8px;
    font-weight: 600;
    opacity: .7;
}
.stat-card--brand .stat-card-icon { background: var(--brand-light); color: var(--brand); }
.stat-card--blue  .stat-card-icon { background: var(--secondary-light); color: var(--secondary); }
.stat-card--pink  .stat-card-icon { background: #FFE4F0; color: #BE185D; }
.stat-card--gold  .stat-card-icon { background: #FFF7E6; color: #B45309; }

/* ── Dashboard cards ──────────────────────────────────── */
.dash-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 24px;
}
.dash-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.dash-card-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--ink);
}
.dash-card-sub {
    font-size: 13px;
    color: var(--muted);
    margin: 4px 0 0;
}
.dash-card-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.dash-card-link:hover { color: var(--secondary-dark); }
.dash-card--danger {
    border-color: #fecaca;
    background: #FFF8F8;
}

/* ── Tracking timeline ────────────────────────────────── */
.track-steps {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    padding: 4px 0;
}
.track-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}
.track-step-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--border);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.track-step-text { display: flex; flex-direction: column; min-width: 0; }
.track-step-text strong { font-size: 13px; color: var(--ink); }
.track-step-text span { font-size: 11.5px; color: var(--muted); }

.track-step.done .track-step-icon {
    background: #ECFDF5;
    border-color: #10b981;
    color: #059669;
}
.track-step.active .track-step-icon {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(200,57,26,.15);
    animation: trackPulse 1.6s ease infinite;
}
@keyframes trackPulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(200,57,26,.15); }
    50%      { box-shadow: 0 0 0 9px rgba(200,57,26,.08); }
}
.track-step.active .track-step-text strong { color: var(--brand); }

.track-line {
    flex-grow: 1;
    height: 2px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 6px;
    align-self: center;
    min-width: 30px;
}
.track-line.done   { background: #10b981; }
.track-line.active {
    background: linear-gradient(90deg, #10b981 0%, var(--brand) 100%);
}

/* ── Recent order mini-list ───────────────────────────── */
.order-mini-list { display: flex; flex-direction: column; gap: 4px; }
.order-mini-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    transition: background .15s;
}
.order-mini-row:hover { background: var(--bg); color: var(--ink); }
.order-mini-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--secondary-light);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.order-mini-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.order-mini-info strong { font-size: 13.5px; }
.order-mini-info span   { font-size: 11.5px; color: var(--muted); }
.order-mini-total {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

/* ── Status pill ──────────────────────────────────────── */
.order-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    letter-spacing: .02em;
    white-space: nowrap;
}
.order-status i { font-size: 12px; }
.order-status--success { background: #ECFDF5; color: #047857; }
.order-status--warn    { background: #FEF3C7; color: #B45309; }
.order-status--danger  { background: #FEF2F2; color: #b91c1c; }
.order-status--info    { background: var(--secondary-light); color: var(--secondary); }

/* ── Address block (re-used inside cards) ─────────────── */
.address-block {
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 16px;
}
.address-block strong { font-size: 14px; color: var(--ink); }
.address-block p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
    margin: 6px 0 0;
}
.address-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

/* ── Quick actions ────────────────────────────────────── */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    transition: .2s;
}
.quick-action:hover {
    background: var(--brand-light);
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-2px);
}
.quick-action i { font-size: 22px; }
.quick-action span { font-size: 12.5px; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   ORDERS LIST PAGE
═══════════════════════════════════════════════════════ */
.order-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 20px;
}
.order-filter-pill {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--ink);
    padding: 7px 14px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.order-filter-pill span {
    background: var(--bg);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
}
.order-filter-pill:hover { border-color: var(--secondary); color: var(--secondary); }
.order-filter-pill.active {
  background: #1e3c87;
  border-color: var(--secondary);
  color: #fff;
}
.order-filter-pill.active span {
    background: rgba(255,255,255,.22);
    color: #fff;
}
.order-filter-spacer { flex-grow: 1; }
.order-filter-select {
    height: 40px;
    border: 1.5px solid var(--border);
    background: var(--white);
    border-radius: 10px;
    padding: 0 14px;
    font-size: 13px;
    color: var(--ink);
    outline: none;
}

/* ── Order cards (list) ───────────────────────────────── */
.order-list { display: flex; flex-direction: column; gap: 16px; }
.order-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.order-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.order-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.order-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
}
.order-card-ref {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    color: var(--ink);
    font-size: 14px;
}
.order-card-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--border);
}
.order-card-meta i { margin-right: 4px; }
.order-card-date, .order-card-items { display: inline-flex; align-items: center; }

.order-card-body {
    display: flex;
    gap: 22px;
    padding: 22px;
    align-items: center;
    flex-wrap: wrap;
}
.order-card-products {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.order-card-thumb {
    width: 64px; height: 64px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}
.order-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-card-thumb--more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}
.order-card-info-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    min-width: 280px;
}
.order-info-label {
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 4px;
}
.order-info-total {
    color: var(--brand);
    font-size: 16px;
}
.order-card-info-grid strong {
    font-size: 13.5px;
    color: var(--ink);
}

.order-card-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: #fdfcfb;
    flex-wrap: wrap;
}
.order-card-spacer { flex-grow: 1; }

@media (max-width: 767px) {
    .order-card-body { flex-direction: column; align-items: flex-start; gap: 16px; }
    .order-card-info-grid { grid-template-columns: 1fr 1fr; width: 100%; min-width: 0; }
}

/* ── Pagination ───────────────────────────────────────── */
.account-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
}
.account-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    background: var(--white);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: .2s;
}
.account-page-btn:hover:not(:disabled) {
    border-color: var(--secondary);
    color: var(--secondary);
}
.account-page-btn.active {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}
.account-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.account-page-dots {
    color: var(--muted);
    padding: 0 6px;
}

/* ══════════════════════════════════════════════════════
   ORDER DETAIL PAGE
═══════════════════════════════════════════════════════ */
.order-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.order-detail-eyebrow {
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 4px;
}
.order-detail-ref {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}
.order-detail-date {
    color: var(--muted);
    font-size: 13.5px;
    margin: 0;
}
.order-detail-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-detail-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.order-detail-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: border-color .2s;
}
.order-detail-item:hover { border-color: var(--brand); }
.order-detail-img {
    width: 72px; height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg);
    flex-shrink: 0;
}
.order-detail-img img { width: 100%; height: 100%; object-fit: cover; }
.order-detail-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.order-detail-info strong { font-size: 14px; color: var(--ink); }
.order-detail-qty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.order-detail-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--brand);
    white-space: nowrap;
}

.order-detail-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.order-detail-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.order-detail-meta-row > i {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--secondary-light);
    color: var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.order-detail-meta-row > div { display: flex; flex-direction: column; }
.order-detail-meta-row strong { font-size: 13.5px; color: var(--ink); }

/* ══════════════════════════════════════════════════════
   PROFILE / SETTINGS PAGE
═══════════════════════════════════════════════════════ */
.profile-form { display: block; }
.profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}
.profile-avatar-lg {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--grad-duo);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 30px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(30,60,135,.25);
}
.profile-form-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
}
.profile-toggle-row strong { font-size: 14px; color: var(--ink); }

.account-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}
.account-switch input { opacity: 0; width: 0; height: 0; }
.account-switch span {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #d4d4d8;
    border-radius: 26px;
    transition: background .2s;
}
.account-switch span::before {
    content: '';
    position: absolute;
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.account-switch input:checked + span { background: var(--brand); }
.account-switch input:checked + span::before { transform: translateX(20px); }
.account-switch input:disabled + span { opacity: .55; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════
   ADDRESSES PAGE
═══════════════════════════════════════════════════════ */
.address-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 767px) {
    .address-grid { grid-template-columns: 1fr; }
}
.address-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    position: relative;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: column;
}
.address-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.address-card.is-default {
    border-color: var(--brand);
    background: linear-gradient(180deg, #FFF6F4 0%, #fff 80%);
}
.address-card-default {
    position: absolute;
    top: 16px; right: 16px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: .03em;
}
.address-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.address-card-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--secondary-light);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
.address-card.is-default .address-card-icon {
    background: var(--brand-light);
    color: var(--brand);
}
.address-card-label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--ink);
}
.address-card-body strong { font-size: 14px; color: var(--ink); }
.address-card-body p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    margin: 6px 0 16px;
}
.address-card-foot {
    margin-top: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.address-card--add {
    border: 2px dashed var(--border);
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 240px;
    transition: .2s;
}
.address-card--add:hover {
    border-color: var(--secondary);
    color: var(--secondary);
    background: var(--secondary-light);
    transform: translateY(-2px);
}
.address-card--add i { font-size: 26px; }

.account-modal .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
}
.account-modal .modal-header {
    border-bottom: 1px solid var(--border);
    padding: 18px 24px;
}
.account-modal .modal-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
}
.account-modal .modal-body { padding: 22px 24px; }
.account-modal .modal-footer {
    border-top: 1px solid var(--border);
    padding: 14px 24px;
    gap: 10px;
}

/* ══════════════════════════════════════════════════════
   WISHLIST PAGE
═══════════════════════════════════════════════════════ */
.wishlist-product-card {
    position: relative;
}
.wishlist-remove {
    position: absolute;
    top: 8px; right: 8px;
    width: 32px; height: 32px;
    border: none;
    background: rgba(255,255,255,.95);
    color: var(--muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: .2s;
    box-shadow: var(--shadow-sm);
}
.wishlist-remove:hover {
    background: var(--brand);
    color: #fff;
}
.product-badge--out {
    background: #4b5563;
    top: 36px;
}

/* Generic layout safety */
@media (max-width: 991.98px) {
    .account-layout > [class*="col-lg-9"] { margin-top: 16px; }
}

/* ══════════════════════════════════════════════════════
   HEADER · ACCOUNT DROPDOWN
═══════════════════════════════════════════════════════ */
.header-account-dropdown .icon-btn::after { display: none; } /* hide bs caret */
.header-account-menu {
    min-width: 280px;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    padding: 0;
    overflow: hidden;
    margin-top: 8px !important;
}
.header-account-menu-head {
    padding: 18px 18px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.header-account-menu-head strong {
    display: block;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 15px;
    color: var(--ink);
}
.header-account-menu-head p {
    font-size: 12.5px;
    color: var(--muted);
    margin: 2px 0 12px;
    line-height: 1.5;
}
.header-account-menu .dropdown-item {
    padding: 10px 18px;
    font-size: 13.5px;
    color: var(--ink);
    display: flex;
    align-items: center;
}
.header-account-menu .dropdown-item:hover,
.header-account-menu .dropdown-item:focus {
    background: var(--brand-light);
    color: var(--brand);
}
.header-account-menu .dropdown-item i {
    color: var(--muted);
    width: 18px;
    transition: color .15s;
}
.header-account-menu .dropdown-item:hover i { color: var(--brand); }
.header-account-menu .dropdown-divider {
    margin: 0;
    border-color: var(--border);
}

/* ══════════════════════════════════════════════════════
   ARCHIVE / LISTING PAGE
═══════════════════════════════════════════════════════ */
.archive-section {
    padding: 24px 0 60px;
}

.archive-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.archive-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}

.archive-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
}

.archive-filter-trigger {
    position: relative;
    border: 1.5px solid var(--ink);
    background: var(--white);
    color: var(--ink);
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .2s;
}

.archive-filter-trigger:hover {
    background: var(--ink);
    color: #fff;
}

.archive-filter-trigger__badge {
    background: var(--brand);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
    line-height: 1.6;
}

/* ── APPLIED CHIPS ──────────────────────────────────── */
.archive-applied-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.archive-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-light);
    border: 1px solid var(--brand-light);
    color: var(--brand-dark);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    transition: all .2s;
}

.archive-chip:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.archive-chip i {
    font-size: 10px;
    opacity: .8;
}

.archive-chip--clear {
    background: transparent;
    border-color: var(--border);
    color: var(--muted);
}

.archive-chip--clear:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* ── LAYOUT ────────────────────────────────────────── */
.archive-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (max-width: 991.98px) {
    .archive-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.archive-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: 6px;
}

.archive-sidebar::-webkit-scrollbar { width: 6px; }
.archive-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── FILTERS ───────────────────────────────────────── */
.archive-filters {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 18px 12px;
}

.filter-block {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.filter-block:first-child { padding-top: 0; }
.filter-block:last-of-type { border-bottom: none; }

.filter-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.filter-search-wrap {
    position: relative;
}

.filter-search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 14px;
}

.filter-search-input {
    padding-left: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 13.5px;
    height: 40px;
}

.filter-search-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .15rem rgba(200, 57, 26, .15);
}

/* CATEGORIES TREE */
.filter-cat-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.filter-cat-tree--nested {
    margin: 4px 0 8px 22px;
    padding-left: 10px;
    border-left: 2px solid var(--border);
}

.filter-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ink);
    transition: background .15s;
    margin: 0;
}

.filter-cat-row:hover { background: var(--brand-light); }

.filter-cat-row input[type="radio"] {
    accent-color: var(--brand);
    cursor: pointer;
    flex-shrink: 0;
}

.filter-cat-row--root span {
    font-weight: 600;
}

/* PRICE */
.filter-price-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.filter-price-field {
    flex: 1;
    min-width: 0;
}

.filter-price-label {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.filter-price-field .form-control {
    border-radius: 10px;
    border: 1px solid var(--border);
    height: 40px;
    font-size: 13.5px;
}

.filter-price-field .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .15rem rgba(200, 57, 26, .15);
}

.filter-price-sep {
    color: var(--muted);
    padding-bottom: 10px;
}

/* BRANDS */
.filter-brand-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.filter-brand-list::-webkit-scrollbar { width: 6px; }
.filter-brand-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.filter-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ink);
    margin: 0;
}

.filter-brand-row:hover { color: var(--brand); }

.filter-brand-row input[type="checkbox"],
.filter-toggle-row input[type="checkbox"] {
    accent-color: var(--brand);
    cursor: pointer;
    flex-shrink: 0;
}

.filter-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ink);
    margin: 0;
}

.filter-toggle-row:hover { color: var(--brand); }

/* ACTIONS */
.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

.btn-filter-apply {
    background: var(--brand);
    color: #fff;
    border: 1.5px solid var(--brand);
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 13.5px;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-filter-apply:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.btn-filter-reset {
    text-align: center;
    color: var(--muted);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 0;
}

.btn-filter-reset:hover {
    color: var(--brand);
    text-decoration: underline;
}

/* ── TOOLBAR ───────────────────────────────────────── */
.archive-toolbar {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 18px;
}

.archive-toolbar-form {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.archive-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.archive-toolbar-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}

.archive-toolbar-select {
    border-radius: 8px;
    border: 1px solid var(--border);
    height: 38px;
    font-size: 13px;
    padding: 4px 28px 4px 10px;
    min-width: 160px;
    background-color: var(--white);
    cursor: pointer;
}

.archive-toolbar-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .15rem rgba(200, 57, 26, .15);
}

.archive-toolbar-select--sm {
    min-width: 80px;
}

.archive-view-toggle {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.archive-view-btn {
    background: var(--white);
    color: var(--muted);
    border: none;
    padding: 8px 12px;
    font-size: 15px;
    transition: all .15s;
}

.archive-view-btn + .archive-view-btn {
    border-left: 1px solid var(--border);
}

.archive-view-btn.active {
    background: var(--ink);
    color: #fff;
}

.archive-view-btn:not(.active):hover {
    background: var(--brand-light);
    color: var(--brand);
}

@media (max-width: 575.98px) {
    .archive-toolbar-form { gap: 10px; }
    .archive-toolbar-select { min-width: 240px; }
    .archive-view-toggle { margin-left: 0; }
}

/* ── PRODUCTS LIST/GRID ────────────────────────────── */
.archive-products--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

@media (min-width: 992px) {
    .archive-products--grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 575.98px) {
    .archive-products--grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

.archive-products--list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.archive-product-row {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 18px;
    transition: all .2s;
}

.archive-product-row:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
}

.archive-product-row__media {
    display: block;
    position: relative;
}

.archive-product-row__media .product-img-wrapper {
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.archive-product-row__media .product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.archive-product-row__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.archive-product-row__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin: 6px 0 6px;
    line-height: 1.35;
}

.archive-product-row__title a:hover { color: var(--brand); }

.archive-product-row__brand {
    font-size: 12.5px;
    color: var(--muted);
    margin: 0 0 6px;
}

.archive-product-row__desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.archive-product-row__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.archive-product-row__bottom .product-price {
    font-size: 22px;
}

.archive-product-row__cta {
    width: auto;
    margin-top: 0;
    padding: 9px 18px;
    min-width: 200px;
}

@media (max-width: 575.98px) {
    .archive-product-row {
        grid-template-columns: 1fr;
    }
    .archive-product-row__media .product-img-wrapper {
        height: 220px;
    }
    .archive-product-row__cta {
        width: 100%;
        min-width: 0;
    }
}

/* ── EMPTY STATE ───────────────────────────────────── */
.archive-empty {
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: 16px;
    padding: 60px 20px;
    text-align: center;
}

.archive-empty__icon {
    font-size: 48px;
    color: var(--muted);
    margin-bottom: 14px;
    display: inline-block;
}

.archive-empty__title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ink);
}

.archive-empty__text {
    color: var(--muted);
    margin: 0;
    font-size: 14px;
}

.archive-empty__text a {
    color: var(--brand);
    font-weight: 600;
}

/* ── PAGINATION ────────────────────────────────────── */
.archive-pagination {
    margin-top: 28px;
}

.archive-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.archive-pager__item {
    display: inline-flex;
}

.archive-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 10px;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}

.archive-pager__item:not(.archive-pager__item--disabled):not(.archive-pager__item--active) .archive-pager__link:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-light);
}

.archive-pager__item--active .archive-pager__link {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.archive-pager__item--disabled .archive-pager__link {
    color: #c7c4bf;
    cursor: not-allowed;
    background: #fafafa;
}

.archive-pager__item--dots .archive-pager__link {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

/* ── MOBILE FILTERS OFFCANVAS ──────────────────────── */
.archive-filters-offcanvas {
    width: min(360px, 92vw) !important;
}

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

.archive-filters-offcanvas .archive-filters {
    border: none;
    border-radius: 0;
    padding: 0;
}

@media (max-width: 991.98px) {
    .archive-header { margin-bottom: 10px; }
    .archive-title { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════
   TRACK ORDER (Suivi de commande)
═══════════════════════════════════════════════════════ */
.track-order-section { padding: 32px 0 60px; }

.track-order-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--grad-duo-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.track-order-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--grad-duo);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(30, 60, 135, .25);
}
.track-order-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ink);
}
.track-order-sub {
    color: var(--muted);
    margin: 0;
    font-size: 14px;
    max-width: 540px;
}

.track-form-card { padding: 24px; }
.track-form-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
}
.track-form-label i { color: var(--brand); }

.track-form-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.track-form-input {
    flex: 1;
    height: 52px;
    border: 1.5px solid var(--border);
    background: var(--white);
    border-radius: 12px;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    color: var(--ink);
}
.track-form-input::placeholder {
    color: #c4c0bb;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.track-form-input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(30, 60, 135, .14);
}

.btn-track-submit {
    position: relative;
    min-width: 140px;
    height: 52px;
    border: 0;
    border-radius: 12px;
    background: var(--grad-brand);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, opacity .2s;
    box-shadow: 0 8px 18px rgba(200, 57, 26, .25);
}
.btn-track-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(200, 57, 26, .32); }
.btn-track-submit:disabled { cursor: progress; opacity: .85; }
.btn-track-submit .btn-track-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-track-submit .btn-track-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: trackSpin .8s linear infinite;
}
.btn-track-submit.is-loading .btn-track-label { display: none; }
.btn-track-submit.is-loading .btn-track-spinner { display: inline-block; }
@keyframes trackSpin { to { transform: rotate(360deg); } }

.track-form-help {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--muted);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.track-form-help i { color: var(--secondary); margin-top: 2px; }
.track-form-help a { color: var(--secondary); font-weight: 600; }

.track-error {
    margin-top: 16px;
    background: #FEF2F2;
    border: 1px solid #fecaca;
    color: #991B1B;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}
.track-error i { font-size: 18px; }

.track-result { margin-top: 18px; }

.track-summary-card .track-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.track-summary-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 4px;
}
.track-summary-status {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.track-summary-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    padding: 14px 0;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    margin-bottom: 18px;
}
.track-summary-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
}
.track-summary-meta-row i {
    color: var(--secondary);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}
.track-summary-meta-row .track-meta-label {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
}
.track-summary-meta-row strong {
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.35;
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .track-summary-meta { grid-template-columns: 1fr; }
}

.track-progress {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 6px;
    overflow-x: auto;
}
.track-progress-step {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.track-progress-dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--border);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all .25s ease;
}
.track-progress-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}
.track-progress-line {
    flex: 1;
    height: 3px;
    background: var(--border);
    border-radius: 3px;
    min-width: 24px;
    transition: background .25s ease;
}

.track-progress-step.is-done .track-progress-dot {
    background: #ECFDF5;
    border-color: #10b981;
    color: #059669;
}
.track-progress-step.is-done .track-progress-label { color: var(--ink); }
.track-progress-step.is-active .track-progress-dot {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(200, 57, 26, .15);
    animation: trackPulse 1.6s ease infinite;
}
.track-progress-step.is-active .track-progress-label { color: var(--brand); font-weight: 700; }
.track-progress-step.is-returned .track-progress-dot {
    background: #FEF2F2;
    border-color: #fca5a5;
    color: #b91c1c;
}
.track-progress-step.is-returned .track-progress-label { color: #b91c1c; }
.track-progress-line.is-done { background: #10b981; }
.track-progress-line.is-active { background: linear-gradient(90deg, #10b981 0%, var(--brand) 100%); }
.track-progress-line.is-returned { background: #fca5a5; }

.track-history-card { padding-bottom: 12px; }
.track-history {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.track-history::before {
    content: '';
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 18px;
    width: 2px;
    background: var(--border);
    border-radius: 2px;
}
.track-history-item {
    position: relative;
    padding: 10px 0 18px 50px;
    min-height: 56px;
}
.track-history-item:last-child { padding-bottom: 0; }
.track-history-icon {
    position: absolute;
    left: 0;
    top: 6px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--border);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 1;
}
.track-history-item.is-latest .track-history-icon {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(200, 57, 26, .12);
}
.track-history-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.track-history-label {
    font-size: 14px;
    color: var(--ink);
    font-weight: 700;
}
.track-history-item.is-latest .track-history-label { color: var(--brand); }
.track-history-date {
    font-size: 12.5px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.track-history-comment {
    font-size: 13px;
    color: var(--ink);
    margin: 4px 0 0;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 8px 12px;
}
.track-history-empty {
    color: var(--muted);
    font-size: 13.5px;
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.track-help-card { position: sticky; top: 90px; }
.track-help-intro {
    color: var(--muted);
    margin: 4px 0 16px;
    font-size: 13.5px;
}
.track-faq { display: flex; flex-direction: column; gap: 10px; }
.track-faq-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    padding: 12px 14px;
    transition: border-color .15s, background .15s;
}
.track-faq-item[open] {
    background: var(--white);
    border-color: var(--secondary-light);
}
.track-faq-item summary {
    list-style: none;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.track-faq-item summary::-webkit-details-marker { display: none; }
.track-faq-item summary i { color: var(--secondary); font-size: 16px; }
.track-faq-item p {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}
.track-faq-item a { color: var(--secondary); font-weight: 600; }

@media (max-width: 991.98px) {
    .track-order-hero { padding: 16px; gap: 12px; }
    .track-order-hero-icon { width: 52px; height: 52px; font-size: 22px; border-radius: 14px; }
    .track-order-title { font-size: 22px; }
    .track-help-card { position: static; }
}
@media (max-width: 575.98px) {
    .track-form-row { flex-direction: column; gap: 12px; }
    .track-form-input {
        height: 58px;
        font-size: 16px;
        padding: 0 16px;
    }
    .btn-track-submit { width: 100%; height: 56px; font-size: 15px; }
    .track-progress-step { min-width: 90px; }
    .track-progress-label { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════
   CONTACT (Contactez-nous)
═══════════════════════════════════════════════════════ */
.contact-section { padding: 28px 0 60px; }
.contact-section .text-brand { color: var(--brand); }

.contact-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 22px;
}
.contact-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--brand-light);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}
.contact-hero-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ink);
}
.contact-hero-sub {
    color: var(--muted);
    margin: 0;
    font-size: 14px;
    max-width: 600px;
}

.contact-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 18px;
}
.contact-alert i { font-size: 18px; }
.contact-alert--success {
    background: #ECFDF5;
    border: 1px solid #a7f3d0;
    color: #065F46;
}
.contact-alert--error {
    background: #FEF2F2;
    border: 1px solid #fecaca;
    color: #991B1B;
}

.contact-form-card,
.contact-info-card { padding: 22px 24px; }

.contact-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: .02em;
}

.contact-input,
.contact-textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    background: var(--white);
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
}
.contact-input { height: 46px; }
.contact-textarea {
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
    min-height: 140px;
}
.contact-input::placeholder,
.contact-textarea::placeholder {
    color: #c4c0bb;
    font-weight: 500;
}
.contact-input:focus,
.contact-textarea:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(30, 60, 135, .14);
}
.contact-input.is-invalid,
.contact-textarea.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}
.contact-field-error {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #b91c1c;
    font-weight: 500;
}

.contact-privacy-note {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.contact-privacy-note i { color: var(--secondary); font-size: 14px; }

.btn-contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 6px 14px rgba(26, 26, 26, .15);
}
.btn-contact-submit i { font-size: 15px; }
.btn-contact-submit:hover {
    background: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(200, 57, 26, .22);
}
.btn-contact-submit:active { transform: translateY(0); }

.contact-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
}
.contact-info-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.contact-info-icon--brand     { background: var(--brand-light);     color: var(--brand); }
.contact-info-icon--secondary { background: var(--secondary-light); color: var(--secondary); }
.contact-info-icon--dark      { background: #ECEEF3;                color: var(--ink); }
.contact-info-icon--muted     { background: #F3F4F6;                color: var(--muted); }

.contact-info-label {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 2px;
    font-weight: 700;
}
.contact-info-value {
    display: block;
    font-size: 14px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}
a.contact-info-value:hover { color: var(--brand); }

.contact-socials {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}
.contact-socials-label {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin-bottom: 10px;
}
.contact-socials-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.contact-social {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.contact-social:hover { transform: translateY(-2px); }
.contact-social--facebook:hover  { background: #1877F2; color: #fff; border-color: #1877F2; }
.contact-social--instagram:hover { background: #E1306C; color: #fff; border-color: #E1306C; }
.contact-social--tiktok:hover    { background: #000000; color: #fff; border-color: #000000; }

.contact-hint-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--secondary-light);
    border-color: #cdd9f0;
}
.contact-hint-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--secondary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.contact-hint-title {
    margin: 0 0 4px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-dark);
}
.contact-hint-text {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.55;
}
.contact-hint-text a {
    color: var(--secondary);
    font-weight: 700;
    text-decoration: underline;
}
.contact-hint-text a:hover { color: var(--secondary-dark); }

@media (max-width: 991.98px) {
    .contact-hero { padding: 16px; gap: 12px; }
    .contact-hero-icon { width: 52px; height: 52px; font-size: 22px; border-radius: 14px; }
    .contact-hero-title { font-size: 22px; }
}

@media (max-width: 575.98px) {
    .btn-contact-submit { width: 100%; justify-content: center; height: 48px; }
    .contact-form-card,
    .contact-info-card { padding: 18px; }
}