/* ========= Base tokens & reset ========= */
:root {
    /* Layout */
    --max-w: 1500px;
    --gutter: clamp(16px, 4vw, 40px);

    /* Palette (neutral, easy to retheme later) */
    --bg: #ffffff;
    --ink: #111111;
    --muted: #6b7280;
    --line: #e5e7eb;

    /* Typography */
    --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Cormorant Garamond", Georgia, serif;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
}

html,
body {
    height: 100%;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video {
    max-width: 100%;
    display: block;
}

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

/* ========= Layout helpers ========= */
.container {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container-fw {
    position: relative;
    padding: 10px;
}

.no-pad {
    padding: 2px !important;
}

.page {
    /* padding-block: clamp(32px, 6vw, 80px); */
    position: relative;
}

/* ========= Type scale (minimal) ========= */
/* Use serif for large display to emulate the reference feel */
.display {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.15;
    font-size: clamp(28px, 4vw, 56px);
    letter-spacing: 0.01em;
    margin: 0 0 .5em 0;
}

.lead {
    font-size: clamp(16px, 1.4vw, 18px);
    color: var(--muted);
    margin: 0 0 1em 0;
}

.eyebrow {
    margin: 0 0 .6rem 0;
    font: 600 12px/1 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--muted);
}

/* Focus visibility for a11y (kept minimal) */
:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ====== Section 0: Announcement Bar (pixel-fit) ====== */
.announcement {
    background: #f6f6f6;
    /* light grey like reference */
    border-bottom: 1px solid #e9e9e9;
    /* hairline divider */
    font-size: 12.5px;
    /* tight, refined scale */
    line-height: 1;
    /* compact bar */
}

.announcement .container {
    /* lock the bar height visually around ~36px on desktop */
    min-height: 36px;
    display: grid;
    align-items: center;
}

.announcement__text {
    text-align: center;
    letter-spacing: .08em;
    /* subtle tracking */
    color: #1b1b1b;
    /* near-black */
    margin: 0;
    padding-block: 10px;
    /* ensures good touch target on mobile */
    white-space: nowrap;
    /* stay single-line like the ref */
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .announcement {
        font-size: 12px;
        /* tiny nudge smaller on narrow screens */
    }

    .announcement .container {
        min-height: 34px;
    }

    .announcement__text {
        padding-block: 9px;
    }
}

/* respects user motion settings (no animation here, but keep policy consistent) */
@media (prefers-reduced-motion: reduce) {
    .announcement * {
        transition: none !important;
    }
}

/* ===== Header layout – centrerad nav som på referensen ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
    border-bottom: 1px solid var(--line);
    height: 100%;
    max-height: 90px;
}

.header--centered {
    display: grid;
    /* ensure grid layout */
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    /* logo | nav | utils */
    min-height: 90px;
    /* luftig top */
}

.brand {
    justify-self: start;
    width: 100%;
    height: 100%;
    max-height: 50px;

}

.brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand__text {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 14px;
}

.nav {
    justify-self: center;
    height: 100%;
}

.header__utils {
    justify-self: end;
    display: flex;
    gap: 14px;
}

.header__utils--right {
    justify-self: end;
    display: flex;
    gap: 14px;
}

/* ===== Nav look & active underline ===== */
.nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
}

.nav__link,
.nav__btn {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 6px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.nav__btn .nav__chev {
    margin-left: 6px;
    font-size: 10px;
    transition: transform .18s ease;
}

.nav__btn[aria-expanded="true"] .nav__chev {
    transform: rotate(180deg);
}

.nav__link--active,
.nav__btn,
.nav__link {
    position: relative;
}

.nav__link--active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0px;
    width: 56px;
    width: calc(100% - 0px);
    height: 1px;
    background: #0f0f0f;
    transform: translateX(-50%);
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0px;
    width: 100%;
    max-width: 0;
    height: 1px;
    background: #0f0f0f;
    transform: translateX(-50%);
    transition: all .3s ease-in;
    transform-origin: center;
}

.nav__item:hover .nav__link::after {
    max-width: 150px;
}

/* ===== Flagga SWE (ren CSS, rund) ===== */
.flag-se {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background:
        linear-gradient(#fecc00 0 0) 42%/24% 100% no-repeat,
        linear-gradient(#fecc00 0 0) 0 42%/100% 24% no-repeat,
        #006aa7;
    margin-right: 6px;
    vertical-align: -2px;
}

/* =========================================================
   MOBILE NAV + RESPONSIVE LAYER (append-only)
   Works with: .menu-btn (toggler), .mnav (side menu), header overlay
   ========================================================= */

/* Ensure header stacks above page so overlay/drawer sit correctly */
.site-header {
    z-index: 1200;
}

/* ---------- Menu toggler visibility ---------- */
.menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 1025px) {
    .menu-btn {
        display: none;
    }

    /* hide hamburger on desktop */
}

/* ---------- Header layout tweaks on ≤1024 ---------- */
@media (max-width: 1024px) {

    /* compact grid: toggler | brand | utils */
    .header--centered {
        grid-template-columns: auto 1fr auto;
        column-gap: 10px;
        min-height: 78px;
        padding-inline: var(--gutter);
    }

    /* center the logo; keep nice size */
    .brand {
        justify-self: center;
        max-height: 64px;
    }

    .brand img {
        object-fit: contain;
    }

    /* hide desktop nav (we use the side-menu instead) */
    .nav {
        display: none;
    }

    /* tighten right utilities on small screens */
    .header__utils {
        gap: 10px;
    }
}

/* ---------- BLACK OVERLAY (click outside to close) ---------- */
.site-header::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .60);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s step-end;
    z-index: 1201;
    /* below drawer, above page */
}

/* shown when menu is open */
.site-header[data-menu="open"]::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =========================================================
   SIDE MENU (mnav): slides from LEFT on open
   ========================================================= */
.mnav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 420px);
    background: #fff;
    border-right: 1px solid var(--line);
    transform: translateX(-100%);
    /* off-canvas by default */
    transition: transform .32s cubic-bezier(.2, .6, .2, 1);
    z-index: 1202;
    /* above overlay */
    display: grid;
    grid-auto-rows: 1fr;
    overscroll-behavior: contain;
}

.site-header[data-menu="open"] .mnav {
    transform: translateX(0);
}

/* Hide side menu on desktop */
@media (min-width: 1025px) {
    .mnav {
        display: none;
    }
}

/* Panels stack on top of each other; sub-panels slide from right */
.mnav__panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    /* bar + list */
    background: #fff;
    transform: translateX(100%);
    transition: transform .28s ease, opacity .2s ease;
}

.mnav__panel.is-active {
    transform: translateX(0);
}

.mnav__panel--root {
    transform: translateX(0);
}

.mnav__panel--root.dim {
    transform: translateX(-12%);
    opacity: .38;
}

/* Sub-panel top bar (back | title | close) */
.mnav__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.mnav__title {
    text-align: center;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 1;
}

/* Close/Back buttons */
.mnav__close,
.mnav__back {
    background: transparent;
    border: 0;
    padding: 6px 8px;
    font-size: 18px;
    color: #111;
    cursor: pointer;
}

.mnav__panel--root .mnav__close {
    margin: 10px 0 8px 12px;
    /* root panel top-right spacing */
}

/* List styling */
.mnav__list {
    list-style: none;
    margin: 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow: auto;
}

/* Links (leaf items) and Rows (open sub-panels) share look */
.mnav__link,
.mnav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 4px;
    background: transparent;
    border: 0;
    color: #111;
    cursor: pointer;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 14px;
    font-weight: 600;
}

.mnav__row .mnav__arrow {
    font-size: 14px;
    opacity: .85;
}

/* Hover/focus feedback */
.mnav__link:hover,
.mnav__row:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mnav__link:focus-visible,
.mnav__row:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

/* Tiny phones adjustments */
@media (max-width: 380px) {

    .mnav__link,
    .mnav__row {
        font-size: 13px;
        padding: 13px 2px;
    }
}

/* Optional: subtle separators between items (comment out if not needed) */
/*
.mnav__list > li + li{
  border-top: 1px solid #f1f1f1;
}
*/

/* Flag inside the drawer stays round and aligned */
.mnav .flag-se {
    flex: 0 0 auto;
    margin-right: 8px;
    vertical-align: -2px;
}

/* Scrollbar polish (supported browsers) */
.mnav__list::-webkit-scrollbar {
    width: 10px;
}

.mnav__list::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border-radius: 999px;
}

.mnav__list::-webkit-scrollbar-track {
    background: transparent;
}


/* =========================
   RESPONSIVE HEADER CONTROLS
   Keep menu + search on the LEFT,
   logo centered, flag + cart on RIGHT
   ========================= */

/* default: hide mobile-only controls on desktop */
.search-btn--left,
.locale-btn--mobile,
.icon-btn-m {
    display: none;
}

/* ============== Slide-down Search ============== */
:root {
    --search-h: 120px;
    /* bar height */
    --search-bg: #fff;
    --search-ink: #1f2328;
    --search-muted: #6b7280;
    --search-line: #dcdfe4;
    /* bottom hairline (matches screenshot) */
    --search-z: 1600;
    /* above header/megamenu */
    --search-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.search-drop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: var(--search-h);
    background: var(--search-bg);
    transform: translateY(-100%);
    transition: transform .28s ease;
    z-index: var(--search-z);
    will-change: transform;
}

/* If you want it to sit under your announcement bar, uncomment this line
.search-drop { top: 36px; }
*/

/* When open */
.search-open .search-drop {
    transform: translateY(0);
}

.search-drop__inner {
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding-inline: clamp(16px, 5vw, 80px);
    font: 400 16px/1.4 var(--search-font);
    color: var(--search-ink);
}

.search-drop__icon {
    font-size: 18px;
    color: var(--search-muted);
}

.search-drop__input {
    width: 100%;
    font: inherit;
    color: var(--search-ink);
    border: 0;
    outline: 0;
    background: transparent;
}

.search-drop__input::placeholder {
    color: var(--search-muted);
}

.search-drop__close {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    color: var(--search-ink);
    padding: 6px;
}

.search-drop__rule {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--search-line);
    /* thin gray rule like the screenshot */
}

/* Small screens: same look, a bit tighter */
@media (max-width: 560px) {
    :root {
        --search-h: 110px;
    }

    .search-drop__inner {
        gap: 10px;
    }

    .search-drop__icon {
        font-size: 17px;
    }

    .search-drop__close {
        font-size: 17px;
    }
}

/* show / hide on ≤1024px */
@media (max-width: 1024px) {

    /* grid stays: [left | brand | right] */
    .header--centered {
        grid-template-columns: auto 1fr auto;
        column-gap: 10px;
    }

    /* LEFT cluster: hamburger + search */
    .icon-btn-m,
    .search-btn--left {
        display: inline-flex;
        align-items: center;
    }

    .menu-btn.icon-btn-m {
        margin-right: 6px;
    }

    /* a little breathing room */

    /* hide desktop search & desktop locale inside nav */
    .search-btn--right {
        display: none;
    }

    #btn-locale {
        display: none;
    }

    /* RIGHT cluster: flag + cart */
    .locale-btn--mobile {
        display: inline-flex;
        align-items: center;
    }

    .header__utils--right {
        gap: 10px;
    }
}

/* keep the side menu available on tablet/mobile only (already in your CSS)
   .mnav is hidden on desktop via @media (min-width: 1025px) { display: none; } */

/* (Optional) larger tap targets for left icons on small phones */
@media (max-width: 480px) {

    .menu-btn.icon-btn,
    .search-btn--left {
        padding: 8px;
    }
}

/* ensure overlay covers page when menu is open (you already have this) */
/* .site-header[data-menu="open"]::after { opacity:1; visibility:visible; } */


