/* ==========================================================================
   Her Peptides — announcement bar, header, mega-menus, drawer, mobile bar
   Loaded after style.css; owns every rule the site header needs.
   ========================================================================== */

:root {
    --nav-radius: 16px;
    --nav-shadow: 0 26px 58px -20px rgba(150, 70, 105, .34);
    --nav-line: #f5e9ee;
}

/* ============================ announcement bar ============================ */

.announce-bar {
    position: relative;
    z-index: 1035;
    background: linear-gradient(90deg, #c8447e 0%, #e05c96 52%, #ec86b4 100%);
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .03em;
}

.announce-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 36px;
}

.announce-side {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.announce-side a,
.announce-side button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    padding: 0;
    color: rgba(255, 255, 255, .9);
    font: inherit;
    line-height: 1;
    transition: color .2s ease;
}

.announce-side a:hover,
.announce-side button:hover {
    color: #fff;
}

.announce-side i {
    font-size: 15px;
}

.announce-sep {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .38);
}

/* the three notices are stacked and cross-faded, so the bar never reflows */
.announce-rotator {
    position: relative;
    flex: 1 1 auto;
    height: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.announce-rotator li {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
}

.announce-rotator li.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.announce-rotator strong {
    border-radius: 4px;
    background: rgba(255, 255, 255, .2);
    padding: 2px 7px;
    font-weight: 600;
    letter-spacing: .08em;
}

.announce-rotator i {
    font-size: 14px;
    opacity: .85;
}

.announce-bar.is-dismissed {
    display: none;
}

/* ================================= header ================================= */

.site-header {
    position: sticky;
    z-index: 1030;
    top: 0;
    background: linear-gradient(180deg, #fff 0%, #fef7fa 100%);
    transition: background .25s ease, box-shadow .25s ease;
}

.site-header.is-stuck {
    background: #fff;
    box-shadow: 0 4px 22px rgba(190, 120, 150, .13);
}

/* Row 1 — brand, search, utilities. Row 2 — the seven menu items.
   Seven items plus this stacked serif lockup need ~1530px on one line, which no
   container gives us, so the menu gets its own full-width row underneath. */
.header-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 66px;
}

.header-inner .brand {
    flex: 0 0 auto;
    padding: 8px 0;
}

.header-inner .brand-name {
    font-size: 31px;
}

.header-nav {
    border-top: 1px solid var(--nav-line);
}

/* ------------------------------ header search ------------------------------ */

.header-search {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: #fff;
    padding: 4px 4px 4px 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.header-search:focus-within {
    border-color: rgba(224, 92, 150, .45);
    box-shadow: 0 0 0 3px rgba(224, 92, 150, .13);
}

.header-search > i {
    flex: none;
    color: var(--pink);
    font-size: 17px;
}

.header-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 7px 0;
    font-family: var(--sans);
    font-size: 13px;
}

.header-search input:focus {
    outline: 0;
}

.search-go {
    display: grid;
    flex: none;
    width: 30px;
    height: 30px;
    place-content: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--pink);
    font-size: 15px;
    line-height: 1;
    transition: background .2s ease;
}

.search-go:hover {
    background: var(--pink-dark);
}

/* specificity has to beat .util-btn's inline-flex, which is declared later */
.header-inner .drawer-toggle {
    display: none;
}

/* ------------------------------- root menu ------------------------------- */

.primary-nav {
    display: flex;
    justify-content: center;
}

.nav-root {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* static so the mega sheet resolves against .site-header and spans full width */
.nav-root-item {
    position: static;
}

.nav-root-item.has-drop {
    position: relative;
}

.nav-root-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    border-radius: 8px;
    background: none;
    padding: 14px 12px;
    color: #3d3739;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease;
}

.nav-root-link::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 6px;
    left: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--pink);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.nav-root-link:hover,
.nav-root-link:focus-visible,
.nav-root-item.is-open > .nav-root-link,
.nav-root-item.is-active > .nav-root-link {
    color: var(--pink);
}

