/* ============================================
   EXPLORE PAGE V2 — Product Explore redesign
   Scoped to .explore-page-v2; header/sidepane unchanged
   ============================================ */

body.explore-body {
    margin: 0;
    padding-top: 0;
    background-color: var(--cream);
    --explore-header-height: 72px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    --hzl-offwhite: #efe8db;
    --hzl-coral: #e45558;
    /* Full brand palette (tokens/colors.css is not loaded on this page) —
       the motif tile strip needs every hue or its tiles render transparent */
    --hzl-coral-bright: #f04955;
    --hzl-pink: #e163c3;
    --hzl-green: #194234;
    --hzl-green-deep: #012d22;
    --hzl-chartreuse: #d5c800;
    --hzl-blue: #b4ceed;
    --hzl-cream: #ede6dc;
    --hzl-maroon: #561023;
    --font-mono: "DM Mono", monospace;
}

body.explore-body.has-sidepane .content-wrapper {
    background-color: var(--cream);
    padding-top: var(--explore-header-height);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 100vh;
}

@media screen and (max-width: 1024px) {

    body.explore-body .content-wrapper,
    body.explore-body.has-sidepane .content-wrapper {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

.explore-page-v2 {
    font-family: 'Nanum Myeongjo', serif;
    display: flex;
    flex-direction: column;
    flex: 1;
    --hzl-ink: #1e1e1e;
    --hzl-offwhite: #efe8db;
    --hzl-white: #ffffff;
    --font-display: "Nanum Myeongjo", Georgia, serif;
    --font-body: "Nanum Myeongjo", Georgia, serif;
    --font-mono: "Nanum Myeongjo", Georgia, serif;
    --font-accent: "Nanum Myeongjo", Georgia, serif;
    --fw-r: 400;
    --fw-m: 500;
    --fw-sb: 600;
    --fw-b: 700;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --lh-snug: 1.18;
    --lh-body: 1.5;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --explore-header-height: 72px;

    font-family: var(--font-body);
    color: var(--hzl-ink);
    -webkit-font-smoothing: antialiased;
    line-height: var(--lh-body);
}

/* ── Motif masks ──────────────────────────── */
.explore-page-v2 .hzl-motif,
.explore-subnav-rail .hzl-motif {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex: none;
}

.explore-page-v2 .hzl-motif--star,
.explore-subnav-rail .hzl-motif--star {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22304%22%20height%3D%22326%22%20viewBox%3D%220%200%20304%20326%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M%20151.176%2080.39%20L%2076.489%200%20L%2072.42%2080.39%20L%200%2080.39%20L%2075.562%20167.337%20L%200%20243.39%20L%2069.381%20243.39%20L%2075.562%20326%20L%20151.176%20245.61%20L%20230.55%20326%20L%20230.55%20246.694%20L%20304%20246.694%20L%20232.61%20163%20L%20304%2082.61%20L%20225.45%2079.306%20L%20226.481%200%20L%20151.176%2080.39%20Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22304%22%20height%3D%22326%22%20viewBox%3D%220%200%20304%20326%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M%20151.176%2080.39%20L%2076.489%200%20L%2072.42%2080.39%20L%200%2080.39%20L%2075.562%20167.337%20L%200%20243.39%20L%2069.381%20243.39%20L%2075.562%20326%20L%20151.176%20245.61%20L%20230.55%20326%20L%20230.55%20246.694%20L%20304%20246.694%20L%20232.61%20163%20L%20304%2082.61%20L%20225.45%2079.306%20L%20226.481%200%20L%20151.176%2080.39%20Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.explore-page-v2 .hzl-motif--seal,
.explore-subnav-rail .hzl-motif--seal {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22333%22%20height%3D%22355%22%20viewBox%3D%220%200%20333%20355%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M%200%20177.623%20L%2050.16%20230.929%20L%2050.16%20301.941%20L%20117.08%20301.941%20L%20166.993%20355%20L%20216.906%20301.941%20L%20283.826%20301.941%20L%20283.826%20229.942%20L%20333%20177.623%20L%20283.826%20125.305%20L%20283.826%2053.306%20L%20217.091%2053.306%20L%20166.993%200%20L%20116.833%2053.306%20L%2050.16%2053.306%20L%2050.16%20124.256%20L%200%20177.623%20Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22333%22%20height%3D%22355%22%20viewBox%3D%220%200%20333%20355%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M%200%20177.623%20L%2050.16%20230.929%20L%2050.16%20301.941%20L%20117.08%20301.941%20L%20166.993%20355%20L%20216.906%20301.941%20L%20283.826%20301.941%20L%20283.826%20229.942%20L%20333%20177.623%20L%20283.826%20125.305%20L%20283.826%2053.306%20L%20217.091%2053.306%20L%20166.993%200%20L%20116.833%2053.306%20L%2050.16%2053.306%20L%2050.16%20124.256%20L%200%20177.623%20Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.explore-page-v2 .hzl-motif--ogee,
.explore-subnav-rail .hzl-motif--ogee {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22331%22%20height%3D%22343%22%20viewBox%3D%220%200%20331%20343%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M%200%20161.564%20L%200%20181.377%20C%202.119%20196.957%2010.77%20210.95%2022.953%20220.181%20C%2037.726%20231.352%2055.5%20236.819%2072.568%20243.228%20C%2095.404%20251.753%20118.004%20262.394%20135.896%20279.68%20C%20152.787%20295.965%20165.088%20318.954%20165.265%20343%20C%20165.441%20318.954%20177.742%20295.907%20194.633%20279.68%20C%20212.525%20262.453%20235.184%20251.753%20257.961%20243.228%20C%20275.029%20236.819%20292.803%20231.352%20307.576%20220.181%20C%20321.054%20210.01%20330.235%20194.018%20331%20176.497%20L%20331%20166.503%20C%20330.235%20148.923%20321.112%20132.99%20307.576%20122.819%20C%20292.803%20111.648%20275.029%20106.122%20257.961%2099.772%20C%20235.125%2091.247%20212.525%2080.606%20194.633%2063.32%20C%20177.742%2047.035%20165.441%2024.046%20165.265%200%20C%20165.088%2024.046%20152.787%2047.093%20135.896%2063.32%20C%20118.004%2080.547%2095.345%2091.247%2072.568%2099.772%20C%2055.5%20106.181%2037.726%20111.648%2022.953%20122.819%20C%2010.712%20132.05%202.06%20146.043%200%20161.623%20L%200%20161.564%20Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22331%22%20height%3D%22343%22%20viewBox%3D%220%200%20331%20343%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M%200%20161.564%20L%200%20181.377%20C%202.119%20196.957%2010.77%20210.95%2022.953%20220.181%20C%2037.726%20231.352%2055.5%20236.819%2072.568%20243.228%20C%2095.404%20251.753%20118.004%20262.394%20135.896%20279.68%20C%20152.787%20295.965%20165.088%20318.954%20165.265%20343%20C%20165.441%20318.954%20177.742%20295.907%20194.633%20279.68%20C%20212.525%20262.453%20235.184%20251.753%20257.961%20243.228%20C%20275.029%20236.819%20292.803%20231.352%20307.576%20220.181%20C%20321.054%20210.01%20330.235%20194.018%20331%20176.497%20L%20331%20166.503%20C%20330.235%20148.923%20321.112%20132.99%20307.576%20122.819%20C%20292.803%20111.648%20275.029%20106.122%20257.961%2099.772%20C%20235.125%2091.247%20212.525%2080.606%20194.633%2063.32%20C%20177.742%2047.035%20165.441%2024.046%20165.265%200%20C%20165.088%2024.046%20152.787%2047.093%20135.896%2063.32%20C%20118.004%2080.547%2095.345%2091.247%2072.568%2099.772%20C%2055.5%20106.181%2037.726%20111.648%2022.953%20122.819%20C%2010.712%20132.05%202.06%20146.043%200%20161.623%20L%200%20161.564%20Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.explore-page-v2 .hzl-motif--spark,
.explore-subnav-rail .hzl-motif--spark {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22306%22%20height%3D%22326%22%20viewBox%3D%220%200%20306%20326%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M%20180.014%200%20L%20125.986%200%20C%2056.407%200%200%2060.103%200%20134.228%20L%200%20191.772%20C%200%20265.897%2056.407%20326%20125.986%20326%20L%20180.014%20326%20C%20249.593%20326%20306%20265.897%20306%20191.772%20L%20306%20134.228%20C%20306%2060.103%20249.593%200%20180.014%200%20Z%20M%20153.029%20295.105%20C%20153.029%20224.18%20100.627%20166.287%2034.819%20163.029%20C%20100.627%20159.713%20153.029%20101.82%20153.029%2030.895%20C%20153.029%20101.82%20205.432%20159.713%20271.239%20163.029%20C%20205.432%20166.287%20153.029%20224.18%20153.029%20295.105%20Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22306%22%20height%3D%22326%22%20viewBox%3D%220%200%20306%20326%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M%20180.014%200%20L%20125.986%200%20C%2056.407%200%200%2060.103%200%20134.228%20L%200%20191.772%20C%200%20265.897%2056.407%20326%20125.986%20326%20L%20180.014%20326%20C%20249.593%20326%20306%20265.897%20306%20191.772%20L%20306%20134.228%20C%20306%2060.103%20249.593%200%20180.014%200%20Z%20M%20153.029%20295.105%20C%20153.029%20224.18%20100.627%20166.287%2034.819%20163.029%20C%20100.627%20159.713%20153.029%20101.82%20153.029%2030.895%20C%20153.029%20101.82%20205.432%20159.713%20271.239%20163.029%20C%20205.432%20166.287%20153.029%20224.18%20153.029%20295.105%20Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}


/* ── Subnav rail (sticky under header) ──────── */
.explore-subnav-rail {
    margin-top: calc(-1 * var(--explore-header-height, 72px));
    background: #561023;
    flex-shrink: 0;
}

.explore-subnav-offset {
    height: var(--explore-header-height, 72px);
    pointer-events: none;
}

.explore-subnav-rail .subnav {
    position: sticky;
    top: var(--explore-header-height, 72px);
    z-index: 900;
    background: #561023;
}

@media screen and (max-width: 1024px) {
    body.explore-body {
        --explore-header-height: 64px;
    }
}

.explore-subnav-rail .subnav {
    display: flex;
    align-items: stretch;
    min-height: 52px;
    padding: 0 48px;
}

.explore-subnav-rail .subnav-pills {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.explore-subnav-rail .subnav-pills::-webkit-scrollbar {
    display: none;
}

.explore-subnav-rail .subnav-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    min-height: 52px;
    padding: 0 16px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.78) !important;
    cursor: pointer;
    text-decoration: none;
    transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.explore-subnav-rail .subnav-pill:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

.explore-subnav-rail .subnav-pill--active {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* ── Hero ──────────────────────────────────── */
.explore-page-v2 .hero {
    background: var(--hzl-maroon);
    display: grid;
    grid-template-columns: 55fr 45fr;
    min-height: 560px;
}

.explore-page-v2 .hero-left {
    padding: 72px 48px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    margin: 0 auto;
    max-width: 760px;
}

.explore-page-v2 .hero-eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--hzl-coral);
    margin: 0 0 24px;
    text-align: center;
}

.explore-page-v2 .hero-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 1.4rem + 5vw, 5.2rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--hzl-offwhite);
    margin: 0 0 24px;
    text-align: center;
}

.explore-page-v2 .hero-subline {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    color: rgba(239, 232, 219, 0.52);
    margin: 0 0 12px;
    line-height: 1.4;
    text-align: center;
}

.explore-page-v2 .hero-cta-wrap {
    margin-top: 36px;
    padding-top: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

.explore-page-v2 .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--hzl-cream);
    color: var(--hzl-maroon);
    border: none;
    padding: 16px 28px;
    cursor: pointer;
    transition: background 120ms;
}

.explore-page-v2 .hero-cta:hover {
    background: var(--hzl-offwhite);
}

.explore-page-v2 .hero-cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 2px;
    background: var(--hzl-maroon);
}

