/* ============================================================
   RESPONSIVE
   Loaded last, so it settles anything the component sheets left
   ambiguous at a given width.

   The device ladder this targets:
     1440+   desktop
     1200    small laptop
     1024    tablet landscape  — primary nav collapses here
      840    tablet portrait
      600    large phone
      400    small phone       — iPhone SE / Galaxy S
   ============================================================ */

/* ------------------------------------------------------------
   0. Global guards
   ------------------------------------------------------------ */

/* Nothing may push the page sideways. Horizontal scroll on a shop
   reads as broken before a shopper can articulate why. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Long model names and reference numbers are the usual culprits. */
.p-card__title, .cart-line__name, .jour-card__t,
.product_title, .sec-head__title, .hero__title {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Media never exceeds its column. */
img, video, iframe, table { max-width: 100%; }

/* Tables that cannot stack get a scroll container instead of overflowing. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------
   1. Touch targets
   Anything tappable gets 44px, the smallest reliable finger target.
   ------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 38px; }
  .tool, .tool-wide { min-height: 44px; min-width: 44px; }
  .faq__q { min-height: 52px; }
  .qty__b { width: 44px; height: 44px; }
  .qty input { height: 44px; }
  .drawer__toggle, .drawer__link { min-height: 48px; }
  .filter-list a, .mega__link, .footer__links a { padding-block: 10px; }
  .cart-line__remove { width: 44px; height: 44px; }
  .size-pill { min-height: 64px; }
  .pagination a, .woocommerce-pagination a { min-width: 44px; min-height: 44px; }
}

/* ------------------------------------------------------------
   2. Laptop — 1200px
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .wrap { width: calc(100% - 40px); }
  .p-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .co-layout { grid-template-columns: 1fr 340px; gap: var(--s-6); }
  .mega__inner { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
  /* The promoted panel is the first thing to go when columns tighten. */
  .mega__feature { display: none; }
}

/* ------------------------------------------------------------
   3. Tablet landscape — 1024px
   The primary nav collapses to the drawer at this width.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --band: clamp(48px, 5vw, 72px); }

  .hero__inner { gap: var(--s-6); }
  .hero__facts { gap: var(--s-5); }

  .coll-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .coll-card--xl { grid-column: span 2; grid-row: span 1; min-height: 250px; }

  .style-grid { grid-template-columns: repeat(3, 1fr); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .help-grid { grid-template-columns: repeat(2, 1fr); }
  .commit-grid { grid-template-columns: 1fr; }

  .shop-layout { grid-template-columns: 1fr; }
  .policy-layout { grid-template-columns: 1fr; }
  .co-layout { grid-template-columns: 1fr; }
  .co-summary { position: static; }

  /* The summary belongs above the fold on a stacked checkout. */
  .cart-summary-first { order: -1; }

  .product-main { grid-template-columns: 1fr; gap: var(--s-6); }
  .woocommerce-product-gallery { position: static; }
}

/* ------------------------------------------------------------
   4. Tablet portrait — 840px
   ------------------------------------------------------------ */