.nav-root-item.is-open > .nav-root-link::after,
.nav-root-item.is-active > .nav-root-link::after {
    transform: scaleX(1);
}

.nav-caret {
    font-size: 12px;
    line-height: 1;
    opacity: .48;
    transition: transform .28s ease, opacity .2s ease;
}

.nav-root-item.is-open .nav-caret {
    opacity: 1;
    transform: rotate(180deg);
}

.nav-root-link .nav-new {
    margin-left: 1px;
}

/* ------------------------------ panels: shell ------------------------------ */

.mega,
.drop {
    position: absolute;
    z-index: 1029;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.nav-root-item.is-open > .mega,
.nav-root-item.is-open > .drop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* full-bleed sheet for the four mega-menus */
.mega {
    top: 100%;
    right: 0;
    left: 0;
    border-top: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--nav-shadow);
    transform: translateY(-9px);
}

.nav-root-item.is-open > .mega {
    transform: none;
}

.mega-inner {
    display: grid;
    gap: 8px 26px;
    max-height: calc(100vh - 130px);
    padding: 26px 0 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mega--4 .mega-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * The walker emits the real column count, so a menu built with two or three
 * columns doesn't stretch across a four-track grid. The tracks are capped
 * rather than left at 1fr: two columns sharing a full-width bar puts half a
 * screen of white between two short lists, which reads as a broken layout
 * rather than a deliberate one. They pack left, like the four-column panels.
 */
.mega--2 .mega-inner,
.mega--3 .mega-inner {
    justify-content: start;
}

.mega--2 .mega-inner {
    grid-template-columns: repeat(2, minmax(0, 300px));
}

.mega--3 .mega-inner {
    grid-template-columns: repeat(3, minmax(0, 300px));
}

.drop--1 .drop-inner {
    grid-template-columns: minmax(220px, 260px);
}

.drop--4 .drop-inner {
    grid-template-columns: repeat(4, minmax(200px, 240px));
}

/* anchored card for the three dropdowns */
.drop {
    top: 100%;
    left: 50%;
    border: 1px solid var(--border);
    border-radius: var(--nav-radius);
    background: #fff;
    padding: 22px 24px;
    box-shadow: var(--nav-shadow);
    /* --drop-shift (navigation.js) nudges a card back inside the viewport */
    transform: translate(calc(-50% + var(--drop-shift, 0px)), -9px);
}

.nav-root-item.is-open > .drop {
    transform: translate(calc(-50% + var(--drop-shift, 0px)), 0);
}

/* invisible bridge so the pointer can cross the gap without closing the panel */
.drop::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 14px;
}

.drop-inner {
    display: grid;
    gap: 26px;
}

.drop--2 .drop-inner {
    grid-template-columns: repeat(2, minmax(200px, 240px));
}

.drop--3 .drop-inner {
    grid-template-columns: repeat(3, minmax(212px, 240px));
}

/* ------------------------------ panel content ------------------------------ */

/*
 * A grid item's automatic minimum size is its content, so a column holding a
 * long link pushes its track wider than the 1fr it was given and paints over
 * its neighbour. A real menu is built from real product titles — much longer
 * than the short compound names the design was drawn with — so the columns
 * have to be told they are allowed to shrink.
 */
.mega-col {
    min-width: 0;
}

.mega-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 9px;
    color: var(--pink);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

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

.mega-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: -8px;
    border-radius: 9px;
    padding: 6px 8px;
    color: #4a4245;
    font-size: 13px;
    font-weight: 500;
    transition: background .18s ease, color .18s ease;
}

