/* ===========================================================
   FashionHub — Minimal Editorial storefront
   =========================================================== */
:root {
    --c-bg: #ffffff;
    --c-ink: #111111;
    --c-muted: #707070;
    --c-line: #e7e5e1;
    --c-soft: #f5f3f0;       /* image placeholder / soft sections */
    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --maxw: 1280px;
    /* legacy aliases so any leftover refs degrade gracefully */
    --c-violet: #111111; --c-pink: #111111; --c-surface: #ffffff; --radius: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; background: var(--c-bg); color: var(--c-ink);
    font-family: var(--sans); font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.14; letter-spacing: .005em; margin: 0; }

.container-wide { max-width: var(--maxw); margin-inline: auto; padding-inline: 1.5rem; }

/* ---------- Links & buttons ---------- */
.link-underline {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--sans); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
    padding-bottom: .3rem; border-bottom: 1px solid var(--c-ink); transition: opacity .2s ease;
}
.link-underline:hover { opacity: .5; }

.btn-grad, .btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--sans); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
    padding: .9rem 2.1rem; border: 1px solid var(--c-ink); cursor: pointer; transition: all .2s ease;
}
.btn-grad { background: var(--c-ink); color: #fff; }
.btn-grad:hover { background: transparent; color: var(--c-ink); }
.btn-ghost { background: transparent; color: var(--c-ink); }
.btn-ghost:hover { background: var(--c-ink); color: #fff; }

/* ---------- Navbar ---------- */
.site-nav {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--c-line);
}
.brand { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; letter-spacing: .02em; }
.brand img { width:150px }
.brand .dot { display: none; }
.text-gradient { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
.site-nav .nav-link {
    color: var(--c-ink); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
    position: relative; padding: .5rem .15rem;
}
.site-nav .nav-link::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: .25rem; height: 1px; background: var(--c-ink); transition: right .25s ease;
}
.site-nav .nav-link:hover::after, .site-nav .nav-link.active::after { right: 0; }

/* ---------- Editorial hero ---------- */
.hero-split {
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-bottom: 1px solid var(--c-line);
    /* full-bleed: break out of the layout container to span the viewport */
    width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 0;
}
.hero-text { padding: clamp(2.5rem, 6vw, 6rem) clamp(1.5rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; }
.hero-text .eyebrow { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--c-muted); }
.hero-text h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); margin: 1.2rem 0; line-height: 1.05; }
.hero-text p { color: var(--c-muted); max-width: 42ch; font-size: 1.05rem; margin: 0 0 2.2rem; }
.hero-img { background: var(--c-soft); min-height: 62vh; overflow: hidden; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
    .hero-split { grid-template-columns: 1fr; }
    .hero-img { min-height: 52vh; order: -1; }
}

/* ---------- Wide promo banner / carousel (home) ---------- */
.home-carousel {
    /* full-bleed: span the viewport, breaking out of the layout container */
    width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
    margin-top: 4.5rem;
}
.wide-banner {
    min-height: 460px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    display: flex; align-items: center;
}
.wide-banner.no-image { background: var(--c-soft); }
.wide-banner::before {
    content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.34);
}
.wide-banner.no-image::before { background: none; }
.wide-banner-inner {
    position: relative; z-index: 1; color: #fff;
    max-width: var(--maxw); width: 100%; margin-inline: auto;
    padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4.5rem);
}
.wide-banner.no-image .wide-banner-inner { color: var(--c-ink); }
.wb-eyebrow { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; opacity: .9; }
.wb-title { font-size: clamp(2rem, 4.5vw, 3.4rem); margin: 1rem 0; max-width: 18ch; color: inherit; }
.wb-text { max-width: 46ch; font-size: 1.05rem; line-height: 1.8; opacity: .95; margin: 0 0 2rem; }
.wide-banner .wb-btn { background: #fff; color: var(--c-ink); border-color: #fff; }
.wide-banner .wb-btn:hover { background: transparent; color: #fff; }
.wide-banner.no-image .wb-btn { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.wide-banner.no-image .wb-btn:hover { background: transparent; color: var(--c-ink); }

/* Carousel controls — minimal editorial style */
.home-carousel .carousel-control-prev,
.home-carousel .carousel-control-next { width: 8%; opacity: 0; transition: opacity .25s ease; }
.home-carousel:hover .carousel-control-prev,
.home-carousel:hover .carousel-control-next { opacity: .85; }
.home-carousel .carousel-control-prev-icon,
.home-carousel .carousel-control-next-icon {
    width: 2.4rem; height: 2.4rem; background-color: rgba(0,0,0,.35); border-radius: 50%;
    background-size: 45%;
}
.home-carousel .carousel-indicators { margin-bottom: 1.25rem; }
.home-carousel .carousel-indicators [data-bs-target] {
    width: 28px; height: 3px; border: none; border-radius: 0; background: rgba(255,255,255,.55);
    transition: background .2s ease;
}
.home-carousel .carousel-indicators .active { background: #fff; }

@media (max-width: 600px) {
    .wide-banner { min-height: 340px; }
    .home-carousel .carousel-control-prev,
    .home-carousel .carousel-control-next { display: none; }
}

/* ---------- Section heading ---------- */
.section-head { margin: 5rem 0 2.25rem; text-align: center; }
.section-head .eyebrow { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }
.section-head h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); margin-top: .5rem; }
.section-head.left { text-align: left; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }

/* ---------- Product card ---------- */
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card .img-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--c-soft); }
.product-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.product-card:hover .img-wrap img { transform: scale(1.05); }
.product-card .badge-sale {
    position: absolute; top: 1rem; left: 1rem; background: #fff; color: var(--c-ink);
    font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; padding: .35rem .65rem; border: 1px solid var(--c-ink);
}
.product-card .body { padding: 1rem .1rem 0; display: flex; flex-direction: column; gap: .25rem; }
.product-card .cat { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted); }
.product-card .name { font-family: var(--sans); font-weight: 500; font-size: .98rem; color: var(--c-ink); }
.product-card .price { font-size: .95rem; margin-top: .15rem; }
.product-card .price .old { color: var(--c-muted); text-decoration: line-through; margin-left: .5rem; font-size: .85rem; }

