:root {
    /* PRIMARY COLORS */
    --bs-primary: #d2b180;
    --bs-black: #000000;

    /* — Primary — */
    --bs-obsidian: #000000;
    --bs-gold: #D2B180;        /* fills & gold-on-black ONLY */
    --bs-gold-ink: #A8824E;    /* gold TEXT on white */
    --bs-gold-deep: #1A1206;   /* text on gold fills */
    --bs-gold-muted: #9C8358;  /* eyebrows on dark */

    /* — Secondary (solid accents, never gradients) — */
    --bs-charcoal: #282828;
    --bs-oxblood: #6D210F;
    --bs-forest: #1E3F20;
    --bs-sky: #68ACC1;
    --bs-sage: #8DA399;
    --bs-sage-ink: #5E7A6D;    /* sage text on white */
    --bs-cream: #F2E7D5;

    /* — Signals — */
    --bs-up: #1E3F20;
    --bs-down: #6D210F;
    --bs-up-on-dark: #7FB98C;
    --bs-down-on-dark: #C98A78;

    /* INTERFACE NEUTRALS */
    --bs-ink: #111111; /* Primary text, headings. */
    --bs-slate: #46423B; /* Body copy on white. */
    --bs-muted: #8A857C; /* Secondary/tertiary text, captions. */
    --bs-faint: #B0AAA0; /* Placeholder labels, meta. */
    --bs-line: #ECE9E2; /* Default hairline border. */
    --bs-line-2: #E6E2DA; /* Dividers inside cards / softer rules. */
    --bs-line-soft: #F0EDE6; /* Internal card dividers. */
    --bs-paper: #FAF8F3; /* Subtle off-white fill (search field, soft panels). */
    --bs-field-border: #DDD8CF; /* Input borders. */
    --bs-tile: #1C1C1C; /* Image-placeholder background. */

    /* DARK SURFACE TEXT (footer, banners) */
    --bs-footer-body: #B9B3A8;
    --bs-footer-muted: #7D7468;
}
/* 
    !_______ ATOMS & MOLECULES ________________________________________________!
*/
/* SPACING */
/* Other spacing already exist, create this one for smaller sizing purposes */
.--space-pt-xxs { padding-top: 0.25rem; } /* 4px */ 
.--space-pb-xxs { padding-bottom: 0.25rem; }
.--space-ps-xxs { padding-left: 0.25rem; }
.--space-pe-xxs { padding-right: 0.25rem; }
.--space-py-xxs { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.--space-px-xxs { padding-left: 0.25rem; padding-right: 0.25rem; }

.--space-mt-xxs { margin-top: 0.25rem; }
.--space-mb-xxs { margin-bottom: 0.25rem; }
.--space-ms-xxs { margin-left: 0.25rem; }
.--space-me-xxs { margin-right: 0.25rem; }
.--space-my-xxs { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.--space-mx-xxs { margin-left: 0.25rem; margin-right: 0.25rem; }

/* BORDER RADIUS */
.rounded-xxs { border-radius: 0.375rem; } /* 6px | Badges, small chips, tags. */
.rounded-xs { border-radius: 0.5rem; } /* 8px | Inputs, selects, small panels. */
.rounded-sm { border-radius: 0.625rem; } /* 10px | Banners, tickers, image tiles. */
.rounded-md { border-radius: 1rem; } /* 16px | Product cards, category cards. */
.rounded-lg { border-radius: 1.125rem; } /* 18px | Hero panels, large galleries. */
.rounded-pill { border-radius: 999px; } /* Buttons, search field, quantity stepper, badges. */
.rounded-circle { border-radius: 50%; } /* Monogram plate, coin tiles, icon buttons, avatars. */

/* BUTTONS */
/* Flat, pill-shaped, no shadows. Redefines the base `.btn` for the JuYou theme;
   pair with a `-style-*` variant and an optional `-size-*` modifier.
   Use the existing `--full-width` class to make a button span its container. */
.btn {
    --btn-background-color: black;
    --btn-color: white;
    --btn-border-color: transparent;
    --btn-background-color-hover: var(--bs-charcoal);
    --btn-color-hover: white;
    --btn-border-color-hover: transparent;
    font-weight: 600;
    font-size: 0.8125rem; /* 12.5px */
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    background-color: var(--btn-background-color) !important;
    color: var(--btn-color) !important;
    border: 1px solid var(--btn-border-color) !important;
    border-radius: 100rem;
    padding: 15px 32px; /* md default */
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;

    &:hover {
        background-color: var(--btn-background-color-hover) !important;
        color: var(--btn-color-hover) !important;
        border-color: var(--btn-border-color-hover) !important;
    }
}

/* Variants */
.btn.-style-primary {
    --btn-background-color: var(--bs-gold);
    --btn-color: var(--bs-gold-deep);
    --btn-background-color-hover: var(--bs-gold-muted);
    --btn-color-hover: var(--bs-gold-deep);
}

.btn.-outline {
    --btn-background-color: transparent;
    --btn-color: var(--bs-black);
    --btn-border-color: var(--bs-black);
    --btn-background-color-hover: var(--bs-black);
    --btn-color-hover: var(--bs-white);
    --btn-border-color-hover: var(--bs-black);
    padding: 13.5px 30.5px; /* subtract 1.5px to compensate for the border */
}

.btn.-outline-gray {
    --btn-background-color: transparent;
    --btn-color: var(--bs-muted);
    --btn-border-color: var(--bs-muted);
    --btn-background-color-hover: var(--bs-muted);
    --btn-color-hover: var(--bs-white);
    --btn-border-color-hover: var(--bs-muted);
}

.btn.-style-link {
    --btn-background-color: transparent;
    --btn-color: var(--bs-gold-ink);
    --btn-border-color: transparent;
    --btn-background-color-hover: var(--bs-gold-ink);
    --btn-color-hover: white;
    --btn-border-color-hover: var(--bs-gold-ink);
    
    border: none;
    border-bottom: 1.5px solid var(--btn-border-color);
    border-radius: 0;
    padding: 2px 0;
}

/* Sizes (override the md default) */
.btn.-size-sm { padding: 10px 22px; font-size: 11px; }
.btn.-size-md { padding: 15px 32px; font-size: 12.5px; }
.btn.-size-lg { padding: 19px 42px; font-size: 14px; }
.btn.-outline.-size-sm { padding: 8.5px 20.5px; }
.btn.-outline.-size-lg { padding: 17.5px 40.5px; }

/* Disabled */
.btn:disabled,
.btn.-disabled {
    opacity: .32;
    cursor: not-allowed;
    pointer-events: none;
}

/* TEXTS */
/* Type ramp (font-family is handled globally by the theme) */
.text-overline {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bs-gold-ink);
}
.display-1 {
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3.875rem); /* 32px–62px */
    line-height: 1.02;
    color: var(--bs-ink);
}
.fs-1 {
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3.875rem); /* 32px–62px */
    line-height: 1.05;
    color: var(--bs-ink);
}
.fs-2 {
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.5rem); /* 24px–40px */
    line-height: 1.1;
    color: var(--bs-ink);
}
.text-price {
    font-weight: 600;
    color: var(--bs-ink);
}
.text-body {
    font-size: 16px;
    line-height: 1.75;
    color: var(--bs-slate);
}

