/* ===========================================================================
   SEO MENU: Figma "SEO MENU SECTION" (Ex10uQ9OY3OuzSPi4g2hPb / 14720:45353)
   Spec: docs/figma/seo-menu/SPEC.md   Decisions: docs/figma/seo-menu/decisions.md
   Markup: components/seo-menu/*.php   Behaviour: assets/js/seo-menu.js

   Everything is scoped under header.da-sm-header so the checkout header and the
   listicle nav (which never carry that class) are untouched.
   =========================================================================== */

.da-sm-header {
    --sm-ink: #3E3C39;
    --sm-onyx: #0F0E0D;
    --sm-jade: #27423B;
    --sm-pearl: #FAF3ED;
    --sm-line: #E4DED8;
    --sm-ease: cubic-bezier(0, 0, .58, 1); /* Figma EASE_OUT */
}

/* ---------- shared atoms (desktop panels + mobile accordion) ---------- */
.da-sm-header .da-sm-h {
    margin: 0;
    font-family: 'Canela', serif;
    font-weight: normal;
    font-size: 24px;
    line-height: 21px;
    letter-spacing: -0.5px;
    color: var(--sm-jade);
    text-transform: uppercase;
}
.da-sm-header .da-sm-h--28 { line-height: 28px; }

.da-sm-header .da-sm-sub {
    display: block;
    font-family: 'FoundersGrotesk', sans-serif;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.5px;
    color: var(--sm-jade);
    text-transform: uppercase;
}

.da-sm-header .da-sm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 21px;
}
.da-sm-header .da-sm-list > li { margin: 0; padding: 0; line-height: 18px; display: flex; align-items: center; }
.da-sm-header .da-sm-list--g16 { gap: 16px; }

.da-sm-header a.da-sm-link,
.da-sm-header a.da-sm-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: 'FoundersGrotesk', sans-serif;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -0.5px;
    color: var(--sm-onyx);
    text-decoration: none;
    text-transform: none;
}
.da-sm-header a.da-sm-link:hover,
.da-sm-header a.da-sm-link:focus-visible { color: var(--sm-onyx); }
.da-sm-header a.da-sm-link:hover .da-sm-link__t,
.da-sm-header a.da-sm-link:focus-visible .da-sm-link__t,
.da-sm-header a.da-sm-card:hover .da-sm-link__t,
.da-sm-header a.da-sm-card:focus-visible .da-sm-link__t {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.da-sm-header .da-sm-list--cap .da-sm-link,
.da-sm-header a.da-sm-link--all { text-transform: capitalize; }
.da-sm-header .da-sm-link--all > svg { flex: 0 0 auto; width: 10px; height: 9px; margin-left: 1px; }

/* icon rows (stones, shapes, styles, metals): 20px icon slot, gap 8, text */
.da-sm-header a.da-sm-link--icon { gap: 8px; min-height: 20px; }
.da-sm-header a.da-sm-link--icon.da-sm-link--all { gap: 8px; }
.da-sm-header a.da-sm-link--icon.da-sm-link--all > svg { margin-left: -5px; }
.da-sm-header .da-sm-ic {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.da-sm-header .da-sm-ic svg { flex: 0 0 auto; max-width: none; height: auto; display: block; }
/* style icons overflow their slot (up to 39px); the text keeps a fixed 42px indent.
   On desktop each glyph is then pulled left onto its Figma x (see the ENGAGEMENT block). */
.da-sm-header .da-sm-list--wide .da-sm-ic { flex-basis: 34px; width: 34px; justify-content: flex-start; }
.da-sm-header .da-sm-swatch {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    box-sizing: border-box;
    border: 4px solid;
    border-radius: 50%;
    background: transparent;
}

/* Engagement CTAs (designer note 3) */
.da-sm-header a.da-sm-cta {
    width: 225px;
    height: 42px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'FoundersGrotesk', sans-serif;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -0.5px;
    text-decoration: none;
    text-transform: none;
    transition: background-color .3s var(--sm-ease), color .3s var(--sm-ease);
}
.da-sm-header a.da-sm-cta svg { flex: 0 0 auto; display: block; }
.da-sm-header a.da-sm-cta--solid {
    gap: 4px;
    padding: 10px 15px;
    border-radius: 3px;
    background: var(--sm-jade);
    color: var(--sm-pearl);
}
.da-sm-header a.da-sm-cta--solid:hover,
.da-sm-header a.da-sm-cta--solid:focus-visible { background: #1d332d; color: var(--sm-pearl); }
.da-sm-header a.da-sm-cta--notched {
    gap: 5px;
    margin: 3px 0 4px;
    color: var(--sm-jade);
    background: url(../images/seo-menu/cta-custom-ring-frame.svg) center / 100% 100% no-repeat;
}
.da-sm-header a.da-sm-cta--notched:hover,
.da-sm-header a.da-sm-cta--notched:focus-visible { color: var(--sm-jade); }
.da-sm-header a.da-sm-cta:hover span,
.da-sm-header a.da-sm-cta:focus-visible span { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.da-sm-header .da-sm-cta__or {
    display: block;
    width: 225px;
    text-align: center;
    font-family: 'English1766', serif;
    font-style: normal; /* the only face IS the light italic; don't synthesise a second slant */
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: -0.5px;
    color: var(--sm-ink);
}

/* Photo tiles: image + optional gradient + title (top) + CTA (bottom) */
.da-sm-header a.da-sm-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    isolation: isolate;
    text-decoration: none;
    color: var(--sm-pearl);
    background: #d9d2cb;
}
.da-sm-header .da-sm-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    z-index: -2;
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1); /* the menu tiles' existing hover easing */
}
.da-sm-header a.da-sm-tile:hover .da-sm-tile__img,
.da-sm-header a.da-sm-tile:focus-visible .da-sm-tile__img { transform: scale(1.06); }
.da-sm-header a.da-sm-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.da-sm-header .da-sm-tile--women::before { background: linear-gradient(180deg, rgba(0,0,0,.3) 0.4%, rgba(0,0,0,0) 31.6%); }
.da-sm-header .da-sm-tile--men::before { background: linear-gradient(180deg, rgba(0,0,0,.4) 0.4%, rgba(0,0,0,0) 31.2%); }
.da-sm-header .da-sm-tile--video::before { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 42.9%); }
.da-sm-header .da-sm-tile--shark::before { background: linear-gradient(302.6deg, rgba(0,0,0,0) 46.4%, rgba(0,0,0,.7) 66.5%); }
.da-sm-header .da-sm-tile--atticus::before { background: linear-gradient(220.1deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.4) 85.7%); } /* handles mapped through the real 600x342 box */