.mega-link:hover,
.mega-link:focus-visible {
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.mega-link .m-ico {
    display: grid;
    flex: none;
    width: 27px;
    height: 27px;
    place-content: center;
    border-radius: 9px;
    color: var(--pink);
    background: #fdf4f6;
    font-size: 15px;
    line-height: 1;
    transition: background .18s ease;
}

.mega-link:hover .m-ico {
    background: var(--pink-soft);
}

.mega-link .m-text {
    min-width: 0;
}

.nav-new {
    display: inline-block;
    border-radius: 20px;
    background: var(--pink);
    padding: 2px 6px;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
    vertical-align: middle;
}

.nav-new--soft {
    background: var(--pink-soft);
    color: var(--pink-dark);
}

/* 24 products read as a two-up index instead of one very tall column */
.mega-az {
    display: grid;
    /* minmax(0, …), not 1fr: the links below are nowrap, and an auto minimum
       would size each track to the longest product name in it. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-az > li {
    min-width: 0;
}

.az-link {
    display: block;
    margin-left: -6px;
    border-radius: 7px;
    padding: 4px 6px;
    color: #4a4245;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    /* The design truncates, because it was drawn with short compound names. A
       real catalogue has titles like "Insulin Syringes 1ml (100 pack)", and an
       index that ends every entry in an ellipsis indexes nothing — so long
       names wrap onto a second line instead of being cut off. */
    overflow-wrap: anywhere;
    transition: background .18s ease, color .18s ease;
}

.az-link:hover {
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.mega-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--pink);
    font-size: 12px;
    font-weight: 500;
}

.mega-more:hover {
    color: var(--pink-dark);
}

.mega-more i {
    font-size: 14px;
}

.mega-note {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.6;
}

/* editorial card that fills the fourth track of the 3-column megas */
.mega-promo {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 210px;
    border-radius: 14px;
    background: #fdf4f7;
    padding: 18px;
}

/* when the promo is a column on its own it fills that column's height */
.mega-col > .mega-promo:only-child {
    height: 100%;
}

.mega-promo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-promo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(253, 244, 247, .1) 20%, rgba(253, 244, 247, .93) 68%, #fdf4f7 100%);
}

.mega-promo-body {
    position: relative;
    z-index: 2;
}

.mega-promo .mp-title {
    display: block;
    margin: 6px 0 8px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}

.mega-promo .mp-text {
    display: block;
    margin: 0 0 12px;
    color: #776e71;
    font-size: 11.5px;
    line-height: 1.55;
}

/* reassurance strip pinned under the columns of a mega */
.mega-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 22px;
    margin-top: 18px;
    border-top: 1px solid var(--nav-line);
    padding: 12px 0 16px;
    color: var(--muted);
    font-size: 11.5px;
}

.mega-foot ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-foot li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mega-foot i {
    color: var(--pink);
    font-size: 16px;
}

/* ------------------------------ utility side ------------------------------ */

.header-utils {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}

.util-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    color: #3d3739;
    background: transparent;
    font-size: 19px;
    line-height: 1;
    transition: color .2s ease, background .2s ease;
}

.util-btn:hover,
.util-btn:focus-visible {
    color: var(--pink);
    background: var(--pink-tint);
}

.util-count,
.cart-count {
    position: absolute;
    top: 1px;
    right: 0;
    display: grid;
    min-width: 16px;
    height: 16px;
    place-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--pink);
    padding: 0 4px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
}

.util-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: var(--pink);
}

/* currency + language */
.cur-switch,
.lang-switch {
    position: relative;
}

.lang-switch.is-open > .util-btn {
    color: var(--pink);
    background: var(--pink-tint);
}

.cur-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    padding: 6px 9px 6px 11px;
    color: #4a4245;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    transition: border-color .2s ease, color .2s ease;
}

.cur-btn:hover,
.cur-switch.is-open .cur-btn {
    border-color: rgba(224, 92, 150, .45);
    color: var(--pink-dark);
}

.cur-switch.is-open .nav-caret {
    transform: rotate(180deg);
}

