/* Dune London storefront — shared stylesheet.
   Replaces the old Art Spirit theme (unused, no page linked it). */

:root {
    --dl-navy: #273039;
    --dl-gold: #917140;
    --dl-tan: #c4a577;
    --dl-cream: #f5f1ec;
    --dl-product-shot-bg: #f7f7f7;
    --dl-border: #ece6df;
    --dl-sale: #d61606;
    --dl-footer-border: #3f4955;

    --dl-font-serif: Georgia, 'Times New Roman', serif;
    --dl-font-sans: 'Lato', sans-serif;
    --dl-font-heading: 'Montserrat', sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--dl-font-sans);
    color: var(--dl-navy);
}

a {
    font-family: inherit;
}

/* Buttons */

.dl-btn {
    display: inline-block;
    border-radius: 100px;
    font: 700 12px var(--dl-font-sans);
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 17px 44px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}

.dl-btn-sm {
    padding: 12px 28px;
}

.dl-btn-gold {
    background: var(--dl-gold);
    border-color: var(--dl-gold);
    color: #ffffff;
}

.dl-btn-dark {
    background: var(--dl-navy);
    border-color: var(--dl-navy);
    color: #ffffff;
}

.dl-btn-outline-dark {
    background: transparent;
    border-color: var(--dl-navy);
    color: var(--dl-navy);
}

.dl-btn-outline-light {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

/* Header */

.dl-header {
    background: #ffffff;
    border-bottom: 1px solid var(--dl-border);
    position: sticky;
    top: 0;
    z-index: 400;
}

.dl-promo-bar {
    background: #ffffff;
    color: var(--dl-navy);
    border-bottom: 1px solid var(--dl-border);
    text-align: center;
    font: 12px/18px var(--dl-font-sans);
    letter-spacing: 1.4px;
    padding: 10px 20px;
    text-transform: uppercase;
}

.dl-header-left {
    display: none;
    align-items: center;
    gap: 16px;
}

/* Two separate search widgets share the .dl-search styling (icon + popover
   panel) — one lives with the burger on the left (mobile layout), one with
   the other icons on the right (desktop layout, matches the original
   position). Only one is ever visible at a time. */
.dl-search--mobile {
    display: none;
}

@media (max-width: 992px) {
    .dl-search--mobile {
        display: block;
    }

    .dl-header-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .dl-search--desktop {
        display: none;
    }
}

.dl-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    padding: 20px 50px;
    position: relative;
}

.dl-logo {
    text-decoration: none;
    display: block;
    order: 1;
}

.dl-logo-img {
    height: 34px;
    width: auto;
    display: block;
}

.dl-logo-text {
    font: 700 34px/34px var(--dl-font-serif);
    letter-spacing: 1px;
    color: var(--dl-navy);
    display: block;
}

.dl-footer-logo-img {
    height: 36px;
    width: auto;
    display: block;
    margin-bottom: 20px;
}

.dl-footer-logo-text {
    font: 700 30px/30px var(--dl-font-serif);
    letter-spacing: 1px;
    color: #ffffff;
    display: block;
    margin-bottom: 20px;
}

.dl-nav {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    order: 2;
}

.dl-menu-item {
    position: static;
    padding-bottom: 24px;
    margin-bottom: -24px;
}

.dl-menu-link {
    text-decoration: none;
    font-family: var(--dl-font-sans);
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dl-navy);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    display: inline-block;
}

.dl-menu-link.is-sale {
    color: var(--dl-sale);
}

.dl-menu-link:hover {
    border-bottom-color: var(--dl-navy);
}

.dl-menu-link.is-sale:hover {
    border-bottom-color: var(--dl-sale);
}

.dl-megamenu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #ffffff;
    border-top: 1px solid var(--dl-border);
    border-bottom: 1px solid var(--dl-border);
    box-shadow: 0 16px 30px rgba(39, 48, 57, .1);
    padding: 36px 50px 44px;
    gap: 90px;
    flex-wrap: wrap;
    z-index: 500;
}

/* Desktop-only on purpose: below the 900px breakpoint the megamenu is
   opened/closed entirely by JS toggling .is-open (see main.js) instead —
   an unscoped :focus-within here kept it open after a tap regardless of
   that JS state, since the tapped link stays focused until something else
   receives focus, which is what made "tap again to close" look broken. */
@media (min-width: 901px) {
    .dl-menu-item:hover .dl-megamenu,
    .dl-menu-item:focus-within .dl-megamenu {
        display: flex;
    }
}
@media (max-width: 1300px) {
    .dl-nav {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        order: 2;
    }
    .dl-menu-link {
        font-size: 12px;
        letter-spacing: 0.8px;
    }
}
.dl-megamenu-column {
    min-width: 170px;
}

.dl-megamenu-heading {
    display: block;
    text-decoration: none;
    font: 600 14px/21px var(--dl-font-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dl-navy);
    margin-bottom: 16px;
}

.dl-megamenu-links {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.dl-megamenu-sublink {
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--dl-navy);
}

/* One tile per linked category (not just the first) — a photo with its
   label underneath, laid out in a row to the right of the plain-text nav
   column. Matches the real dunelondon.com megamenu: photo on top, plain
   link below it, no text-over-image overlay. */
.dl-megamenu-promos {
    margin-left: auto;
    display: flex;
    gap: 24px;
}

.dl-megamenu-promo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 220px;
    text-decoration: none;
}

