/* Self-hosted Work Sans */
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/work-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/work-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/work-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/work-sans-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/work-sans-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'WS Fallback Arial';src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Arimo'),local('Liberation Sans');font-weight:100 549;size-adjust:112%;ascent-override:81.9%;descent-override:21.4%;line-gap-override:0%;}
@font-face{font-family:'WS Fallback Arial';src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Arimo Bold'),local('Liberation Sans Bold');font-weight:550 900;size-adjust:104%;ascent-override:88.8%;descent-override:23.2%;line-gap-override:0%;}
@font-face{font-family:'WS Fallback Roboto';src:local('Roboto'),local('Roboto-Regular');font-weight:100 549;size-adjust:113.3%;ascent-override:82.1%;descent-override:21.4%;line-gap-override:0%;}
@font-face{font-family:'WS Fallback Roboto';src:local('Roboto Bold'),local('Roboto-Bold');font-weight:550 900;size-adjust:112.5%;ascent-override:83.5%;descent-override:21.8%;line-gap-override:0%;}

/*!
 * 1WorldPrint — shared mobile & tablet layer.
 *
 * Added to every page by the build, after the page's own styles. The phone menu
 * itself lives in each page's header (menu button below 1120px). It adapts the
 * site's shared building blocks (header, footer, .wrap containers, inline CSS
 * grids, cards, forms) rather than individual pages, so any new page built
 * from the same pieces is mobile friendly automatically.
 *
 * Inline grid styles are matched with attribute selectors, which is why some
 * rules need !important: they have to beat style="…" on the element.
 */

/* ---------- all sizes: safe media & text ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
img, video, svg, canvas { max-width: 100%; }
img, video { height: auto; }

/* ---------- ≤ 1024px: narrower containers ---------- */
@media (max-width: 1024px) {
  .wrap, .wrap-narrow { padding-inline: 28px; }
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- ≤ 900px: tablets ---------- */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  .blog-gallery, .blog-gallery-labeled, .inline-photo-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* footer: brand/contact column on its own row, then two columns */
  [style*="grid-template-columns:1.3fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 36px 28px !important; }
  [style*="grid-template-columns:1.3fr 1fr 1fr"] > :first-child { grid-column: 1 / -1; }

  /* sidebar + content layouts (catalogue filters) stack */
  [style*="grid-template-columns:280px 1fr"] { grid-template-columns: 1fr !important; }
  .filter-panel .filter-scroll { max-height: 240px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  /* tablets: category and brand filters side by side above the products */
  [style*="grid-template-columns:280px 1fr"] > div:first-child:has(> .filter-panel) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start;
  }
}

/* ---------- ≤ 640px: phones ---------- */
@media (max-width: 640px) {
  .wrap, .wrap-narrow { padding-inline: 20px; }

  /* every inline content grid becomes one column … */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* … except the short link lists in the footer and paired photos */
  .footer-heading + div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
  .photo-duo, .photo-pair { grid-template-columns: 1fr 1fr !important; }
  .blog-gallery, .blog-gallery-labeled, .inline-photo-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .range-grid, .steps-grid, .hoodie-grid, .form-row { grid-template-columns: 1fr !important; }
  .spec-row { grid-template-columns: 110px 1fr !important; }

  /* catalogue: two product cards per row, full-width sort box */
  div:has(> .prod-card) { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .prod-card h3 { font-size: 14px !important; }
  .prod-card > div:last-child { padding: 14px 14px 16px !important; }
  select.sortsel { width: 100%; }

  /* header */
  .logo-badge img { height: 26px !important; }
  div:has(> nav > a.nav-link) > a.btn { padding: 10px 14px !important; font-size: 11px !important; }
  div:has(> a[href^="mailto:"] + a[href^="tel:"]) { flex-wrap: wrap; gap: 4px 16px; }
  div:has(> a[href^="mailto:"] + a[href^="tel:"]) > a { font-size: 13px !important; }

  /* roomy desktop spacing, tightened */
  [style*="padding-block:64px"] { padding-block: 44px !important; }
  [style*="padding-block:72px"] { padding-block: 48px !important; }
  [style*="padding-top:56px"] { padding-top: 36px !important; }
  [style*="padding-bottom:72px"] { padding-bottom: 48px !important; }
  [style*="padding:48px"] { padding: 28px 22px !important; }
  [style*="padding:34px"] { padding: 22px !important; }
  [style*="gap:48px"] { gap: 32px !important; }
  .loc-card, .step-card, .info-card, .success-panel { padding: 22px !important; }
  .filter-panel { padding: 18px !important; }

  /* homepage review reel: show a full review card */
  .reel-viewport { margin: 0 12px !important; }

  /* forms: 16px inputs stop iOS zooming on focus */
  input, select, textarea { font-size: 16px !important; }

  /* buttons in a row wrap instead of overflowing */
  .btn { white-space: normal; }

  .wa-fab { left: 16px !important; bottom: 16px !important; width: 52px !important; height: 52px !important; }

  /* ---- comfortable tap targets and readable small print ---- */
  /* header email and phone: larger touch area without moving the layout */
  div:has(> a[href^="mailto:"] + a[href^="tel:"]) > a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .vid-hero-phone { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .author-signoff a.link { display: inline-block; padding: 10px 0; margin: -10px 0; }

  /* footer: more space around each link */
  .footer-link { padding: 9px 0; margin-bottom: 2px; }
  .footer-link:last-child { margin-bottom: 0; }
  .footer-heading { margin-bottom: 8px !important; }
  [style*="border-top:1px solid var(--line);margin-top:48px"] a[aria-label] { width: 42px !important; height: 42px !important; }

  /* footer: keep the last lines clear of the WhatsApp button */
  [style*="border-top:1px solid var(--line);margin-top:48px"] { padding-bottom: 44px; }

  /* catalogue filters and small buttons */
  .filter-item { min-height: 42px; padding-block: 10px !important; }
  .btn-sm { min-height: 42px; }

  /* small labels and print: 12px minimum */
  div:has(> nav > a.nav-link) > a.btn { font-size: 12px !important; }
  .tag, .code, .blog-cat, .range-tag, .chip, .pill, .filter-count,
  .step-meta, .method-tag, .slot-title, .inline-photo-cap, .pb, .hoodie-spec, legend { font-size: 12px !important; }
}

/* ---------- ≤ 380px: small phones ---------- */
@media (max-width: 380px) {
  .wrap, .wrap-narrow { padding-inline: 16px; }
  div:has(> .prod-card) { grid-template-columns: 1fr !important; }
  .blog-gallery, .blog-gallery-labeled, .inline-photo-grid { grid-template-columns: 1fr !important; }
}

/* images carry width/height for layout reservation only; page CSS always decides the displayed size */
:where(img[width][height]){width:auto;height:auto;}