/*
 * Header Builder V2 — storefront styles (Classic and Modern themes, desktop and phone).
 *
 * Every colour and size comes from custom properties the renderer writes for this header from the
 * builder settings (--hd-*); the two states (top / scrolled) are two sets of the same properties.
 * Logical properties throughout, so right-to-left needs no extra rules except where an arrow must
 * point the other way. Loaded only by stores that put Header V2 on the store.
 */

.hdv2-slot {
    position: relative;
    z-index: 1030;
}

.hdv2,
.hdv2-sheet,
.hdv2-drawer {
    --hd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --hd-k: 1;
    font-family: var(--hd-font, inherit);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

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

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

.hdv2 button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

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

.hdv2 img {
    max-width: none;
}

.hdv2 [hidden] {
    display: none !important;
}

.hdv2 :focus-visible {
    outline: 2px solid var(--hd-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.hdv2-ic {
    display: inline-flex;
    flex: none;
    inline-size: 1.25em;
    block-size: 1.25em;
}

.hdv2-ic svg {
    inline-size: 100%;
    block-size: 100%;
    display: block;
}

[dir='rtl'] .hdv2-flip svg,
.hdv2-sheet[dir='rtl'] .hdv2-flip svg,
.hdv2-drawer[dir='rtl'] .hdv2-flip svg {
    transform: scaleX(-1);
}

/* ================================================================== bar & rows */

.hdv2-bar {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1030;
    color: var(--hd-l1-text);
    transition: transform 0.32s var(--hd-ease), box-shadow 0.3s ease;
}

/* the whole-header background on a pseudo element, so panels below can still blur the page */
.hdv2-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hd-bg);
    -webkit-backdrop-filter: blur(var(--hd-bg-blur));
    backdrop-filter: blur(var(--hd-bg-blur));
    transition: background 0.3s ease;
    pointer-events: none;
}

.hdv2.is-fixed .hdv2-bar {
    position: fixed;
}

.hdv2.is-hidden .hdv2-bar {
    transform: translateY(-100%);
}

.hdv2[data-state='scrolled'].is-fixed .hdv2-bar,
.hdv2--classic.is-fixed .hdv2-bar {
    box-shadow: var(--hd-shadow);
}

.hdv2-shadow--none .hdv2-bar {
    box-shadow: none !important;
}

.hdv2.is-shrunk {
    --hd-k: var(--hd-shrink);
}

.hdv2-in {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    inline-size: 100%;
    max-inline-size: var(--hd-maxw);
    block-size: 100%;
    margin-inline: auto;
    padding-inline: var(--hd-padx);
}

.hdv2-rule {
    block-size: var(--hd-rule);
    background: var(--hd-rule-c);
}

.hdv2-l1,
.hdv2-l2 {
    position: relative;
    display: none;
    isolation: isolate;
}

.hdv2-l1::before,
.hdv2-l2::before,
.hdv2-m::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: background 0.3s ease;
}

/* layer 1 menus (search results, account, cart) open over the menu bar */
.hdv2-l1,
.hdv2-m {
    z-index: 3;
}

.hdv2-l2 {
    z-index: 2;
}

.hdv2-layer {
    z-index: 1;
}

.hdv2-l1 {
    block-size: calc(var(--hd-l1h) * var(--hd-k));
    color: var(--hd-l1-text);
    font-size: var(--hd-l1fs);
    font-weight: var(--hd-l1fw);
    box-shadow: inset 0 -1px 0 var(--hd-l1-line);
    transition: block-size 0.25s var(--hd-ease);
}

.hdv2-l1::before {
    background: var(--hd-l1-bg);
    -webkit-backdrop-filter: blur(var(--hd-l1-blur));
    backdrop-filter: blur(var(--hd-l1-blur));
}

.hdv2-l2 {
    block-size: var(--hd-l2h);
    color: var(--hd-l2-text);
    font-size: var(--hd-l2fs);
    font-weight: var(--hd-l2fw);
    box-shadow: inset 0 -1px 0 var(--hd-l2-line);
    transition: block-size 0.28s var(--hd-ease), opacity 0.2s ease;
}

.hdv2-l2::before {
    background: var(--hd-l2-bg);
    -webkit-backdrop-filter: blur(var(--hd-l2-blur));
    backdrop-filter: blur(var(--hd-l2-blur));
}

.hdv2.is-navhidden .hdv2-l2 {
    block-size: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.hdv2-grow {
    flex: 1 1 auto;
}

/* readability shade over a light banner (Modern, over the banner, at the top) */
.hdv2-scrim {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: calc(100% + 72px);
    z-index: -2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, var(--hd-scrim)) 0%, rgba(0, 0, 0, calc(var(--hd-scrim) * 0.55)) 55%, rgba(0, 0, 0, 0) 100%);
    transition: opacity 0.3s ease;
}

.hdv2.show-scrim .hdv2-scrim {
    opacity: 1;
}

@media (min-width: 992px) {
    .hdv2-l1,
    .hdv2-l2 {
        display: block;
    }

    .hdv2-m {
        display: none;
    }
}

/* ================================================================== logo */

.hdv2-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    margin-inline-end: 10px;
}

.hdv2-logo-img {
    display: block;
    block-size: calc(var(--hd-logoh) * var(--hd-k));
    inline-size: auto;
    max-inline-size: 260px;
    object-fit: contain;
    transition: block-size 0.25s var(--hd-ease);
}

.hdv2-logo--m .hdv2-logo-img {
    block-size: var(--hd-logohm);
    max-inline-size: 170px;
}

.hdv2[data-logo='on_light'] .hdv2-bar .is-on-dark,
.hdv2[data-logo='on_dark'] .hdv2-bar .is-on-light {
    display: none;
}

.hdv2-logo-text {
    font-size: 1.35em;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ================================================================== layer-1 items */

.hdv2-item {
    position: relative;
    flex: none;
}

.hdv2-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 40px;
    padding-inline: 8px;
    border-radius: 10px;
    color: inherit;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease;
}

.hdv2-l1 .hdv2-btn:hover,
.hdv2-l1 .hdv2-btn[aria-expanded='true'] {
    color: var(--hd-l1-hover);
}