.explore-page-v2 .hero-cats--mobile {
    display: none;
}

.explore-page-v2 .hero-cat {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 16px 16px;
    text-decoration: none;
    transition: filter 150ms;
}

.explore-page-v2 .hero-cat:hover {
    filter: brightness(1.12);
}

.explore-page-v2 .hero-cat__product {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(88px, 52%);
    height: auto;
    max-height: 50%;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.25));
    pointer-events: none;
    transition: transform 420ms var(--ease-out);
}

.explore-page-v2 .hero-cats--desktop .hero-cat__product {
    transform: translate(-50%, -63%);
}

.explore-page-v2 .hero-cats--desktop .hero-cat:hover .hero-cat__product {
    transform: translate(-50%, -63%) scale(1.06);
}

.explore-page-v2 .hero-cat .hero-cat__motif,
.explore-page-v2 .hero-cat .hzl-motif,
.explore-page-v2 .hero-cat .hero-cat__sub {
    display: none;
}

.explore-page-v2 .hero-cat__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.15;
    margin: 0;
    position: relative;
    z-index: 3;
}

/* ── Sections ──────────────────────────────── */
.explore-page-v2 .section {
    padding: 72px 48px;
}

.explore-page-v2 .eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    display: block;
    margin: 0;
}

.explore-page-v2 .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 6px;
    margin-bottom: 40px;
}

