/* =============================================================================
   Scoophescoope — responsive
   -----------------------------------------------------------------------------
   Base styles are written desktop-first for layout structure, then unwound at
   each breakpoint. Checked at 1440 / 1200 / 992 / 768 / 480 / 375.

   Product grid: 4 → 3 (992) → 2 (768) → 2 (375, tighter gap).
   Cards never drop to one-up on phones — a single-column product list wastes
   the fold and makes browsing feel twice as long.
   ========================================================================== */

/* ============================================================ ≤ 1200px === */
@media (max-width: 1200px) {

  .shc-nav__link { padding-inline: var(--sp-2); font-size: var(--fs-sm); }

  .shc-mega__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-8); }
  .shc-mega__col--feature { display: none; }

  .shc-shop { grid-template-columns: 232px 1fr; gap: var(--sp-6); }
  .shc-cart { grid-template-columns: 1fr 340px; gap: var(--sp-6); }
  .shc-checkout { grid-template-columns: 1fr 360px; gap: var(--sp-6); }

  .shc-hero__stamp { width: 96px; height: 96px; font-size: var(--fs-xs); }
}

/* ============================================================= ≤ 992px === */
@media (max-width: 992px) {

  /* Desktop nav gives way to the drawer — a nine-item bar cannot survive here.
     The <nav> wrapper has to go too, not just the <ul>: an empty grid child
     still takes a column and pushes the cart icon onto a second row. */
  .shc-nav-wrap, .shc-nav,
  .shc-header__actions .shc-iconbtn--wish,
  .shc-header__actions .shc-iconbtn--account { display: none; }

  .shc-burger { display: inline-flex; }

  .shc-header__inner {
    grid-template-columns: auto 1fr auto;
    min-height: var(--header-h-mobile);
    gap: var(--sp-3);
  }
  .shc-header__logo-wrap { justify-self: center; }
  .shc-logo { font-size: 1.25rem; }

  .shc-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
  .shc-carousel__track { grid-auto-columns: calc((100% - (var(--sp-4) * 2)) / 3); gap: var(--sp-4); }

  .shc-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
  .shc-trust__list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .shc-budget { grid-template-columns: repeat(2, 1fr); }
  .shc-occasions { grid-template-columns: repeat(3, 1fr); }
  .shc-why { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .shc-quotes { grid-template-columns: 1fr; }
  .shc-quotes > *:nth-child(n+3) { display: none; }
  .shc-posts { grid-template-columns: repeat(2, 1fr); }
  .shc-social-strip { grid-template-columns: repeat(4, 1fr); }
  .shc-stat-row { grid-template-columns: 1fr; gap: var(--sp-4); }

  /* Hero stacks; art first would push the headline below the fold, so copy leads. */
  .shc-hero__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .shc-hero__copy { max-width: 100%; }
  .shc-hero__art { aspect-ratio: 16 / 10; }
  .shc-hero__stamp { display: none; }

  .shc-promo__inner { grid-template-columns: 1fr; }
  .shc-promo__art { min-height: 260px; order: -1; }
  .shc-featured__inner { grid-template-columns: 1fr; }
  .shc-split { grid-template-columns: 1fr; }
  .shc-news { grid-template-columns: 1fr; }
  .shc-contact-grid { grid-template-columns: 1fr; }

  /* Filters become a bottom sheet. A sticky sidebar on a phone is unusable. */
  .shc-shop { grid-template-columns: 1fr; }
  .shc-filter-open { display: inline-flex; }
  .shc-filters {
    position: fixed; inset: auto 0 0 0;
    max-height: 86dvh;
    background: var(--cream);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    z-index: var(--z-drawer);
    transform: translateY(102%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
    padding: var(--sp-5) var(--gutter);
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    display: block;
    box-shadow: var(--shadow-lg);
  }
  .shc-filters.is-open { transform: translateY(0); visibility: visible; }
  .shc-filters__head { position: sticky; top: 0; background: var(--cream); padding-top: var(--sp-2); z-index: 2; }
  .shc-filters__close { display: inline-flex; }
  .shc-filters__apply { display: block; position: sticky; bottom: 0; background: var(--cream); padding-top: var(--sp-4); }

  /* PDP: gallery above info, thumbnails move under the main image. */
  .shc-pdp { grid-template-columns: 1fr; gap: var(--sp-8); }
  .shc-gallery { grid-template-columns: 1fr; }
  .shc-gallery__thumbs {
    grid-auto-flow: column; grid-auto-columns: 76px;
    overflow-x: auto; scrollbar-width: none; order: 2;
  }
  .shc-gallery__thumbs::-webkit-scrollbar { display: none; }
  .shc-gallery__main { order: 1; cursor: default; }
  .shc-gallery__main.is-zoomed img { transform: none; }

  .shc-cart { grid-template-columns: 1fr; }
  .shc-summary { position: static; }
  .shc-checkout { grid-template-columns: 1fr; }
  .shc-checkout__aside { order: -1; }

  .shc-footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .shc-footer__brand { grid-column: 1 / -1; }

  .shc-spec { grid-template-columns: 1fr; }
  .shc-spec dt { padding-bottom: 0; border: 0; }
}

/* ============================================================= ≤ 768px === */
@media (max-width: 768px) {

  :root { --header-h: var(--header-h-mobile); }

  .shc-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .shc-carousel__track { grid-auto-columns: 62%; gap: var(--sp-3); }

  .shc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .shc-occasions { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .shc-posts { grid-template-columns: 1fr; }
  .shc-social-strip { grid-template-columns: repeat(3, 1fr); }
  .shc-form-grid--2 { grid-template-columns: 1fr; }

  .shc-section-head { margin-bottom: var(--sp-5); }
  .shc-section-head h2 { font-size: var(--fs-2xl); }
  .shc-carousel__nav { display: none; }

  /* Category row scrolls rather than wrapping to a third short row. */
  .shc-cats--scroll {
    display: grid; grid-auto-flow: column; grid-auto-columns: 60%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .shc-cats--scroll::-webkit-scrollbar { display: none; }
  .shc-cats--scroll > * { scroll-snap-align: start; }

  .shc-lineitem { grid-template-columns: 76px 1fr; gap: var(--sp-3); }
  .shc-lineitem__total { grid-column: 2; text-align: left; }

  .shc-pdp__buy { grid-template-columns: 1fr; }
  .shc-pdp__buy .shc-qty { width: 100%; justify-content: space-between; }
  .shc-pdp__buy .shc-qty input { flex: 1; }
  .shc-buybar { display: flex; }
  body.has-buybar { padding-bottom: 76px; }

  .shc-tabs { gap: var(--sp-5); }
  .shc-news { padding: var(--sp-6) var(--sp-5); }
  .shc-news__form { flex-direction: column; }
  .shc-news__form .shc-btn { width: 100%; }

  .shc-footer { padding-top: var(--sp-12); }
  .shc-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

  .shc-shop__bar { gap: var(--sp-3); }
  .shc-shop__tools { width: 100%; }
  .shc-shop__tools .shc-select { flex: 1; }

  .shc-hero__art { grid-template-columns: 1fr 1fr; aspect-ratio: 3 / 2; }
  .shc-hero__actions .shc-btn { flex: 1; }
}

/* ============================================================= ≤ 480px === */
@media (max-width: 480px) {

  .shc-card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
  .shc-card__cat { display: none; }
  .shc-card__wish { width: 34px; height: 34px; top: var(--sp-2); right: var(--sp-2); }
  .shc-card__badges { top: var(--sp-2); left: var(--sp-2); }

  .shc-cats--scroll { grid-auto-columns: 72%; }
  .shc-carousel__track { grid-auto-columns: 74%; }
  .shc-occasions { grid-template-columns: 1fr; }
  .shc-budget { grid-template-columns: 1fr; }
  .shc-budget__tile { min-height: 0; gap: var(--sp-5); }
  .shc-trust__list { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-5); }
  .shc-why { grid-template-columns: 1fr; gap: var(--sp-6); }
  .shc-social-strip { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

  .shc-footer__top { grid-template-columns: 1fr; gap: var(--sp-8); }

  .shc-drawer--right { width: 100vw; }

  .shc-announce__inner { font-size: var(--fs-2xs); }

  .shc-summary { padding: var(--sp-5) var(--sp-4); }
  .shc-authcard { padding: var(--sp-5) var(--sp-4); border: 0; background: none; }

  .shc-pagination a, .shc-pagination span { min-width: 38px; height: 38px; }

  /* Side-by-side hero buttons wrap their labels onto two lines at this width,
     which looks broken. Full-width and stacked reads better and taps better. */
  .shc-hero__actions { flex-direction: column; align-items: stretch; }
  .shc-hero__actions .shc-btn { width: 100%; }
  .shc-404__actions { flex-direction: column; }
  .shc-404__actions .shc-btn { width: 100%; }
}

/* ============================================================= ≤ 375px === */
@media (max-width: 375px) {

  :root { --gutter: 0.875rem; }

  .shc-products { gap: var(--sp-2); }
  .shc-card__title { font-size: var(--fs-sm); }
  .shc-price__now { font-size: var(--fs-base); }
  .shc-card__cta .shc-btn { padding-inline: var(--sp-3); }

  .shc-hero h1 { font-size: 2.125rem; }
  .shc-logo { font-size: 1.125rem; }
}

/* ================================================== short viewport tweak == */
@media (max-height: 560px) and (orientation: landscape) {
  .shc-hero__inner { padding-block: var(--sp-8); }
  .shc-drawer__body { padding-block: var(--sp-3); }
}

/* ============================================================== print ==== */
@media print {
  .shc-announce, .shc-header, .shc-footer, .shc-buybar,
  .shc-drawer, .shc-overlay, .shc-toasts, .shc-searchpanel { display: none !important; }
  body { background: #fff; color: #000; }
  .shc-section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}