/* ============================================================
   HOME PAGE — comic-flavoured: ink lines, halftones, pixel marquee
   Mobile-first; tablet polish at 640px; full desktop at 960px.
============================================================ */

/* ============================================================
   HERO CAROUSEL
============================================================ */
.hero {
    position: relative;
    background: var(--cream);
    overflow: hidden;
}
.hero__slides {
    position: relative;
    display: grid;
    min-height: clamp(620px, 96vh, 780px);
}
.hero__slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    padding: 36px var(--pad-x) 110px;
    max-width: var(--container-max);
    margin: 0 auto;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    pointer-events: none;
}
.hero__slide.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding-top: 8px;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    font-weight: 600;
    padding: 7px 14px;
    background: var(--cream-2);
    border-radius: 999px;
    text-transform: uppercase;
}
.hero__dot-pulse {
    width: 7px;
    height: 7px;
    background: var(--pink);
    border-radius: 50%;
    animation: promo-pulse 1.6s ease-in-out infinite;
}
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(40px, 9.5vw, 96px);
    line-height: 0.88;
    letter-spacing: -0.025em;
    margin: 0;
    text-transform: uppercase;
    text-wrap: balance;
}
.hero__line { display: block; }
.hero__line--accent {
    color: var(--pink);
    font-style: italic;
    transform: skew(-4deg);
}
.hero__lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 0;
    text-wrap: pretty;
}
.hero__ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    margin-top: 12px;
    min-height: 320px;
    padding: 8px 0 24px;
}
.hero__bag {
    position: relative;
    width: min(72%, 320px);
    z-index: 2;
    filter: drop-shadow(0 22px 30px oklch(16.5% 0.007 50 / 0.18));
    animation: bag-float 6s ease-in-out infinite;
}
@keyframes bag-float {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}
.hero__halftone {
    position: absolute;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: radial-gradient(var(--ink) 1.2px, transparent 1.6px);
    background-size: 10px 10px;
    -webkit-mask-image: radial-gradient(circle, black 30%, transparent 70%);
    mask-image: radial-gradient(circle, black 30%, transparent 70%);
    opacity: 0.35;
    z-index: 1;
    pointer-events: none;
}

.hero__nav {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 3;
}
.hero__dots {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hero__dot {
    width: 28px;
    height: 4px;
    border-radius: 999px;
    border: none;
    background: var(--line);
    transition: background 0.25s, width 0.25s;
    padding: 0;
    cursor: pointer;
}
.hero__dot.is-active {
    background: var(--ink);
    width: 44px;
}
.hero__count {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
}
.hero__arrow {
    background: var(--cream);
    border: 1.5px solid var(--ink);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    cursor: pointer;
    color: var(--ink);
}
.hero__arrow:hover {
    background: var(--ink);
    color: var(--cream);
}

/* ============================================================
   PIXEL MARQUEE — Press Start 2P scrolling text
============================================================ */
.pmarquee {
    background: var(--ink);
    color: var(--cream);
    padding: 10px 0;
    overflow: hidden;
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
}
.pmarquee__track {
    display: flex;
    gap: 28px;
    animation: pmarquee-scroll 38s linear infinite;
    white-space: nowrap;
    width: max-content;
}
.pmarquee__group {
    display: flex;
    gap: 24px;
    align-items: center;
    font-family: var(--font-ticker);
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}
.pmarquee__star {
    color: var(--pink);
    font-size: 14px;
    font-family: var(--font-display);
}
@keyframes pmarquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
   SECTION HEADS (shared by Bestsellers + Shop)
============================================================ */
.section {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 64px var(--pad-x);
    position: relative;
}
.section__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 30px;
}
.section__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    font-weight: 600;
    color: var(--pink-deep);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.section__eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--pink);
    display: inline-block;
}
.section__title {
    font-family: var(--font-display);
    font-size: clamp(32px, 7.5vw, 88px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin: 0;
    text-transform: uppercase;
    text-wrap: balance;
    word-break: break-word;
}
.section__accent {
    color: var(--pink);
    font-style: italic;
    display: inline-block;
    transform: skew(-4deg);
}
.section__lede {
    font-size: 15px;
    color: var(--ink-soft);
    max-width: 52ch;
    margin: 4px 0 0;
    line-height: 1.55;
    text-wrap: pretty;
}
.section__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 2px solid var(--ink);
    transition: gap 0.2s, border-color 0.2s, color 0.2s;
}
.section__link:hover {
    gap: 14px;
    color: var(--pink-deep);
    border-color: var(--pink);
}