.da-sm-header .da-sm-tile__body {
    position: absolute;
    inset: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.da-sm-header .da-sm-tile--band .da-sm-tile__body,
.da-sm-header .da-sm-tile--atticus .da-sm-tile__body { justify-content: flex-end; }
.da-sm-header .da-sm-tile__title {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: -0.5px;
    color: var(--sm-pearl);
}
.da-sm-header .da-sm-tile__l1 {
    font-family: 'FoundersGrotesk', sans-serif;
    font-weight: normal;
    text-transform: capitalize;
}
.da-sm-header .da-sm-tile__l2 {
    font-family: 'FoundersGroteskMedium', 'FoundersGrotesk', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}
.da-sm-header .da-sm-tile--spotlight .da-sm-tile__title { font-size: 18px; line-height: 22px; }
/* mobile spotlight (14720:46551): 19/22, two lines centred in a 58px box at the card top */
.da-sm-header .da-sm-tile--mspot .da-sm-tile__title { font-size: 19px; line-height: 22px; }
.da-sm-header .da-sm-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'FoundersGrotesk', sans-serif;
    font-size: 16px;
    line-height: 17px;
    letter-spacing: -0.5px;
    color: var(--sm-pearl);
    text-transform: capitalize;
}
.da-sm-header .da-sm-tile__cta svg { flex: 0 0 auto; display: block; }
.da-sm-header .da-sm-tile__cta-t { white-space: pre; } /* Figma's band CTAs carry a double space before "bands" */
.da-sm-header .da-sm-tile__cta--up svg { width: 10px; height: 10px; margin: 0 2px; }
.da-sm-header .da-sm-tile__cta--right svg { width: 13px; height: 10px; margin-left: 1px; }
@media (min-width: 1200px) {
    /* Figma starts each arrow vector right at the end of the fixed-width label box. */
    .da-sm-header .da-sm-tile--atticus .da-sm-tile__cta--up svg { margin-left: -1px; }
    .da-sm-header .da-sm-tile--video .da-sm-tile__cta--up svg { margin-left: 0; }
    .da-sm-header .da-sm-tile--spotlight .da-sm-tile__cta--right svg { width: 12px; height: 9px; margin-left: 0; }
}
.da-sm-header a.da-sm-tile:hover .da-sm-tile__cta-t,
.da-sm-header a.da-sm-tile:focus-visible .da-sm-tile__cta-t { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* Image cards with a centred label bar (Jewelry, Our Story) */
.da-sm-header a.da-sm-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
    color: var(--sm-ink);
}
.da-sm-header .da-sm-card__media {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #d9d2cb;
}
.da-sm-header .da-sm-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.da-sm-header a.da-sm-card:hover .da-sm-card__media img,
.da-sm-header a.da-sm-card:focus-visible .da-sm-card__media img { transform: scale(1.06); }
.da-sm-header .da-sm-card__label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 9px;
    font-family: 'FoundersGrotesk', sans-serif;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -0.5px;
    color: var(--sm-ink);
    text-align: center;
    text-transform: capitalize;
}

.da-sm-header a:focus-visible,
.da-sm-header button:focus-visible,
.da-sm-header input:focus-visible,
.da-sm-header [role="button"]:focus-visible {
    outline: 1px solid var(--sm-jade);
    outline-offset: 2px;
}