.dl-megamenu-promo-image {
    display: block;
    /* Matches the real dunelondon.com megamenu tile (measured 314.333 x
       432.917px there) rather than a plain square. */
    aspect-ratio: 314.333 / 432.917;
    background-color: var(--dl-cream);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.dl-megamenu-promo-link {
    font: 14px var(--dl-font-sans);
    letter-spacing: 1px;
    color: var(--dl-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Hidden on desktop (the horizontal .dl-nav is always visible there) —
   only shown below the 900px breakpoint, see the media block below for
   the rest of the burger behavior. Declared BEFORE that media block on
   purpose: an unconditional rule placed after a media-scoped one of equal
   specificity wins by source order regardless of viewport width, which is
   exactly the bug this ordering avoids. */
.dl-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    order: -1;
}

.dl-nav-toggle span {
    display: block;
    height: 2px;
    background: var(--dl-navy);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hamburger -> X, driven by the JS-toggled aria-expanded attribute rather
   than a class, so the icon state can never drift out of sync with what a
   screen reader announces. */
.dl-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.dl-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.dl-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Only meaningful in the mobile accordion below — hidden on desktop,
   where hover already reveals the dropdown and a static arrow would just
   be visual noise. */
.dl-menu-link-arrow {
    display: none;
    flex-shrink: 0;
    line-height: 0;
    transition: transform 0.2s ease;
}

@media (max-width: 992px) {
    .dl-nav-toggle {
        display: flex;
    }

    /* Left icon group (burger + search) and the right icon group get equal
       flex-basis so the logo — sized to its own content, no grow — lands
       dead center between them regardless of how many icons end up on
       each side, instead of drifting with justify-content:space-between
       (which only centers when both sides happen to be the same width). */
    .dl-header-row {
        justify-content: center;
    }

    .dl-header-left {
        order: -2;
        flex: 1 1 0;
        justify-content: flex-start;
    }

    .dl-logo {
        order: -1;
        flex: 0 0 auto;
    }

    .dl-header-icons {
        order: 2;
        flex: 1 1 0;
        justify-content: flex-end;
    }

    /* The search icon now sits on the LEFT of the header — anchoring the
       panel via `right` (the desktop default, see .dl-search-panel) would
       grow it further left and push it off the edge of a narrow screen, so
       it opens rightward here instead. */
    .dl-search--mobile .dl-search-panel {
        left: -10px;
        right: auto;
        width: min(340px, calc(100vw - 40px));
    }

    /* Tighter type so the delivery/rep-office line has the best chance of
       fitting on one row on a phone-width screen — a full fix for a long
       string still depends on the text itself (see reply), CSS alone can
       only shrink so far before it stops being legible. */
    .dl-promo-bar {
        font-size: 10.5px;
        line-height: 15px;
        letter-spacing: .4px;
        padding: 8px 14px;
    }

    /* The horizontal bar becomes a full-width panel that drops down below
       the logo/icons row instead of squeezing/wrapping in place — hidden
       until the burger button opens it (see main.js). overflow-x:hidden
       is the actual fix for the horizontal scrollbar this used to show:
       setting only overflow-y (below) implicitly turns overflow-x into
       `auto` too per spec, so anything even 1px too wide (e.g. the
       megamenu columns before they were forced to stack, below) opened a
       horizontal scrollbar for the whole panel instead of just wrapping. */
    .dl-nav {
        display: none;
        order: 10;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        overflow-x: hidden;
        /* Reserves the scrollbar's own width up front (in browsers that
           support it) instead of only when content actually overflows —
           without this, content sized for a scrollbar-less panel shifted
           left the moment one appeared, and the arrow's own 4px right
           padding (below) wasn't enough clearance to stay clear of it. */
        scrollbar-gutter: stable;
        border-top: 1px solid var(--dl-border);
        margin-top: 16px;
    }

    .dl-nav.is-open {
        display: flex;
    }

    .dl-menu-item {
        position: static;
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 1px solid var(--dl-border);
    }

    /* No box-sizing:border-box reset exists sitewide (a recurring root
       cause this session) — width:100% + padding under the default
       content-box model adds the padding ON TOP of that 100%, so the
       right-side padding below was pushing content past the panel's own
       edge instead of staying inside it (that's what "the arrow ends up
       under the scrollbar" actually was — border-box keeps it inside). */
    .dl-nav *,
    .dl-nav *::before,
    .dl-nav *::after {
        box-sizing: border-box;
    }

    .dl-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        /* Right padding needs real clearance from the panel's scrollbar
           (see .dl-nav's scrollbar-gutter above) — 4px put the arrow
           right underneath it. */
        padding: 16px 20px 16px 4px;
        border-bottom: none;
    }

    .dl-menu-link.has-dropdown .dl-menu-link-arrow {
        display: block;
    }

    /* Same arrow the burger icon uses (rotate on open) — the only real
       affordance a user needs to know a second tap closes it again. */
    .dl-menu-item.is-open .dl-menu-link-arrow {
        transform: rotate(180deg);
    }

    /* Columns side-by-side (desktop layout, still declared above) is what
       forced the whole nav panel wider than the screen on a phone —
       stacked vertically here instead, one column fully below the last,
       which is also just a clearer reading order for a narrow accordion.

       Open/close is animated here, unlike the desktop hover version above
       — display can't be transitioned, so it stays permanently flex on
       mobile (never display:none) and max-height/opacity do the
       collapsing instead. max-height:0 + overflow:hidden fully hides it
       (including its own padding, thanks to the box-sizing:border-box
       above) exactly like display:none did, just animatable. The 900px
       ceiling is a generous stand-in for "taller than any real submenu
       gets" — max-height transitions can't target an intrinsic/auto
       value, only a fixed one, so this is what makes the duration below
       consistent without measuring actual content height in JS. */
    .dl-megamenu {
        display: flex;
        position: static;
        box-shadow: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0 0 8px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.25s ease;
    }

    /* :hover/:focus-within alone (the desktop mechanism, still declared
       above) never fires reliably on touch — no sustained hover state to
       key off — so below this breakpoint the menu is opened/closed by
       JS toggling this class instead (see main.js). */
    .dl-menu-item.is-open .dl-megamenu {
        max-height: 900px;
        opacity: 1;
        transition: max-height 0.35s ease, opacity 0.35s ease 0.05s;
    }

    .dl-megamenu-column {
        min-width: 0;
        width: 100%;
    }

    /* Indent one step per nesting level (link=0, column heading=1,
       sublink=2), equal top/bottom padding at every level so nothing
       looks cramped next to its siblings — was margin-based spacing
       (uneven, and headings had no left indent at all, reading as the
       same level as the top-level links above them). */
    .dl-megamenu-heading {
        display: block;
        padding: 12px 20px 12px 24px;
        margin-bottom: 0;
    }

    .dl-megamenu-links {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .dl-megamenu-sublink {
        display: block;
        padding: 12px 20px 12px 44px;
    }

    .dl-megamenu-promos {
        margin-left: 0;
        flex-wrap: wrap;
        padding: 8px 20px 16px 24px;
    }
}

.dl-header-icons {
    display: flex;
    align-items: center;
    gap: 22px;
    order: 4;
}

.dl-icon-btn {
    display: flex;
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
}

.dl-search {
    position: relative;
}

.dl-search-panel {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    right: -10px;
    width: 340px;
    background: #ffffff;
    border: 1px solid var(--dl-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    padding: 14px;
    z-index: 60;
}

.dl-search.is-open .dl-search-panel {
    display: block;
}

.dl-search-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--dl-navy);
    padding: 8px 2px;
    font: 400 14px var(--dl-font-sans);
    outline: none;
}

.dl-search-suggest {
    margin-top: 10px;
    max-height: 420px;
    overflow-y: auto;
}

.dl-search-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--dl-navy);
    border-bottom: 1px solid var(--dl-border);
}

