/* ═══════════════════════════════════════════════════════
   KAZOKU — COLOR TOKEN SYSTEM
   kz-style.css — :root block

   Only 4 inputs needed from theme settings.
   All other tokens auto-generated via color-mix().

   Percentages calibrated to match existing design values:
     --primary:      #1A233E  →  indigo family + text + borders
     --primary-dark: #131929  →  deepest overlay
     --secondary:    #2D5A42  →  green / cart action
     --accent:       #BC7C56  →  copper accent
═══════════════════════════════════════════════════════ */

:root {
  /* ════════════════════════════════════════════════════
     AUTO-GENERATED — calibrated to match design values
  ════════════════════════════════════════════════════ */

  /* ── NEUTRALS ── */
  --white:         #FFFFFF;
  --steel:         color-mix(in srgb, var(--primary)  4%, white);   /* ≈ #F4F5F7 */

  /* ── PRIMARY SCALE ── */
  --indigo:       var(--primary);                                   /* #1A233E */
  --indigo-soft:   color-mix(in srgb, var(--primary) 92%, white);   /* ≈ #2c3655 */
  --indigo-mid:    color-mix(in srgb, var(--primary) 95%, white);   /* ≈ #222d4e */
  --indigo-deep:  var(--primary-dark);                             /* #131929 */
  --checkout:     var(--primary);                                   /* #1A233E */

    /* ── ACCENT SCALE ── */
    --copper:        var(--accent);
    --copper-light:  color-mix(in srgb, var(--accent) 81%, white);        /* ≈ #d4956f */
    --copper-dark:   color-mix(in srgb, var(--accent) 75%, black);        /* ≈ #8a5a3d */
    --copper-dim:    color-mix(in srgb, var(--accent) 18%, transparent);  /* rgba(188,124,86,0.18) */

  /* ── SECONDARY (action) SCALE ── */
  --green:        var(--secondary);                                 /* #2D5A42 */
  --green-hover:   color-mix(in srgb, var(--secondary) 67%, black); /* ≈ #1E3D2C */

  /* ── TEXT ── */
  --text:         var(--primary);                                   /* #1A233E */
  --text-mid:      color-mix(in srgb, var(--primary) 72%, white);   /* ≈ #5a6275 */
  --text-muted:    color-mix(in srgb, var(--primary) 47%, white);   /* ≈ #9099b0 */

  /* ── BORDERS & SURFACES ── */
  --border:        color-mix(in srgb, var(--primary) 12%, white);   /* ≈ #e2e4e9 */
  --border-dim:    rgba(255, 255, 255, 0.09);                       /* on dark bg — keep as-is */
  --input-bg:      color-mix(in srgb, var(--primary)  1%, white);   /* ≈ #FAFAFA */
  --surface-2:     color-mix(in srgb, var(--primary)  3%, transparent); /* rgba(26,35,62,0.03) */

  /* ── FOCUS ── */
  --focus:        var(--accent);                                    /* copper */

  /* ── SHADOWS ── */
  --shadow-1:      0 2px 8px  color-mix(in srgb, var(--primary) 60%, transparent); /* ≈ rgba(26,35,62,0.06) */
  --shadow-2:      0 8px 28px color-mix(in srgb, var(--primary) 50%, transparent); /* ≈ rgba(26,35,62,0.09) */
  --shadow-drop:   0 12px 40px color-mix(in srgb, var(--primary) 55%, transparent);/* ≈ rgba(26,35,62,0.13) */

  /* ── LAYOUT ── */
  --container:     1240px;
  --gutter:        30px;
  --header-h:      68px;
  --topbar-h:      36px;

  /* ── EASING ── */
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);

  /* ── TYPOGRAPHY ── */
  --font-display:  'Playfair Display', serif;
  --font-alt:      'Cormorant Garamond', serif;
  --font-body:     'DM Sans', sans-serif;
}

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

/* ── BASE TYPOGRAPHY ── */
body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--steel);
    -webkit-font-smoothing: antialiased;
}


a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
.page {
    padding: 32px 0 64px
}

.container {
    width: min(var(--container), calc(100% - var(--gutter)));
    margin: 0 auto;
}

/* ══════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════ */
.breadcrumb {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0;
    margin: 0;
}
.breadcrumb__inner {
    width: min(var(--container), calc(100% - var(--gutter)));
    margin: 0 auto;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.breadcrumb__home {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.breadcrumb__home:hover {
    color: var(--indigo);
}
.breadcrumb__sep {
    font-size: 12px;
    color: var(--text-muted);
}
.breadcrumb__current {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-muted);
}
.breadcrumb__current::before, .breadcrumb__mid::before {
    content: '›';
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 8px;
}

/* =========================
   Add to Cart Toast (Barik)
   ========================= */
.cart-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-12px) scale(.98);
    transition: opacity .28s ease, transform .32s ease;
}
.cart-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.cart-toast-inner {
    display: grid;
    grid-template-columns: 36px 1fr auto 24px;
    gap: 12px;
    align-items: center;
    min-width: 320px;
    max-width: 420px;
    background: linear-gradient( 180deg, var(--barik-700) 0%, var(--barik-800) 100%);
    color: #fff;
    border-radius: var(--radius-14);
    padding: 14px 16px;
    box-shadow: var(--shadow-2);
    border: 1px solid rgba(255, 255, 255, .12);
}
.cart-toast-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 16px;
}
.cart-toast-title {
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .01em;
}
.cart-toast-text {
    font-size: 12px;
    opacity: .9;
    margin-top: 2px;
}
.cart-toast-action {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35);
    transition: background .18s ease, transform .12s ease;
}
.cart-toast-action:hover {
    background: rgba(255, 255, 255, .16);
    transform: translateY(-1px);
}
.cart-toast-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    opacity: .75;
}
.cart-toast-close:hover {
    opacity: 1
}
/* Mobile */

@media (max-width:520px) {
    .cart-toast {
        right: 12px;
        left: 12px;
        top: 12px;
    }
    .cart-toast-inner {
        min-width: auto;
        width: 100%;
    }
}
/* Kicker label above headings */

.b-sec__kicker, .section-label {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: 12px;
}
/* Section heading — Playfair */

.b-sec__title {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 400;
    color: var(--indigo);
    line-height: 1.1;
}
.b-sec__title em, h2 em {
    font-style: italic;
}
/* Section subtext */

.b-sec__sub {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.7;
}
/* Copper rule — short decorative line */

.b-rule {
    width: 32px;
    height: 2px;
    background: var(--copper);
}
/* Copper left border accent */

.b-copper-bar {
    border-left: 2px solid var(--copper);
    padding-left: 18px;
}
/* ── COMMON BUTTON ── */

.btn, .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 28px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
    text-decoration: none;
    border-radius: 0;
}
.btn-primary {
    background: var(--checkout);
    color: var(--white);
}
.btn-primary:hover {
    background: var(--indigo-mid);
}
/* ── ENTRY ANIMATION (shared) ── */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ═══════════════════════════════════
   A. PAGINATION
═══════════════════════════════════ */

.b-paging {
    padding: 32px 0 8px;
    display: flex;
    justify-content: flex-start;
}
.b-paging .pagination {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.b-paging .pagination li a, .b-paging .pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--text-mid);
    background: var(--white);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.b-paging .pagination li a:hover {
    background: var(--indigo);
    color: var(--white);
    border-color: var(--indigo);
}
.b-paging .pagination li.active span {
    background: var(--indigo);
    color: var(--white);
    border-color: var(--indigo);
    font-weight: 500;
}
/* nav arrows — slightly wider */