.explore-page-v2 .section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem);
    letter-spacing: -0.035em;
    line-height: 1;
    margin: 0;
}

.explore-page-v2 .section-link {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Products ──────────────────────────────── */
.explore-page-v2 .products-section {
    background: var(--hzl-cream);
}

.explore-page-v2 .products-section .eyebrow {
    color: var(--hzl-maroon);
}

.explore-page-v2 .products-section .section-title {
    color: var(--hzl-maroon);
    padding: 0px !important;
}

.explore-page-v2 .products-section .section-link {
    color: var(--hzl-coral);
}

.explore-page-v2 .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.explore-page-v2 .products-grid-scroll {
    overflow: visible;
}

.explore-page-v2 .products-grid-page {
    display: contents;
}

/* ── Fund section ──────────────────────────── */
.explore-page-v2 .fund-section {
    background: var(--hzl-coral);
    display: grid;
    grid-template-columns: 55fr 45fr;
    min-height: 400px;
}

.explore-page-v2 .fund-left {
    padding: 72px 56px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    justify-content: center;
}

.explore-page-v2 .fund-left .eyebrow {
    color: rgba(239, 232, 219, 0.55);
}

.explore-page-v2 .fund-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 1rem + 4.5vw, 4.8rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
    color: var(--hzl-offwhite);
    margin: 0;
}