.dl-search-suggest-item img {
    width: 44px;
    height: 58px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--dl-cream);
}

.dl-search-suggest-title {
    font-size: 13px;
    line-height: 1.3;
    margin-right: 10px;
}

.dl-search-suggest-price {
    font-size: 12px;
    color: var(--dl-gold);
    margin-top: 2px;
}

.dl-search-suggest-all {
    display: block;
    text-align: center;
    padding: 10px 0 4px;
    font: 700 12px var(--dl-font-sans);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dl-navy);
    text-decoration: none;
}

.dl-search-suggest-empty {
    padding: 10px 0;
    font-size: 13px;
    color: #8a8f96;
}

.dl-cart-link {
    position: relative;
    display: flex;
    text-decoration: none;
}

.dl-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--dl-gold);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dl-lang-switch {
    display: flex;
    gap: 6px;
    align-items: center;
    font: 12px var(--dl-font-sans);
    letter-spacing: 1px;
    margin-left: 6px;
}

.dl-lang-link.is-active {
    color: var(--dl-navy);
    text-decoration: none;
    text-underline-offset: 3px;
    opacity: .5;
    font-weight: 700;
}

.dl-lang-link {
    /*text-decoration: underline;*/
    color: var(--dl-navy);
    text-decoration: none;
    text-underline-offset: 3px;
    opacity: 1;
}

.dl-lang-sep {
    color: var(--dl-tan);
}

/* Footer */

.dl-footer {
    background: var(--dl-navy);
    color: #ffffff;
}

.dl-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 50px;
    padding: 60px 50px 40px 50px;
}

.dl-footer-tagline {
    font: 14px/21px var(--dl-font-sans);
    letter-spacing: 1px;
    color: var(--dl-tan);
    margin: 0 0 24px 0;
}

.dl-footer-heading {
    font: 600 14px/21px var(--dl-font-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 18px 0;
    color: #ffffff;
}

.dl-footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dl-footer-link {
    color: #ffffff;
    font: 14px var(--dl-font-sans);
    letter-spacing: 1px;
    text-decoration: none;
}

.dl-newsletter-text {
    font: 14px/21px var(--dl-font-sans);
    letter-spacing: 1px;
    margin: 0 0 16px 0;
    color: #ffffff;
    opacity: .85;
}

.dl-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dl-input {
    height: 50px;
    padding: 0 16px;
    font: 16px var(--dl-font-sans);
    letter-spacing: 1px;
    border: 1px solid var(--dl-footer-border);
    background: #ffffff;
    color: var(--dl-navy);
    border-radius: 2px;
}

.dl-footer-subscribe {
    height: 50px;
}

.dl-footer-subscribe:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Off-screen rather than display:none/visibility:hidden — a real text
   input a screen reader would otherwise announce, and some spam bots
   specifically skip fields hidden that way while still filling this. */
.dl-hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.dl-newsletter-message {
    font: 13px/18px var(--dl-font-sans);
    letter-spacing: 0.5px;
    margin: 10px 0 0 0;
    min-height: 18px;
}

.dl-newsletter-message.is-error {
    color: var(--dl-sale);
}

.dl-newsletter-message.is-success {
    color: #ffffff;
}

.dl-footer-bottom {
    border-top: 1px solid var(--dl-footer-border);
    padding: 24px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.dl-payment-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dl-payment-badge {
    border: 1px solid var(--dl-footer-border);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
}

.dl-copyright {
    font: 12px var(--dl-font-sans);
    letter-spacing: 1px;
    color: #ffffff;
    opacity: .7;
}

/* Home page */

.dl-hero {
    position: relative;
    /* Matches the server-side crop (getCrop($src, '1600x580', ...) in
       Pages::buildHomeViewData()) exactly, instead of a fixed height —
       a fixed height only matches that ratio at one specific viewport
       width, so object-fit:cover on .dl-hero-bg-img was cropping the
       photo a *second* time (on top of the server crop) to force it into
       whatever mismatched box shape the current window happened to give
       it, cutting into the "UP TO 70% OFF" text near the image edges.
       Same crop, same box ratio = cover just scales, never crops. */
    aspect-ratio: 1600 / 580;
    background: var(--dl-cream);
}

.dl-hero-bg {
    position: absolute;
    inset: 0;
    display: block;
}

.dl-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dl-hero-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(245, 241, 236, .35), rgba(245, 241, 236, .05));
}

.dl-hero-content {
    position: absolute;
    /* .dl-hero's height now scales with viewport width (aspect-ratio, see
       above) — fixed px here meant the box stayed the same size while the
       photo around it shrank, so at narrower desktop widths it ended up
       covering most of the image. clamp() keeps it proportional: scales
       continuously with viewport width, never smaller than the min or
       bigger than the max (the old fixed values). */
    left: clamp(20px, 4vw, 50px);
    bottom: clamp(20px, 4vw, 50px);
    max-width: clamp(280px, 38vw, 520px);
    background: #ffffff;
    padding: clamp(20px, 3vw, 40px);
}