.b-paging .pagination li:last-child a, .b-paging .pagination li:nth-last-child(2) a {
    font-size: 10px;
    color: var(--text-muted);
}
.b-search-panel {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: relative;
}
/* thin copper accent top edge */

.b-search-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--copper);
}
.b-search-panel__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 56px 24px;
}
/* ── main row: input + select + button ── */

.b-search-row {
    display: grid;
    grid-template-columns: 1fr 220px auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 16px;
}
/* ═══════════════════════════════════════════════════════
   SEARCH OVERLAY — Category dropdown + layout fix
═══════════════════════════════════════════════════════ */

/* Row: category | input | submit — all same height, flush */

.b-search-form {
    display: flex;
    align-items: stretch;
    width: 100%;
}
/* ── Category trigger button ── */

.b-search-cat {
    position: relative;
    flex-shrink: 0;
}
.b-search-cat__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 16px;
    background: var(--steel);
    border: none;
    border-right: 1px solid var(--border);
    color: var(--indigo);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s;
    min-width: 100px;
    max-width: 160px;
}
.b-search-cat__btn:hover {
    background: var(--border);
}
.b-search-cat__btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
    opacity: 0.55;
}
/* Truncate long category name */

.b-search-cat__btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}
/* Caret arrow */

.b-search-cat__btn::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
    margin-left: 4px;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.b-search-cat__btn[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}
/* ── Dropdown menu ── */

.b-search-cat__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2px solid var(--copper);
    box-shadow: var(--shadow-drop, 0 12px 40px rgba(26, 35, 62, 0.13));
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    padding: 6px 0;
}
.b-search-cat__menu.open {
    display: flex;
}
.b-search-cat__menu button {
    display: block;
    width: 100%;
    padding: 15px 18px;
    text-align: left;
    background: transparent;
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 0px;
}
.b-search-cat__menu button:hover {
    background: var(--steel);
    color: var(--copper);
}
.b-search-cat__menu button:first-child {
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
/* Scrollbar styling */

.b-search-cat__menu::-webkit-scrollbar {
    width: 4px;
}
.b-search-cat__menu::-webkit-scrollbar-track {
    background: transparent;
}
.b-search-cat__menu::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
/* ── Search box max-width wider to fit 3 elements ── */

.b-search-box {
    max-width: 720px !important;
}
/* ── Input: fills remaining space ── */

.b-search-input {
    flex: 1 1 0;
    min-width: 0;
}
/* ── Submit: fixed width, same height ── */

.b-search-submit {
    flex-shrink: 0;
}
/* ── Suggest panel: full width below form ── */

.b-search-suggest {
    display: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: none;
    max-height: 320px;
    overflow-y: auto;
    flex-direction: column;
}
.b-search-suggest.show {
    display: flex;
}
.b-search-suggest h5 {
    padding: 10px 16px 6px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.b-suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.b-suggest-item:last-child {
    border-bottom: none;
}
.b-suggest-item:hover, .b-suggest-item.active {
    background: var(--steel);
}
.b-suggest-item strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--indigo);
}
.b-suggest-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.b-suggest-item svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
/* ── Mobile: stack category on smaller screens ── */

@media (max-width: 560px) {
    .b-search-cat__btn {
        min-width: 60px;
        padding: 0 10px;
        font-size: 12px;
    }
    .b-search-cat__btn span {
        display: none;
    }
    .b-search-box {
        padding: 0 12px !important;
    }
}
/* shared field style */

.b-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.b-field__label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.b-field input[type="text"], .b-field select {
    height: 44px;
    border: 1px solid var(--border);
    background: var(--steel);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    color: var(--indigo);
    padding: 0 14px;
    outline: none;
    width: 100%;
    transition: border-color 0.2s, background 0.2s;
    appearance: none;
    -webkit-appearance: none;
}
.b-field input[type="text"]:focus, .b-field select:focus {
    border-color: var(--copper);
    background: var(--white);
}
/* select wrapper — custom arrow */

.b-field--select {
    position: relative;
}
.b-field--select::after {
    content: '';
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
    pointer-events: none;
}
.b-field--select select {
    padding-right: 32px;
    cursor: pointer;
}
/* optgroup indent via option padding */

.b-field--select option[value="0"] {
    font-weight: 500;
}
/* search button */

.b-search-btn {
    height: 44px;
    padding: 0 28px;
    background: var(--indigo);
    color: var(--white);
    border: none;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    align-self: end;
}
.b-search-btn:hover {
    background: var(--copper);
}
/* ── secondary options row ── */

.b-search-opts {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.b-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.b-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--border);
    background: var(--white);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
}
.b-check input[type="checkbox"]:checked {
    background: var(--indigo);
    border-color: var(--indigo);
}
.b-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 3.5px;
    width: 4px;
    height: 7px;
    border: 1.5px solid var(--white);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.b-check__label {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-mid);
    line-height: 1;
}
/* ══════════════════════════════════════
   B. SMARTSEARCH-PRO  — CSS only reskin
   (no HTML changes to #smartsearch-pro)
══════════════════════════════════════ */

#smartsearch-pro {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 56px 0;
}
/* section blocks */

.smartsearch-pro {
    margin-bottom: 0 !important;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0 !important;
}
.smartsearch-pro:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
/* section headings h2 */

.smartsearch-pro h2 {
    font-family: var(--font-body);
    font-size: 9px !important;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 0;
}
/* links as chips */

.smartsearch-pro a {
    display: inline-flex !important;
    align-items: center;
    height: 32px;
    padding: 0 14px !important;
    margin: 0 4px 6px 0;
    border: 1px solid var(--border) !important;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 12px !important;
    font-weight: 300 !important;
    color: var(--text-mid) !important;
    text-decoration: none !important;
    text-align: left !important;
    white-space: nowrap;
    width: auto !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    box-shadow: none !important;
}
.smartsearch-pro a:hover {
    border-color: var(--indigo) !important;
    background: var(--indigo) !important;
    color: var(--white) !important;
    box-shadow: none !important;
}
/* category chips — slightly different accent */

.smartsearch-pro .category:hover {
    border-color: var(--copper) !important;
    background: var(--copper) !important;
}
/* manufacturer chips */

.smartsearch-pro .manufacturer img {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}
/* hide zero-size images cleanly */

.smartsearch-pro img[height="0"] {
    display: none !important;
}
/* wrapper of both blocks */

#smartsearch-pro>.smartsearch-pro {
    display: block;
}
/* ══════════════════════════════════════
   C. CAT-INTRO  (identical to category)
══════════════════════════════════════ */

.cat-intro {
    background: var(--indigo);
    position: relative;
    overflow: hidden;
}
.cat-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient( -55deg, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 28px);
    pointer-events: none;
}
.cat-intro::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--copper);
}
.cat-intro__inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 56px 44px 72px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}
.cat-intro__kicker {
    display: block;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--copper);
    opacity: 0.9;
}
.cat-intro__title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 400;
    color: var(--white);
    line-height: 1.1;
}
/* query highlight in title */