/* ---------- Category filter (minimal text links) ---------- */
.chip {
    border: none; background: none; color: var(--c-muted); cursor: pointer;
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .1rem;
    border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.chip:hover { color: var(--c-ink); }
.chip.active { color: var(--c-ink); border-bottom-color: var(--c-ink); }

/* ---------- Brands ---------- */
.brand-card {
    display: flex; flex-direction: column; align-items: center; gap: .9rem; height: 100%;
    padding: 2rem 1rem; border: 1px solid var(--c-line); transition: border-color .2s ease, transform .2s ease;
}
.brand-card:hover { border-color: var(--c-ink); transform: translateY(-2px); }
.brand-logo {
    width: 100%; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center;
    background: var(--c-soft); overflow: hidden;
}
.brand-logo img { max-width: 78%; max-height: 78%; object-fit: contain; }
.brand-initial { font-family: var(--serif); font-size: 2.4rem; color: var(--c-muted); }
.brand-name { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink); }

.brand-hero { text-align: center; padding: 1rem 0 2.5rem; }
.brand-hero-logo {
    width: 120px; height: 120px; margin: 0 auto 1.2rem; background: var(--c-soft);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.brand-hero-logo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.brand-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }

/* ---------- Blog ---------- */
.blog-card { display: flex; flex-direction: column; height: 100%; }
.blog-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; background: var(--c-soft); }
.blog-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.blog-card:hover .img-wrap img { transform: scale(1.05); }
.blog-card .body { padding: 1.15rem .1rem 0; }
.blog-card .date { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); }
.blog-card h3 { font-size: 1.4rem; margin: .55rem 0 .45rem; }
.blog-card p { color: var(--c-muted); font-size: .95rem; margin: 0; }