.dl-hero-kicker {
    font: 700 clamp(11px, 0.9vw, 12px) var(--dl-font-sans);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dl-gold);
    margin-bottom: clamp(8px, 1vw, 12px);
}

.dl-hero-title {
    font: 600 clamp(20px, 2.3vw, 32px) / clamp(26px, 2.9vw, 40px) var(--dl-font-heading);
    letter-spacing: 1px;
    margin: 0 0 clamp(10px, 1.3vw, 16px) 0;
}

.dl-hero-text {
    font: clamp(13px, 1.1vw, 16px) / clamp(20px, 1.7vw, 24px) var(--dl-font-sans);
    letter-spacing: 1px;
    margin: 0 0 clamp(16px, 2.2vw, 28px) 0;
}

.dl-categories-section {
    padding: 60px 50px;
}

.dl-categories-grid {
    display: grid;
    /* Fixed to the actual tile count (not auto-fit) so 4 tiles always span
       the full section width edge-to-edge instead of wrapping unevenly
       once a 4th tile no longer fits alongside 3 at minmax(280px, 1fr). */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.dl-category-card {
    position: relative;
    display: block;
    /* Matches the 900x1200 (3:4) server-side crop passed to getCrop() in
       home.php — a fixed height regardless of the rendered card's width
       forced background-size:cover to crop a *second* time on top of that,
       which is what was cutting into the photo. */
    aspect-ratio: 3 / 4;
    text-decoration: none;
    background-color: var(--dl-cream);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.dl-category-label {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: #ffffff;
    color: var(--dl-navy);
    border-radius: 100px;
    font: 700 12px var(--dl-font-sans);
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 13px 34px;
    white-space: nowrap;
}

.dl-newin-section {
    padding: 20px 50px 70px 50px;
}

.dl-newin-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.dl-newin-title {
    font: 600 25px/32px var(--dl-font-heading);
    letter-spacing: 1px;
    margin: 0;
}

.dl-view-all {
    font: 14px var(--dl-font-sans);
    letter-spacing: 1px;
    color: var(--dl-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dl-badge-stack {
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.dl-badge-stack .dl-badge {
    position: static;
}

/* Shared by every product grid sitewide (catalog/category/search, "New In",
   wishlist, cart/checkout summaries, PDP related items) — one definition,
   one set of breakpoints, so a card is always the same relative size no
   matter which page it's on. Fixed column counts (not auto-fill/minmax)
   so the count itself is the responsive unit — cards flex to fill
   whatever width that gives them, rather than the count changing based on
   an arbitrary minimum card width. */
.dl-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

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

@media (max-width: 767px) {
    .dl-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dl-lang-sep {
        display: none;
    }
    .dl-lang-link.is-active {
        display: none;
    }
    .dl-lang-link {
        display: flex;
    }

}
@media (max-width: 350px) {
    .dl-header-row {
        gap: 15px;
    }
}

@media (max-width: 450px) {
    .dl-products-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .dl-header-icons {
        display: flex;
        align-items: center;
        gap: 7px;
        order: 4;
    }
    .dl-header-row {
        gap: 15px;
    }
    .dl-search--mobile .dl-search-panel {
        left: -40px;
        right: auto;
        width: calc(100vw - 50px);
    }

}

.dl-product-card {
    display: block;
    text-decoration: none;
}

.dl-product-image {
    position: relative;
    aspect-ratio: 3 / 4;
    background-color: var(--dl-product-shot-bg);
    background-blend-mode: multiply;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Second product photo, layered on top of the base one and faded in on
   card hover — only rendered at all when the product has a 2nd gallery
   image (see product_card.php), so a single-photo product just has no
   swap and behaves exactly as before. */
.dl-product-image-hover {
    position: absolute;
    inset: 0;
    background-color: var(--dl-product-shot-bg);
    background-blend-mode: multiply;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.dl-product-card:hover .dl-product-image-hover {
    opacity: 1;
}

.dl-wish-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    z-index: 2;
}

.dl-wish-icon.active svg {
    fill: var(--dl-gold);
    stroke: var(--dl-gold);
}

.dl-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-block;
    font: 700 11px var(--dl-font-sans);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--dl-navy);
    color: #ffffff;
}

.dl-badge-sale {
    background: var(--dl-sale);
}

.dl-product-info {
    padding: 14px 2px 0 2px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dl-product-name {
    font: 12px var(--dl-font-sans);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dl-navy);
}

.dl-product-price {
    font: 700 14px var(--dl-font-sans);
    letter-spacing: 1px;
    color: var(--dl-navy);
}

.dl-product-price-old {
    font: 400 12px var(--dl-font-sans);
    letter-spacing: 1px;
    color: #8a8a8a;
    text-decoration: line-through;
    margin-left: 6px;
}

.dl-product-colors {
    font-size: 12px;
    letter-spacing: 1px;
    color: #3f4955;
}

.dl-brand-section {
    background: var(--dl-cream);
    padding: 80px 50px;
    text-align: center;
}

.dl-brand-title {
    font: 600 25px/32px var(--dl-font-heading);
    letter-spacing: 1px;
    margin: 0 auto 20px auto;
    max-width: 640px;
}

.dl-brand-text {
    font: 16px/24px var(--dl-font-sans);
    letter-spacing: 1px;
    margin: 0 auto 32px auto;
    max-width: 640px;
}

/* Breadcrumbs (shared — app/Helpers/my_helper.php get_breadcrumbs()) */

.breadcrumbs {
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 15px;
    margin-bottom: 24px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--dl-navy);
}

.breadcrumbs a {
    color: var(--dl-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.breadcrumbs .textbc {
    font-weight: 700;
}

.breadcrumbs .divider {
    color: var(--dl-navy);
}

/* Catalog / category listing */

.dl-catalog-breadcrumbs {
    padding: 24px 50px 0 50px;
}

.dl-catalog-hero {
    padding: 16px 50px 0 50px;
}

.dl-catalog-title {
    font: 600 32px/40px var(--dl-font-heading);
    letter-spacing: 1px;
    margin: 0 0 8px 0;
}

.dl-catalog-desc {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 1px;
    margin: 0 0 28px 0;
    color: #3f4955;
}

.dl-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    border-top: 1px solid var(--dl-border);
    border-bottom: 1px solid var(--dl-border);
    padding: 14px 0;
    margin: 0 50px 30px 50px;
}

.dl-filter-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dl-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--dl-navy);
    border-radius: 100px;
    padding: 10px 22px;
    font: 700 12px var(--dl-font-sans);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dl-navy);
    cursor: pointer;
}

.dl-filter-btn-icon {
    display: flex;
    flex-shrink: 0;
}

.dl-filter-count {
    font-size: 14px;
    letter-spacing: 1px;
    color: #3f4955;
}

.dl-filter-dropdown {
    position: relative;
}

.dl-filter-dropdown > summary.dl-filter-btn {
    list-style: none;
}

.dl-filter-dropdown > summary.dl-filter-btn::-webkit-details-marker {
    display: none;
}

.dl-filter-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 400;
    background: #ffffff;
    border: 1px solid var(--dl-border);
    box-shadow: 0 16px 30px rgba(39, 48, 57, .1);
    padding: 20px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dl-filter-panel-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dl-filter-panel-heading {
    font: 700 11px var(--dl-font-sans);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #3f4955;
}

.dl-filter-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dl-filter-options-sizes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.dl-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    font-size: 13px;
    letter-spacing: .5px;
    color: var(--dl-navy);
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
}

