:root {
    --primary: rgb(0, 161, 190);
    --primary-hover: rgb(0, 131, 160);
    --secondary: rgb(211, 161, 84);
    --secondary-hover: rgb(200, 138, 47);
    --danger: rgb(212, 73, 80);
    --danger-hover: rgb(182, 62, 68);
}

/* Scrollbar — slim, rounded, subtle (replaces the solid blocky cyan bar) */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 33, 51, .3) transparent;
}

::-webkit-scrollbar {
    inline-size: 10px;
    block-size: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 33, 51, .25);
    border: 2px solid transparent;
    border-radius: 9999px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 33, 51, .45);
    background-clip: padding-box;
}

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

::-webkit-scrollbar-corner {
    display: none;
}

/* Top utility-bar menu links (Contact, Klantenservice, …): subtle hover feedback. */
.header-top-nav a {
    transition: color .2s ease;
}

.header-top-nav a:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Hairline under the desktop top utility bar (styles down the default <hr>). */
.header-top-divider {
    margin: 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

/* Footer menu links: cyan hover (matches the rest of the site) + a little vertical rhythm. */
.page-footer .__link,
.page-footer .__item,
.page-footer .copyright-menu__link {
    line-height: 1.9;
    transition: color .2s ease;
}

.page-footer .__link:hover,
.page-footer .__item:hover,
.page-footer .copyright-menu__link:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* The copyright menu <li> `hover:underline`, draws a second underline */
.page-footer .copyright-menu__item:hover {
    text-decoration: none;
}

.loader {
    width: 30px;
    height: 30px;
    padding: 6px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary);
    --gradient:
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--gradient);
    mask: var(--gradient);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

#gallery:has(.panelsvg) {
    position: sticky;
    top: 11vh;
}

.panelsvg {
    width: 100%;
    height: 100%;
    margin-bottom: 1.5rem;
}

.header-width {
    width: 100vw;
}

.grid-center {
    display: grid;
    place-content: center;
}

.button {
    min-width: 6.5rem;
    height: 3rem;
    padding: .75rem 1rem;
    border-radius: 25px;
    border: none;
    font-size: .9rem;
    color: black;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.button-primary {
    background: var(--primary);
    color: white;
    &:hover {
        background: var(--primary-hover);
    }
}

.button-secondary {
    background: var(--secondary);
    color: white;
    &:hover {
        background: var(--secondary-hover);
    }
}

.columns {
    max-width: 460px !important;
    margin-inline: auto;
    padding-inline: 1rem !important;
}

.product-cols {
    grid-template-columns: repeat(1,minmax(0,1fr));
    /* Gap is driven here, NOT via Tailwind gap utilities: md:gap-8 / lg:gap-12 are not in
       the compiled CSS (purged, no rebuild), so relying on them left the columns flush. */
    gap: 1.5rem;
}

.fill-primary > g {
    fill: var(--primary);
}

.language-selector {
    position: relative;
    & > button {
        margin: .1rem 0 0 .25rem;
        display: flex;
        align-items: center;
        gap: .25rem;
        color: rgb(100 116 139);
        font-size: .75rem;
        line-height: 1rem;
        border: none;
    }
}

#addToCartWishlist {
    /* Quantity hugs its content (auto), Add-to-cart takes the rest — so the two sit
       next to each other with just the gap, not spread across a rigid 5-col grid. */
    grid-template-columns: auto 1fr;

    .quantityField {
        grid-row: 1;
        grid-column: 1;
    }

    #product-addtocart-button {
        max-width: 20rem;
        max-height: 4rem;
        justify-content: center;
        grid-row: 1;
        grid-column: 2;
    }

    /* Xxl_ProjectName selector (logged-in): the optional "tag this cart item with a
       project" control. Kept as a quiet, self-contained block inside the buy box —
       hairline-separated from the CTA above, compact field + inline cyan Save. */
    .custom-attribute-container {
        grid-row: 2;
        grid-column: 1 / -1;
        max-width: 24rem;
        margin-top: .25rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgb(232, 232, 232);

        label {
            display: block;
            margin-bottom: .4rem;
            font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
            font-size: .8rem;
            color: rgb(0, 33, 51);
        }

        select {
            width: 100%;
            height: 2.75rem;
            margin-bottom: .6rem;
            border-radius: .5rem;
            border: 1px solid rgb(232, 232, 232);
        }

        .add-option-container {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;

            & input {
                flex: 1 1 11rem;
                min-width: 0;
                height: 2.75rem;
                padding: 0 .75rem;
                border-radius: .5rem;
                border: 1px solid rgb(232, 232, 232);
            }
            & button {
                flex: 0 0 auto;
                height: 2.75rem;
                padding: 0 1.25rem;
                border-radius: 25px;
                color: white;
                font-size: .9rem;
            }
            .saveProject {
                background: var(--primary);
                &:hover {
                    background: var(--primary-hover);
                }
            }
            .deleteProject {
                background: var(--danger);
                &:hover {
                    background: var(--danger-hover);
                }
            }
        }
    }
}