/* ---------- Content / Topic + rich text ---------- */
.content-page { max-width: 760px; margin-inline: auto; }
.content-page h1 { font-size: clamp(2.1rem, 4vw, 3rem); }
.content-page .body-text, .rich-content { font-size: 1.06rem; line-height: 1.9; color: #262626; }
.rich-content h2 { font-size: 1.9rem; margin: 2.2rem 0 .6rem; }
.rich-content h3 { font-size: 1.45rem; margin: 1.8rem 0 .5rem; }
.rich-content p { margin: 0 0 1.2rem; }
.rich-content ul, .rich-content ol { margin: 0 0 1.2rem 1.25rem; }
.rich-content a { text-decoration: underline; }
.rich-content blockquote {
    border-left: 2px solid var(--c-ink); margin: 1.6rem 0; padding-left: 1.3rem;
    font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: #333;
}
.rich-content img { margin: 1.6rem 0; }

/* ---------- FAQ / content blocks ---------- */
.faq { margin: 2.5rem 0 1rem; }
.faq > h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.faq-item { border-top: 1px solid var(--c-line); padding: .9rem 0; }
.faq-item:last-child { border-bottom: 1px solid var(--c-line); }
.faq-item > summary {
    cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; font-size: 1.4rem; color: var(--c-muted); transition: transform .2s ease; }
.faq-item[open] > summary::after { content: "−"; }
.faq-item .faq-a { color: #3a3a3a; line-height: 1.8; padding-top: .7rem; }

.howto { margin: 2.5rem 0 1rem; }
.howto > h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.howto-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.howto-steps > li { position: relative; padding: 0 0 1.3rem 3rem; }
.howto-steps > li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: 0; width: 2rem; height: 2rem;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--c-ink); color: #fff; font-size: .85rem; font-weight: 600;
}
.howto-steps > li:not(:last-child)::after {
    content: ""; position: absolute; left: 1rem; top: 2.2rem; bottom: .2rem; width: 1px; background: var(--c-line);
}
.howto-title { font-weight: 600; }
.howto-text { color: #3a3a3a; line-height: 1.8; margin: .3rem 0 0; }

/* ---------- Tags ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); border: 1px solid var(--c-line); padding: .3rem .7rem; }

/* ---------- Footer (dark) ---------- */
.site-footer { background: #111111; color: #d9d6cf; margin-top: 6rem; padding: 4.5rem 0 2rem; }
.site-footer a { color: #b8b4ab; transition: color .2s ease; }
.site-footer a:hover { color: #ffffff; }
.site-footer .brand { color: #ffffff; font-size: 1.5rem; }
.site-footer p { color: #9b978d; }
.site-footer h6 { font-family: var(--sans); text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; color: #8d897f; margin-bottom: 1.1rem; font-weight: 600; }
.site-footer .foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 3rem; padding-top: 1.5rem; font-size: .76rem; color: #8d897f; letter-spacing: .05em; }

/* htmx fade for swapped grid */
.htmx-swapping { opacity: 0; transition: opacity .15s ease; }
#product-grid.htmx-request { opacity: .4; transition: opacity .2s ease; }

/* ===========================================================
   Mega menu
   =========================================================== */
.site-nav .nav-item.has-mega { position: static; }
.mega-caret { font-size: .6rem; margin-left: .2rem; transition: transform .2s ease; vertical-align: middle; }
.has-mega:hover .mega-caret { transform: rotate(180deg); }
.mega-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
    box-shadow: 0 24px 40px -28px rgba(0,0,0,.25);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 999;
}
.has-mega:hover .mega-panel, .has-mega:focus-within .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner {
    max-width: var(--maxw); margin-inline: auto; padding: 2.25rem 1.5rem 2.5rem;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.75rem 2rem;
}
.mega-col { min-width: 0; }
.mega-head {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--sans); font-weight: 600; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-ink); padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--c-line);
}
.mega-head:hover { opacity: .6; }
.mega-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.mega-list a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    color: var(--c-muted); font-size: .9rem; padding: .25rem 0; transition: color .15s ease, padding .15s ease;
}
.mega-list a:hover { color: var(--c-ink); padding-left: .35rem; }
.mega-count, .cat-count {
    font-size: .64rem; color: var(--c-muted); background: var(--c-soft);
    padding: .05rem .4rem; border-radius: 999px; line-height: 1.5;
}

/* Nav drawer: inline on desktop, slide-in panel on mobile. */
.nav-drawer { display: flex; }
.nav-backdrop { display: none; }
.nav-drawer-head { display: none; }

@media (max-width: 767.98px) {
    /* backdrop-filter would trap position:fixed children inside the navbar — drop it on mobile. */
    .site-nav { backdrop-filter: none; }

    /* Slide-in drawer from the RIGHT (mirrors the shop filter drawer). */
    .nav-drawer {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 2000;
        width: min(82vw, 320px); display: block;
        background: #fff; padding: 1rem 1.25rem 2rem; overflow-y: auto;
        transform: translateX(100%); transition: transform .3s ease;
        box-shadow: -8px 0 40px rgba(0,0,0,.18);
    }
    body.nav-open .nav-drawer { transform: translateX(0); }
    .nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1999; background: rgba(0,0,0,.45);
        opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
    }
    body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
    body.nav-open { overflow: hidden; }
    .nav-drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        padding-bottom: 1rem; margin-bottom: .25rem; border-bottom: 1px solid var(--c-line);
    }
    .nav-drawer-head .menu-title { font-family: var(--serif); font-size: 1.35rem; color: var(--c-ink); }
    .nav-drawer-head .drawer-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--c-ink); padding: .25rem .4rem; }

    /* Mobile menu list: full-width vertical with dividers. */
    .site-nav .navbar-nav { gap: 0 !important; width: 100%; }
    .site-nav .nav-item { width: 100%; border-top: 1px solid var(--c-line); }
    .site-nav .nav-link { display: block; width: 100%; padding: .9rem .25rem; font-size: .82rem; }
    .site-nav .nav-link::after { display: none; }

    /* Mega menu is an accordion on mobile: tap "Categories" to toggle. */
    .nav-item.has-mega { position: static; }
    .mega-panel {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; background: transparent;
        overflow: hidden; max-height: 0; transition: max-height .3s ease;
    }
    .has-mega.open .mega-panel { max-height: 80vh; overflow-y: auto; }
    .mega-inner { grid-template-columns: 1fr; padding: 0 0 .75rem .5rem; gap: .9rem; }
    .mega-caret { display: inline-block; }
    .has-mega.open .mega-caret { transform: rotate(180deg); }
    .mega-head { border-bottom: none; padding-bottom: .25rem; margin-bottom: .25rem; }
    .mega-list a { padding: .35rem 0; }
}

