/* ====================================================== content pages === */

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-6); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-5); }
.prose p { margin-bottom: var(--sp-4); }
.prose ul, .prose ol { margin-bottom: var(--sp-4); }
.prose li { margin-bottom: var(--sp-2); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); font-size: var(--step--1); }
.prose th, .prose td { padding: var(--sp-2) var(--sp-3); border: var(--border); text-align: left; }
.prose th { background: var(--sand); }

/* ------------------------------------------------------------- faqs ---- */

.faq { border-bottom: var(--border); }

.faq summary {
    cursor: pointer;
    list-style: none;
    padding: var(--sp-4) var(--sp-6) var(--sp-4) 0;
    font-weight: 600;
    position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--step-2);
    font-weight: 400;
    color: var(--ink-35);
}

.faq[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--brass); }
.faq-body { padding: 0 0 var(--sp-4); color: var(--ink-70); max-width: 68ch; }

/* ---------------------------------------------------------- journal ---- */

.journal-card h3 { font-family: var(--font-body); font-size: var(--step-1); font-weight: 600; margin: var(--sp-3) 0 var(--sp-2); }
.journal-card h3 a { text-decoration: none; }
.journal-card h3 a:hover { color: var(--brass); }
.journal-card p { margin-bottom: var(--sp-2); font-size: var(--step--1); }

.journal-media {
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--mist);
    border: 1px solid var(--hairline);
}

.journal-media img { width: 100%; height: 100%; object-fit: cover; }

/* =================================================== department bar ===== */

.dept-bar { border-top: 1px solid rgba(31, 42, 38, 0.07); background: var(--ground); }

.dept-bar-inner { display: flex; align-items: stretch; gap: var(--sp-1); }

.dept-item { position: relative; }

.dept-item > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 11px var(--sp-4);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--ink-70);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.dept-item > a:hover { color: var(--ink); }
.dept-item > a.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.dept-caret { width: 9px; height: 6px; opacity: 0.5; }

/* The dropdown. CSS only — it opens on hover and on keyboard focus. */
.dept-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--page);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: var(--sp-2);
    display: none;
    z-index: 45;
}

.dept-item:hover .dept-menu,
.dept-item:focus-within .dept-menu { display: block; }

.dept-menu a {
    display: block;
    padding: 8px var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    text-decoration: none;
    color: var(--ink-70);
    white-space: nowrap;
}

.dept-menu a:hover { background: var(--ink-06); color: var(--ink); }

.dept-menu-all {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3) !important;
    border-top: 1px solid var(--hairline);
    font-weight: 600;
    color: var(--ink) !important;
}

/* ------------------------------------------------------ drawer groups --- */

.drawer-group { border-bottom: var(--border); }
.drawer-group summary { cursor: pointer; list-style: none; padding: var(--sp-3) 0; font-weight: 600; }
.drawer-group summary::-webkit-details-marker { display: none; }
.drawer-group summary::after { content: '+'; float: right; color: var(--ink-35); }
.drawer-group[open] summary::after { content: '\2212'; }
.drawer-group nav { padding-bottom: var(--sp-3); }
.drawer-group nav a { border-bottom: 0 !important; padding: 7px 0 7px var(--sp-3) !important; font-size: var(--step--1); }

@media (max-width: 900px) {
    .dept-bar { display: none; }
}

/* ================================================== utility nav ========= */

.utility-nav {
    display: flex;
    gap: var(--sp-6);
    justify-content: center;
    flex: 1;
}

.utility-nav a {
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    color: var(--ink-70);
    white-space: nowrap;
}

.utility-nav a:hover { color: var(--brass); }

.track-btn { white-space: nowrap; margin-right: var(--sp-2); }

/* ============================================ scrolling category rail === */

.cat-rail {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--sp-4) * -1);
    padding-inline: var(--sp-4);
}

.cat-rail::-webkit-scrollbar { display: none; }