.hdv2-ibox {
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: var(--hd-icon);
    block-size: var(--hd-icon);
    color: var(--hd-icon-c);
    font-size: var(--hd-icon);
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.hdv2-ibox > .hdv2-ic {
    inline-size: var(--hd-icon);
    block-size: var(--hd-icon);
}

.hdv2-btn:hover .hdv2-ibox {
    color: var(--hd-icon-hover);
}

.hdv2-item > .hdv2-btn > .hdv2-ic:first-child {
    inline-size: var(--hd-icon);
    block-size: var(--hd-icon);
    color: var(--hd-icon-c);
}

/* circle and glass icon buttons */
.hdv2-icons--circle .hdv2-ibox,
.hdv2-icons--glass .hdv2-ibox {
    inline-size: calc(var(--hd-icon) + 20px);
    block-size: calc(var(--hd-icon) + 20px);
    border-radius: 999px;
    background: var(--hd-icon-bg);
    border: 1px solid var(--hd-icon-line);
}

.hdv2-icons--glass .hdv2-ibox {
    -webkit-backdrop-filter: blur(var(--hd-glass-blur));
    backdrop-filter: blur(var(--hd-glass-blur));
}

.hdv2-icons--circle .hdv2-ibox > .hdv2-ic,
.hdv2-icons--glass .hdv2-ibox > .hdv2-ic {
    inline-size: calc(var(--hd-icon) * 0.9);
    block-size: calc(var(--hd-icon) * 0.9);
}

.hdv2-icons--circle .hdv2-btn,
.hdv2-icons--glass .hdv2-btn {
    padding-inline: 2px;
}

.hdv2-icons--circle .hdv2-btn:hover .hdv2-ibox,
.hdv2-icons--glass .hdv2-btn:hover .hdv2-ibox {
    border-color: var(--hd-icon-hover);
}

/* account / language as a pill in the glass style */
.hdv2-icons--glass .hdv2-item--account > .hdv2-btn,
.hdv2-icons--glass .hdv2-item--language > .hdv2-btn {
    padding-inline: 14px;
    min-block-size: calc(var(--hd-icon) + 20px);
    border-radius: 999px;
    background: var(--hd-icon-bg);
    border: 1px solid var(--hd-icon-line);
    -webkit-backdrop-filter: blur(var(--hd-glass-blur));
    backdrop-filter: blur(var(--hd-glass-blur));
}

.hdv2-item-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    border-radius: 999px;
}

.hdv2-labels--below .hdv2-l1 .hdv2-item > .hdv2-btn {
    flex-direction: column;
    gap: 2px;
    font-size: 11.5px;
}

.hdv2-chev {
    inline-size: 14px;
    block-size: 14px;
    opacity: 0.75;
    transition: transform 0.2s ease;
}

[aria-expanded='true'] > .hdv2-chev,
[aria-expanded='true'] .hdv2-chev {
    transform: rotate(180deg);
}

.hdv2-count {
    position: absolute;
    inset-block-start: -7px;
    inset-inline-end: -9px;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--hd-badge);
    color: var(--hd-badge-text);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.hdv2-icons--circle .hdv2-count,
.hdv2-icons--glass .hdv2-count {
    inset-block-start: -3px;
    inset-inline-end: -3px;
}

.hdv2-count--text {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hdv2-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    block-size: 32px;
    padding-inline: 12px;
    border-radius: 999px;
    background: var(--hd-l1-soft);
    font-size: 12.5px;
    font-weight: 700;
}

/* tighter between 992 and 1199: icons without their text */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hdv2-l1 .hdv2-item:not(.hdv2-item--account):not(.hdv2-item--language) .hdv2-label {
        display: none;
    }

    .hdv2-search {
        margin-inline: 10px;
    }
}

/* ================================================================== search */

.hdv2-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-inline-size: 180px;
    max-inline-size: 760px;
    block-size: 44px;
    margin-inline: 18px;
    border-radius: var(--hd-sr);
    background: var(--hd-search-bg);
    border: 1px solid var(--hd-search-line);
    color: var(--hd-search-text);
    transition: box-shadow 0.2s ease, max-inline-size 0.3s var(--hd-ease), background 0.2s ease, border-color 0.2s ease;
}

.hdv2--modern .hdv2-search--bar {
    max-inline-size: 560px;
    -webkit-backdrop-filter: blur(var(--hd-glass-blur));
    backdrop-filter: blur(var(--hd-glass-blur));
}

.hdv2--modern .hdv2-search--bar.can-expand.is-focus {
    max-inline-size: 760px;
}

.hdv2-search.is-focus {
    box-shadow: 0 0 0 3px var(--hd-accent-soft);
    border-color: var(--hd-accent);
}

.hdv2-search-icon {
    display: inline-flex;
    padding-inline-start: 14px;
    color: var(--hd-search-icon);
    font-size: 18px;
}

.hdv2-search.btn-icon .hdv2-search-icon {
    display: none;
}

.hdv2-search-input {
    flex: 1 1 auto;
    min-inline-size: 0;
    block-size: 100%;
    padding-inline: 14px 8px;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    -webkit-appearance: none;
    appearance: none;
}

.hdv2-search-input::-webkit-search-cancel-button,
.hdv2-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}

.hdv2-search-input::placeholder {
    color: var(--hd-search-ph);
    opacity: 1;
}

.hdv2-search.has-rot .hdv2-search-input::placeholder {
    color: transparent;
}

.hdv2-search:not(.btn-icon) .hdv2-search-input {
    padding-inline-start: 10px;
}

.hdv2-ph {
    position: absolute;
    inset-inline-start: 15px;
    inset-block: 0;
    display: flex;
    align-items: center;
    gap: 0.3em;
    max-inline-size: calc(100% - 90px);
    overflow: hidden;
    color: var(--hd-search-ph);
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    pointer-events: none;
}

.hdv2-search:not(.btn-icon) .hdv2-ph {
    inset-inline-start: 46px;
}

.hdv2-search.has-value .hdv2-ph {
    display: none;
}

.hdv2-ph-rot {
    display: inline-block;
    font-weight: 600;
    transition: transform 0.26s var(--hd-ease), opacity 0.26s ease;
}

.hdv2-ph-rot.is-out {
    transform: translateY(-70%);
    opacity: 0;
}

.hdv2-ph-rot.is-in {
    animation: hdv2-rot-in 0.32s var(--hd-ease);
}