/* Brand text colors */
.text-primary     { color: var(--bs-primary) !important; }    /* Bullion gold token. */
.text-ink         { color: var(--bs-ink); }
.text-slate       { color: var(--bs-slate); }
.text-faint       { color: var(--bs-faint); }
.text-gold        { color: var(--bs-gold); }       /* Bullion gold — gold-on-black ONLY. */
.text-old-gold    { color: var(--bs-gold-ink); }   /* Antique gold — gold text/links on white. */
.text-gold-muted  { color: var(--bs-gold-muted); } /* Eyebrows on dark. */
.text-charcoal    { color: var(--bs-charcoal); }
.text-sage-ink    { color: var(--bs-sage-ink); }   /* Silver-category label on white. */
.text-cream       { color: var(--bs-cream); }
.text-sky         { color: var(--bs-sky); }

/* Signal colors (price movement). Prefix copy with ▲ / ▼. */
.text-up        { color: var(--bs-up); }        /* On white. */
.text-down      { color: var(--bs-down); }      /* On white. */
.text-up-dark   { color: var(--bs-up-on-dark); }   /* On black. */
.text-down-dark { color: var(--bs-down-on-dark); } /* On black. */

/* BACKGROUNDS */
/* Brand fills. Reserve dark/charcoal panels and gold for accents — keep the canvas white. */
.bg-obsidian { background-color: var(--bs-obsidian); }
.bg-charcoal { background-color: var(--bs-charcoal); }
.bg-gold     { background-color: var(--bs-gold); }       /* Gold fill; pair with .text-ink-on-gold via --bs-gold-deep. */
.bg-cream    { background-color: var(--bs-cream); }      /* Trust / feature bands, warm fills. */
.bg-paper    { background-color: var(--bs-paper); }      /* Subtle off-white panels, search field. */
.bg-oxblood  { background-color: var(--bs-oxblood); }    /* Coins category card. */
.bg-forest   { background-color: var(--bs-forest); }     /* Silver category card. */
.bg-sage     { background-color: var(--bs-sage); }
.bg-sky      { background-color: var(--bs-sky); }
.bg-tile     { background-color: var(--bs-tile); }       /* Image-placeholder surface. */
.bg-paper-texture {
    background: linear-gradient(to top, rgb(from var(--bs-paper) r g b / 0.95), rgb(from var(--bs-paper) r g b / 0.95)), url(/media/pdfs/upload/blurry-bg-square.png);
}
.bg-charcoal-texture {
    background: linear-gradient(to top, rgb(from var(--bs-obsidian) r g b / 0.9), rgb(from var(--bs-obsidian) r g b / 0.9)), url(/media/pdfs/upload/blurry-bg-square.png);
}