.cat-rail-track { display: flex; gap: var(--sp-4); padding-bottom: var(--sp-2); }

.cat-chip {
    flex: 0 0 auto;
    width: 148px;
    scroll-snap-align: start;
    text-decoration: none;
    text-align: center;
}

.cat-chip-media {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--mist);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.2s ease;
}

.cat-chip:hover .cat-chip-media { box-shadow: var(--shadow-lift); }
.cat-chip-media img { width: 100%; height: 100%; object-fit: cover; }

.cat-chip-name { display: block; margin-top: var(--sp-3); font-size: var(--step--1); font-weight: 600; line-height: 1.3; }
.cat-chip-dept { display: block; font-size: 0.72rem; color: var(--ink-35); margin-top: 2px; }

/* ============================================== product rail ============ */

.product-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-5); }

/* ============================================== mobile tab bar ========== */

.tab-bar { display: none; }
.dept-scroller { display: none; }

/* ================================================== mobile layout ======= */

@media (max-width: 1100px) {
    .utility-nav { display: none; }
}

@media (max-width: 900px) {
    .track-btn { display: none; }
    .hide-phone { display: none; }

    /* Departments become a swipeable strip under the header. */
    .dept-scroller {
        display: flex;
        gap: var(--sp-2);
        overflow-x: auto;
        scrollbar-width: none;
        padding: var(--sp-3) var(--sp-4);
        background: var(--page);
        border-bottom: 1px solid var(--hairline);
        position: sticky;
        top: var(--header-h);
        z-index: 30;
    }

    .dept-scroller::-webkit-scrollbar { display: none; }

    .dept-scroller a {
        flex: 0 0 auto;
        padding: 7px 15px;
        border-radius: var(--radius-pill);
        background: var(--ink-06);
        font-size: var(--step--1);
        font-weight: 600;
        text-decoration: none;
        color: var(--ink-70);
        white-space: nowrap;
    }

    .dept-scroller a.is-active { background: var(--ink); color: var(--on-dark); }

    /* Product rows scroll sideways instead of becoming an endless column. */
    .product-rail {
        display: flex;
        gap: var(--sp-4);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        margin-inline: calc(var(--sp-4) * -1);
        padding: 0 var(--sp-4) var(--sp-2);
    }

    .product-rail::-webkit-scrollbar { display: none; }
    .product-rail > * { flex: 0 0 62vw; max-width: 240px; scroll-snap-align: start; }

    .cat-chip { width: 116px; }

    /* Fixed bottom bar, and room for it at the end of the page. */
    body { padding-bottom: 64px; }

    .tab-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        background: var(--page);
        border-top: 1px solid var(--hairline);
        box-shadow: 0 -2px 18px rgba(31, 42, 38, 0.07);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tab-bar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 9px 4px 8px;
        text-decoration: none;
        color: var(--ink-35);
        font-size: 0.66rem;
        font-weight: 600;
        position: relative;
        min-height: 56px;
    }

    .tab-bar a.is-active { color: var(--ink); }
    .tab-bar svg { width: 22px; height: 22px; fill: currentColor; }

    .tab-badge {
        position: absolute;
        top: 5px;
        right: 50%;
        margin-right: -20px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: var(--radius-pill);
        background: var(--brass);
        color: var(--ink);
        font-size: 10px;
        font-style: normal;
        line-height: 16px;
        text-align: center;
    }

    .site-footer { margin-bottom: 0; }
}

@media (max-width: 640px) {
    /* Bigger tap targets throughout. */
    .btn { padding: 13px 22px; }
    .btn-sm { padding: 9px 16px; }
    .input, .select, .textarea { padding: 13px 14px; font-size: 16px; } /* 16px stops iOS zooming on focus */
    .icon-btn { width: 42px; height: 42px; }
    .qty button { width: 42px; height: 42px; }

    .container { padding-inline: var(--sp-4); }
    .hero-copy h1 { font-size: var(--step-3); }
    .hero-slide, .hero-slide img { min-height: 320px; }
}

