/* ============================================================
   BOUTIQUE THEME
   Minimal editorial fashion catalogue: monochrome, letter-spaced
   uppercase type, image-led layouts, generous whitespace.

   Colour tokens (--bq-ink / --bq-accent) are injected per-request
   from the admin palette — see themes/boutique/vars.blade.php.

   Prefixes:  .bq-  home   |  .bqd- product detail
              .bqh- header |  .bqf- footer
   ============================================================ */

/* ---------- page reset ----------
   The browser's default 8px body margin would otherwise show as a white frame
   around the theme. The flex column keeps the footer at the bottom of short
   pages instead of leaving white space beneath it. */
/* This stylesheet is only served while the Boutique theme is active, so it is
   safe to reset html/body directly — no :has() support needed. */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    background: #fff;
}
body.bq-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* push the footer to the bottom on short pages */
body.bq-body > .bqf { margin-top: auto; }

/* ---------- shared tokens / resets ---------- */
.bq-wrap, .bqd, .bqh, .bqf {
    --muted: #8a8a8a;
    --line: #e8e8e8;
    font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .01em;
}
.bq-wrap *, .bqd *, .bqh *, .bqf * { box-sizing: border-box; }

/* Full-bleed: bands run the width of the viewport, not a centred column. */
.bq-container, .bqd-container, .bqh-inner, .bqf-inner { width: 100%; max-width: none; margin: 0 auto; padding: 0 clamp(14px, 2vw, 44px); }

/* shared buttons */
.bq-btn {
    display: inline-block; padding: 13px 34px; border: 1px solid #fff; color: #fff; text-decoration: none;
    font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; transition: background .18s, color .18s;
}
.bq-btn:hover { background: #fff; color: var(--bq-ink); }
.bq-btn--dark { border-color: var(--bq-ink); color: var(--bq-ink); }
.bq-btn--dark:hover { background: var(--bq-ink); color: #fff; }

/* ============================================================
   HOME
   ============================================================ */
.bq-wrap { background: #fff; color: var(--bq-ink); padding-bottom: 70px; }

.bq-head { text-align: center; margin: 64px 0 28px; }
.bq-head h2 { font-size: 1.35rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; margin: 0; }
.bq-head p { margin: 10px 0 0; font-size: .82rem; color: var(--muted); letter-spacing: .04em; }
.bq-head .rule { width: 46px; height: 1px; background: var(--bq-ink); margin: 16px auto 0; }

/* hero
   The banner is shown whole, at its own proportions, at every width — a fixed
   height with object-fit:cover cropped the artwork, and anything written into
   the image went with it. The height follows the image instead. */
.bq-hero { position: relative; height: auto; overflow: hidden; background: var(--bq-ink); }
.bq-hero-link { display: block; }
.bq-hero img { width: 100%; height: auto; display: block; }

/* From tablet up the banner spans the full width as a band of its own height.
   Letterboxing it instead left black pillars down both sides, and at these
   widths the shape of the band is close enough to the artwork's that filling
   it only trims a little off the top and bottom — unlike a phone, where the
   same approach threw away most of the picture. */
@media (min-width: 769px) {
    .bq-hero img { height: clamp(420px, 46vw, 820px); object-fit: cover; }
}

/* Hero slider. Scroll-snap does the sliding, so the track stays swipeable
   with JavaScript off; the script only adds arrows, dots and autoplay. */
.bq-hero-track {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.bq-hero-track::-webkit-scrollbar { display: none; }

.bq-hero-slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.bq-hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--bq-ink);
    font-size: 13px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease, transform .15s ease;
}

.bq-hero-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.bq-hero-arrow.prev { left: 20px; }
.bq-hero-arrow.next { right: 20px; }

.bq-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 3;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.bq-hero-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: width .18s ease, background .18s ease;
}

.bq-hero-dot:hover { background: rgba(255, 255, 255, .8); }
.bq-hero-dot.is-active { width: 22px; background: #fff; }
.bq-hero-cap {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; gap: 20px;
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.34)); color: #fff; padding: 20px;
}
.bq-hero-cap h1 { font-size: clamp(1.9rem, 5vw, 3.6rem); font-weight: 400; letter-spacing: .18em; text-transform: uppercase; margin: 0; }
.bq-hero-cap span { font-size: .84rem; letter-spacing: .28em; text-transform: uppercase; opacity: .92; }
/* The no-banner placeholder has no image to sit over, so it carries its own
   height instead of stretching across one. */
