/* =====================================================================
   MILEPOST TOY CO. — RESPONSIVE
   Desktop-first refinements: 1280 → 1024 → 900 → 768 → 560 → 380
   ===================================================================== */

/* ---------- ≤ 1280 ---------- */
@media (max-width: 1280px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .why__list li:nth-child(4) { border-left: 0; padding-left: 0; }
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__contact { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 48px; }
  .footer__contact h3 { grid-column: 1 / -1; }
}

/* ---------- ≤ 1024 : tablet ---------- */
@media (max-width: 1024px) {
  :root { --nav-h: 64px; }
  .nav.is-scrolled { height: 60px; }
  .nav__links { display: none; }
  .nav__burger { display: inline-grid; }

  .section-head .section-title { grid-column: 1 / -1; }
  .section-head .section-note { grid-column: 1 / -1; margin-top: 20px; }

  .hero__aside { grid-column: 1 / 7; }
  .hero__inset { display: none; }

  .collections__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .col--a { grid-column: 1 / 4; grid-row: 1 / span 2; }
  .col--b { grid-column: 4 / 7; grid-row: 1; margin-top: 0; }
  .col--c { grid-column: 4 / 7; grid-row: 2; }
  .col--d { grid-column: 1 / -1; grid-row: 3; }
  .col--e { grid-column: 1 / 5; grid-row: 4; }
  .col--f { grid-column: 5 / 7; grid-row: 4; margin-top: 0; }
  .col--e .col__text { position: static; max-width: none; padding: 18px 0 0; background: none; }
  .col--e .col__desc { display: block; }
  .col--e .col__media { aspect-ratio: 4 / 3; }
  .col--f .col__media { aspect-ratio: 3 / 4.5; }

  .toolbar { grid-template-columns: 1fr auto; }
  .toolbar .chips { grid-column: 1 / -1; grid-row: 2; }

  .showcase__inner { grid-template-columns: 1fr; }
  .showcase__media { position: relative; top: 0; }
  .showcase__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }

  .story__grid { row-gap: 48px; }
  .story__main { grid-column: 1 / 8; grid-row: 1; }
  .story__inset { grid-column: 8 / 13; grid-row: 1; align-self: end; transform: translateY(14%) !important; margin-left: -30%; }
  .story__text { grid-column: 1 / -1; grid-row: 2; padding-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .story__text .section-index, .story__title { grid-column: 1 / -1; }
  .story__copy { max-width: none; }
  .story__sign { grid-column: 2; }
  .story__stats { grid-column: 1 / -1; grid-row: 3; }

  .reviews__head { grid-column: 1 / -1; position: static; margin-bottom: 48px; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 32px; }
  .reviews__head .section-index { grid-column: 1 / -1; }
  .reviews__score { margin-top: 0; border-top: 0; padding-top: 0; }
  .reviews__list { grid-column: 1 / -1; }

  .newsletter__title { grid-column: 1 / -1; margin-bottom: 36px; }
  .newsletter__side { grid-column: 1 / -1; max-width: 640px; }

  .pm { grid-template-columns: 1fr 1fr; }
}

/* ---------- ≤ 900 : stacked hero ---------- */
@media (max-width: 900px) {
  .hero__grid { display: flex; flex-direction: column; min-height: 0; }
  .hero__media {
    order: 0;
    margin-inline: calc(-1 * var(--gutter));
    min-height: 0;
    aspect-ratio: 4 / 4.6;
    max-height: 72vh;
  }
  .hero__vertical { display: none; }
  .price-tag { top: 18px; right: calc(var(--gutter) + 6px); padding: 9px 14px 9px 30px; }
  .price-tag__value { font-size: 1.2rem; }
  .hero__content {
    order: 1;
    padding-top: 0;
    margin-top: -46px;   /* only the eyebrow sits on the photo */
    position: relative;
  }
  .hero__content .eyebrow { color: var(--paper); margin-bottom: 26px; }
  .hero__title { max-width: none; mix-blend-mode: normal; color: var(--ink); }
  .hero__title em { color: var(--accent); }
  .hero__aside { order: 2; max-width: 560px; padding-top: 28px; }
  .hero__facts { margin-top: 48px; }
}