/* =========================================================
   EXTRA RESPONSIVE TOUCHES (header, hero, sections)
   These safely refine spacing for small screens
   ========================================================= */

/* Large tablet & down */
@media (max-width: 1200px) {
    .nav__list {
        gap: 18px;
    }

    .news .section__head {
        padding: 0 24px;
    }

    .mega--links .mega-links {
        grid-template-columns: 1fr 1.1fr;
    }

    .mega-hero {
        max-height: 380px;
    }
}

/* Tablet & down */
@media (max-width: 1024px) {

    /* hero text centering on mobile/tablet */
    .hero {
        min-height: clamp(420px, 70vh, 680px);
    }

    .hero--single .hero__panel {
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        justify-items: center;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .hero .headline {
        font-size: clamp(26px, 4.8vw, 36px);
    }

    /* collapse complex mega layouts */
    .mega {
        position: static;
        transform: none;
        width: auto;
        opacity: 1;
        visibility: visible;
        border: 0;
        padding: 0;
    }

    .has-mega>.mega {
        display: none;
    }

    /* hidden in mobile flow */
    .has-mega[data-open="true"]>.mega {
        display: block;
    }

    /* accordion fallback if needed */
    .mega__inner {
        padding-block: 12px 16px;
    }

    .mega--tiles .mega-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .mega--links .mega-links {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mega-links__cols {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mega-hero {
        max-height: 260px;
    }

    .mega-hero__img {
        object-fit: cover;
    }
}

/* Phablet & down */
@media (max-width: 720px) {

    .cat-caption,
    .coll-caption {
        font-size: 13px;
        letter-spacing: .14em;
    }

    .cat-figure img,
    .coll-figure img {
        aspect-ratio: 4/3;
    }

    .usp-icon i {
        font-size: 20px;
    }

    .review-media {
        aspect-ratio: 4/3;
        max-height: 240px;
    }

    .review-text {
        font-size: 13px;
    }

    .review-author {
        font-size: 12.5px;
    }

    .news .section__head {
        padding: 0 16px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .header--centered {
        min-height: 72px;
    }

    .brand {
        max-height: 56px;
    }

    .icon-btn i {
        font-size: 18px;
    }

    .news-nav,
    .rev-nav {
        width: 36px;
        height: 36px;
        border-radius: 6px;
    }

    .product-title {
        font-size: 14px;
    }

    .product-price {
        font-size: 13px;
    }

    .promo__title {
        font-size: 20px;
    }

    .promo__cta {
        font-size: 11px;
    }

    .vh-title {
        font-size: 24px;
    }
}


/* ===== Megamenu – bas (FULL WIDTH, CENTERED TO VIEWPORT) ===== */
.has-mega {
    /* position: relative; */
}

/* anchor for top offset */
.mega {
    position: absolute;
    top: 100%;
    /* sit directly under the trigger */
    left: 50%;
    /* center to the viewport */
    transform: translate(-50%, 12px);
    width: 100vw;
    /* fallback */
    max-width: 100%;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s step-end;
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
    /* avoid horizontal scroll from borders/padding */
    will-change: opacity, transform;
}

@supports (width: 100dvw) {
    .mega {
        width: 100dvw;
    }

    /* avoid scrollbar-width causing overflow */
}

.mega__inner {
    padding-block: 28px 36px;
}

.has-mega:hover>.mega,
.has-mega:focus-within>.mega,
.has-mega[data-open="true"]>.mega {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ===== MEGA A: Smycken (4 tiles med etikett under) ===== */
.mega--tiles .mega-tiles {
    display: grid;
    gap: 28px;
    align-items: start;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mega-tile {
    text-align: center;
    display: grid;
    gap: 10px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s ease, transform .28s ease;
    will-change: opacity, transform;
}

.mega-tile__img {
    aspect-ratio: 4/3;
    border-radius: 4px;
    background: #f3f3f3 center/cover no-repeat;
    transform: scale(1.04);
    transition: transform .45s cubic-bezier(.2, .6, .2, 1);
    will-change: transform;
}

.mega-tile__label {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px;
    font-weight: 600;
}

.mega--tiles .mega-tiles .mega-tile:nth-child(1) {
    transition-delay: 40ms;
}

.mega--tiles .mega-tiles .mega-tile:nth-child(2) {
    transition-delay: 80ms;
}

.mega--tiles .mega-tiles .mega-tile:nth-child(3) {
    transition-delay: 120ms;
}

.mega--tiles .mega-tiles .mega-tile:nth-child(4) {
    transition-delay: 160ms;
}

.has-mega:hover>.mega.mega--tiles .mega-tile,
.has-mega[data-open="true"]>.mega.mega--tiles .mega-tile {
    opacity: 1;
    transform: translateY(0);
}

.has-mega:hover>.mega.mega--tiles .mega-tile__img,
.has-mega[data-open="true"]>.mega.mega--tiles .mega-tile__img {
    transform: scale(1);
}

/* ===== MEGA B: Kategorier (2 kolumner länkar + stor hero till höger) ===== */
.mega--links .mega-links {
    display: grid;
    gap: 28px;
    grid-template-columns: 1.2fr 1.8fr;
}

@media (min-width:1200px) {
    .mega--links .mega-links {
        grid-template-columns: 1fr 1.4fr;
    }
}

.mega-links__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 48px;
}

.mega-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 5px;
    height: max-content;
}

.mega-list li {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .26s ease, transform .26s ease;
    will-change: opacity, transform;
    height: max-content;
}

.mega-list a {
    color: #1a1a1a;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: .01em;
}

.mega-list a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* stagger reveals (example 8 items per column) */
.mega-links__cols>.mega-list:nth-child(1) li:nth-child(1) {
    transition-delay: 40ms;
}

.mega-links__cols>.mega-list:nth-child(1) li:nth-child(2) {
    transition-delay: 80ms;
}

.mega-links__cols>.mega-list:nth-child(1) li:nth-child(3) {
    transition-delay: 120ms;
}

.mega-links__cols>.mega-list:nth-child(1) li:nth-child(4) {
    transition-delay: 160ms;
}

.mega-links__cols>.mega-list:nth-child(1) li:nth-child(5) {
    transition-delay: 200ms;
}

.mega-links__cols>.mega-list:nth-child(1) li:nth-child(6) {
    transition-delay: 240ms;
}

.mega-links__cols>.mega-list:nth-child(1) li:nth-child(7) {
    transition-delay: 280ms;
}

.mega-links__cols>.mega-list:nth-child(1) li:nth-child(8) {
    transition-delay: 320ms;
}

.mega-links__cols>.mega-list:nth-child(2) li:nth-child(1) {
    transition-delay: 360ms;
}

.mega-links__cols>.mega-list:nth-child(2) li:nth-child(2) {
    transition-delay: 400ms;
}

.mega-links__cols>.mega-list:nth-child(2) li:nth-child(3) {
    transition-delay: 440ms;
}

.mega-links__cols>.mega-list:nth-child(2) li:nth-child(4) {
    transition-delay: 480ms;
}

.mega-links__cols>.mega-list:nth-child(2) li:nth-child(5) {
    transition-delay: 520ms;
}

.mega-links__cols>.mega-list:nth-child(2) li:nth-child(6) {
    transition-delay: 560ms;
}

.mega-links__cols>.mega-list:nth-child(2) li:nth-child(7) {
    transition-delay: 600ms;
}

.mega-links__cols>.mega-list:nth-child(2) li:nth-child(8) {
    transition-delay: 640ms;
}

/* activate link reveals */
.has-mega:hover>.mega.mega--links .mega-list li,
.has-mega[data-open="true"]>.mega.mega--links .mega-list li {
    opacity: 1;
    transform: translateY(0);
}

/* hero image scale-down */
.mega-hero {
    display: block;
    overflow: hidden;
    align-self: start;
    height: 100%;
    max-height: 440px;
    text-align: center;
}

.mega-hero__img {
    width: 100%;
    height: 100%;
    display: block;
    transform: scale(1.04);
    transition: transform .45s cubic-bezier(.2, .6, .2, 1);
    will-change: transform;
    object-fit: contain;
}

.has-mega:hover>.mega.mega--links .mega-hero__img,
.has-mega[data-open="true"]>.mega.mega--links .mega-hero__img {
    transform: scale(1);
}

/* ===== Ikoner och badge (FA) – samma som tidigare ===== */
.icon-btn {
    border: 0;
    background: transparent;
    padding: 6px;
    cursor: pointer;
}

.icon-btn-m {
    display: none;
}

.icon-btn i {
    font-size: 18px;
    line-height: 1;
}

.cart-btn {
    position: relative;
}

.cart-btn .count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
}

/* ===== Sticky kompakt läge ===== */
.site-header.is-compact .header__row {
    min-height: 72px;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
    .mega * {
        transition-duration: .001ms !important;
    }
}



/* Section wrapper: full-bleed image with generous height */
.hero {
    position: relative;
    overflow: clip;
    /* prevent media spillover */
    min-height: clamp(520px, 92vh, 820px);
    /* tall but not full 100vh on desktop */
}

/* Media layer (picture/img) fills the section */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* cover viewport */
    object-position: center;
    /* center focal point */
    /* subtle zoom-out on load for a premium feel */
    transform: scale(1.04);
    animation: heroZoomOut 1.2s cubic-bezier(.2, .6, .2, 1) forwards;
    image-rendering: auto;
}

/* Readability overlay (very subtle) */
.hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg,
            rgba(0, 0, 0, .8) 0%,
            rgba(0, 0, 0, .05) 35%,
            rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}

/* Text panel (content layer) */
.hero__panel {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0;
    /* default layout (if you don't use hero--single):
     places text near the bottom for a fashion-hero feel */
    align-content: end;
    min-height: 100%;
    padding-block: clamp(48px, 9vw, 140px);
    max-width: 720px;
    /* comfortable measure for headings */
}

/* --- Centered variant (what you requested) --- */
.hero--single {
    display: grid;
    /* enables easy centering of the panel */
}

.hero--single .hero__panel {
    position: absolute;
    text-align: right;
    right: 20px;
    bottom: 20px;
    align-content: center !important;
    /* vertical center */
    justify-items: flex-end;
    /* horizontal center for children */
    text-align: center;
    /* center text lines */
    min-height: max-content;
    /* do not stretch to full height */
    padding-block: 0;
    margin-inline: auto;
    /* center within container/grid */
    max-width: 720px;
}

/* Typography & reveals (kept minimal; integrates with your global scale) */
.hero--single .eyebrow,
.hero--single .headline,
.hero--single .subhead {
    color: #fff;
    /* ensure contrast on images */
}

.hero .headline {
    /* gentle text reveal on load */
    opacity: 0;
    transform: translateY(10px);
    animation: heroTextUp .5s .1s ease forwards;
    font-size: 40px;
    text-transform: uppercase;
    margin: 0;
}

.hero__panel .eyebrow {
    font-size: 18px;
}

.hero .subhead {
    color: rgba(255, 255, 255, .92);
    max-width: 58ch;
    /* readable line length */
}

/* Buttons inside hero: align center for the centered layout */
.hero--single .btn {
    justify-self: flex-end;
    color: #fff;
    font-weight: 500;
    position: relative;
}

.hero--single .btn:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0px;
    width: calc(100% - 0px);
    max-width: 100%;
    height: 1px;
    background: #fff;
    transform: translateX(-50%);
    transform-origin: center;
    transition: all .3s ease-out;
}

.hero--single .btn:hover:after {
    max-width: 0;
}

/* Animations */
@keyframes heroZoomOut {
    to {
        transform: scale(1);
    }
}

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

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero__media img {
        animation: none !important;
        transform: none !important;
    }

    .hero .headline {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Header of the section */
/* ===== Section head ===== */
.news .section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 50px;
}

.news__title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 28px);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0;
}