.bq-hero-cap--solo { position: static; min-height: 46vh; background: var(--bq-ink); }

/* collections */
.bq-collections { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* A shop with one or two categories centres them instead of leaving empty
   columns on the right. Two always share a row — with auto-fit they dropped
   into a column as soon as the screen was too narrow for two 300px tiles.
   The 0 minimum is what lets them shrink to fit a phone rather than stack. */
.bq-collections.is-two { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
.bq-collections.is-one { grid-template-columns: minmax(0, 340px); justify-content: center; }
.bq-col { position: relative; display: block; overflow: hidden; aspect-ratio: 3/4; background: #f2f2f2; text-decoration: none; }
.bq-col img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bq-col:hover img { transform: scale(1.05); }
.bq-col-cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 22px; color: #fff;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.6)); text-align: center;
}
.bq-col-cap h3 { margin: 0 0 12px; font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.bq-col-cap small { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid #fff; padding-bottom: 3px; }
.bq-col-ph {
    position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted);
    font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
}

/* offer / flash sale band
   Colours come from the offer itself (admin sets them), so the band is the one
   place on the page that is allowed to break the monochrome. */
.bq-offer {
    background: var(--bq-offer-bg, #111);
    color: var(--bq-offer-fg, #fff);
    padding: 34px clamp(16px, 2.4vw, 36px) 30px;
    margin-top: 48px;
}
.bq-offer-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.bq-offer-kicker { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
.bq-offer-head h2 {
    margin: 6px 0 0; font-size: 1.35rem; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
}
.bq-offer-timer { display: flex; gap: 10px; }
.bq-offer-timer span {
    display: grid; place-items: center; min-width: 54px; padding: 8px 6px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
}
.bq-offer-timer b { font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.bq-offer-timer i { font-style: normal; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
/* The cards keep their own white panel, so they stay readable whatever
   background colour the offer is given. */
.bq-offer .bq-card { background: #fff; color: var(--bq-ink); padding: 12px 12px 14px; }
.bq-offer .bq-thumb { margin-bottom: 12px; }
.bq-offer-foot { text-align: center; margin-top: 26px; }
.bq-offer .bq-btn { border-color: var(--bq-offer-fg, #fff); color: var(--bq-offer-fg, #fff); }
.bq-offer .bq-btn:hover { background: var(--bq-offer-fg, #fff); color: var(--bq-offer-bg, #111); }
.bq-offer .bq-rail-arrow { background: #fff; border-color: rgba(0, 0, 0, .12); color: var(--bq-ink); }

/* product grid + card */
.bq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; }

/* Product rail: one row that scrolls sideways. Scroll-snap does the moving, so
   it is swipeable with JavaScript off and the arrows are only an extra. */
.bq-railwrap { position: relative; }
.bq-rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.bq-rail::-webkit-scrollbar { display: none; }
/* Four across at the same width the grid gave them, and one card per snap. */
.bq-rail > * { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; }
.bq-rail > .bq-empty { flex: 1 1 100%; }

.bq-rail-arrow {
    position: absolute;
    top: 34%;
    z-index: 3;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--bq-ink);
    font-size: 12px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease, opacity .15s ease, transform .15s ease;
}
.bq-rail-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.bq-rail-arrow.prev { left: -6px; }
.bq-rail-arrow.next { right: -6px; }
/* Hidden when there is nothing to scroll to in that direction. */
.bq-rail-arrow.is-hidden { opacity: 0; visibility: hidden; }
/* A column, so that however long a product's name runs the price and the
   button still line up with the cards either side of it. */
.bq-card { text-align: center; display: flex; flex-direction: column; }
.bq-card .bq-add { margin-top: auto; }
.bq-thumb { display: block; position: relative; aspect-ratio: 3/4; overflow: hidden; background: #f6f6f6; margin-bottom: 14px; }
.bq-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s; }
.bq-card:hover .bq-thumb img { transform: scale(1.045); }
.bq-tag {
    position: absolute; top: 12px; left: 12px; background: var(--bq-ink); color: #fff;
    font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px;
}
.bq-wish {
    position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; cursor: pointer;
    background: rgba(255,255,255,.9); color: #555; border-radius: 50%; display: grid; place-items: center;
    opacity: 0; transition: opacity .2s;
}
.bq-card:hover .bq-wish { opacity: 1; }
.bq-wish:hover { color: #111; }
/* The name is the quieter half of the pair: the price is what a shopper scans
   a grid for, so it carries the weight. */
/* Held to two lines so a long name cannot push the price and button of one
   card out of step with its neighbours. */
.bq-name {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .74rem; letter-spacing: .04em; color: var(--muted); text-decoration: none;
    margin-bottom: 5px; line-height: 1.45; min-height: 2.9em;
}
.bq-name:hover { color: var(--bq-ink); }
.bq-prices { font-size: .92rem; font-weight: 600; letter-spacing: .02em; color: var(--bq-ink); }
.bq-was { color: var(--muted); text-decoration: line-through; margin-left: 8px; font-size: .78rem; }
.bq-empty {
    grid-column: 1/-1; text-align: center; color: var(--muted); padding: 60px 0;
    border: 1px solid var(--line); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
}

/* services */
.bq-services {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 70px;
}
.bq-services div { text-align: center; padding: 34px 20px; border-right: 1px solid var(--line); }
.bq-services div:last-child { border-right: 0; }
.bq-services i { font-size: 1.3rem; margin-bottom: 12px; display: block; }
.bq-services h4 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.bq-services p { margin: 0; font-size: .78rem; color: var(--muted); }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.bqd { background: #fff; color: var(--bq-ink); padding: 30px 0 80px; }
.bqd-crumb { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.bqd-crumb a { color: var(--muted); text-decoration: none; }
.bqd-crumb a:hover { color: var(--bq-ink); }

.bqd-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; }
.bqd-main { aspect-ratio: 3/4; background: #f6f6f6; overflow: hidden; }
.bqd-main img { width: 100%; height: 100%; object-fit: cover; }

/* Hover zoom. Only where hovering is possible — on a touch screen there is no
   hover, and a stuck-zoomed image would just be in the way. The origin is set
   from the cursor by the page script, so the zoom goes where you are looking;
   with no script it falls back to a centre zoom. */
@media (hover: hover) and (pointer: fine) {
    .bqd-main.is-zoomable { cursor: zoom-in; }
    .bqd-main.is-zoomable img {
        transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
        transition: transform .45s cubic-bezier(.2, .6, .25, 1);
        will-change: transform;
    }
    .bqd-main.is-zoomable:hover img { transform: scale(1.65); }
}

/* Someone who asked for less motion gets the detail without the movement. */
@media (prefers-reduced-motion: reduce) {
    .bqd-main.is-zoomable img { transition: none; }
}
.bqd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
/* boutique overrides the shared thumb to a portrait crop */
.bqd .pd-thumb { width: 72px; height: 92px; border-radius: 0; border: 1px solid transparent; background: #f6f6f6; }
.bqd .pd-thumb.is-active { border-color: var(--bq-ink); }

.bqd-name { font-size: 1.32rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; margin: 0 0 12px; line-height: 1.35; }
.bqd-meta { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.bqd-stars { color: #111; letter-spacing: 2px; }
.bqd-price { font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 22px; color: var(--bq-ink); }
.bqd-was { color: var(--muted); text-decoration: line-through; margin-left: 10px; font-size: 1.05rem; font-weight: 400; }
.bqd-sale {
    margin-left: 10px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    background: var(--bq-ink); color: #fff; padding: 4px 10px; font-weight: 700; border-radius: 2px;
}
.bqd-rule { height: 1px; background: var(--line); margin: 24px 0; }
.bqd-lbl { display: block; font-size: .84rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bq-ink); margin-bottom: 12px; }

.bqd-opts { display: flex; gap: 12px; flex-wrap: wrap; }
.bqd-opts input { position: absolute; opacity: 0; width: 0; height: 0; }
.bqd-opts label {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 58px; min-height: 52px; text-align: center; border: 2px solid var(--line); padding: 12px 20px;
    font-size: .95rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; text-transform: uppercase;
    border-radius: 4px; transition: all .16s ease;
}
.bqd-opts label:hover { border-color: var(--bq-ink); }
.bqd-opts input:focus-visible + label { outline: 2px solid var(--bq-ink); outline-offset: 2px; }
.bqd-opts input:checked + label {
    border-color: var(--bq-ink); background: var(--bq-ink); color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

/* SIZE SELECTOR: 6 items in a row, covering 80% width with 20% right gap */
.bqd-opts--size {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
    width: 80% !important;
    max-width: 80% !important;
}
.bqd-opts--size > span { display: flex !important; width: 100% !important; min-width: 0 !important; }
.bqd-opts--size label {
    width: 100% !important; min-width: 0 !important; min-height: 42px !important; height: 42px !important;
    padding: 6px 2px !important; font-size: .92rem !important; font-weight: 700 !important;
    letter-spacing: .02em !important; text-align: center !important; border: 2px solid var(--line) !important;
    border-radius: 4px !important; display: flex !important; align-items: center !important;
    justify-content: center !important; box-sizing: border-box !important; cursor: pointer !important;
    transition: all .16s ease !important;
}
.bqd-opts--size label:hover { border-color: var(--bq-ink) !important; }
.bqd-opts--size input:checked + label {
    border-color: var(--bq-ink) !important; background: var(--bq-ink) !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
}
.bqd-swatch {
    width: 14px; height: 14px; border-radius: 50%; display: inline-block; vertical-align: -2px;
    margin-right: 7px; border: 1px solid rgba(0,0,0,.18);
}
.bqd-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 4px; }
.bqd-qty button { width: 44px; height: 48px; border: 0; background: #fff; font-size: 1.1rem; cursor: pointer; font-weight: 700; }
.bqd-qty button:hover { background: var(--bq-ink); color: #fff; }
.bqd-qty input { width: 58px; height: 48px; border: 0; text-align: center; font-size: .95rem; font-weight: 700; letter-spacing: .06em; }

.bqd-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.bqd-btn {
    border: 2px solid var(--bq-ink); background: #fff; color: var(--bq-ink); min-height: 54px; padding: 16px 28px; cursor: pointer;
    font-size: .92rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-align: center;
    border-radius: 4px; transition: all .18s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.bqd-btn:hover { background: #f5f5f5; color: var(--bq-ink); transform: translateY(-1px); }
.bqd-btn--solid { background: var(--bq-ink); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.14); }
.bqd-btn--solid:hover { background: #222; color: #fff; }
.bqd-btn[disabled] { opacity: .4; cursor: not-allowed; }
.bqd-stock { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 14px; }
.bqd-in { color: #111; }
.bqd-out { color: #b91c1c; }
.bqd-notes { margin-top: 28px; font-size: .78rem; color: var(--muted); line-height: 2; }
.bqd-notes i { width: 18px; color: var(--bq-ink); }

.bqd-lower { margin-top: 80px; }
.bqd-lhead { text-align: center; margin-bottom: 26px; }
.bqd-lhead h2 { font-size: 1rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; margin: 0; }
.bqd-lhead .rule { width: 40px; height: 1px; background: var(--bq-ink); margin: 14px auto 0; }
.bqd-desc { font-size: .88rem; line-height: 2; color: #333; max-width: 820px; margin: 0 auto; }
.bqd-spec { width: 100%; max-width: 820px; margin: 26px auto 0; border-collapse: collapse; font-size: .82rem; }
.bqd-spec td { padding: 12px 0; border-bottom: 1px solid var(--line); letter-spacing: .04em; }
.bqd-spec td:first-child { color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .14em; width: 40%; }
.bqd-review { max-width: 820px; margin: 0 auto; border-bottom: 1px solid var(--line); padding: 16px 0; }
.bqd-review:last-child { border-bottom: 0; }
.bqd-review b { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.bqd-review p { margin: 7px 0 0; font-size: .84rem; color: #333; line-height: 1.8; }

/* ============================================================
   HEADER
   ============================================================ */
.bqh { background: #fff; position: sticky; top: 0; z-index: 900; border-bottom: 1px solid var(--line); }
.bqh a { text-decoration: none; color: var(--bq-ink); }
.bqh-note { display: none !important; }
.bqh-spacer { display: none; }
.bqh-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav actions"; align-items: center; gap: 14px 20px; padding: 14px 0; }
.bqh-nav { grid-area: nav; }
.bqh-brand { grid-area: brand; min-width: 150px; }
.bqh-actions { grid-area: actions; }
.bqh-nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; row-gap: 6px; }
.bqh-nav > div { position: relative; }
/* Tracking is pulled in a little as the type goes up, so a bigger label does
   not cost much more width and the row still holds one line. */
.bqh-nav a.top {
    font-size: clamp(.78rem, .244vw + .644rem, .92rem);
    font-weight: 500; letter-spacing: .11em; text-transform: uppercase; padding: 8px 0;
    display: inline-block; border-bottom: 1px solid transparent; white-space: nowrap;
}
.bqh-nav a.top:hover { border-bottom-color: var(--bq-ink); }
.bqh-drop {
    position: absolute; top: 100%; left: -18px; background: #fff; border: 1px solid var(--line);
    min-width: 210px; padding: 14px 0; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
.bqh-nav > div:hover .bqh-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.bqh-drop a { display: block; padding: 9px 20px; font-size: .84rem; letter-spacing: .06em; color: #444; }
.bqh-drop a:hover { background: #f7f7f7; color: var(--bq-ink); }
.bqh-brand { text-align: left; justify-self: start; font-size: 1.35rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; }
.bqh-brand img { height: 78px; width: auto; max-width: 260px; object-fit: contain; display: block; margin-left: 10px; }
.bqh-actions { display: flex; gap: 22px; align-items: center; justify-content: flex-end; }
.bqh-actions a { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
.bqh-actions a:hover { color: var(--muted); }
.bqh-actions i { font-size: .95rem; }
.bqh-count { font-size: .68rem; letter-spacing: 0; }
/* Hamburger — only ever shown where the horizontal nav is hidden. */
.bqh-burger {
    display: none; grid-area: menu; width: 44px; height: 44px; border: 0; background: transparent;
    color: var(--bq-ink); font-size: 1.15rem; cursor: pointer; align-items: center; justify-content: center;
}

.bqh-drawer { position: fixed; inset: 0; z-index: 1000; }
.bqh-drawer[hidden] { display: none; }
.bqh-drawer-scrim {
    position: absolute; inset: 0; background: rgba(0,0,0,.45);
    opacity: 0; transition: opacity .22s ease;
}
.bqh-drawer.open .bqh-drawer-scrim { opacity: 1; }
.bqh-drawer-panel {
    position: absolute; top: 0; left: 0; bottom: 0; width: min(86vw, 340px); background: #fff;
    display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 24px;
    transform: translateX(-100%); transition: transform .24s ease;
}
.bqh-drawer.open .bqh-drawer-panel { transform: translateX(0); }
.bqh-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--line);
    font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.bqh-drawer-head button {
    width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer;
    font-size: 1.1rem; color: var(--bq-ink);
}
.bqh-drawer-search { display: flex; margin: 18px 20px 6px; border: 1px solid var(--line); }
.bqh-drawer-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; padding: 12px; font-family: inherit;
    font-size: .88rem; background: transparent;
}
.bqh-drawer-search button {
    border: 0; background: var(--bq-ink); color: #fff; width: 48px; cursor: pointer; font-size: .9rem;
}
.bqh-drawer-link {
    display: block; padding: 15px 20px; border-bottom: 1px solid var(--line);
    font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bq-ink);
}
.bqh-drawer-link.sub {
    padding-left: 34px; font-size: .8rem; letter-spacing: .06em; text-transform: none; color: #555;
}
.bqh-drawer-foot { margin-top: auto; padding: 20px; display: grid; gap: 4px; }
.bqh-drawer-foot a {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    font-size: .82rem; letter-spacing: .08em; color: var(--bq-ink);
}

.bqh-searchrow { border-top: 1px solid var(--line); display: none; padding: 14px 0; }
.bqh-searchrow.open { display: block; }
.bqh-search { display: flex; border-bottom: 1px solid var(--bq-ink); max-width: 620px; margin: 0 auto; }
.bqh-search input {
    flex: 1; border: 0; outline: 0; padding: 9px 4px; font-size: .86rem; letter-spacing: .06em;
    font-family: inherit; background: transparent;
}
.bqh-search button {
    border: 0; background: transparent; cursor: pointer; font-size: .7rem;
    letter-spacing: .18em; text-transform: uppercase; padding: 0 6px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.bqf { background: #fff; color: var(--bq-ink); border-top: 1px solid var(--line); margin-top: 80px; font-size: .84rem; }
.bqf a { color: var(--muted); text-decoration: none; transition: color .18s ease, transform .18s ease; }
.bqf a:hover { color: var(--bq-ink); }

/* Newsletter Section */
.bqf-news { background: #fafafa; border-bottom: 1px solid var(--line); padding: 48px 0; }
.bqf-news-wrap { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.bqf-news-tag { display: inline-block; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: #777; font-weight: 600; margin-bottom: 6px; }
.bqf-news-text h3 { margin: 0 0 6px; font-size: 1.3rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: #111; }
.bqf-news-text p { margin: 0; color: var(--muted); font-size: .84rem; }
.bqf-news-action { flex: 1; max-width: 480px; min-width: 280px; }
.bqf-form { display: flex; background: #fff; border: 1px solid #111; border-radius: 0; overflow: hidden; }
.bqf-form input {
    flex: 1; border: 0; outline: 0; background: transparent; padding: 12px 16px;
    font-family: inherit; font-size: .84rem; letter-spacing: .04em; color: #111;
}
.bqf-form button {
    border: 0; background: #111; color: #fff; cursor: pointer; font-size: .72rem;
    letter-spacing: .18em; text-transform: uppercase; padding: 0 24px; font-weight: 500;
    display: flex; align-items: center; gap: 8px; transition: background .2s ease;
}
.bqf-form button:hover { background: #333; }
.bqf-news-note { display: block; margin-top: 8px; font-size: .72rem; color: #888; letter-spacing: .02em; }
.bqf-news-note i { margin-right: 4px; }

/* Main Footer Columns */
.bqf-body { padding: 64px 0 54px; }
.bqf-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; align-items: start; }
.bqf-col h4,
.bqf-col-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 0;
    margin: 0 0 20px;
    padding: 0 0 10px;
    border-bottom: 1px solid #eee;
    font-family: inherit;
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    color: #111;
    text-align: left;
    cursor: default;
    box-sizing: border-box;
}
.bqf-col-header span {
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-weight: inherit;
    color: inherit;
}
.bqf-col-header .bqf-chevron {
    display: none;
}
.bqf-collapse {
    width: 100%;
}
.bqf-brand { margin-bottom: 16px; }
.bqf-brand img { max-height: 54px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.bqf-brand-text { font-size: 1.3rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: #111; }
.bqf-desc { color: #555; line-height: 1.8; margin: 0 0 22px; font-size: .82rem; }

/* Social Icons */
.bqf-social { display: flex; gap: 10px; }
.bqf-social a {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e5e5e5;
    display: inline-flex; align-items: center; justify-content: center;
    color: #222; font-size: .88rem; transition: all .2s ease;
}
.bqf-social a:hover { background: #111; color: #fff; border-color: #111; transform: translateY(-2px); }

/* Link Lists */
.bqf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bqf-links li a {
    display: inline-flex; align-items: center; gap: 8px; color: #555; font-size: .82rem;
}
.bqf-links li a i { font-size: .55rem; color: #aaa; transition: transform .2s ease; }
.bqf-links li a:hover { color: #111; transform: translateX(3px); }
.bqf-links li a:hover i { color: #111; }

/* Contact Column */
.bqf-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.bqf-contact li { display: flex; align-items: flex-start; gap: 12px; }
.bqf-contact li > i { font-size: .95rem; color: #111; margin-top: 3px; width: 18px; text-align: center; }
.bqf-contact strong { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #888; font-weight: 600; margin-bottom: 2px; }
.bqf-contact span, .bqf-contact a { font-size: .82rem; color: #444; line-height: 1.5; }

/* Bottom Bar */
.bqf-bottom { border-top: 1px solid var(--line); padding: 20px 0; background: #fafafa; }
.bqf-bottom-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.bqf-copy { color: #777; font-size: .75rem; letter-spacing: .04em; }
.bqf-trust { display: flex; gap: 20px; flex-wrap: wrap; color: #555; font-size: .74rem; letter-spacing: .04em; }
.bqf-trust span { display: inline-flex; align-items: center; gap: 6px; }
.bqf-trust i { color: #111; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
    .bq-grid { grid-template-columns: repeat(3, 1fr); }
    .bq-rail > * { flex-basis: calc((100% - 40px) / 3); }
    .bq-collections { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .bq-services { grid-template-columns: 1fr; }
    .bq-services div { border-right: 0; border-bottom: 1px solid var(--line); }
    .bqf-cols { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 900px) {
    .bqh {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 950;
        background: #fff;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }
    .bqh.bqh--hide {
        transform: translateY(-100%) !important;
    }
    .bqh-spacer {
        display: block;
        width: 100%;
        height: 74px;
    }
    .bqd-top { grid-template-columns: 1fr; gap: 32px; }
    .bqh-main { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "menu brand actions"; gap: 10px; }
    .bqh-nav { display: none; }
    .bqh-burger { display: inline-flex; }
    .bqh-brand { text-align: left; font-size: 1.05rem; letter-spacing: .2em; }
    .bqh-brand { min-width: 0; }
    .bqh-brand img { margin: 0; height: 52px; max-width: 170px; }
    .bqh-actions { gap: 16px; }
    .bqf-news-wrap { flex-direction: column; align-items: flex-start; }
    .bqf-news-action { width: 100%; max-width: 100%; }
}
@media (max-width: 768px) {
    .bqf-body { padding: 34px 0 28px; }
    .bqf-cols {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .bqf-col-brand {
        padding-bottom: 22px;
        margin-bottom: 4px;
        border-bottom: 1px solid #eee;
    }
    .bqf-brand { margin-bottom: 12px; }
    .bqf-brand img { max-height: 44px; max-width: 160px; }
    .bqf-desc {
        margin: 0 0 16px;
        max-width: 100%;
        font-size: .82rem;
        line-height: 1.7;
    }
    .bqf-social { gap: 8px; }
    .bqf-social a { width: 36px; height: 36px; font-size: .84rem; }

    /* Accordion Columns */
    .bqf-col--accordion {
        border-bottom: 1px solid #eee;
    }
    .bqf-col-header {
        margin: 0;
        padding: 16px 0;
        border-bottom: 0;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .16em;
        color: #111;
        transition: color .2s ease, opacity .2s ease;
    }
    .bqf-col-header:active {
        opacity: 0.7;
    }
    .bqf-col-header .bqf-chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .72rem;
        color: #777;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color .2s ease;
    }
    .bqf-col--accordion.is-active .bqf-chevron {
        transform: rotate(180deg);
        color: #111;
    }
    .bqf-collapse {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.3s ease, visibility 0.35s ease;
    }
    .bqf-col--accordion.is-active .bqf-collapse {
        max-height: 800px;
        opacity: 1;
        visibility: visible;
        padding: 4px 0 18px;
    }
    .bqf-links {
        gap: 6px;
    }
    .bqf-links li a {
        padding: 7px 0;
        font-size: .84rem;
        color: #444;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .bqf-links li a i {
        font-size: .55rem;
        color: #aaa;
    }
    .bqf-links li a:active {
        color: #111;
    }
    .bqf-contact {
        gap: 12px;
    }
    .bqf-contact li {
        padding: 4px 0;
    }
}
@media (max-width: 640px) {
    .bqh-spacer { height: 59px; }
    .bq-collections { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .bq-col-cap { padding: 14px 8px; }
    .bq-col-cap h3 { margin: 0 0 5px; font-size: 0.8rem; letter-spacing: .1em; line-height: 1.25; }
    .bq-col-cap small { font-size: 0.6rem; letter-spacing: .1em; }
    .bq-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
    /* Two cards and a sliver of the third, so it is obvious the row moves. */
    .bq-rail { gap: 12px; }
    .bq-rail > * { flex-basis: calc((100% - 36px) / 2.15); }
    .bq-rail-arrow { display: none; }
    /* At this card width the label would break across two lines and leave the
       buttons at different heights, so it is held on one. */
    .bq-card .bq-name { font-size: .72rem; line-height: 1.4; min-height: 2.8em; margin-bottom: 4px; }
    .bq-card .bq-prices { font-size: .86rem; }
    .bq-card .bq-add {
        margin-top: auto; min-height: 40px; padding: 10px 6px;
        font-size: .66rem; letter-spacing: .04em; gap: 5px; white-space: nowrap;
    }
    .bq-card .bq-add i { font-size: .72rem; }
    .bq-card .bq-wish { opacity: 1; width: 30px; height: 30px; }
    .bq-offer { padding: 24px 14px 22px; margin-top: 32px; }
    .bq-offer-head { margin-bottom: 18px; gap: 14px; }
    .bq-offer-head h2 { font-size: 1.05rem; letter-spacing: .12em; }
    .bq-offer-timer { gap: 7px; }
    .bq-offer-timer span { min-width: 46px; padding: 6px 4px; }
    .bq-offer-timer b { font-size: .92rem; }
    .bq-head { margin: 44px 0 22px; }
    .bqf-bottom-wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
    .bqf-trust { gap: 12px; }

    /* Product detail on a phone: reduced padding, smaller title, 6 items in 80% row */
    .bqd { padding: 12px 0 32px; }
    .bqd-crumb { margin-bottom: 12px; font-size: .65rem; }
    .bqd-top { gap: 18px; }
    .bqd-main { aspect-ratio: 4/5; }
    .bqd .pd-thumb { width: 52px; height: 68px; }
    .bqd-name { font-size: 1.02rem; letter-spacing: .02em; line-height: 1.3; margin-bottom: 8px; }
    .bqd-price { font-size: 1.05rem; margin-bottom: 14px; }
    .bqd-rule { margin: 14px 0; }
    .bqd-opts--size {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 6px !important;
        width: 80% !important;
        max-width: 80% !important;
    }
    .bqd-opts--size label {
        min-height: 38px !important;
        height: 38px !important;
        font-size: .84rem !important;
        padding: 4px 2px !important;
    }
    .bqd-qty button { width: 42px; height: 44px; }
    .bqd-qty input { width: 52px; height: 44px; font-size: .95rem; }
    .bqd-btn { min-height: 48px; padding: 12px 18px; font-size: .84rem; letter-spacing: .08em; }
    .bqd-notes { margin-top: 18px; font-size: .72rem; line-height: 1.8; }
    .bqd-lower { margin-top: 30px; }
    .bqd-desc, .bqd-spec { font-size: .82rem; }

    /* Tables and wide description content scroll on their own rather than
       pushing the page sideways. */
    .bqd-desc table, .bqd-spec { display: block; overflow-x: auto; }
}

@media (max-width: 480px) {
    .bqd-name { font-size: 0.94rem !important; letter-spacing: .01em !important; line-height: 1.28 !important; margin-bottom: 6px !important; }
    .bqd-opts--size {
        gap: 5px !important;
        width: 80% !important;
        max-width: 80% !important;
    }
    .bqd-opts--size label {
        min-height: 36px !important;
        height: 36px !important;
        font-size: .8rem !important;
        padding: 2px 1px !important;
    }
    .bqh-brand img { height: 38px; max-width: 120px; }
    .bqh-actions { gap: 11px; }
    .bqh-actions a { font-size: .68rem; gap: 4px; }
    .bqh-main { padding: 10px 0; }
    .bq-card .bq-name { font-size: .7rem; min-height: 2.8em; }
    .bq-card .bq-add { min-height: 38px; padding: 9px 4px; font-size: .62rem; }
    .bq-col-cap { padding: 10px 6px; }
    .bq-col-cap h3 { font-size: 0.72rem; letter-spacing: .06em; margin: 0 0 3px; }
    .bq-col-cap small { font-size: 0.55rem; letter-spacing: .06em; }
}

/* ------------------------------------------------------------
   Hero on a phone
   Swiping and the dots are enough on touch, and the arrows would
   cover part of the banner on a narrow screen.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .bq-hero-arrow { display: none; }
    .bq-hero-dots { bottom: 12px; }
    .bq-hero-cap--solo { min-height: 40vh; }
    .bq-hero-cap--solo h1 { font-size: clamp(1.4rem, 7vw, 2rem); }
}