/* ================================================ shop category picker == */

.cat-picker {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: var(--border);
}

.cat-picker::-webkit-scrollbar { display: none; }

.cat-picker a {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--ink-12);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    color: var(--ink-70);
    white-space: nowrap;
}

.cat-picker a:hover { border-color: var(--ink-35); color: var(--ink); }
.cat-picker a.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }

.filters-head { display: none; }
.sort-in-panel { display: none; }

@media (max-width: 1000px) {
    /* The filter panel becomes a sheet that slides up from the bottom. */
    .filters {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        max-height: 86vh;
        overflow-y: auto;
        background: var(--page);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: 0 -8px 40px rgba(31, 42, 38, 0.18);
        padding: var(--sp-4) var(--sp-4) var(--sp-6);
        z-index: 75;
        display: none;
    }

    .filters.is-open { display: block; }

    .filters-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: var(--sp-3);
        margin-bottom: var(--sp-4);
        border-bottom: var(--border);
    }

    .sort-in-panel { display: block; }
    .sort-form { display: none; }
    .shop-toolbar { justify-content: space-between; }
}


/* ============================================ centred department rail === */

.dept-bar .container { display: flex; justify-content: center; }

.dept-rail {
    display: inline-flex;
    align-items: stretch;
    gap: var(--sp-1);
    margin-block: var(--sp-3);
    padding: 4px;
    background: var(--page);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-soft);
}

.dept-rail .dept-item > a {
    border-bottom: 0;
    border-radius: var(--radius-pill);
    padding: 9px var(--sp-4);
}

.dept-rail .dept-item > a:hover { background: var(--ink-06); }

.dept-rail .dept-item > a.is-active {
    background: var(--ink);
    color: var(--on-dark);
    border-bottom: 0;
}

/* The dropdown hangs from the centre of its pill rather than the left edge. */
.dept-rail .dept-menu { left: 50%; transform: translateX(-50%); margin-top: 4px; }

/* ==================================================== footer columns ==== */

.footer-brand p { font-size: var(--step--1); opacity: 0.75; margin-top: var(--sp-4); max-width: 34ch; }

.footer-social { display: flex; gap: var(--sp-4); margin-top: var(--sp-4); font-size: var(--step--1); }

@media (max-width: 900px) {
    .dept-rail { display: none; }
}

/* ============================================== scrolling trending row == */

.marquee {
    overflow: hidden;
    padding-block: var(--sp-2);
    /* Fades the two edges so cards do not appear to be cut off. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.marquee-track {
    display: flex;
    gap: var(--sp-5);
    width: max-content;
    animation: marquee-slide 70s linear infinite;
}

/* The track holds two copies of the list, so sliding it exactly half way
   and starting again is seamless. */
@keyframes marquee-slide {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.marquee-item { flex: 0 0 230px; }

@media (prefers-reduced-motion: reduce) {
    .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .marquee-track { animation: none; }
}

/* ==================================================== instagram reels === */

.reel-head { text-align: center; margin-bottom: var(--sp-5); }
.reel-head h2 { margin-bottom: var(--sp-2); }

.reel-rail {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--sp-4) * -1);
    padding-inline: var(--sp-4);
}

.reel-rail::-webkit-scrollbar { display: none; }

.reel-card {
    position: relative;
    flex: 0 0 auto;
    width: 220px;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--mist);
    border: 1px solid var(--hairline);
    scroll-snap-align: start;
    text-decoration: none;
    display: block;
}

.reel-card img,
.reel-card video { width: 100%; height: 100%; object-fit: cover; display: block; }

.reel-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.reel-play svg {
    width: 46px;
    height: 46px;
    fill: var(--on-dark);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.reel-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--sp-5) var(--sp-3) var(--sp-3);
    font-size: var(--step--1);
    color: var(--on-dark);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
}