.cat-intro__title em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
}
.cat-intro__meta {
    font-size: 12px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.5px;
}
/* ══════════════════════════════════════
   D.  RESULTS HEADER  (h2 "Products…")
══════════════════════════════════════ */

.b-results-header {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 56px 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.b-results-header__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    color: var(--indigo);
}
.b-results-header__count {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 1px;
}
/* divider between smart-results and product results */

.b-results-divider {
    max-width: 1240px;
    margin: 24px 56px 0;
    height: 1px;
    background: var(--border);
}
/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width: 860px) {
    .b-search-panel__inner, #smartsearch-pro, .b-results-header {
        padding-left: 20px;
        padding-right: 20px;
    }
    .b-search-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .b-field--select::after {
        bottom: 14px;
    }
    .b-search-btn {
        width: 100%;
        justify-content: center;
    }
    .cat-intro__inner {
        padding: 32px 20px 36px 28px;
    }
}
@media (max-width: 480px) {
    .smartsearch-pro a {
        font-size: 11px !important;
        height: 30px;
        padding: 0 10px !important;
    }
}
/* ══════════════════════════════════════
   ENTRY ANIM
══════════════════════════════════════ */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.b-search-panel {
    animation: fadeUp 0.5s 0.0s var(--ease) both;
}
.cat-intro {
    animation: fadeUp 0.5s 0.1s var(--ease) both;
}
#smartsearch-pro {
    animation: fadeUp 0.5s 0.18s var(--ease) both;
}
.b-results-header {
    animation: fadeUp 0.5s 0.25s var(--ease) both;
}
.b-cart-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 40px 80px;
}
/* ── HEADER ── */

.basket-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 10px;
}
.basket-header h1 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 400;
    color: var(--indigo);
    line-height: 1.1;
    margin-bottom: 6px;
}
.not-reserved {
    font-size: 13px;
    font-weight: 300;
    color: var(--text-muted);
}
/* ── META PILLS ── */

.bt-cart-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.bt-cart-meta-pill {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-mid);
    background: var(--white);
    border: 1px solid var(--border);
    padding: 5px 13px;
    letter-spacing: 0.3px;
}
.bt-cart-meta-pill strong {
    font-weight: 500;
    color: var(--indigo);
}
/* ── WARNING ── */

.b-cart-warning {
    background: #fdf3ef;
    border-left: 3px solid var(--copper);
    padding: 12px 18px;
    font-size: 13px;
    color: var(--text-mid);
    margin-bottom: 20px;
    display: none;
}
/* ═══════════════════════════════════════════════════════
   TWO-COLUMN LAYOUT
═══════════════════════════════════════════════════════ */

.page {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 28px;
    align-items: start;
}
/* ═══════════════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════════════ */

.main-content {
    min-width: 0;
}
/* ── CART ITEMS LIST ── */

.cart-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 2px;
}
/* ── CART ITEM ── */

.cart-item {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 20px;
    align-items: start;
    background: var(--white);
    padding: 24px;
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    transition: border-left-color 0.25s var(--ease);
}
.cart-item:hover {
    border-left-color: var(--copper);
}
/* image */

.item-img-wrap {
    position: relative;
    width: 88px;
    flex-shrink: 0;
}
.item-img-wrap a {
    display: block;
}
.item-img-wrap img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
    filter: saturate(0.9);
    transition: filter 0.3s;
}
.cart-item:hover .item-img-wrap img {
    filter: saturate(1);
}
.wish-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s;
    padding: 0;
}
.wish-btn:hover {
    color: var(--copper);
    border-color: var(--copper);
}
/* item info */

.item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.item-category {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--copper);
    text-decoration: none;
}
.item-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 400;
    color: var(--indigo);
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.2s;
}
.item-name:hover {
    color: var(--copper);
}
.item-delivery {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.item-delivery::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}
/* qty */

.qty-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.qty-label {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 1px;
}
.qty-select {
    height: 32px;
    padding: 0 24px 0 10px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--indigo);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239099b0' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.2s;
}
.qty-select:focus {
    border-color: var(--copper);
}
/* actions col */

.item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    min-width: 80px;
}
.delete-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    padding: 0;
}
.delete-btn:hover {
    color: #c0392b;
    border-color: #c0392b;
    background: #fff5f5;
}
.price-main {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    color: var(--indigo);
}
/* ═══════════════════════════════════════════════════════
   TOTALS + COUPON
═══════════════════════════════════════════════════════ */

.totals-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2px solid var(--indigo);
    padding: 24px;
    margin-bottom: 2px;
}
.totals-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.totals-discount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-mid);
}
.totals-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}
.totals-label {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--indigo);
}
.totals-amount {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    color: var(--indigo);
}
/* coupon */

.coupon-row {
    display: flex;
    gap: 0;
}
.coupon-input {
    flex: 1;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-right: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    color: var(--indigo);
    outline: none;
    transition: border-color 0.2s;
}
.coupon-input::placeholder {
    color: var(--text-muted);
}
.coupon-input:focus {
    border-color: var(--indigo);
}
.coupon-btn {
    height: 40px;
    padding: 0 18px;
    background: var(--indigo);
    border: 1px solid var(--indigo);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s;
}
.coupon-btn:hover {
    background: var(--indigo-mid);
}
/* ═══════════════════════════════════════════════════════
   CHECKOUT BUTTON
═══════════════════════════════════════════════════════ */

.order-btn-bottom {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.btn-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: var(--green);
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    gap: 4px;
    transition: background 0.25s var(--ease);
    text-align: center;
    border: none;
    cursor: pointer;
}
.btn-order:hover {
    background: var(--green-hover);
}
.bt-checkout-subtext {
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: none;
    color: rgba(255, 255, 255, 0.6);
}
/* badges */

.bt-badges {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.bt-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 300;
    color: var(--text-mid);
}
.bt-badge svg {
    width: 13px;
    height: 13px;
    stroke: var(--copper);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
/* payment icons */

.payment-section {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.payment-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.payment-icon img {
    height: 22px;
    width: auto;
    opacity: 0.45;
    filter: grayscale(1);
    transition: opacity 0.2s, filter 0.2s;
}
.payment-icon:hover img {
    opacity: 0.8;
    filter: grayscale(0);
}
/* header checkout btn */

.btn-order-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--green);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.25s var(--ease);
    border: none;
}
.btn-order-top:hover {
    background: var(--green-hover);
}
.btn-order-top svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* ═══════════════════════════════════════════════════════
   SIDEBAR — USP
═══════════════════════════════════════════════════════ */

.sidebar {
    position: sticky;
    top: 28px;
}
.usp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2px solid var(--copper);
    overflow: hidden;
}
.usp-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 300;
    color: var(--text-mid);
    line-height: 1.5;
    transition: background 0.2s;
}
.usp-item:last-child {
    border-bottom: none;
}
.usp-item:hover {
    background: var(--steel);
}
.usp-icon {
    flex-shrink: 0;
    color: var(--copper);
    margin-top: 1px;
}
.usp-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* ═══════════════════════════════════════════════════════
   RECOMMENDATIONS
═══════════════════════════════════════════════════════ */

.b-recs-wrap {
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid var(--border);
}
.recs-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}
.recs-header-left {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.section-label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: 8px;
    display: block;
}
.recs-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 400;
    color: var(--indigo);
    line-height: 1.1;
}
.recs-title em {
    font-style: italic;
}
/* carousel wrapper */

