/* Mobile adaptation for the Scuba Duka pages.
   Layouts are authored inline; media queries cannot be, so they live here.
   Linked from every page after the Modernist stylesheet.

   Note: the runtime re-serializes inline styles with a space after each colon
   and normalises 0 -> 0px, so value selectors below match the spaced spelling
   (unspaced variants kept where the source may be read directly). */

img { max-width: 100%; }

/* Tablet and below: collapse multi-column grids to a single column.
   Icon rows ("20px 1fr") and auto-sized rows keep their shape. */
@media (max-width: 900px) {
  [style*="grid-template-columns"]:not([data-sd-foot]):not([style*="20px 1fr"]):not([style*="auto 1fr"]):not([style*="gap: 6px 24px"]):not([style*="gap:6px 24px"]) {
    grid-template-columns: 1fr !important;
  }
}

/* Word lists sit two-up rather than one long column on small screens.
   The collapse rule above excludes them, so the two rules never overlap
   (source order would not settle it — :not() carries its own specificity). */
@media (max-width: 900px) {
  [style*="gap: 6px 24px"],
  [style*="gap:6px 24px"] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}

/* Four-cell hairline grids go two-up at mid widths. These draw their rules by
   showing the parent's divider background through a 2px gap, so a partially
   filled row would render as a solid divider block rather than a hairline —
   the column count must always divide the cell count. Below 900px the collapse
   rule above wins on specificity and takes them to one column. */
@media (max-width: 1200px) {
  [data-quad] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Phones: tighten the page gutters and bring display type down to size. */
@media (max-width: 700px) {
  section,
  [style*="padding: 64px 32px"],
  [style*="padding: 56px 32px"],
  [style*="padding: 48px 32px"],
  [style*="padding: 16px 32px"],
  [style*="padding: 14px 32px"],
  [style*="padding: 0px 32px 48px"],
  [style*="padding: 0px 32px 64px"],
  [style*="padding:64px 32px"],
  [style*="padding:56px 32px"],
  [style*="padding:16px 32px"],
  [style*="padding:0 32px 48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  h1 { font-size: clamp(28px, 8vw, 44px) !important; }
  h2 { font-size: clamp(23px, 6vw, 34px) !important; }
  h3 { font-size: clamp(19px, 5vw, 24px) !important; }
  h4 { font-size: clamp(17px, 4.5vw, 21px) !important; }
  .table { display: block; overflow-x: auto; }
}

/* Site header: one row at every width. The wordmark drops below 1080px so the
   nav links and the CTA never wrap; below 620px the row is allowed to wrap. */
@media (max-width: 1080px) {
  .sd-wordmark { display: none; }
}
@media (max-width: 620px) {
  .nav-row { flex-wrap: wrap !important; }
}

/* Site footer: two columns on tablet, compact two columns on phones so it stays short. */
@media (max-width: 900px) {
  [data-sd-foot] { grid-template-columns: 1fr 1fr !important; gap: 20px 24px !important; }
  [data-sd-foot] > .sd-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  [data-sd-foot] { gap: 14px 16px !important; font-size: 13px; }
  [data-sd-foot] > * { gap: 6px !important; min-width: 0; }
  .sd-foot-brand { gap: 12px !important; align-items: center !important; }
  .sd-foot-brand p { font-size: 12px !important; line-height: 1.45 !important; }
  .sd-foot-logo { width: 48px !important; height: 48px !important; }
  [data-sd-foot] a, [data-sd-foot] span { overflow-wrap: anywhere; }
  .sd-foot-review { padding: 6px 10px !important; }
  .sd-foot-review span { font-size: 12px !important; }
  .sd-foot-social { width: 32px !important; height: 32px !important; }
  .sd-foot-social svg { width: 16px; height: 16px; }
}

@media (max-width:700px){[data-shop-grid]{grid-template-columns:1fr!important}}

/* Interaction polish, site-wide (same values as the GBP pages):
   press 0.985 / 160ms, image zoom 1.02 / 400ms on mouse only, 2px accent focus ring,
   motion removed for reduced-motion users. */
:root { --ease-out-strong: cubic-bezier(.23,1,.32,1); }
main a:has(> img), main a:has(> picture), section a:has(img):not(.btn),
[data-ts-card], [data-ts-banner-link], [data-dc-photo-cell] > a {
  overflow: hidden;
  transition: transform 160ms var(--ease-out-strong);
}
section a:has(img):not(.btn) img, [data-ts-card] img, [data-ts-banner-link] img {
  transition: transform 400ms var(--ease-out-strong);
}
section a:has(img):not(.btn):active, [data-ts-card]:active, [data-ts-banner-link]:active, [data-dc-photo-cell] > a:active {
  transform: scale(.985);
}
.btn { transition-property: background-color, color, border-color, transform; transition-timing-function: var(--ease-out-strong); }
.btn:active { transform: scale(.97); transition-duration: 120ms; }
.sd-foot-social { transition: color 150ms ease, transform 160ms var(--ease-out-strong); }
.sd-foot-social:active { transform: scale(.9); }
details > summary { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  section a:has(img):not(.btn):hover img, [data-ts-card]:hover img, [data-ts-banner-link]:hover img { transform: scale(1.02); }
  .sd-foot-social:hover { transform: translateY(-2px); }
}
/* Touch: 44px minimum targets for the flag row, footer icons and summary rows. */
@media (pointer: coarse) {
  lang-bar a[aria-label] { padding: 14px 6px 12px !important; }
  .sd-foot-social { width: 44px !important; height: 44px !important; }
  details > summary { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  section a:has(img), section a:has(img) img, [data-ts-card], [data-ts-card] img,
  [data-ts-banner-link], [data-ts-banner-link] img, .btn, .sd-foot-social {
    transform: none !important;
    transition: color 150ms ease, background-color 150ms ease !important;
  }
}

/* long-word headings */
h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;hyphens:auto}

/* Accessibility pass, 31 Oct 2026 */
[data-skip]{position:absolute;left:12px;top:-60px;z-index:1000;padding:10px 14px;background:var(--color-bg);color:var(--color-text);border:2px solid var(--color-highlight);text-decoration:none}
[data-skip]:focus{top:12px}
[data-eyebrow]{font-family:var(--font-display);font-size:var(--text-label-size);letter-spacing:var(--label-tracking);text-transform:var(--label-case);color:var(--color-highlight);font-weight:600;line-height:1.12;margin:0 0 var(--space-2)}
h2[data-hl="3"],h3[data-hl="3"]{font-size:24px}
h2[data-hl="4"],h3[data-hl="4"],h4[data-hl="4"]{font-size:19px}
h2[data-hl="5"],h3[data-hl="5"],h4[data-hl="5"]{font-size:16px}
a,button,.btn,summary,label{touch-action:manipulation}
section[id],[id]{scroll-margin-top:80px}
#main:focus{outline:none}

/* Mobile pass, 31 Oct 2026 */
img, video, iframe { max-width: 100%; }
@media (max-width: 700px) {
  body { overflow-x: clip; }
  section .btn:not(.nav-book) { white-space: normal; max-width: 100%; min-height: 44px; text-align: left; }
  input, select, textarea { font-size: 16px !important; }
  iframe { width: 100% !important; }
  [data-m-2col] > * { padding: 14px !important; }
  [data-m-2col] p { font-size: 13px !important; }
}