/* one dropdown panel, shared by the currency and language switchers */
.mini-menu {
    position: absolute;
    z-index: 1031;
    top: calc(100% + 8px);
    right: 0;
    visibility: hidden;
    min-width: 208px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    opacity: 0;
    background: #fff;
    padding: 6px;
    list-style: none;
    box-shadow: 0 14px 32px rgba(180, 120, 145, .18);
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.is-open > .mini-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Options are <button> in the static template and <a> under WordPress, where
   the server owns the language and currency — both must look identical. */
.mini-menu button,
.mini-menu a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    white-space: nowrap;
    border: 0;
    border-radius: 8px;
    background: none;
    padding: 8px 10px;
    color: #4a4245;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    transition: color .2s ease, background .2s ease;
}

.mini-menu button:hover,
.mini-menu a:hover,
.mini-menu button:focus-visible,
.mini-menu a:focus-visible {
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.mini-menu button i,
.mini-menu a i {
    flex: none;
    color: var(--pink);
    font-size: 15px;
    opacity: 0;
}

.mini-menu button.is-sel i,
.mini-menu a.is-sel i {
    opacity: 1;
}

.mini-menu .lang-code {
    margin-left: auto;
    padding-right: 4px;
    color: #a2969b;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
}

/* ------------------------------ search sheet ------------------------------ */

.search-sheet {
    position: absolute;
    z-index: 1029;
    top: 100%;
    right: 0;
    left: 0;
    visibility: hidden;
    border-top: 1px solid var(--border);
    opacity: 0;
    background: #fff;
    padding: 22px 0 26px;
    box-shadow: var(--nav-shadow);
    transform: translateY(-9px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    pointer-events: none;
}

.search-sheet.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #f4d3e0;
    border-radius: 40px;
    background: #fff;
    padding: 6px 6px 6px 18px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.search-field button.btn {
    border-radius: 40px;
}

.search-field:focus-within {
    border-color: rgba(224, 92, 150, .45);
    box-shadow: 0 0 0 3px rgba(224, 92, 150, .15);
}

.search-field > i {
    color: var(--pink);
    font-size: 19px;
}

.search-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 0;
    font-family: var(--sans);
    font-size: 14px;
}

.search-field input:focus {
    outline: 0;
}

.search-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 40px;
    margin-top: 18px;
}

.search-meta h5 {
    margin: 0 0 10px;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-chips a {
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 6px 14px;
    color: #5d5457;
    font-size: 12.5px;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.search-chips a:hover {
    border-color: rgba(224, 92, 150, .45);
    color: var(--pink-dark);
    background: var(--pink-tint);
}

/* ------------------------------ live results ------------------------------ */

.live-spinner {
    display: none;
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--pink-soft);
    border-top-color: var(--pink);
    border-radius: 50%;
    animation: hp-live-spin .7s linear infinite;
}

.search-field.is-loading .live-spinner {
    display: block;
}

@keyframes hp-live-spin {
    to {
        transform: rotate(360deg);
    }
}

.live-results {
    margin-top: 18px;
}

.live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px 40px;
}

.live-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.live-head h5 {
    margin: 0;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.live-count {
    margin-inline-start: 6px;
    border-radius: 20px;
    background: var(--pink-tint);
    padding: 2px 7px;
    color: var(--pink-dark);
    letter-spacing: 0;
}

.live-all {
    color: var(--pink-dark);
    font-size: 12px;
    font-weight: 600;
}

.live-all:hover {
    text-decoration: underline;
}

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

.live-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    padding: 7px 8px;
    margin-inline: -8px;
    color: var(--ink);
    transition: background .15s ease;
}

.live-hit:hover,
.live-hit:focus-visible {
    background: var(--pink-tint);
    outline: 0;
}

.live-thumb {
    flex: none;
    overflow: hidden;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

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

.live-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.live-title {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-title mark {
    border-radius: 3px;
    background: var(--pink-soft);
    padding: 0 1px;
    color: inherit;
}

.live-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    color: var(--muted);
    font-size: 12px;
}

.live-sub .blog-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.live-price {
    color: var(--pink-dark);
    font-weight: 600;
}

.live-price del {
    color: var(--muted);
    font-weight: 400;
}

.live-price ins {
    text-decoration: none;
}

.live-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    color: var(--pink-dark);
    font-size: 13px;
    font-weight: 600;
}