.category-btn-wrapper {
    max-width: 1538px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    .category-btn {
        cursor: pointer;
        width: 100%;
        padding: 1.25rem;
        position: relative;
        color: #1a1a1a;
        /* Match the USP banner: DM Sans Bold for the category names (inherited by the
           bare-text labels on NL/FR and the <span> labels on EN). */
        font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
        background: #fff;
        border: 1px solid rgb(232, 232, 232);
        border-radius: .75rem;
        box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
        &:hover {
            transform: translateY(-4px);
            border-color: var(--primary);
            box-shadow: 0 14px 28px -10px rgba(0, 33, 51, .22);
            color: var(--primary);
            & span {
                color: var(--primary);
            }
        }
        & img {
            width: 100%;
            aspect-ratio: 1/1;
            /* Fill the square tile without distorting non-square sources (crops to centre). */
            object-fit: cover;
            /* Soften the hard square so the photo sits nicely inside the rounded card. */
            border-radius: .5rem;
            transition: transform .3s ease;
        }
        /* Subtle zoom on hover — one modern micro-interaction, composes with the lift. */
        &:hover img {
            transform: scale(1.04);
        }
        & span {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 2rem 0 0;
            font-size: 1.25rem;
            font-weight: bold;
            color: black;
         }
        /* Chevron next to the label to signal the tile is clickable. Uses a mask so
           it follows the label colour (black → primary on hover) and nudges right on hover. */
        & span::after {
            content: "";
            flex-shrink: 0;
            width: 1.25rem;
            height: 1.25rem;
            margin-left: .5rem;
            background-color: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
            transition: transform .25s ease;
        }
        &:hover span::after {
            transform: translateX(4px);
        }
    }

    /* USP banner (or any full-width item) placed inside the tile grid: span all
       columns and sit on row 2, so the first row of tiles stays a clean single
       row at every breakpoint (2-up mobile, 3-up desktop) with the banner after it. */
    .main-usp {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
    }
}

/* Homepage "About NautaDirect" banner — modern hero: full-bleed photo, dark gradient
   overlay for legibility, DM Sans Bold heading, pill CTA with arrow. Nautasign-style.
   The whole banner is one clickable <a>. */
.home-about-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 300px;
    padding: 2.5rem 1.5rem;
    background-color: var(--primary);
    background-image: url('../images/home-about-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}

.home-about-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 33, 51, .68) 0%, rgba(0, 33, 51, .38) 45%, rgba(0, 33, 51, 0) 100%);
}

.home-about-banner__content {
    position: relative;
    max-width: 42rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.home-about-banner__title {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    font-size: 1.5rem;
    line-height: 1.25;
}

.home-about-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-radius: 9999px;
    background: #fff;
    color: var(--primary);
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    transition: background-color .25s, color .25s;
}

.home-about-banner__cta svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform .25s;
}

.home-about-banner__cta:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 2px #fff inset;
}

.home-about-banner__cta:hover svg {
    transform: translateX(.25rem);
}

@media screen and (min-width: 1024px) {
    .home-about-banner {
        min-height: 360px;
        padding: 3.5rem 4rem;
    }

    .home-about-banner__title {
        font-size: 2.25rem;
    }
}

/* Mobile: breathing room below the hero before the category tiles
   (on desktop the tile grid already has its own margin-top). */
@media screen and (max-width: 1023px) {
    .home-about-banner {
        margin-bottom: 1.5rem;
    }
}

.category-label {
    padding: .4rem .8rem;
    position: absolute;
    bottom: 1rem;
    left: 0;
    /* De-golded (D1): was var(--secondary) gold; use design navy to match the V2 palette. */
    background: #002133;
    color: white;
    font-size: .8rem;
}

.measurements-rows .measurement-row {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1rem 0 0;
    position: relative;

    & > .field {
        margin: 0;
        display: flex;
        gap: .125rem .5rem;

        .action.add {
            padding: .5rem 1rem;
            background: var(--primary);
            border-radius: 25px;
            color: white;
        }

        .action.remove {
            width: 2.5rem;
            height: 2.5rem;
            background: var(--danger);
            border-radius: 25px;
            color: white;
            position: relative;
                &:after {
                content: url('data:image/svg+xml,%3Csvg width=\'16\' height=\'20\' viewBox=\'0 0 16 20\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M14 4.53003H15\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath d=\'M5 8.46997V14.53\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath d=\'M8 7.31006V15.5801\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath d=\'M11 8.46997V14.53\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M11.795 18.4721H4.205C2.987 18.4721 2 17.4851 2 16.2671V4.52808H14V16.2671C14 17.4851 13.013 18.4721 11.795 18.4721Z\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath d=\'M12 4.52808L11.262 2.22308C11.129 1.80908 10.744 1.52808 10.31 1.52808H5.69C5.255 1.52808 4.87 1.80908 4.738 2.22308L4 4.52808\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath d=\'M1 4.53003H2\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3C/svg%3E%0A');
                position: absolute;
                top: 57%;
                left: 50%;
                    transform: translate(-50%, -50%);
            }
        }
    }

    .switchField {
        width: calc(100% - 2rem);
    }

    .swap-button {
        padding: .4rem .5rem 0;
        position: absolute;
        top: 2rem;
        right: 0;
        &::after {
            content: url('data:image/svg+xml,%3C%3Fxml version=\'1.0\' standalone=\'no\'%3F%3E%3C!DOCTYPE svg PUBLIC \'-//W3C//DTD SVG 20010904//EN\' \'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd\'%3E%3Csvg version=\'1.0\' xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\' viewBox=\'0 0 512 512\' preserveAspectRatio=\'xMidYMid meet\'%3E%3Cg transform=\'translate(0.000000,512.000000) scale(0.100000,-0.100000)\'%0Afill=\'%23000000\' stroke=\'none\'%3E%3Cpath d=\'M985 4915 c-30 -11 -146 -121 -512 -487 -442 -442 -473 -476 -473%0A-508 0 -33 31 -66 477 -512 423 -421 483 -478 521 -488 81 -21 111 -4 259 143%0A108 108 133 140 143 175 20 78 3 112 -128 245 l-116 117 1450 0 c1595 0 1503%0A3 1625 -61 141 -75 249 -253 249 -407 0 -75 20 -123 75 -177 63 -64 100 -75%0A245 -75 145 0 182 11 245 75 74 74 88 142 65 310 -42 291 -188 550 -411 728%0A-91 73 -239 154 -351 192 -168 56 -147 55 -1732 55 l-1460 0 116 118 c131 132%0A148 166 127 245 -9 34 -35 66 -132 165 -67 68 -133 130 -147 137 -42 22 -92%0A26 -135 10z\'/%3E%3Cpath d=\'M160 2227 c-49 -16 -133 -102 -148 -153 -16 -54 -15 -128 3 -244 74%0A-488 463 -869 960 -940 44 -6 616 -10 1529 -10 l1460 0 -116 -118 c-131 -132%0A-148 -166 -128 -245 10 -34 35 -66 143 -174 148 -147 178 -164 260 -143 37 10%0A97 67 520 488 446 447 477 479 477 512 0 33 -31 65 -477 512 -423 421 -483%0A478 -520 488 -82 21 -112 4 -260 -143 -108 -108 -133 -140 -143 -174 -20 -79%0A-3 -113 128 -245 l116 -118 -1450 0 c-1579 0 -1500 -3 -1616 56 -145 73 -258%0A255 -258 412 0 25 -5 63 -12 86 -16 55 -99 138 -154 154 -51 15 -266 14 -314%0A-1z\'/%3E%3C/g%3E%3C/svg%3E%0A');
        }
    }
}