.news__all {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #111;
    text-decoration: none;
}

.news__all:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ===== Swiper basics ===== */
.news-swiper {
    position: relative;
}

.news-swiper .swiper-wrapper {
    align-items: stretch;
}

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

.products .swiper-slide {
    height: auto;
}

/* ===== Arrows: square w/ slight radius + slide-in on hover ===== */
.section.news {
    background: #f9f9fb;
    position: relative;
}

.news-nav {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    color: #111;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    transition: transform .25s ease, opacity .2s ease,
        background .2s ease, border-color .2s ease;
    opacity: 0;
    pointer-events: none;
    /* hidden by default */
}

.news-prev {
    left: 8px;
    transform: translate(-14px, -50%);
}

/* slide-in from left */
.news-next {
    right: 8px;
    transform: translate(14px, -50%);
}

/* slide-in from right */

.news-swiper:hover .news-nav,
.news-swiper:focus-within .news-nav {
    opacity: 1;
    pointer-events: auto;
}

.news-swiper:hover .news-prev,
.news-swiper:focus-within .news-prev {
    transform: translate(0, -50%);
}

.news-swiper:hover .news-next,
.news-swiper:focus-within .news-next {
    transform: translate(0, -50%);
}

.news-nav:hover {
    background: #fff;
    transform: translate(0, -50%) scale(1.04);
}

.news-nav:disabled,
.news-nav.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* ===== Product card ===== */
.product-card {
    position: relative;
}

.product-card .swatches {
    justify-content: center !important;
}

.product-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Image stage */
.product-media {
    position: relative;
    background: #f7f7f9;
    /* soft grey like ref */
    border-radius: 3px;
    aspect-ratio: 1/1;
    overflow: hidden;
    padding: 0;
    /* adds inner breathing room */
}

/* Two stacked images: base + hover */
.product-img {
    position: absolute;
    /* inset: clamp(10px, 1.8vw, 16px); */
    width: auto;
    height: auto;
    /* max-width: calc(100% - 2*clamp(10px, 1.8vw, 16px));
    max-height: calc(100% - 2*clamp(10px, 1.8vw, 16px)); */
    object-fit: cover;
    object-position: center;
    transition: opacity .28s ease, transform .28s ease, filter .28s ease;
    will-change: opacity, transform;
}

.img--1 {
    opacity: 1;
    transform: scale(1);
}

.img--2 {
    opacity: 0;
    transform: scale(1.02);
}

/* On card hover: fade to alt image */
.product-card:hover .img--1 {
    opacity: 0;
    transform: scale(1.01);
}

.product-card:hover .img--2 {
    opacity: 1;
    transform: scale(1);
}

/* ===== Bottom CTA bar (slides up) ===== */
.product-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    background: rgba(245, 240, 233, .95);
    /* warm, subtle */
    border-top: 1px solid rgba(0, 0, 0, .06);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    display: grid;
    place-items: center;
    transform: translateY(100%);
    /* hidden */
    transition: transform .28s ease;
    will-change: transform;
}

.product-cta span {
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    /* light feel */
    font-size: 12px;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #111;
}

.product-cta-mob {
    width: 30px;
    height: 30px;
    z-index: 9;
    position: absolute;
    color: #000;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 16px;
    bottom: 5px;
    left: 5px;
    background: #fff;
    display: none;
}

/* Reveal CTA on hover/focus */
.product-card:hover .product-cta,
.product-card:focus-within .product-cta {
    transform: translateY(0);
}

/* ===== Info under image ===== */
.product-info {
    text-align: center;
    padding: 10px 6px 0;
}

.product-title {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 400;
    font-family: var(--font-sans);
}

.product-price {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-price .discounted {
    font-size: 14px;
    font-weight: 300;
}

/* Swatches (visual only here) */
.swatches {
    display: inline-flex;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c, #ccc);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
    border: 1px solid rgba(0, 0, 0, .06);
    cursor: pointer;
}

.swatch:hover,
.swatch:focus {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28);
    outline: none;
}

/* Active/keyboard-visible swatch */
.swatch.is-active {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .45);
}

.swatch:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

/* ===== Category Shortcuts (4 tiles) ===== */

/* skärmläsar-hjälp */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cat-tiles {
    padding-block: clamp(18px, 4vw, 36px);
}

.cat-grid {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 980px) {
    .cat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cat-card {
    position: relative;
}

.cat-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.cat-figure {
    margin: 0;
    display: grid;
    gap: 5px;
}

.cat-figure picture {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Bildyta – stor, ren, samma känsla som referensen */
.cat-figure img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 10/10;
    /* nära proportionerna i din bild */
    object-fit: cover;
    object-position: center;
    border-radius: 2px;
    transition: transform 1s ease, filter .35s ease;
    will-change: transform;
    image-rendering: auto;
}

/* Subtil zoom och lätt “lyft” */
.cat-link:hover img,
.cat-link:focus img {
    transform: scale(1.1);
    filter: saturate(1.03) contrast(1.02);
}

/* Responsive tweak: a little more breathing room on narrow screens */
@media (max-width: 600px) {
    .hero--single .hero__panel {
        padding-block: 60px 80px;
    }

    .product-title {
        font-size: 13px;
    }

    .product-card .swatch {
        width: 18px;
        height: 18px;
    }
}

/* Bildmellanrum som i referensen (vita “rännor” mellan korten) */
.cat-grid {
    background: #fff;
}

.cat-card {
    background: #fff;
}

/* Rubrik under bilden – versaler, lätt tracking, centrerad */
.cat-caption {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 16px;
    font-weight: 600;
    color: #0f0f0f;
    line-height: 1.4;
}

/* Fokusstil för a11y */
.cat-link:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
}

/* Minskat rörelsestöd */
@media (prefers-reduced-motion: reduce) {
    .cat-figure img {
        transition-duration: .001ms !important;
    }
}

/* ===== Promo Banner (Tote Bag) ===== */
.promo {
    padding-block: clamp(28px, 6vw, 10px);
}

.promo__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    /* bild lite bredare än text */
    gap: clamp(20px, 4vw, 56px);
    align-items: center;
}

/* Bildyta – stor, ren */
.promo__media {
    margin: 0;
}

.promo__media img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 2/2;
    /* nära proportionen i din screenshot */
    object-fit: cover;
    object-position: center;
    border-radius: 2px;
}

/* Textkolumn – centrerad typografi */
.promo__content {
    text-align: center;
    max-width: 560px;
    margin-inline: auto;
}

.promo__title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 28px);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: #0f0f0f;
}

.promo__lead {
    margin: 0 0 26px;
    line-height: 1.75;
    color: #222;
}

/* CTA – understruken, lätt vikt, versaler, centrerad */
.promo__cta {
    display: inline-block;
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    /* light */
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 4px 2px;
    transition: opacity .2s ease;
}

.promo__cta:hover {
    opacity: .75;
}

/* Variant: byt sida (om du vill ha bild höger, text vänster) */
.promo--reverse .promo__grid {
    grid-template-columns: 0.9fr 1.1fr;
}

.promo--reverse .promo__media {
    order: 2;
}

.promo--reverse .promo__content {
    order: 1;
}

/* Responsiv stack på mobil */
@media (max-width: 900px) {
    .promo__grid {
        grid-template-columns: 1fr;
        gap: clamp(16px, 4vw, 28px);
    }

    .promo__media img {
        aspect-ratio: auto;
    }
}

/* Minskat rörelse-stöd (ingen extra animation här, men reserverad) */
@media (prefers-reduced-motion: reduce) {
    .promo__cta {
        transition-duration: .001ms !important;
    }
}

/* SR-only helper (om du inte redan har den) */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== USP Row ===== */
:root {
    --usp-icon: #cdbd98;
    /* varm “guld-sand” lik referensen */
    --usp-text: #1a1a1a;
}

.usp {
    padding-block: clamp(18px, 4vw, 32px);
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 4vw, 48px);
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: start;
    text-align: center;
}

@media (max-width: 720px) {
    .usp-grid {
        /* grid-template-columns: 1fr; */
        /* stack på mobil */
        gap: 18px;
        display: flex;
        overflow: auto;
    }

    .usp-item {
        min-width: 215px;
    }

    .usp-grid::-webkit-scrollbar {
        display: none;
    }

    .product-cta-mob {
        display: grid;
    }

    .product-cta {
        display: none;
    }
}

.usp-item {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.usp-icon {
    line-height: 0;
    color: var(--usp-icon);
}

.usp-icon i {
    font-size: 22px;
    /* liten, diskret ikon som i ref */
}

.usp-text {
    margin: 0;
    color: var(--usp-text);
    font-size: 15px;
    line-height: 1.7;
}

/* (valfritt) lite mjuk fade-in när sektionen blir hovrad/fokuserad */
.usp-item:hover .usp-icon i,
.usp-item:focus-within .usp-icon i {
    transform: translateY(-1px);
    transition: transform .18s ease;
}

/* ===== Video Promo ===== */
.video-hero {
    position: relative;
    min-height: clamp(520px, 92vh, 820px);
    /* large, cinematic */
    display: grid;
    /* easy centering */
    place-items: center;
    overflow: clip;
}

/* Background video fills the section */
.vh-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.vh-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
}

/* Subtle dark overlay (mix of linear + vignette) */
.vh-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(120% 120% at 50% 50%, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .35) 75%),
        linear-gradient(0deg, rgba(0, 0, 0, .26), rgba(0, 0, 0, .26));
}

/* Centered text block */
.vh-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: grid;
    gap: 18px;
    max-width: 880px;
    padding-inline: 16px;
}

/* Headline style (serif, uppercase, tracking) */
.vh-title {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    /* or your chosen serif */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: clamp(26px, 4vw, 56px);
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    /* crisp on bright frames */
}

/* Ghost button like the reference */
.btn {
    display: inline-block;
    padding: 10px 22px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
}

.btn--ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .9);
    background: transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    font-size: 18px;
    width: max-content;
    margin: 0 auto;
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, .08);
    border-color: #fff;
    transform: translateY(-1px);
}

/* Respect reduced motion: pause the zoomy feel from fast-changing frames */
@media (prefers-reduced-motion: reduce) {
    .vh-video {
        animation: none !important;
    }
}

/* === SR-only helper (om du inte redan har den) === */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === Collections Mosaic === */
.collections {
    padding-block: clamp(20px, 5vw, 44px);
}

.coll-grid {
    display: grid;
    gap: 5px;
    /* tunna vita “rännor” som i ref */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 720px) {
    .coll-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .coll-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.coll-card {
    position: relative;
}

.coll-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.coll-figure {
    margin: 0;
    display: grid;
    gap: 5px;
}

.coll-figure picture {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Bild – samma proportioner som din screenshot */
.coll-figure img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 10 / 10;
    object-fit: cover;
    object-position: center;
    border-radius: 2px;
    transition: transform 1s ease, filter .35s ease;
    will-change: transform;
    image-rendering: auto;
}

/* Subtil zoom/förstärkning på hover/focus */
.coll-link:hover img,
.coll-link:focus img {
    transform: scale(1.1);
    filter: saturate(1.03) contrast(1.02);
}

/* Bildfokus för tangentbord */
.coll-link:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
}

/* Bildtext under – versaler och lätt tracking som i referens */
.coll-caption {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 16px;
    font-weight: 600;
    color: #0f0f0f;
    line-height: 1.4;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .coll-figure img {
        transition-duration: .001ms !important;
    }
}

/* ===== Reviews slider ===== */
.reviews {
    padding-block: clamp(20px, 5vw, 44px);
    padding-top: 0;
}

.reviews__title {
    text-align: center;
    margin: 0 0 18px;
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: clamp(22px, 2.6vw, 30px);
    color: #111;
}

/* Swiper wrapper */
.reviews-swiper {
    position: relative;
}