.explore-page-v2 .fund-headline em {
    font-style: italic;
    color: var(--hzl-chartreuse);
}

.explore-page-v2 .fund-sub {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 300;
    font-size: 1.15rem;
    color: rgba(239, 232, 219, 0.62);
    margin: 0;
}

.explore-page-v2 .fund-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--hzl-offwhite);
    color: var(--hzl-maroon);
    border: none;
    padding: 16px 28px;
    cursor: pointer;
    align-self: flex-start;
    text-decoration: none;
    transition: background 120ms;
}

.explore-page-v2 .fund-btn:hover {
    background: white;
}

.explore-page-v2 .fund-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    background: var(--hzl-coral);
}

.explore-page-v2 .fund-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    transition: filter 150ms;
}

.explore-page-v2 .fund-card:first-child {
    grid-row: 1 / 3;
}

.explore-page-v2 .fund-card:hover {
    filter: brightness(1.1);
}

.explore-page-v2 .fund-card__motif {
    position: absolute;
    top: 14px;
    right: 14px;
    opacity: 0.1;
    pointer-events: none;
}

.explore-page-v2 .fund-card__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--hzl-offwhite);
    margin: 0;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.explore-page-v2 .fund-card__label {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 300;
    font-size: 0.88rem;
    color: rgba(239, 232, 219, 0.58);
    position: relative;
    z-index: 1;
}

/* ── Brands ────────────────────────────────── */
.explore-page-v2 .brands-section {
    background: var(--hzl-blue);
}

.explore-page-v2 .brands-section .eyebrow {
    color: var(--hzl-maroon);
}

.explore-page-v2 .brands-section .section-title {
    color: var(--hzl-maroon);
}

.explore-page-v2 .brands-section .section-link {
    color: var(--hzl-maroon);
}

.explore-page-v2 .brand-scroll {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.explore-page-v2 .brand-scroll::-webkit-scrollbar {
    display: none;
}

.explore-page-v2 .brand-tile {
    flex: 0 0 188px;
    height: 240px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 16px 18px;
    transition: transform 200ms;
}

.explore-page-v2 .brand-tile:hover {
    transform: translateY(-4px);
}

.explore-page-v2 .brand-tile__bg {
    position: absolute;
    inset: 0;
    filter: grayscale(100%);
    transition: transform 400ms;
}

.explore-page-v2 .brand-tile__bg--img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.explore-page-v2 .brand-tile:hover .brand-tile__bg {
    transform: scale(1.05);
}

.explore-page-v2 .brand-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(86, 16, 35, 0.54);
    transition: background 200ms;
}