.price-display table {
    width: 100%;
    margin-block: 1rem;
    & thead tr {
        background: rgb(240, 240, 240);
        & th {
            padding: .5rem;
            text-align: start;
        }
    }
    & tbody tr {
        border-bottom: 1px solid rgb(240, 240, 240);
    }
    & tfoot {
        & tr:first-of-type td:first-of-type {
            font-weight: bold;
        }
        & tr:nth-of-type(2) td {
            font-weight: bold;
            &:nth-of-type(2) {
                font-size: 1.4rem;
        }
        }
    }
}

.page-header > .navigation {
    background: var(--primary);

    & li:not([data-open = 'true']) {
        .group.uppercase a {
            color: white !important;
        }
        & div > button > svg {
            color: white;
        }
    }
}

.snowdog-topmenu-mobile {
    margin: 0 -6px 0 0;
    display: flex;
    flex-direction: row-reverse;
    /*gap: .25rem;*/
}
.snowdog-menu-link {
    font-weight: bold;
}

.action.fetch-price {
    margin: 1.5rem 0 .5rem;
    padding: .5rem 1rem;
    background: var(--secondary);
    color: white;
    border-radius: 25px;
}

.cart-popup {
    left: 3.5rem;
    &:before, &:after {
        right: 3.5rem;
    }
}

div.item.product.product-item.border.border-secondary.h-full {
    display: none;
}

/* --- Product cards — same card language as the homepage tiles: rounded, soft
   shadow, hover lift + cyan accent, subtle image zoom. Covers both the PLP card
   (`.card-interactive`, from the Amasty list item, which has p-4 padding) and the
   product sliders (`.product-card`, edge-to-edge image). Overrides the parent
   theme's plain `.card` (rounded-sm + basic shadow). --- */
.product-item.product-card,
.product-item.card-interactive {
    position: relative;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.product-item.product-card:hover,
.product-item.card-interactive:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 14px 28px -10px rgba(0, 33, 51, .22);
}

/* Sliders: image runs to the card edge, so clip the zoom to the rounded corners. */
.product-item.product-card {
    overflow: hidden;
}

/* PLP: the card is padded, so round the inset image instead. */
.product-item.card-interactive .product-item-photo img {
    border-radius: .5rem;
}

.product-item.product-card .product-item-photo img,
.product-item.card-interactive .product-item-photo img {
    transition: transform .3s ease;
}

.product-item.product-card:hover .product-item-photo img,
.product-item.card-interactive:hover .product-item-photo img {
    transform: scale(1.04);
}

/* Product name → navy, cyan on hover (replaces the old green/primary utility on
   both the PLP and the slider cards), matching the headings across the new pages. */
.product-item .product-item-link {
    color: rgb(0, 33, 51);
    transition: color .2s ease;
}

.product-item .product-item-link:hover {
    color: var(--primary);
}

/* --- PLP toolbar + pager polish (align to the cyan accent) ------------------ */
.toolbar-products {
    align-items: center;
}

/* Sort / limiter selects: rounded, white, subtle border, cyan focus
   (was rounded-none on a dark-ish bg with a cyan border). */
.toolbar .form-select {
    border-radius: .5rem;
    background-color: #fff;
    border-color: rgb(232, 232, 232);
}

.toolbar .form-select:focus {
    border-color: var(--primary);
    box-shadow: none;
}

/* Pager: cyan circular prev/next (were gold), current page a filled cyan circle,
   others navy with a cyan hover. Disabled controls go neutral grey. */
.pages .previous,
.pages .next {
    background: var(--primary);
    color: #fff;
}

.pages .previous:hover,
.pages .next:hover {
    background: var(--primary-hover);
}

.pages a.page {
    width: 2.25rem;
    height: 2.25rem;
    justify-content: center;
    border-radius: 9999px;
    color: rgb(0, 33, 51);
}

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

.pages a.page[aria-current="page"] {
    background: var(--primary);
    color: #fff;
}

.pages [aria-disabled="true"] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: default;
}

/* Filter sidebar heading ("Filteren") → match the site headings: DM Sans Bold,
   navy, and a calmer desktop size (was the default font at a loud text-3xl). */
[aria-controls="filters-content"] > span:first-child {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    color: rgb(0, 33, 51);
}

@media (min-width: 768px) {
    [aria-controls="filters-content"] > span:first-child {
        font-size: 1.5rem;
    }
}

/* PDP section headings — the description block + the collapsible detail tabs.
   Design system: section headings are navy DM Sans; cyan is reserved for the
   +/- accent icon. (The legacy markup used text-primary-green, which compiles to
   cyan #00a1be, so the heading TEXT read as cyan — off-spec. Icons stay cyan.) */
.pdp-section-title {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    color: rgb(0, 33, 51);
}
.pdp-section-title svg {
    color: var(--primary);
}

/* Collapsible detail-tab rows: neutral hairline divider (was border-secondary #dfdfdf). */
.pdp-detail-section {
    border-color: rgb(232, 232, 232);
}

/* --- PDP buy-box polish (DECISIONS: cards are the recurring building block) --- */

/* Product title (H1): navy DM Sans + a real line-height. The layout ships the title as
   text-xl with leading-4 (16px line-height on 20px text), so any title long enough to
   wrap overlaps its own lines. Scoped to the product page via the .product class. */