.reel-follow { text-align: center; margin-top: var(--sp-5); font-weight: 600; }

@media (max-width: 640px) {
    .reel-card { width: 165px; }
    .marquee-item { flex-basis: 180px; }
}

/* ================================================== copyright bar ======= */

.footer-bottom-bar { background: var(--ink); margin-top: var(--sp-6); }

.footer-bottom {
    color: var(--on-dark);
    border-top: 0;
    margin-top: 0;
    padding-block: var(--sp-4);
    opacity: 1;
    font-size: var(--step--1);
}

.footer-bottom span { opacity: 0.75; }

/* ============================================ what sticks, what does not = */

/* The top bar stays pinned: the logo, the links, the cart. The department
   rail sits outside <header> and scrolls away with the page. */
.site-header { position: sticky; top: 0; z-index: 40; }
.dept-bar { position: static; }
.dept-scroller { position: static; top: auto; }

/* ==================================================== hero: image only == */

/* The banner image sets its own height, so whatever size is uploaded is
   shown as it was made rather than being cropped to a fixed box. */
.hero-slide, .hero-slide img { min-height: 0; }
.hero-slide img { width: 100%; height: auto; display: block; }

.hero-cta {
    position: absolute;
    inset: 0;
    display: flex;
    /* Phones: bottom centre, sitting over the lower third of the artwork. */
    align-items: flex-end;
    justify-content: center;
    padding: var(--sp-5) var(--sp-5) var(--sp-7);
    pointer-events: none;   /* only the button itself is clickable */
}

.hero-cta .btn {
    pointer-events: auto;
    box-shadow: 0 6px 26px rgba(31, 42, 38, 0.28);
}

@media (min-width: 701px) {
    /* Laptops: bottom left, lined up with the page margin rather than the
       very edge of the screen, so it sits under the site's own grid. */
    .hero-cta {
        justify-content: flex-start;
        padding-bottom: var(--sp-8);
        padding-inline: max(var(--sp-5), calc((100% - var(--container)) / 2 + var(--sp-4)));
    }
}

/* ============================================ category tiles on phones == */

/* Two per row rather than one enormous card each. Kept to its own class so
   the testimonial and form grids are not dragged into two columns too. */
@media (max-width: 640px) {
    .grid-cats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-4);
    }

    .grid-cats .cat-tile h3 { font-size: var(--step--1); }
    .grid-cats .cat-tile p { font-size: 0.72rem; }
}

/* ==================================================== review form ======= */

.review-form-wrap { margin-top: var(--sp-6); }
.review-form > summary { list-style: none; cursor: pointer; display: inline-flex; }
.review-form > summary::-webkit-details-marker { display: none; }
.review-form .card { max-width: 640px; }

/* The star picker is built from radio buttons laid out in reverse, so the
   CSS sibling selector can light up every star to the left of the hovered
   one without any JavaScript. */
.star-picker { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-picker input { position: absolute; opacity: 0; width: 0; height: 0; }

.star-picker label {
    cursor: pointer;
    line-height: 0;
    padding: 2px;
}

.star-picker svg { width: 30px; height: 30px; fill: var(--ink-12); transition: fill 0.12s ease; }

.star-picker label:hover svg,
.star-picker label:hover ~ label svg,
.star-picker input:checked ~ label svg { fill: var(--brass); }

.star-picker input:focus-visible + label svg { outline: 2px solid var(--brass); outline-offset: 2px; }

.review-head .badge { font-size: 0.7rem; }

/* ======================================== product card: second image ==== */

.product-card-media .pc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-img-second {
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Only where hovering is actually possible — a phone would otherwise be
   stuck showing the second photo after a tap. */
@media (hover: hover) {
    .product-card-media.has-second:hover .pc-img-second { opacity: 1; }
    .product-card-media.has-second:hover .pc-img-first { opacity: 0; }
    .pc-img-first { transition: opacity 0.35s ease; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-img, .pc-img-second { transition: none; }
}