.dl-filter-option:hover {
    background: var(--dl-cream);
}

.dl-filter-option.is-selected {
    font-weight: 700;
    background: var(--dl-cream);
}

.dl-filter-option.is-disabled {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    font-size: 13px;
    color: #b7bec4;
    cursor: not-allowed;
}

.dl-color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(39, 48, 57, .2);
    flex: 0 0 auto;
}

.dl-filter-option-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
    color: var(--dl-navy);
    text-decoration: none;
    border: 1px solid var(--dl-border);
    border-radius: 4px;
}

.dl-filter-option-size:hover {
    border-color: var(--dl-navy);
}

.dl-filter-option-size.is-selected {
    background: var(--dl-navy);
    border-color: var(--dl-navy);
    color: #ffffff;
}

.dl-filter-option-size.is-disabled {
    color: #b7bec4;
    border-color: var(--dl-border);
    cursor: not-allowed;
}

.dl-filter-clear {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: underline;
    color: var(--dl-sale);
    align-self: flex-start;
}

.dl-filter-option-check {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    font-size: 13px;
    letter-spacing: .5px;
    color: var(--dl-navy);
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
}

.dl-filter-option-check:hover {
    background: var(--dl-cream);
}

.dl-filter-check-mark {
    color: var(--dl-gold);
    font-weight: 700;
}

/* Filter drawer — right-side slide-in panel, matches the real mockup */
.dl-filter-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(39, 48, 57, .35);
    z-index: 190;
}

.dl-filter-drawer-backdrop.is-open {
    display: block;
}

.dl-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 90vw);
    background: #ffffff;
    z-index: 200;
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 40px rgba(39, 48, 57, .18);
    transform: translateX(100%);
    transition: transform .25s ease;
}

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

.dl-filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 30px;
    border-bottom: 1px solid var(--dl-border);
    flex: 0 0 auto;
}

.dl-filter-drawer-header h2 {
    font: 600 20px/25px var(--dl-font-heading);
    letter-spacing: 1px;
    margin: 0;
}

.dl-filter-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    font-size: 22px;
    line-height: 1;
    color: var(--dl-navy);
}

.dl-filter-drawer-body {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 10px 30px 30px;
}

.dl-filter-drawer-section {
    border-bottom: 1px solid var(--dl-border);
    padding: 20px 0;
}

.dl-filter-drawer-section:last-child {
    border-bottom: none;
}

.dl-filter-drawer-section h3 {
    font: 600 14px/21px var(--dl-font-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.dl-filter-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dl-filter-pill {
    min-width: 50px;
    height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font: 400 14px var(--dl-font-sans);
    letter-spacing: 1px;
    cursor: pointer;
    border: 1px solid var(--dl-navy);
    background: #ffffff;
    color: var(--dl-navy);
    text-decoration: none;
}

.dl-filter-pill.is-selected {
    background: var(--dl-navy);
    color: #ffffff;
}

.dl-filter-pill.is-disabled {
    border-color: var(--dl-border);
    color: #b7bec4;
    cursor: not-allowed;
}

.dl-filter-swatches {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.dl-filter-swatch-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(39, 48, 57, .2);
    display: inline-block;
    position: relative;
}

.dl-filter-swatch-btn.is-selected {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--dl-navy);
}

.dl-filter-swatch-btn.is-disabled {
    opacity: .3;
    cursor: not-allowed;
}

.dl-filter-checklist {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dl-filter-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: .5px;
    color: var(--dl-navy);
    text-decoration: none;
    cursor: pointer;
}

.dl-filter-check-row.is-disabled {
    color: #b7bec4;
    cursor: not-allowed;
}

.dl-filter-checkbox {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 1px solid var(--dl-navy);
    border-radius: 3px;
    position: relative;
}

.dl-filter-check-row.is-disabled .dl-filter-checkbox {
    border-color: #d8dcdf;
}

.dl-filter-check-row.is-selected .dl-filter-checkbox {
    background: var(--dl-navy);
}

.dl-filter-check-row.is-selected .dl-filter-checkbox::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dl-filter-drawer-footer {
    border-top: 1px solid var(--dl-border);
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 0 0 auto;
}

.dl-filter-drawer-footer .dl-btn {
    text-align: center;
}

.dl-catalog-grid-section {
    padding: 0 50px 60px 50px;
}

.dl-catalog-empty {
    padding: 60px 0;
    text-align: center;
    font-size: 14px;
    letter-spacing: 1px;
    color: #3f4955;
}

.dl-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.dl-pagination-item {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dl-navy);
    font-size: 14px;
    color: var(--dl-navy);
    text-decoration: none;
}

.dl-pagination-item.is-current {
    font-weight: 700;
    background: var(--dl-navy);
    color: #ffffff;
}