.title-container h1.product {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    color: rgb(0, 33, 51);
    line-height: 1.3;
}

/* Gallery image sits in a soft card, not floating bare. Height is capped so the
   image doesn't tower over a short buy column on simple (no-description) products. */
.pdp-media-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
    padding: 1.5rem;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.pdp-media-card:hover {
    border-color: var(--primary);
    box-shadow: 0 14px 28px -10px rgba(0, 33, 51, .22);
}
.pdp-media-card img {
    width: auto;
    max-width: 100%;
    max-height: 420px;
    border-radius: .5rem;
}

/* Price + quantity + actions grouped into one contained panel, so the info column
   reads as a deliberate block even when the product has little else to show. */
.pdp-buybox {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
}
.pdp-buybox > .block:first-child {
    margin-top: 0;
}
/* Buy controls: vertically centre the quantity pill against the taller CTA and give
   the wishlist row below more separation (template ships a tight gap-4). */
.pdp-buybox #addToCartWishlist {
    align-items: center;
    row-gap: 1.25rem;
}
/* Custom/system products have no quantity field, so the Add-to-cart shouldn't float in
   from column 3 leaving a gap on its left — pull it back to the first column. */
.pdp-buybox #addToCartWishlist:not(:has(.quantityField)) #product-addtocart-button {
    grid-column: 1 / -1;
    justify-self: start;
}

/* Quantity stepper: ONE pill-shaped control. The border + radius live on the wrapper
   only; the −, input and + inside are borderless. Previously each of the three was its
   own bordered box butted against the next (border-r-0 / border-x-0 / border-l-0), so the
   seams doubled up and the input's underlying form-input border showed through — reading
   as inner borders / half-overlapping segments. One container border fixes that. */
.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: 9999px;
    overflow: hidden;
    transition: border-color .2s ease;
}
.qty-stepper:focus-within {
    border-color: var(--primary);
}
/* Neutralise the per-element borders/radius the template utilities still add. */
.qty-stepper span,
.qty-stepper input.qty-formfield {
    border: 0;
    border-radius: 0;
}
/* −/+ buttons: subtle cyan-tinted hover for affordance (no divider, no border). */
.qty-stepper span.cursor-pointer {
    transition: background-color .2s ease;
}
.qty-stepper span.cursor-pointer:hover {
    background: rgba(0, 161, 190, .08);
}
.qty-stepper input.qty-formfield {
    background: transparent;
    -moz-appearance: textfield;
}
.qty-stepper input.qty-formfield:focus {
    outline: none;
    box-shadow: none;
}
.qty-stepper input.qty-formfield::-webkit-outer-spin-button,
.qty-stepper input.qty-formfield::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Related / upsell slider titles → same navy DM Sans as the rest of the PDP.
   The active Nautasign slider container (product-slider-container.phtml) renders
   the heading as a custom <h2 class="text-primary-green"> with +/- accordion icons,
   NOT the Hyva default .title-font heading — so the old .title-font selector matched
   nothing and the band stayed cyan. Target the real markup and recolor the heading
   and its accordion icons to navy. Rebuild-proof (lives outside Tailwind). */
.related-product-slider h2,
.upsell-product-slider h2 {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    color: rgb(0, 33, 51);
}
.related-product-slider h2 svg,
.upsell-product-slider h2 svg {
    color: rgb(0, 33, 51);
}

/* --- PDP stock badge --- Was plain text + a lone icon; now a compact pill so
   availability reads at a glance next to the price. Cyan-tinted "in stock" keeps
   it on-brand (cyan is the accent), red-tinted for out of stock. */
.pdp-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: .75rem;
    padding: .3rem .7rem;
    border-radius: 9999px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.pdp-stock-badge--in {
    background: rgba(0, 161, 190, .1);
    color: var(--primary-hover);
}
.pdp-stock-badge--in svg {
    color: var(--primary);
}
.pdp-stock-badge--out {
    background: rgba(212, 73, 80, .1);
    color: var(--danger);
}

/* --- PDP USP / trust tiles --- static informational squares under the buy box
   (same points as the homepage strip). Not clickable — no hover lift/pointer that
   would imply interaction; just calm cards that match the buy-box aesthetic. */
.pdp-usp {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.pdp-usp__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
}
.pdp-usp__icon {
    color: var(--primary);
}
.pdp-usp__label {
    font-size: .8rem;
    line-height: 1.25;
    color: rgb(0, 33, 51);
}

/* --- PDP mobile sticky add-to-cart bar --- appears once the real buy box scrolls
   out of view (IntersectionObserver). Mobile only (md:hidden on the element). --- */
.pdp-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid rgb(232, 232, 232);
    box-shadow: 0 -6px 20px -8px rgba(0, 33, 51, .18);
}
.pdp-sticky-bar__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    font-size: .9rem;
    line-height: 1.2;
    color: rgb(0, 33, 51);
}
.pdp-sticky-bar__cta {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* Force-hide on desktop even when Alpine's x-show has written an inline display
   (inline style would otherwise beat the md:hidden utility class). */
@media (min-width: 768px) {
    .pdp-sticky-bar {
        display: none !important;
    }
}

.product-info div a img {
    display: none;
}

.wishlistStar {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: .75rem;
    right: .75rem;
    border-radius: 50%;
    border: 1px solid var(--secondary);
    background: white;

    & > svg {
        stroke: var(--secondary);
    }

    &:hover {
        border: 1px solid var(--primary);

        & > svg {
            stroke: var(--primary);
        }
    }
}

.addToWishlist {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    &:hover > svg {
        fill: var(--secondary);
    }
}

.error-message {
    font-size: .8rem;
    margin-top: 5px;
    padding: 5px 10px;
    color: white;
    background: var(--danger);
    border-radius: 25px;
}

.identifier , .identifier  ~ dd {
    display: none;
}

.amwishlist-footer-block {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    gap: .5rem;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    background: white;
    font-size: .8rem;
    line-height: 1rem;
    z-index: 50;
    & .amwishlist-button {
        position: absolute;
        top: 1.5rem;
        right: 1rem;
    }
}


@media screen and (min-width: 768px) {
    .columns {
        max-width: 768px !important;
    }

    .category-btn-wrapper {
        padding-inline: 4rem;
    }

    .product-cols {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 2rem;
    }

    /* Keep the buy-box in view while scrolling the (usually taller) gallery.
       align-self:start stops the grid item stretching full-height, which would
       otherwise defeat position:sticky. */
    .product-info-col {
        position: sticky;
        top: 1.5rem;
        align-self: start;
    }

    .language-selector > button {
        margin: .4rem 0 0 .25rem;
    }
}

@media screen and (min-width: 1024px) {
    .columns {
        max-width: 1024px !important;
    }

    .product-cols {
        gap: 3rem;
    }

    .category-btn-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
        margin-top: 3rem;
        padding-inline: 0;
    }

    .header-width {
        width: 100%;
    }

    .language-selector {
        display: flex;
        justify-content: end;
    }

    .snowdog-topmenu-mobile {
        display: none;
    }
}