@keyframes hdv2-rot-in {
    from {
        transform: translateY(70%);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.hdv2-search-clear {
    display: inline-grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 999px;
    color: var(--hd-search-ph) !important;
    font-size: 15px;
}

.hdv2-search-go {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-inline-size: 36px;
    block-size: 36px;
    margin-inline: 2px 4px;
    border-radius: max(4px, calc(var(--hd-sr) - 4px));
    color: var(--hd-search-icon) !important;
    font-size: 19px;
    transition: background 0.18s ease;
}

.hdv2-search-go:hover {
    background: var(--hd-l1-soft) !important;
}

.hdv2-search-go--text {
    padding-inline: 18px;
    background: var(--hd-accent) !important;
    color: var(--hd-on-accent) !important;
    font-size: 14px;
    font-weight: 700;
}

.hdv2-search-go--text:hover {
    filter: brightness(1.06);
}

/* results under the box */
.hdv2-results {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline: 0;
    z-index: 5;
    max-block-size: min(70vh, 560px);
    overflow: auto;
    padding: 10px;
    border-radius: var(--hd-dr);
    background: var(--hd-mega-solid);
    color: var(--hd-mega-text);
    border: 1px solid var(--hd-mega-line);
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.35);
    font-size: 14px;
    font-weight: 400;
    text-align: start;
    animation: hdv2-drop 0.16s var(--hd-ease);
}

.hdv2--mega-glass .hdv2-results {
    background: var(--hd-mega-bg);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.hdv2-res-group + .hdv2-res-group {
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--hd-mega-line);
}

.hdv2-res-title {
    padding: 4px 8px 8px;
    color: var(--hd-mega-title);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hdv2-res-title.is-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hdv2-link-btn {
    color: var(--hd-mega-hover) !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.hdv2-res-msg {
    padding: 18px 10px;
    color: var(--hd-mega-text);
    text-align: center;
}

.hdv2-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    padding: 8px;
    border-radius: 10px;
    color: var(--hd-mega-link) !important;
    text-align: start;
}

.hdv2-opt:hover,
.hdv2-opt[aria-selected='true'] {
    background: var(--hd-side-active);
    color: var(--hd-side-active-text) !important;
}

.hdv2-opt mark {
    background: none;
    color: inherit;
    font-weight: 800;
    padding: 0;
}

.hdv2-res-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-inline: 4px;
}

.hdv2-opt.is-chip {
    inline-size: auto;
    padding: 6px 12px;
    border: 1px solid var(--hd-mega-line);
    border-radius: 999px;
    font-size: 13px;
}

.hdv2-opt.is-chip img {
    inline-size: 22px;
    block-size: 22px;
    object-fit: contain;
    border-radius: 999px;
}

.hdv2-opt.is-brand {
    inline-size: auto;
    block-size: 44px;
    padding: 6px 14px;
    border: 1px solid var(--hd-mega-line);
}

.hdv2-opt.is-brand img {
    max-block-size: 28px;
    max-inline-size: 90px;
    object-fit: contain;
}

.hdv2-opt .hdv2-ic {
    color: var(--hd-mega-hover);
    opacity: 0.85;
}

.hdv2-res-img {
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    border: 1px solid var(--hd-mega-line);
}

.hdv2-res-img img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.hdv2-res-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-inline-size: 0;
}

.hdv2-res-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.35;
}

.hdv2-res-price,
.hdv2-prod-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.hdv2-res-price b,
.hdv2-prod-price b {
    color: var(--hd-mega-title);
    font-weight: 800;
}

.hdv2-res-price s,
.hdv2-prod-price s {
    opacity: 0.6;
    font-size: 12px;
}

.hdv2-opt.is-all {
    justify-content: center;
    margin-block-start: 8px;
    border-block-start: 1px solid var(--hd-mega-line);
    border-radius: 0 0 10px 10px;
    color: var(--hd-mega-hover) !important;
    font-weight: 700;
}

.hdv2-recent {
    display: flex;
    align-items: center;
}

.hdv2-recent .hdv2-opt {
    flex: 1 1 auto;
}

.hdv2-recent-x {
    display: inline-grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 999px;
    color: var(--hd-mega-text) !important;
    opacity: 0.55;
}

.hdv2-recent-x:hover {
    opacity: 1;
}

/* ================================================================== menu bar */

.hdv2-l2 .hdv2-in {
    gap: 12px;
}

.hdv2-nav {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-inline-size: 0;
    block-size: 100%;
}