/* ICONS */
/* Monoline SVGs: stroke:currentColor, 1.5 weight, square caps, geometric. Inherit text color. */
.icon {
    display: inline-flex;
    flex-shrink: 0;
    fill: none;
    /* stroke: currentColor; */
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
    vertical-align: middle;
}
.icon.-size-sm { width: 18px; height: 18px; }
.icon.-size-md { width: 20px; height: 20px; }
.icon.-size-lg { width: 24px; height: 24px; }
.icon.-size-xl { width: 26px; height: 26px; }

button .icon-long-arrow {
    border: 1px solid var(--bs-black);
}

/* BUBBLE BUTTONS */
/* Circular icon buttons (search / account / cart). */
.btn-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-bubble .icon,
.btn-bubble > svg { width: 20px; height: 20px; }
.btn-bubble.-style-dark {
    background: var(--bs-black);
    color: var(--bs-gold);
}
.btn-bubble.-style-dark:hover { background: var(--bs-charcoal); }
.btn-bubble.-style-outline {
    background: #fff;
    border: 1.5px solid var(--bs-field-border);
    color: #1A1A1A;
}
.btn-bubble.-style-outline:hover { border-color: var(--bs-black); }
.btn-bubble.-size-sm { width: 40px; height: 40px; }
.btn-bubble.-size-lg { width: 56px; height: 56px; }

/* BADGES & TAGS */
/* Promo tag — sits on a product image, top-left. */
.promo-tag {
    display: inline-block;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bs-gold-deep);
    background: var(--bs-gold);
    border-radius: 5px;
    padding: 4px 8px;
}
/* Grade badge (numismatic) — accent = Oxblood for gold coins, Forest for silver. */
.grade-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--bs-oxblood);
    border-radius: 6px;
    padding: 3px 8px;
}
.grade-badge.-silver { border-color: var(--bs-forest); }
.grade-badge__cert {
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: .1em;
    color: var(--bs-oxblood);
}
.grade-badge.-silver .grade-badge__cert { color: var(--bs-forest); }
.grade-badge__grade {
    font-weight: 600;
    font-size: 10.5px;
    color: #3A3A3A;
}
/* Metal overline (bullion card) — gold for gold, sage-ink for silver. */
.metal-overline {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bs-gold-ink);
}
.metal-overline.-silver { color: var(--bs-sage-ink); }