.da-sm-header .da-sm-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* desktop-only pieces (the theme's Bootstrap build has no d-xl-flex / d-xl-inline-flex) */
.da-sm-header .da-sm-search,
.da-sm-header .da-sm-desk-only { display: none !important; }
@media (min-width: 1200px) {
    .da-sm-header .da-sm-search { display: flex !important; }
    .da-sm-header .da-sm-desk-only { display: inline-flex !important; }
}

/* the old desktop search dropdown is not used by the new desktop header */
@media (min-width: 1200px) {
    .da-sm-header #search_desktop,
    .da-sm-header .desktop_search_close_overlay { display: none !important; }
}

/* ===========================================================================
   DESKTOP (>= 1200): two-row header, mini bar, panels
   =========================================================================== */
@media (min-width: 1200px) {
    html.da-sm-desk { overflow-anchor: none; }

    /* promo bar above the new header: Figma "Promo banner - desktop" is 40px with
       12/13.2 items and 14/15.4 bullets, gap 50 (the shared component is 43px/14px) */
    body:has(header.da-sm-header) .da-promo .da-promo__bar { height: 40px; }
    body:has(header.da-sm-header) .da-promo .da-promo__item { font-size: 12px; line-height: 13.2px; }
    body:has(header.da-sm-header) .da-promo .da-promo__dot { font-size: 14px; line-height: 15.4px; } /* the header resizes in flow; never let the browser re-anchor the scroll */

    body > header#masthead.da-sm-header {
        padding: 0;
        background: var(--sm-pearl);
        margin-bottom: 0;
        border-bottom-width: 0; /* Figma's header has no bottom rule (116px, not 117) */
        /* main.css animates `all .2s linear`; the bar owns its own timing. The bottom
           margin grows by exactly what the bar gives back (116 -> 60), on the same
           curve, so the page underneath never moves when the header compacts. */
        transition: margin-bottom .3s var(--sm-ease);
    }

    .da-sm-header .da-sm-bar {
        position: relative;
        height: 116px;
        transition: height .3s var(--sm-ease);
    }

    /* row 1: 84px, padding 12/30, search | logo | icons */
    .da-sm-header .container.da-sm-container {
        max-width: none;
        width: 100%;
        height: 84px;
        margin: 0;
        padding: 12px 30px;
        transition: padding .3s var(--sm-ease), height .3s var(--sm-ease);
    }
    .da-sm-header .da-sm-row1 {
        --bs-gutter-x: 0;
        margin: 0;
        height: 60px;
        flex-wrap: nowrap;
    }
    .da-sm-header .da-sm-row1 > [class*="col"] { padding: 0; }
    .da-sm-header .da-sm-left {
        position: relative;
        left: auto;
        display: flex;
        align-items: center;
        height: 60px;
    }
    .da-sm-header .da-sm-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
    }
    .da-sm-header .da-sm-logo a { display: block; line-height: 0; }
    .da-sm-header .da-sm-logo__desktop {
        width: 150px;
        height: 28.2px;
        transition: opacity .3s var(--sm-ease);
    }
    .da-sm-header .da-sm-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        height: 60px;
    }

    /* 40x40 icon hit areas, 1px #3E3C39 strokes, no fill */
    .da-sm-header .da-sm-right .da-sm-icon,
    .da-sm-header .da-sm-right button.button_icon.contact_link.da-sm-icon {
        position: relative;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        color: var(--sm-ink);
        cursor: pointer;
    }
    .da-sm-header .da-sm-right .wishlist_d_menu.da-sm-icon { display: inline-flex !important; }
    .da-sm-header .da-sm-right .da-sm-icon svg { display: block; }
    .da-sm-header .da-sm-right .wishlist_empty,
    .da-sm-header .da-sm-right .wishlist_full { line-height: 0; }
    .da-sm-header .da-sm-ico { align-items: center; justify-content: center; line-height: 0; }
    .da-sm-header .da-sm-right span.wishlist_number,
    .da-sm-header .da-sm-cart #cart_item_count {
        position: absolute;
        top: 5px;
        right: 4px;
        left: auto;
        bottom: auto;
        width: 15px;
        height: 15px;
        border-radius: 99px;
        background: var(--sm-jade);
        color: var(--sm-pearl);
        font-size: 10px;
        line-height: 15px;
        text-align: center;
    }
    /* The heart stays an outline when the wish list has items (owner call); its count badge
       sits off the heart's top-right corner exactly like the bag's (+8px right, 7px up). */
    .da-sm-header .da-sm-right span.wishlist_number { top: -7px; right: -8px; }
    .da-sm-header .cart_icons_container.da-sm-cart {
        position: relative;
        top: 0;
        right: 0;
        margin: 0;
        display: inline-flex;
        width: 40px;
        height: 40px;
    }
    .da-sm-header .cart_icons_container.da-sm-cart .cart_close { position: absolute; inset: 0; }

    /* inline search (designer note 5): V1 idle -> V2 hover -> V3 focus -> V4 typed */
    .da-sm-header .da-sm-search {
        position: relative;
        align-items: center;
        height: 60px;
        width: 240px;
        margin: 0;
    }
    .da-sm-header .da-sm-search__icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .da-sm-header .da-sm-search__icon svg { width: 40px; height: 40px; } /* 40x40 Figma frame export: glyph already placed */
    .da-sm-header .da-sm-right button.contact_link.da-sm-icon svg { width: 40px; height: 40px; }
    .da-sm-header .da-sm-search__field {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 1px;
        height: 24px;
        opacity: 0;
        overflow: hidden;
        box-shadow: 0 1px 0 var(--sm-line); /* Figma stroke is OUTSIDE the 24px box; an outer shadow is not clipped by overflow and runs under the clear X */
        transition: width .3s var(--sm-ease), opacity .3s var(--sm-ease);
    }
    .da-sm-header .da-sm-search:hover .da-sm-search__field,
    .da-sm-header .da-sm-search:focus-within .da-sm-search__field,
    .da-sm-header .da-sm-search.has-value .da-sm-search__field {
        width: 175px;
        opacity: 1;
    }
    .da-sm-header input.da-sm-search__input {
        flex: 1 1 auto;
        min-width: 0;
        height: 24px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        outline: none;
        background: transparent;
        box-shadow: none;
        font-family: 'FoundersGrotesk', sans-serif;
        font-size: 14px; /* owner call (2026-10-23): Figma's 12px is too small to read while typing */
        line-height: 14px;
        letter-spacing: 0;
        color: var(--sm-onyx);
        caret-color: var(--sm-onyx);
        -webkit-appearance: none;
        appearance: none;
    }
    .da-sm-header input.da-sm-search__input:focus-visible { outline: none; }
    .da-sm-header input.da-sm-search__input::placeholder { color: rgba(62, 60, 57, .8); opacity: 1; }
    .da-sm-header input.da-sm-search__input::-webkit-search-cancel-button,
    .da-sm-header input.da-sm-search__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
    .da-sm-header .da-sm-search__clear {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        border-radius: 4px;
        background: var(--sm-pearl);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        visibility: hidden;
        opacity: 0;
        cursor: pointer;
        transition: opacity .3s var(--sm-ease), visibility 0s linear .3s;
    }
    .da-sm-header .da-sm-search.has-value .da-sm-search__clear {
        visibility: visible;
        opacity: 1;
        transition: opacity .3s var(--sm-ease), visibility 0s;
    }
    .da-sm-header .da-sm-search__clear svg { display: block; }

    /* row 2: centred nav, 28px tall (14px bottom padding), gap 40 */
    .da-sm-header .da-sm-nav {
        position: absolute;
        top: 88px;
        left: 0;
        right: 0;
        height: 28px;
        padding: 0 40px 14px;
        pointer-events: none; /* in the mini bar the row overlays row 1; only the items take clicks */
        transform: translateY(0);
        transition: transform .3s var(--sm-ease);
    }
    .da-sm-header .da-sm-nav__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 40px;
    }
    .da-sm-header .da-sm-nav__list > li { margin: 0; padding: 0; pointer-events: auto; line-height: 14px; }
    .da-sm-header button.da-sm-nav__btn {
        display: inline-block;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        font-family: 'FoundersGrotesk', sans-serif;
        font-size: 15px; /* owner call: Figma's 14px reads small in the browser; 16px was a touch big (2026-10-23) */
        line-height: 14px;
        letter-spacing: 0;
        color: var(--sm-ink);
        text-transform: uppercase;
        cursor: pointer;
    }
    /* Figma: the open item keeps #3E3C39 with a #3E3C39 underline; the existing
       grow-from-left underline animation (hover_underline_width) is kept */
    .da-sm-header button.da-sm-nav__btn:hover,
    .da-sm-header button.da-sm-nav__btn.active { color: var(--sm-ink); }
    .da-sm-header button.da-sm-nav__btn.hover_underline_width::after { background-color: var(--sm-ink); }
    .da-sm-header button.da-sm-nav__btn { text-align: left; white-space: nowrap; }

    /* ---- mini bar (Menu-desktop Variant2): 60px, logo fades, nav joins row 1 ---- */
    html.da-sm-mini .da-sm-header .da-sm-bar { height: 60px; transition-duration: .4s; }
    html.da-sm-mini body > header#masthead.da-sm-header { margin-bottom: 56px; transition-duration: .4s; }
    html.da-sm-mini .da-sm-header .container.da-sm-container { height: 60px; padding-top: 0; padding-bottom: 0; transition-duration: .4s; }
    html.da-sm-mini .da-sm-header .da-sm-logo__desktop { opacity: 0; transition-duration: .4s; }
    html.da-sm-mini .da-sm-header .da-sm-logo a { pointer-events: none; visibility: hidden; transition: visibility 0s linear .4s; } /* hidden from Tab too, after the fade */
    html.da-sm-mini .da-sm-header .da-sm-nav { transform: translateY(-65px); transition-duration: .4s; } /* text top 88 -> 23 of 60 */

    /* ---- panels ---- */
    .da-sm-header .da-sm-panels { position: static; }
    .da-sm-header .da-sm-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 3;
        padding: 30px 40px;
        background: var(--sm-pearl);
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        transition: opacity .3s var(--sm-ease); /* = the old fadeIn(300) */
    }
    .da-sm-header .da-sm-panel[hidden] { display: none; }
    .da-sm-header .da-sm-panel.is-open { opacity: 1; }
    .da-sm-header .da-sm-panel.is-swap { transition: none; } /* hover switch between items: swap in place */
    .da-sm-header .da-sm-panel__inner {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
    }
    .da-sm-header .da-sm-col { display: flex; flex-direction: column; gap: 20px; }

    /* ENGAGEMENT */
    .da-sm-header .da-sm-eng__start { flex: 0 0 225px; display: flex; flex-direction: column; gap: 42px; }
    .da-sm-header .da-sm-eng__ctas { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .da-sm-header .da-sm-eng__shapes { flex: 0 0 138px; }
    .da-sm-header .da-sm-eng__styles { flex: 0 0 147px; }
    .da-sm-header .da-sm-eng__metals { flex: 0 0 97px; }
    .da-sm-header .da-sm-eng__metals .da-sm-link__t { white-space: nowrap; }
    .da-sm-header .da-sm-eng__shapes .da-sm-link__t,
    .da-sm-header .da-sm-eng__styles .da-sm-link__t { white-space: nowrap; }
    /* icon rows are 20px frames (a few are 19) with content on the bottom edge (Figma cross MAX) */
    .da-sm-header .da-sm-panel--engagement .da-sm-list--icons > li { height: 20px; align-items: flex-end; }
    .da-sm-header .da-sm-panel--engagement .da-sm-eng__start .da-sm-list--icons > li:nth-child(-n+2),
    .da-sm-header .da-sm-eng__shapes .da-sm-list--icons > li:first-child,
    .da-sm-header .da-sm-eng__styles .da-sm-list--icons > li:nth-child(3),
    .da-sm-header .da-sm-eng__metals .da-sm-list--icons > li:first-child { height: 19px; }
    .da-sm-header .da-sm-eng__styles a.da-sm-link--all .da-sm-link__t { margin-left: 2px; } /* "Shop all styles" text at x 630 */
    /* Figma centres each style glyph on its slot, so the wide ones overhang to the LEFT:
       Solitaire 581, Hidden Halo 582, Nature 582, Vintage 583, Side Stones 581, Shop all 580.2
       (the slot starts at 586). Shift the glyph only; the label keeps its x. */
    .da-sm-header .da-sm-eng__styles .da-sm-ic svg { position: relative; left: -5px; }
    .da-sm-header .da-sm-eng__styles .da-sm-list > li:nth-child(2) .da-sm-ic svg,
    .da-sm-header .da-sm-eng__styles .da-sm-list > li:nth-child(3) .da-sm-ic svg { left: -4px; }
    .da-sm-header .da-sm-eng__styles .da-sm-list > li:nth-child(4) .da-sm-ic svg { left: -3px; }
    .da-sm-header .da-sm-eng__styles .da-sm-list > li:nth-child(6) .da-sm-ic svg { left: -5.8px; }
    /* "Create a Custom Ring" label centre y 298 (the notched frame is 42 tall) */
    .da-sm-header .da-sm-eng__ctas a.da-sm-cta--notched { padding-top: 3px; }
    .da-sm-header .da-sm-eng__featured { flex: 0 0 227px; gap: 12px; }
    /* Figma Frame 38134: 19px rows, gap 16, plus an empty 4th row -> 124px list, 443px column */
    .da-sm-header .da-sm-eng__featured .da-sm-list { padding-bottom: 35px; }
    .da-sm-header .da-sm-eng__featured .da-sm-list > li { height: 19px; }
    .da-sm-header .da-sm-tile--spotlight { width: 227px; height: 307px; }
    .da-sm-header .da-sm-tile--spotlight .da-sm-tile__body { padding-bottom: 12.5px; } /* "shop now" centre y 472 */

    /* WEDDING BANDS */
    .da-sm-header .da-sm-bands__group { display: flex; gap: 40px; flex: 0 1 auto; min-width: 0; }
    .da-sm-header .da-sm-tile--band { flex: 0 1 340px; width: 340px; aspect-ratio: 340 / 281; min-width: 220px; }
    .da-sm-header .da-sm-tile--men .da-sm-tile__body { padding: 14px 13px; }
    .da-sm-header .da-sm-bands__text { flex: 0 0 auto; display: flex; flex-direction: column; gap: 24px; padding: 12px 0; }
    .da-sm-header .da-sm-bands__text .da-sm-h { line-height: 18px; white-space: nowrap; }
    .da-sm-header .da-sm-subcols { display: flex; gap: 40px; }
    .da-sm-header .da-sm-subcol { display: flex; flex-direction: column; gap: 21px; min-width: 66px; }
    /* Figma fixes the text columns at 189 (women) / 185 (men) and the METAL column at 70,
       so space-between lands the men's group at x 675 */
    .da-sm-header .da-sm-bands__group:first-child .da-sm-bands__text { flex-basis: 189px; }
    .da-sm-header .da-sm-bands__group:last-child .da-sm-bands__text { flex-basis: 185px; }
    .da-sm-header .da-sm-bands__text .da-sm-subcol:first-child { min-width: 70px; }
    .da-sm-header .da-sm-subcol .da-sm-link__t { white-space: nowrap; }

    /* JEWELRY + OUR STORY */
    .da-sm-header .da-sm-cards { justify-content: flex-start; gap: 21px; align-items: stretch; }
    .da-sm-header .da-sm-cards > a.da-sm-card { flex: 1 1 0; }
    .da-sm-header .da-sm-cards--4 .da-sm-card__media { aspect-ratio: 284.2 / 255; }
    .da-sm-header .da-sm-cards--3 .da-sm-card__media { aspect-ratio: 386 / 350; }

    /* LEARN */
    .da-sm-header .da-sm-learn__lists { flex: 0 1 518px; display: flex; gap: 23px; padding-top: 12px; }
    .da-sm-header .da-sm-learn__guides { flex: 0 0 193px; }
    .da-sm-header .da-sm-learn__journal { flex: 0 1 302px; }
    .da-sm-header .da-sm-learn__journal .da-sm-link__t { white-space: nowrap; }
    .da-sm-header .da-sm-learn__guides .da-sm-h { line-height: 18px; } /* GUIDES box is 18 tall, JOURNAL 21 */
    /* "Read All" sits in a 20px row, text bottom-aligned (Figma Frame 39520, cross MAX) */
    .da-sm-header .da-sm-panel .da-sm-list > li.da-sm-list__all { height: 20px; align-items: flex-end; }
    .da-sm-header .da-sm-learn__tiles { flex: 0 1 630px; display: flex; align-items: flex-start; gap: 17px; min-width: 0; }
    .da-sm-header .da-sm-tile--video { flex: 0 1 268px; aspect-ratio: 268 / 364; min-width: 0; }
    .da-sm-header .da-sm-tile--video .da-sm-tile__body { padding: 14px 11px 12.9px 14px; } /* "Watch Now" centre y 528.6 */
    .da-sm-header .da-sm-tile--shark .da-sm-tile__body { padding-bottom: 12.9px; } /* "Read more" centre y 338.1 */
    .da-sm-header .da-sm-learn__stack { flex: 0 1 345px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
    .da-sm-header .da-sm-learn__stack .da-sm-tile { aspect-ratio: 345 / 173.5; }

    /* MORE */
    .da-sm-header .da-sm-more__gems,
    .da-sm-header .da-sm-more__sapphires { gap: 16px; padding-top: 12px; flex: 0 0 auto; }
    .da-sm-header .da-sm-panel--more .da-sm-list,
    .da-sm-header .da-sm-panel--more .da-sm-subcol { gap: 16px; }
    .da-sm-header .da-sm-more__sapphires .da-sm-h { margin-bottom: 0; }
    /* Figma column boxes: gemstones 146, sapphires 180 -> space-between puts SAPPHIRES at x 323 */
    .da-sm-header .da-sm-more__gems { flex-basis: 146px; width: 146px; }
    .da-sm-header .da-sm-more__sapphires { flex-basis: 180px; width: 180px; }
    .da-sm-header .da-sm-tile--atticus { flex: 0 1 600px; max-width: 600px; aspect-ratio: 600 / 342; min-width: 0; }
}

/* overlay (the page dim under an open panel; .header_overlay keeps main.js's close handler) */
.da-sm-overlay {
    position: fixed;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    background: rgba(0, 0, 0, .33);
    opacity: 0;
    transition: opacity .3s var(--sm-ease, ease-out);
}
.da-sm-overlay.is-on { opacity: 1; }

/* between 1200 and 1279 the 1200 content block is narrower: tighten gaps */
@media (min-width: 1200px) and (max-width: 1279.98px) {
    .da-sm-header .da-sm-nav__list { gap: 32px; }
    .da-sm-header .da-sm-panel { padding-left: 32px; padding-right: 32px; }
    .da-sm-header .da-sm-bands__group { gap: 28px; }
    .da-sm-header .da-sm-subcols { gap: 28px; }
}

/* ===========================================================================
   MOBILE / TABLET (< 1200): Figma "Mobile menu" bar + the new accordion
   =========================================================================== */
@media (max-width: 1199.98px) {
    /* promo: Figma "Promo banner - Mobile" (14720:46506) is 43px with 12/13.2 items
       and bullets, 6px apart */
    body:has(header.da-sm-header) .da-promo .da-promo__item,
    body:has(header.da-sm-header) .da-promo .da-promo__dot { font-size: 12px; line-height: 13.2px; }

    /* bar: 60px, 24px sides, 1px #E4DED8 @ 60% rule drawn INSIDE the 60 (Figma stroke INSIDE).
       The old header's 10px padding + outside border made it 61. Glyph boxes keep the old
       40x40 icons (and their open/active states) and sit where Figma draws each glyph:
       hamburger x 24, contact x 72, word-mark centred, search glyph x 291, bag x 344. */
    body > header#masthead.da-sm-header { padding: 0; border-bottom: 0; }
    .da-sm-header .da-sm-bar { position: relative; }
    .da-sm-header .da-sm-bar::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: rgba(228, 222, 216, .6);
        pointer-events: none;
    }
    .da-sm-header .da-sm-bar > .da-sm-container { max-width: none; padding: 0 24px; }
    .da-sm-header .da-sm-row1 { height: 60px; margin: 0; flex-wrap: nowrap; }
    .da-sm-header .da-sm-row1 > [class*="col"] { padding: 0; }
    .da-sm-header .da-sm-left,
    .da-sm-header .da-sm-right {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        display: flex;
        align-items: center;
    }
    .da-sm-header .da-sm-left { left: 0; justify-content: flex-start; }
    .da-sm-header .da-sm-right { justify-content: flex-end; }
    .da-sm-header .da-sm-left button.mobile-nav {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0 0 0 -8px;
    }
    .da-sm-header .da-sm-left .menu_btn_img,
    .da-sm-header .da-sm-left .mobile_menu_toggle svg { display: block; }
    .da-sm-header .da-sm-left button.button_icon.contact_link {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0 0 0 6px !important; /* beats the inline margin-top:-9px */
        line-height: 0;
    }
    .da-sm-header .da-sm-logo {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
    .da-sm-header .da-sm-logo a { display: block; line-height: 0; }
    .da-sm-header img.da-sm-logo__mobile { display: block; width: 123px; height: 21.8px; max-width: none; }
    .da-sm-header .da-sm-right button.button_icon.search_link {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        line-height: 0;
    }
    .da-sm-header .da-sm-right button.search_link svg { display: block; }
    .da-sm-header .da-sm-right .wishlist_d_menu { margin-left: 10px; line-height: 0; }
    /* bag: Figma's glyph is the old one at 110% (22 x 24.2), so the 40px icons scale to 44 */
    .da-sm-header .da-sm-right .cart_icons_container.da-sm-cart {
        top: 0;
        right: 0;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin: 0 -11px 0 9.2px; /* search box 283.8-323.8 (glyph centre 303.8), bag box 333-377 */
        line-height: 0;
    }
    .da-sm-header .da-sm-cart .header_cart_icon.cart_link,
    .da-sm-header .da-sm-cart .cart_close { line-height: 0; }
    .da-sm-header .da-sm-cart .header_cart_icon.cart_link svg,
    .da-sm-header .da-sm-cart .cart_close svg { display: block; width: 44px; height: 44px; }

    header.da-sm-header nav#mobile-menu-items { padding: 0 24px; top: 60px; }
}
@media (max-width: 767px) {
    body:has(header.da-sm-header) .da-promo .da-promo__track,
    body:has(header.da-sm-header) .da-promo .da-promo__dup { gap: 6px; }
}

.da-sm-header .da-sm-mnav {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 0 30px;
    max-width: 342px;
    margin: 0 auto;
}
@media (min-width: 576px) {
    .da-sm-header .da-sm-mnav { max-width: 520px; }
}
.da-sm-header button.da-sm-acc__btn {
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: flex-start; /* Figma: the 21px label/icon row sits at the TOP of the 36px row */
    justify-content: space-between;
    cursor: pointer;
    color: #000;
}
.da-sm-header button.da-sm-acc__btn .da-sm-acc__label {
    display: flex;
    align-items: center; /* text box 21 tall, 18px line centred in it */
    height: 21px;
    font-family: 'FoundersGrotesk', sans-serif;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -0.5px;
    color: #000;
    text-transform: uppercase;
}
.da-sm-header .da-sm-acc__ic { width: 21px; height: 21px; line-height: 0; color: #000; }
.da-sm-header .da-sm-acc__ic svg { display: block; width: 21px; height: 21px; }
.da-sm-header .da-sm-acc__ic--minus,
.da-sm-header .da-sm-acc.is-expanded .da-sm-acc__ic--plus { display: none; }
.da-sm-header .da-sm-acc.is-expanded .da-sm-acc__ic--minus { display: block; }

.da-sm-header .da-sm-acc__panel {
    overflow: hidden;
    opacity: 0;
    transition: height 210ms cubic-bezier(.4, 0, .2, 1), opacity 210ms cubic-bezier(.4, 0, .2, 1);
}
.da-sm-header .da-sm-acc__panel.is-open { opacity: 1; }
.da-sm-header .da-sm-acc__panel[hidden] { display: none; }
.da-sm-header .da-sm-acc__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 12px;
}
.da-sm-header .da-sm-m-sec { display: flex; flex-direction: column; gap: 12px; }
/* BLACK FRIDAY (Figma Frame 39507): 21px heading box, gap 20 to the list */
.da-sm-header .da-sm-m-sec--bf { gap: 20px; }
.da-sm-header .da-sm-mnav .da-sm-m-sec--bf h2.da-sm-h { line-height: 21px; }
.da-sm-header .da-sm-mnav .da-sm-list { gap: 12px; }
/* Shop all / Read All rows are 20px frames with the text on the bottom edge (Figma Frame 39520/39521) */
.da-sm-header .da-sm-mnav .da-sm-list > li.da-sm-list__all { height: 20px; align-items: flex-end; }
.da-sm-header .da-sm-mnav .da-sm-h--28 { line-height: 28px; }
.da-sm-header .da-sm-mnav .da-sm-h:not(.da-sm-h--28) { line-height: 28px; }
.da-sm-header .da-sm-m-cols {
    display: grid;
    grid-template-columns: 150px 150px;
    column-gap: 20px;
    align-items: start;
}
.da-sm-header .da-sm-m-cols > div { display: flex; flex-direction: column; gap: 12px; }
.da-sm-header .da-sm-m-grid {
    display: grid;
    grid-template-columns: 150px 150px;
    column-gap: 20px;
    row-gap: 12px;
}
.da-sm-header .da-sm-mnav .da-sm-m-grid .da-sm-link__t { white-space: nowrap; }
.da-sm-header .da-sm-m-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.da-sm-header .da-sm-m-ctas .da-sm-cta__or { text-align: center; }
.da-sm-header .da-sm-mnav a.da-sm-tile--m { width: 100%; aspect-ratio: 342 / 200; }
.da-sm-header .da-sm-mnav .da-sm-tile--atticus::before { background: linear-gradient(220.8deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.4) 85.7%); }
.da-sm-header .da-sm-mnav .da-sm-tile--atticus .da-sm-tile__body { justify-content: flex-end; padding: 14px 17px 13px; }
.da-sm-header .da-sm-mnav .da-sm-tile--women .da-sm-tile__body,
.da-sm-header .da-sm-mnav .da-sm-tile--men .da-sm-tile__body { justify-content: flex-end; }
.da-sm-header .da-sm-mnav .da-sm-tile--mspot .da-sm-tile__body { padding: 7px 20px 13.5px; } /* "shop now" centre 178 in the tile */
.da-sm-header .da-sm-m-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 12px;
}
.da-sm-header .da-sm-m-cards .da-sm-card__media { aspect-ratio: 161 / 145; }