.live-footer:hover,
.live-footer:focus-visible,
.live-all:focus-visible {
    color: var(--pink);
}

.live-empty {
    padding: 18px 0 6px;
    text-align: center;
    color: var(--muted);
    font-size: 12.5px;
}

.live-empty i {
    color: var(--pink);
    font-size: 26px;
}

.live-empty p {
    margin: 6px 0 2px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

/* -------------------------------- backdrop -------------------------------- */

.nav-backdrop {
    position: fixed;
    z-index: 1020;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    background: rgba(58, 30, 44, .3);
    transition: opacity .25s ease, visibility .25s;
}

.nav-backdrop.is-on {
    visibility: visible;
    opacity: 1;
}

/* ============================== mobile drawer ============================== */

.nav-scrim {
    position: fixed;
    z-index: 1070;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    background: rgba(58, 30, 44, .45);
    transition: opacity .3s ease, visibility .3s;
}

.nav-scrim.is-on {
    visibility: visible;
    opacity: 1;
}

.nav-drawer {
    position: fixed;
    z-index: 1080;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    visibility: hidden;
    width: min(92vw, 396px);
    flex-direction: column;
    background: #fff;
    transform: translateX(-100%);
    transition: transform .34s cubic-bezier(.4, 0, .2, 1), visibility .34s;
}

.nav-drawer.is-open {
    visibility: visible;
    transform: none;
}

.drawer-top {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--nav-line);
    padding: 12px 18px;
}

.drawer-top .brand {
    padding: 0;
}

.drawer-top .brand-name {
    font-size: 25px;
}

.drawer-close {
    display: grid;
    flex: none;
    width: 36px;
    height: 36px;
    place-content: center;
    border: 0;
    border-radius: 50%;
    color: #4a4245;
    background: var(--pink-tint);
    font-size: 20px;
    line-height: 1;
}

.drawer-close:hover {
    color: #fff;
    background: var(--pink);
}

.drawer-scroll {
    flex: 1 1 auto;
    padding: 16px 18px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.drawer-search {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #f4d3e0;
    border-radius: 30px;
    background: #fff;
    padding: 9px 16px;
}

.drawer-search i {
    color: var(--pink);
    font-size: 18px;
}

.drawer-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: 13.5px;
}

.drawer-search input:focus {
    outline: 0;
}

.drawer-cta {
    display: grid;
    gap: 9px;
    margin: 16px 0 20px;
}

.drawer-cta .btn-pink {
    justify-content: center;
    padding: 12px 20px;
    font-size: 13.5px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 40px;
    background: #fff;
    padding: 11px 20px;
    color: #4a4245;
    font-size: 13.5px;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.btn-ghost:hover {
    border-color: rgba(224, 92, 150, .45);
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.btn-ghost i {
    color: var(--pink);
    font-size: 17px;
}

.drawer-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--pink);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.drawer-block {
    margin-bottom: 22px;
}

/* goal chips — the drawer's first browse step.
   Named .drawer-goals, not .goal-grid: shop.css already owns that one. */
.drawer-goals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.drawer-goals a {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 9px 10px;
    color: #4a4245;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.drawer-goals a:hover {
    border-color: rgba(224, 92, 150, .45);
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.drawer-goals i {
    flex: none;
    color: var(--pink);
    font-size: 17px;
}

/* accordions */
.acc-item {
    border-bottom: 1px solid var(--nav-line);
}

.acc-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    background: none;
    padding: 15px 2px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 500;
    text-align: left;
}

.acc-btn i {
    color: var(--pink);
    font-size: 16px;
    transition: transform .3s ease;
}

.acc-item.is-open .acc-btn {
    color: var(--pink-dark);
}

.acc-item.is-open .acc-btn i {
    transform: rotate(180deg);
}

.acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s ease;
}