.recs-carousel-wrap {
    position: relative;
    overflow: hidden;
}
.recs-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.recs-carousel::-webkit-scrollbar {
    display: none;
}
/* carousel nav */

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--indigo);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.carousel-nav:hover {
    background: var(--indigo);
    border-color: var(--indigo);
    color: var(--white);
}
.carousel-nav svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.carousel-nav.prev {
    left: 0;
}
.carousel-nav.next {
    right: 0;
}
/* rec card */

.rec-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    background: var(--white);
    border: 1px solid var(--border);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.rec-card:hover {
    box-shadow: 0 8px 28px rgba(26, 35, 62, 0.09);
    transform: translateY(-2px);
}
.rec-img {
    position: relative;
    aspect-ratio: 1;
    background: var(--steel);
    overflow: hidden;
}
.rec-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
    filter: saturate(0.85);
    transition: transform 0.5s var(--ease), filter 0.5s;
}
.rec-card:hover .rec-img img {
    transform: scale(1.05);
    filter: saturate(1);
}
.rec-wish, .rec-cart {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.25s, color 0.2s;
    padding: 0;
}
.rec-card:hover .rec-wish, .rec-card:hover .rec-cart {
    opacity: 1;
}
.rec-wish {
    top: 8px;
    right: 8px;
    color: var(--text-muted);
}
.rec-wish:hover {
    color: var(--copper);
}
.rec-cart {
    bottom: 8px;
    right: 8px;
    background: var(--indigo);
    border-color: var(--indigo);
    color: var(--white);
}
.rec-cart:hover {
    background: var(--indigo-mid);
}
.rec-cart svg, .rec-wish svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rec-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.rec-category {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--copper);
}
.rec-name {
    font-size: 13px;
    font-weight: 400;
    color: var(--indigo);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rec-price {
    margin-top: auto;
    padding-top: 10px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    color: var(--indigo);
}
/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .page {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: static;
    }
    .usp-list {
        flex-direction: row;
        flex-wrap: wrap;
        border-top-width: 1px;
        border-left: 2px solid var(--copper);
    }
    .usp-item {
        flex: 1 1 45%;
        border-bottom: 1px solid var(--border);
        border-right: 1px solid var(--border);
    }
    .b-cart-page {
        padding: 32px 20px 60px;
    }
}
@media (max-width: 600px) {
    .cart-item {
        grid-template-columns: 72px 1fr;
        gap: 14px;
    }
    .item-actions {
        flex-direction: row;
        align-items: center;
        grid-column: 1 / -1;
        justify-content: space-between;
    }
    .basket-header {
        flex-direction: column;
    }
    .btn-order-top {
        display: none;
    }
    .usp-item {
        flex: 1 1 100%;
    }
    .rec-card {
        flex: 0 0 160px;
    }
}
/* ── BASE RESET (scoped) ── */

.b-topbar *, .b-header *, .b-drawer *, .b-search-overlay * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* ═══════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════ */

.b-topbar {
    background: var(--indigo-deep);
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-dim);
    position: relative;
    z-index: 200;
}
.b-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
}
/* promo pill left */

.b-topbar__left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
}
.b-topbar__left strong {
    font-weight: 500;
    color: var(--copper);
    letter-spacing: 0.3px;
}
.b-topbar__left span {
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.3px;
}
/* right links + selectors */

.b-topbar__right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.b-topbar__right>a, .b-topbar__right>a, .top-header-menu li a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.2s;
}
.b-topbar__right>a:hover, .b-topbar__right>a, .top-header-menu li a:hover {
    color: var(--white);
}
.b-topbar__divider {
    display: block;
    width: 1px;
    height: 14px;
    background: var(--border-dim);
}
/* selectors container */

.b-selectors {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* ── TOPBAR DROPDOWN (lang / currency) ── */

.b-tb-select {
    position: relative;
}
.b-tb-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--border-dim);
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.b-tb-trigger:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--white);
}
.b-flag-img {
    width: 14px;
    height: auto;
    border-radius: 1px;
}
.b-tb-caret {
    width: 8px;
    height: 8px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s var(--ease);
}
.b-tb-select.is-open .b-tb-caret {
    transform: rotate(180deg);
}
/* dropdown panel */

.b-tb-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    min-width: 160px;
    box-shadow: var(--shadow-drop);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    z-index: 300;
}
.b-tb-select.is-open .b-tb-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.b-tb-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 300;
    color: var(--indigo);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.b-tb-option:last-child {
    border-bottom: none;
}
.b-tb-option:hover {
    background: var(--steel);
}
.b-tb-opt-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.b-tb-opt-name {
    font-weight: 400;
}
.b-tb-opt-sub {
    color: var(--text-muted);
    font-size: 10px;
}
.b-check-icon {
    width: 14px;
    height: 14px;
    stroke: var(--copper);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    flex-shrink: 0;
}
.b-tb-option.is-active .b-check-icon {
    opacity: 1;
}
/* ═══════════════════════════════════════════════════════
   MAIN HEADER
═══════════════════════════════════════════════════════ */

.b-header {
    background: var(--white);
    height: var(--header-h);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 190;
    transition: box-shadow 0.3s var(--ease);
}
.b-header.is-scrolled {
    box-shadow: 0 2px 20px rgba(26, 35, 62, 0.08);
}
.b-header__inner {
    width: min(var(--container), calc(100% - var(--gutter)));
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    gap: 24px;
}

/* ── LEFT: burger + logo ── */
.b-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
/* burger */

.b-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
}
.b-burger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--indigo);
    transition: transform 0.3s var(--ease), opacity 0.3s;
}
.b-burger.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.b-burger.is-open span:nth-child(2) {
    opacity: 0;
}
.b-burger.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}
/* logo */

.b-logo img {
    height: 36px;
    width: auto;
    display: block;
}
/* ── CENTER: desktop nav ── */

.b-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}
.b-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0;
}
.b-item {
    position: relative;
}
.b-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    height: var(--header-h);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--indigo);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s;
}
/* copper underline on hover / active */

.b-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--copper);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s var(--ease);
}
.b-item:hover .b-link::after, .b-item.is-open .b-link::after {
    transform: scaleX(1);
}
.b-item:hover .b-link, .b-item.is-open .b-link {
    color: var(--copper);
}
/* caret */

.b-caret {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    transition: transform 0.25s var(--ease);
}
.b-item.is-open .b-caret {
    transform: rotate(180deg);
}
/* ── MEGA DROPDOWN ── */

.b-drop {
    position: absolute;
    top: calc(var(--header-h) - 1px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2px solid var(--copper);
    min-width: 560px;
    box-shadow: var(--shadow-drop);
    padding: 20px 20px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
    z-index: 180;
}
.b-item.is-open .b-drop {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.b-drop__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding-bottom: 16px;
}
.b-sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
}
.b-sub:hover {
    border-color: var(--border);
    background: var(--steel);
}
.b-sub img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: saturate(0.85);
    transition: filter 0.3s;
}
.b-sub:hover img {
    filter: saturate(1);
}
.b-sub span {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    color: var(--indigo);
    text-align: center;
    line-height: 1.3;
}
.b-seeall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    margin: 0 -20px;
    background: var(--steel);
    border-top: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--indigo);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.b-seeall:hover {
    background: var(--indigo);
    color: var(--white);
}
.b-seeall svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s;
}
.b-seeall:hover svg {
    transform: translateX(3px);
}
/* ── RIGHT: actions ── */

