/* Komiki — phone layout layer. Loaded after the design CSS on every page.
   Lives outside public/ so a Claude Design re-sync never wipes it. */

/* sections with nothing real in them yet (review slots, before/after placeholders) */
#results, #reviews, .navl a[href$="#reviews"], .navl a[href$="#results"] { display: none !important; }

/* never let anything push the page sideways */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  body { font-size: 15px; line-height: 1.55; }
  .wrap { padding-inline: 16px; }
  section { padding-block: 36px !important; }

  /* announcement: one calm line */
  .ann { font-size: 10px; letter-spacing: .1em; padding: 8px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ann-long { display: none; }

  /* header */
  .bar { min-height: 54px; gap: 8px; }
  .seal { width: 36px; height: 36px; }
  .mark b { font-size: 20px; }
  .mark span { font-size: 7px; }
  .bag { min-height: 40px; padding: 0 12px; font-size: 12px; }

  /* hero: headline, one line of copy, one clear button, then the photo */
  .hero { min-height: 0 !important; gap: 16px; padding-top: 18px !important; padding-bottom: 8px !important; }
  .hero h1 { font-size: clamp(32px, 9.4vw, 40px) !important; line-height: 1.08; }
  .hero-copy { gap: 12px; }
  .hero-copy .lede { font-size: 14.5px; max-width: 30ch; }
  .hero-copy .btn { min-height: 48px; }
  .hero-copy .btn + .btn { min-height: 44px; }
  .hero img.ph, .hero .ph { aspect-ratio: 4 / 5; max-height: 62vh; width: 100%; object-fit: cover; border-radius: 22px; }

  /* section headings */
  .head { gap: 8px; margin-bottom: 18px; }
  .head h1 { font-size: clamp(26px, 8vw, 32px); }
  .head h2 { font-size: clamp(23px, 7vw, 28px) !important; }
  .head p { font-size: 14px; }
  .eb { font-size: 9.5px; letter-spacing: .2em; }

  /* trust pills + filter chips: tidy scroll rows */
  .trust { padding-inline: 16px; gap: 6px; }
  .trust span { padding: 7px 12px; font-size: 10.5px; }
  .chips { gap: 6px; margin-bottom: 14px; }
  .chip { min-height: 40px; padding: 0 14px; font-size: 11.5px; }

  /* concern tiles */
  .cg { gap: 8px; }
  .cc { min-height: 104px; padding: 14px 13px 12px; border-radius: 16px; }
  .cc h3 { font-size: 15px; }
  .cc small { font-size: 10px; }

  /* product cards: two even columns, nothing wrapping into a mess */
  .pg { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .card { padding: 8px 8px 12px !important; gap: 6px !important; border-radius: 18px; grid-template-rows: auto; }
  .card .ph { border-radius: 12px; aspect-ratio: 1 / 1; object-fit: cover; }
  .card .sz { font-size: 9px; letter-spacing: .14em; padding-inline: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card h3 { font-size: 15px !important; line-height: 1.22; padding-inline: 2px; min-height: 2.44em; }
  .card .ben { font-size: 12px !important; line-height: 1.4; padding-inline: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
  .card .rate { display: none; }
  .card .pr { font-size: 17px !important; padding-inline: 2px; margin-top: 2px; }
  .card .btn { min-height: 40px !important; font-size: 11.5px !important; letter-spacing: .06em; padding-inline: 8px !important; margin-top: 4px; }
  .card .badge { font-size: 8.5px; padding: 4px 8px; top: 12px; left: 12px; }

  /* big feature blocks */
  .setc, .bundle { padding: 18px 16px !important; border-radius: 22px; gap: 14px; }
  .setc h2, .bundle h2 { font-size: 24px; }
  .ig { gap: 22px; }
  .ii h3 { font-size: 20px; }
  .ii p { font-size: 14px; }

  /* newsletter */
  .nf input, .nf .btn { min-height: 48px; }

  /* footer: two columns of links instead of one long list */
  footer { padding-block: 34px 22px; }
  .logo-full { width: 170px; }
  .fg { grid-template-columns: 1fr 1fr !important; gap: 22px 16px !important; margin-top: 22px; }
  .fc h4 { font-size: 10px; margin-bottom: 9px; }
  .fc ul { font-size: 13.5px; gap: 7px; }
  .fc:last-child { grid-column: 1 / -1; }
  .wa { min-height: 46px; padding: 0 18px; font-size: 13px; }
  .fb { font-size: 11.5px; margin-top: 24px; }

  /* sticky shop bar: single line */
  .sticky { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .sticky .btn { min-height: 46px; font-size: 12.5px; white-space: nowrap; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

  /* product page */
  .pdp { gap: 18px; padding-bottom: 28px; }
  .gal .main { border-radius: 18px; }
  .thumbs { gap: 8px; }
  .thumbs button { width: 60px !important; height: 60px !important; border-radius: 12px; }
  .pinfo { gap: 12px; }
  .pinfo h1 { font-size: 28px !important; }
  .price { font-size: 24px; }
  .buyrow { grid-template-columns: auto 1fr; gap: 8px; }
  /* buy button stays under the thumb while reading the product */
  .pinfo .buyrow { position: sticky; bottom: 0; z-index: 30; background: var(--paper); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); margin-inline: -2px; box-shadow: 0 -10px 18px -14px rgba(42,33,28,.35); }
  .qty { height: 48px; }
  .qty button { width: 40px !important; height: 46px; }
  .acc summary { padding: 15px 0 !important; font-size: 14.5px; }
  .crumb { font-size: 11px; padding-top: 12px; }

  /* bag + checkout */
  .two { gap: 16px; }
  .panel { padding: 16px 14px; border-radius: 18px; }
  .li { grid-template-columns: 60px 1fr auto; gap: 10px; }
  .li img { width: 60px; height: 60px; }
  .f input, .f select, .f textarea { min-height: 48px; padding: 12px 14px; }
  .opt { padding: 13px 14px; gap: 10px; }
  .grid2 { grid-template-columns: 1fr !important; }
}

@media (max-width: 360px) {
  .card h3 { font-size: 14px !important; }
  .card .btn { font-size: 10.5px !important; letter-spacing: .03em; }
  .hero h1 { font-size: 30px !important; }
}