@media screen and (min-width: 1280px) {
    .columns {
        max-width: 1280px !important;
    }
    .measurements-rows .measurement-row {
        max-width: 25rem;
    }
}

@media screen and (min-width: 1536px) {
    .columns {
        max-width: 1536px !important;
    }
}

/* ==========================================================================
   Contact page — modern, less "blocky" two-column layout (info + form)
   ========================================================================== */
.contact-page__head {
    max-width: 42rem;
    margin-bottom: 2.5rem;
}

.contact-page__title {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    font-size: 2rem;
    line-height: 1.15;
    color: rgb(0, 33, 51);
}

.contact-page__lead {
    margin-top: .75rem;
    color: #4b5563;
    line-height: 1.6;
}

.contact-page__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* Info card (image + details) */
.contact-info {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
}

.contact-info__media {
    aspect-ratio: 16 / 10;
    background: #f3f4f6;
}

.contact-info__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.contact-info__body {
    padding: 1.75rem;
}

/* Google Maps embed — full-width band below the info + form columns. */
.contact-page__map {
    height: 24rem;
    margin-top: 2rem;
    overflow: hidden;
    border: 1px solid rgb(232, 232, 232);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
}

.contact-page__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.contact-info__heading {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    font-size: 1.25rem;
    color: rgb(0, 33, 51);
    margin-bottom: 1.25rem;
}

.contact-detail-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.contact-detail__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    color: var(--primary);
    background: rgba(0, 161, 190, .1);
}

.contact-detail__body {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

.contact-detail__label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #6b7280;
}

.contact-detail__value {
    color: rgb(0, 33, 51);
}

.contact-detail__link {
    transition: color .2s ease;
}

.contact-detail__link:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Form card */
.contact-form-card {
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
    padding: 1.75rem;
}

.contact-form-card__title {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    font-size: 1.375rem;
    color: rgb(0, 33, 51);
}

.contact-form-card__sub {
    margin-top: .5rem;
    margin-bottom: 1.5rem;
    color: #6b7280;
}

.contact-form__fields {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    border: 0;
    padding: 0;
    margin: 0;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}

.contact-form__actions {
    margin-top: 1.5rem;
}

.contact-form__legal {
    margin-top: 1rem;
    font-size: .8125rem;
    color: #6b7280;
}

@media (min-width: 640px) {
    .contact-form__row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .contact-page__title {
        font-size: 2.5rem;
    }

    .contact-page__grid {
        grid-template-columns: 5fr 7fr;
        gap: 2rem;
    }

    .contact-info__body,
    .contact-form-card {
        padding: 2.25rem;
    }
}

/* Brand carousel — Nautasign-style strip of brand logos. We carry only a handful of brands, so
   this is a seamless auto-scrolling marquee (not a manual arrow/drag slider): the editable CMS
   block (`brand-carousel`) slide set is rendered 3x in the template and the row loops by
   translating exactly one set (-100%/3), so the reset lands on identical content. Pure CSS —
   pauses on hover, disabled under prefers-reduced-motion. */
.brand-carousel {
    max-width: 1538px;
    margin-inline: auto;
}

.brand-carousel__head {
    margin-bottom: .75rem;
}

.brand-carousel__title {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    font-size: 1.5rem;
    line-height: 1.2;
    color: rgb(0, 33, 51);
}

.brand-carousel__viewport {
    overflow: hidden;
    /* Soft-fade both edges so logos scroll in/out instead of hard-clipping. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    /* Room for the hover lift + shadow (overflow-hidden also clips the y-axis). */
    padding-block: .5rem;
}

.brand-carousel__marquee {
    display: flex;
    width: max-content;
    animation: brand-marquee 30s linear infinite;
}

/* Pause so a visitor can settle on a logo. */
.brand-carousel__viewport:hover .brand-carousel__marquee {
    animation-play-state: paused;
}

/* The 3 duplicate sets are display:contents wrappers (aria-hidden in the markup): the slides
   participate directly in the marquee flex row, while the wrappers keep them groupable for a11y. */
.brand-carousel__set {
    display: contents;
}

@keyframes brand-marquee {
    from { transform: translateX(0); }
    /* One set of three → seamless reset onto identical content. */
    to   { transform: translateX(calc(-100% / 3)); }
}

@media (prefers-reduced-motion: reduce) {
    .brand-carousel__marquee {
        animation: none;
    }
}

.brand-carousel__slide {
    flex: 0 0 auto;
    width: 11rem;
    /* Spacing via margin (not flex gap) so every slide — including at set boundaries — has the
       same rhythm and the -100%/3 loop lands seamlessly. */
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.brand-carousel__slide:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 14px 28px -10px rgba(0, 33, 51, .22);
}

.brand-carousel__slide img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    /* Non-interactive: clicks fall through to the <a>, no link cursor on the logo,
       and no native image-drag ghost while dragging the carousel. */
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