.dl-pagination-next {
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--dl-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Product detail page (PDP) */

.dl-pdp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 50px;
    align-items: start;
    padding: 0 50px;
}

@media (max-width: 700px) {
    /* minmax(340px, ...) still enforces a 340px-wide track even when
       collapsed to one column — wider than most phone viewports once the
       50px side padding is subtracted, which is what pushed the whole
       gallery/info block right and clipped it. Below the width where this
       grid would ever show two columns anyway, just go fluid. */
    .dl-pdp-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
    }

    .dl-cart-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .dl-cart-main {
        padding: 30px 20px 70px 20px;
    }

    .dl-catalog-hero {
        padding: 16px 20px 0 20px;
    }

    .dl-catalog-grid-section {
        padding: 0 20px 40px 20px;
    }

    .dl-hero {
        /* Mobile gets its own portrait crop (getCrop(..., '900x1200', ...)
           in Pages::buildHomeViewData()) — match that ratio here too, same
           reasoning as the desktop rule above. */
        aspect-ratio: 900 / 1200;
    }

    .dl-hero-content {
        /* Was left:50px + max-width:520px with no right-edge constraint —
           on a narrow viewport that pushed the box past the right edge
           instead of shrinking, which is what clipped it. Symmetric
           left/right insets make it fluid instead. Font/padding sizing
           itself no longer needs a breakpoint override — the clamp()
           values on .dl-hero-content/-title/-text/-kicker already scale
           continuously down to their floor by this width. */
        right: 16px;
        max-width: none;
    }
}

@media (max-width: 567px) {
    /* Below this the box (photo + kicker/title/text/button on top of it)
       no longer has room to stay legible without crowding out the photo
       it's supposed to sit on — dropped entirely rather than shrunk
       further; the hero image alone still carries the section. */
    .dl-hero-content {
        display: none;
    }
}

@media (max-width: 700px) {
    /* Same 50px desktop side-padding, sitewide, with no mobile override —
       on a ~375px phone that's 100px (over a quarter of the screen) eaten
       by padding alone, which is what made the categories tile (and every
       other section below) look squeezed into the middle with big empty
       margins either side. */
    .dl-header-row {
        padding: 16px 10px;
    }

    .dl-footer-grid {
        padding: 40px 20px 30px 20px;
    }

    .dl-footer-bottom {
        padding: 20px 20px;
    }

    .dl-categories-section {
        padding: 30px 20px;
    }

    .dl-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dl-newin-section {
        padding: 20px 20px 40px 20px;
    }

    .dl-brand-section {
        padding: 50px 20px;
    }

    .dl-catalog-breadcrumbs {
        padding: 16px 20px 0 20px;
    }

    .dl-pdp-related {
        padding: 0 20px;
    }

    .dl-page-hero {
        padding: 40px 20px;
    }

    .dl-page-content {
        padding: 30px 20px;
    }
}

.dl-pdp-grid.is-loading {
    opacity: 0.6;
}

.dl-pdp-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dl-pdp-main-image {
    aspect-ratio: 3 / 4;
    background-color: var(--dl-product-shot-bg);
    background-blend-mode: multiply;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.dl-pdp-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 14px;
}

.dl-pdp-thumb {
    aspect-ratio: 1 / 1;
    background-color: var(--dl-product-shot-bg);
    background-blend-mode: multiply;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
}

.dl-pdp-thumb.is-active {
    border-color: var(--dl-navy);
}

.dl-pdp-info {
    max-width: 520px;
}

.dl-pdp-title {
    font: 600 25px/32px var(--dl-font-heading);
    letter-spacing: 1px;
    margin: 0 0 6px 0;
}

.dl-pdp-subtitle {
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #3f4955;
    margin-bottom: 14px;
}

.dl-pdp-price {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.dl-pdp-price-old {
    font-size: 14px;
    font-weight: 400;
    color: #8a8a8a;
    text-decoration: line-through;
    margin-left: 10px;
}

.dl-pdp-block-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.dl-pdp-block-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.dl-pdp-block-value {
    font-weight: 400;
}

.dl-pdp-size-guide {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--dl-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dl-pdp-swatches {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}

.dl-pdp-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--dl-border);
    cursor: pointer;
    display: block;
}

.dl-pdp-swatch.is-selected {
    box-shadow: #ffffff 0 0 0 2px inset, var(--dl-navy) 0 0 0 1px;
    border-color: var(--dl-navy);
}

.dl-pdp-width-options {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}

.dl-pdp-width-btn {
    height: 40px;
    padding: 0 22px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--dl-navy);
    background: #ffffff;
    color: var(--dl-navy);
}

.dl-pdp-width-btn.is-selected {
    background: var(--dl-navy);
    color: #ffffff;
}

.dl-pdp-sizes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.dl-pdp-size-pill {
    min-width: 54px;
    height: 44px;
    padding: 0 16px;
    border-radius: 100px;
    font-family: var(--dl-font-sans);
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    border: 1px solid var(--dl-navy);
    background: #ffffff;
    color: var(--dl-navy);
}

.dl-pdp-size-pill.is-selected {
    background: var(--dl-navy);
    color: #ffffff;
}

.dl-pdp-size-pill.is-disabled {
    cursor: default;
    border-color: var(--dl-border);
    background: #ffffff;
    color: #b5b5b5;
    text-decoration: line-through;
}

.dl-pdp-size-error {
    color: var(--dl-sale);
    font-size: 13px;
    line-height: 18px;
    min-height: 18px;
    margin: 8px 0 20px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s ease;
}

.dl-pdp-size-error.is-visible {
    visibility: visible;
    opacity: 1;
}

@keyframes dl-pdp-sizes-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.dl-pdp-sizes.is-shake {
    animation: dl-pdp-sizes-shake .5s;
}

.dl-pdp-add-to-cart.is-disabled {
    opacity: .5;
}