@media (max-width: 840px) {
  .wrap { width: calc(100% - 32px); }

  .p-grid--4, .p-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .editorial { grid-template-columns: 1fr; gap: var(--s-6); }
  .editorial--flip .editorial__media { order: 0; }
  .editorial__media { aspect-ratio: 16/10; }

  .jour-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .size-wrap { grid-template-columns: 1fr; gap: var(--s-5); }
  .news { grid-template-columns: 1fr; gap: var(--s-5); }
  .cta-band { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .track-meta { grid-template-columns: repeat(2, 1fr); }

  .footer__top { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  .footer__brand { grid-column: 1 / -1; }

  /* Four across is unreadable here; two rows of two is not. */
  .trust-strip__inner { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .trust-item { padding-inline: var(--s-3); }
  .trust-item:nth-child(odd) { border-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--c-line-soft); padding-top: var(--s-4); }
}

/* ------------------------------------------------------------
   5. Large phone — 600px
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  :root { --band: clamp(40px, 8vw, 56px); }

  .wrap { width: calc(100% - 28px); }

  /* Hero: type before image, and the image stops dominating. */
  .hero__inner { padding-block: var(--s-5) var(--s-6); }
  .hero__shot { aspect-ratio: 1; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .hero__facts { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .hero__fact-n { font-size: var(--t-lg); }
  .hero__fact-l { font-size: 9.5px; letter-spacing: .05em; }

  .sec-head { margin-bottom: var(--s-5); }
  .sec-head__sub { font-size: var(--t-sm); }

  .jour-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .style-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }

  .coll-grid { grid-template-columns: 1fr; grid-auto-rows: 170px; gap: var(--s-3); }
  .coll-card--xl, .coll-card--wide { grid-column: span 1; }
  .coll-card__d { display: none !important; }

  .footer__top { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: var(--s-3); }

  .sup-facts { gap: var(--s-4); }
  .track-meta { grid-template-columns: 1fr; }

  /* Product page: the buy button spans the width and stays reachable. */
  form.cart { flex-direction: column; align-items: stretch; }
  .quantity, .quantity input[type="number"] { width: 100%; }
  .single_add_to_cart_button { width: 100%; min-width: 0; }
  .product-assure { grid-template-columns: 1fr; }
  .wc-tabs { gap: var(--s-4); overflow-x: auto; scrollbar-width: none; }
  .wc-tabs::-webkit-scrollbar { display: none; }

  /* Checkout fields stop trying to sit side by side. */
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100%; float: none; }
}

/* ------------------------------------------------------------
   6. Small phone — 400px
   iPhone SE, Galaxy S — the narrowest layout that must still work.
   ------------------------------------------------------------ */
@media (max-width: 400px) {
  .wrap { width: calc(100% - 24px); }

  .p-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
  .p-card__body { padding: var(--s-2) var(--s-3) var(--s-3); gap: 5px; }
  .p-card__img { padding: var(--s-2); }
  .p-card__title { font-size: 12.5px; min-height: 2.5em; }
  .p-card__price { font-size: var(--t-sm); }
  .p-card__coll { font-size: 9px; }
  /* One spec chip is all that fits. */
  .p-card__specs .spec-chip:nth-child(n+2) { display: none; }

  .style-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }

  .hero__facts { gap: var(--s-2); }
  .hero__fact-l { font-size: 9px; }

  .sup-hero__title, .shop-hero__title, .co-head__title { font-size: var(--t-xl); }
  .pay-mark { height: 24px; }
}

/* ------------------------------------------------------------
   7. Landscape phone
   Short viewports need less vertical furniture, not smaller type.
   ------------------------------------------------------------ */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --band: 36px; }
  .hero__inner { padding-block: var(--s-5); }
  .site-header { position: static; }
  .drawer { overflow-y: auto; }
}

/* ------------------------------------------------------------
   8. Print
   Order confirmations and policies get printed.
   ------------------------------------------------------------ */
@media print {
  .site-header, .topbar, .navbar, .msearch,
  .site-footer, .drawer, .drawer-scrim,
  .cta-band, .news, .p-card__quick, .p-card__wish { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { width: 100%; }
  .band { padding-block: var(--s-4); }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  .faq__a { display: block !important; }
}

/* ------------------------------------------------------------
   9. Accessibility preferences
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .coll-card__bg, .style-card__bg, .p-card__img,
  .jour-card__media img, .mega__feature-img img {
    transition: none !important;
  }
  .coll-card:hover .coll-card__bg,
  .style-card:hover .style-card__bg,
  .p-card:hover .p-card__img { transform: none !important; }
}

@media (prefers-contrast: more) {
  :root {
    --c-line: #9FB4C4;
    --c-line-soft: #B8C9D6;
    --c-ink-soft: #3C4A57;
  }
  .btn { border-width: 2px; }
}