.reviews-swiper .swiper-wrapper {
    align-items: stretch;
}

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

.reviews-list .swiper-slide {
    height: auto;
}

/* Card */
.review-card {
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 10px;
}

/* Product image area */
.review-media {
    background: #f7f7f9;
    border-radius: 3px;
    margin: 0 0 6px;
    aspect-ratio: 5/5;
    display: grid;
    place-items: center;
    overflow: hidden;
    height: 100%;
    max-height: 300px;
}

.review-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    height: 300px;
}

/* Meta row: stars + date */
.review-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #111;
    font-size: 13px;
}

.rating {
    display: inline-flex;
    gap: 3px;
    color: #111;
}

.rating .fa-star {
    font-size: 12px;
}

/* Date */
.date {
    color: #8b8b8b;
    font-size: 12px;
}

/* Text + author */
.review-text {
    margin: 0;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.55;
}

.review-author {
    margin: 6px 0 0;
    color: #1a1a1a;
    font-size: 13px;
}

.verified {
    color: #1d4ed8;
    /* blue check like many stores */
    font-weight: 500;
    margin-left: 6px;
}

.verified i {
    margin-right: 4px;
}

/* Arrows: slide-in on hover (square with slight radius) */
.rev-nav {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    color: #111;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    transition: transform .25s ease, opacity .2s ease, background .2s ease, border-color .2s ease;
    opacity: 0;
    pointer-events: none;
}

.rev-prev {
    left: 8px;
    transform: translate(-14px, -50%);
}

.rev-next {
    right: 8px;
    transform: translate(14px, -50%);
}

.reviews-swiper:hover .rev-nav,
.reviews-swiper:focus-within .rev-nav {
    opacity: 1;
    pointer-events: auto;
}

.reviews-swiper:hover .rev-prev,
.reviews-swiper:focus-within .rev-prev {
    transform: translate(0, -50%);
}

.reviews-swiper:hover .rev-next,
.reviews-swiper:focus-within .rev-next {
    transform: translate(0, -50%);
}

.rev-nav:hover {
    background: #fff;
    transform: translate(0, -50%) scale(1.04);
}

.rev-nav.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* Breakpoints for slides per view */
@media (min-width: 800px) {
    .review-media {
        width: 100%;
    }

    .review-media img {
        width: 100%;
    }
}

@media (min-width: 480px) {
    .reviews-swiper {
        --gap: 16px;
    }
}

.eapps-widget-toolbar-panel-wrapper {
    display: none !important;
}

.insta-feed {
    position: relative;
}

.insta-feed::after {
    content: "";
    width: 100%;
    height: 100%;
    max-height: 50px;
    background: white;
    bottom: 0;
    left: 0px;
    z-index: 99999;
}

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

.site-footer {
    background: #f7f7f7;
    border-top: 1px solid #eaeaea;
    padding-block: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 30px);
    color: #1a1a1a;
    font-size: 15px;
}

/* Top grid */
.footer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 60px);
    margin-bottom: clamp(22px, 4vw, 40px);
}

@media (max-width: 900px) {
    .footer__grid {
        grid-template-columns: 1fr;
    }
}

/* Titles + links */
.footer-title {
    margin: 0 0 14px;
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: clamp(18px, 2vw, 22px);
    letter-spacing: .04em;
    text-transform: uppercase;
}

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

.footer-links li {
    margin: 10px 0;
}

.footer-links a {
    color: #1a1a1a;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Bottom bar layout */
.footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* left | center | right */
    align-items: center;
    gap: 12px;
    padding-top: clamp(16px, 3vw, 24px);
    border-top: 1px solid #efefef;
}

.footer__left {
    justify-self: start;
}

.footer__right {
    justify-self: end;
}

.footer__left p,
.footer__right p {
    margin: 0;
}

/* Locale button (center) */
.locale-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 0;
    background: #0f0f0f;
    color: #fff;
    font-size: 13px;
    letter-spacing: .04em;
    cursor: default;
}

.locale-btn i {
    font-size: 12px;
    opacity: .9;
}

/* SWE flag (pure CSS) */
.flag-se {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background:
        linear-gradient(#fecc00 0 0) 42%/24% 100% no-repeat,
        linear-gradient(#fecc00 0 0) 0 42%/100% 24% no-repeat,
        #006aa7;
}

/* Developer credit */
.dev a {
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 1px solid #1a1a1a;
}

.dev a:hover {
    opacity: .75;
}

/* Mobile: keep three items stacked with spacing */
@media (max-width: 700px) {
    .footer__bottom {
        grid-template-columns: 1fr;
        row-gap: 10px;
        text-align: center;

    }

    .footer__right,
    .footer__left {
        justify-self: center;
    }
}

/* =========================================================
   RESPONSIVE ADDITIONS (append after your current CSS)
   Covers: Header/Nav/Megamenu, Hero, News rail, Promo,
           Category tiles, USP, Video, Collections, Reviews,
           Footer. Keeps desktop look unchanged.
   ========================================================= */

/* ---------- Large tablet & down (≤1200px) ---------- */
@media (max-width: 1200px) {
    .header--centered {
        min-height: 84px;
    }

    .nav__list {
        gap: 18px;
    }

    .news .section__head {
        padding: 0 24px;
    }

    .mega--links .mega-links {
        grid-template-columns: 1fr 1.1fr;
    }

    .mega-hero {
        max-height: 380px;
    }
}

/* ---------- Tablet & down (≤1024px) ---------- */
@media (max-width: 1024px) {

    /* Header grid compacts; logo centered, menu button shown */
    /* .site-header {
        max-height: none;
    } */

    .header--centered {
        grid-template-columns: auto 1fr auto;
        /* menu | brand | utils */
        column-gap: 10px;
        min-height: 78px;
        padding-inline: var(--gutter);
    }

    /* Brand scales slightly */
    .brand {
        justify-self: center;
        max-height: 64px;
    }

    .brand img {
        object-fit: contain;
    }

    /* Show a hamburger button if you have one (e.g., .menu-btn) */
    .menu-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .menu-btn i {
        font-size: 20px;
    }

    /* Off-canvas nav drawer built from your existing .nav__list */
    .nav {
        justify-self: start;
    }

    .nav__list {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 420px);
        padding: 18px min(4vw, 24px);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin: 0;
        background: #fff;
        border-right: 1px solid var(--line);
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 100;
    }

    /* When you toggle the menu (add data-menu="open" on .site-header) */
    .site-header[data-menu="open"] .nav__list {
        transform: translateX(0);
    }

    /* Dim overlay (no extra markup needed) */
    .site-header::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(0, 0, 0, .35);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s step-end;
        pointer-events: none;
    }

    .site-header[data-menu="open"]::after {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Mobile nav item look */
    .nav__link,
    .nav__btn {
        width: 100%;
        padding: 12px 0;
        font-size: 13px;
        letter-spacing: .14em;
        text-align: left;
    }

    .nav__link::after,
    .nav__link--active::after {
        display: none;
    }

    /* remove underline animation in drawer */

    /* Megamenu becomes accordion-like inside the drawer */
    .mega {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: auto;
        opacity: 1;
        visibility: visible;
        border: 0;
        padding-block: 0;
        box-shadow: none;
    }

    .has-mega>.mega {
        display: none;
    }

    .has-mega[data-open="true"]>.mega {
        display: block;
    }

    .mega__inner {
        padding-block: 12px 16px;
    }

    .mega--tiles .mega-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .mega--links .mega-links {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mega-links__cols {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mega-list {
        gap: 6px;
    }

    .mega-hero {
        max-height: 260px;
    }

    .mega-hero__img {
        transform: none !important;
        object-fit: cover;
    }

    /* Hero text truly centered on mobile/tablet */
    .hero {
        min-height: clamp(420px, 70vh, 680px);
    }

    .hero--single .hero__panel {
        left: 50%;
        bottom: 5%;
        right: auto;
        top: auto;
        transform: translate(-50%, -5%);
        justify-items: center;
        text-align: center;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .hero .headline {
        font-size: clamp(26px, 4.8vw, 36px);
    }

    /* News rail head spacing */
    .news .section__head {
        margin-bottom: 12px;
    }
}

/* ---------- Phablet & down (≤900px) ---------- */
@media (max-width: 900px) {
    .promo__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .promo__media img {
        aspect-ratio: auto;
    }

    .promo__title {
        font-size: clamp(20px, 2.4vw, 24px);
    }

    .promo__lead {
        line-height: 1.7;
    }

    .vh-title {
        font-size: clamp(24px, 6vw, 36px);
    }

    .btn--ghost {
        font-size: 14px;
        padding: 10px 18px;
    }
}

/* ---------- Phone landscape & down (≤720px) ---------- */
@media (max-width: 720px) {

    /* Category & Collections captions scale */
    .cat-caption,
    .coll-caption {
        font-size: 13px;
        letter-spacing: .14em;
    }

    .cat-figure img,
    .coll-figure img {
        aspect-ratio: 4/3;
    }

    /* USP already stacks; just reduce icon size */
    .usp-icon i {
        font-size: 20px;
    }

    /* Reviews: tighter spacing and image ratio */
    .review-media {
        aspect-ratio: auto;
        max-height: 240px;
    }

    .review-media img {
        height: 100%;
    }

    .review-text {
        font-size: 13px;
    }

    .review-author {
        font-size: 12.5px;
    }

    /* News section padding */
    .news .section__head {
        padding: 0 16px;
    }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
    .header--centered {
        min-height: 72px;
    }

    .brand {
        max-height: 56px;
    }

    .menu-btn i,
    .icon-btn i {
        font-size: 18px;
    }

    .header__utils {
        gap: 10px;
    }

    .news-nav,
    .rev-nav {
        width: 36px;
        height: 36px;
        border-radius: 6px;
    }

    .product-title {
        font-size: 12px;
    }

    .product-price {
        font-size: 13px;
    }

    .promo__title {
        font-size: 20px;
    }

    .promo__cta {
        font-size: 11px;
    }

    .vh-title {
        font-size: 24px;
    }
}

/* ---------- Utility: hide/show by breakpoint (optional hooks) ---------- */
@media (min-width: 1025px) {
    .menu-btn {
        display: none !important;
    }

    /* hamburger hidden on desktop */
}

/* ===== Drawer visibility driven by ARIA (robust even if header state differs) ===== */
html.no-scroll,
body.no-scroll {
    overflow: hidden;
}

.mnav {
    will-change: transform, visibility;
    z-index: 1202;
    /* above overlay */
}

.mnav[aria-hidden="true"] {
    transform: translateX(-100%) !important;
    visibility: hidden;
    pointer-events: none;
}

.mnav[aria-hidden="false"] {
    transform: translateX(0) !important;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
}

/* Keep overlay under the drawer */
.site-header::after {
    z-index: 1201;
}

/* Make sure fallback desktop nav drawer never “wins” on mobile if mnav exists */
@media (max-width: 1024px) {

    /* Header layout: menu + search on left, brand in center, flag + cart on right */
    .header--centered {
        /* grid-template-columns: auto 1fr auto; */
        display: flex;
        align-items: center;
    }

    .brand img {
        object-fit: contain;
        max-height: 40px;
    }

    .hero--single .btn {
        justify-self: center;
    }

    .hero__panel .eyebrow {
        font-size: 16px;
    }

    .search-btn--left,
    .menu-btn.icon-btn-m {
        display: inline-flex;
        align-items: center;
    }

    .site-header {
        max-height: max-content;
    }

    /* Hide the desktop search and locale on mobile; show mobile flag */
    .search-btn--right,
    #btn-locale {
        display: none;
    }

    .locale-btn--mobile {
        display: inline-flex;
        align-items: center;
    }

    /* If you still have the fallback .nav__list drawer rules lower in the file,
     this prevents them from surfacing alongside the real side menu */
    .nav {
        display: none !important;
    }
}

/* Touch targets + buttons in the mobile bars */
.mnav__bar .mnav__close,
.mnav__bar .mnav__back {
    cursor: pointer;
}

/* (Optional) make the hamburger always tappable above the page */
.menu-btn {
    position: relative;
    z-index: 1300;
}

/* ---------- Cart drawer variables ---------- */
:root {
    --cart-w: min(92vw, 480px);
    --cart-z: 1400;
    --cart-footer-h: 112px;
    /* space for total + CTA */
    --cart-tray-shadow: 0 -10px 24px rgba(0, 0, 0, .06);
}

/* Overlay */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s step-end;
    z-index: calc(var(--cart-z) - 1);
}

.cart-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Drawer shell */
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--cart-w);
    background: #fff;
    box-shadow: -6px 0 24px rgba(0, 0, 0, .14);
    transform: translateX(100%);
    transition: transform .36s cubic-bezier(.2, .6, .2, 1);
    z-index: var(--cart-z);
    display: grid;
    grid-template-rows: auto 1fr;
    /* footer is fixed */
}

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