/* DIVIDERS */
.divider-hairline { height: 1px; background: var(--bs-line-2); border: 0; }
.divider-card     { height: 1px; background: var(--bs-line-soft); border: 0; } /* internal card rule */
.divider-gold     { height: 2px; width: 64px; background: var(--bs-gold); border: 0; }
/* Star divider (brand motif): [line] ★★★★★ [line] */
.divider-star {
    display: flex;
    align-items: center;
    gap: 14px;
}
.divider-star::before,
.divider-star::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bs-line);
}
.divider-star__stars {
    color: var(--bs-gold);
    font-size: 11px;
    letter-spacing: .5em;
}
/* Monogram divider: [line] "JuYou Finds" [line] */
.divider-monogram {
    display: flex;
    align-items: center;
    gap: 18px;
}
.divider-monogram::before,
.divider-monogram::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bs-line);
}
.divider-monogram__mark {
    font-weight: 600;
    font-size: 20px;
    color: var(--bs-ink);
}

/* STATES */
.hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    transform: scale(0) !important;
    pointer-events: none !important;
}

/* SPECIALS */
.clip-diagonal-borders {
    clip-path: polygon(1.5rem 0, 100% 0%, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%, 0 1.5rem);
}


/*
    !_______ COMPONENTS ________________________________________________!
*/
/* COMPONENTS */
/* When real product photography isn't available, use a dark tile with a monospace caption (matches the prototype): */
.empty-background {
    background: #1C1C1C;
    border-radius: 11px;
    background-image: repeating-linear-gradient(135deg, rgba(210,177,128,.07) 0 11px, transparent 11px 22px);
}
.empty-background-circle {
    width: 62%;
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    border-radius: 50%;
    background-image: repeating-radial-gradient(circle, rgba(210,177,128,.08) 0 2px, transparent 2px 7px);
}

/* HEADER LABEL */
.header-label {
    display: inline-flex;
    align-items: center;
    gap: .75rem;

    > svg,
    > img,
    > picture,
    > figure,
    > .icon {
        width: clamp(2rem, 5vw, 3rem);
        height: clamp(2rem, 5vw, 3rem);
        object-fit: contain;
    }

    > div {
        display: flex;
        flex-direction: column;
        gap: .1rem;

        p:first-child {
            font-weight: 500;
            font-size: clamp(1rem, 1vw, 1.25rem);
            line-height: 1.15;
            margin: 0;
        }

        small:last-child {
            font-size: clamp(.875rem, 1vw, 1rem);
            line-height: 1.15;
            margin: 0;
        }
    }
}

/* CARDS */
.card {
    background-color: var(--bs-black);
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2.5rem);
    color: var(--bs-cream);
}