/* wish list card */
.da-sm-header .wishlist_mobile_menu.da-sm-wish { position: relative; }
.da-sm-header .da-sm-wish > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    overflow: hidden;
    border-radius: 4px;
    background: linear-gradient(108deg, #D2C6BA 3.2%, #E4DED8 46.8%);
    text-decoration: none;
    color: var(--sm-onyx);
}
.da-sm-header .wishlist_mobile_menu.da-sm-wish img.da-sm-wish__ring {
    position: absolute;
    width: auto;
    max-width: none;
    pointer-events: none;
}
.da-sm-header .wishlist_mobile_menu.da-sm-wish img.da-sm-wish__ring--lg {
    /* Figma 14720:46549: an 85.5px square, mirrored and rotated 54deg
       counter-clockwise (the stone points down-right, the band runs off the card
       top; best pixel match against the Figma render of all flip/rotate combos);
       its 119.4px bounding box sits at (1.9,-52.6). The shadow offset is
       pre-rotated so it lands at (0,4) on screen like Figma's. */
    left: 18.87px;
    top: -35.64px;
    width: 85.49px;
    height: 85.49px;
    transform: rotate(-53.97deg) scaleY(-1);
    filter: drop-shadow(-3.24px -2.35px 4px rgba(0, 0, 0, .25));
}
.da-sm-header .wishlist_mobile_menu.da-sm-wish img.da-sm-wish__ring--sm {
    /* Figma 14720:46548: a 52.8px square rotated 174deg (upside down, so the
       stone falls below the card edge); bounding box 58px at (239.8,38.8). */
    left: 242.41px;
    top: 41.41px;
    width: 52.76px;
    height: 52.76px;
    transform: rotate(-174.1deg);
    filter: drop-shadow(-4.4px -3.56px 4px rgba(0, 0, 0, .25));
}
.da-sm-header .wishlist_mobile_menu.da-sm-wish .overlay_text.da-sm-wish__text {
    position: relative;
    inset: auto;
    z-index: 1;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: 112px; /* Figma Group 38162: heart + 87px text box, centred on the card */
    white-space: nowrap;
    font-family: 'FoundersGrotesk', sans-serif;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -0.5px;
    color: var(--sm-onyx);
    text-transform: uppercase;
}
.da-sm-header .wishlist_mobile_menu.da-sm-wish .overlay_text svg {
    width: 18.2px;
    height: 16.7px;
    flex: 0 0 auto;
    margin: 0 7px 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .da-sm-header .da-sm-bar,
    .da-sm-header .container.da-sm-container,
    .da-sm-header .da-sm-logo__desktop,
    .da-sm-header .da-sm-nav,
    .da-sm-header .da-sm-panel,
    .da-sm-header .da-sm-acc__panel,
    .da-sm-header .da-sm-search__field,
    .da-sm-overlay { transition: none !important; }
}