.cart-drawer__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 16px 18px;
    border-bottom: 1px solid #efefef;
}

.cart-title {
    margin: 0;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 14px;
}

.cart-close {
    border: 0;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 6px;
}

/* Scroll area (reserve room for fixed tray + footer) */
.cart-drawer__scroll {
    overflow: auto;
    padding: 14px 16px 24px;
    padding-bottom: calc(var(--cart-footer-h) + 180px);
    /* room for tray when open */
}

/* Line item */
.cart-line {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
}

.cart-line__img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 4px;
    background: #f5f5f5;
}

.cart-line__top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 10px;
}

.cart-line__title {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    font-family: var(--font-sans);
}

.cart-line__price {
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* white-space: nowrap; */
}

.discounted {
    color: red;
    font-weight: 600;
    margin-right: 6px;
    font-size: 16px;
}

.b-discount {
    color: #777;
    text-decoration: line-through;
    font-weight: 400;
    margin-right: 6px;
    font-size: 13px;
    line-height: normal;
}

.cart-line__meta {
    margin: 6px 0 10px;
    display: flex;
    gap: 18px;
    font-size: 13px;
    color: #555;
}

.cart-line__meta dt {
    color: #777;
    margin-right: 6px;
    display: inline;
}

.cart-line__meta dd {
    margin: 0;
    display: inline;
}

.cart-line__controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qty {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 6px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 4px 8px;
}

.qty__btn {
    border: 0;
    background: transparent;
    font-size: 18px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.qty__input {
    border: 0;
    width: 26px;
    text-align: center;
    font-size: 14px;
    outline: none;
}

.cart-line__remove {
    border: 0;
    background: transparent;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    cursor: pointer;
}

/* Fixed tray (accordions) */
.cart-tray {
    position: fixed;
    right: 0;
    width: var(--cart-w);
    bottom: var(--cart-footer-h);
    background: #fff;
    box-shadow: var(--cart-tray-shadow);
    border-top: 1px solid #efefef;
    z-index: calc(var(--cart-z) + 1);
}

.tray-acc+.tray-acc {
    border-top: 1px solid #efefef;
}

.tray-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border: 0;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 13px;
    font-weight: 600;
}

.tray-caret {
    transition: transform .2s ease;
}

.tray-acc.is-open .tray-caret {
    transform: rotate(180deg);
}

.tray-panel {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: height .28s ease, opacity .2s ease, transform .28s ease;
    padding: 0 16px;
}

.tray-acc.is-open .tray-panel {
    opacity: 1;
    transform: translateY(0);
}

/* “Matcha med” card (inside tray) */
.match-card {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    padding: 10px 0 16px;
}

.match-card img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    background: #f5f5f5;
}

.match-card__body {
    display: grid;
    align-content: start;
    gap: 6px;
}

.match-card__title {
    font-size: 15px;
}

.match-card__price {
    font-weight: 600;
}

.match-card__add {
    margin-left: auto;
    border: 1px solid #e6e6e6;
    background: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
}

/* Notes textarea styling (pixel-tight) */
.note-label {
    display: block;
    font-size: 13px;
    color: #454545;
    margin: 6px 0 8px;
}

.note-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    padding: 12px 12px 12px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
    color: #111;
    font: 400 14px/1.5 var(--font-sans);
    outline: none;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .02);
    transition: border-color .18s ease, box-shadow .18s ease;
    margin-bottom: 14px;
}

.note-textarea:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, .08);
}

/* Fixed footer */
.cart-drawer__footer {
    position: fixed;
    right: 0;
    bottom: 0;
    width: var(--cart-w);
    background: #fff;
    border-top: 1px solid #efefef;
    padding: 12px 16px 14px;
    z-index: calc(var(--cart-z) + 2);
    max-height: var(--cart-footer-h);
}

.cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.cart-total__value {
    font-size: 16px;
}

.btn--checkout {
    width: 100%;
    display: block;
    padding: 13px 14px;
    border: 0;
    border-radius: 4px;
    background: #111;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px;
    cursor: pointer;
}

.cart-footnote {
    margin: 8px 0 0;
    font-size: 12px;
    color: #666;
}

/* Small phones tightening */
@media (max-width:480px) {
    :root {
        --cart-w: 100vw;
    }

    .cart-drawer__head {
        padding: 14px 14px;
    }

    .cart-drawer__scroll {
        padding: 12px 14px;
    }
}

/* Product page grid (no swiper) */
.products-grid .pg-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 2 → 3 → 4 across */
@media (min-width: 600px) {
    .products-grid .pg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .products-grid .pg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

/* Make sure non-swiper cards behave nicely */
.products-grid .product-card {
    height: auto;
}

.products-grid .product-link {
    display: block;
}


/* Product page */
:root {
    --ink: #111;
    --muted: #6b7280;
    --line: #eceff1;
    --hover: #f6f7f8;
}

/* bar + rails (from previous message) */
.filterbar {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.filterbar__inner {
    max-width: 15200px;
    margin-inline: auto;
    height: 56px;
    padding-inline: 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    position: relative;
}

.filterbar__inner::before,
.filterbar__inner::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.filterbar__inner::before {
    left: 0;
}

.filterbar__inner::after {
    right: 0;
}

.fb-spacer {
    min-width: 1px;
}

.fb-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--muted);
    font: 600 12px/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .16em;
    cursor: pointer;
    height: 100%;
    padding: 0 20px;
}

.fb-btn:hover {
    color: var(--ink);
}

.fb-ico {
    width: 18px;
    height: 18px;
    fill: currentColor;
    opacity: .9;
}

.fb-chev {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform .18s ease;
    margin-left: 8px;
}

.fb-btn[aria-expanded="true"] .fb-chev {
    transform: rotate(180deg);
}

/* anchored dropdown */
.sort-wrap {
    position: relative;
    height: 100%;
}

.sortmenu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 200px;
    max-width: 200px;
    /* requested width cap */
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    padding: 6px 0;
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 20;
}

.sort-wrap.open .sortmenu {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.sortmenu__item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 10px 14px;
    cursor: pointer;
    font: 400 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1a1a1a;
}

.sortmenu__item:hover {
    background: var(--hover);
}

.sortmenu__item.is-active {
    font-weight: 600;
}

/* small screens */
@media (max-width:640px) {
    .filterbar__inner {
        height: 52px;
        padding-inline: 16px;
    }

    .fb-btn {
        font-size: 11px;
        letter-spacing: .15em;
    }

    .fb-ico {
        width: 16px;
        height: 16px;
    }

    .fb-chev {
        width: 14px;
        height: 14px;
    }
}

.fb-btn--filter {
    border-right: 2px solid var(--line);
}

.fb-btn--sort {
    border-left: 2px solid var(--line);
}

:root {
    --fdw: 360px;
    --fdw-sm: 92vw;
    --line: #e5e7eb;
    --ink: #111;
    --muted: #6b7280;
    --overlay: rgba(0, 0, 0, .55);
    --brand: #111;
    /* slider active + thumbs */
    --rail: #eef2f7;
    /* slider rail */
    --rail-edge: #d8dee9;
    /* subtle border for rail */
}

.no-scroll {
    overflow: hidden;
}

/* Trigger */
.filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 0;
    color: #111;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
}

/* Overlay */
.filter-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s step-end;
    z-index: 1200;
}

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

/* Drawer */
.filter-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--fdw);
    max-width: 100%;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.2, .6, .2, 1);
    z-index: 1201;
    pointer-events: none;
}

.filter-drawer[aria-hidden="false"] {
    pointer-events: auto;
}

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

@media (max-width:640px) {
    .filter-drawer {
        width: var(--fdw-sm);
    }
}

.filter-drawer__panel {
    position: absolute;
    inset: 0;
    background: #fff;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

.filter-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.filter-drawer__head h3 {
    margin: 0;
    font-size: 14px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
}

.filter-close {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #111;
    padding: 6px;
    font-size: 18px;
}

.filter-drawer__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 10px 18px 18px;
}

.filter-drawer__foot {
    border-top: 1px solid var(--line);
    padding: 14px 18px;
    background: #fff;
}

.filter-apply {
    width: 100%;
    background: #111;
    color: #fff;
    border: 0;
    height: 44px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}

/* Accordions */
.f-acc {
    border-bottom: 1px solid var(--line);
    padding-block: 12px;
}

.f-acc:last-child {
    border-bottom: 0;
}

.f-acc__head {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 6px 0;
    font-weight: 600;
    color: #111;
}

.f-acc__head::-webkit-details-marker {
    display: none;
}

.f-acc__icon {
    transition: transform .2s ease;
    font-size: 14px;
}

.f-acc[open] .f-acc__icon {
    transform: rotate(180deg);
}

.f-acc__panel {
    padding: 10px 0 14px 0;
}

/* Checklists */
.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.checklist label {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #111;
}

.checklist input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* ========== Price slider (prettier) ========== */
.price {
    display: grid;
    gap: 14px;
}

.price__slider {
    position: relative;
    height: 28px;
}

.price__rail {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(#fff, #fff) padding-box,
        /* to allow border gradient */
        linear-gradient(180deg, var(--rail-edge), transparent) border-box;
    border: 1px solid transparent;
    /* shows the gradient 1px edge */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .04);
}

.price__fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #222, #111);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(255, 255, 255, .25);
}

/* Ranges (stacked on top) */
.price__slider input[type="range"] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: auto;
}

/* Hide native track (we have our own rail) */
.price__slider input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
}

.price__slider input[type="range"]::-moz-range-track {
    background: transparent;
}

/* Thumbs */
.price__slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.price__slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* Focus ring */
.price__slider input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 3px solid rgba(17, 17, 17, .35);
    outline-offset: 2px;
}

.price__slider input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 3px solid rgba(17, 17, 17, .35);
}

/* Inputs */
.price__inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price__input {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    min-width: 120px;
    background: #fff;
}

.price__input .pre {
    color: #6b7280;
}

.price__input input {
    width: 80px;
    border: 0;
    outline: 0;
    font: inherit;
    color: #111;
}

.dash {
    color: #6b7280;
}

.filter-drawer__body::-webkit-scrollbar {
    width: 10px;
}

.filter-drawer__body::-webkit-scrollbar-thumb {
    background: #eee;
    border-radius: 999px;
}



/* Product Details */
:root {
    --ink: #18181b;
    --muted: #6b7280;
    --line: #e5e7eb;
    --brand: #111111;
    --bg: #ffffff;
    --accent: #111111;
    --green: #059669;
}

/* ====== GRID ====== */
.pdp {
    display: grid;
    grid-template-columns: 1.2fr .9fr;
    gap: 36px;
    align-items: start;
}

@media (max-width: 980px) {
    .pdp {
        grid-template-columns: 1fr;
        gap: 24px
    }
}