.b-right {
    flex-shrink: 0;
}
.b-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.b-act-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--indigo);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.b-act-btn:hover {
    border-color: var(--border);
    color: var(--copper);
}
.b-act-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* badge count */

.b-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    background: var(--copper);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 500;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
}
/* ── ACCOUNT DROPDOWN ── */

.b-acct-wrap {
    position: relative;
}
.b-acct-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2px solid var(--indigo);
    min-width: 160px;
    box-shadow: var(--shadow-drop);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    z-index: 300;
}
.b-acct-wrap.is-open .b-acct-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.b-acct-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    color: var(--indigo);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.b-acct-panel a:last-child {
    border-bottom: none;
}
.b-acct-panel a:hover {
    background: var(--steel);
}
.b-acct-panel a svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
}
/* ── CART PREVIEW POPUP ── */

.b-cart-wrap {
    position: relative;
}
.b-cartpop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2px solid var(--green);
    box-shadow: var(--shadow-drop);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    z-index: 300;
}
.b-cart-wrap.is-open .b-cartpop {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.b-cartpop__empty {
    padding: 32px 20px;
    text-align: center;
}
.b-cartpop__empty svg {
    width: 32px;
    height: 32px;
    stroke: var(--border);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    margin-bottom: 12px;
}
.b-cartpop__empty p {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    color: var(--text-muted);
}
.b-cartpop__items {
    max-height: 280px;
    overflow-y: auto;
}
.b-cartpop__item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.b-cartpop__item:last-child {
    border-bottom: none;
}
.b-cartpop__item img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.b-cartpop__name {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--indigo);
    line-height: 1.35;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.b-cartpop__qty {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-muted);
}
.b-cartpop__price {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 400;
    color: var(--indigo);
    white-space: nowrap;
}
.b-cartpop__footer {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.b-cartpop__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.b-cartpop__total-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-mid);
}
.b-cartpop__total-amount {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    color: var(--indigo);
}
.b-cartpop__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--green);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s;
}
.b-cartpop__cta:hover {
    background: var(--green-hover);
}
.b-cartpop__cta svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* ═══════════════════════════════════════════════════════
   SEARCH OVERLAY
═══════════════════════════════════════════════════════ */

.b-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 35, 62, 0.55);
    z-index: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 120px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
    backdrop-filter: blur(3px);
}
.b-search-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.b-search-box {
    width: 100%;
    max-width: 600px;
    padding: 0 24px;
    transform: translateY(-12px);
    transition: transform 0.35s var(--ease);
}
.b-search-overlay.is-open .b-search-box {
    transform: translateY(0);
}
.b-search-inner {
    display: flex;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2px solid var(--copper);
    overflow: hidden;
    flex-direction: column;
}
.b-search-input {
    flex: 1;
    height: 52px;
    padding: 0 20px;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 300;
    color: var(--indigo);
    background: transparent;
}
.b-search-input::placeholder {
    color: var(--text-muted);
}
.b-search-submit {
    width: 52px;
    height: 52px;
    background: var(--copper);
    border: none;
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.b-search-submit:hover {
    background: #a36a44;
}
.b-search-submit svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.b-search-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.b-search-close:hover {
    background: rgba(255, 255, 255, 0.2);
}
.b-search-close svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}
.b-search-hint {
    margin-top: 14px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    text-align: center;
}
/* ═══════════════════════════════════════════════════════
   MOBILE DRAWER
═══════════════════════════════════════════════════════ */

.b-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 35, 62, 0.5);
    z-index: 350;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
}
.b-drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.b-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    background: var(--white);
    border-right: 1px solid var(--border);
    z-index: 360;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.35s var(--ease);
    overflow-y: auto;
}
.b-drawer.is-open {
    transform: translateX(0);
}
.b-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.b-drawer__brand {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    color: var(--indigo);
}
.b-drawer__brand em {
    font-style: italic;
    color: var(--copper);
}
.b-drawer__close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--indigo);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b-drawer__close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}
/* mobile nav list */

.b-mmenu {
    list-style: none;
    flex: 1;
}
.b-mitem {
    border-bottom: 1px solid var(--border);
}
.b-mitem>a, .b-mtoggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--indigo);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.b-mitem>a:hover, .b-mtoggle:hover {
    background: var(--steel);
    color: var(--copper);
}
.b-mchev {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.25s var(--ease);
}
.b-mitem.is-open .b-mchev {
    transform: rotate(180deg);
}
.b-mdrop {
    background: var(--steel);
    border-top: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease);
}
.b-mitem.is-open .b-mdrop {
    max-height: 600px;
}
.b-mdrop a {
    display: block;
    padding: 11px 20px 11px 32px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    color: var(--text-mid);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color 0.15s, background 0.15s;
}
.b-mdrop a:hover {
    color: var(--copper);
    background: var(--white);
}
.b-mdrop .b-seeall {
    font-size: 10px;
    letter-spacing: 2.5px;
    color: var(--copper);
    padding-left: 32px;
    border-bottom: none;
    background: transparent;
    justify-content: flex-start;
    margin: 0;
}
/* drawer footer */

.b-drawer__footer {
    border-top: 1px solid var(--border);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
.b-drawer__link {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 300;
    color: var(--text-mid);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.b-drawer__link:hover {
    color: var(--copper);
}
.b-drawer__link svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
}
/* ═══════════════════════════════════════════════════════
   MOBILE NAV (hidden on desktop)
═══════════════════════════════════════════════════════ */

.b-mobile {
    display: none;
}
/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .b-topbar__inner, .b-header__inner {
        padding: 0 24px;
    }
    .b-drop {
        min-width: 420px;
    }
    .b-drop__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 860px) {
    .b-burger {
        display: flex;
    }
    .b-nav.b-desktop {
        display: none;
    }
    .b-topbar__right>a {
        display: none;
    }
    .b-topbar__divider {
        display: none;
    }
}
@media (max-width: 600px) {
    .b-topbar__left span {
        display: none;
    }
    .b-logo img {
        height: 28px;
    }
    .b-cartpop {
        width: 280px;
        right: -12px;
    }
}
/* ═══════════════════════════════════════════════════════
   SEARCH OVERLAY — Category dropdown fix
   Problem: .b-search-inner has overflow:hidden which clips
   the absolute-positioned dropdown. Fix: use .b-search-box
   as the positioning context instead.
═══════════════════════════════════════════════════════ */

/* Widen search box to fit 3 elements comfortably */

.b-search-box {
    max-width: 720px !important;
    position: relative;
}
/* Form row: category | input | submit — same height, flush */

.b-search-form {
    display: flex;
    align-items: stretch;
    width: 100%;
}
/* ── Category wrapper ── */

.b-search-cat {
    position: static;
    flex-shrink: 0;
}
/* ── Category trigger button ── */