/* ---------- ≤ 768 : large phones ---------- */
@media (max-width: 768px) {
  :root { --section-y: 88px; }

  .section-head--split { align-items: flex-start; flex-direction: column; }
  .section-head--split .carousel-nav { display: none; }
  .section-head { margin-bottom: 40px; }

  .hero__facts { grid-template-columns: 1fr; gap: 0; }
  .hero__facts li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 12px 0; border-top-color: var(--line); }
  .hero__facts li:first-child { border-top-color: var(--ink); }
  .hero__facts strong { display: inline; font-size: .95rem; }

  /* collections: editorial 2-col mosaic */
  .collections__grid { grid-template-columns: 1fr 1fr; gap: 40px 12px; }
  .col--a { grid-column: 1 / -1; grid-row: auto; }
  .col--a .col__media { aspect-ratio: 4 / 4.4; }
  .col--b, .col--c, .col--e, .col--f { grid-column: span 1; grid-row: auto; margin-top: 0; }
  .col--b .col__media, .col--c .col__media, .col--e .col__media, .col--f .col__media { aspect-ratio: 3 / 4; }
  .col--c { margin-top: 48px; }
  .col--f { margin-top: 48px; }
  .col--d { grid-column: 1 / -1; grid-row: auto; }
  .col--d .col__text { max-width: 84%; padding-right: 20px; }
  .col--b .col__title, .col--c .col__title, .col--e .col__title, .col--f .col__title { font-size: 1.35rem; letter-spacing: -.035em; }
  .col--b .col__desc, .col--c .col__desc, .col--e .col__desc, .col--f .col__desc { display: none; }
  .col__text { padding-top: 12px; gap: 4px; }

  /* shop */
  .toolbar { grid-template-columns: 1fr; gap: 14px; padding-block: 14px; }
  .toolbar__search { border-bottom: 1px solid var(--line); }
  .toolbar .chips {
    grid-row: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  }
  .toolbar .chips::-webkit-scrollbar { display: none; }
  .toolbar__sort { justify-content: space-between; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 12px; }
  .card__badges { top: 8px; left: 8px; }
  .card__wish { top: 6px; right: 6px; width: 36px; height: 36px; font-size: 18px; }
  .card__body { padding-top: 12px; }
  .card__meta { font-size: 10px; letter-spacing: .06em; }
  .card__meta > span:first-child { display: none; }
  .card__name { font-size: .98rem; margin-top: 6px; }
  .card__sub { font-size: .8rem; }
  .card__foot { padding-top: 10px; }
  .price { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
  .price__now { font-size: .98rem; }
  .card__add { width: 40px; height: 40px; padding: 0; justify-content: center; flex-shrink: 0; }
  .card__add span { display: none; }
  .card__add--notify { width: auto; padding: 0 12px; font-size: .78rem; }

  /* showcase */
  .showcase__frame { aspect-ratio: 4 / 3.4; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  .showcase__list { grid-template-columns: 1fr; }
  .showcase__tab { grid-template-columns: 28px 44px 1fr auto; gap: 12px; }
  .showcase__tab img { width: 44px; height: 44px; }
  .showcase__actions .btn { flex: 1; }

  /* story */
  .story__main { grid-column: 1 / -1; }
  .story__inset { display: none; }
  .story__text { display: block; padding-top: 8px; }
  .story__stats { gap: 12px; }
  .story__stats dt { font-size: 11px; }

  /* why */
  .why__head { display: block; }
  .why__list { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .why__list li, .why__list li:first-child, .why__list li:nth-child(4) { border-left: 0; padding: 20px 16px 0 0; border-top: 1px solid rgba(26,25,23,.18); }
  .why__list li:last-child { grid-column: 1 / -1; }
  .why__list svg { margin-bottom: 18px; }

  /* band */
  .band { height: 72vh; min-height: 440px; }
  .band::after { background: linear-gradient(to top, rgba(20,19,17,.85) 0%, rgba(20,19,17,.35) 60%, rgba(20,19,17,.1) 100%); }

  /* reviews */
  .reviews__head { display: block; }
  .reviews__score { margin-top: 28px; }
  .reviews__list { columns: 1; }

  /* gallery */
  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

  /* footer */
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__contact { display: flex; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  /* product modal → bottom sheet */
  .modal { padding: 0; align-items: flex-end; }
  .modal__panel {
    width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0;
    transform: translateY(100%); transition: transform .5s var(--ease);
  }
  .modal--text .modal__panel { width: 100%; }
  .pm { grid-template-columns: 1fr; }
  .pm__media img { aspect-ratio: 4 / 3.2; max-height: 46vh; }
  .pm__info { padding: 24px var(--gutter) max(28px, env(safe-area-inset-bottom)); }
  .modal__close { position: sticky; float: right; top: 10px; margin: 10px 10px -54px 0; }
}

/* ---------- ≤ 560 : phones ---------- */
@media (max-width: 560px) {
  .nav__inner { gap: 8px; }
  .logo__word { font-size: 1.32rem; }
  .logo__word sup { display: none; }
  .logo__mark { width: 21px; height: 27px; }
  .nav__actions .icon-btn { width: 40px; height: 40px; font-size: 21px; }

  .announce { font-size: 11.5px; }

  .hero__media { aspect-ratio: 4 / 5; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero__ctas .btn--ghost { align-self: flex-start; }
  .hero__lede { margin-bottom: 24px; }

  .ribbon { padding: 14px 0; }

  .section-head { display: block; }

  .drawer { width: 100vw; }
  .drawer__head { padding-left: 20px; }
  .cart-list, .checkout { padding-inline: 20px; }
  .ship-meter, .drawer__foot { padding-inline: 20px; }
  .cart-line { grid-template-columns: 72px 1fr auto; gap: 12px; }
  .cart-line img { width: 72px; height: 88px; }

  .field--row { grid-template-columns: 1fr; gap: 0; }
  .field--row > div { margin-bottom: 18px; }

  .newsletter__form { flex-direction: column; border-bottom: 0; padding-bottom: 0; }
  .newsletter__form input { border-bottom: 1.5px solid var(--ink); padding: 12px 0; }
  .newsletter__form .btn { width: 100%; }

  .pm__buy { flex-wrap: wrap; }
  .pm__buy .qty { flex: 0 0 auto; }

  .toast { bottom: 12px; }
  .wa-float { right: 14px; bottom: 14px; width: 52px; height: 52px; font-size: 26px; }

  .search__hit { grid-template-columns: 52px 1fr auto; gap: 12px; }
  .search__hit img { width: 52px; height: 52px; }
  .search__hit-name { font-size: 1rem; }

  .footer__legal { flex-wrap: wrap; gap: 14px; }
}

/* ---------- ≤ 380 : small phones ---------- */
@media (max-width: 380px) {
  .nav__wish { display: none; }
  .product-grid { gap: 32px 10px; }
  .story__stats { grid-template-columns: 1fr 1fr; }
  .story__stats div:last-child { grid-column: 1 / -1; }
  .footer__top { grid-template-columns: 1fr; }
}

/* ---------- Touch devices: no hover-only affordances ---------- */
@media (hover: none) {
  .card__quick { display: none; }
  .card:hover .card__media img, .col:hover .col__media img, .arrival:hover .arrival__media img { transform: none; }
  .gallery__icon { opacity: 0 !important; }
  .carousel { cursor: auto; }
}

/* ---------- Large screens ---------- */
@media (min-width: 1680px) {
  :root { --maxw: 1640px; }
}