/* ============================================================
   VALUES STRIP — full-bleed ink band over origin photography

   Layer order, back to front:
     0  .values__photo     the photograph, desaturated
     1  .values__scrim     vertical ink ramp (see note below)
     2  .values__halftone  the existing dot texture
     3  .values__inner     the copy

   The scrim is a vertical ramp rather than a flat wash for a contrast reason.
   Measured against the brightest region of the photo, a flat scrim strong
   enough to keep the pink 01/02/03 numerals at AA (4.5:1) leaves almost no
   photo visible — even at 90% ink they only reach 4.07:1. Ramping instead
   gives the large display headline at the top a light scrim it passes easily,
   and hands the numeral grid at the bottom effectively solid ink, so those
   numerals keep exactly the contrast they had before the photo existed.
   Blur was tried as an alternative and moved contrast by under 0.3.
============================================================ */
.values {
    background: var(--ink);
    color: var(--cream);
    padding: 60px var(--pad-x);
    position: relative;
    overflow: hidden;
}
.values__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.values__photo picture {
    display: block;
    width: 100%;
    height: 100%;
}
.values__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The cherries sit centre-right in the frame; bias toward them so they
       survive the aggressive crop a narrow viewport applies. */
    object-position: 68% 50%;
    /* brightness() is doing contrast work, not styling. The frame contains a
       sunlit beige jacket whose luminance a scrim alone cannot tame: holding
       the pink numerals at AA over it would need ~99% ink, which erases the
       photo entirely. Pulling the source down first lets a moderate scrim do
       the rest, so the photo stays legible as texture AND the copy keeps its
       contrast. Measured in-browser, not estimated — see the note above. */
    filter: saturate(0.32) brightness(0.38);
}
.values__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* The ramp is steep on purpose. The headline zone (top ~40%) carries only
       large display type, which stays legible over a light scrim, so that is
       where the photograph is allowed to read. By the time the 01/02/03 grid
       starts the scrim is effectively solid ink, because small pink numerals
       over a photograph cannot reach AA any other way — the frame's sunlit
       areas are bright enough that even 0.86 leaves them at 2.9:1. */
    background: linear-gradient(
        to bottom,
        oklch(16.5% 0.007 50 / 0.68) 0%,
        oklch(16.5% 0.007 50 / 0.74) 34%,
        oklch(16.5% 0.007 50 / 0.95) 52%,
        oklch(16.5% 0.007 50 / 0.96) 100%
    );
}
.values__halftone {
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    aspect-ratio: 1;
    background-image: radial-gradient(var(--cream) 1px, transparent 1.5px);
    background-size: 9px 9px;
    -webkit-mask-image: radial-gradient(circle, black 20%, transparent 65%);
    mask-image: radial-gradient(circle, black 20%, transparent 65%);
    opacity: 0.22;
    pointer-events: none;
    z-index: 2;
}
.values__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;
    z-index: 3;
}
.values__head { margin-bottom: 36px; }
.values__head .section__eyebrow { color: var(--pink); }
.values__head .section__eyebrow::before { background: var(--pink); }
.values__head .section__title { color: var(--cream); }
.values__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
.values__item {
    border-top: 2px solid oklch(96.9% 0.015 88 / 0.18);
    padding-top: 20px;
}
.values__num {
    font-family: var(--font-pixel);
    font-size: 18px;
    color: var(--pink);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    line-height: 1;
}
.values__item h3 {
    font-family: var(--font-display);
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.values__item p {
    font-size: 14.5px;
    color: oklch(96.9% 0.015 88 / 0.72);
    margin: 0;
    max-width: 34ch;
    line-height: 1.55;
}

/* ============================================================
   SHOP FILTERS
============================================================ */
.filters {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(var(--pad-x) * -1);
    padding: 4px var(--pad-x);
    scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: transparent;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--ink-soft);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
}
.filter:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.filter--active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}
.filter:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.card[hidden] { display: none; }
.shop__empty {
    grid-column: 1 / -1;
    padding: 40px var(--pad-x);
    text-align: center;
    color: var(--ink-soft);
    font-size: 14px;
}