/* IMAGE CARDS */
.image-card {
    padding: 0;
    transition: transform 0.3s ease-in-out;

    a {
        display: grid;
        grid-template-columns: clamp(90px, 20vw, 150px) 2fr auto;
        align-items: center;
        gap: clamp(0.5rem, 1.5vw, 1.5rem);
        color: var(--bs-gold);
        /* padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem); */
        height: 100%;
        margin: 0;
        position: relative;
    }

    .image-card__image {
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: clamp(0.75rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
        /* background-color: var(--bs-black); */
        background-image: repeating-linear-gradient(135deg, var(--bs-charcoal) 0 11px, transparent 11px 22px);
        border-right: 1px solid var(--bs-slate);
        transition: border-color 0.3s ease-in-out;

        img {
            filter: invert(0.5) sepia(1) saturate(1.5);
        }
    }
    .image-card__title {
        font-size: clamp(1.5rem, 2vw, 2.5rem);
        font-weight: 500;
        text-transform: uppercase;
        line-height: 1.1;
        letter-spacing: 0.05em;
        color: white;
        margin-bottom: 0.25rem;
    }
    .image-card__info {
        padding-inline: 1rem;
    }
    .arrow-link {
        color: var(--bs-primary);
        z-index: 2;
        position: absolute;
        right: .5rem;
        top: .5rem;
    }
    &:hover {
        transform: translateY(-4px);

        .image-card__image {
            border-color: var(--bs-muted);
        }
    }
}
@media (width < 425px) {
    .image-card {
        a {
            grid-template-columns: 1fr;
        }
        .image-card__image {
            width: 100%;
            height: 180px;
            padding: 1.5rem 0;

            svg, img {
                max-height: 100%;
            }
        }
        .image-card__info {
            padding: 0.5rem 1rem 1rem;
        }
    }
}

/* PRODUCT CARDS */
.card-product {
    .card-product__badges {
        z-index: 1;
    }
    .stretched-link::after {
        z-index: 3;
    }
}
.catalog__sidebar__inner {
    padding: 1rem 1rem 1.75rem;
    background-color: white;
    clip-path: polygon(1.5rem 0, 100% 0%, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%, 0 1.5rem);
}
@media (width >= 992px) {
    .card-product .card-product__price--container {
        max-width: 120px;
    }
}
.card-bevel,
.card-product,
.collections-grid .card-collection,
.card-collection,
.product__gallery .gallery .swiper-slide {
    border-radius: 0;
    clip-path: polygon(1.5rem 0, 100% 0%, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%, 0 1.5rem);
    padding-top: 1.2rem;
    overflow: hidden;
}
.product__gallery .gallery .swiper-slide {
    border: 0;
    background-color: var(--bs-paper);
    padding-top: 0;
}

@supports (corner-shape: bevel) {
    .card-bevel,
    .card-product,
    .collections-grid .card-collection,
    .card-collection,
    .product__gallery .gallery .swiper-slide {
        border-radius: 0;
        border-top-left-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
        corner-shape: bevel;
        border: 1px solid var(--bs-black);
        clip-path: unset;
    }
}
.card-product {
    .-quick-view {
        top: 0;
        left: 0;
    }

    .card-product__badges {
        top: 1rem;
        
        .badge.-availability {
            background-color: var(--bs-primary);
            padding: clamp(0.35rem, 0.5rem, 0.45rem) clamp(0.5rem, 1.5vw, 1.5rem);
            color: var(--bs-black);
            border-radius: 10rem;
            font-size: 0.75rem;
        }

        .badge:not(.-in-stock) {
            background-color: var(--bs-black);
            color: var(--bs-cream);
        }

        .badge.-out-of-stock {
            background-color: var(--bs-muted);
            color: var(--bs-charcoal);
        }
    }

    &:hover {
        border-color: var(--bs-gold);
        box-shadow: none;
    }
}

.section-products {
    .card-product {
        background-color: #ffffff99;
        transition: border-color 0.25s ease, transform 0.25s ease;

        .-quick-view,
        .card-product__thumbnail {
            mix-blend-mode: multiply;
        }

        &:hover {
            background-color: #fff;
        }
    }

    /* "As Low As" eyebrow */
    .card-product__price--container > small {
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 10px;
        font-weight: 600;
        color: var(--bs-muted);
        margin-bottom: 0.15rem;
    }

    .card-product__price {
        color: var(--bs-ink);
        font-weight: 600;
    }

    .card-product__title a {
        color: var(--bs-slate);
        transition: color 0.2s ease;

        &:hover {
            color: var(--bs-gold-ink);
        }
    }

    /* Quick-view bubble keeps its icon in ink */
    .card-product .-quick-view .bubble {
        color: var(--bs-ink);
    }

    /* "Load more" — outline at rest, gold fill on hover (keeps the band light) */
    .section-products__tabs .text-center .btn {
        --btn-background-color: transparent;
        --btn-color: var(--bs-ink);
        --btn-border-color: var(--bs-ink);
        --btn-background-color-hover: var(--bs-gold);
        --btn-color-hover: var(--bs-gold-deep);
        --btn-border-color-hover: var(--bs-gold);
    }
}

/* Tabs collapse to scrollable pills on small screens — brand the active pill */
@media (width < 576px) {
    .section-products .section-products__top__menu .menu__list a {
        border-color: var(--bs-line);

        &::after {
            display: none;
        }

        &.-is-active {
            background-color: var(--bs-cream);
            border-color: var(--bs-gold);
            color: var(--bs-gold-ink);
        }
    }
}

/* CONTAINERS */
/* Page width container — max 1180px with 32px gutters. */
.container-juyou {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}
/* Bordered white surface (filter sidebar, sort bar, spec table). */
.panel {
    background: #fff;
    border: 1px solid var(--bs-line);
    /* border-radius: 16px; */
    padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(0.5rem, 1vw, 1rem);
}
/* Dark rounded surface (hero, promo banner, image-tile frames). */
.panel-dark {
    background: var(--bs-obsidian);
    border-radius: 18px;
    color: #fff;
}

/*
    !_______ Global Styles ________________________________________________!
*/
/* HEADER */
/* JuYou Finds header — white canvas, charcoal announcement band, single hairline rule.
   Overrides the theme's existing `.site-header` structure; flat and crisp, no shadows. */
.site-header {
    --header-color: var(--bs-ink);
    --header-background: #fff;
}

/* Announcement / top bar — charcoal band with light, wide-tracked microcopy. */
.site-header .header-top {
    background: var(--bs-black);
    border: 0;
    color: var(--bs-cream);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;

    a {
        color: inherit;

        &:hover {
            color: white;
            text-decoration: none;
        }
    }
}
@media (width < 992px) {
    .header-top {
        overflow: hidden;
    }
    .site-header__secondary__prices .spot-prices {
        grid-template-columns: repeat(4, min(40vw, 250px));
    }
    .site-header__secondary__prices {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -webkit-scrollbar {
            display: none;
        }
        &::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
    }
}
/* HEADER MAIN */
.site-header__secondary__info ul li:last-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    transform: scale(0) !important;
    pointer-events: none !important;
}
.site-header .header-main {
    background: #fff;
    border-bottom: 1px solid var(--bs-line);

    &.-is-stuck {
        border-bottom: 1px solid var(--bs-line);
    }
}

