/* Mobile / tablet polish (Claude 2026-11-08, from the design-agent audit; each rule measured at 375/390/768/1024).
   Loaded LAST on every page (injected by tools/site_seo.py), so it overrides earlier sheets without editing them.
   Layout only — no copy changes. */

/* Home hero CG note (打消し表示): quieter, smaller, never overlapping the scroll hint or the buttons. */
html .winter-hero .heat-control{display:block;top:auto;bottom:74px;right:3%;left:auto;text-align:right}
html .winter-hero .heat-control .heat-caption{display:inline-block;margin:0;font-size:11px;line-height:1.5;letter-spacing:.04em;
  color:rgba(255,255,255,.86);background:none;padding:0;border-radius:0;text-shadow:0 0 6px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4)}
html .winter-hero .heat-control .view-toggle,html .winter-hero .heat-control .motion-toggle{display:none}
@media(max-width:760px){
  html .winter-hero .heat-control{top:12px;right:16px;bottom:auto;left:auto}
  html .winter-hero .heat-control .heat-caption{font-size:10px}
}

/* Top notice bar: readable 10px, no awkward break inside a word. */
@media(max-width:720px){
  html .preview{height:auto;min-height:28px;padding:5px 16px;font-size:10px;line-height:1.6}
  html .preview span{word-break:keep-all;text-wrap:balance}
}

/* Header on narrow phones: logo and country switch no longer touch; 44px tap target. */
@media(max-width:420px){
  html .header .logo{width:118px}
  html .header-tools{gap:14px}
  html .header-tools .country{min-height:44px}
}

/* guide.html comparison table: one card per row instead of a 650px table that needs sideways scrolling. */
@media(max-width:640px){
  html .compare{min-width:0;margin:20px 0 40px}
  html .compare thead{display:none}
  html .compare,html .compare tbody,html .compare tr,html .compare th,html .compare td{display:block;width:auto}
  html .compare tr{padding:18px 0;border-bottom:1px solid var(--line,#ddd8cf)}
  html .compare th,html .compare td{border:0;padding:2px 0}
  html .compare tbody th{font-size:15px;margin-bottom:6px}
  html .compare td:nth-child(3){color:#5f5c57}
  html .compare td:last-child a{display:inline-flex;align-items:center;min-height:44px}
}

/* Mat pages: scene caption centred (number above the title), size diagram centred. */
@media(max-width:640px){
  html .ms-scene figcaption{flex-direction:column;align-items:center;gap:6px;text-align:center}
  html .ms-scene figcaption>span{padding-top:0}
}
@media(max-width:760px){
  html .mat-dimension{padding:12px 8px 0}
  html .mat-dimension-image{padding:0 20px 35px}
  html .mat-measure-x{left:20px}
}

/* Minimum type size on phones (notes 11px #5f5c57 on light grounds; labels 10px). */
@media(max-width:760px){
  html .single-product figcaption,html .single-material-note,html .single-material-live-titles>small,
  html .single-summary .single-summary-note,html .pdp-life-photo figcaption{font-size:11px;line-height:1.8;color:#5f5c57}
  html .single-summary dt,html .pdp-eyebrow,html .single-texture-grid figcaption>span,html .tech-english,
  html .tech-material-label small,html .tech-scale-label,html .tech-visual-label{font-size:10px}
  html .heat-scroll-link,html .first-visual .view-toggle,html .first-visual .motion-toggle{font-size:10px}
}

/* Tap targets ≥ 44px where it does not change the layout. */
@media(max-width:760px){
  html .footer a:not(.logo){min-height:36px;display:flex;align-items:center;margin:2px 0}
  html .single-zoom{width:44px;height:44px}
  html .tech-motion,html .tech-replay{min-height:44px}
  html a.fir-ref{padding:12px 6px;margin:-12px -6px}
}

/* technology.html spectrum fan: keep the moving λ label inside the frame (a portrait version of the chart is a separate task). */
@media(max-width:700px){
  html .fir-apps-stage:has(>svg){padding-left:8px}
}

/* 2026-11-08 final: the page itself never pans sideways. iOS lets any box that sticks out drag the whole page unless the
   root clips; `clip` (unlike `hidden`) adds no scroll container, so sticky headers and the horizontal product rail keep working. */
html,body{overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}

/* Japanese phrase wrapping: tools/jp_linebreak.py inserts <wbr> at BudouX phrase boundaries in headings and short copy,
   so lines break between words (暮らしの｜ぬくもりへ), never inside one; a phrase wider than its box still breaks. */
.jp-wrap{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
p.jp-wrap{text-wrap:pretty}

/* Tap targets on phones (QA 2026-11-08): the hit area grows without moving the layout. */
@media(max-width:760px){
  html .breadcrumb a,html .product-inpage a,html .winter-season-bar a,html a.contact-address,html .header-tools .country,
  html .footer-grid a,html .compare td a,html table td a{position:relative;display:inline-block;padding:12px 4px;margin:-12px -4px}
  html .header-tools .country{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:0}
  html button.ir-motion,html .tech-motion,html .tech-replay,html .mat-film-retry{min-height:44px;min-width:44px}
  html .pdp-nav .pdp-nav-back,html .pdp-nav .pdp-nav-name{min-height:44px;display:inline-flex;align-items:center}
}