/* ===========================================================
   Shop layout + sidebar filter
   =========================================================== */
.shop-layout { display: grid; grid-template-columns: 268px 1fr; gap: 2.5rem; align-items: start; }
.shop-sidebar { position: sticky; top: 90px; }
.filter-block { padding: 1.2rem 0; border-bottom: 1px solid var(--c-line); }
.filter-block:first-child { padding-top: 0; }
.filter-title {
    font-family: var(--sans); font-weight: 600; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--c-ink); margin: 0 0 .85rem;
}
.input-search { position: relative; }
.input-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--c-muted); font-size: .9rem; }
.input-search input {
    width: 100%; border: 1px solid var(--c-line); background: var(--c-bg);
    padding: .7rem .8rem .7rem 2.3rem; font-size: .9rem; font-family: var(--sans); color: var(--c-ink);
}
.input-search input:focus { outline: none; border-color: var(--c-ink); }

.cat-tree, .cat-sub { list-style: none; padding: 0; margin: 0; }
.cat-sub { margin: .15rem 0 .35rem .2rem; padding-left: .7rem; border-left: 1px solid var(--c-line); }
.cat-link {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .35rem 0; color: var(--c-muted); font-size: .92rem; cursor: pointer; transition: color .15s ease, padding .15s ease;
}
.cat-link:hover { color: var(--c-ink); padding-left: .25rem; }
.cat-link.active { color: var(--c-ink); font-weight: 600; }

.price-row { display: flex; align-items: center; gap: .5rem; }
.price-row input {
    width: 100%; min-width: 0; border: 1px solid var(--c-line); background: var(--c-bg);
    padding: .55rem .6rem; font-size: .9rem; font-family: var(--sans); color: var(--c-ink);
}
.price-row input:focus { outline: none; border-color: var(--c-ink); }
.price-row .dash { color: var(--c-muted); }
.price-hint { font-size: .74rem; color: var(--c-muted); margin-top: .55rem; }

.check-line { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .92rem; color: var(--c-ink); }
.check-line input { width: 1rem; height: 1rem; accent-color: var(--c-ink); }

.sort-select {
    width: 100%; border: 1px solid var(--c-line); background: var(--c-bg);
    padding: .6rem .7rem; font-size: .9rem; font-family: var(--sans); color: var(--c-ink);
}
.sort-select:focus { outline: none; border-color: var(--c-ink); }

/* Attribute facets (colors / sizes) */
.facet-list { display: flex; flex-direction: column; gap: .15rem; }
.facet-line { display: flex; align-items: center; gap: .55rem; cursor: pointer; padding: .25rem 0; color: var(--c-muted); font-size: .9rem; }
.facet-line:hover { color: var(--c-ink); }
.facet-line input { width: 1rem; height: 1rem; accent-color: var(--c-ink); }
.facet-line .facet-name { flex: 1; }
.facet-line input:checked ~ .facet-name { color: var(--c-ink); font-weight: 600; }

.facet-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.facet-swatch { cursor: pointer; line-height: 0; }
.facet-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.facet-swatch .sw-dot {
    display: inline-block; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--sw); border: 1px solid rgba(0,0,0,.15); transition: transform .12s ease;
}
.facet-swatch:hover .sw-dot { transform: scale(1.08); }
.facet-swatch input:checked + .sw-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-ink); }

.filter-actions { padding-top: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.filter-actions .btn-grad { justify-content: center; }
.filter-clear { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); border-bottom: 1px solid transparent; }
.filter-clear:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }

