/* Prerendered copy (#ssr) shows until the app is ready; the app renders hidden meanwhile. */
body:has(#ssr) #root { display: none; }

/* Mobile usability fixes layered on top of the built Tailwind CSS. */
html, body { overflow-x: clip; max-width: 100%; }
img, video, iframe { max-width: 100%; }
/* Grid columns must be allowed to shrink, or wide children (e.g. the product thumbnail strip) stretch them off-screen */
#root .grid > *, #ssr .grid > * { min-width: 0; }
img { height: auto; }

@media (max-width: 768px) {
  body { font-size: 16px; }
  p, li, td, th, label, blockquote, dd { font-size: max(16px, 1em); line-height: 1.7; }
  /* 16px inputs also stop iOS from zooming on focus */
  input, select, textarea { font-size: 16px !important; }
  pre, table { display: block; max-width: 100%; overflow-x: auto; }
}

@media (max-width: 1024px), (pointer: coarse) {
  button, [role="button"], input[type="submit"], input[type="button"], select,
  header a, nav a, footer a, a[class*="btn"], a[class*="rounded"] {
    min-height: 48px;
    min-width: 48px;
  }
  :is(header, nav, footer) a:not(.flex):not(.block):not(.grid):not(.inline-flex):not(.hidden) {
    display: inline-flex;
    align-items: center;
  }
  footer li + li, nav li + li { margin-top: 4px; }
  header nav, footer nav, footer ul { gap: 8px; }
  input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; margin: 12px; }
}

/* Related pages block added by seo.js */
#seo-related { padding: 40px 16px; background: hsl(180 15% 96%); border-top: 1px solid hsl(180 15% 88%); }
#seo-related .seo-related__inner { max-width: 1100px; margin: 0 auto; }
#seo-related h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 16px; color: hsl(175 55% 25%); }
#seo-related ul { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
#seo-related li { margin: 0; }
#seo-related a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px;
  border-radius: 12px; background: #fff; border: 1px solid hsl(175 30% 82%);
  color: hsl(175 55% 28%); font-weight: 500; font-size: 16px; text-decoration: none;
}
#seo-related a:hover, #seo-related a:focus-visible { background: hsl(175 55% 30%); color: #fff; }
.dark #seo-related { background: hsl(200 25% 10%); border-color: hsl(200 20% 18%); }
.dark #seo-related h2 { color: hsl(175 50% 70%); }
.dark #seo-related a { background: hsl(200 25% 14%); color: hsl(175 50% 70%); border-color: hsl(200 20% 22%); }