@media (min-width: 640px) {
    .brand-carousel__slide {
        width: 12rem;
    }
}

@media (min-width: 1024px) {
    .brand-carousel__title {
        font-size: 1.875rem;
    }

    .brand-carousel__slide {
        width: 13rem;
    }
}

/* --- Legal / content pages (Disclaimer, privacy, terms, …) ----------- */
.legal-page {
    max-width: 62rem;
    margin-inline: auto;
    padding-block: 2.5rem 4rem;
    padding-inline: 1rem;
    color: #374151;
    line-height: 1.7;
}

.legal-page__header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgb(232, 232, 232);
}

/* Heading rules are keyed on the element (not the __header/__section modifiers)
   so both structured pages (disclaimer/sitemap) and plainly-wrapped legacy content
   (e.g. the privacy/cookie statement) get the same modern styling. */
.legal-page h1 {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: rgb(0, 33, 51);
}

.legal-page h1::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 4px;
    margin-top: 1rem;
    border-radius: 9999px;
    background: var(--primary);
}

.legal-page__intro {
    margin-top: 1.25rem;
    font-size: 1.05rem;
    color: #6b7280;
}

.legal-page__section {
    margin-top: 2.25rem;
}

.legal-page h2 {
    margin-top: 2.5rem;
    margin-bottom: .75rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: rgb(0, 33, 51);
}

.legal-page h3 {
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgb(0, 33, 51);
}

.legal-page p {
    margin-bottom: 1rem;
}

.legal-page ul {
    margin: 0 0 1rem 1.25rem;
    list-style: disc;
}

.legal-page li {
    margin-bottom: .5rem;
}

.legal-page a {
    color: var(--primary);
    text-decoration: underline;
}

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

/* --- Terms & conditions / long legal text (.privacy-policy wrapper) ---
   Intentionally low-key: it's a lot of text, so the heading stays modest and
   the measure is narrow for comfortable reading. The content is a Page Builder
   HTML block, so it's styled here rather than restructured. */
.privacy-policy {
    max-width: 52rem;
    margin-inline: auto;
    padding-block: 2.5rem 4rem;
    padding-inline: 1rem;
    color: #374151;
    font-size: .95rem;
    line-height: 1.7;
}

.privacy-policy h1 {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgb(0, 33, 51);
    border-bottom: 1px solid rgb(232, 232, 232);
}

.privacy-policy p {
    margin-bottom: .85rem;
}

/* Article headers are marked up as an underlined bold span — give them a bit of
   breathing room and a consistent dark colour so they read as quiet section labels. */
.privacy-policy span[style*="underline"] {
    display: inline-block;
    margin-top: .9rem;
    font-size: 1rem;
    color: rgb(0, 33, 51);
}

.privacy-policy strong {
    color: rgb(0, 33, 51);
}

.privacy-policy ul,
.privacy-policy ol {
    margin: 0 0 1rem 1.4rem;
}

.privacy-policy li {
    margin-bottom: .4rem;
}

.privacy-policy a {
    color: var(--primary);
    text-decoration: underline;
}

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

/* --- HTML sitemap page ----------------------------------------------- */
.sitemap-page {
    max-width: 75rem;
    margin-inline: auto;
    padding-block: 2.5rem 4rem;
    padding-inline: 1rem;
    color: #374151;
}

.sitemap-page__header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgb(232, 232, 232);
}

.sitemap-page__header h1 {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: rgb(0, 33, 51);
}

.sitemap-page__header h1::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 4px;
    margin-top: 1rem;
    border-radius: 9999px;
    background: var(--primary);
}

.sitemap-page__intro {
    margin-top: 1.25rem;
    font-size: 1.05rem;
    color: #6b7280;
}

.sitemap-page__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .sitemap-page__grid {
        grid-template-columns: 2fr 1fr;
    }
}

.sitemap-block {
    padding: 1.5rem 1.75rem;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: .75rem;
}

.sitemap-block h2 {
    margin-bottom: 1.25rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: rgb(0, 33, 51);
}

.sitemap-tree,
.sitemap-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Top-level branches flow into columns so the catalogue fills the width. */
@media (min-width: 640px) {
    .sitemap-block--categories .sitemap-tree {
        column-gap: 2rem;
        columns: 2;
    }
}

@media (min-width: 1280px) {
    .sitemap-block--categories .sitemap-tree {
        columns: 3;
    }
}

.sitemap-tree > .sitemap-tree__item {
    margin-bottom: 1.25rem;
    break-inside: avoid;
}

.sitemap-tree__item > a {
    font-weight: 600;
    color: rgb(0, 33, 51);
    text-decoration: none;
}

.sitemap-tree__item > a:hover {
    color: var(--primary);
}

.sitemap-tree__children {
    margin: .4rem 0 0;
    padding: 0 0 0 .9rem;
    list-style: none;
    border-left: 2px solid rgb(232, 232, 232);
}

.sitemap-tree__children .sitemap-tree__item {
    margin: .3rem 0;
}

.sitemap-tree__children a {
    font-size: .95rem;
    font-weight: 400;
    color: #4b5563;
    text-decoration: none;
}

.sitemap-tree__children a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.sitemap-list li {
    margin-bottom: .6rem;
}

.sitemap-list a {
    color: #4b5563;
    text-decoration: none;
}

.sitemap-list a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* --- About page — modern editorial layout (hero lead + alternating rows) --- */
.about-page {
    max-width: 72rem;
    margin-inline: auto;
    padding-block: 3rem 4rem;
    padding-inline: 1rem;
    color: #374151;
    line-height: 1.75;
}