/* Mobile filter drawer trigger + backdrop (hidden on desktop) */
.shop-filter-toggle {
    align-items: center; gap: .5rem; margin-bottom: 1.25rem;
    border: 1px solid var(--c-ink); background: #fff; color: var(--c-ink);
    padding: .7rem 1.2rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; cursor: pointer;
}
.shop-filter-toggle { display: inline-flex; }   /* visible <lg; .d-lg-none hides it at lg+ */
.shop-backdrop { display: none; }
.drawer-head { display: none; }

@media (max-width: 991.98px) {
    .shop-layout { grid-template-columns: 1fr; }

    /* Sidebar becomes a slide-in drawer covering the screen. */
    .shop-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 2000;
        width: min(88vw, 360px); margin-bottom: 0;
        background: #fff; padding: 1.25rem 1.25rem 2rem; overflow-y: auto;
        transform: translateX(-100%); transition: transform .3s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.2);
    }
    body.filters-open .shop-sidebar { transform: translateX(0); }

    .shop-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1999; background: rgba(0,0,0,.45);
        opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
    }
    body.filters-open .shop-backdrop { opacity: 1; visibility: visible; }
    body.filters-open { overflow: hidden; }

    .drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        font-family: var(--serif); font-size: 1.35rem; color: var(--c-ink);
        padding-bottom: 1rem; margin-bottom: .25rem; border-bottom: 1px solid var(--c-line);
    }
    .drawer-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--c-ink); padding: .25rem .4rem; }
}

/* ===========================================================
   Product details page (PDP)
   =========================================================== */
.pdp-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 1.6rem 0 2rem;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
}
.pdp-breadcrumb a:hover { color: var(--c-ink); }
.pdp-breadcrumb .current { color: var(--c-ink); }

.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.pdp-gallery { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1rem; }
.pdp-stage { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--c-soft); }
.pdp-stage img { width: 100%; height: 100%; object-fit: cover; }
.pdp-badge {
    position: absolute; top: 1rem; left: 1rem; z-index: 2; background: var(--c-ink); color: #fff;
    font-size: .68rem; letter-spacing: .12em; padding: .35rem .65rem; font-weight: 600;
}
.pdp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .6rem; }
.pdp-thumb { padding: 0; border: 1px solid var(--c-line); background: var(--c-soft); cursor: pointer; aspect-ratio: 1; overflow: hidden; transition: border-color .15s ease; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb.active { border-color: var(--c-ink); }

.pdp-info { padding-top: .25rem; }
.pdp-eyebrow { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted); }
.pdp-title { font-size: clamp(2rem, 4vw, 3rem); margin: .6rem 0 1.2rem; }
.pdp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.6rem; }
.pdp-price .now { font-size: 1.7rem; }
.pdp-price .was { color: var(--c-muted); text-decoration: line-through; font-size: 1.1rem; }
.pdp-price .save { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--c-ink); padding: .3rem .6rem; }
.pdp-desc { color: #3a3a3a; line-height: 1.9; margin-bottom: 2rem; max-width: 46ch; }

.pdp-attr { padding: 1.2rem 0; border-top: 1px solid var(--c-line); }
.pdp-attr-head { margin-bottom: .8rem; }
.pdp-attr-name { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.pdp-swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.pdp-swatch {
    width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; padding: 0;
    background: var(--sw); border: 1px solid rgba(0,0,0,.15); position: relative; transition: transform .12s ease;
}
.pdp-swatch:hover { transform: scale(1.08); }
.pdp-swatch.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-ink); }
.pdp-pills { display: flex; flex-wrap: wrap; gap: .55rem; }
.pdp-pill {
    min-width: 2.8rem; padding: .55rem .9rem; cursor: pointer; background: var(--c-bg);
    border: 1px solid var(--c-line); font-family: var(--sans); font-size: .85rem; color: var(--c-ink);
    transition: border-color .15s ease, background .15s ease;
}
.pdp-pill:hover { border-color: var(--c-ink); }
.pdp-pill.selected { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

.pdp-actions { display: flex; align-items: center; gap: .8rem; margin: 1.8rem 0 1.6rem; }
.pdp-actions .btn-grad { flex: 1; justify-content: center; }
.pdp-wish { width: 3.1rem; height: 3.1rem; border: 1px solid var(--c-ink); background: transparent; cursor: pointer; transition: all .2s ease; }
.pdp-wish:hover { background: var(--c-ink); color: #fff; }

.pdp-perks { list-style: none; padding: 1.3rem 0 0; margin: 0; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: .6rem; }
.pdp-perks li { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: var(--c-muted); }
.pdp-perks i { color: var(--c-ink); }

.pdp-related { margin-top: 5rem; }

@media (max-width: 860px) {
    .pdp { grid-template-columns: 1fr; }
    .pdp-gallery { position: static; }
}