.dl-pdp-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.dl-pdp-actions .dl-btn {
    height: 54px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.dl-pdp-wishlist.active {
    color: var(--dl-gold);
    border-color: var(--dl-gold);
}

.dl-pdp-delivery-note {
    background: #edf9ff;
    color: #264974;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 1px;
    padding: 12px 16px;
    margin-bottom: 28px;
}

.dl-pdp-accordion {
    border-top: 1px solid var(--dl-border);
}

.dl-pdp-accordion:last-child {
    border-bottom: 1px solid var(--dl-border);
}

.dl-pdp-accordion summary {
    font: 600 16px/24px var(--dl-font-heading);
    letter-spacing: 1px;
    padding: 18px 0;
    cursor: pointer;
}

.dl-pdp-accordion p {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1px;
    margin: 0 0 20px 0;
}

.dl-pdp-related {
    margin-top: 80px;
    padding: 0 50px;
}

.dl-pdp-related-title {
    font: 600 25px/32px var(--dl-font-heading);
    letter-spacing: 1px;
    margin: 0 0 30px 0;
}

/* Size guide modal */

.dl-size-guide-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(39, 48, 57, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.dl-size-guide-overlay.is-open {
    display: flex;
}

.dl-size-guide-modal {
    position: relative;
    background: #ffffff;
    border-radius: 4px;
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
}

.dl-size-guide-close {
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--dl-navy);
}

.dl-size-guide-title {
    font: 700 14px var(--dl-font-sans);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}

.dl-size-guide-subtitle {
    font: 700 12px var(--dl-font-sans);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #3f4955;
    margin-bottom: 24px;
}

.dl-size-guide-table-wrap {
    overflow-x: auto;
    margin-bottom: 24px;
}

.dl-size-guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.dl-size-guide-table th {
    font: 700 13px var(--dl-font-sans);
    text-align: center;
    padding: 12px 10px;
    border-bottom: 1px solid var(--dl-border);
    white-space: nowrap;
}

.dl-size-guide-table td {
    text-align: center;
    padding: 12px 10px;
}

.dl-size-guide-table tbody tr:nth-child(odd) {
    background: var(--dl-cream);
}

.dl-size-guide-full-link {
    font-size: 14px;
    color: var(--dl-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* modal blocks */

.modal-popup {
    display: none;
}
.modal-popup.active {
    display: flex;
    top: 0;
    position: fixed;
}
.modal-popup .modal-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(39, 48, 57, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-popup .modal-overlay .content {
    width: 420px;
    box-shadow: 0 10px 30px rgba(39, 48, 57, 0.2);
    display: flex;
    align-items: center;
    gap: 20px;
    line-height: 24px;
    padding: 32px;
    position: relative;
    border-radius: 4px;
    max-width: calc(100% - 40px);
    background-color: #ffffff;
}
.modal-overlay .close {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    font-size: 18px;
    line-height: 1;
    color: var(--dl-navy);
    cursor: pointer;
}
.modal-popup .modal-overlay .message {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 64px;
    font-size: 16px;
    color: var(--dl-navy);
}
.modal-popup .modal-overlay .message-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--dl-cream);
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-popup .modal-overlay .message-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--dl-gold);
}
.addincartError .message-icon {
    background: #fdecea;
}
.addincartError .message-icon svg {
    stroke: var(--dl-sale);
}
.modal-popup .modal-overlay .message-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.modal-popup .modal-overlay .message .cartlink {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--dl-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Cart page — matches the Dune Offline Cart.html mockup */

.dl-cart-main {
    padding: 30px 50px 70px 50px;
    max-width: 1240px;
    margin: 0 auto;
}

.dl-cart-title {
    font: 600 25px/32px var(--dl-font-heading);
    letter-spacing: 1px;
    margin: 0 0 20px 0;
}

.dl-cart-notice-static {
    background: #f8f8f8;
    color: var(--dl-navy);
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 1px;
    padding: 16px;
    margin-bottom: 30px;
}

.dl-cart-notice {
    padding: 14px 18px;
    margin-bottom: 24px;
    background: #edf9ff;
    color: #264974;
    font-size: 14px;
    line-height: 21px;
}

.dl-cart-notice ul {
    margin: 6px 0 0 0;
    padding-left: 18px;
}

.dl-cart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 50px;
    align-items: start;
}

.dl-cart-items {
    display: flex;
    flex-direction: column;
}

.dl-cart-item {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid var(--dl-border);
}

.dl-cart-items .dl-cart-item:last-child {
    border-bottom: 1px solid var(--dl-border);
}

.dl-cart-item-image {
    display: block;
    width: 110px;
    height: 146px;
    flex-shrink: 0;
    background-color: var(--dl-cream);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.dl-cart-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dl-cart-item-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.dl-cart-item-name {
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.dl-cart-item-name a {
    color: var(--dl-navy);
    text-decoration: none;
}

.dl-cart-item-price {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--dl-navy);
    white-space: nowrap;
}

.dl-cart-item-line {
    font-size: 14px;
    letter-spacing: 1px;
    color: #3f4955;
}

.dl-cart-item-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 10px;
}

.dl-cart-qty-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    letter-spacing: 1px;
}

.dl-cart-qty-select {
    height: 40px;
    border: 1px solid var(--dl-navy);
    background: #ffffff;
    font-family: var(--dl-font-sans);
    font-size: 14px;
    padding: 0 10px;
}

.dl-cart-item-remove {
    border: none;
    background: none;
    padding: 0;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--dl-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.dl-cart-aside {
    background: #f8f8f8;
    padding: 30px;
    max-width: 460px;
}

.dl-cart-aside-title {
    font: 600 20px/25px var(--dl-font-heading);
    letter-spacing: 1px;
    margin: 0 0 24px 0;
}

.dl-cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.dl-cart-delivery-free {
    color: #005a0d;
}

.dl-cart-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    border-top: 1px solid var(--dl-border);
    padding-top: 16px;
    margin-bottom: 24px;
}

.dl-cart-coupon-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.dl-cart-coupon {
    margin-bottom: 24px;
}

.dl-cart-coupon-form {
    display: flex;
    gap: 10px;
}

.dl-cart-coupon-form input {
    flex: 1;
    min-width: 0;
    height: 50px;
    padding: 0 16px;
    font-size: 16px;
    font-family: var(--dl-font-sans);
    letter-spacing: 1px;
    border: 1px solid var(--dl-navy);
    background: #ffffff;
}