/* Building-photo hero: full-width image, dark gradient for legibility, heading + lead overlaid. */
.about-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* 2:1 + bottom anchor: shows the whole building but crops the sky-heavy top of the
       photo, so the building fills the frame instead of a band of sky. min-height stops
       it getting too short on mobile. */
    aspect-ratio: 2 / 1;
    min-height: 20rem;
    margin-bottom: 3.5rem;
    padding: 2.5rem;
    overflow: hidden;
    border-radius: 0.75rem;
    background: rgb(0, 33, 51) url('../images/about/about-hero.webp') center bottom / cover no-repeat;
    color: #fff;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Stronger scrim at the bottom (where the text sits) so the white text stays legible. */
    background: linear-gradient(0deg, rgba(0, 33, 51, .9) 0%, rgba(0, 33, 51, .5) 45%, rgba(0, 33, 51, .12) 100%);
}

.about-hero__content {
    position: relative;
    max-width: 46rem;
    text-shadow: 0 2px 10px rgba(0, 33, 51, .45);
}

.about-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.about-hero__lead {
    margin-top: 1rem;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, .92);
}

.about-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 3.5rem;
}

@media (min-width: 900px) {
    .about-row {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
    }

    /* On desktop the reversed row puts the image first (left). */
    .about-row--reverse .about-row__media {
        order: -1;
    }

    /* Foto 2 (the tall shelving portrait) is far taller than the text beside it,
       so the centered row left a lot of whitespace above/below the copy. Cap its
       height and cover-crop it so the row reads tighter, without distortion. */
    .about-row--reverse .about-row__media img {
        max-height: 30rem;
        object-fit: cover;
    }
}

.about-row__media {
    position: relative;
}

/* Brand-cyan panel offset behind the photo, peeking on the outer + bottom edge.
   Direction flips on the reversed row so it always leans to the outer side — a
   consistent, on-brand motif that ties the alternating rows together. */
.about-row__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 0.75rem;
    background: var(--primary);
    transform: translate(.85rem, .85rem);
}

.about-row--reverse .about-row__media::before {
    transform: translate(-.85rem, .85rem);
}

.about-row__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 18px 34px -20px rgba(0, 33, 51, .35);
}

.about-row__text p {
    margin-bottom: 1rem;
}

.about-page__block {
    max-width: 48rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.about-page__closing {
    padding: 2.75rem 2rem;
    background: rgb(0, 33, 51);
    border-radius: 0.75rem;
    text-align: center;
}

.about-page__closing p {
    max-width: 48rem;
    margin: 0 auto;
    font-size: 1.15rem;
    color: #fff;
}

/* --- About page: mobile rework — calmer sizes, and a consistent text → image
   flow (the reversed row otherwise stacked the two photos back-to-back). --- */
@media (max-width: 899px) {
    .about-page {
        padding-block: 1.5rem 2.5rem;
    }

    .about-hero {
        /* Let the hero grow to fit the title + lead instead of a fixed short ratio
           (which, with overflow:hidden + flex-end, was clipping the title off the top). */
        aspect-ratio: auto;
        min-height: 12rem;
        margin-bottom: 2rem;
        padding: 1.5rem;
    }

    .about-hero h1 {
        font-size: 1.6rem;
    }

    .about-hero__lead {
        margin-top: .5rem;
        font-size: 1rem;
    }

    .about-row {
        gap: 1.25rem;
        margin-bottom: 2.25rem;
    }

    /* Keep every row text → image so the two photos don't sit back-to-back. */
    .about-row--reverse .about-row__media {
        order: 2;
    }

    /* Smaller accent offset on small screens. */
    .about-row__media::before {
        transform: translate(.5rem, .5rem);
    }

    .about-row--reverse .about-row__media::before {
        transform: translate(-.5rem, .5rem);
    }

    .about-page__block {
        margin-bottom: 2rem;
    }

    .about-page__closing {
        padding: 1.75rem 1.25rem;
    }

    .about-page__closing p {
        font-size: 1.05rem;
    }
}

/* --- Login / register page — align to the new card language ---------------- */
.customer-account-login .login-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 64rem;
    margin-inline: auto;
    padding-block: 2rem 3rem;
}

@media (min-width: 768px) {
    .customer-account-login .login-container {
        flex-direction: row;
        align-items: stretch;
    }

    /* Equal, gap-safe halves (overrides the inline w-1/2 so the gap doesn't overflow). */
    .customer-account-login .login-container > * {
        flex: 1 1 0;
        min-width: 0;
    }
}

.customer-account-login .card {
    padding: 2rem;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
}

/* ============================ Cart page (checkout/cart) ============================ */

/* Quantity stepper (.qty-stepper) is defined once, earlier in this file — the cart and PDP
   share that single definition. (D5: removed a verbatim duplicate block that lived here.) */

/* Cart line-item product name → navy DM Sans, cyan on hover (was text-primary-green,
   which compiles to cyan — off-spec for a product/heading). */
.cart.item .product-item-name {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    color: rgb(0, 33, 51);
}
.cart.item .product-item-name a:hover {
    color: var(--primary);
}

/* Cart thumbnail → soft neutral rounded tile, padded off the card edge. The image was
   flush against the card border and floating on white; the tile contains + spaces it. */
.cart.item td.product-photo {
    padding: 1rem;
    vertical-align: top;
}
.cart.item .product-item-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    background: rgb(244, 245, 247);
    border-radius: .5rem;
    overflow: hidden;
}
.cart.item .product-item-photo .block {
    padding: 0;
}
.cart.item .product-item-photo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/* Order summary → the site card (was a flat 1px border box); heading navy DM Sans. */
.cart-summary-card {
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
    padding: 1.25rem;
}
.cart-summary-title {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    color: rgb(0, 33, 51);
}
/* Desktop: the items table has a header row (Item/Price/Qty/Subtotal) above the first
   item that the summary column lacks, so the summary sits higher. Drop it to line the
   summary card's top up with the first item card. (Tune this value to taste — it's the
   header-row height plus the row gap.) */
@media (min-width: 1024px) {
    .cart-summary-card {
        margin-top: 1rem;
    }
}
/* Mobile: the page-title template is p-0, so the "Cart" heading sits flush to the edge
   while the cart content below has a px-4 gutter. Match that 1rem inset on the heading. */