.b-search-cat__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 16px;
    background: var(--steel);
    border: none;
    border-right: 1px solid var(--border);
    color: var(--indigo);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s;
    min-width: 90px;
    max-width: 160px;
}
.b-search-cat__btn:hover {
    background: var(--border);
}
.b-search-cat__btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
    opacity: 0.5;
}
.b-search-cat__btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
}
.b-search-cat__btn::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
    margin-top: -3px;
    margin-left: 6px;
    flex-shrink: 0;
    transition: transform 0.2s, margin-top 0.2s;
}
.b-search-cat__btn[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}
/* ── Dropdown menu ──
   Anchored to .b-search-box (position:relative),
   NOT .b-search-cat, so overflow:hidden on
   .b-search-inner does NOT clip it.
── */

.b-search-cat__menu {
    position: absolute;
    top: calc(100% + -30px);
    left: 25px;
    z-index: 500;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2px solid var(--copper);
    box-shadow: 0 12px 40px rgba(26, 35, 62, 0.13);
    min-width: 220px;
    max-width: 320px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    padding: 4px 0;
}
.b-search-cat__menu.open {
    display: flex;
}
.b-search-cat__menu button {
    display: block;
    width: 100%;
    padding: 20px;
    text-align: left;
    background: transparent;
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.b-search-cat__menu button:hover {
    background: var(--steel);
    color: var(--copper);
}
.b-search-cat__menu button:first-child {
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 2px;
}
.b-search-cat__menu::-webkit-scrollbar {
    width: 4px;
}
.b-search-cat__menu::-webkit-scrollbar-track {
    background: transparent;
}
.b-search-cat__menu::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
/* ── Input fills remaining space ── */

.b-search-input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
/* ── Suggest panel ── */

.b-search-suggest {
    display: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: none;
    max-height: 280px;
    overflow-y: auto;
    flex-direction: column;
}
.b-search-suggest.show {
    display: flex;
}
.b-search-suggest h5 {
    padding: 10px 16px 6px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.b-suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.b-suggest-item:last-child {
    border-bottom: none;
}
.b-suggest-item:hover, .b-suggest-item.active {
    background: var(--steel);
}
.b-suggest-item strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--indigo);
}
.b-suggest-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.b-suggest-item svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
/* ── Mobile ── */

@media (max-width: 560px) {
    .b-search-cat__btn {
        min-width: 52px;
        padding: 0 10px;
    }
    .b-search-cat__btn span {
        display: none;
    }
    .b-search-box {
        padding: 0 12px !important;
    }
}
.focus-ring:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}
.section-inner {
    max-width: var(--container);
    margin: 0 auto;
}

.b-cartpop__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    margin-top: 4px;
    background: transparent;
    border: 1.5px solid #d1d5db;
    border-radius: 50%;
    cursor: pointer;
    color: #9ca3af;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
.b-cartpop__remove svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    fill: none;
    pointer-events: none;
}
.b-cartpop__remove:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #ef4444;
    transform: scale(1.1);
}
.b-cartpop__remove:active {
    transform: scale(0.95);
    background: #fecaca;
    border-color: #ef4444;
}
.b-cartpop__remove:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}
/* ══════════════════════════════════════
   PRODUCT GRID
══════════════════════════════════════ */

.b-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--border);
}
/* ══════════════════════════════════════
   PRODUCT CARD  (.b-card)
══════════════════════════════════════ */

.b-card {
    background: var(--white);
    position: relative;
    display: flex;
    flex-direction: column;
}
/* ── media area ── */

.b-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--steel);
}
/* copper left bar scaleY on hover */

.b-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--copper);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.35s var(--ease);
    z-index: 5;
}
.b-card:hover::before {
    transform: scaleY(1);
}
/* ── images — crossfade ── */

.b-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.b-card__img--alt {
    opacity: 0;
}
.b-card:has(.b-card__img--alt):hover .b-card__img:not(.b-card__img--alt) {
    opacity: 0;
    transform: scale(1.03);
}
.b-card:has(.b-card__img--alt):hover .b-card__img--alt {
    opacity: 1;
    transform: scale(1.03);
}
/* No alt image — subtle scale only, image stays visible */

.b-card:not(:has(.b-card__img--alt)):hover .b-card__img {
    transform: scale(1.03);
}
/* ── overlay: wishlist + compare (top-right) ── */

.b-card__overlay-top {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.b-card:hover .b-card__overlay-top {
    opacity: 1;
    transform: translateX(0);
}
/* stagger */

.b-card__overlay-top .wish-mini {
    transition-delay: 0s;
}
.b-card__overlay-top .compare-mini {
    transition-delay: 0.04s;
}
.wish-mini, .compare-mini {
    width: 30px;
    height: 30px;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--text-mid);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.wish-mini:hover, .compare-mini:hover {
    background: var(--indigo);
    color: var(--white);
    border-color: var(--indigo);
}
/* ── cart button (bottom-right) ── */

.btn-addtocart {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 4;
    width: 44px;
    height: 44px;
    background: var(--indigo);
    border: none;
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.2s;
}
.b-card:hover .btn-addtocart {
    opacity: 1;
    transform: translateY(0);
}
.btn-addtocart:hover {
    background: var(--copper);
}
/* remind variant — sold out */

.btn-addtocart.btn-addtocart--remind {
    background: var(--text-muted);
}
.btn-addtocart.btn-addtocart--remind:hover {
    background: var(--indigo);
}
/* SVG defensive rules */

.btn-addtocart svg, .wish-mini svg, .compare-mini svg {
    display: block !important;
    pointer-events: none;
    overflow: visible;
    max-width: none !important;
    fill: none !important;
    stroke: currentColor !important;
}
/* legacy — hide if still present */

.b-grid .b-actions {
    display: none;
}
/* ── ribbon ── */

.b-ribbon {
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 3;
    padding: 4px 10px 4px 8px;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.b-ribbon--soldout {
    background: var(--indigo);
    color: var(--white);
}
.b-ribbon--new {
    background: var(--copper);
    color: var(--white);
}
.b-ribbon--sale {
    background: #c0392b;
    color: var(--white);
}
/* sold-out overlay */

.b-card:has(.b-ribbon--soldout) .b-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26, 35, 62, 0.38);
    z-index: 2;
    pointer-events: none;
}
.b-card:has(.b-ribbon--soldout) .b-card__img {
    filter: grayscale(45%);
}
/* ── card body ── */

.b-card__body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    border-top: 1px solid var(--border);
}
.b-card__name {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--indigo);
    text-decoration: none;
    line-height: 1.4;
    display: block;
    transition: color 0.2s;
}
.b-card__name:hover {
    color: var(--copper);
}
.b-card__price {
    font-size: 15px;
    font-weight: 300;
    color: var(--indigo);
    margin-top: auto;
}
.b-card__price strong {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    color: var(--indigo);
}
/* ── entry animation ── */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.b-card:nth-child(1) {
    animation: fadeUp 0.5s 0.05s var(--ease) both;
}
.b-card:nth-child(2) {
    animation: fadeUp 0.5s 0.10s var(--ease) both;
}
.b-card:nth-child(3) {
    animation: fadeUp 0.5s 0.15s var(--ease) both;
}
.b-card:nth-child(4) {
    animation: fadeUp 0.5s 0.20s var(--ease) both;
}
.b-card:nth-child(5) {
    animation: fadeUp 0.5s 0.25s var(--ease) both;
}
.b-card:nth-child(6) {
    animation: fadeUp 0.5s 0.30s var(--ease) both;
}
.b-card:nth-child(7) {
    animation: fadeUp 0.5s 0.35s var(--ease) both;
}
.b-card:nth-child(8) {
    animation: fadeUp 0.5s 0.40s var(--ease) both;
}
.b-card:nth-child(9) {
    animation: fadeUp 0.5s 0.45s var(--ease) both;
}
.b-card:nth-child(10) {
    animation: fadeUp 0.5s 0.50s var(--ease) both;
}
/* ══════════════════════════════════════
   NAV CARD
   Structure: nav-card > nav-title + nav-list
   > li > a + nav-sublist
   All class names preserved exactly.
══════════════════════════════════════ */