.dl-cart-coupon-apply-btn {
    height: 50px;
    padding: 0 24px;
    border-radius: 100px;
    border: 1px solid var(--dl-navy);
    background: #ffffff;
    color: var(--dl-navy);
    font-family: var(--dl-font-sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
}

.dl-cart-coupon-applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--dl-navy);
}

.dl-cart-coupon-remove {
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    color: #8a8a8a;
    text-decoration: underline;
    cursor: pointer;
}

.dl-cart-coupon-error {
    font-size: 12px;
    color: var(--dl-sale);
    margin-top: 6px;
}

.dl-cart-checkout {
    display: block;
    text-align: center;
    line-height: 54px;
    border-radius: 100px;
    border: 1px solid var(--dl-navy);
    background: var(--dl-navy);
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 30px;
}

.dl-cart-payment-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.dl-cart-payment-badge {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #3f4955;
}

/* Checkout page — reuses the cart page's two-column grid/aside */
.dl-checkout-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.dl-checkout-block {
    border-bottom: 1px solid var(--dl-border);
    padding-bottom: 24px;
}

.dl-checkout-field {
    margin-bottom: 16px;
}

.dl-checkout-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dl-navy);
    margin-bottom: 6px;
}

.dl-checkout-field input,
.dl-checkout-field textarea {
    width: 100%;
    border: 1px solid var(--dl-border);
    border-radius: 4px;
    padding: 12px 14px;
    font: 14px var(--dl-font-sans);
    color: var(--dl-navy);
}

.dl-checkout-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--dl-border);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 10px;
    cursor: pointer;
}

.dl-checkout-option input {
    margin-right: 10px;
}

.dl-checkout-option-title {
    flex: 1;
    font-size: 14px;
}

.dl-checkout-option-price {
    font-weight: 700;
    font-size: 13px;
    color: var(--dl-navy);
}

.dl-checkout-error {
    color: var(--dl-sale);
    font-size: 12px;
    margin-top: 6px;
    min-height: 14px;
}

.dl-checkout-back {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--dl-navy);
    text-decoration: underline;
}

.dl-checkout-redirect {
    position: fixed;
    inset: 0;
    background: rgba(39, 48, 57, 0.7);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dl-checkout-redirect-box {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    padding: 32px 36px;
    text-align: center;
    color: var(--dl-navy);
    max-width: 400px;
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

.dl-checkout-redirect-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #8a93a6;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.dl-checkout-redirect-close:hover {
    color: var(--dl-navy);
}

.dl-checkout-redirect-title {
    font: 700 20px var(--dl-font-heading);
    letter-spacing: 0.5px;
    color: #8a93a6;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.dl-checkout-order-label {
    background: var(--dl-navy);
    color: #ffffff;
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
}

.dl-checkout-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dl-sale);
    color: #ffffff;
    border-radius: 100px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

.dl-checkout-qr {
    margin: 8px 0 16px;
    font-size: 13px;
    word-break: break-all;
}

.dl-checkout-qr img {
    max-width: 240px;
    width: 100%;
}

.dl-checkout-scan-btn {
    display: block;
    background: var(--dl-navy);
    color: #ffffff;
    border-radius: 100px;
    padding: 14px 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 14px;
}

.dl-checkout-qr-hint {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 0;
}

.dl-checkout-or {
    font-size: 13px;
    font-weight: 700;
    color: #8a93a6;
    margin-bottom: 14px;
}

.dl-checkout-applinks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.dl-checkout-applink {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--dl-cream);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dl-navy);
    text-decoration: none;
}

.dl-checkout-applink-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.dl-checkout-applink-icon img {
    max-width: 100%;
    max-height: 100%;
}

.dl-checkout-applink-name {
    flex: 1;
    text-align: left;
}

.dl-checkout-applink-chevron {
    color: #8a93a6;
    font-size: 18px;
}

.dl-checkout-qr-status {
    font-size: 13px;
    color: #3f4955;
    margin-top: 14px;
    min-height: 16px;
}
/* Generic text page — shared by success/fail and every plain CMS page
   (about-us, delivery, returns, terms, privacy, stores, size-guide, ...) —
   just a hero + a rich-text content block, styled once here so every page
   using it stays visually consistent without its own CSS file. */
.dl-page-hero {
    background: var(--dl-cream);
    padding: 70px 50px;
    text-align: center;
}

.dl-page-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}

.dl-page-hero h1 {
    font: 600 32px/40px var(--dl-font-heading);
    letter-spacing: 1px;
    color: var(--dl-navy);
    margin: 0 0 12px;
}

.dl-page-hero p {
    font: 16px/24px var(--dl-font-sans);
    letter-spacing: 1px;
    color: var(--dl-navy);
    margin: 0;
}

.dl-page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 50px;
    font: 16px/26px var(--dl-font-sans);
    color: var(--dl-navy);
}

.dl-page-content h2 {
    font: 600 22px/30px var(--dl-font-heading);
    letter-spacing: 0.5px;
    margin: 40px 0 16px;
}

.dl-page-content h2:first-child {
    margin-top: 0;
}

.dl-page-content h3 {
    font: 600 17px/24px var(--dl-font-heading);
    letter-spacing: 0.5px;
    margin: 28px 0 12px;
}

.dl-page-content p {
    margin: 0 0 18px;
}

.dl-page-content ul,
.dl-page-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.dl-page-content li {
    margin-bottom: 8px;
}

.dl-page-content a {
    color: var(--dl-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dl-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
}

.dl-page-content table th,
.dl-page-content table td {
    border: 1px solid var(--dl-border);
    padding: 10px 14px;
    text-align: left;
}

.dl-page-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Text+photo pair — e.g. size-guide's "how to measure X" sections, each
   with its own instructions and diagram side by side. */
.dl-size-guide-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    margin: 0 0 40px;
}

.dl-size-guide-row-reverse {
    flex-direction: row-reverse;
}

.dl-size-guide-text,
.dl-size-guide-image {
    flex: 1 1 320px;
}

.dl-size-guide-image img {
    border-radius: 4px;
}