/*
 * Mobile-first corrections.
 *
 * Tested by rendering the live site inside fixed-width iframes at 360, 390 and
 * 768 CSS pixels, which is what the media queries actually see.
 */

/* ---------- Header has to fit a 320px phone ---------- */

@media (max-width: 900px) {
  html body .masthead__inner { gap: 12px; flex-wrap: nowrap; }
  html body .brand { min-width: 0; flex: 1 1 auto; }
  html body .brand__name { font-size: 19px; letter-spacing: .06em; white-space: nowrap; }
  html body .brand__sub { font-size: 8px; letter-spacing: .18em; white-space: nowrap; }
  html body .masthead__actions { gap: 10px; flex: none; }
  html body .masthead__actions .btn--sm { padding: 10px 14px; font-size: 14px; white-space: nowrap; }
  html body .navtoggle { order: 3; flex: none; }
}

@media (max-width: 560px) {
  /* Hero and sticky bar both carry a buy CTA; the header one goes when space runs out. */
  html body .masthead__actions .btn--sm { display: none; }
  html body .brand__name { font-size: 20px; }
}

/* ---------- Top bar scrolls without a visible scrollbar ---------- */

@media (max-width: 600px) {
  html body .topbar__inner { scrollbar-width: none; -ms-overflow-style: none; }
  html body .topbar__inner::-webkit-scrollbar { display: none; }
}

/* ---------- Touch targets and full-width actions ---------- */

@media (max-width: 600px) {
  html body .hero__cta { flex-direction: column; align-items: stretch; gap: 12px; }
  html body .hero__cta .btn { width: 100%; }
  html body .btn { min-height: 48px; }
  html body .nav a { min-height: 48px; display: flex; align-items: center; }
  html body .acc__btn { min-height: 52px; }
  html body .bundle { min-height: 76px; }
  html body .chip { min-height: 40px; display: inline-flex; align-items: center; }
  html body .pdp__thumb { min-height: 64px; }
  html body .btn--ghost { align-self: stretch; }
}

/* ---------- Sticky buy bar on the product page ---------- */

.rs-buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: none;
  gap: 12px;
  align-items: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(242, 235, 225, .97);
  border-top: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(8px);
}

.rs-buybar__price { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1; white-space: nowrap; }
.rs-buybar__note { font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.rs-buybar__btn { flex: 1; min-height: 48px; }

@media (max-width: 900px) {
  body.single-product .rs-buybar { display: flex; }
  body.single-product { padding-bottom: 78px; }
}

/* ---------- Layout safety on small screens ---------- */

@media (max-width: 600px) {
  html body .pdp__assur { flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; }
  html body .pdp__price { row-gap: 4px; }
  html body .crumbs { font-size: 13px; }
  html body .callout { flex-direction: column; align-items: flex-start; gap: 16px; }
  html body .callout .btn { width: 100%; }
  html body .sechead--row { gap: 14px; }
  html body .article__body h2 { font-size: 27px; margin-top: 34px; }
  html body .article__body h3 { font-size: 21px; }
  html body .article__body table { display: block; overflow-x: auto; white-space: nowrap; }
  html body .factsheet { display: table; white-space: normal; }
  html body .h-xl, html body .hero h1 { font-size: 38px; }
  html body .numeral--xl { font-size: 40px; }
  html body .ratingsum__score { font-size: 48px; }
}

/* ---------- iOS Safari specifics ---------- */

/* 16px minimum stops Safari zooming the page when a field is focused. */
html body input[type="text"], html body input[type="email"], html body input[type="tel"],
html body input[type="url"], html body input[type="password"], html body input[type="search"],
html body input[type="number"], html body textarea, html body select,
html body .wc-block-components-text-input input {
  font-size: 16px;
}

/* Safari needs the prefix for object-fit inside aspect-ratio boxes. */
html body .frame img, html body .postcard__media img, html body .feature__media img {
  -o-object-fit: cover;
}
html body .frame--pack img, html body .pdp__main img {
  -o-object-fit: contain;
}

/* Momentum scrolling in the horizontal scrollers. */
html body .compare-scroll, html body .scroll, html body .topbar__inner {
  -webkit-overflow-scrolling: touch;
}

/* Stop the sticky header eating anchored headings. */
html { scroll-padding-top: 96px; }

/* ---------- Packshot on small screens ----------
 * The source photograph is square. Holding a 4:5 frame on a narrow phone left
 * the jar floating in empty bands top and bottom, which reads as a crop even
 * though nothing is cut. Match the frame to the source instead.
 */

@media (max-width: 900px) {
  html body .hero__art .frame--pack,
  html body .frame--pack.frame--ratio-45 {
    aspect-ratio: 1 / 1;
  }
  html body .frame--pack img {
    padding: 6%;
  }
}

@media (max-width: 600px) {
  html body .frame--pack img {
    padding: 4%;
  }
  html body .pdp__main img {
    padding: 5%;
  }
}

/* Any remaining form control below 16px would make iOS Safari zoom on focus. */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html body select,
html body textarea,
html body .wc-block-components-text-input input,
html body .wc-blocks-components-select__select,
html body .woocommerce input.input-text,
html body .woocommerce .quantity input.qty {
  font-size: 16px;
}