.primary-menu > .menu-item > a {
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--bs-ink);

    &::after {
        border-top-color: var(--bs-gold);
    }
}
.primary-menu > .menu-item:hover > a,
.primary-menu > .menu-item.active > a,
.primary-menu > .menu-item.current-menu-item > a {
    color: var(--bs-gold-ink);
}
.primary-menu > .menu-item.active > a::after,
.primary-menu > .menu-item.current-menu-item > a::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.site-header .site-header__main__actions .action .-cart-count .bubble.-primary {
    background-color: var(--bs-gold);
    color: var(--bs-gold-deep);
}

/* PRODUCTS */
@media (width < 1200px) {
    .product__summary .table-responsive-md {
        overflow-x: auto !important;
    }
}
.section-related-products {
    background: linear-gradient(to top, rgb(from var(--bs-paper) r g b / 0.95), rgb(from var(--bs-paper) r g b / 0.95)), url(/media/pdfs/upload/blurry-bg-square.png);
}

/* FOOTER */
.section-page-hero .header-container {
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0%, 100% calc(100% - (1.5rem + 2vw)), calc(100% - (1.5rem + 2vw)) 100%, 0 100%);
}

@supports (corner-shape: bevel) {
    .section-page-hero .header-container {
        border-radius: 0;
        border-bottom-right-radius: calc(2rem + 3vw);
        corner-shape: bevel;
    }
}