.explore-page-v2 .brand-tile:hover::after {
    background: rgba(86, 16, 35, 0.38);
}

.explore-page-v2 .brand-tile__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--hzl-offwhite);
    position: relative;
    z-index: 1;
    margin: 0;
    line-height: 1.1;
}

.explore-page-v2 .brand-tile__cat {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 0.82rem;
    color: rgba(239, 232, 219, 0.62);
    position: relative;
    z-index: 1;
}

/* ── Category page (shared) ───────────────── */
.explore-page-v2 .cat-hero {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px 48px 40px;
    position: relative;
    overflow: hidden;
}

.explore-page-v2 .cat-back {
    display: none !important;
}

.explore-page-v2 .cat-eyebrow {
    display: none !important;
}

.explore-page-v2 .cat-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.8rem, 1.5rem + 5vw, 5.5rem);
    letter-spacing: -0.04em;
    line-height: 0.93;
    color: var(--hzl-offwhite);
    margin: 0;
    position: relative;
    z-index: 2;
}

.explore-page-v2 .cat-tagline {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    color: rgba(239, 232, 219, 0.92);
    margin: 10px 0 0;
    position: relative;
    z-index: 2;
}

.explore-page-v2 .cat-hero__motifs-wrap {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 55%;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    padding-right: 20px;
    z-index: 1;
}

.explore-page-v2 .cat-hero__motif {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    pointer-events: none;
    flex-shrink: 0;
}

.explore-page-v2 .cat-hero__motif--secondary {
    width: 150px !important;
    height: 150px !important;
    transform: rotate(-14deg);
    opacity: 0.9 !important;
}

.explore-page-v2 .cat-hero__motif--primary {
    width: 240px !important;
    height: 240px !important;
    transform: rotate(8deg);
    opacity: 1 !important;
}

/* ── Brand page hero ──────────────────────── */
.explore-page-v2 .brand-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.explore-page-v2 .brand-hero__scrim {
    position: absolute;
    inset: 0;
    background: rgba(86, 16, 35, 0.62);
}

.explore-page-v2 .brand-hero>.cat-back,
.explore-page-v2 .brand-hero>.cat-eyebrow,
.explore-page-v2 .brand-hero>.cat-name,
.explore-page-v2 .brand-hero>.cat-tagline {
    position: relative;
    z-index: 1;
}

.explore-page-v2 .subcat-row {
    background: white;
    border-bottom: 1px solid rgba(86, 16, 35, 0.1);
    padding: 0 48px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.explore-page-v2 .subcat-row::-webkit-scrollbar {
    display: none;
}

.explore-page-v2 .subcat-btn {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* color: rgba(86, 16, 35, 0.38); */
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    padding: 15px 20px;
    white-space: nowrap;
    transition: color 120ms, border-color 120ms;
}

.explore-page-v2 .subcat-btn:hover {
    color: var(--hzl-maroon);
}

.explore-page-v2 .subcat-btn--active {
    color: var(--hzl-maroon);
    border-bottom-color: var(--hzl-coral);
}

.explore-page-v2 .cat-content {
    display: grid;
    grid-template-columns: 200px 1fr;
    padding: 48px;
    gap: 0;
    background: var(--hzl-cream);
}

.explore-page-v2 .cat-sidebar {
    padding-right: 36px;
    border-right: 1px solid rgba(86, 16, 35, 0.1);
}

.explore-page-v2 .sidebar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.explore-page-v2 .sidebar-head .sidebar-title {
    margin-bottom: 0;
}

.explore-page-v2 .filter-reset {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(86, 16, 35, 0.45);
    transition: color 120ms;
}

.explore-page-v2 .filter-reset:hover {
    color: var(--hzl-coral);
}

.explore-page-v2 .cat-sidebar.has-active-filters .filter-reset {
    color: var(--hzl-coral);
}

.explore-page-v2 .sidebar-section {
    margin-bottom: 32px;
}

/* Brand list is capped at EXPLORE_SIDEBAR_BRANDS_VISIBLE rows until "Show all" is clicked */

.explore-page-v2 .filter-more {
    margin-top: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hzl-maroon);
    border-bottom: 1px solid rgba(86, 16, 35, 0.25);
}

.explore-page-v2 .filter-more:hover {
    color: var(--hzl-coral);
    border-bottom-color: var(--hzl-coral);
}