/* Verifier r4 follow-ups (Figma renders): */
/* the page dim sits under the header only; the promo bar above keeps #3D271F with a panel open */
body:has(header.da-sm-header) .da-promo { position: relative; z-index: 3; }
@media (min-width: 1200px) {
    /* Underline 3px below the letters, 1px thick -- the old menu's spacing. The Figma hairline
       (.5px pulled up 1px) sat on the letters once the line box is 14px under 15px text. Moved
       with transform so the nav row does not change height. */
    .da-sm-header button.da-sm-nav__btn.hover_underline_width::after { height: 1px; margin-top: 0; transform: translateY(1px); }
    /* bag glyph sits 1px higher in Figma (render ink y 74 vs 75) */
    .da-sm-header .da-sm-right .da-sm-cart svg { transform: translateY(-1px); }
}

/* Desktop header icons 30% larger and the count badges 18px with a 12px number (Vartika,
   2026-10-24: the badge dominated the 14px icons; numbers at least 10px, 12px preferred,
   without making the icons too big). The phone glyph scales inside its 40px button so the
   row doesn't shift; heart and bag get real sizes so their badges anchor to the new box. */
@media (min-width: 1200px) {
    .da-sm-header .da-sm-right button.contact_link.da-sm-icon svg { transform: scale(1.3); }
    .da-sm-header .da-sm-right .wishlist_d_menu .da-sm-ico svg { width: 19.5px; height: 18.2px; }
    .da-sm-header .da-sm-right .da-sm-cart .da-sm-ico svg,
    .da-sm-header .da-sm-right .da-sm-cart svg { width: 18.2px; height: 19.5px; }
    .da-sm-header .da-sm-right span.wishlist_number,
    .da-sm-header .da-sm-cart #cart_item_count {
        width: 18px;
        height: 18px;
        font-size: 12px;
        line-height: 18px;
    }
    .da-sm-header .da-sm-right span.wishlist_number { top: -9px; right: -11px; }
    .da-sm-header .da-sm-cart #cart_item_count { top: 0; right: 0; }
    /* Search magnifier at the same 1.3x so all four header icons read at one size (Vartika). */
    .da-sm-header .da-sm-search__icon svg { transform: scale(1.3); transform-origin: center; }
}