/* ============================================================
   responsive.css — breakpoints (overrides style.css / header.css)
   ============================================================ */

/* ---------- Large tablet / small desktop ---------- */
@media (max-width: 1080px) {
    .grid--products { grid-template-columns: repeat(3, 1fr); }
    .shop .grid--products { grid-template-columns: repeat(2, 1fr); }
    .footer__inner { grid-template-columns: 1fr 1fr; }
    .footer__brand { grid-column: 1 / -1; }
    .cats__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
    /* Masthead: toggle | brand | account, with search on its own row */
    .nav-toggle { display: flex; }
    .masthead__inner {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "toggle brand account" "search search search";
        gap: .7rem 1rem;
    }
    .brand { justify-self: center; }
    .brand__logo { height: 50px; }
    .search { max-width: none; }

    /* Desktop category strip hides; drawer takes over */
    .catnav { display: none; }

    .nav-scrim {
        position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 120;
        opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
    }
    .nav-scrim.is-open { opacity: 1; visibility: visible; }
    .body--nav-open { overflow: hidden; }

    /* Gift finder stacks */
    .finder__inner { flex-direction: column; align-items: stretch; }
    .finder__form { flex-direction: column; align-items: stretch; }
    .finder__field { flex: 1 1 auto; }
    .finder__submit { width: 100%; }

    /* Hero slider stacks (text only) */
    .hero-slider { background: #fff; }
    .hero-slider__track { height: auto; }
    .hero-slider .slide { position: relative; grid-template-columns: 1fr; text-align: center; padding-block: 2.4rem; }
    .hero-slider .slide--full { padding: 0; }   /* full-bleed banner: no padding, box hugs the image */
    .hero-slider .slide:not(.is-active) { display: none; }
    .hero-slider .slide__media { display: none; }
    .hero-slider .slide__copy { margin-inline: auto; }
    .hero-slider__nav { display: none; }

    /* Short hero stacks */
    .hero2 { background: #fff; }
    .hero2__inner { grid-template-columns: 1fr; height: auto; max-height: none; min-height: 0; padding-block: 2.2rem; text-align: center; }
    .hero2__text { margin-inline: auto; }
    .hero2__cta { justify-content: center; }
    .hero2__art { display: none; }

    .cats__grid { grid-template-columns: repeat(4, 1fr); }

    /* Generic stacks */
    .catgrid { grid-template-columns: repeat(2, 1fr); }
    .catcard--1 { grid-column: span 2; }
    .story__inner { grid-template-columns: 1fr; }
    .story__art { max-width: 320px; }
    .pdp__grid { grid-template-columns: 1fr; }
    .cart__inner { grid-template-columns: 1fr; }
    .summary { position: static; }
    .trust__inner { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
    .shop__inner { grid-template-columns: 1fr; }
    .shop__aside { position: static; grid-auto-flow: row; }
    /* Catalog: collapse filters behind a toggle and drop the phone CTA so the
       product list is the first thing visible on landing. */
    .shop__filter-toggle { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem;
        padding: .6rem 1.1rem; border: 1px solid var(--line); border-radius: 100px; background: #fff;
        font-weight: 600; font-size: .95rem; color: var(--ink); cursor: pointer; }
    .shop__filter-toggle.is-open { border-color: var(--accent); color: var(--accent); }
    .shop__aside { display: none; margin-bottom: 1.4rem; }
    .shop__aside.is-open { display: grid; }
    .filter--cta { display: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 620px) {
    :root { --gap: 1.1rem; }
    .account__link span,
    .account__phone span { display: none; }
    .account { gap: .8rem; }
    .grid--products,
    .shop .grid--products { grid-template-columns: 1fr 1fr; }
    .cats__grid { grid-template-columns: repeat(3, 1fr); }
    .cats__head { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .section__head { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .footer__inner { grid-template-columns: 1fr; }
    .footer__bar { flex-direction: column; text-align: center; }
    .trust__inner { grid-template-columns: 1fr; }
    .utilbar__inner { font-size: .76rem; gap: .5rem; }
    .pdp__buy { flex-direction: column; }
    .line { grid-template-columns: 64px 1fr; grid-template-areas: "media info" "media qty" "price price"; row-gap: .6rem; }
    .line__media { width: 64px; height: 64px; grid-area: media; }
    .line__info { grid-area: info; }
    .line .qty { grid-area: qty; justify-self: start; }
    .line__price { grid-area: price; text-align: right; }
}

/* ---------- Very small ---------- */
@media (max-width: 400px) {
    .cats__grid { grid-template-columns: repeat(2, 1fr); }
    .grid--products,
    .shop .grid--products { grid-template-columns: 1fr; }
}