@media (max-width: 767px) {
    .checkout-cart-index .title-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Empty-cart state → centered card with icon + cyan CTA (was two bare default text lines). */
.cart-empty__card {
    max-width: 32rem;
    margin: 2rem auto;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
}
.cart-empty__icon {
    width: 3rem;
    height: 3rem;
    color: var(--primary);
}
.cart-empty__title {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    font-size: 1.5rem;
    color: rgb(0, 33, 51);
}
.cart-empty__text {
    color: #6b7280;
}
.cart-empty__cta {
    margin-top: .5rem;
}

/* Cart line-items as cards. Desktop: separated table rows with a hairline border +
   rounded ends + subtle shadow. Mobile (tr collapses to flex): each tbody is a card block. */
@media (min-width: 768px) {
    #shopping-cart-table {
        border-collapse: separate;
        border-spacing: 0 1rem;
    }
    .cart.item > tr {
        box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
    }
    .cart.item > tr > td {
        background: #fff;
        border-top: 1px solid rgb(232, 232, 232);
        border-bottom: 1px solid rgb(232, 232, 232);
    }
    .cart.item > tr > td:first-child {
        border-left: 1px solid rgb(232, 232, 232);
        border-top-left-radius: .75rem;
        border-bottom-left-radius: .75rem;
    }
    .cart.item > tr > td:last-child {
        border-right: 1px solid rgb(232, 232, 232);
        border-top-right-radius: .75rem;
        border-bottom-right-radius: .75rem;
    }
}
@media (max-width: 767px) {
    .cart.item {
        display: block;
        margin-bottom: 1rem;
        padding: 1rem;
        border: 1px solid rgb(232, 232, 232);
        border-radius: .75rem;
        box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
        overflow: hidden;
    }
    /* One-row layout: image centred on top, name/SKU centred, then the qty stepper and
       the total price share one line at the bottom. The two content cells are flattened
       (display:contents) so the stepper and price become siblings on the same flex row. */
    .cart.item > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: .75rem;
    }
    .cart.item td.col.item,
    .cart.item td.col.subtotal {
        display: contents;
    }
    /* image tile — full width, centred, on top */
    .cart.item td.product-photo {
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
        padding: 0;
    }
    .cart.item .product-item-photo {
        width: 8rem;
        height: 8rem;
    }
    /* name / SKU / options — full width, centred */
    .cart.item .product-item-details {
        order: 2;
        flex: 0 0 100%;
        text-align: center;
    }
    /* bottom line: stepper on the left, total price on the right */
    .cart.item .field.qty.actions {
        order: 3;
        flex: 0 0 auto;
        margin: 0;
    }
    .cart.item .item-total-price {
        order: 4;
        margin: 0 0 0 auto;
        text-align: right;
    }
    /* unit price → quiet line beneath the row, right-aligned */
    .cart.item .single-price {
        order: 5;
        flex: 0 0 100%;
        margin: 0;
        text-align: right;
        font-size: .75rem;
    }
}

/* Headings → navy + DM Sans Bold, matching the rest of the new pages. */
.customer-account-login .card h2 {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    color: rgb(0, 33, 51);
}

/* "Forgot your password?" → cyan instead of the old gold. */
.customer-account-login .form-login .actions-toolbar a {
    color: var(--primary);
}

.customer-account-login .form-login .actions-toolbar a:hover {
    color: var(--primary-hover);
}

/* --- Account request form (account-aanvragen / request-account / demande-compte)
   — same card language as the login/contact pages. --- */
.aanmeld-formulier {
    margin-block: 2rem;
    padding: 2rem;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
}

/* Section headings → navy + DM Sans Bold (were text-primary in the default font). */
.aanmeld-formulier h2 {
    font-family: 'DM Sans Bold', "Helvetica Neue", Arial, sans-serif;
    color: rgb(0, 33, 51);
    border-color: rgb(232, 232, 232);
}

/* --- Form fields — the theme renders them square (border, no radius). Round them
   to match the new card/button language. (Search keeps its own rounded-full pill.) --- */
.form-input,
.form-email,
.form-select,
.form-multiselect,
.form-textarea,
[type=date],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
input:where(:not([type])),
select,
textarea {
    border-radius: .5rem;
}

/* --- Forgot-password / create-(reset)-password pages — same card language.
   Also fill the narrow .columns column instead of the cramped md:w-1/2. --- */
.customer-account-forgotpassword .card,
.customer-account-createpassword .card {
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid rgb(232, 232, 232);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 33, 51, .05);
}

/* --- PDP buy-box (Pass 1) — wishlist as a clear labeled action instead of a lone
   gold icon, and align the qty/add-to-cart block left instead of floating right. --- */
.wishlist-action {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .25rem;
    color: rgb(0, 33, 51);
    font-size: .9rem;
    transition: color .2s ease;
}

.wishlist-action svg {
    width: 1.25rem;
    height: 1.25rem;
}

.wishlist-action:hover {
    color: var(--primary);
}

#addToCartWishlist {
    margin-left: 0;
}

/* Wishlist action on its own full-width row (left-aligned) below the buy controls,
   not squeezed under the quantity field. */
#addToCartWishlist #add-to-wishlist {
    grid-column: 1 / -1;
    justify-self: start;
    margin-left: 0;
}

/* --- Purged-utility recovery (same class of issue as the gap-12 note above) ---
   These valid Tailwind utilities are used in ND templates but are absent from the
   compiled Nautasign styles.css (purged, no rebuild), so they were silently no-ops.
   Defined here with Tailwind's default values so they work rebuild-proof. Live spots:
   min-w-0 (header.phtml), bg-current (stock-status.phtml out-of-stock dot — was
   invisible), lg:py-12 (brand-carousel.phtml), lg:py-14 (contact form.phtml). */
.min-w-0 {
    min-width: 0px;
}
.bg-current {
    background-color: currentColor;
}
@media (min-width: 1024px) {
    .lg\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .lg\:py-14 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}