.explore-page-v2 .sidebar-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--hzl-maroon);
    margin: 0 0 14px;
}

.explore-page-v2 .filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--hzl-ink);
}

.explore-page-v2 .filter-item input[type="checkbox"] {
    accent-color: var(--hzl-coral);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.explore-page-v2 .filter-count {
    margin-left: auto;
    color: rgba(30, 30, 30, 0.3);
}

/* Extra brands hidden until "Show all" clicked — must come after .filter-item to win cascade */
.explore-page-v2 .filter-item--extra {
    display: none;
}

.explore-page-v2 .sidebar-section.brands-expanded .filter-item--extra {
    display: flex;
}

.explore-page-v2 .cat-main {
    padding-left: 40px;
}

.explore-page-v2 .sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
}

/* Mobile-only entry point to the filter sidebar (which is collapsed under the breakpoint) */
.explore-page-v2 .cat-filter-toggle {
    display: none;
}

.explore-page-v2 .cat-filter-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    margin-left: 7px;
    padding: 0 4px;
    background: var(--hzl-coral);
    color: var(--hzl-offwhite);
    font-size: 0.58rem;
}

.explore-page-v2 .sort-bar__count {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    /* color: rgba(30, 30, 30, 0.38); */
}

/* Sort control — same component as the host registry dropdown (hzl-custom-sort) */
.explore-page-v2 .sort-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.explore-page-v2 .sort-control__leading {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--hzl-maroon);
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.76rem;
    font-weight: 500;
    white-space: nowrap;
}

.explore-page-v2 .sort-control__leading i {
    font-size: 14px;
    color: var(--hzl-maroon);
}

.explore-page-v2 .hzl-custom-sort {
    position: relative;
    display: inline-block;
}

.explore-page-v2 .hzl-custom-sort__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 140px;
    height: 34px;
    padding: 0 12px;
    border-radius: 0px;
    border: 1.5px solid var(--hzl-maroon);
    box-shadow: 6px 6px 0 var(--surface-shadow) !important;
    background-color: #ffffff !important;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--hzl-maroon);
    cursor: pointer;
    user-select: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.explore-page-v2 .hzl-custom-sort__btn:hover,
.explore-page-v2 .hzl-custom-sort__btn:focus {
    border-color: var(--hzl-maroon-deep, #3f0c1a);
    /* box-shadow: 6px 6px 0 rgba(86, 16, 35, 0.25) !important; */
    outline: none;
}

.explore-page-v2 .hzl-custom-sort__arrow {
    flex-shrink: 0;
}

.explore-page-v2 .hzl-custom-sort__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 150px;
    background-color: #ffffff !important;
    border: 1.5px solid var(--hzl-maroon);
        box-shadow: 6px 6px 0 var(--surface-shadow) !important;
    border-radius: 0px;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 1050;
    overflow: hidden;
}

.explore-page-v2 .hzl-custom-sort__item {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--hzl-maroon);
    padding: 8px 14px;
    cursor: pointer;
    user-select: none;
    text-align: left;
    background-color: #ffffff;
    transition: background-color 0.15s ease;
}

.explore-page-v2 .hzl-custom-sort__item:hover,
.explore-page-v2 .hzl-custom-sort__item:focus {
    background-color: rgba(86, 16, 35, 0.06) !important;
    color: var(--hzl-maroon) !important;
}

.explore-page-v2 .hzl-custom-sort__item.is-selected {
    background-color: var(--hzl-coral) !important;
    color: #ffffff !important;
}

.explore-page-v2 .cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (min-width: 901px) and (max-width: 1199px) {
    .explore-page-v2 .cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

.explore-page-v2 .no-products-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    font-family: var(--font-body);
    color: rgba(30, 30, 30, 0.55);
}

/* ── Tile strip ──────────────────────────── */
.explore-page-v2 .tile-strip {
    display: flex;
    height: 32px;
    width: 100%;
    margin: 0;
    margin-top: auto;
    padding: 0;
    overflow: hidden;
    flex-wrap: nowrap;
    background: var(--hzl-maroon);
}

.explore-page-v2 .tile-strip span {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: grid;
    place-items: center;
}

.explore-page-v2 .tile-strip .hzl-motif {
    width: 14px;
    height: 14px;
}

@media (max-width: 900px) {
    .explore-page-v2 .tile-strip {
        height: 26px;
    }

    .explore-page-v2 .tile-strip .hzl-motif {
        width: 11px;
        height: 11px;
    }
}