.acc-item.is-open .acc-panel {
    grid-template-rows: 1fr;
}

.acc-panel > div {
    overflow: hidden;
}

.acc-body {
    padding-bottom: 6px;
}

.acc-body .mega-col + .mega-col {
    margin-top: 14px;
}

.acc-body .mega-col-title {
    font-size: 9.5px;
}

.acc-body .mega-link {
    padding: 8px;
    font-size: 13px;
}

.acc-body .mega-az {
    grid-template-columns: 1fr;
}

/* drawer utility rows */
.drawer-util {
    border-top: 1px solid var(--nav-line);
    padding-top: 18px;
}

.util-rows {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.util-rows a,
.util-rows button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 11px;
    border: 0;
    border-radius: 10px;
    background: none;
    padding: 10px 8px;
    color: #4a4245;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

.util-rows a:hover,
.util-rows button:hover {
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.util-rows i {
    color: var(--pink);
    font-size: 18px;
}

.util-rows .nav-new {
    margin-left: auto;
}

/* three languages don't cycle well, so the drawer shows them as pills */
.util-lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 8px;
    color: #4a4245;
    font-size: 13px;
    font-weight: 500;
}

.util-lang > span:first-child {
    display: flex;
    align-items: center;
    gap: 11px;
}

.util-lang i {
    color: var(--pink);
    font-size: 18px;
}

.lang-pills {
    display: flex;
    flex: none;
    gap: 6px;
}

.util-rows .lang-pills button,
.util-rows .lang-pills a {
    width: auto;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.util-rows .lang-pills button.is-sel,
.util-rows .lang-pills a.is-sel {
    border-color: var(--pink);
    color: #fff;
    background: var(--pink);
}

.drawer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--nav-line);
    padding-top: 16px;
    color: var(--muted);
    font-size: 11.5px;
}

.drawer-foot .socials a {
    font-size: 16px;
}

/* ============================ sticky bottom bar ============================ */

.mobile-bar {
    position: fixed;
    z-index: 1050;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    background: #fff;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 20px rgba(190, 120, 150, .14);
}

.mobile-bar a,
.mobile-bar button {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 3px;
    border: 0;
    background: none;
    padding: 7px 4px 6px;
    color: #6b6265;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .02em;
}

.mobile-bar i {
    font-size: 20px;
    line-height: 1;
}

.mobile-bar a:hover,
.mobile-bar button:hover,
.mobile-bar .is-active {
    color: var(--pink);
}

.mobile-bar .cart-count {
    top: 4px;
    right: 50%;
    margin-right: -22px;
}

.nav-lock {
    overflow: hidden;
}

/* ===================== centered single-row header ===================== */

/* Layout only — the mega/drop panels, the search sheet, the mobile drawer and
   the bottom bar are all shared with the classic header above. */

.site-header--centered .header-inner {
    gap: 24px;
    min-height: 74px;
}

.site-header--centered .primary-nav {
    flex: 1 1 auto;
    justify-content: center;
}

.site-header--centered .nav-root {
    gap: 6px;
}

.site-header--centered .nav-root-link {
    padding: 12px 12px;
    font-size: 14px;
}

/* The item's <li> only boxes the link (the panel is absolutely positioned), so
   without a bridge the pointer crosses dead space between the link and the
   full-bleed mega and the close timer fires. .drop already has its own ::before. */
.site-header--centered .mega::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 22px;
}