/* ====== GALLERY ====== */
section.main-gallery {
    width: 100%;
    position: relative;
    padding: 40px 0;
}

.gallery {
    background: #fafafa;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.gallery__stage {
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.gallery__stage img {
    max-height: 100%;
    object-fit: contain;
}

.thumbs {
    display: grid;
    grid-template-columns: repeat(5, 96px);
    gap: 12px;
    margin-top: 14px;
    overflow: auto hidden;
    padding-bottom: 4px;
}

.thumb {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 4px;
    padding: 6px;
    height: 115px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.thumb.is-active {
    border-color: #111;
    box-shadow: 0 0 0 1px #111 inset;
}

.thumb img {
    width: 100px;
    max-height: 100px;
    object-fit: cover;
}

@media (max-width:560px) {
    .thumbs {
        grid-auto-flow: column;
        grid-template-columns: repeat(5, 84px)
    }

    .thumb {
        height: 84px
    }

    .thumb img {
        max-height: 70px
    }
}

/* ====== RIGHT COLUMN ====== */
.title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: 26px;
    letter-spacing: .01em;
    margin: 0 0 8px
}

.rating {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px
}

.price {
    font-weight: 500;
    margin: 14px 0 10px 0;
    font-weight: 600;
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.label {
    color: #000;
    font-size: 16px;
    margin: 18px 0 6px 0
}

/* Swatches */
.swatches {
    display: flex;
    gap: 8px;
    margin-bottom: 12px
}

.swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line);
    cursor: pointer;
    position: relative;
    display: inline-grid;
    place-items: center;
    background: var(--c, #ddd);
}

.swatch.is-active {
    box-shadow: 0 0 0 2px #111 inset
}

.swatch[data-name]:after {
    content: attr(data-name);
    position: absolute;
    left: 50%;
    top: -28px;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: .15s;
}

.swatch:hover:after {
    opacity: 1
}

/* Qty + CTA */
.buyrow {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    margin: 8px 0 16px
}

select.qty {
    border: 1px solid var(--line);
    height: 36px;
    border-radius: 4px;
    padding: 0 8px;
    background: #fff;
    font: inherit
}

.btn {
    display: inline-grid;
    place-items: center;
    height: 36px;
    border-radius: 4px;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 12px;
}

.btn--black {
    background: #111;
    color: #fff
}

.btn--black:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px
}

/* Bullets (shipping etc.) */
.bullets {
    list-style: none;
    margin: 14px 0 18px 0;
    padding: 0;
    display: grid;
    gap: 8px
}

.bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px
}

.bullets i {
    color: #6b7280
}

/* Accordion */
.acc {
    border-top: 1px solid var(--line)
}

.acc:first-of-type {
    margin-top: 10px
}

.acc__head {
    width: 100%;
    background: #fff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    cursor: pointer;
    font-weight: 600
}

.acc__head i {
    transition: transform .18s ease;
    color: #6b7280
}

.acc.is-open .acc__head i {
    transform: rotate(180deg)
}

.acc__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .26s ease
}

.acc__panel-inner {
    padding: 0 0 14px 0;
    color: #444
}

.meta {
    color: var(--muted);
    font-size: 12px;
    margin-top: 8px
}

.divider {
    height: 1px;
    background: var(--line);
    margin: 14px 0
}

/* Store contacts */
.stores {
    margin-top: 6px;
    color: #333;
    font-size: 16px
}

.stores p {
    margin: .25rem 0
}

/* ===== PDP Tabs ===== */
.pdp-tabs {
    margin-top: 10px;
}

.pdp-tablist {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--line);
}

.pdp-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 0;
    margin: 0 14px 0 0;
    font: 600 14px/1 var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6b7280;
    cursor: pointer;
    position: relative;
}

.pdp-tab.is-active {
    color: #111;
}

.pdp-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #111;
}

.pdp-tab:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.pdp-panels {
    padding-top: 12px;
}

.pdp-panel {
    animation: pdpTabOut .18s ease forwards;
    color: #444;
}

.pdp-panel.is-active {
    animation: pdpTabIn .2s ease forwards;
}

.pdp-panel[hidden] {
    display: none;
}

@keyframes pdpTabIn {
    from {
        opacity: .0;
        transform: translateY(6px);
    }

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

@keyframes pdpTabOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: .0;
        transform: translateY(6px);
    }
}

/* =========================
   Product details: Reviews
   ========================= */
/* ====== Layout ====== */
.rvx {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: #111;
    max-width: 1120px;
    margin: 24px auto
}

.rvx * {
    box-sizing: border-box
}

.rvx-head h3 {
    font-size: 18px;
    margin: 0 0 12px
}

.rvx-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: flex-start;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 16px
}

.rvx-score-num {
    display: flex;
    align-items: baseline;
    gap: 8px
}

.rvx-avg {
    font-size: 48px;
    font-weight: 800
}

.rvx-outof {
    color: #666
}

.rvx-stars i {
    color: #000
}

.rvx-count {
    color: #666;
    font-size: 12px;
    margin-top: 6px
}

.rvx-bars {
    max-width: 420px;
    margin-left: auto
}

.rvx-bar-row {
    display: grid;
    grid-template-columns: 28px 1fr 40px;
    gap: 8px;
    align-items: center;
    margin: 6px 0
}

.rvx-bar {
    height: 6px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden
}

.rvx-bar>div {
    height: 100%;
    background: #000
}

.rvx-write {
    background: #111;
    color: #fff;
    border: 0;
    border-radius: 3px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    width: max-content;
    margin-right: 0;
    margin-left: auto;
}

.rvx-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 0
}

.rvx-search {
    display: flex;
    align-items: center;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 0 10px
}

.rvx-search input {
    border: 0;
    outline: 0;
    padding: 10px 6px;
    background: transparent
}

.rvx-filters select {
    padding: 10px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #fff
}

.rvx-media {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #444
}

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

.rvx-item {
    border-top: 1px solid #e8e8e8;
    padding: 16px 0
}

.rvx-line {
    display: flex;
    align-items: center;
    gap: 10px
}

.rvx-stars-sm i {
    color: #000
}

.rvx-name {
    font-weight: 700
}

.rvx-verified {
    font-size: 12px;
    color: #666
}

.rvx-time {
    margin-left: auto;
    color: #666;
    font-size: 12px
}

.rvx-title {
    margin: 6px 0 2px;
    font-weight: 700
}

.rvx-text {
    color: #222
}

/* ====== Modal ====== */
.rvx-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000
}

.rvx-modal[aria-hidden="false"] {
    display: flex
}

.rvx-panel {
    background: #fff;
    width: min(560px, 95vw);
    max-height: 92vh;
    border-radius: 8px;
    overflow: auto;
    padding: 20px 20px 24px;
    position: relative
}

.rvx-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 0;
    background: transparent;
    font-size: 22px;
    cursor: pointer
}

.rvx-form-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px
}

.rvx-thumb {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e8e8e8
}

.rvx-form {
    display: block
}

.rvx-rate {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin: 8px 0 14px;
    font-size: 30px
}

.rvx-rate button {
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    opacity: .6
}

.rvx-rate button.is-active,
.rvx-rate button:hover {
    opacity: 1
}

.rvx-field {
    display: block;
    margin: 10px 0
}

.rvx-field span {
    display: block;
    margin-bottom: 6px;
    font-weight: 600
}

.rvx-field input,
.rvx-field textarea {
    width: 100%;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 12px 10px;
    font: inherit
}

.rvx-upload {
    margin: 8px 0
}

.rvx-file-btn {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    background: #fafafa
}

.rvx-file-btn input {
    display: none
}

.rvx-previews {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px
}

.rvx-previews img {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e8e8e8
}

.rvx-submit {
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 6px;
    background: #111;
    color: #fff;
    font-weight: 800;
    cursor: pointer
}