/* ── Placeholders ──────────────────────────── */
.explore-page-v2 .ph-p1 {
    background: linear-gradient(145deg, #c8a882, #ede6dc);
    height: 100%;
}

.explore-page-v2 .ph-p2 {
    background: linear-gradient(145deg, #8b9aaa, #c8d4e0);
    height: 100%;
}

.explore-page-v2 .ph-p3 {
    background: linear-gradient(145deg, #7a5a3a, #c8a070);
    height: 100%;
}

.explore-page-v2 .ph-p4 {
    background: linear-gradient(145deg, #5a6a4a, #9aaa7a);
    height: 100%;
}

.explore-page-v2 .ph-p5 {
    background: linear-gradient(145deg, #3a4a6a, #6a8aaa);
    height: 100%;
}

.explore-page-v2 .ph-p6 {
    background: linear-gradient(145deg, #9a6a5a, #d4a090);
    height: 100%;
}

.explore-page-v2 .ph-p7 {
    background: linear-gradient(145deg, #4a7a5a, #8abaa0);
    height: 100%;
}

.explore-page-v2 .ph-p8 {
    background: linear-gradient(145deg, #7a5a8a, #c0a0c8);
    height: 100%;
}

.explore-page-v2 .ph-f1 {
    background: linear-gradient(145deg, #1a3a6a, #3a6aaa);
    height: 100%;
    position: absolute;
    inset: 0;
}

.explore-page-v2 .ph-f2 {
    background: linear-gradient(145deg, #1a4a2a, #3a7a4a);
    height: 100%;
    position: absolute;
    inset: 0;
}

.explore-page-v2 .ph-f3 {
    background: linear-gradient(145deg, #2a1020, #561023);
    height: 100%;
    position: absolute;
    inset: 0;
}

.explore-page-v2 .ph-b1 {
    background: linear-gradient(145deg, #8a2015, #cc4030);
    height: 100%;
}

.explore-page-v2 .ph-b2 {
    background: linear-gradient(145deg, #2a3a5a, #4a6090);
    height: 100%;
}

.explore-page-v2 .ph-b3 {
    background: linear-gradient(145deg, #1a4a3a, #2a7a5a);
    height: 100%;
}

.explore-page-v2 .ph-b4 {
    background: linear-gradient(145deg, #5a3a10, #9a6a30);
    height: 100%;
}

.explore-page-v2 .ph-b5 {
    background: linear-gradient(145deg, #3a1020, #701040);
    height: 100%;
}

.explore-page-v2 .ph-b6 {
    background: linear-gradient(145deg, #1a2a4a, #3a4a7a);
    height: 100%;
}

.explore-page-v2 .ph-b7 {
    background: linear-gradient(145deg, #4a2010, #8a4020);
    height: 100%;
}

.explore-page-v2 .ph-b8 {
    background: linear-gradient(145deg, #0a3020, #2a6040);
    height: 100%;
}

@media (max-width: 1080px) {
    .explore-page-v2 .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .explore-subnav-rail .subnav {
        padding: 0;
    }

    .explore-subnav-rail .subnav-pills {
        padding: 0 16px;
    }

    .explore-subnav-rail .subnav-pill {
        min-height: 40px;
    }

    .explore-page-v2 .hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .explore-page-v2 .hero-cats--desktop {
        display: none;
    }

    .explore-page-v2 .hero-cats--mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, minmax(118px, auto));
        gap: 2px;
        background: var(--hzl-maroon);
    }

    .explore-page-v2 .hero-cats--mobile .hero-cat {
        padding: 10px 12px 14px;
    }

    .explore-page-v2 .hero-cats--mobile .hero-cat__product {
        transform: translate(-50%, -72%);
        width: min(76px, 44%);
        max-height: 40%;
    }

    .explore-page-v2 .hero-cats--mobile .hero-cat:hover .hero-cat__product {
        transform: translate(-50%, -72%) scale(1.06);
    }

    .explore-page-v2 .hero-cats--mobile .hero-cat__name {
        font-size: 0.875rem;
        line-height: 1.2;
        margin-top: auto;
        padding-top: 6px;
    }

    .explore-page-v2 .hero-left {
        padding: 40px 24px 44px;
        align-items: center;
        text-align: center;
    }

    .explore-page-v2 .hero-eyebrow {
        margin-bottom: 14px;
        font-size: 0.625rem;
        text-align: center;
    }

    .explore-page-v2 .hero-headline {
        font-size: clamp(2.2rem, 10vw, 3rem);
        margin-bottom: 14px;
        text-align: center;
    }

    .explore-page-v2 .hero-subline {
        text-align: center;
    }

    .explore-page-v2 .hero-cta-wrap {
        margin-top: 24px;
        padding-top: 0;
        display: flex;
        justify-content: center;
    }

    .explore-page-v2 .section {
        padding: 32px 20px;
    }

    .explore-page-v2 .products-grid-scroll {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 -20px;
        padding: 0 20px;
        -webkit-overflow-scrolling: touch;
    }

    .explore-page-v2 .products-grid-scroll::-webkit-scrollbar {
        display: none;
    }

    .explore-page-v2 .products-grid {
        display: flex;
        gap: 2px;
    }

    .explore-page-v2 .products-grid-page {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        align-items: stretch;
        gap: 2px;
        flex: 0 0 calc(100vw - 32px);
        scroll-snap-align: start;
    }

    .explore-page-v2 .fund-section {
        grid-template-columns: 1fr;
    }

    .explore-page-v2 .fund-left {
        padding: 40px 20px;
    }

    .explore-page-v2 .fund-right {
        display: none;
    }

    .explore-page-v2 .brands-section {
        padding: 32px 0 32px 16px;
    }

    .explore-page-v2 .brand-tile {
        flex: 0 0 135px;
        height: 170px;
    }

    .explore-page-v2 .cat-hero {
        padding: 36px 20px 28px !important;
        min-height: 180px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .explore-page-v2 .cat-hero__motifs-wrap {
        width: 100% !important;
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-right: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .explore-page-v2 .cat-hero__motif--secondary {
        display: none !important;
    }

    .explore-page-v2 .cat-hero__motif--primary {
        width: 190px !important;
        height: 190px !important;
        position: absolute !important;
        right: -25px !important;
        top: 50% !important;
        transform: translateY(-50%) rotate(8deg) !important;
        opacity: 0.9 !important;
        flex-shrink: 0 !important;
    }

    .explore-page-v2 .cat-name {
        font-size: clamp(2rem, 7.5vw, 3.2rem) !important;
        line-height: 1.02 !important;
        position: relative !important;
        z-index: 2 !important;
        max-width: 80% !important;
        word-wrap: break-word !important;
    }

    .explore-page-v2 .cat-tagline {
        font-size: 1.05rem !important;
        position: relative !important;
        z-index: 2 !important;
        margin-top: 8px !important;
        max-width: 85% !important;
    }

    .explore-page-v2 .cat-back {
        left: 24px;
    }

    .explore-page-v2 .subcat-row {
        padding: 0 24px;
    }

    .explore-page-v2 .cat-content {
        grid-template-columns: 1fr;
        padding: 18px 16px 40px;
    }

    /* Sidebar collapses to a panel that the sort-bar "Filters" button opens above the grid */
    .explore-page-v2 .cat-sidebar {
        display: none;
        padding: 16px;
        margin-bottom: 18px;
        border-right: none;
        border: 1px solid rgba(86, 16, 35, 0.14);
        background: #fff;
    }

    .explore-page-v2 .cat-sidebar.is-open {
        display: block;
    }

    .explore-page-v2 .cat-sidebar .sidebar-section {
        margin-bottom: 22px;
    }

    .explore-page-v2 .cat-sidebar .sidebar-section:last-child {
        margin-bottom: 0;
    }

    .explore-page-v2 .filter-item {
        padding: 9px 0;
        font-size: 0.75rem;
    }

    .explore-page-v2 .filter-item input[type="checkbox"] {
        width: 17px;
        height: 17px;
    }

    .explore-page-v2 .filter-reset {
        font-size: 0.68rem;
    }

    .explore-page-v2 .cat-main {
        padding-left: 0;
    }

    .explore-page-v2 .cat-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
        padding: 0.6em 0.95em;
        background: #fff;
        border: 1px solid rgba(86, 16, 35, 0.2);
        color: var(--hzl-maroon);
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .explore-page-v2 .sort-bar {
        flex-wrap: wrap;
    }

    .explore-page-v2 .sort-bar__count {
        order: 3;
        flex: 1 0 100%;
    }

    .explore-page-v2 .cat-grid {
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
        max-width: none;
    }
}