.hdv2-nav-list {
    display: flex;
    align-items: center;
    gap: var(--hd-l2gap);
    inline-size: 100%;
    block-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.hdv2-nav-list::-webkit-scrollbar {
    display: none;
}

.hdv2-align--center .hdv2-l2 .hdv2-ni:first-child {
    margin-inline-start: auto;
}

.hdv2-align--center .hdv2-l2 .hdv2-ni:last-child {
    margin-inline-end: auto;
}

.hdv2-align--end .hdv2-l2 .hdv2-ni:first-child {
    margin-inline-start: auto;
}

.hdv2-ni {
    display: flex;
    align-items: center;
    flex: none;
    block-size: 100%;
}

.hdv2-nl {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    block-size: min(40px, calc(100% - 10px));
    padding-inline: 14px;
    border: 1.5px solid transparent;
    border-radius: var(--hd-pr);
    color: var(--hd-l2-text);
    font-size: var(--hd-l2fs);
    font-weight: var(--hd-l2fw);
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.hdv2--upper .hdv2-nl-text {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hdv2-nl > .hdv2-ic:not(.hdv2-chev) {
    inline-size: 18px;
    block-size: 18px;
}

.hdv2-nl:hover,
.hdv2-nl[aria-expanded='true'] {
    color: var(--hd-l2-hover);
}

.hdv2--modern .hdv2-nl:hover,
.hdv2--modern .hdv2-nl[aria-expanded='true'],
.hdv2-active--pill .hdv2-nl:hover,
.hdv2-active--outline .hdv2-nl:hover {
    background: var(--hd-l2-soft);
}

/* active page */
.hdv2-active--pill .hdv2-nl.is-active {
    background: var(--hd-active-bg);
    color: var(--hd-active-text);
}

.hdv2-active--outline .hdv2-nl.is-active {
    border-color: var(--hd-active-bg);
    color: var(--hd-active-text);
}

.hdv2-active--text .hdv2-nl.is-active {
    color: var(--hd-active-bg);
}

.hdv2-active--underline .hdv2-nl {
    block-size: 100%;
    border-radius: 0;
    padding-inline: 12px;
}

.hdv2-active--underline .hdv2-nl::after {
    content: '';
    position: absolute;
    inset-inline: 12px;
    inset-block-end: 0;
    block-size: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--hd-active-text);
    transform: scaleX(0);
    transition: transform 0.25s var(--hd-ease);
}

.hdv2-active--underline .hdv2-nl:hover::after,
.hdv2-active--underline .hdv2-nl[aria-expanded='true']::after,
.hdv2-active--underline .hdv2-nl.is-active::after {
    transform: scaleX(1);
}

.hdv2-active--underline .hdv2-nl.is-active {
    color: var(--hd-active-text);
}

/* highlighted items */
.hdv2-hl--accent > .hdv2-nl {
    background: var(--hd-hl, var(--hd-accent)) !important;
    color: var(--hd-hl-text, var(--hd-on-accent)) !important;
    border-radius: var(--hd-pr);
    block-size: min(38px, calc(100% - 12px));
}

.hdv2-hl--accent > .hdv2-nl::after {
    display: none;
}

.hdv2-hl--outline > .hdv2-nl {
    border-color: var(--hd-hl, var(--hd-outline));
    border-radius: var(--hd-pr);
    block-size: min(38px, calc(100% - 12px));
}

.hdv2-hl--text > .hdv2-nl {
    color: var(--hd-hl, var(--hd-accent));
    font-weight: 700;
}

.hdv2-badge {
    display: inline-flex;
    align-items: center;
    block-size: 18px;
    padding-inline: 7px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.hdv2-badge--sale {
    background: #e11d48;
}

.hdv2-badge--hot {
    background: #f97316;
}

.hdv2-badge--accent {
    background: var(--hd-accent);
    color: var(--hd-on-accent);
}

.hdv2-nav-scroll {
    position: absolute;
    inset-block: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: 36px;
    color: var(--hd-l2-text) !important;
    font-size: 18px;
}

.hdv2-nav-scroll.is-prev {
    inset-inline-start: 0;
}

.hdv2-nav-scroll.is-next {
    inset-inline-end: 0;
}

.hdv2-nav-scroll::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hd-l2-solid);
    -webkit-mask-image: linear-gradient(var(--hd-fade-dir, to right), #000 55%, transparent);
    mask-image: linear-gradient(var(--hd-fade-dir, to right), #000 55%, transparent);
}

.hdv2-nav-scroll.is-next {
    --hd-fade-dir: to left;
}

[dir='rtl'] .hdv2-nav-scroll.is-prev {
    --hd-fade-dir: to left;
}

[dir='rtl'] .hdv2-nav-scroll.is-next {
    --hd-fade-dir: to right;
}

/* ================================================================== buttons & announcements */

.hdv2-ctas {
    display: flex;
    align-items: center;
    flex: none;
    gap: 10px;
}

.hdv2-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    block-size: 40px;
    padding-inline: 20px;
    border: 1.5px solid transparent;
    border-radius: var(--hd-pr);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: transform 0.2s var(--hd-ease), background 0.2s ease, border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.hdv2-cta:hover {
    transform: translateY(-1px);
}

.hdv2-cta--solid {
    background: var(--hd-cta, var(--hd-accent));
    color: var(--hd-cta-text, var(--hd-on-accent)) !important;
    border-color: var(--hd-cta, var(--hd-accent));
}

.hdv2-cta--solid:hover {
    filter: brightness(1.07);
}

.hdv2-cta--outline {
    color: var(--hd-cta-text, var(--hd-l2-text)) !important;
    border-color: var(--hd-cta, var(--hd-outline));
}

.hdv2-cta--outline:hover {
    border-color: currentColor;
}

.hdv2-cta--ghost {
    color: var(--hd-cta-text, var(--hd-l2-text)) !important;
}

.hdv2-cta--ghost:hover {
    background: var(--hd-l2-soft);
}

.hdv2-cta-arrow {
    transition: transform 0.25s var(--hd-ease);
}

.hdv2-cta:hover .hdv2-cta-arrow {
    transform: translateX(3px);
}

[dir='rtl'] .hdv2-cta:hover .hdv2-cta-arrow {
    transform: translateX(-3px);
}

.hdv2-promo {
    position: relative;
    color: var(--hd-promo-text);
    font-size: 13px;
    font-weight: 600;
}

.hdv2-promo a {
    color: inherit;
}

.hdv2-promo-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s var(--hd-ease), visibility 0s linear 0.35s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdv2-promo-msg.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s ease, transform 0.35s var(--hd-ease), visibility 0s;
}

.hdv2-promo-msg > a,
.hdv2-promo-msg > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdv2-promo--top {
    block-size: 36px;
    background: var(--hd-promo-bg);
}

.hdv2-promo--top .hdv2-in {
    display: grid;
}

.hdv2-promo--top .hdv2-promo-msg {
    grid-area: 1 / 1;
}

.hdv2-promo--nav {
    display: grid;
    flex: none;
    max-inline-size: 340px;
    block-size: 32px;
    padding-inline: 14px;
    border-radius: 999px;
    background: var(--hd-promo-bg);
}

.hdv2-promo--nav .hdv2-promo-msg {
    grid-area: 1 / 1;
}

/* ================================================================== panels (mega & dropdowns) */

.hdv2-layer {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    block-size: 0;
}

.hdv2-panel {
    position: absolute;
    inset-block-start: 0;
    z-index: 2;
    color: var(--hd-mega-text);
    background: var(--hd-mega-solid);
    border: 1px solid var(--hd-mega-line);
    box-shadow: var(--hd-mega-shadow);
    font-size: 14px;
    font-weight: 400;
    text-align: start;
    animation: hdv2-drop 0.18s var(--hd-ease);
}

.hdv2--mega-glass .hdv2-panel,
.hdv2--mega-glass .hdv2-menu {
    background: var(--hd-mega-bg);
    -webkit-backdrop-filter: blur(var(--hd-mega-blur)) saturate(1.3);
    backdrop-filter: blur(var(--hd-mega-blur)) saturate(1.3);
}

@keyframes hdv2-drop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hdv2-mega {
    inset-inline: 0;
    border-inline: 0;
    border-block-start: 0;
}

.hdv2-mega--container {
    inline-size: auto;
    max-inline-size: calc(100% - 2 * var(--hd-padx));
    max-inline-size: min(calc(var(--hd-maxw) - 2 * var(--hd-padx)), calc(100% - 2 * var(--hd-padx)));
    margin-inline: auto;
    border-inline: 1px solid var(--hd-mega-line);
    border-radius: 0 0 var(--hd-dr) var(--hd-dr);
}

.hdv2--modern .hdv2-mega {
    inset-block-start: 10px;
    border: 1px solid var(--hd-mega-line);
    border-radius: var(--hd-dr);
}

.hdv2--modern .hdv2-mega--full {
    margin-inline: 12px;
}

.hdv2-mega-in {
    max-inline-size: var(--hd-maxw);
    max-block-size: calc(100vh - 160px);
    margin-inline: auto;
    padding: 26px var(--hd-padx) 22px;
    overflow: auto;
}

.hdv2-mega--container .hdv2-mega-in {
    padding-inline: 28px;
}

.hdv2-cols {
    display: grid;
    gap: 22px 32px;
    align-items: start;
}

.hdv2-col.is-empty {
    display: none;
}

.hdv2-col-title {
    margin-block-end: 12px;
    color: var(--hd-mega-title);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.hdv2-col-title a:hover {
    color: var(--hd-mega-hover);
}

.hdv2-links li + li {
    margin-block-start: 2px;
}

.hdv2-links a,
.hdv2-links > li > span {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-block: 6px;
    color: var(--hd-mega-link);
    font-size: 14px;
    transition: color 0.16s ease, transform 0.2s var(--hd-ease);
}

.hdv2-links a:hover {
    color: var(--hd-mega-hover);
    transform: translateX(3px);
}

[dir='rtl'] .hdv2-links a:hover {
    transform: translateX(-3px);
}

.hdv2-link-img {
    flex: none;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.1);
    overflow: hidden;
}

.hdv2-link-img img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.hdv2-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 18px 14px;
}

.hdv2-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--hd-mega-link);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