.nav-card {
    background: var(--white);
    border-left: 3px solid var(--copper);
    /* subtle shadow */
    box-shadow: 0 1px 0 var(--border), 2px 0 0 var(--border);
}
/* ── title ── */

.nav-title {
    padding: 14px 18px 12px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    position: relative;
}
/* copper accent dot before title */

.nav-title::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background: var(--copper);
    border-radius: 50%;
}
/* ── top-level list ── */

.nav-list {
    padding: 4px 0 6px;
}
.nav-list li {
    display: flex;
    flex-direction: column;
}
/* ── top-level link ── */

.nav-list li > a{
    display: flex;
    align-items: center;
    padding: 9px 14px 9px 18px;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-mid);
    position: relative;
    transition: background 0.15s var(--ease), color 0.15s var(--ease), padding-left 0.18s var(--ease);
    gap: 8px;
}
/* copper scaleY left bar */

.nav-list li > a::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--copper);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.22s var(--ease);
}
/* chevron for items that have sublist — added via JS */

.nav-list li > a .nav-chevron{
    margin-left: auto;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.22s var(--ease), border-color 0.15s;
    display: none;
    /* shown by JS when sublist exists */
}
.nav-list li.has-sub > a .nav-chevron {
    display: block;
}
.nav-list li.has-sub.is-open > a .nav-chevron {
    transform: rotate(-135deg) translateY(-1px);
    border-color: var(--copper);
}
.nav-list li > a:hover{
    background: var(--steel);
    color: var(--indigo);
    padding-left: 22px;
}
.nav-list li > a:hover::before {
    transform: scaleY(1);
}
/* active parent */

.nav-list li > a.is-active {
    color: var(--indigo);
    font-weight: 400;
    background: rgba(188, 124, 86, 0.06);
    padding-left: 22px;
}
.nav-list li > a.is-active::before {
    transform: scaleY(1);
}
.nav-list li > a.is-active .nav-chevron {
    border-color: var(--copper);
}
/* ── badge ── */

.nav-list li > a .badge, .nav-sublist li a .badge {
    /* override Bootstrap badge */
    background: transparent !important;
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 300;
    color: var(--text-muted);
    padding: 1px 6px;
    min-width: 20px;
    text-align: center;
    line-height: 16px;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
/* push badge to far right — between text and chevron */

.nav-list li > a span:first-child {
    flex: 1;
}
.nav-list li > a:hover .badge, .nav-list li > a.is-active .badge {
    border-color: rgba(188, 124, 86, 0.4);
    color: var(--copper);
}
/* ── sub-list ── */

.nav-sublist {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.32s var(--ease);
    background: var(--steel);
    border-top: 1px solid var(--border);
}
/* open state set by JS */

.nav-list li.is-open > .nav-sublist {
    max-height: 600px;
}
/* active parent always shows sublist */

.nav-list li > a.is-active ~ .nav-sublist {
    max-height: 600px;
}
.nav-sublist li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 30px;
    font-size: 12px;
    font-weight: 300;
    color: var(--text-mid);
    position: relative;
    transition: background 0.15s var(--ease), color 0.15s var(--ease), padding-left 0.18s var(--ease);
}
/* small dash indent */

.nav-sublist li a::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--border);
    transform: translateY(-50%);
    transition: background 0.15s, width 0.15s;
}
.nav-sublist li a:hover {
    background: var(--white);
    color: var(--indigo);
    padding-left: 34px;
}
.nav-sublist li a:hover::before {
    background: var(--copper);
    width: 8px;
}
.nav-sublist li a.is-active {
    color: var(--copper);
    font-weight: 400;
}
.nav-sublist li a.is-active::before {
    background: var(--copper);
}
.nav-sublist li a span:first-child {
    flex: 1;
}
/* last item — no bottom border */

.nav-sublist li:last-child a {
    border-bottom: none;
}
/* separator line between nav-list items */

.nav-list li + li {
    border-top: 1px solid var(--border);
}