@media (max-width: 991.98px) {
    .site-header--centered .primary-nav {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mega,
    .drop,
    .nav-drawer,
    .nav-scrim,
    .nav-backdrop,
    .search-sheet,
    .acc-panel,
    .announce-rotator li,
    .nav-caret {
        transition-duration: .01ms;
    }
}

/* ================================ responsive ================================ */

/* the sheet's own field is only needed where the header field is hidden */
@media (min-width: 992px) {
    .util-only-sm {
        display: none;
    }

    /*.search-sheet .search-field {*/
    /*    display: none;*/
    /*}*/
}

/* 992–1199: the container is 960px, and the menu row needs ~915px of it */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .header-inner .brand-name {
        font-size: 27px;
    }

    .header-search {
        max-width: 320px;
    }

    .nav-root-link {
        padding: 14px 9px;
        font-size: 13.4px;
    }

    .nav-root-link::after {
        right: 9px;
        left: 9px;
    }

    .util-btn {
        width: 33px;
        font-size: 18px;
    }
}

/*
 * The centered header's single row — logo, seven root links, utilities — needs
 * ~1,240px at full size, but the container is 1,140px up to 1399px and 960px
 * below 1200px, so the row ran past the viewport and the page scrolled sideways.
 * Two steps of tighter type and spacing fit it inside the same container, so the
 * logo still lines up with the page. From 1400px the 1,320px container holds it.
 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-header--centered .header-inner {
        gap: 18px;
    }

    .site-header--centered .brand-logo {
        max-height: 56px;
    }

    .site-header--centered .nav-root {
        gap: 2px;
    }

    .site-header--centered .nav-root-link {
        gap: 4px;
        padding: 12px 9px;
        font-size: 13.5px;
    }

    .site-header--centered .nav-root-link::after {
        right: 9px;
        left: 9px;
    }

    .site-header--centered .nav-caret {
        font-size: 10px;
    }

    .site-header--centered .util-btn {
        width: 34px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header--centered .header-inner {
        gap: 12px;
    }

    .site-header--centered .brand-logo {
        max-height: 46px;
    }

    .site-header--centered .brand-name {
        font-size: 26px;
    }

    .site-header--centered .nav-root {
        gap: 0;
    }

    .site-header--centered .nav-root-link {
        gap: 3px;
        padding: 12px 6px;
        font-size: 12.5px;
    }

    .site-header--centered .nav-root-link::after {
        right: 6px;
        left: 6px;
    }

    .site-header--centered .nav-caret {
        font-size: 9px;
    }

    .site-header--centered .nav-new {
        padding: 1px 4px;
        font-size: 7px;
    }

    .site-header--centered .header-utils {
        gap: 0;
    }

    .site-header--centered .util-btn {
        width: 30px;
        font-size: 17px;
    }
}

@media (max-width: 991.98px) {
    .site-header {
        position: sticky;
    }

    .header-inner {
        gap: 8px;
        min-height: 62px;
    }

    .header-inner .brand {
        margin: 0 auto;
        padding: 8px 0;
        text-align: center;
    }

    .header-inner .brand-name {
        font-size: 26px;
    }

    .header-nav,
    .header-search,
    .header-utils .util-hide-sm {
        display: none;
    }

    .header-inner .drawer-toggle {
        display: inline-flex;
    }

    .search-sheet {
        padding: 16px 0 20px;
    }

    /* the sheet hangs off a sticky header, so long results scroll inside it */
    .live-results {
        overflow-y: auto;
        max-height: calc(100vh - 170px);
        max-height: calc(100dvh - 170px);
        overscroll-behavior: contain;
    }

    .mobile-bar {
        display: grid;
    }

    /* keeps the sticky bar clear of the page's last section */
    body {
        padding-bottom: 58px;
    }
}

@media (max-width: 575.98px) {
    .header-inner .brand-name {
        font-size: 23px;
    }

    .header-inner .brand-tag {
        font-size: 7px;
    }

    .announce-rotator {
        font-size: 11px;
    }

    .search-meta {
        gap: 16px 24px;
    }

    .search-field button.btn i {
        display: none;
    }

    .site-header--centered .header-inner {
        min-height: 60px;
    }

    #siteHeader .brand-logo {
        max-height: 48px;
    }
}