/* ============================================================
   FIND US — stylised SVG map + pink info panel
============================================================ */
.findus {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--pad-x) 64px;
}
.findus__card {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 18px;
    overflow: hidden;
    background: var(--cream-2);
    border: 1px solid var(--line);
}
.findus__map {
    position: relative;
    min-height: 280px;
}
.findus__svg {
    width: 100%;
    height: 100%;
    display: block;
}
.findus__info {
    background: var(--pink);
    color: var(--cream);
    padding: 32px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.findus__info .section__eyebrow { color: oklch(96.9% 0.015 88 / 0.85); }
.findus__info .section__eyebrow::before { background: oklch(96.9% 0.015 88 / 0.85); }
.findus__info .section__title { color: var(--cream); }
.findus__info .section__accent {
    color: var(--cream);
    /* lift the contrast — pure-cream accent reads on pink. */
}
.findus__lede { color: oklch(96.9% 0.015 88 / 0.9); }
.findus__addr {
    font-family: var(--font-display);
    font-size: 17px;
    margin: 6px 0 4px;
    line-height: 1.4;
    text-transform: uppercase;
}
.findus__hours {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 0;
    border-top: 1px solid oklch(96.9% 0.015 88 / 0.3);
    border-bottom: 1px solid oklch(96.9% 0.015 88 / 0.3);
    margin: 6px 0 14px;
}
.findus__hours > div {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-family: var(--font-mono);
}
.findus__info .btn--primary {
    background: var(--ink);
    color: var(--cream);
    align-self: flex-start;
}
.findus__info .btn--primary:hover {
    background: var(--cream);
    color: var(--ink);
}

/* ============================================================
   TABLET — 640px+
============================================================ */
@media (min-width: 640px) {
    .hero__slide { padding: 48px var(--pad-x) 90px; }
    .findus__card { grid-template-columns: 1.2fr 1fr; }
    .pmarquee__group { font-size: 20px; gap: 28px; }
    .pmarquee__star { font-size: 16px; }
    .pmarquee__track { gap: 28px; }
    .promo__rotator { gap: 24px; }
}

/* ============================================================
   DESKTOP — 960px+
============================================================ */
@media (min-width: 960px) {
    /* hero — 2-column split */
    .hero__slides { min-height: 640px; }
    .hero__slide {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 32px;
        min-height: 640px;
        padding: 60px var(--pad-x) 100px;
        align-items: center;
    }
    .hero__copy { gap: 22px; padding-top: 0; }
    .hero__title { font-size: clamp(56px, 6.6vw, 120px); }
    .hero__lede { font-size: 17px; }
    .hero__visual { min-height: 420px; }
    .hero__bag { width: min(80%, 380px); }

    /* sections */
    .section { padding: 100px var(--pad-x); }
    .section__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 32px;
        margin-bottom: 48px;
        flex-wrap: wrap;
    }
    .section__head > div:first-child { max-width: 720px; }
    .section__head--shop { align-items: center; }

    /* values */
    .values { padding: 100px var(--pad-x); }
    /* A wide band crops the photo far less, so the subject no longer needs
       biasing to stay in frame. */
    .values__img { object-position: 50% 50%; }
    .values__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
    }
    .values__num { font-size: 22px; }
    .values__item h3 { font-size: 32px; }
    .values__item p { font-size: 15px; }

    /* findus */
    .findus { padding: 30px var(--pad-x) 100px; }
    .findus__card {
        grid-template-columns: 1.4fr 1fr;
        min-height: 460px;
        border-radius: 24px;
    }
    .findus__info { padding: 48px 40px; }
    .findus__map { min-height: 460px; }
    .findus__addr { font-size: 20px; }
    .findus__hours > div { font-size: 14px; }

    /* filters — wrap instead of scroll on desktop */
    .filters {
        flex-wrap: wrap;
        overflow: visible;
        margin: 0;
        padding: 0;
        gap: 8px;
    }
    .filter { padding: 10px 18px; font-size: 13px; }
}