/* ── footer-only tokens (dark bg context, no global equivalent) ── */
  .b-footer {
      --kzf-text-dim: rgba(255, 255, 255, 0.42);
      --kzf-text-mid: rgba(255, 255, 255, 0.65);
  }
  /* ═══════════════════════════════════════════
     FOOTER WRAPPER
  ═══════════════════════════════════════════ */

  .b-footer {
      background: var(--indigo);
      color: var(--kzf-text-mid);
      font-size: 14px;
      font-weight: 300;
      line-height: 1.7;
      position: relative;
      overflow: hidden;
  }
  /* subtle diagonal texture */

  .b-footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient( -55deg, rgba(255, 255, 255, 0.012) 0px, rgba(255, 255, 255, 0.012) 1px, transparent 1px, transparent 32px);
      pointer-events: none;
  }
  /* copper top border */

  .b-footer::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--copper);
  }
  .b-footer__wrap {
      position: relative;
      z-index: 1;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 56px;
  }
  /* ═══════════════════════════════════════════
     TOP BRAND BAR
  ═══════════════════════════════════════════ */

  .b-brand-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 36px 0 32px;
      border-bottom: 1px solid var(--border-dim);
      gap: 24px;
  }
  .b-brand {
      display: flex;
      flex-direction: column;
      gap: 2px;
  }
  .b-brand__name {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 400;
      color: var(--white);
      letter-spacing: 1px;
      line-height: 1;
  }
  .b-brand__name em {
      font-style: italic;
      color: var(--copper);
  }
  .b-brand__tagline {
      font-size: 10px;
      font-weight: 300;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--kzf-text-dim);
  }
  /* social icons — top right */

  .b-social-bar {
      display: flex;
      align-items: center;
      gap: 8px;
  }
  .b-social-bar__label {
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--kzf-text-dim);
      margin-right: 4px;
  }
  .b-social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: 1px solid var(--border-dim);
      color: var(--kzf-text-dim);
      text-decoration: none;
      transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
  }
  .b-social-link:hover {
      border-color: var(--copper);
      color: var(--copper);
      background: var(--copper-dim);
  }
  .b-social-link svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
  }
  /* ═══════════════════════════════════════════
     MAIN GRID
  ═══════════════════════════════════════════ */

  .b-footer__grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr 1fr 1.3fr;
      gap: 48px;
      padding: 56px 0 48px;
      border-bottom: 1px solid var(--border-dim);
  }
  /* ── COLUMN TITLE ── */

  .footer-col-title {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
  }
  .footer-col-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border-dim);
  }
  /* ── SHOP INFO ── */

  .b-info {
      display: flex;
      flex-direction: column;
      gap: 14px;
  }
  .b-info__row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
  }
  .b-info__icon {
      flex-shrink: 0;
      margin-top: 3px;
      color: var(--copper);
  }
  .b-info__icon svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
  }
  .b-info__text {
      font-size: 13px;
      color: var(--kzf-text-mid);
      line-height: 1.6;
  }
  .b-info__label {
      display: block;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--kzf-text-dim);
      margin-bottom: 2px;
  }
  .b-info__text a {
      color: var(--kzf-text-mid);
      text-decoration: none;
      transition: color 0.2s;
  }
  .b-info__text a:hover {
      color: var(--copper);
  }
  /* ── NAV LISTS ── */

  .footer-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }
  .footer-list a {
      font-size: 13px;
      font-weight: 300;
      color: var(--kzf-text-mid);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0;
      transition: color 0.2s var(--ease), gap 0.2s var(--ease);
  }
  .footer-list a::before {
      content: '';
      display: inline-block;
      width: 0;
      height: 1px;
      background: var(--copper);
      margin-right: 0;
      transition: width 0.25s var(--ease), margin-right 0.25s var(--ease);
      vertical-align: middle;
      flex-shrink: 0;
  }
  .footer-list a:hover {
      color: var(--white);
  }
  .footer-list a:hover::before {
      width: 12px;
      margin-right: 8px;
  }
  /* ── NEWSLETTER ── */

  .b-newsletter-col p {
      font-size: 13px;
      font-weight: 300;
      color: var(--kzf-text-dim);
      line-height: 1.65;
      margin-bottom: 20px;
  }
  .b-news-form {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 28px;
  }
  .b-news-row {
      display: flex;
      gap: 0;
  }
  .b-news-input {
      flex: 1;
      height: 44px;
      padding: 0 14px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--border-dim);
      border-right: none;
      color: var(--white);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 300;
      outline: none;
      transition: border-color 0.25s, background 0.25s;
  }
  .b-news-input::placeholder {
      color: var(--kzf-text-dim);
  }
  .b-news-input:focus {
      border-color: rgba(188, 124, 86, 0.4);
      background: rgba(255, 255, 255, 0.09);
  }
  .b-news-btn {
      height: 44px;
      padding: 0 18px;
      background: var(--copper);
      border: 1px solid var(--copper);
      color: var(--white);
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.25s, border-color 0.25s;
      white-space: nowrap;
  }
  .b-news-btn:hover {
      background: var(--copper-dark);
      border-color: var(--copper-dark);
  }
  /* ═══════════════════════════════════════════
     PAYMENT STRIP
  ═══════════════════════════════════════════ */

  .b-payment {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 24px 0;
      border-bottom: 1px solid var(--border-dim);
      flex-wrap: wrap;
  }
  .b-payment__label {
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--kzf-text-dim);
      margin-right: 4px;
      flex-shrink: 0;
  }
  .b-payment__icons {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
  }
  .b-payment__icon {
      height: 24px;
      width: auto;
      opacity: 0.55;
      /*    filter: brightness(0) invert(1);*/
      transition: opacity 0.25s;
      border-radius: 4px;
  }
  .b-payment__icon:hover {
      opacity: 0.9;
  }
  /* ═══════════════════════════════════════════
     BOTTOM BAR
  ═══════════════════════════════════════════ */

  .b-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      gap: 24px;
      flex-wrap: wrap;
  }
  .b-copy {
      font-size: 12px;
      font-weight: 300;
      color: var(--kzf-text-dim);
      letter-spacing: 0.5px;
  }
  .b-copy em {
      color: var(--copper);
      font-style: normal;
  }
  .b-bottom__links {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
  }
  .b-bottom__links a {
      font-size: 11px;
      font-weight: 300;
      letter-spacing: 1px;
      color: var(--kzf-text-dim);
      text-decoration: none;
      transition: color 0.2s;
  }
  .b-bottom__links a:hover {
      color: var(--white);
  }
  .b-bottom__sep {
      width: 1px;
      height: 12px;
      background: var(--border-dim);
      display: block;
      flex-shrink: 0;
  }
  /* ═══════════════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════════════ */

  @media (max-width: 960px) {
      .b-footer__grid {
          grid-template-columns: 1fr 1fr;
          gap: 36px;
      }
      .b-footer__wrap {
          padding: 0 32px;
      }
  }
  @media (max-width: 600px) {
      .b-footer__grid {
          grid-template-columns: 1fr;
          gap: 28px;
      }
      .b-footer__wrap {
          padding: 0 24px;
      }
      .b-brand-bar {
          flex-direction: column;
          align-items: flex-start;
      }
      .b-bottom {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
      }
      .b-payment {
          gap: 10px;
      }
  }


/* ═══════════════════════════════════════════════════════
   CART NOTICE — floating toast
   Original HTML structure preserved exactly.
   Only position + UI changed.
═══════════════════════════════════════════════════════ */

#cart-notice {
  /* ── position: fixed, top-right ── */
  position: fixed;
  top: 124px;
  right: 24px;
  z-index: 9999;
  width: 360px;
  max-width: calc(100vw - 48px);

  /* ── hidden state ── */
  display: none;
  opacity: 0;
  transform: translateX(20px) translateY(-8px);
  transition: opacity 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
}

/* shown — JS removes .hide and sets display:block */
#cart-notice:not(.hide) {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* hide = exit */
#cart-notice.hide {
  opacity: 0;
  transform: translateX(16px) translateY(-4px);
  transition: opacity 0.35s var(--ease),
              transform 0.35s var(--ease);
}

/* ── card ── */
.notice-content {
  background: var(--indigo);
  border-left: 3px solid var(--copper);
  box-shadow: 0 8px 32px rgba(26,35,62,0.22),
              0 2px 8px  rgba(26,35,62,0.12);
  padding: 18px 16px 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 12px;
  align-items: start;
  position: relative;
  overflow: hidden;
}

/* diagonal stripe */
.notice-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -55deg,
    rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px,
    transparent 1px, transparent 28px
  );
  pointer-events: none;
}

/* ── icon (fa fa-check-circle) ── */
.notice-content .fa {
  grid-column: 1;
  grid-row: 1;
  font-size: 15px;
  color: var(--copper);
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

/* ── message ── */
.notice-content .notice-msg {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.notice-content .notice-msg a {
  color: var(--white);
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  transition: border-color 0.2s, color 0.2s;
}
.notice-content .notice-msg a:hover {
  color: var(--copper);
  border-color: var(--copper);
}

/* ── close button ── */
.cart-notice__close {
  grid-column: 3;
  grid-row: 1;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.3);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
  margin-top: -1px;
}
.cart-notice__close:hover { color: var(--white); }

/* ── view cart button ── */
.btn-view-cart.fab-cart {
  grid-column: 2 / 4;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 20px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.25s var(--ease),
              background   0.25s var(--ease),
              color        0.25s var(--ease);
  position: relative;
  z-index: 1;
}
.btn-view-cart.fab-cart:hover {
  border-color: var(--copper);
  background: rgba(188,124,86,0.12);
  color: var(--copper);
}

/* ── progress bar ── */
.notice-content::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--copper);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 2;
}
#cart-notice:not(.hide) .notice-content::after {
  animation: notice-progress 3s linear forwards;
}

@keyframes notice-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── mobile: move to bottom ── */
@media (max-width: 500px) {
  #cart-notice {
    top: auto;
    bottom: 20px;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: 100%;
    transform: translateX(0) translateY(16px);
  }
  #cart-notice:not(.hide) {
    transform: translateX(0) translateY(0);
  }
}