.hdv2-tile-img {
    display: grid;
    place-items: center;
    inline-size: 84px;
    block-size: 84px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.1);
    overflow: hidden;
    color: var(--hd-mega-hover);
    font-size: 28px;
    transition: transform 0.25s var(--hd-ease), box-shadow 0.25s ease;
}

.hdv2-tile-img img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.hdv2-tile:hover .hdv2-tile-img {
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px var(--hd-mega-hover);
}

.hdv2-tile:hover {
    color: var(--hd-mega-hover);
}

.hdv2-brandgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
}

.hdv2-brandrow {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-block-end: 4px;
}

.hdv2-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: none;
    color: var(--hd-mega-link);
    font-size: 12.5px;
}

.hdv2-brand-box {
    display: grid;
    place-items: center;
    inline-size: 100%;
    min-inline-size: 104px;
    block-size: 64px;
    padding: 8px 10px;
    border: 1px solid var(--hd-mega-line);
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.2s ease, transform 0.2s var(--hd-ease);
}

.hdv2--modern .hdv2-brand-box {
    background: rgba(255, 255, 255, 0.94);
}

.hdv2-brand-box img {
    max-inline-size: 100%;
    max-block-size: 40px;
    object-fit: contain;
}

.hdv2-brand-name {
    color: #222222;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
}

.hdv2-brand:hover .hdv2-brand-box {
    border-color: var(--hd-mega-hover);
    transform: translateY(-2px);
}

.hdv2-brand.is-named .hdv2-brand-box {
    inline-size: 120px;
}

.hdv2-mega-bottom {
    margin-block-start: 22px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--hd-mega-line);
}

.hdv2-mega-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 16px;
    color: var(--hd-mega-hover);
    font-weight: 700;
}

/* products of a column */
.hdv2-products--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 14px;
}

.hdv2-products--list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hdv2-prod {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--hd-mega-link);
}

.hdv2-products--list .hdv2-prod {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.hdv2-prod-img {
    display: block;
    aspect-ratio: 1;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--hd-mega-line);
    overflow: hidden;
}

.hdv2-products--list .hdv2-prod-img {
    flex: none;
    inline-size: 60px;
}

.hdv2-prod-img img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    transition: transform 0.35s var(--hd-ease);
}

.hdv2-prod:hover .hdv2-prod-img img {
    transform: scale(1.05);
}

.hdv2-prod-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 0;
}

.hdv2-prod-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
}

.hdv2-prod:hover .hdv2-prod-name {
    color: var(--hd-mega-hover);
}

.hdv2-prod.is-skeleton .hdv2-prod-img,
.hdv2-prod-line {
    background: linear-gradient(90deg, rgba(127, 127, 127, 0.12), rgba(127, 127, 127, 0.22), rgba(127, 127, 127, 0.12));
    background-size: 200% 100%;
    animation: hdv2-shimmer 1.2s linear infinite;
}

.hdv2-prod-line {
    display: block;
    block-size: 10px;
    border-radius: 6px;
}

.hdv2-prod-line.is-short {
    inline-size: 55%;
}

.hdv2-products--list .hdv2-prod.is-skeleton {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 6px 12px;
}

.hdv2-products--list .hdv2-prod.is-skeleton .hdv2-prod-img {
    grid-row: span 2;
}

@keyframes hdv2-shimmer {
    to {
        background-position: -200% 0;
    }
}

/* banner card */
.hdv2-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    min-block-size: 240px;
    block-size: 100%;
    border-radius: max(10px, var(--hd-dr));
    overflow: hidden;
    background: var(--hd-ban-fill, var(--hd-accent));
    color: var(--hd-ban-text) !important;
    isolation: isolate;
}

.hdv2-banner.is-top {
    justify-content: flex-start;
}

.hdv2-banner.is-center {
    justify-content: center;
}

.hdv2-banner.is-bottom {
    justify-content: flex-end;
}

.hdv2-ban-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--hd-ease);
}

.hdv2-banner.has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(0, 0, 0, calc(var(--hd-ban-shade) + 0.25)) 0%, rgba(0, 0, 0, var(--hd-ban-shade)) 45%, rgba(0, 0, 0, calc(var(--hd-ban-shade) * 0.3)) 100%);
}

.hdv2-banner:not(.has-image)::before {
    content: '';
    position: absolute;
    inset: auto -30% -40% auto;
    z-index: -1;
    inline-size: 70%;
    aspect-ratio: 1;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
}

.hdv2-banner:hover .hdv2-ban-img {
    transform: scale(1.04);
}

.hdv2-ban-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
}

.hdv2-ban-heading {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.hdv2-ban-text {
    font-size: 13.5px;
    opacity: 0.9;
}

.hdv2-ban-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 4px;
    padding: 8px 14px;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

/* side list (category sidebar) */
.hdv2-mega-side {
    display: grid;
    grid-template-columns: minmax(220px, 270px) 1fr;
    gap: 26px;
    align-items: start;
}

.hdv2-side-list {
    max-block-size: calc(100vh - 220px);
    padding: 8px;
    overflow: auto;
    border-radius: max(8px, calc(var(--hd-dr) - 6px));
    background: var(--hd-side-bg);
}

.hdv2-side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--hd-mega-text);
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}