@media (max-width:820px) {
    .rvx-summary {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .rvx-bars {
        max-width: none;
        margin: 0
    }
}

/* === Compact rating bars (for your existing markup) === */

.rvx-bars {
    max-width: 360px;
    width: 100%;
    /* makes it slim like your ref; adjust if needed */
}

.rvx-bars .rvx-bar-row {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    /* "5★" | progress | "75%" */
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 12px;
    color: #6a6a6a;
    /* light grey like in the ref */
}

.rvx-bars .rvx-bar-row>span {
    white-space: nowrap;
    /* keep "5★" on one line */
}

.rvx-bars .rvx-bar-row em {
    font-style: normal;
    text-align: right;
    color: #8b8b8b;
}

/* the thin grey track */
.rvx-bars .rvx-bar {
    height: 6px;
    background: #e5e5e5;
    border-radius: 999px;
    overflow: hidden;
}

/* the filled part (you already set width:... inline) */
.rvx-bars .rvx-bar>div {
    height: 100%;
    background: #000;
    /* dark fill like the ref */
    border-radius: inherit;
    transition: width .35s ease;
    /* smooth if you ever change it dynamically */
}

/* optional: slightly dim the star in "5★" text */
.rvx-bars .rvx-bar-row span {
    color: #777;
}
/* outer flex (column) */
.rvx-images{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* inner flex rows */
.rvx-images-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* thumbnail box 100x100 */
.rvx-thumb{
  width:100px;
  height:100px;
  display:block;
  border-radius:6px;
  overflow:hidden;
  border:1px solid #e6e6e6;
  background:#f7f7f7;
}

/* make the image fully cover */
.rvx-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* =========================
   PDP buy row: pixel-tight
   ========================= */

/* Layout: 120px qty + full-width CTA, slightly larger gap */
.buyrow {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    align-items: center;
    margin: 16px 0 18px;
}

/* Button: height, weight, tracking like the reference */
.btn {
    height: 44px;
    border-radius: 4px;
    border: 0;
    display: inline-grid;
    place-items: center;
    font-weight: 600;
    letter-spacing: .16em;
    /* tight uppercase tracking */
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.btn--black {
    background: #151515;
    /* slightly softer than pure black */
    color: #fff;
    transition: background .15s ease, transform .12s ease;
}

.btn--black:hover {
    background: #000;
}

.btn--black:active {
    transform: translateY(1px);
}

.btn--black:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Native select made to look like the reference (and as a fallback if Nice Select isn't loaded) */
select.qty {
    -webkit-appearance: none;
    appearance: none;
    height: 44px;
    border-radius: 4px;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 0 36px 0 12px;
    font: 500 14px/44px inherit;
    color: #111;
    position: relative;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23111111' d='M5 6 0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

select.qty:hover {
    border-color: #bfbfbf;
}

select.qty:focus {
    border-color: #111;
    box-shadow: 0 0 0 1px #111 inset;
}

/* If Nice Select is present, make it match the reference precisely */
.nice-select {
    width: 100%;
    height: 44px;
    border-radius: 4px !important;
    border: 1px solid #d6d6d6 !important;
    padding: 0 36px 0 12px !important;
    line-height: 44px !important;
    background: #fff !important;
    color: #111 !important;
    font: 500 14px/44px var(--font-sans, inherit) !important;
}

.nice-select.open,
.nice-select:focus {
    border-color: #111 !important;
    box-shadow: 0 0 0 1px #111 inset;
}

.nice-select .list {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    margin-top: 6px;
}

.nice-select .option {
    line-height: 38px;
    min-height: 38px;
    padding: 0 12px;
    font-size: 14px;
}

.nice-select .option.selected {
    font-weight: 600;
}

.nice-select:after {
    right: 12px !important;
    /* caret position */
    border-color: #111 #111 #111 #111 !important;
}

/* =========================
   Bullets: spacing & tone
   ========================= */
.bullets {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    /* match reference size */
    color: #111;
}

.bullets i {
    width: 20px;
    text-align: center;
    color: #b3b3b3;
    /* soft grey icon tone */
    font-size: 16px;
}

.nice-select.open .list {
    width: 100%;
}

/* ===== Instagram section ===== */
.insta {
    padding-block: clamp(28px, 5vw, 56px);
    border-top: 1px solid var(--line);
    position: relative;
}

.insta__title {
    margin: 0 0 clamp(16px, 2.6vw, 28px);
    font-family: var(--font-serif, "Cormorant Garamond", serif);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink, #111);
    font-size: clamp(20px, 2.6vw, 32px);
}

.insta__title .insta__handle {
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, opacity .2s ease;
}

.insta__title .insta__handle:hover {
    border-color: currentColor;
    opacity: .85;
}

/* Grid: 4 on desktop, gently step down */
.insta__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
}

@media (max-width: 1100px) {
    .insta__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .insta__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-nav {
        display: none;
    }

    .rev-nav {
        display: none;
    }
}

@media (max-width: 460px) {
    .insta__grid {
        grid-template-columns: 1fr;
    }
}

/* Square tiles with subtle hover */
.insta__item {
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 2px;
    background: #f7f7f7;
}

.insta__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .6s cubic-bezier(.2, .6, .2, 1), filter .3s ease;
    display: block;
}

.insta__item:hover img {
    transform: scale(1.06);
}

/* small “Sauce.” mark bottom-right inside the container */
.insta__powered {
    position: absolute;
    right: clamp(16px, 3vw, 32px);
    bottom: clamp(8px, 1.6vw, 16px);
    color: #9ca3af;
    font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif);
    font-size: 14px;
    opacity: .85;
    pointer-events: none;
    user-select: none;
}

/* ========= Accordion (store policy) ========= */
.ac-list {
    border-top: 1px solid var(--line, #e5e7eb);
}

.ac {
    border-bottom: 1px solid var(--line, #e5e7eb);
}

.ac__h {
    margin: 0;
}

.ac__head {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: #fff;
    border: 0;
    padding: 18px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.ac__title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: clamp(18px, 1.35vw, 22px);
    color: var(--ink, #111);
    text-align: left;
}

/* + / − icon (drawn with two hairlines) */
.ac__icon {
    position: relative;
    width: 16px;
    height: 16px;
    opacity: .8;
}

.ac__icon::before,
.ac__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
}

.ac__icon::after {
    /* vertical bar of the plus */
    width: 1px;
    height: 16px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.ac__head[aria-expanded="true"] .ac__icon::after {
    /* when open: hide the vertical bar to show a minus */
    opacity: 0;
}

.ac__head:hover .ac__title {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Panel */
.ac__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height .26s ease;
}

.ac__panel[hidden] {
    display: block;
    /* keep height animation */
    visibility: hidden;
    /* and still keep layout */
}

.ac__panel.is-open {
    visibility: visible;
}

.ac__inner {
    padding: 8px 0 18px 0;
    color: #333;
    font-size: 15px;
    line-height: 1.7;
}

/* Small screens: a touch more padding */
@media (max-width: 640px) {
    .ac__head {
        padding: 16px 0;
    }

    .ac__inner {
        padding: 6px 0 16px 0;
    }
}

/* ===== Accordion inner: shipping copy (matches screenshot) ===== */
.ac__inner .shipcopy {
    display: grid;
    gap: 10px;
    color: #6b7280;
    /* soft grey text */
    font-size: 14px;
    /* compact copy size */
    line-height: 1.7;
}

.shipcopy p {
    margin: 0;
    /* tight paragraphs */
}

.shipcopy__sec {
    margin-top: 14px;
    /* space between blocks */
}

.shipcopy h4 {
    margin: 8px 0 2px 0;
    font: 600 15px/1.4 "Inter", "Helvetica Neue", Arial, sans-serif;
    /* small bold heading */
    color: #1a1a1a;
    letter-spacing: .01em;
}

.shipcopy h4 span {
    font-weight: 500;
    color: #6b7280;
}

.shipcopy__sub {
    /* “Budbee hemleverans (49 kr)” line */
    font-style: italic;
    color: #6b7280;
    margin-top: 2px;
}

@media (max-width: 640px) {
    .ac__inner .shipcopy {
        font-size: 13.5px;
    }

    .shipcopy h4 {
        font-size: 14.5px;
    }
}

/* === Tabs header (centered, uppercase, thin underline on active) === */
.recs {
    padding-block: clamp(20px, 4vw, 44px);
}

.recs-tablist {
    position: relative;
    display: flex;
    justify-content: center;
    gap: clamp(18px, 4vw, 60px);
    margin-bottom: 26px;
}

.recs-tablist::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 1px;
    background: #ececec;
    /* subtle baseline under tabs */
}

.recs-tab {
    padding: 0 6px 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .16em;
    font: 400 16px / 1 var(--font-sans, "Inter", system-ui, -apple-system);
    color: #6b7280;
    position: relative;
}

.recs-tab.is-active {
    color: #111;
}

.recs-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -11px;
    height: 1px;
    background: #111;
    /* active underline */
}

/* === Panels === */
.recs-panel[hidden] {
    display: none;
}

.recs-panel {
    animation: recsFade .18s ease;
}

@keyframes recsFade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

/* === Grid (you can keep your existing product-card styles) === */
.prod-grid {
    --gap: clamp(14px, 2.6vw, 24px);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 600px) {
    .prod-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

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

/* Optional: keep product cards full height in grid cells */
.prod-grid>* {
    height: 100%;
}

/* Screen-reader only helper (if not already present) */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Left/ right content */
/* ===== Feature stories (image + centered text) ===== */
.story {
    /* padding-block: clamp(24px, 6vw, 64px); */
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* image a touch wider */
    gap: clamp(20px, 4vw, 40px);
    align-items: center;
    margin-block: clamp(16px, 6vw, 48px);
}

.story-grid--reverse .story__media {
    order: 2;
}

.story-grid--reverse .story__content {
    order: 1;
}

.story__media {
    border-radius: 4px;
    overflow: hidden;
    background: #f7f7f7;
}

.story__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: 8 / 3;
    /* same feel as the ref */
    object-fit: cover;
    transform: scale(1.002);
    transition: transform .6s cubic-bezier(.2, .6, .2, 1), filter .3s ease;
}

.story-grid:hover .story__media img {
    transform: scale(1.03);
}

.story__content {
    text-align: center;
    padding-inline: clamp(6px, 2vw, 20px);
}

.story__title {
    margin: 0 0 12px;
    font-family: var(--font-serif, "Cormorant Garamond", serif);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: clamp(22px, 2.6vw, 30px);
    color: #0f0f0f;
}

.story__copy {
    margin: 0 auto 12px;
    /* max-width: 56ch; */
    color: #1a1a1a;
    line-height: 1.7;
    font-size: 15px;
}

.story__link {
    display: inline-block;
    font: 600 12px/1 var(--font-sans, "Inter", Arial, sans-serif);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 4px 1px;
    transition: opacity .2s ease;
}

.story__link:hover {
    opacity: .75;
}

/* Responsive */
@media (max-width: 980px) {
    .story-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .story-grid--reverse .story__media {
        order: 1;
    }

    /* image first on mobile */
    .story-grid--reverse .story__content {
        order: 2;
    }

    .story__media img {
        aspect-ratio: 4 / 3;
    }

    /* a bit taller on mobile */
}

/* Checkout page */
/* ===== CHECKOUT — Pixel-tight (Inter, soft borders, subtle shadows) ===== */
.checkout {
    /* tokens */
    --checkout-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --checkout-ink: #1f2328;
    /* main text */
    --checkout-muted: #6a737d;
    /* secondary text */
    --checkout-line: #e4e6ea;
    /* soft input/edge line */
    --checkout-outline: #0f1419;
    /* strong focus */
    --checkout-bg: #ffffff;
    /* page bg */
    --checkout-rail: #f6f7f8;
    /* right column bg (rarely used) */
    --checkout-card: #ffffff;
    /* card bg */
    --checkout-black: #111;
    /* primary btn */
    --checkout-radius: 10px;
    /* rounded cards/inputs */
    --checkout-s: 12px;
    /* captions/labels */
    --checkout-m: 14px;
    /* base text */
    --checkout-l: 16px;
    /* section titles */
    --checkout-space: 20px;
    /* vertical rhythm */
    --checkout-gutter: 28px;
    /* grid gap */
    --checkout-stickyTop: 115px;
    /* sticky pivot to clear header */
    --checkout-shadow: 0 1px 0 rgba(15, 20, 25, .04), 0 1px 8px rgba(15, 20, 25, .04);
}

.checkout {
    font: 400 var(--checkout-m)/1.5 var(--checkout-font);
    color: var(--checkout-ink);
    background: var(--checkout-bg);
}

/* ---------------- Layout (Grid with areas; mobile puts RIGHT first) ---------------- */
.checkout__grid {
    max-width: 1120px;
    margin: 0 auto 48px;
    padding: 0 16px;

    display: grid;
    grid-template-columns: minmax(560px, 1fr) 420px;
    gap: var(--checkout-gutter);
    align-items: start;

    grid-template-areas:
        "left right";
}

.checkout__left {
    grid-area: left;
    background: var(--checkout-bg);
}

.checkout__right {
    grid-area: right;
    position: sticky;
    top: var(--checkout-stickyTop);
}

/* Mobile: stack & show RIGHT above LEFT (visual order only) */
@media (max-width: 980px) {
    .checkout__grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "right"
            "left";
    }

    .checkout__right {
        position: static;
    }

    /* disable sticky on mobile */
}

/* ---------------- Logo ---------------- */
.co-logo {
    width: 100%;
    max-height: 60px;
    margin-top: 20px;
    text-align: center;
}

.co-logo img {
    max-height: 60px;
    width: 100%;
    object-fit: contain;
}

/* ---------------- Breadcrumbs ---------------- */
.checkout__crumbs {
    max-width: 1120px;
    margin: 22px auto 8px;
    padding: 0 16px;
    color: var(--checkout-muted);
    font-size: var(--checkout-s);
    text-align: center;
    position: relative;
}

.checkout__crumbs .sep {
    margin: 0 6px;
    color: var(--checkout-muted);
}

.checkout__crumbs .is-current {
    color: var(--checkout-ink);
    font-weight: 600;
}

/* ---------------- Cards (soft edge + subtle shadow) ---------------- */
.co-card {
    background: var(--checkout-card);
    border: 1px solid rgba(0, 0, 0, 0.06);
    /* lighter than inputs to match ref */
    border-radius: var(--checkout-radius);
    box-shadow: var(--checkout-shadow);
    padding: 16px;
    margin-bottom: var(--checkout-space);
}

/* ---------------- Section heading ---------------- */
.co-h2 {
    font-size: var(--checkout-l);
    font-weight: 600;
    margin: 4px 0 12px;
}

/* ---------------- Fields ---------------- */
.co-field {
    margin-bottom: 14px;
}

.co-label {
    display: block;
    font-size: var(--checkout-s);
    color: var(--checkout-muted);
    margin-bottom: 6px;
}

.co-input,
.co-select,
.co-discount__input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--checkout-line);
    border-radius: var(--checkout-radius);
    background: #fff;
    padding: 10px 12px;
    font: inherit;
    color: var(--checkout-ink);
}

.co-input::placeholder {
    color: #9aa2a9;
}

.co-input:focus,
.co-select:focus,
.co-discount__input:focus {
    outline: 2px solid var(--checkout-outline);
    outline-offset: 0;
    border-color: var(--checkout-outline);
    box-shadow: 0 0 0 2px rgba(17, 17, 17, .08);
}

/* Two-column rows for name etc. */
.co-row {
    display: grid;
    gap: 12px;
}

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

@media (max-width: 560px) {
    .co-row--2 {
        grid-template-columns: 1fr;
    }
}