.hdv2-side-item:hover,
.hdv2-side-item.is-on {
    background: var(--hd-side-active);
    color: var(--hd-side-active-text);
}

.hdv2-side-media {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(127, 127, 127, 0.1);
}

/* pictures made for white pages (category icons) keep a light backing on dark panels */
.hdv2-side-media.is-img,
.hdv2-tile-img,
.hdv2-link-img {
    background: #ffffff;
}

.hdv2-side-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.hdv2-side-text {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hdv2-side-chev {
    inline-size: 14px;
    block-size: 14px;
    opacity: 0.5;
}

.hdv2-side-pane {
    display: none;
}

.hdv2-side-pane.is-on {
    display: block;
    animation: hdv2-fade 0.18s ease;
}

@keyframes hdv2-fade {
    from {
        opacity: 0;
    }
}

/* simple dropdown */
.hdv2-drop {
    min-inline-size: 230px;
    margin-block-start: 6px;
    padding: 8px;
    border-radius: var(--hd-dr);
}

.hdv2-drop-list li {
    position: relative;
}

.hdv2-drop-list a,
.hdv2-drop-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: max(6px, calc(var(--hd-dr) - 4px));
    color: var(--hd-mega-link);
    white-space: nowrap;
}

.hdv2-drop-head {
    color: var(--hd-mega-title);
    font-weight: 700;
}

.hdv2-drop-list a:hover,
.hdv2-drop-list a:focus-visible {
    background: var(--hd-side-active);
    color: var(--hd-side-active-text);
}

.hdv2-sub-chev {
    margin-inline-start: auto;
    inline-size: 14px;
    block-size: 14px;
    opacity: 0.55;
}

.hdv2-sub {
    position: absolute;
    inset-block-start: -8px;
    inset-inline-start: 100%;
    display: none;
    min-inline-size: 220px;
    padding: 8px;
    border-radius: var(--hd-dr);
    background: var(--hd-mega-solid);
    border: 1px solid var(--hd-mega-line);
    box-shadow: var(--hd-mega-shadow);
}

.has-sub:hover > .hdv2-sub,
.has-sub:focus-within > .hdv2-sub {
    display: block;
}

/* ================================================================== small menus */

.hdv2-menu {
    position: absolute;
    inset-block-start: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 3;
    min-inline-size: 250px;
    padding: 8px;
    border-radius: var(--hd-dr);
    background: var(--hd-mega-solid);
    color: var(--hd-mega-text);
    border: 1px solid var(--hd-mega-line);
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.35);
    font-size: 14px;
    font-weight: 400;
    text-align: start;
    white-space: normal;
    animation: hdv2-drop 0.16s var(--hd-ease);
}

.hdv2-menu::before {
    content: '';
    position: absolute;
    inset-block-start: -12px;
    inset-inline: 0;
    block-size: 12px;
}

.hdv2-menu--cart {
    inline-size: 340px;
}

.hdv2-menu-head {
    padding: 8px 10px 10px;
    color: var(--hd-mega-title);
    font-weight: 700;
}

.hdv2-menu-head.is-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hdv2-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #16a34a;
    font-size: 12px;
}

.hdv2-menu-label {
    padding: 8px 10px 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.7;
}

.hdv2-menu-list a,
.hdv2-menu-list button {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    padding: 9px 10px;
    border-radius: max(6px, calc(var(--hd-dr) - 4px));
    color: var(--hd-mega-link) !important;
    text-align: start;
}

.hdv2-menu-list a:hover,
.hdv2-menu-list button:hover,
.hdv2-menu-list [aria-pressed='true'] {
    background: var(--hd-side-active);
    color: var(--hd-side-active-text) !important;
}

.hdv2-menu-list [aria-pressed='true'] .hdv2-ic {
    margin-inline-start: auto;
    color: var(--hd-mega-hover);
}

.hdv2-menu-list .is-sep {
    margin-block-start: 6px;
    padding-block-start: 6px;
    border-block-start: 1px solid var(--hd-mega-line);
}

.hdv2-menu-pad {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

.hdv2-menu-pad.is-row {
    flex-direction: row;
}

.hdv2-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 0;
    block-size: 42px;
    padding-inline: 16px;
    border: 1.5px solid var(--hd-mega-line);
    border-radius: min(999px, max(8px, var(--hd-pr)));
    color: var(--hd-mega-title) !important;
    font-weight: 700;
    white-space: nowrap;
}

.hdv2-menu-btn.is-primary {
    background: var(--hd-accent);
    border-color: var(--hd-accent);
    color: var(--hd-on-accent) !important;
}

.hdv2-menu-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 12px;
    text-align: center;
    opacity: 0.85;
}

.hdv2-menu-empty .hdv2-ic {
    inline-size: 30px;
    block-size: 30px;
    opacity: 0.6;
}

.hdv2-menu-empty p {
    margin: 0;
}

.hdv2-mini-list {
    max-block-size: 320px;
    overflow: auto;
}

.hdv2-mini-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
}

.hdv2-mini-list a:hover {
    background: var(--hd-side-active);
}

.hdv2-mini-img {
    flex: none;
    inline-size: 52px;
    block-size: 52px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--hd-mega-line);
    overflow: hidden;
}

.hdv2-mini-img img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.hdv2-mini-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-inline-size: 0;
}

.hdv2-mini-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    color: var(--hd-mega-title);
}

.hdv2-mini-meta {
    font-size: 12px;
    opacity: 0.8;
}

.hdv2-mini-total {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-block-start: 4px;
    border-block-start: 1px solid var(--hd-mega-line);
    color: var(--hd-mega-title);
}

.hdv2-notes button {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.hdv2-note-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hdv2-notes small {
    opacity: 0.65;
}

/* ================================================================== phone bar */

.hdv2-m {
    position: relative;
    isolation: isolate;
    color: var(--hd-l1-text);
}

.hdv2-m::before {
    background: var(--hd-l1-bg);
    -webkit-backdrop-filter: blur(var(--hd-l1-blur));
    backdrop-filter: blur(var(--hd-l1-blur));
}

.hdv2-m > .hdv2-in {
    block-size: var(--hd-l1hm);
    gap: 4px;
    padding-inline: min(var(--hd-padx), 16px);
}

.hdv2-m .hdv2-logo {
    margin-inline: 4px auto;
}

.hdv2-m.is-center > .hdv2-in {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.hdv2-m.is-center .hdv2-logo {
    margin: 0;
    justify-self: center;
}

.hdv2-m.is-center .hdv2-burger {
    justify-self: start;
}

.hdv2-m-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.hdv2-m .hdv2-btn {
    min-inline-size: 44px;
    min-block-size: 44px;
    justify-content: center;
    padding-inline: 4px;
}

.hdv2-m-search {
    block-size: 56px;
}

.hdv2-m-search .hdv2-in {
    padding-block-end: 10px;
    padding-inline: min(var(--hd-padx), 16px);
}

.hdv2-m-searchbar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    block-size: 44px;
    padding-inline: 14px !important;
    border-radius: var(--hd-sr) !important;
    background: var(--hd-search-bg) !important;
    border: 1px solid var(--hd-search-line) !important;
    color: var(--hd-search-ph) !important;
    font-size: 14px;
    text-align: start;
}

.hdv2--modern .hdv2-m-searchbar {
    -webkit-backdrop-filter: blur(var(--hd-glass-blur));
    backdrop-filter: blur(var(--hd-glass-blur));
}

.hdv2-m-searchbar span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================================================== phone menu (drawer) */

.hdv2-drawer {
    position: fixed;
    inset: 0;
    z-index: 1060;
    color: var(--hd-drawer-text);
}

.hdv2-drawer-veil {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 12, 0.48);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.hdv2-drawer.is-open .hdv2-drawer-veil {
    opacity: 1;
}

.hdv2-drawer-panel {
    position: absolute;
    inset-block: 0;
    display: flex;
    flex-direction: column;
    inline-size: min(88vw, 390px);
    background: var(--hd-drawer-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
    transition: transform 0.28s var(--hd-ease);
}

.hdv2-drawer.is-start .hdv2-drawer-panel {
    inset-inline-start: 0;
}

.hdv2-drawer.is-end .hdv2-drawer-panel {
    inset-inline-end: 0;
}

.hdv2-drawer[dir='ltr'].is-start .hdv2-drawer-panel,
.hdv2-drawer[dir='rtl'].is-end .hdv2-drawer-panel {
    transform: translateX(-100%);
}

.hdv2-drawer[dir='rtl'].is-start .hdv2-drawer-panel,
.hdv2-drawer[dir='ltr'].is-end .hdv2-drawer-panel {
    transform: translateX(100%);
}

.hdv2-drawer.is-open .hdv2-drawer-panel {
    transform: none !important;
}

.hdv2-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-block-size: 64px;
    padding: 8px 10px 8px 18px;
    padding-inline: 18px 10px;
    border-block-end: 1px solid var(--hd-drawer-line);
}

.hdv2-drawer .hdv2-logo-img {
    block-size: var(--hd-logohm);
}

.hdv2-drawer[data-logo='on_light'] .is-on-dark,
.hdv2-drawer[data-logo='on_dark'] .is-on-light {
    display: none;
}

.hdv2-drawer .hdv2-btn {
    min-inline-size: 44px;
    min-block-size: 44px;
    justify-content: center;
}

.hdv2-drawer-body {
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    padding-block-end: 12px;
}

.hdv2-drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hdv2-drawer a {
    color: inherit;
    text-decoration: none;
}

.hdv2-drawer button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.hdv2-d-list > li > a,
.hdv2-d-list > li > span,
.hdv2-acc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 50px;
    padding-inline: 18px;
    border-block-end: 1px solid var(--hd-drawer-line);
    font-size: 15.5px;
    font-weight: 600;
}

.hdv2-acc-row {
    padding-inline-end: 4px;
}

.hdv2-acc-row > a,
.hdv2-acc-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-block-size: 50px;
    text-align: start;
}

.hdv2-acc-toggle {
    display: inline-grid;
    place-items: center;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 999px;
}

.hdv2-acc.is-open > .hdv2-acc-row .hdv2-acc-toggle .hdv2-ic {
    transform: rotate(180deg);
}

.hdv2-acc-toggle .hdv2-ic {
    transition: transform 0.2s ease;
}

.hdv2-acc-body {
    padding-inline-start: 14px;
    background: rgba(127, 127, 127, 0.05);
}

.hdv2-acc-body > li > a,
.hdv2-acc-body > li > span,
.hdv2-acc-body .hdv2-acc-row {
    display: flex;
    align-items: center;
    min-block-size: 46px;
    padding-inline: 18px;
    border-block-end: 1px solid var(--hd-drawer-line);
    font-size: 14.5px;
    font-weight: 500;
}

.hdv2-acc-body .hdv2-acc-row {
    padding-inline-end: 4px;
}

.hdv2-d-list .is-all > a {
    color: var(--hd-accent);
    font-weight: 700;
}

.hdv2-d-list .hdv2-hl--accent > a,
.hdv2-d-list .hdv2-hl--text > a,
.hdv2-d-list .hdv2-hl--accent > .hdv2-acc-row > a {
    color: var(--hd-accent);
}

.hdv2-d-account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 8px;
    font-weight: 800;
    font-size: 16px;
}

.hdv2-d-list.is-account > li > a {
    min-block-size: 44px;
    font-weight: 500;
    font-size: 14.5px;
}

.hdv2-d-auth {
    display: flex;
    gap: 10px;
    padding: 16px 18px;
    border-block-end: 1px solid var(--hd-drawer-line);
}

.hdv2-d-auth .hdv2-menu-btn {
    color: var(--hd-drawer-text) !important;
    border-color: var(--hd-drawer-line);
}

.hdv2-d-auth .hdv2-menu-btn.is-primary {
    color: var(--hd-on-accent) !important;
    border-color: var(--hd-accent);
}

.hdv2-d-label {
    padding: 18px 18px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}

.hdv2-d-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-inline: 18px;
}

.hdv2-d-lang {
    min-block-size: 40px;
    padding-inline: 16px !important;
    border: 1.5px solid var(--hd-drawer-line) !important;
    border-radius: 999px;
    font-weight: 600;
}

.hdv2-d-lang[aria-pressed='true'] {
    background: var(--hd-accent) !important;
    border-color: var(--hd-accent) !important;
    color: var(--hd-on-accent) !important;
}