/* ---------------- Nice Select (scoped polish) ---------------- */
.checkout .nice-select {
    float: none !important;
    width: 100%;
    height: 44px;
    line-height: 42px;
    border: 1px solid var(--checkout-line);
    border-radius: var(--checkout-radius);
    padding: 0 12px;
    font-size: var(--checkout-m);
    color: var(--checkout-ink);
    background: #fff;
}

.checkout .nice-select:focus,
.checkout .nice-select.open {
    border-color: var(--checkout-outline);
    box-shadow: 0 0 0 2px rgba(17, 17, 17, .08);
    outline: 2px solid var(--checkout-outline);
    outline-offset: 0;
}

.checkout .nice-select .list {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    border: 1px solid var(--checkout-line);
}

.checkout .nice-select .option.focus,
.checkout .nice-select .option.selected.focus {
    background: #f2f4f7;
}

/* ---------------- Checkbox ---------------- */
.co-check {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 10px;
    font-size: var(--checkout-m);
    color: var(--checkout-ink);
    margin: 8px 0 2px;
}

.co-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--checkout-outline);
}

/* ---------------- Actions ---------------- */
.co-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.co-back {
    font-size: var(--checkout-m);
    color: var(--checkout-ink);
    text-decoration: none;
}

.co-back:hover {
    text-decoration: underline;
}

.co-btn {
    min-width: 220px;
    height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--checkout-radius);
    background: var(--checkout-black);
    color: #fff;
    font-weight: 600;
    font-size: var(--checkout-m);
    letter-spacing: .02em;
    cursor: pointer;
}

.co-btn:active {
    transform: translateY(1px);
}

/* ---------------- Fastpay (GPay) ---------------- */
.co-fastpay {
    text-align: center;
}

.co-gpay {
    width: 100%;
    height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--checkout-radius);
    background: #000;
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: var(--checkout-shadow);
}

.co-gpay .g {
    font-weight: 800;
    margin-right: 6px;
}

/* OR divider */
.co-or {
    margin: 16px auto 4px;
    color: var(--checkout-muted);
    font-size: var(--checkout-s);
    position: relative;
    text-align: center;
}

.co-or:before,
.co-or:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 45%;
    border-bottom: 1px solid var(--checkout-line);
}

.co-or:before {
    left: 0;
}

.co-or:after {
    right: 0;
}

.co-or span {
    background: #fff;
    padding: 0 10px;
    position: relative;
}

/* ---------------- Right: Items summary ---------------- */
.co-items {
    padding: 12px;
}

.co-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center;
}

.co-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 1px solid var(--checkout-line);
    background: #fff;
}

.co-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.co-qty {
    position: absolute;
    right: -5px;
    top: -6px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    text-align: center;
    background: #000;
    color: #fff;
    border-radius: 12px;
    border: 2px solid #fff;
}

.co-item__title {
    margin: 0 0 2px;
    font-weight: 600;
}

.co-item__sub {
    margin: 0;
    font-size: var(--checkout-s);
    color: var(--checkout-muted);
}

.co-price {
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ===== Modal (co-) ===== */
.co-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.co-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.co-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 25, .45);
    backdrop-filter: blur(3px);
}

/* Dialog */
.co-modal__dialog {
    position: relative;
    width: min(520px, 92vw);
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 12px 40px rgba(15, 20, 25, .18),
        0 4px 16px rgba(15, 20, 25, .12);
    padding: 28px 22px 22px;
    transform: translateY(8px) scale(.98);
    animation: coPop .35s cubic-bezier(.2, .7, .25, 1) forwards;
}

@keyframes coPop {
    to {
        transform: translateY(0) scale(1);
    }
}

/* Close X */
.co-modal__x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #1f2328;
}

.co-modal__x:hover {
    background: #f3f4f6;
}

/* Icon badge */
.co-modal__icon {
    width: 78px;
    height: 78px;
    margin: 8px auto 10px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    color: #fff;
    position: relative;
    background: linear-gradient(135deg, #111 0%, #3b3b3b 48%, #111 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 18px rgba(0, 0, 0, .18);
}

.co-modal__icon i {
    font-size: 34px;
}

/* subtle sparkle */
.co-modal__spark {
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: conic-gradient(from 180deg at 50% 50%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .35));
    filter: blur(18px);
    opacity: .22;
    pointer-events: none;
}

/* Texts */
.co-modal__title {
    margin: 6px 0 6px;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .01em;
    color: #111;
}

.co-modal__text {
    margin: 0 10px 18px;
    text-align: center;
    font-size: 14px;
    color: #4b5563;
}

/* OK button */
.co-modal__ok {
    display: block;
    margin: 0 auto 4px;
    height: 44px;
    min-width: 180px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #111;
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.co-modal__ok:active {
    transform: translateY(1px);
}

/* Prevent page scroll while open */
body.co-modal-lock {
    overflow: hidden;
}

/* ---------------- Discount ---------------- */
.co-discount {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.co-discount__btn {
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--checkout-line);
    background: #eff1f3;
    color: var(--checkout-ink);
    border-radius: var(--checkout-radius);
    font-weight: 600;
    cursor: pointer;
}

/* ---------------- Totals ---------------- */
.co-rowline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--checkout-line);
    font-size: var(--checkout-m);
}

.co-rowline:last-of-type {
    border-bottom: 0;
}

.co-badge {
    background: #eef0f2;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--checkout-s);
}

.co-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 12px;
    font-size: var(--checkout-l);
}

.co-amount {
    font-weight: 700;
    letter-spacing: .01em;
}

.co-vat {
    color: var(--checkout-muted);
    font-size: var(--checkout-s);
    margin-top: 6px;
}

/* ---------------- Upsell ---------------- */
.co-upsell__h {
    font-size: var(--checkout-m);
    font-weight: 700;
    margin: 0 0 10px 2px;
    text-transform: uppercase;
    color: var(--checkout-muted);
    letter-spacing: .06em;
}

.co-upsell {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    margin-bottom: 12px;
}

.co-u__thumb {
    width: 64px;
    height: 64px;
    border: 1px solid var(--checkout-line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.co-u__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.co-u__title {
    margin: 0 0 2px;
    font-weight: 600;
}

.co-u__price {
    margin: 0;
    color: var(--checkout-muted);
    font-size: var(--checkout-s);
}

.co-u__btn {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--checkout-line);
    border-radius: var(--checkout-radius);
    background: #eff1f3;
    font-weight: 600;
    cursor: pointer;
}

.co-note {
    color: var(--checkout-muted);
    font-size: var(--checkout-s);
    margin-top: 6px;
}

/* ---------------- Mobile summary toggle ---------------- */
.co-mobileSummary {
    display: none;
}

@media (max-width: 980px) {
    .co-mobileSummary {
        display: block;
    }

    .co-mobileSummary__btn {
        width: 100%;
        height: 44px;
        border-radius: var(--checkout-radius);
        border: 1px solid var(--checkout-line);
        background: #f0f2f4;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .co-mobileSummary__btn i {
        transition: transform .2s ease;
    }

    .co-mobileSummary__btn[aria-expanded="true"] i {
        transform: rotate(180deg);
    }
}

/* Contact Page */
.contact {
    --contact-ink: #1f2328;
    --contact-muted: #6b7280;
    --contact-line: #d7d7d7;
    --contact-line-strong: #222;
    --contact-accent: #111;
}

.contact {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 16px 56px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--contact-ink);
    line-height: 1.5;
    font-size: 16px;
    /* base = 16px */
}

.contact__title {
    font-size: 43px;
    /* per spec */
    font-weight: 500;
    text-align: center;
    margin: 0 0 22px;
    letter-spacing: .01em;
}

.contact__form {
    display: grid;
    gap: 24px;
}

/* underline-only fields */
.contact__input,
.contact__textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--contact-line);
    padding: 14px 0 10px;
    background: transparent;
    font: inherit;
    color: var(--contact-ink);
    outline: none;
}

.contact__input::placeholder,
.contact__textarea::placeholder {
    color: var(--contact-muted);
    opacity: 1;
}

.contact__input:focus,
.contact__textarea:focus {
    border-bottom-color: var(--contact-line-strong);
}

/* button */
.contact__btn {
    height: 44px;
    border: 0;
    background: var(--contact-accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 2px;
    cursor: pointer;
}

.contact__btn:active {
    transform: translateY(1px);
}

/* a11y: keep labels for screen readers only */
.contact__sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* small screens: keep spacing comfy */
@media (max-width: 420px) {
    .contact__title {
        font-size: 36px;
    }
}

/* ========== Contact Help (pixel-tight) ========== */
.contact-help {
    --ink: #1f2328;
    --muted: #6b7280;
    --underline: currentColor;

    max-width: 920px;
    margin: 28px auto 80px;
    padding: 0 16px;
    text-align: center;
    color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 16px;
    /* body size per spec */
    line-height: 1.6;
}

.contact-help__title {
    margin: 0 0 14px;
    font-size: 14px;
    /* small all-caps heading like the ref */
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    font-family: var(--font-sans);
}

.contact-help__line {
    margin: 4px 0;
}

.contact-help__link {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.contact-help__link:hover {
    border-color: var(--underline);
}

/* Custom underline for the email, matching screenshot */
.contact-help__mail {
    color: var(--ink);
    text-decoration: none;
    /* remove default */
    position: relative;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--underline);
}

.contact-help__mail:hover {
    border-bottom-width: 2px;
}

/* Small screens keep everything centered and readable */
@media (max-width: 420px) {
    .contact-help {
        font-size: 15px;
    }

    .contact-help__title {
        font-size: 13px;
        letter-spacing: .11em;
    }
}

/* About Section */
.innerpage-banner {
    position: relative;
    width: 100%;
    height: calc(100vh - 126px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.innerpage-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ===== Split Edge (full-bleed, image to edge, no Y padding) ===== */
.split-edge {
    --ink: #1f2328;
    --muted: #6b7280;
    --title: #111;
    --col-gap: clamp(24px, 5vw, 64px);

    display: grid;
    grid-template-columns: 1fr 1fr;
    /* pure split, no container */
    align-items: center;
    /* gap: var(--col-gap); */
    margin: 0;
    /* no vertical padding/margins */
    min-height: 560px;
    /* tweak if you want taller/shorter panel */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--ink);
}

/* Text column */
.split-edge__text {
    display: grid;
    justify-items: center;
    /* center like your screenshot */
    text-align: center;
    padding-inline: clamp(16px, 6vw, 80px);
}

.split-edge__title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    letter-spacing: .02em;
    font-size: clamp(28px, 3.2vw, 40px);
    color: var(--title);
    margin: 0 0 10px;
}

.split-edge__copy {
    max-width: 560px;
    line-height: 1.6;
    font-size: 14px;
    color: var(--ink);
}

/* Image column — flush to viewport edge */
.split-edge__media {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /* prevent any default spacing */
}

.split-edge__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fills the half with cropping */
    object-position: center;
    /* “flush to edge”: the section itself is full-width, so the image sits on the edge naturally */
}

/* Direction modifiers */
.split-edge--img-right {
    grid-template-columns: 1fr 1fr;
}

/* text | image (default order in HTML) */
.split-edge--img-left {
    grid-template-columns: 1fr 1fr;
}

/* image | text (mirrored in HTML) */

/* Tablet / Mobile: stack (image first for left variant keeps edge feel) */
@media (max-width: 880px) {
    .split-edge {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .split-edge--img-right .split-edge__media {
        order: 2;
        /* text first, then image */
    }

    .split-edge--img-left .split-edge__media {
        order: 1;
        /* image first, then text */
    }

    .split-edge__media {
        height: clamp(260px, 48vw, 420px);
        /* maintain a nice window on mobile */
    }

    .split-edge__text {
        padding-block: 24px;
        /* slight breathing after the image */
    }
}