.hdv2-d-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    min-block-size: 50px;
    margin-block-start: 14px;
    padding-inline: 18px !important;
    border-block-start: 1px solid var(--hd-drawer-line) !important;
    font-weight: 600;
    text-align: start;
}

.hdv2-ctas--drawer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--hd-drawer-line);
}

.hdv2-ctas--drawer .hdv2-cta {
    block-size: 50px;
    --hd-l2-text: var(--hd-drawer-text);
    --hd-outline: var(--hd-drawer-line);
}

/* ================================================================== full-screen search (phone, compact) */

.hdv2-sheet {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: flex;
    flex-direction: column;
    background: var(--hd-mega-solid);
    color: var(--hd-mega-text);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.25s var(--hd-ease);
}

.hdv2-sheet.is-open {
    opacity: 1;
    transform: none;
}

.hdv2-sheet-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    flex: 1 1 auto;
    min-block-size: 0;
}

.hdv2-sheet-head > .hdv2-btn {
    flex: none;
    min-inline-size: 44px;
    min-block-size: 46px;
    justify-content: center;
    color: var(--hd-mega-title);
}

.hdv2-sheet .hdv2-search {
    flex-wrap: wrap;
    align-content: flex-start;
    max-inline-size: none;
    block-size: auto;
    min-block-size: 46px;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none !important;
    --hd-search-bg: rgba(127, 127, 127, 0.1);
    --hd-search-text: var(--hd-mega-title);
    --hd-search-ph: rgba(127, 127, 127, 0.95);
    --hd-search-icon: var(--hd-mega-title);
    color: var(--hd-mega-title);
}

.hdv2-sheet .hdv2-search-input {
    flex: 1 1 0;
    block-size: 46px;
    border-radius: 999px !important;
    background: var(--hd-search-bg) !important;
    padding-inline: 18px 12px;
    font-size: 16px;
}

.hdv2-sheet .hdv2-search-icon,
.hdv2-sheet .hdv2-ph {
    display: none;
}

.hdv2-sheet .hdv2-search.has-rot .hdv2-search-input::placeholder {
    color: var(--hd-search-ph);
}

.hdv2-sheet .hdv2-results {
    position: static;
    flex: 1 0 100%;
    max-block-size: calc(100vh - 90px);
    margin-block-start: 10px;
    border: 0;
    box-shadow: none;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none;
}

/* ================================================================== over the banner */

.hdv2--overlay .hdv2-bar {
    color: var(--hd-l1-text);
}

/* the v2 hero banner leaves room for the header that floats over it */
html.hdv2-ov .hbv2-hero .hbv2-hero-content {
    padding-block-start: calc(var(--hdv2-overlay-h, 0px) + clamp(16px, 3vh, 36px));
}

html.hdv2-ov .hbv2-hero .hbv2-hero-count {
    inset-block-start: calc(var(--hdv2-overlay-h, 0px) + 22px);
}

/* sticky parts of store pages stay below the fixed header */
@media (min-width: 992px) {
    html.hdv2-on .widget_wrap {
        top: var(--hdv2-sticky, 0px);
        transition: top 0.3s ease;
    }
}

html.hdv2-on .sticky-summary {
    top: calc(var(--hdv2-sticky, 0px) + 20px);
    transition: top 0.3s ease;
}

html.hdv2-on .shop-navbar {
    top: var(--hdv2-sticky, 0px);
}

html.hdv2-lock,
html.hdv2-lock body {
    overflow: hidden !important;
}

/* ================================================================== builder preview: sample banner */

.hdv2-sample {
    position: relative;
    overflow: hidden;
    min-block-size: 640px;
    display: flex;
    align-items: center;
    isolation: isolate;
    color: #ffffff;
    background: radial-gradient(120% 90% at 85% 15%, #2c3e66 0%, #111a2e 42%, #07080d 100%);
}

.hdv2-sample--light {
    color: #1a1917;
    background: radial-gradient(120% 90% at 85% 15%, #fff3d6 0%, #f6e8ff 45%, #e9f1ff 100%);
}

.hdv2-sample-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(8px);
    z-index: -1;
}

.hdv2-sample-orb.is-a {
    inset-block-start: 12%;
    inset-inline-end: 10%;
    inline-size: 380px;
    block-size: 380px;
    background: radial-gradient(closest-side, rgba(248, 168, 0, 0.55), rgba(248, 168, 0, 0));
}

.hdv2-sample-orb.is-b {
    inset-block-end: -10%;
    inset-inline-start: 30%;
    inline-size: 520px;
    block-size: 520px;
    background: radial-gradient(closest-side, rgba(90, 130, 255, 0.35), rgba(90, 130, 255, 0));
}

.hdv2-sample-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.hdv2-sample-in {
    inline-size: 100%;
    max-inline-size: 1390px;
    margin-inline: auto;
    padding: calc(var(--hdv2-overlay-h, 0px) + 40px) 48px 110px;
}

.hdv2-sample-card {
    max-inline-size: 620px;
    padding: 40px;
    border-radius: 16px;
    background: rgba(23, 22, 20, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.hdv2-sample--light .hdv2-sample-card {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(0, 0, 0, 0.06);
}

.hdv2-sample-kicker {
    margin: 0 0 12px;
    color: #f8a800;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hdv2-sample-title {
    margin: 0 0 14px;
    color: inherit;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.05;
}

.hdv2-sample-text {
    margin: 0;
    opacity: 0.85;
    font-size: 17px;
}

.hdv2-sample-arch {
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    inline-size: 100%;
    block-size: 90px;
    fill: #ffffff;
}

/* ================================================================== fallbacks */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .hdv2-bar::before {
        background: var(--hd-bg-solid);
    }

    .hdv2-l1::before,
    .hdv2-m::before {
        background: var(--hd-l1-solid);
    }

    .hdv2-l2::before {
        background: var(--hd-l2-solid);
    }

    .hdv2--mega-glass .hdv2-panel,
    .hdv2--mega-glass .hdv2-menu,
    .hdv2--mega-glass .hdv2-results {
        background: var(--hd-mega-solid);
    }

    .hdv2-drawer-panel {
        background: var(--hd-drawer-solid);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hdv2 *,
    .hdv2 *::before,
    .hdv2 *::after,
    .hdv2-drawer *,
    .hdv2-sheet,
    .hdv2-sheet * {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .hdv2-bar {
        position: static !important;
    }

    .hdv2-layer,
    .hdv2-scrim {
        display: none !important;
    }
}