/* INFOHAS v2 — Components (mobile-first) */

/* Navbar Apple-style */
/* Wave 4.5E: navbar premium — gradient translucido top→bottom (sensação
 * de "lifting from content"), blur reforçado, border softer. Mantém
 * legibilidade dos textos (top é mais opaco). */
.ih-nav{position:fixed;inset:0 0 auto 0;height:var(--ih-nav-h);z-index:50;
  background:linear-gradient(180deg,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.54) 100%);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
@media (prefers-color-scheme:dark){.ih-nav{background:rgba(0,0,0,.6)}}
.ih-nav__inner{max-width:var(--ih-maxw);height:100%;margin:0 auto;
  padding:0 var(--ih-space);display:flex;align-items:center;gap:18px}
.ih-nav__brand{font-weight:700;letter-spacing:.14em;font-size:15px}
.ih-nav__menu{display:none;gap:22px;margin-left:8px;flex:1}
.ih-nav__link{font-size:13px;color:var(--ih-ink);background:none;border:0;
  cursor:pointer;font-family:inherit;opacity:.85}
.ih-nav__link:hover{opacity:1}
.ih-nav__actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.ih-nav__actions .ih-btn{display:none}
.ih-nav__burger{width:28px;height:28px;background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:5px}
.ih-nav__burger span{height:1.5px;background:var(--ih-ink);transition:.3s var(--ih-ease)}
.ih-nav__burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ih-nav__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.ih-nav__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Scrim (fundo desfocado) */
.ih-scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .35s var(--ih-ease)}
.ih-scrim.is-on{opacity:1}

/* Mega menu · Wave 2.5 parallel · premium editorial navigation.
 * Estrutura preparada para receber mini compositions (slot 48px à
 * esquerda; img substituirá emoji quando dropares Wave 2.5).
 * Layout horizontal por item: media | (name + sub). */
/* Wave 4.5E: mega overlap 2px com navbar (sem gap subpixel),
 * evita "piscar" do hover. Mega visual fica por baixo da navbar
 * (z-index 45 < 50) na zona de overlap, mas captura mouseenter. */
.ih-mega{position:fixed;inset:calc(var(--ih-nav-h) - 2px) 0 auto 0;z-index:45;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:var(--ih-blur);
  backdrop-filter:var(--ih-blur);
  border-bottom:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent);
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:.5s var(--ih-ease)}
@media (prefers-color-scheme:dark){.ih-mega{background:rgba(10,10,12,.92)}}
.ih-mega.is-on{transform:none;opacity:1;pointer-events:auto}
.ih-mega__inner{max-width:var(--ih-maxw);margin:0 auto;
  padding:36px var(--ih-space) 44px}
.ih-mega__eyebrow{font-size:11px;color:var(--ih-ink-soft);
  text-transform:uppercase;letter-spacing:.16em;
  font-weight:500;margin:0 0 24px}
.ih-mega__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* Wave 4.5D: cards do megamenu — hover bg 6% ink (cinza premium),
 * radius 20px alinhado com iconrow, leve elevação. */
.ih-mega__item{padding:18px 16px;border-radius:20px;
  display:flex;align-items:center;gap:14px;text-decoration:none;
  color:inherit;
  transition:background .22s var(--ih-ease),
             transform .22s cubic-bezier(.4,0,.2,1)}
.ih-mega__item:hover{
  background:color-mix(in srgb, var(--ih-ink) 6%, transparent);
  transform:translateY(-1px)}
/* Slot 56x56: emoji fallback OU futura mini composition (img) */
.ih-mega__icon{flex-shrink:0;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;line-height:1;opacity:.95;
  transition:opacity .22s var(--ih-ease)}
.ih-mega__item:hover .ih-mega__icon{opacity:1}
/* Wave 4.5C+D+E: SVGs de /static/v2/img/icons/ (mesmos da Home).
 * Container 56x56; opacity 1.0; transform:scale(1.12) no img para
 * compensar padding interno dos SVGs (mesma técnica do iconrow). */
.ih-mega__media{flex-shrink:0;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  opacity:1;overflow:hidden}
.ih-mega__media img{width:100%;height:100%;display:block;
  object-fit:contain;transform:scale(1.12);transform-origin:center}
.ih-mega__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.ih-mega__name{font-weight:600;font-size:14px;
  line-height:1.3;letter-spacing:-.005em;color:var(--ih-ink)}
.ih-mega__sub{font-size:12px;color:var(--ih-ink-soft);
  line-height:1.4}

/* Mobile drawer */
.ih-drawer{position:fixed;inset:var(--ih-nav-h) 0 0 0;z-index:46;
  background:var(--ih-bg);transform:translateX(100%);
  transition:transform .4s var(--ih-ease);overflow-y:auto;padding:24px var(--ih-space) 60px}
.ih-drawer.is-on{transform:none}
.ih-drawer__nav{display:flex;flex-direction:column;gap:6px}
.ih-drawer__link{padding:14px 4px;font-size:20px;font-weight:600;
  border-bottom:1px solid var(--ih-line)}
.ih-drawer__link--sub{font-size:16px;font-weight:500;color:var(--ih-ink-soft)}
.ih-drawer__label{margin-top:18px;font-size:12px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ih-ink-soft)}
.ih-drawer__cta{margin-top:24px}

/* Hero · Programa Visual Premium V1 (ADR-0025) · cinematic-calmo
 * Hero fix 2026-05-22 v2: altura 70vh (era 86vh — menos takeover);
 * padding horizontal removido (passa para inner — alinhamento com
 * grelha do conteúdo); padding vertical com clamp menor; fade
 * suave na borda inferior p/ transição limpa para a próxima secção. */
.ih-hero{position:relative;min-height:70vh;display:flex;align-items:center;
  padding:calc(var(--ih-nav-h) + clamp(2rem,5vw,4rem)) 0 clamp(2rem,5vw,4rem);
  overflow:hidden;isolation:isolate}
/* BG layers: still cinema (quando asset existir) + grain subtil + scrim legibilidade.
 * Wave 3.4A: dois layers stacked (--a / --b) para crossfade entre universos.
 * Layer inativo: opacity 0; layer ativo: opacity 1. Transition controlada por JS
 * (inline style) — 2.5s ease-in-out. Sem JS, layer A fica visivel (graceful). */
.ih-hero__bg{position:absolute;inset:0;z-index:-2;
  background:radial-gradient(120% 90% at 50% 0%,#e8f1ff 0%,var(--ih-bg) 55%);
  background-size:cover;background-position:center;
  opacity:0;will-change:opacity}
.ih-hero__bg.is-active{opacity:1}
/* Asset image — Wave 4.3 RESTORED to full-bleed cinematic cover.
 * Source: 5120x2880 PNG masters → WebP Q88 (Wave 4.2 upscale + 4.2B regrade).
 * Behaviour: 'cover' ALWAYS — image fills the hero box, edges crop
 * naturally (editorial photography behaviour, NOT boxed/contained).
 * Position: 60% center — device slightly right of viewport center,
 * leaving the left third for text. Removed the contain/auto-92%
 * ultra-wide hacks that were producing the letterboxed "boxed" feel.
 * background-color ivory remains as final fallback (transparent edges). */
.ih-hero__bg[data-image]{
  background:var(--bg-url) 60% center / cover no-repeat;
  background-color:var(--ih-bg-ivory)}
/* Wave 4.1 → 4.2B: atmospheric vignette dialed DOWN (4% → 2%).
 * Era "washing out blacks"; regrade pass faz o "weight" via image
 * grading, não via CSS overlay. Vignette permanece subtil mas
 * deixa as imagens recuperarem contraste premium. */
.ih-hero__bg[data-image]::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 75% 55% at 50% 50%,
      transparent 60%,
      color-mix(in srgb, var(--ih-ink) 2%, transparent) 100%);
  mix-blend-mode:multiply}
/* Scrim de legibilidade · Wave 4.3 + 4.3B per-universe calibration.
 * BASE: ivory wash on left text zone (warm, not stark white). Works
 * for "light" universes (apple, tablets, wearables, scooters-light).
 * Per-universe overrides below for dark images (samsung/laptops/consoles)
 * where the same scrim would leave headline weak. Ivory matches body
 * --ih-bg-ivory (#fbfaf7) so the scrim feels like body atmosphere
 * leaking into the hero, not a foreign overlay.
 * Stops at 45% horizontal — image breathes from 45% onward. */
.ih-hero__bg[data-image]::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(95deg,
    rgba(251,250,247,.68) 0%,
    rgba(251,250,247,.48) 20%,
    rgba(251,250,247,.16) 36%,
    transparent 48%)}
/* Wave 4.3C — Per-universe background-position.
 * Light universes keep 60% (default). Dark universes push the device
 * further right so the left half gets MORE ivory scrim coverage and
 * less of the dark image bleeds through. Full-bleed preserved. */
.ih-hero[data-universe="samsung"] .ih-hero__bg[data-image]{
  background-position:70% center}
.ih-hero[data-universe="laptops"] .ih-hero__bg[data-image]{
  background-position:72% center}
.ih-hero[data-universe="consoles"] .ih-hero__bg[data-image]{
  background-position:68% center}
.ih-hero[data-universe="scooters"] .ih-hero__bg[data-image]{
  background-position:64% center}

/* Wave 4.3B + 4.3C — dark universes scrim.
 * Left edge bumped to NEAR-OPAQUE (.96-.98) so 0% of the dark image
 * bleeds through the headline area. Wash dissipates by 55-60%, keeping
 * the device side (right 55-60%+) fully cinematic. Color = ivory
 * (matches body --ih-bg-ivory) so feels like atmosphere continuity. */
.ih-hero[data-universe="samsung"] .ih-hero__bg[data-image]::after,
.ih-hero[data-universe="laptops"] .ih-hero__bg[data-image]::after{
  background:linear-gradient(95deg,
    rgba(251,250,247,.96) 0%,
    rgba(251,250,247,.82) 18%,
    rgba(251,250,247,.42) 36%,
    rgba(251,250,247,.12) 48%,
    transparent 58%)}
/* CONSOLES is the darkest — fully opaque at far-left + extended fade. */
.ih-hero[data-universe="consoles"] .ih-hero__bg[data-image]::after{
  background:linear-gradient(95deg,
    rgba(251,250,247,.98) 0%,
    rgba(251,250,247,.88) 20%,
    rgba(251,250,247,.48) 38%,
    rgba(251,250,247,.16) 50%,
    transparent 62%)}
/* SCOOTERS — medium-mid (urban concrete tone). Reinforced. */
.ih-hero[data-universe="scooters"] .ih-hero__bg[data-image]::after{
  background:linear-gradient(95deg,
    rgba(251,250,247,.86) 0%,
    rgba(251,250,247,.66) 21%,
    rgba(251,250,247,.28) 40%,
    transparent 52%)}
/* WEARABLES — pearl atmospheres can be flat. Slight scrim bump. */
.ih-hero[data-universe="wearables"] .ih-hero__bg[data-image]::after{
  background:linear-gradient(95deg,
    rgba(251,250,247,.78) 0%,
    rgba(251,250,247,.56) 20%,
    rgba(251,250,247,.22) 36%,
    transparent 48%)}
/* APPLE + TABLETS use the BASE scrim — already premium-readable. */

/* Wave 4.3C — disable vignette on dark universes. The 2% ink corner
 * radial was darkening already-dark heroes; on samsung/laptops/consoles
 * it muddies the device area. Light universes keep it (subtle depth). */
.ih-hero[data-universe="samsung"] .ih-hero__bg[data-image]::before,
.ih-hero[data-universe="laptops"] .ih-hero__bg[data-image]::before,
.ih-hero[data-universe="consoles"] .ih-hero__bg[data-image]::before,
.ih-hero[data-universe="scooters"] .ih-hero__bg[data-image]::before{
  background:none}
/* Grain subtil — overlay (não escurece) em vez de multiply.
 * Wave 4.2B: opacity dialed down (.18 → .10) — o grading recuperou
 * texture realista, grain CSS adicional torna-se desnecessário. */
.ih-hero__grain{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--ih-grain);background-size:160px 160px;
  opacity:.10;mix-blend-mode:overlay}
/* Fade na borda inferior do hero: transição suave para a próxima secção
   (independente da imagem; cria "exit" premium) */
.ih-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(180deg, transparent 0%, var(--ih-bg-alt) 100%);
  pointer-events:none; z-index:1}

/* Mobile: hero mais curto; texto ancorado em baixo; scrim vertical bottom-up */
@media (max-width:760px){
  .ih-hero{min-height:72vh;align-items:flex-end;
    padding:calc(var(--ih-nav-h) + 2rem) 0 2.5rem}
  .ih-hero__bg[data-image]{background:var(--bg-url) center center/cover no-repeat}
  .ih-hero__bg[data-image]::after{
    background:linear-gradient(180deg,
      transparent 0%,
      rgba(255,255,255,.55) 42%,
      rgba(255,255,255,.92) 78%)}
}
@media (prefers-color-scheme:dark){
  .ih-hero__bg{background:radial-gradient(120% 90% at 50% 0%,#0a1b33 0%,#000 55%)}
  .ih-hero__bg[data-image]::after{
    background:linear-gradient(95deg,
      rgba(15,15,18,.82) 0%,
      rgba(15,15,18,.62) 26%,
      rgba(15,15,18,.22) 50%,
      transparent 72%)}
  .ih-hero__grain{mix-blend-mode:soft-light;opacity:.12}
  @media (max-width:760px){
    .ih-hero__bg[data-image]::after{
      background:linear-gradient(180deg,
        transparent 0%,
        rgba(15,15,18,.55) 42%,
        rgba(15,15,18,.90) 78%)}
  }
}
/* Inner: alinhado com a grelha do conteúdo abaixo (max-width:var(--ih-maxw)
   centrado), com padding horizontal canónico. Children limitam-se a 560px
   p/ não invadir zona da imagem. Z-index:2 fica acima de bg+grain. */
.ih-hero__inner{width:100%;max-width:var(--ih-maxw);margin:0 auto;
  padding:0 var(--ih-space);position:relative;z-index:2}
/* Wave 3.5: block max-width reduzido 480 → 440 (slogans rotacionados
 * tem variancia de comprimento; 440px mantem todas em 2 linhas em desktop). */
.ih-hero__inner > *{max-width:440px}
/* Wave 4.3B — eyebrow darkened from --ih-ink-soft (#6e6e73) to
 * mid-tone for stronger presence on dark-universe heroes. */
.ih-hero__eyebrow{font-size:var(--ih-type-sm);
  color:color-mix(in srgb, var(--ih-ink) 62%, transparent);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
/* Wave 3.5: typography refinement — slogans 12-18% mais pequenos,
 * line-height mais apertado (1.08→1.05), span colorida ink (was ink-soft)
 * para legibilidade do segundo verso. INFOHAS recebe emphasis via
 * .ih-hero__brand-em (mais bold + ink full).
 * Wave 4.3B: title span darkened slightly (was ink-soft #6e6e73 → 70%
 * ink alpha) for stronger second-line presence. INFOHAS stays full ink. */
.ih-hero__title{font-size:clamp(32px,5.6vw,52px);
  font-weight:600;line-height:1.05;
  letter-spacing:-.028em;margin:0;color:var(--ih-ink)}
.ih-hero__title span{display:block;
  font-size:clamp(24px,4.6vw,40px);font-weight:400;
  color:color-mix(in srgb, var(--ih-ink) 70%, transparent);
  letter-spacing:-.018em;
  line-height:1.08;margin-top:.12em}
/* Wave 3.5: INFOHAS emphasis — peso ligeiramente bolder, ink full
 * (vs ink-soft do span). Subtle anchor sem flashy. */
.ih-hero__brand-em{font-weight:500;color:var(--ih-ink);
  font-style:normal;letter-spacing:-.02em}
/* Wave 4.3B — sub slightly darker (#6e6e73 → 65% ink). */
.ih-hero__sub{margin:28px 0 0;max-width:420px;
  font-size:clamp(var(--ih-type-md),1.4vw,17px);
  color:color-mix(in srgb, var(--ih-ink) 65%, transparent);
  line-height:var(--ih-leading-body)}
.ih-hero__cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}

/* ===== Wave 3.5 + 3.5D · Icon nav row (Apple Support inspired) =====
 * Compact horizontal row, sem cards, sem containers. Icon SVG + label.
 * 3.5D: desktop 56 / mobile 48 (was 52/44 — bumped per spec). Label
 * sobe para mais perto do icon (gap 14→10 mobile, 16→12 desktop).
 * Section padding reduzida ~15% via inline override no .ih-section
 * que enrola este nav (ver home.html). Row gap mais apertado. */
/* Wave 4.5C+D+E: iconrow premium UX.
 * Mobile: flex-wrap (2-3 por linha, responsivo).
 * Desktop: grid 3×2 fixo (3 colunas, 2 linhas).
 * Img usa transform:scale(1.12) para "zoom" no SVG (compensa o
 * padding interno dos filled-illustrations 1254×1254). Opacity 1.0,
 * hover bg 6% ink + radius 20px. */
.ih-iconrow{display:flex;flex-wrap:wrap;gap:4px 2px;justify-content:center;
  align-items:flex-start;max-width:820px;
  margin:0 auto;padding:0 var(--ih-space)}
.ih-iconrow__item{flex:1 1 96px;max-width:132px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px 12px;text-decoration:none;color:var(--ih-ink-soft);
  border-radius:20px;
  transition:color .25s var(--ih-ease),
             background-color .25s var(--ih-ease),
             transform .25s var(--ih-ease)}
.ih-iconrow__item:hover{color:var(--ih-ink);
  background:color-mix(in srgb, var(--ih-ink) 6%, transparent);
  transform:translateY(-2px)}
.ih-iconrow__item:focus-visible{outline:2px solid var(--ih-accent);outline-offset:4px}
.ih-iconrow__icon{display:flex;align-items:center;justify-content:center;
  width:80px;height:80px;opacity:1;  /* Wave HOME DEVICES 2.0: editorial PNGs need presence */
  transition:opacity .25s var(--ih-ease);overflow:visible}
.ih-iconrow__icon img{width:100%;height:100%;display:block;
  object-fit:contain;transform:none}  /* Wave HOME DEVICES 2.0: editorial PNGs — contain, never crop */
.ih-iconrow__label{font-size:13px;font-weight:500;letter-spacing:-.005em;
  text-align:center;line-height:1.2}
@media (min-width:760px){
  .ih-iconrow{display:grid;grid-template-columns:repeat(3,1fr);
    grid-template-rows:auto auto;gap:12px 8px;max-width:560px}
  .ih-iconrow__item{flex:initial;max-width:none;padding:16px 12px 16px;gap:8px}
  .ih-iconrow__icon{width:84px;height:84px}
  .ih-iconrow__label{font-size:14px}
}
/* Wave 3.5F · Task B+C:
 * - iconrow section: title-to-icon mais apertado (head margin-bottom -20%)
 * - mais bottom padding antes da seccao Why (que agora e --alt = bg-alt
 *   ligeiramente mais escuro, criando tonal shift subtil sem cards/borders)
 * - section--alt ::before/::after fades ja gerem a transicao smooth */
.ih-section:has(> .ih-iconrow){padding-top:clamp(32px,4.5vw,52px);
  padding-bottom:clamp(44px,6.5vw,80px)}
.ih-section:has(> .ih-iconrow) .ih-section__head{margin-bottom:clamp(16px,2.8vw,28px)}

/* Cards · Wave 2 Fase A · floating premium composition
 * Princípio: device "vive" no card, não está "encaixado". Mais respiro,
 * sombras subtis, sem chrome (sem seta). Hover: lift sóbrio do device
 * (não do card inteiro) — composição editorial. */
/* Wave 3.3: card soft integration. Cards deixam de ser "white slabs
 * isolados" — passam a "surfaces premium integradas com o atmosphere".
 * Background ganha leve transparencia (.96); border quase invisivel (2%);
 * ambient-only shadow (sem key drop). Wave 2.5 composition PRESERVADO. */
.ih-cards{display:grid;grid-template-columns:1fr;gap:20px}
.ih-card{position:relative;
  background:color-mix(in srgb, var(--ih-bg) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 2%, transparent);
  border-radius:var(--ih-radius-hero,28px);
  padding:28px 26px 26px;display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:inherit;
  box-shadow:var(--ih-shadow-card-ambient);
  -webkit-backdrop-filter:saturate(110%);backdrop-filter:saturate(110%);
  transition:transform .4s cubic-bezier(.4,0,.2,1),
             box-shadow .4s cubic-bezier(.4,0,.2,1),
             background-color .4s cubic-bezier(.4,0,.2,1)}
.ih-card:hover{transform:translateY(-2px);
  background:color-mix(in srgb, var(--ih-bg) 98%, transparent);
  box-shadow:var(--ih-shadow-card-hover-ambient)}
.ih-card:focus-visible{outline:2px solid var(--ih-ink);outline-offset:2px}

/* Media area: floating composition. Device com respiro, drop-shadow
   subtil (não pesado), hover suaviza translate p/ feel de "floating".
   max-width 88% impede tocar nas bordas — composição editorial. */
.ih-card__media{position:relative;height:160px;display:flex;
  align-items:center;justify-content:center;margin-bottom:6px}
.ih-card__media img{max-width:84%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.07))
        drop-shadow(0 2px 4px rgba(0,0,0,.04));
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ih-card:hover .ih-card__media img{transform:translateY(-3px) scale(1.02)}

/* Icon fallback (categorias sem asset): emoji premium-refined.
   Centrado na mesma área que a imagem, sem fundo extra. */
.ih-card__icon{font-size:54px;line-height:1;opacity:.78;
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ih-card:hover .ih-card__icon{transform:translateY(-3px) scale(1.04)}

/* === Card system PREP para Wave 2.5 compositions (ready, not active) ===
 * Quando dropares as 6 compositions, o template ganha a classe
 * .ih-card__media--composition no <span class="ih-card__media">.
 * Composition mode: imagem preenche 100% do media area (ela já traz
 * bg/atmosfera/sombra própria); border-radius integrado ao card;
 * sem CSS drop-shadow (a composition tem a sua); media area mais alta
 * (200px) para a composição respirar; hover sobe só a imagem com
 * scale subtil. Card padding (28px) é a safe zone que impede a
 * imagem de tocar bordas. */
.ih-card__media--composition{height:200px;
  border-radius:20px;overflow:hidden;
  background:transparent}
.ih-card__media--composition img{
  max-width:100%;max-height:100%;width:100%;height:100%;
  object-fit:cover;display:block;
  filter:none;
  border-radius:0;
  transition:transform .4s cubic-bezier(.4,0,.2,1)}
.ih-card:hover .ih-card__media--composition img{
  transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){
  .ih-card__media--composition img{transition:none}
  .ih-card:hover .ih-card__media--composition img{transform:none}
}

.ih-card__name{font-size:var(--ih-type-lg);font-weight:600;
  letter-spacing:var(--ih-tracking-tight);margin:0;color:var(--ih-ink)}
.ih-card__sub{font-size:var(--ih-type-sm);color:var(--ih-ink-soft);
  margin:0;line-height:var(--ih-leading-normal)}

/* Brand card (lista de marcas, layout horizontal — preserva) */
.ih-card--brand{flex-direction:row;align-items:center;
  justify-content:space-between;padding:22px 24px}
.ih-card--brand .ih-card__media{display:none}

/* Selected state (subtil, sem flood color) */
.ih-card[aria-current="true"],.ih-card.is-selected{
  border-color:var(--ih-accent-edge);
  box-shadow:var(--ih-shadow-card-hover-ambient),var(--ih-shadow-card-hover-key)}

/* Trust */
/* Why INFOHAS · Wave 2.5 parallel · editorial trust section.
 * Oversized statement, hairline-separated points (rows mobile, columns
 * desktop), zero boxes, zero ícones. Apple/Nothing-style quiet luxury. */
.ih-trust{max-width:920px;margin:0 auto;text-align:left;
  padding:0 var(--ih-space)}
.ih-trust__eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ih-ink-soft);
  margin:0 0 28px}
.ih-trust__statement{font-size:clamp(28px,4.6vw,44px);
  font-weight:500;line-height:1.18;letter-spacing:-.02em;
  margin:0 0 56px;color:var(--ih-ink);max-width:760px}
.ih-trust__points{display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-trust__point{padding:24px 0;
  border-bottom:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent);
  display:flex;flex-direction:column;gap:6px}
.ih-trust__point h3{font-size:18px;font-weight:600;margin:0;
  letter-spacing:-.01em;color:var(--ih-ink)}
.ih-trust__point p{font-size:14.5px;color:var(--ih-ink-soft);
  line-height:var(--ih-leading-body);margin:0;max-width:42ch}
@media (min-width:760px){
  .ih-trust__points{grid-template-columns:repeat(3,1fr);
    gap:48px;border:0}
  .ih-trust__point{padding:0;border:0;
    border-left:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent);
    padding-left:32px}
  .ih-trust__point:first-child{border-left:0;padding-left:0}
}

/* Flow */
.ih-flow__steps{display:flex;flex-wrap:wrap;gap:10px;list-style:none;
  justify-content:center;margin-bottom:28px}
.ih-flow__steps li{font-size:13px;color:var(--ih-ink-soft);
  border:1px solid var(--ih-line);border-radius:980px;padding:8px 14px}
.ih-flow__steps b{color:var(--ih-accent);margin-right:6px}
.ih-flow__panel{max-width:620px;margin:0 auto;text-align:center;
  background:var(--ih-bg-alt);border-radius:var(--ih-radius);padding:36px}
.ih-flow__panel p{margin-bottom:12px}

/* Footer · Wave 2.7B + 3.5 — atmospheric continuity + infrastructure feel.
 * Wave 3.5: bg ganha plano mais profundo (color-mix ink 5% sobre bg-alt)
 * para "page closure intentional". Border-top reintroduzido como hairline
 * 6% ink (era 0 em Wave 2.7B). Mantemos os 96px de mask-fade no topo
 * para continuidade atmospheric — o utilizador ve fade suave do conteudo
 * e depois "aterragem" numa plataforma ligeiramente mais escura. */
/* ============================================================
 * Wave FOOTER 3.1 — final editorial polish (art-direction pass over
 * FOOTER 3.0; structure/content/links unchanged). A white breathing
 * band above the hairline, a whisper-subtle background, quieter type
 * and symmetric columns so the footer reads as a calm continuation of
 * the page — the separation is felt, not consciously noticed.
 * ============================================================ */
.ih-footer{
  /* (2) whisper-subtle tint — imperceptible as a colour, felt as depth */
  background:color-mix(in srgb, var(--ih-ink) 2.5%, var(--ih-bg));
  /* (1) white breathing band between content and the hairline */
  margin-top:clamp(24px,3vw,40px);
  border-top:1px solid var(--ih-line);
  padding:clamp(44px,5.5vw,64px) var(--ih-space) 0}
.ih-footer__inner{max-width:var(--ih-maxw);margin:0 auto;display:grid;
  grid-template-columns:1fr;gap:clamp(28px,3.5vw,40px);align-items:start}

/* Brand column — integrates with the others, not a dominant heading */
.ih-footer__brand{font-weight:600;letter-spacing:.01em;font-size:12.5px;
  color:var(--ih-ink);margin:0}
.ih-footer__tag{color:var(--ih-ink-soft);font-size:12.5px;margin:8px 0 0;
  line-height:1.55;max-width:26ch}
.ih-footer__social{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:14px}
.ih-footer__social a{font-size:12.5px;color:var(--ih-ink-soft);text-decoration:none;
  transition:color .15s var(--ih-ease)}
.ih-footer__social a:hover{color:var(--ih-ink)}

/* Columns — discreet headings (no column dominates), even rhythm */
.ih-footer__h{font-weight:600;font-size:11px;margin:0 0 14px;
  color:color-mix(in srgb, var(--ih-ink) 72%, transparent);
  letter-spacing:.08em;text-transform:uppercase}
.ih-footer__col a{display:block;color:var(--ih-ink-soft);font-size:12.5px;
  padding:5px 0;text-decoration:none;line-height:1.5;
  transition:color .15s var(--ih-ease)}
.ih-footer__col a:hover{color:var(--ih-ink)}
.ih-footer__addr{font-style:normal;color:var(--ih-ink-soft);font-size:12.5px;
  line-height:1.65;margin:14px 0 0}

/* Legal bar — a quiet, natural continuation (fainter hairline + text) */
.ih-footer__legal{max-width:var(--ih-maxw);margin:clamp(32px,3.5vw,44px) auto 0;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent);
  padding:16px 0 24px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  font-size:11.5px;color:color-mix(in srgb, var(--ih-ink) 55%, transparent);line-height:1.5}
.ih-footer__legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ih-footer__legal a{color:color-mix(in srgb, var(--ih-ink) 55%, transparent);text-decoration:none;
  transition:color .15s var(--ih-ease)}
.ih-footer__legal a:hover{color:var(--ih-ink)}
.ih-footer__copy{margin-left:auto;text-align:right}
.ih-foot-dot{opacity:.3;font-size:10px}

/* Responsive: 1 -> 2 -> 3 -> 5 symmetric columns (equal widths) */
@media (min-width:480px){ .ih-footer__inner{grid-template-columns:repeat(2,1fr)} }
@media (min-width:680px){ .ih-footer__inner{grid-template-columns:repeat(3,1fr)} }
@media (min-width:940px){
  .ih-footer__inner{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(28px,2.6vw,44px)} }
@media (max-width:599px){
  .ih-footer__legal{flex-direction:column;align-items:flex-start;gap:12px}
  .ih-footer__copy{margin-left:0;text-align:left}
}

/* ===== Page Hero · Atmospheric Background System (Wave 2.7 · ADR-0027)
 * Hero compacto reutilizável para páginas internas (NÃO homepage).
 * Estrutura fixa, atmosfera varia por data-universe. Graceful fallback:
 * gradient subtil se atmospheric asset não existe; auto-ativa quando
 * dropares /static/v2/img/atmospheres/<universe>.webp.
 * ============================================================ */
/* Wave 3.3 + 3.3-cal: hero compact + calibrated for CTA safety.
 * Top gap reduzido mais 25% (was 1.25-2rem, agora 1-1.5rem) — content
 * comeca mais perto do navbar. Bottom AUMENTADO (was 1.25-2rem, agora
 * 1.75-2.75rem) para proteger area de CTAs do overlap da seccao seguinte. */
.ih-page-hero{position:relative;isolation:isolate;overflow:hidden;
  padding:calc(var(--ih-nav-h) + clamp(.75rem,1.2vw,1.25rem)) 0 clamp(1.25rem,2vw,2rem);
  background:
    radial-gradient(ellipse 70% 55% at 28% 38%,
      color-mix(in srgb, var(--ih-ink) 3.5%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      var(--ih-bg-ivory) 0%,
      var(--ih-bg-alt) 100%)}
/* Quando há asset atmospheric, o data-universe define a URL.
 * O webp pinta sobre o radial+gradient (cascade preservado). */
.ih-page-hero[data-universe]{
  background-image:var(--ih-atmos-img),
    radial-gradient(ellipse 70% 55% at 28% 38%,
      color-mix(in srgb, var(--ih-ink) 3.5%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg, var(--ih-bg-ivory) 0%, var(--ih-bg-alt) 100%);
  background-size:cover, auto, auto;
  background-position:center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat}
/* Universes — definir URL como CSS custom property.
   Se ficheiro 404, o gradient fallback assume (background fallback list). */
.ih-page-hero[data-universe="neutral"]{--ih-atmos-img:url('/static/v2/img/atmospheres/neutral.webp')}
.ih-page-hero[data-universe="apple"]{--ih-atmos-img:url('/static/v2/img/atmospheres/apple.webp')}
.ih-page-hero[data-universe="samsung"]{--ih-atmos-img:url('/static/v2/img/atmospheres/samsung.webp')}
.ih-page-hero[data-universe="laptops"]{--ih-atmos-img:url('/static/v2/img/atmospheres/laptops.webp')}
.ih-page-hero[data-universe="tablets"]{--ih-atmos-img:url('/static/v2/img/atmospheres/tablets.webp')}
.ih-page-hero[data-universe="wearables"]{--ih-atmos-img:url('/static/v2/img/atmospheres/wearables.webp')}
.ih-page-hero[data-universe="consoles"]{--ih-atmos-img:url('/static/v2/img/atmospheres/consoles.webp')}
.ih-page-hero[data-universe="scooters"]{--ih-atmos-img:url('/static/v2/img/atmospheres/scooters.webp')}
/* ============================================================
 * Wave 4.6 — Repair + Diagnostic editorial universes (CSS-only).
 * Sem webp atmospheric: pintura puramente editorial, evita asset
 * management e mantém peso de transferência mínimo. Cada universe
 * tem identidade própria mas mantém família visual com os demais.
 *  - repair    → atelier ivory + warm tool-tip top-right (precisão)
 *  - diagnostic→ studio ivory + cool dawn-blue top-left  (cuidado)
 * Ambos respeitam reduced-motion, dark-mode adapta via tokens.
 * ============================================================ */
.ih-page-hero[data-universe="repair"]{
  --ih-atmos-img:none;
  background:
    radial-gradient(ellipse 60% 50% at 88% 12%,
      color-mix(in srgb, #c89a6a 13%, transparent) 0%,
      transparent 62%),
    radial-gradient(ellipse 80% 60% at 28% 38%,
      color-mix(in srgb, var(--ih-ink) 3.5%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ih-bg-ivory) 96%, #f2eadf) 0%,
      var(--ih-bg-alt) 100%)}
.ih-page-hero[data-universe="diagnostic"]{
  --ih-atmos-img:none;
  background:
    radial-gradient(ellipse 60% 50% at 12% 12%,
      color-mix(in srgb, #6b8aa8 10%, transparent) 0%,
      transparent 62%),
    radial-gradient(ellipse 80% 60% at 72% 38%,
      color-mix(in srgb, var(--ih-ink) 3%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ih-bg-ivory) 96%, #e8eff4) 0%,
      var(--ih-bg-alt) 100%)}
/* Subtle grain overlay (consistente com hero home) */
.ih-page-hero__grain{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--ih-grain);background-size:160px 160px;
  opacity:.10;mix-blend-mode:overlay}
/* Wave 3.4A: subtle left-side legibility scrim para internal heroes
 * com atmosphere webp. So aplica quando data-universe esta definido
 * (e nao e neutral) — atmospheres dark (consoles, scooters) ganham
 * "wash" subtil onde o texto vive. Opacity max .55 (vs hero homepage .88)
 * — internal e mais discreto. */
.ih-page-hero[data-universe]:not([data-universe="neutral"]):not([data-universe="repair"]):not([data-universe="diagnostic"])::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(95deg,
    color-mix(in srgb, var(--ih-bg-ivory) 55%, transparent) 0%,
    color-mix(in srgb, var(--ih-bg-ivory) 35%, transparent) 30%,
    transparent 60%)}
/* Wave 3.3: bottom dissolve mais longo (160px was 80px) — atmosfera
 * feather mais suavemente. Combinado com .ih-page-hero+section margin
 * negativo, atmosfera CONTINUA visualmente atras do primeiro conteudo. */
.ih-page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:112px;pointer-events:none;z-index:1;
  background:linear-gradient(0deg, var(--ih-bg) 0%, transparent 100%)}
.ih-page-hero__inner{width:100%;max-width:var(--ih-maxw);margin:0 auto;
  padding:0 var(--ih-space);position:relative;z-index:3}
.ih-page-hero__inner>*{max-width:640px}
.ih-page-hero__eyebrow{font-size:11px;color:var(--ih-ink-soft);
  text-transform:uppercase;letter-spacing:.16em;
  font-weight:500;margin:0 0 18px}
.ih-page-hero__title{font-size:clamp(30px,4.4vw,44px);
  font-weight:600;line-height:1.1;letter-spacing:-.025em;
  margin:0;color:var(--ih-ink)}
/* Wave 13C (M4) — Customer account pages get a calmer hero scale.
   Repair status words like "Completed" / "Diagnosing" felt
   over-dominant at 52px next to the content panel; clamp lowers
   ceiling to 40px on desktop, preserving mobile minimum. */
.ih-page-hero[data-context="account"] .ih-page-hero__title{
  font-size:clamp(28px,4vw,40px);
  letter-spacing:-.022em}
.ih-page-hero__sub{margin:14px 0 0;max-width:520px;
  font-size:clamp(15px,1.4vw,17px);
  color:var(--ih-ink-soft);line-height:1.6}
.ih-page-hero__cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){
  .ih-page-hero{padding-top:calc(var(--ih-nav-h) + .75rem)}
}

/* ===== Wave 3.3 Atmospheric Continuity · calibrated =====
 * Primeira seccao apos page-hero faz overlap subtil + fade do transparente
 * para body. Wave 3.3-cal: overlap reduzido (was 32-56px → agora 16-32px)
 * para nao engolir CTAs em paginas como /repair/ e /diagnostic/. Section
 * padding-top aumentado (was 20-32px → agora 32-48px) para garantir que
 * conteudo nunca sobe demasiado dentro do hero.
 * z-index:2 garante content acima do dissolve ::after do hero (z:1). */
.ih-page-hero + .ih-section,
.ih-page-hero + .ih-section--alt{
  margin-top:clamp(-32px,-3vw,-16px);
  padding-top:clamp(32px,3.5vw,48px);
  position:relative;z-index:2;
  background:linear-gradient(180deg,
    transparent 0%,
    var(--ih-bg) 88px),
    var(--ih-bg)}
.ih-page-hero + .ih-section--alt{
  background:linear-gradient(180deg,
    transparent 0%,
    var(--ih-bg-alt) 88px),
    var(--ih-bg-alt)}
/* O section--alt::before original (72px fade do bg ao alt) fica
 * redundante quando vem direto do hero — esconder via adjacent. */
.ih-page-hero + .ih-section--alt::before{display:none}

/* Sticky CTA (mobile) */
.ih-sticky{position:fixed;left:0;right:0;bottom:0;z-index:48;display:flex;gap:10px;
  padding:12px var(--ih-space) calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--ih-blur);
  backdrop-filter:var(--ih-blur);border-top:1px solid var(--ih-line)}
@media (prefers-color-scheme:dark){.ih-sticky{background:rgba(0,0,0,.7)}}
.ih-sticky__btn{flex:1;text-align:center;padding:13px;border-radius:980px;
  font-size:14px;font-weight:600}
.ih-sticky__btn--wa{background:transparent;border:1px solid var(--ih-line)}
.ih-sticky__btn--book{background:var(--ih-accent);color:#fff}

/* ===== Desktop ===== */
@media (min-width:820px){
  .ih-nav__menu{display:flex}
  .ih-nav__actions .ih-btn{display:inline-flex}
  .ih-nav__burger{display:none}
  .ih-cards{grid-template-columns:repeat(3,1fr);gap:28px}
  .ih-cards--brands{grid-template-columns:repeat(4,1fr)}
  .ih-trust{grid-template-columns:repeat(3,1fr)}
  .ih-sticky{display:none}
  .ih-drawer{display:none}
}

/* ===== Formulários de booking (A.3) ===== */
.ih-form{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.ih-form__row{display:flex;flex-direction:column;gap:7px}
.ih-form__row label{font-size:13px;font-weight:600;color:var(--ih-ink)}
.ih-input,.ih-form input,.ih-form select,.ih-form textarea{
  width:100%;font:inherit;color:var(--ih-ink);background:var(--ih-bg);
  border:1px solid var(--ih-line);border-radius:var(--ih-radius-sm);
  padding:13px 14px;transition:border-color .2s var(--ih-ease)}
.ih-form input:focus,.ih-form select:focus,.ih-form textarea:focus{
  outline:none;border-color:var(--ih-accent)}
.ih-form textarea{resize:vertical;min-height:88px}
.ih-form button[type=submit]{align-self:flex-start;margin-top:6px}
.ih-form__err{background:rgba(255,59,48,.10);border:1px solid rgba(255,59,48,.35);
  color:#c1271b;border-radius:var(--ih-radius-sm);padding:12px 14px;font-size:14px}
.ih-form__fielderr{color:#c1271b;font-size:12.5px}
@media (min-width:820px){.ih-form{max-width:600px}}

/* ===== A.3.1 Fonfix-style: grid / produto / cart ===== */
.ih-step{font-size:12px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ih-accent);font-weight:700;margin-bottom:8px}
/* Wave 3.3: tile soft integration (diagnostic, brand grids).
 * Mesmo principio dos cards — surfaces premium integradas, nao isoladas. */
.ih-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ih-tile{
  background:color-mix(in srgb, var(--ih-bg) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 2%, transparent);
  border-radius:var(--ih-radius);
  padding:20px;display:flex;flex-direction:column;align-items:center;
  gap:10px;text-align:center;
  box-shadow:var(--ih-shadow-card-ambient);
  -webkit-backdrop-filter:saturate(110%);backdrop-filter:saturate(110%);
  transition:transform .4s cubic-bezier(.4,0,.2,1),
             box-shadow .4s cubic-bezier(.4,0,.2,1),
             background-color .4s cubic-bezier(.4,0,.2,1)}
.ih-tile:hover{transform:translateY(-2px);
  background:color-mix(in srgb, var(--ih-bg) 98%, transparent);
  box-shadow:var(--ih-shadow-card-hover-ambient)}
.ih-tile__media{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.ih-tile__media img{max-height:100%;max-width:100%;object-fit:contain}
.ih-tile__name{font-weight:600;font-size:var(--ih-type-md)}
.ih-tile__price{font-size:13px;color:var(--ih-ink-soft)}

.ih-product{display:grid;grid-template-columns:1fr;gap:28px;
  max-width:var(--ih-maxw);margin:0 auto}
.ih-product__media{background:var(--ih-bg-alt);border-radius:var(--ih-radius);
  padding:32px;display:flex;align-items:center;justify-content:center}
.ih-product__media img{max-width:100%;max-height:360px;object-fit:contain}
.ih-product__info h1{margin:4px 0 18px}
.ih-repair{display:flex;flex-direction:column;gap:14px;max-width:460px}
.ih-repair label{font-size:13px;font-weight:600}
.ih-repair__meta{display:flex;flex-direction:column;gap:4px}
.ih-repair__price{font-size:30px;font-weight:700;letter-spacing:-.02em}
.ih-repair__sub{font-size:14px;color:var(--ih-ink-soft)}
.ih-product__wa{display:inline-block;margin-top:18px;font-size:14px;
  color:var(--ih-accent)}

.ih-cart{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:2px}
.ih-cart__row{display:flex;align-items:center;gap:14px;padding:16px 4px;
  border-bottom:1px solid var(--ih-line)}
.ih-cart__info{flex:1;display:flex;flex-direction:column;gap:3px}
.ih-cart__info span{font-size:12.5px}
.ih-cart__price{font-weight:600}
.ih-cart__rm{background:none;border:0;color:var(--ih-ink-soft);
  cursor:pointer;font-size:16px;padding:6px}
.ih-cart__total{display:flex;justify-content:space-between;align-items:center;
  padding:18px 4px;font-size:18px}
.ih-checkout{display:grid;grid-template-columns:1fr;gap:28px;
  max-width:760px;margin:0 auto}
.ih-checkout__summary{background:var(--ih-bg-alt);
  border-radius:var(--ih-radius);padding:24px}

@media (min-width:820px){
  .ih-grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .ih-grid--models{grid-template-columns:repeat(4,1fr)}
  .ih-product{grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  .ih-product__media{position:sticky;top:calc(var(--ih-nav-h) + 24px)}
  .ih-checkout{grid-template-columns:1fr 1.1fr}
  .ih-checkout__summary{order:2}
}

/* ===== A.4 premium/trust/a11y ===== */
.ih-skip{position:absolute;left:-9999px;top:0;background:var(--ih-accent);
  color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.ih-skip:focus{left:0}
:focus-visible{outline:2px solid var(--ih-accent);outline-offset:2px;border-radius:4px}
/* Trust pills · Wave 2.5 parallel · quiet luxury (sem emoji, sem ícones,
 * sem fundo opaco; pure typography, ultra-thin hairline border,
 * uppercase tracking premium, soft hover lift). */
.ih-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  max-width:var(--ih-maxw);margin:0 auto 40px;padding:0 var(--ih-space)}
.ih-badge{font-size:11px;color:var(--ih-ink-soft);background:transparent;
  border:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent);
  border-radius:980px;padding:7px 14px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:500;
  line-height:1.4;
  transition:color .2s var(--ih-ease),
             border-color .2s var(--ih-ease),
             transform .2s cubic-bezier(.4,0,.2,1)}
.ih-badge:hover{color:var(--ih-ink);
  border-color:color-mix(in srgb, var(--ih-ink) 18%, transparent);
  transform:translateY(-1px)}
.ih-assure{display:grid;grid-template-columns:1fr;gap:12px;max-width:var(--ih-maxw);
  margin:40px auto 0}
.ih-assure__i{background:var(--ih-bg-alt);border-radius:var(--ih-radius);
  padding:20px 22px;display:flex;flex-direction:column;gap:3px;
  transition:transform .25s var(--ih-ease)}
.ih-assure__i:hover{transform:translateY(-2px)}
.ih-assure__i b{font-size:15px}
.ih-assure__i span{font-size:13px;color:var(--ih-ink-soft)}
.ih-prose{max-width:680px;margin:0 auto;font-size:17px;line-height:1.7;
  color:var(--ih-ink)}
.ih-prose ul{margin:14px 0 14px 22px}
.ih-prose p{margin-bottom:14px}
@media (min-width:820px){.ih-assure{grid-template-columns:repeat(3,1fr)}}

/* ===== Diagnostic wizard · editorial progression (Wave 2.7B + 3.3)
 * Wave 3.3: progress mais compacto + integrado. Margin-bottom 40→20px,
 * gap 14→10px. Flow sentido como "emocionalmente guiado", nao wizard. */
.ih-progress{max-width:var(--ih-maxw);margin:0 auto 20px;padding:0 var(--ih-space);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.ih-progress__caption{margin:0;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ih-ink-soft);
  display:inline-flex;gap:10px;align-items:baseline;
  font-feature-settings:"tnum","case"}
.ih-progress__count{color:var(--ih-ink);font-weight:600}
.ih-progress__sep{opacity:.4;font-size:10px}
.ih-progress__label{font-weight:500;letter-spacing:.10em}
.ih-progress__track{display:flex;gap:10px;list-style:none;margin:0;padding:0;
  width:min(240px,52vw);justify-content:space-between}
.ih-progress__dash{flex:1;height:1.5px;border-radius:2px;
  background:color-mix(in srgb, var(--ih-ink) 12%, transparent);
  transition:background-color .4s var(--ih-ease)}
.ih-progress__dash.is-done{background:color-mix(in srgb, var(--ih-ink) 60%, transparent)}
.ih-progress__dash.is-on{background:var(--ih-ink)}
.ih-diag-context{text-align:center;font-size:13px;letter-spacing:.02em;
  color:var(--ih-ink-soft);margin:-4px auto 18px;max-width:var(--ih-maxw)}

/* .ih-tile como <button> (reset) + variantes diagnostic */
button.ih-tile{font:inherit;cursor:pointer;border:0;width:100%;color:inherit;
  text-align:center}
.ih-diag-grid{border:0}
.ih-tile--issue{aspect-ratio:auto;justify-content:center;min-height:120px}
.ih-tile__ic{font-size:30px;line-height:1}

/* ===== Wave 4 — Repair Flow Engine ===========================
 * 2-column layout (content + persistent summary panel).
 * Mobile: stacks vertically (summary becomes bottom anchor).
 * Surfaces: device/brand/model/problem/path/store/schedule/
 * shipping/confirm/done. */
.ih-flow-layout{display:grid;grid-template-columns:1fr;gap:32px;
  max-width:var(--ih-maxw);margin:0 auto;padding:0 var(--ih-space)}
@media (min-width:980px){
  .ih-flow-layout{grid-template-columns:minmax(0,1fr) 320px;
    gap:48px;align-items:start}
}
/* Repair price cards + path cards */
.ih-cards--paths{grid-template-columns:1fr;gap:16px;margin-top:8px}
@media (min-width:760px){.ih-cards--paths{grid-template-columns:1fr 1fr}}
.ih-card--repair, .ih-card--path{cursor:pointer;text-align:left;
  border:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent);
  background:color-mix(in srgb, var(--ih-bg) 96%, transparent)}
.ih-card--path .ih-card__icon{display:inline-flex;align-items:center;
  justify-content:center;width:40px;height:40px;opacity:.78;
  margin-bottom:6px}
.ih-card--path .ih-card__icon img{width:100%;height:100%}

/* Persistent summary panel · Wave 4.7C polish:
 * softer surface, larger radius, hairline border, sticky top adjusted
 * for the calmed-out hero. Note hides automatically on confirm (no need). */
.ih-flow-summary{position:relative;padding:26px 24px;
  border-radius:20px;
  background:var(--ih-bg);
  border:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent);
  box-shadow:0 12px 30px -20px color-mix(in srgb, var(--ih-ink) 22%, transparent)}
@media (min-width:980px){.ih-flow-summary{position:sticky;top:96px}}
.ih-flow-summary__eyebrow{font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ih-ink-soft);margin:0 0 16px;
  font-weight:600}
.ih-flow-summary__list{margin:0;padding:0;display:flex;
  flex-direction:column}
.ih-flow-summary__row{display:flex;flex-direction:column;
  padding:12px 0;border-bottom:1px solid
  color-mix(in srgb, var(--ih-ink) 5%, transparent)}
.ih-flow-summary__row:first-of-type{padding-top:0}
.ih-flow-summary__row:last-of-type{border:0;padding-bottom:0}
.ih-flow-summary__row dt{font-size:10.5px;color:var(--ih-ink-soft);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:0}
.ih-flow-summary__row dd{font-size:15px;color:var(--ih-ink);
  margin:6px 0 0;line-height:1.4;font-weight:500;letter-spacing:-.005em;
  font-feature-settings:"tnum" 1}
.ih-flow-summary__note{font-size:12px;color:var(--ih-ink-soft);
  line-height:1.5;margin:20px 0 0;
  padding-top:16px;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent)}

/* Store selection card (Flow A) + leaflet map */
.ih-store-list{display:flex;flex-direction:column;gap:24px}
/* Wave 4.6 — premium frame: softer border, larger radius, subtle
 * shadow so the card lifts from the editorial background. */
.ih-store-card{display:grid;grid-template-columns:1fr;gap:0;
  border-radius:20px;overflow:hidden;
  border:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent);
  background:var(--ih-bg);
  box-shadow:0 12px 36px -24px color-mix(in srgb, var(--ih-ink) 30%, transparent)}
@media (min-width:760px){.ih-store-card{grid-template-columns:1.1fr 1fr}}
.ih-store-card__body{padding:28px 26px}
.ih-store-card__name{margin:0 0 6px;font-size:var(--ih-type-lg);
  font-weight:600}
.ih-store-card__addr{margin:0 0 16px;color:var(--ih-ink-soft);
  font-size:14px;line-height:1.5}
.ih-store-card__hours{display:grid;grid-template-columns:auto 1fr;
  gap:6px 16px;margin:0 0 18px}
.ih-store-card__hours dt{font-size:12px;color:var(--ih-ink-soft);
  letter-spacing:.04em}
.ih-store-card__hours dd{font-size:13px;color:var(--ih-ink);margin:0}
.ih-store-card__map{min-height:280px;background:var(--ih-bg-alt);
  border-left:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
@media (max-width:759px){.ih-store-card__map{border-left:0;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}}

/* Schedule (date+time picker) */
.ih-schedule{display:flex;flex-direction:column;gap:24px;
  max-width:560px}
.ih-schedule__field{border:0;padding:0;margin:0}
.ih-schedule__legend{font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ih-ink-soft);
  font-weight:600;margin-bottom:12px}
/* Wave 4.7B/C — base rule kept for legacy cascade; the scrolling
 * container is now .ih-schedule__days-wrap. The inner __days is a
 * non-shrinking flex row sized to its content. */
.ih-schedule__days{display:flex;gap:8px;
  padding-bottom:4px}
/* Wave 4.6 + 4.7C — date pill: stacked weekday + day number + month.
 * 4.7C: bigger pills (88x84, was 78x~58), more breathing room, Today/
 * Tomorrow get the same visual weight as weekday badges (no special
 * colour — premium quietness). Active state lifts via shadow, not
 * colour saturation. */
.ih-schedule__day{flex:0 0 88px;cursor:pointer;text-align:center;
  border:1px solid color-mix(in srgb, var(--ih-ink) 10%, transparent);
  border-radius:16px;padding:14px 8px 12px;
  background:var(--ih-bg);
  display:flex;flex-direction:column;gap:2px;
  line-height:1.1;font-weight:500;
  transition:border-color .22s var(--ih-ease),
             background-color .22s var(--ih-ease),
             box-shadow .22s var(--ih-ease),
             transform .22s var(--ih-ease)}
.ih-schedule__day:hover{
  border-color:color-mix(in srgb, var(--ih-ink) 22%, transparent);
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent);
  transform:translateY(-1px)}
.ih-schedule__day input{position:absolute;opacity:0;pointer-events:none}
.ih-schedule__day:has(input:checked){
  background:var(--ih-ink);color:var(--ih-bg);
  border-color:var(--ih-ink);
  box-shadow:0 8px 22px -10px color-mix(in srgb, var(--ih-ink) 55%, transparent);
  transform:translateY(-1px)}
.ih-schedule__day-wd{font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ih-ink-soft);font-weight:600;
  margin-bottom:4px;line-height:1}
.ih-schedule__day:has(input:checked) .ih-schedule__day-wd{
  color:color-mix(in srgb, var(--ih-bg) 75%, transparent)}
.ih-schedule__day-dt{font-size:22px;font-weight:600;letter-spacing:-.02em;
  line-height:1;font-feature-settings:"tnum" 1}
.ih-schedule__day-mo{font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ih-ink-soft);font-weight:500;
  margin-top:4px;line-height:1}
.ih-schedule__day:has(input:checked) .ih-schedule__day-mo{
  color:color-mix(in srgb, var(--ih-bg) 70%, transparent)}
.ih-schedule__day--soon .ih-schedule__day-wd{
  color:var(--ih-ink);font-weight:700}
.ih-schedule__day--soon:has(input:checked) .ih-schedule__day-wd{
  color:var(--ih-bg)}
@media (max-width:760px){
  .ih-schedule__day{flex:0 0 76px;padding:12px 6px 10px}
  .ih-schedule__day-dt{font-size:20px}
}
.ih-schedule__slots{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;
  min-height:48px}
.ih-schedule__slot{cursor:pointer;text-align:center;font-size:13px;
  font-weight:500;padding:11px 6px;
  border:1px solid color-mix(in srgb, var(--ih-ink) 10%, transparent);
  border-radius:12px;background:var(--ih-bg);
  transition:all .22s var(--ih-ease)}
.ih-schedule__slot:hover{
  border-color:color-mix(in srgb, var(--ih-ink) 22%, transparent);
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent)}
.ih-schedule__slot input{position:absolute;opacity:0;pointer-events:none}
.ih-schedule__slot:has(input:checked){
  background:var(--ih-ink);color:var(--ih-bg);border-color:var(--ih-ink);
  box-shadow:0 6px 18px -8px color-mix(in srgb, var(--ih-ink) 50%, transparent)}
.ih-schedule__cta{margin-top:8px}

/* Send-in instructions panel */
.ih-flow-shipnote{padding:24px;border-radius:var(--ih-radius);
  background:color-mix(in srgb, var(--ih-bg-alt) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 4%, transparent);
  margin-top:24px}
.ih-flow-shipnote h3{margin:0 0 14px;font-size:var(--ih-type-md);
  font-weight:600}
.ih-flow-shipnote__list{margin:0 0 14px 18px;padding:0;
  font-size:14px;color:var(--ih-ink);line-height:1.6}
.ih-flow-shipnote__list li{margin-bottom:6px}

/* ===== Wave 4.1 — Premium Customer Dashboard ====================
 * Account layout: head + groups (active / history) + repair-card grid.
 * Premium status pills (tone-driven: neutral / active / success / warn / muted).
 * Timeline upgraded for per-pedido detail view.
 * Photo grid + premium drop-upload field.
 * Repair detail: 2-column main+side with persistent summary. */
.ih-account{max-width:var(--ih-maxw);margin:0 auto;padding:0 var(--ih-space)}
.ih-account__head{display:flex;flex-wrap:wrap;gap:18px;
  align-items:flex-end;justify-content:space-between;
  padding-bottom:24px;margin-bottom:28px;
  border-bottom:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-account__email{font-size:var(--ih-type-md);font-weight:500;
  color:var(--ih-ink);margin:0}
.ih-account__actions{display:flex;gap:10px;flex-wrap:wrap}
.ih-account__group{margin-bottom:48px}
.ih-account__group-title{font-size:var(--ih-type-lg);font-weight:600;
  margin:0 0 18px;color:var(--ih-ink);letter-spacing:-.012em}
.ih-account__empty{padding:60px 24px;text-align:center;
  background:color-mix(in srgb, var(--ih-bg-alt) 60%, transparent);
  border-radius:var(--ih-radius);border:1px solid
  color-mix(in srgb, var(--ih-ink) 4%, transparent)}
.ih-account__empty h2{font-size:var(--ih-type-lg);font-weight:500;
  margin:0 0 8px}
.ih-account__empty p{margin:0 0 22px;color:var(--ih-ink-soft)}

/* Status pill — tone driven */
.ih-status-pill{display:inline-flex;align-items:center;
  padding:5px 12px;border-radius:980px;font-size:11px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.4;border:1px solid transparent}
.ih-status-pill--neutral{background:color-mix(in srgb, var(--ih-ink) 5%, transparent);
  color:var(--ih-ink);border-color:color-mix(in srgb, var(--ih-ink) 8%, transparent)}
.ih-status-pill--active{background:color-mix(in srgb, var(--ih-accent) 8%, transparent);
  color:var(--ih-accent);border-color:color-mix(in srgb, var(--ih-accent) 18%, transparent)}
.ih-status-pill--success{background:color-mix(in srgb, var(--ih-st-ok) 8%, transparent);
  color:var(--ih-st-ok);border-color:color-mix(in srgb, var(--ih-st-ok) 18%, transparent)}
.ih-status-pill--warn{background:color-mix(in srgb, var(--ih-st-warn) 8%, transparent);
  color:var(--ih-st-warn);border-color:color-mix(in srgb, var(--ih-st-warn) 18%, transparent)}
.ih-status-pill--muted{background:transparent;color:var(--ih-ink-soft);
  border-color:color-mix(in srgb, var(--ih-ink) 8%, transparent)}

/* Repair card grid (active repairs) */
.ih-repair-cards{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:760px){.ih-repair-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.ih-repair-cards{grid-template-columns:repeat(3,1fr)}}
.ih-repair-card{position:relative;display:flex;flex-direction:column;
  border-radius:var(--ih-radius-hero,28px);
  border:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent);
  background:color-mix(in srgb, var(--ih-bg) 95%, transparent);
  box-shadow:var(--ih-shadow-card-ambient);
  transition:transform .35s var(--ih-ease), box-shadow .35s var(--ih-ease)}
.ih-repair-card:hover{transform:translateY(-2px);
  box-shadow:var(--ih-shadow-card-hover-ambient)}
.ih-repair-card__link{display:block;padding:24px 24px 18px;
  text-decoration:none;color:inherit;flex:1}
.ih-repair-card__head{display:flex;align-items:center;
  justify-content:space-between;margin-bottom:18px}
.ih-repair-card__ref{font-size:11px;color:var(--ih-ink-soft);
  letter-spacing:.08em;font-family:ui-monospace,monospace}
.ih-repair-card__title{font-size:var(--ih-type-lg);font-weight:600;
  margin:0 0 4px;letter-spacing:-.012em}
.ih-repair-card__sub{font-size:14px;color:var(--ih-ink-soft);
  margin:0 0 16px}
.ih-repair-card__meta{display:grid;grid-template-columns:1fr 1fr;
  gap:14px 16px;margin:0}
.ih-repair-card__meta>div dt{font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--ih-ink-soft);font-weight:500;margin:0}
.ih-repair-card__meta>div dd{font-size:13px;color:var(--ih-ink);
  margin:3px 0 0}
.ih-repair-card__foot{padding:14px 24px;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent)}
.ih-repair-card__wa{font-size:13px;color:var(--ih-ink);
  text-decoration:none;font-weight:500;
  transition:color .25s var(--ih-ease)}
.ih-repair-card__wa:hover{color:var(--ih-accent)}

/* History — minimal rows */
.ih-account__group--history .ih-repair-history{list-style:none;
  margin:0;padding:0;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent)}
.ih-repair-history__row{display:grid;grid-template-columns:auto 1fr auto;
  gap:18px;align-items:center;padding:14px 0;
  border-bottom:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent);
  text-decoration:none;color:inherit;
  transition:background .25s var(--ih-ease)}
.ih-repair-history__row:hover{background:color-mix(in srgb, var(--ih-ink) 2%, transparent)}
.ih-repair-history__title{font-size:14px;font-weight:500;color:var(--ih-ink)}
.ih-repair-history__date{font-size:12px;color:var(--ih-ink-soft);
  letter-spacing:.04em}
@media (max-width:600px){
  .ih-repair-history__row{grid-template-columns:1fr;gap:6px}
  .ih-repair-history__date{justify-self:start}
}

/* Repair detail — 2-col + premium timeline */
.ih-repair-detail{display:grid;grid-template-columns:1fr;
  gap:32px;align-items:start}
@media (min-width:980px){
  .ih-repair-detail{grid-template-columns:minmax(0,1fr) 340px;gap:48px}
}
.ih-repair-detail__main{min-width:0}
.ih-repair-detail__side{display:flex;flex-direction:column;gap:14px}
@media (min-width:980px){.ih-repair-detail__side{position:sticky;top:80px}}
.ih-repair-detail__summary{padding:24px 22px;
  border-radius:var(--ih-radius);
  background:color-mix(in srgb, var(--ih-bg-alt) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 4%, transparent)}

/* Premium timeline */
.ih-timeline--premium{list-style:none;margin:0;padding:0;
  border-left:2px solid color-mix(in srgb, var(--ih-ink) 8%, transparent);
  padding-left:0}
.ih-timeline--premium .ih-timeline__i{position:relative;
  padding:0 0 22px 26px;display:flex;flex-direction:column;gap:3px}
.ih-timeline--premium .ih-timeline__dot{position:absolute;
  left:-7px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--ih-bg-alt);
  border:2px solid color-mix(in srgb, var(--ih-ink) 15%, transparent)}
.ih-timeline--premium .ih-timeline__i--done .ih-timeline__dot{
  background:var(--ih-ink);border-color:var(--ih-ink)}
.ih-timeline--premium .ih-timeline__i--current .ih-timeline__dot{
  background:var(--ih-accent);border-color:var(--ih-accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ih-accent) 18%, transparent)}
.ih-timeline--premium .ih-timeline__i--pending .ih-timeline__b{
  color:var(--ih-ink-soft);font-weight:400}
.ih-timeline--premium .ih-timeline__i--current .ih-timeline__b{
  font-weight:600;color:var(--ih-ink)}
.ih-timeline--premium .ih-timeline__b{font-size:15px;color:var(--ih-ink)}
.ih-timeline--premium .ih-timeline__d{font-size:12px;
  color:var(--ih-ink-soft);letter-spacing:.04em}
.ih-timeline--premium .ih-timeline__i[data-tone="warn"] .ih-timeline__dot{
  background:var(--ih-st-warn);border-color:var(--ih-st-warn)}

/* Photo grid */
.ih-photo-grid{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;margin:0 0 24px}
.ih-photo-grid__item{margin:0;border-radius:var(--ih-radius-sm);
  overflow:hidden;background:var(--ih-bg-alt);
  border:1px solid color-mix(in srgb, var(--ih-ink) 4%, transparent)}
.ih-photo-grid__item a{display:block;line-height:0}
.ih-photo-grid__item img{width:100%;height:140px;object-fit:cover;
  display:block;transition:transform .35s var(--ih-ease)}
.ih-photo-grid__item:hover img{transform:scale(1.025)}
.ih-photo-grid__item figcaption{padding:8px 10px;
  display:flex;flex-direction:column;gap:2px;font-size:12px}
.ih-photo-grid__cat{font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ih-ink-soft);font-weight:500}
.ih-photo-grid__cap{font-size:12px;color:var(--ih-ink);line-height:1.3}

/* Upload panel — premium drop zone */
.ih-upload{display:flex;flex-direction:column;gap:16px;
  padding:24px;border-radius:var(--ih-radius);
  background:color-mix(in srgb, var(--ih-bg-alt) 50%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 4%, transparent);
  max-width:520px}
.ih-upload__drop{display:flex;flex-direction:column;
  align-items:center;gap:8px;
  padding:32px 24px;border-radius:var(--ih-radius);
  border:1.5px dashed color-mix(in srgb, var(--ih-ink) 15%, transparent);
  cursor:pointer;background:var(--ih-bg);
  transition:border-color .25s var(--ih-ease),
             background .25s var(--ih-ease)}
.ih-upload__drop:hover{border-color:color-mix(in srgb, var(--ih-ink) 30%, transparent);
  background:color-mix(in srgb, var(--ih-bg) 96%, transparent)}
.ih-upload__icon{opacity:.6;margin-bottom:4px}
.ih-upload__title{font-size:15px;font-weight:600;color:var(--ih-ink)}
.ih-upload__hint{font-size:12px;color:var(--ih-ink-soft);
  text-align:center;line-height:1.4}
.ih-upload__field{display:flex;flex-direction:column;gap:5px}
.ih-upload__field label{font-size:12px;font-weight:500;color:var(--ih-ink-soft);
  text-transform:uppercase;letter-spacing:.06em}

/* Button helpers */
.ih-btn--block{display:block;width:100%;text-align:center}
.ih-form__ok{padding:12px 16px;border-radius:var(--ih-radius-sm);
  background:color-mix(in srgb, var(--ih-st-ok) 8%, transparent);
  color:var(--ih-st-ok);font-size:14px;margin-bottom:20px;
  border:1px solid color-mix(in srgb, var(--ih-st-ok) 18%, transparent)}

/* ===== B.2.3 account: timeline + invoice ===== */
.ih-timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--ih-line)}
.ih-timeline__i{position:relative;padding:0 0 22px 22px}
.ih-timeline__dot{position:absolute;left:-7px;top:3px;width:12px;height:12px;
  border-radius:50%;background:var(--ih-accent)}
.ih-timeline__b{display:block;font-weight:600;font-size:15px}
.ih-timeline__d{display:block;font-size:12.5px;color:var(--ih-ink-soft)}
.ih-invoice{max-width:680px;margin:0 auto;background:var(--ih-bg);
  border:1px solid var(--ih-line);border-radius:var(--ih-radius);padding:32px}
.ih-invoice__head{display:flex;justify-content:space-between;
  border-bottom:1px solid var(--ih-line);padding-bottom:18px;margin-bottom:18px}
.ih-invoice__t{width:100%;border-collapse:collapse;margin:18px 0}
.ih-invoice__t th,.ih-invoice__t td{text-align:left;padding:10px 8px;
  border-bottom:1px solid var(--ih-line);font-size:14px}
.ih-invoice__t td:last-child,.ih-invoice__t th:last-child{text-align:right}

/* ============================================================
 * Wave 4.6 — Sign-in chooser (confirm step).
 * Apple-style: user picks a method first, email expands below.
 * Google / Apple display the option but stay disabled — coming soon.
 * Layout vertical pills, large hit-target, hairline border, hover
 * adds ink-tinted background. Active (Email) gets a subtle accent.
 * ============================================================ */
.ih-signin{max-width:560px;margin:0 auto;width:100%}
.ih-signin__eyebrow{font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ih-ink-soft);
  font-weight:500;margin:0 0 14px}
.ih-signin__chooser{display:flex;flex-direction:column;gap:10px}
.ih-signin__btn{position:relative;display:flex;align-items:center;
  gap:14px;padding:14px 18px;border:1px solid var(--ih-line);
  border-radius:14px;background:var(--ih-bg);color:var(--ih-ink);
  font-family:inherit;font-size:15px;font-weight:500;
  text-decoration:none;cursor:pointer;text-align:left;
  transition:background .22s var(--ih-ease),
             border-color .22s var(--ih-ease),
             transform .22s var(--ih-ease)}
.ih-signin__btn:not([disabled]):hover{
  background:color-mix(in srgb, var(--ih-ink) 4%, transparent);
  border-color:color-mix(in srgb, var(--ih-ink) 18%, transparent);
  transform:translateY(-1px)}
.ih-signin__btn[disabled]{cursor:not-allowed;opacity:.55}
.ih-signin__btn--active{
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent);
  border-color:color-mix(in srgb, var(--ih-ink) 22%, transparent)}
.ih-signin__glyph{flex-shrink:0;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:600;
  border-radius:50%;background:color-mix(in srgb, var(--ih-ink) 6%, transparent);
  color:var(--ih-ink)}
.ih-signin__label{flex:1;min-width:0;line-height:1.3}
.ih-signin__hint{font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ih-ink-soft);
  font-weight:500;padding:4px 8px;
  background:color-mix(in srgb, var(--ih-ink) 5%, transparent);
  border-radius:6px}
.ih-signin__btn--active .ih-signin__hint{
  color:color-mix(in srgb, var(--ih-ink) 80%, transparent)}
.ih-signin__divider{position:relative;text-align:center;
  margin:26px 0 22px;color:var(--ih-ink-soft);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}
.ih-signin__divider::before, .ih-signin__divider::after{
  content:"";position:absolute;top:50%;width:38%;height:1px;
  background:var(--ih-line)}
.ih-signin__divider::before{left:0}
.ih-signin__divider::after{right:0}
.ih-signin__divider span{background:var(--ih-bg);padding:0 10px;
  position:relative}
.ih-signin__note{margin:8px 0 14px;font-size:13px;
  color:var(--ih-ink-soft);line-height:var(--ih-leading-body)}
.ih-signin__note strong{color:var(--ih-ink);font-weight:600}

/* ============================================================
 * WAVE 5.3 — login gate + authenticated confirm.
 * Polishes signin sent-state + confirm identity card.
 * ============================================================ */
.ih-signin__sent{padding:20px 22px;border-radius:16px;
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent);
  margin-bottom:22px}
.ih-signin__sent p{margin:0 0 8px}
.ih-signin__sent p:last-child{margin:0}
.ih-signin__resend{background:none;border:0;color:var(--ih-ink);
  font:inherit;cursor:pointer;padding:0;text-decoration:underline;
  text-underline-offset:3px}
.ih-signin__resend:hover{color:var(--ih-ink)}
.ih-signin__legal{margin:24px 0 0;font-size:11.5px;letter-spacing:.02em;
  color:var(--ih-ink-soft);line-height:1.6;text-align:left}
.ih-signin__legal a{color:var(--ih-ink-soft);text-decoration:underline;
  text-underline-offset:2px}
.ih-signin__legal a:hover{color:var(--ih-ink)}

/* Confirm — authenticated identity card */
.ih-confirm{display:flex;flex-direction:column;gap:18px;max-width:520px}
.ih-confirm__id{padding:22px 24px;border-radius:18px;
  background:var(--ih-bg);
  border:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent);
  box-shadow:0 10px 26px -18px color-mix(in srgb, var(--ih-ink) 22%, transparent)}
.ih-confirm__id-eyebrow{margin:0 0 6px;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ih-ink-soft);font-weight:600}
.ih-confirm__id-name{margin:0;font-size:17px;font-weight:600;
  letter-spacing:-.012em;color:var(--ih-ink)}
.ih-confirm__id-email{margin:4px 0 0;font-size:13.5px;
  color:var(--ih-ink-soft)}
.ih-confirm__id-switch{margin:14px 0 0;font-size:12.5px}
.ih-confirm__id-switch a{color:var(--ih-ink-soft);
  text-decoration:none}
.ih-confirm__id-switch a:hover{color:var(--ih-ink);text-decoration:underline}
/* duplicate .ih-btn--block removed in Wave 5.8B polish; canonical at line ~1150 */

/* ============================================================
 * Wave 4.6 — Confirmation (done) premium layout.
 * Single-column elegant stack: reference + grouped panels +
 * primary CTA. No "trust grid" reuse — this is a personal
 * confirmation, not a marketing surface.
 * ============================================================ */
.ih-done{max-width:680px;margin:0 auto;width:100%}
.ih-done__ref{font-size:13px;letter-spacing:.04em;color:var(--ih-ink-soft);
  margin:0 0 22px}
.ih-done__ref strong{color:var(--ih-ink);font-weight:600;
  font-feature-settings:"tnum" 1}
.ih-done__panel{padding:22px 24px;border-radius:16px;
  background:var(--ih-bg);
  border:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent);
  box-shadow:0 8px 22px -16px color-mix(in srgb, var(--ih-ink) 22%, transparent);
  margin-bottom:14px}
.ih-done__row-label{margin:0 0 6px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ih-ink-soft);font-weight:600}
.ih-done__row-value{margin:0;font-size:15px;color:var(--ih-ink);
  line-height:var(--ih-leading-body)}
.ih-done__row-value--estimate{margin-top:10px;font-size:13.5px;
  color:var(--ih-ink-soft);font-feature-settings:"tnum" 1}
.ih-done__items{margin:8px 0 0;padding:0 0 0 18px;
  list-style:disc;font-size:14px;color:var(--ih-ink);line-height:1.6}
.ih-done__items li{margin:0;font-feature-settings:"tnum" 1}
.ih-done__cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.ih-done__back{margin:18px 0 0;font-size:13px}
.ih-done__back a{color:var(--ih-ink-soft);text-decoration:none}
.ih-done__back a:hover{color:var(--ih-ink)}

/* ============================================================
 * Wave 4.7 — Book/Diagnostic UX Polish
 * Items: bigger device tiles · brand logo-first cards · model
 * img contain · repair multi-select · path hero cards · ship
 * timeline · schedule layout fix · diag coherence.
 * ============================================================ */

/* ── W4.7 + W4.7B + W4.7C hardening: schedule layout containment ──
 * Wave 4.7C — paged date picker. The frame holds Prev/Next + the
 * days strip. JS hides days outside the visible window, so there is
 * NO horizontal scroll — pagination replaces scroll. The wrap still
 * has overflow:hidden as a hard safety net (defence-in-depth: if JS
 * fails, days still cannot bleed into the summary panel).
 * Containment chain: flow-layout child min-width:0 → schedule
 * max-width:100% → days-frame box-sizing:border-box → wrap
 * overflow:hidden → days inline-grid sized to visible items. */
.ih-flow-layout > *{min-width:0;max-width:100%;box-sizing:border-box}
.ih-schedule, .ih-schedule__field, .ih-schedule__days-frame,
.ih-schedule__days-wrap, .ih-schedule__days{
  min-width:0;max-width:100%;box-sizing:border-box}
.ih-schedule__days-frame{display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;
  gap:8px;width:100%;min-width:0;
  contain:layout}
.ih-schedule__days-wrap{overflow:hidden;
  min-width:0;
  padding:2px 0 6px}
.ih-schedule__days{display:flex;flex-wrap:nowrap;gap:8px;
  min-width:0;
  padding:2px 0;justify-content:flex-start}
.ih-schedule__day{flex:0 0 auto}
.ih-schedule__slots{max-width:100%;min-width:0}
.ih-schedule__nav{appearance:none;border:1px solid
  color-mix(in srgb, var(--ih-ink) 10%, transparent);
  background:var(--ih-bg);
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ih-ink);cursor:pointer;
  transition:background .2s var(--ih-ease),
             border-color .2s var(--ih-ease),
             transform .2s var(--ih-ease)}
.ih-schedule__nav:hover{
  background:color-mix(in srgb, var(--ih-ink) 5%, transparent);
  border-color:color-mix(in srgb, var(--ih-ink) 22%, transparent);
  transform:translateY(-1px)}
.ih-schedule__nav[hidden]{display:none}
.ih-schedule__pager-caption{font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ih-ink-soft);
  font-weight:600;margin:10px 0 0;text-align:right;
  font-feature-settings:"tnum" 1;min-height:14px}

/* ── W4.7B P1.5: device picker centered when no summary ──── */
.ih-flow-layout--no-summary{display:block;
  max-width:780px;margin:0 auto}
@media (min-width:980px){
  .ih-flow-layout--no-summary{display:block;
    grid-template-columns:none}
}

/* ── W4.7B P1.5: device picker centered when no summary ──── */
.ih-flow-layout--no-summary{display:block;
  max-width:780px;margin:0 auto}
@media (min-width:980px){
  .ih-flow-layout--no-summary{display:block;
    grid-template-columns:none}
}

/* ── Item 1: bigger device tiles (~+35%) ───────────────────── */
.ih-grid--devices{grid-template-columns:repeat(2,1fr);gap:18px}
@media (min-width:760px){
  .ih-grid--devices{grid-template-columns:repeat(3,1fr);gap:24px;
    max-width:780px;margin-left:auto;margin-right:auto}
}
.ih-grid--devices .ih-tile{padding:30px 22px 24px;gap:18px;
  border-radius:20px}  /* DS 1.0: match base .ih-tile (was 22, now uniform) */
.ih-grid--devices .ih-tile__media{aspect-ratio:1/1;max-width:140px;
  margin:0 auto;overflow:hidden}
.ih-grid--devices .ih-tile__media img{width:100%;height:100%;
  object-fit:contain;transform:scale(1.18);transform-origin:center;
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ih-grid--devices .ih-tile:hover .ih-tile__media img{
  transform:scale(1.22) translateY(-2px)}
.ih-grid--devices .ih-tile__name{font-size:17px;letter-spacing:-.012em}

/* ── Item 2: brand logo-first cards (typographic monogram) ──
 * Premium typographic wordmark — uppercase brand name as primary,
 * micro-label "category" secondary. Monochrome, European, no
 * copyrighted logo replicas. If a real SVG logo exists in
 * /static/v2/img/brands/<slug>.svg the template can use it via
 * .ih-brand-card__logo > img (CSS supports both). */
.ih-grid--brands{display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px;max-width:820px;margin:0 auto}
@media (min-width:760px){
  .ih-grid--brands{grid-template-columns:repeat(3,1fr);gap:18px}
}
@media (min-width:980px){
  .ih-grid--brands{grid-template-columns:repeat(4,1fr)}
}
.ih-brand-card{background:var(--ih-bg);
  border:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent);
  border-radius:20px;padding:28px 18px 26px;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;text-align:center;cursor:pointer;font:inherit;
  color:var(--ih-ink);width:100%;
  box-shadow:0 8px 22px -18px color-mix(in srgb, var(--ih-ink) 28%, transparent);
  transition:transform .28s var(--ih-ease),
             border-color .28s var(--ih-ease),
             box-shadow .28s var(--ih-ease)}
.ih-brand-card:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--ih-ink) 18%, transparent);
  box-shadow:0 14px 32px -18px color-mix(in srgb, var(--ih-ink) 35%, transparent)}
.ih-brand-card__logo{width:100%;min-height:78px;
  display:flex;align-items:center;justify-content:center;
  padding:4px 0}
.ih-brand-card__wordmark{font-family:inherit;font-weight:600;
  font-size:clamp(18px,3vw,22px);letter-spacing:.02em;
  line-height:1.05;color:var(--ih-ink);
  text-transform:uppercase;
  font-feature-settings:"ss01" 1}
.ih-brand-card__logo img{max-width:100%;max-height:66px;
  object-fit:contain;display:block}
.ih-brand-card__label{font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ih-ink-soft);
  font-weight:500;margin:0}

/* ── Item 3: model selector — img always contains, taller box ── */
.ih-grid--models .ih-tile__media{aspect-ratio:1/1;max-height:160px;
  width:100%;display:flex;align-items:center;justify-content:center}
.ih-grid--models .ih-tile__media img{
  max-width:88%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.08))
        drop-shadow(0 2px 4px rgba(0,0,0,.04));
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ih-grid--models .ih-tile:hover .ih-tile__media img{
  transform:translateY(-3px) scale(1.03)}
.ih-grid--models .ih-tile__name{font-size:15.5px;line-height:1.25}
@media (min-width:760px){
  .ih-grid--models{grid-template-columns:repeat(3,1fr);gap:22px}
}
@media (min-width:980px){
  .ih-grid--models{grid-template-columns:repeat(4,1fr)}
}

/* ── Item 4: repair multi-select cards ────────────────────── */
.ih-repair-form{display:flex;flex-direction:column;gap:18px}
.ih-repair-list{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:600px){
  .ih-repair-list{grid-template-columns:repeat(2,1fr)}
}
.ih-repair-pick{position:relative;display:grid;
  grid-template-columns:auto 1fr auto;
  column-gap:18px;row-gap:4px;align-items:center;
  padding:18px 22px;cursor:pointer;
  background:var(--ih-bg);
  border:1px solid color-mix(in srgb, var(--ih-ink) 10%, transparent);
  border-radius:18px;
  box-shadow:0 8px 22px -18px color-mix(in srgb, var(--ih-ink) 26%, transparent);
  transition:border-color .25s var(--ih-ease),
             background .25s var(--ih-ease),
             transform .25s var(--ih-ease)}
.ih-repair-pick:hover{
  border-color:color-mix(in srgb, var(--ih-ink) 22%, transparent);
  transform:translateY(-1px)}
.ih-repair-pick input{position:absolute;opacity:0;pointer-events:none}
.ih-repair-pick__icon{grid-row:1 / span 2;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  color:color-mix(in srgb, var(--ih-ink) 78%, transparent);
  background:color-mix(in srgb, var(--ih-ink) 4%, transparent);
  border-radius:12px;
  transition:color .22s var(--ih-ease),
             background .22s var(--ih-ease)}
.ih-repair-pick__icon img, .ih-repair-pick__icon svg{
  width:30px;height:30px;display:block}
.ih-repair-pick__name{font-size:15.5px;font-weight:600;
  letter-spacing:-.012em;line-height:1.2;color:var(--ih-ink)}
.ih-repair-pick__meta{font-size:13px;color:var(--ih-ink-soft);
  font-feature-settings:"tnum" 1}
/* W4.7B P0.4 — premium checkmark badge (no radio circle when unchecked).
 * Default: empty space (no border). Selected: ink-filled circle with
 * inline SVG checkmark. Whole label is the click target. */
.ih-repair-pick__mark{width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ih-bg);background:transparent;
  opacity:0;transform:scale(.7);
  transition:opacity .22s var(--ih-ease),
             transform .22s var(--ih-ease),
             background-color .22s var(--ih-ease)}
.ih-repair-pick__mark svg{width:14px;height:11px;display:block}
.ih-repair-pick:has(input:checked){
  border-color:var(--ih-ink);
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent);
  box-shadow:0 14px 32px -18px color-mix(in srgb, var(--ih-ink) 40%, transparent)}
.ih-repair-pick:has(input:checked) .ih-repair-pick__icon{
  color:var(--ih-bg);
  background:var(--ih-ink)}
.ih-repair-pick:has(input:checked) .ih-repair-pick__mark{
  background:var(--ih-ink);opacity:1;transform:scale(1)}
.ih-repair-pick:focus-within{outline:2px solid var(--ih-ink);outline-offset:3px}
.ih-repair-foot{display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:18px 20px;border-radius:16px;
  background:color-mix(in srgb, var(--ih-bg-alt) 75%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-repair-foot__count{font-size:13px;color:var(--ih-ink-soft);
  font-weight:500;letter-spacing:.01em}
.ih-repair-foot__count strong{color:var(--ih-ink);font-weight:600;
  font-feature-settings:"tnum" 1}
.ih-repair-foot__total{font-size:15px;color:var(--ih-ink);
  font-weight:600;font-feature-settings:"tnum" 1}

/* ── W4.7 + W4.7B: path hero decision cards
 * W4.7B refactor: radio-input + label pattern. Whole card is the
 * click target; select-then-Continue (consistent with multi-select).
 * Premium checkmark badge appears top-right when selected; whole
 * card gains ink border + subtle tint. */
.ih-paths{display:grid;grid-template-columns:1fr;gap:18px;
  margin-top:8px}
@media (min-width:760px){
  .ih-paths{grid-template-columns:1fr 1fr;gap:24px}
}
.ih-path-card{position:relative;background:var(--ih-bg);
  border:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent);
  border-radius:24px;padding:28px 28px 30px;
  display:flex;flex-direction:column;gap:16px;
  text-align:left;cursor:pointer;color:var(--ih-ink);
  box-shadow:0 10px 28px -20px color-mix(in srgb, var(--ih-ink) 30%, transparent);
  transition:transform .3s var(--ih-ease),
             border-color .3s var(--ih-ease),
             background .3s var(--ih-ease),
             box-shadow .3s var(--ih-ease)}
.ih-path-card:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--ih-ink) 22%, transparent);
  box-shadow:0 20px 42px -22px color-mix(in srgb, var(--ih-ink) 40%, transparent)}
.ih-path-card input{position:absolute;opacity:0;pointer-events:none}
.ih-path-card__illu{width:100%;aspect-ratio:5/4;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--ih-bg-ivory) 90%, #f1ecdf) 0%,
    color-mix(in srgb, var(--ih-bg-alt) 92%, transparent) 100%);
  border-radius:18px;padding:18px;
  transition:background .3s var(--ih-ease)}
.ih-path-card__illu img, .ih-path-card__illu svg{
  width:78%;max-width:220px;height:auto;
  color:color-mix(in srgb, var(--ih-ink) 70%, transparent);
  transition:transform .3s var(--ih-ease),
             color .3s var(--ih-ease)}
.ih-path-card:hover .ih-path-card__illu img,
.ih-path-card:hover .ih-path-card__illu svg{transform:scale(1.03)}
.ih-path-card__body{display:flex;flex-direction:column;gap:8px;
  flex:1}
.ih-path-card__name{font-size:21px;font-weight:600;
  letter-spacing:-.018em;line-height:1.15;color:var(--ih-ink);
  margin:0}
.ih-path-card__sub{font-size:14.5px;line-height:var(--ih-leading-body);
  color:var(--ih-ink-soft);margin:0}
.ih-path-card__meta{display:flex;gap:14px;flex-wrap:wrap;
  margin-top:auto;padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent);
  font-size:12.5px;color:var(--ih-ink-soft);letter-spacing:.02em}
.ih-path-card__meta b{color:var(--ih-ink);font-weight:600}
.ih-path-card__mark{position:absolute;top:18px;right:18px;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ih-bg);background:var(--ih-ink);
  opacity:0;transform:scale(.6);
  transition:opacity .25s var(--ih-ease),
             transform .25s var(--ih-ease)}
.ih-path-card__mark svg{width:16px;height:12px;display:block}
.ih-path-card:has(input:checked){
  border-color:var(--ih-ink);
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent);
  box-shadow:0 22px 44px -22px color-mix(in srgb, var(--ih-ink) 50%, transparent)}
.ih-path-card:has(input:checked) .ih-path-card__illu{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--ih-bg-ivory) 80%, #ece5d6) 0%,
    color-mix(in srgb, var(--ih-bg-alt) 86%, transparent) 100%)}
.ih-path-card:has(input:checked) .ih-path-card__illu img,
.ih-path-card:has(input:checked) .ih-path-card__illu svg{
  color:var(--ih-ink)}
.ih-path-card:has(input:checked) .ih-path-card__mark{opacity:1;transform:scale(1)}
.ih-path-card:focus-within{outline:2px solid var(--ih-ink);outline-offset:3px}
.ih-path-foot{margin-top:24px;display:flex;justify-content:flex-end}
.ih-path-foot .ih-btn{min-width:160px}
@media (max-width:559px){.ih-path-foot{justify-content:stretch}
  .ih-path-foot .ih-btn{flex:1}}

/* ── Item 6: shipping timeline panel ──────────────────────── */
.ih-ship-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:880px){
  .ih-ship-grid{grid-template-columns:minmax(0,1fr) 320px;gap:42px}
}
.ih-ship-steps{padding:26px 24px;border-radius:18px;
  background:color-mix(in srgb, var(--ih-bg-alt) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-ship-steps__eyebrow{margin:0 0 6px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ih-ink-soft);font-weight:600}
.ih-ship-steps__h{margin:0 0 18px;font-size:18px;
  font-weight:600;letter-spacing:-.012em}
.ih-ship-steps__list{counter-reset:shipstep;
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:0;
  position:relative}
.ih-ship-steps__item{counter-increment:shipstep;
  position:relative;padding:0 0 18px 42px;min-height:38px}
.ih-ship-steps__item:last-child{padding-bottom:0}
.ih-ship-steps__item::before{content:counter(shipstep);
  position:absolute;left:0;top:0;width:28px;height:28px;
  border-radius:50%;background:var(--ih-ink);color:var(--ih-bg);
  font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  font-feature-settings:"tnum" 1}
.ih-ship-steps__item:not(:last-child)::after{content:"";
  position:absolute;left:13px;top:30px;bottom:-2px;width:2px;
  background:color-mix(in srgb, var(--ih-ink) 12%, transparent);
  border-radius:2px}
.ih-ship-steps__name{display:block;font-size:14.5px;
  font-weight:600;color:var(--ih-ink);
  line-height:1.3;margin:4px 0 3px}
.ih-ship-steps__desc{display:block;font-size:13px;
  color:var(--ih-ink-soft);line-height:1.5;margin:0}
.ih-ship-note{font-size:12.5px;color:var(--ih-ink-soft);
  margin:18px 0 0;line-height:1.5;font-style:italic}

/* ============================================================
 * Wave 4.7C — Mobile audit fixes (≤ 760px viewports)
 * Covers iPhone (375), Samsung (360), tablet (768).
 * Targets all components added in Wave 4.6/4.7/4.7B that lacked
 * explicit narrow-viewport rules.
 * ============================================================ */
@media (max-width:760px){
  /* Brand cards — 2-col on phone, larger tap target */
  .ih-grid--brands{grid-template-columns:repeat(2,1fr);gap:12px}
  .ih-brand-card{padding:22px 14px 20px;gap:10px}
  .ih-brand-card__logo{min-height:62px}
  .ih-brand-card__logo img{max-height:56px}
  .ih-brand-card__wordmark{font-size:16px}
  /* Repair pick cards — stack icon above on phone for breathing room */
  .ih-repair-pick{padding:16px 18px;grid-template-columns:auto 1fr auto;
    column-gap:14px}
  .ih-repair-pick__icon{width:40px;height:40px}
  .ih-repair-pick__icon img{width:26px;height:26px}
  .ih-repair-pick__name{font-size:15px}
  .ih-repair-pick__meta{font-size:12.5px}
  /* Path cards — stack illustrations smaller; ensure full tap reach */
  .ih-path-card{padding:22px 22px 24px;border-radius:20px;gap:14px}
  .ih-path-card__illu{aspect-ratio:5/3;padding:14px}
  .ih-path-card__name{font-size:19px}
  .ih-path-card__sub{font-size:14px}
  .ih-path-card__meta{font-size:12px;gap:10px}
  .ih-path-card__mark{top:14px;right:14px;width:26px;height:26px}
  /* Repair footer — stack count/total/CTA cleanly */
  .ih-repair-foot{flex-direction:column;align-items:stretch;gap:12px;
    padding:16px 18px}
  .ih-repair-foot .ih-btn{width:100%}
  /* Signin chooser — taller buttons for thumb reach */
  .ih-signin__btn{padding:16px 18px;font-size:15px}
  .ih-signin__hint{padding:3px 7px;font-size:10.5px}
  /* Done panels — slightly tighter */
  .ih-done__panel{padding:20px 20px}
  .ih-done__cta{flex-direction:column;align-items:stretch}
  .ih-done__cta .ih-btn{width:100%}
  /* Ship grid — single column on phone */
  .ih-ship-grid{grid-template-columns:1fr;gap:24px}
  .ih-ship-steps{padding:22px 20px}
  /* Schedule — wrap visible, days are touch-scrollable */
  .ih-schedule__days-wrap{
    margin-left:calc(var(--ih-space) * -1);
    margin-right:calc(var(--ih-space) * -1);
    padding-left:var(--ih-space);
    padding-right:var(--ih-space)}
  /* Store map — keep map present but smaller */
  .ih-store-card__map{min-height:220px}
  .ih-store-card__body{padding:22px 22px}
  /* Page-hero — sub copy narrower for legibility on phone */
  .ih-page-hero__sub{max-width:100%}
  /* Diag tile spacing parity */
  .ih-diag-context{margin-bottom:12px}
}

/* ─── Tablet refinement (760-980px) ───────────────────────── */
@media (min-width:760px) and (max-width:979px){
  /* Brand cards — 3-col on tablet, NOT 4 (would be too narrow) */
  .ih-grid--brands{grid-template-columns:repeat(3,1fr)}
  /* Repair list still 2-col but tighter */
  .ih-repair-list{gap:10px}
  /* Schedule fits well; date wrap doesn't need negative margin */
}

/* ============================================================
 * WAVE 5.1 — Visual Cohesion Pass.
 * One language across all 8 booking steps + diagnostic.
 * CSS-only. Zero behavioural change.
 * ============================================================ */
/* Unified card vocabulary — brand/repair-pick/path/store/tile share
 * the same radius + border tone + ambient shadow + transition curve. */
.ih-brand-card, .ih-repair-pick, .ih-path-card,
.ih-store-card, .ih-tile{
  border-color:color-mix(in srgb, var(--ih-ink) 8%, transparent);
  background:var(--ih-bg);
  box-shadow:0 10px 26px -18px color-mix(in srgb, var(--ih-ink) 26%, transparent);
  transition:transform .28s var(--ih-ease),
             border-color .28s var(--ih-ease),
             background-color .28s var(--ih-ease),
             box-shadow .28s var(--ih-ease)}
.ih-tile{border-radius:20px}
.ih-brand-card{border-radius:20px}
.ih-repair-pick{border-radius:18px}
.ih-path-card{border-radius:22px}
.ih-store-card{border-radius:22px;
  box-shadow:0 14px 36px -20px color-mix(in srgb, var(--ih-ink) 30%, transparent)}
.ih-brand-card:hover, .ih-tile:hover{
  box-shadow:0 18px 38px -20px color-mix(in srgb, var(--ih-ink) 38%, transparent)}

/* Unified hero rhythm — same eyebrow/title/sub treatment across
 * all 8 flow steps + diag steps. */
.ih-page-hero__eyebrow{font-weight:600;letter-spacing:.14em;
  font-size:11px}
.ih-page-hero__title{letter-spacing:-.026em}
.ih-page-hero__sub{max-width:540px}

/* Flow context line — Apple Support inspired bread-context. */
.ih-diag-context{font-size:13px;letter-spacing:.02em;
  font-weight:500;color:var(--ih-ink-soft);
  margin:-2px auto 20px;text-align:center}

/* Flow layout column rhythm — 340 summary column for breathing
 * (was 320), larger gap to soften the divide. */
@media (min-width:980px){
  .ih-flow-layout{grid-template-columns:minmax(0,1fr) 340px;
    gap:56px;align-items:start}
}

/* Repair Universe — warmer atelier ivory.
 * Longer warm wash top-right + faint warm pickup bottom-left. */
.ih-page-hero[data-universe="repair"]{
  background:
    radial-gradient(ellipse 70% 60% at 88% 8%,
      color-mix(in srgb, #d4a373 16%, transparent) 0%,
      transparent 58%),
    radial-gradient(ellipse 50% 45% at 8% 92%,
      color-mix(in srgb, #c89a6a 9%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 90% 70% at 30% 40%,
      color-mix(in srgb, var(--ih-ink) 3.5%, transparent) 0%,
      transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ih-bg-ivory) 92%, #f0e4d2) 0%,
      var(--ih-bg-alt) 100%)}

/* Diagnostic Universe — cool graphite, distinctly cooler base.
 * "Technical / investigative" tone, no warmth. */
.ih-page-hero[data-universe="diagnostic"]{
  background:
    radial-gradient(ellipse 60% 50% at 8% 8%,
      color-mix(in srgb, #5b7794 13%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 45% 40% at 95% 92%,
      color-mix(in srgb, #4a6680 8%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 90% 70% at 70% 40%,
      color-mix(in srgb, var(--ih-ink) 4%, transparent) 0%,
      transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ih-bg-ivory) 88%, #dde5ec) 0%,
      color-mix(in srgb, var(--ih-bg-alt) 96%, #d5dde5) 100%)}

/* Store premium — generous body padding + larger map */
.ih-store-card__body{padding:30px 30px 28px}
.ih-store-card__name{font-size:21px;letter-spacing:-.018em;margin:0 0 8px}
.ih-store-card__addr{font-size:14px;line-height:1.6;margin:0 0 20px}
.ih-store-card__hours{gap:8px 20px;margin:0 0 22px}
.ih-store-card__hours dt{font-size:11px;letter-spacing:.10em;
  text-transform:uppercase;font-weight:600;color:var(--ih-ink-soft)}
.ih-store-card__hours dd{font-size:14px;color:var(--ih-ink);font-weight:500}
.ih-store-card__map{min-height:320px}
.ih-store-card .ih-btn--primary{min-width:180px}

/* Schedule premium time slots — match the date pills' visual weight */
.ih-schedule__slots{gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
.ih-schedule__slot{font-size:14px;font-weight:600;
  padding:13px 8px;border-radius:14px;
  font-feature-settings:"tnum" 1;
  border-color:color-mix(in srgb, var(--ih-ink) 10%, transparent)}
.ih-schedule__slot:hover{
  border-color:color-mix(in srgb, var(--ih-ink) 24%, transparent);
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent);
  transform:translateY(-1px)}
.ih-schedule__slot:has(input:checked){
  box-shadow:0 8px 22px -10px color-mix(in srgb, var(--ih-ink) 55%, transparent);
  transform:translateY(-1px)}
.ih-schedule__cta{margin-top:14px;padding-top:14px;padding-bottom:14px;
  font-size:15px;min-width:240px}
.ih-schedule{gap:28px}
.ih-schedule__legend{font-size:11px;letter-spacing:.14em;font-weight:600}

/* Confirm premium — Email pill becomes the primary affordance.
 * Google / Apple stay quiet "Soon" tertiary. */
.ih-signin{max-width:480px}
.ih-signin__chooser{gap:12px}
.ih-signin__btn{padding:18px 20px;border-radius:16px;
  font-size:15.5px;font-weight:600;letter-spacing:-.005em}
.ih-signin__btn--active{
  background:var(--ih-ink);color:var(--ih-bg);
  border-color:var(--ih-ink);
  box-shadow:0 12px 28px -14px color-mix(in srgb, var(--ih-ink) 55%, transparent)}
.ih-signin__btn--active:hover{
  background:color-mix(in srgb, var(--ih-ink) 92%, var(--ih-bg));
  transform:translateY(-1px)}
.ih-signin__btn--active .ih-signin__glyph,
.ih-signin__btn--active .ih-signin__hint{
  background:color-mix(in srgb, var(--ih-bg) 18%, transparent);
  color:var(--ih-bg)}
.ih-signin__glyph{width:34px;height:34px;font-size:18px}
.ih-signin__hint{font-size:10px;letter-spacing:.16em;padding:5px 9px}
.ih-signin__divider{margin:30px 0 24px;font-size:10.5px}

/* Repair-pick meta — wrap instead of crush */
.ih-repair-pick__meta{font-size:12.5px;line-height:1.4;
  white-space:normal;overflow-wrap:break-word}

/* Universal Back link */
.ih-note{margin-top:32px;font-size:13.5px}
.ih-note a{color:var(--ih-ink-soft);text-decoration:none;
  font-weight:500;transition:color .2s var(--ih-ease)}
.ih-note a:hover{color:var(--ih-ink)}

/* Step 1 fresh-state grid centering */
.ih-flow-layout--no-summary .ih-grid--devices{margin:0 auto}

/* ============================================================
 * WAVE 5.2A — Diagnostic identity (Discovery branch).
 * Visual differentiation from Book Repair while sharing the same
 * card family. No new templates — CSS overrides only.
 * ============================================================ */

/* Spacing parity — diagnostic .ih-section uses the SAME top padding
 * as flow .ih-section. The diag pages don't use .ih-flow-layout so
 * we need explicit equivalence here. */
.ih-section + .ih-section{margin-top:0}
.ih-page-hero + .ih-section .ih-progress{margin-top:8px}

/* Discovery progress — sub-label gets distinct typographic weight
 * so "DISCOVERY · DEVICE" reads as hierarchy not noise. */
.ih-progress--diagnostic .ih-progress__label{
  color:var(--ih-ink);font-weight:700;letter-spacing:.18em}
.ih-progress--diagnostic .ih-progress__sublabel{
  color:var(--ih-ink-soft);font-weight:500;letter-spacing:.10em}
.ih-progress__sublabel{font-size:inherit;font-variant:inherit;
  text-transform:uppercase}
/* Cooler dash tone on diagnostic — picks up the cool-graphite atmos */
.ih-progress--diagnostic .ih-progress__dash.is-on{
  background:color-mix(in srgb, var(--ih-ink) 88%, #5b7794 12%)}
.ih-progress--diagnostic .ih-progress__dash.is-done{
  background:color-mix(in srgb, var(--ih-ink) 55%, #5b7794 8%)}

/* Diagnostic tile cards — subtle cool tint on border + cooler hover.
 * Triggered by being inside .ih-page-hero[data-universe="diagnostic"]
 * sibling section. We use a sibling selector + section descendant. */
.ih-page-hero[data-universe="diagnostic"] + .ih-section .ih-tile,
.ih-page-hero[data-universe="diagnostic"] ~ .ih-section .ih-tile{
  border-color:color-mix(in srgb, #4a6680 10%, transparent);
  box-shadow:0 10px 26px -18px color-mix(in srgb, #4a6680 30%, transparent)}
.ih-page-hero[data-universe="diagnostic"] + .ih-section .ih-tile:hover,
.ih-page-hero[data-universe="diagnostic"] ~ .ih-section .ih-tile:hover{
  border-color:color-mix(in srgb, #4a6680 22%, transparent);
  box-shadow:0 18px 38px -20px color-mix(in srgb, #4a6680 38%, transparent)}

/* Diagnostic body bg — a touch cooler than the warm-ivory default
 * so cards float on a slightly cool field, matching the hero. */
.ih-page-hero[data-universe="diagnostic"] + .ih-section,
.ih-page-hero[data-universe="diagnostic"] + .ih-section--alt{
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--ih-bg) 90%, #eaeff5) 88px),
    color-mix(in srgb, var(--ih-bg) 92%, #e8edf3)}

/* Solution panel (recomendação) — cooler accent border to anchor */
.ih-page-hero[data-universe="diagnostic"] ~ .ih-section .ih-flow__panel{
  border:1px solid color-mix(in srgb, #4a6680 10%, transparent);
  background:var(--ih-bg);
  box-shadow:0 10px 26px -18px color-mix(in srgb, #4a6680 24%, transparent)}

/* ============================================================
 * WAVE 5.2B — diagnostic spacing parity with /book/.
 *
 * Root cause: views_v2.diag_* pass `crumbs` to context. base_apple.html
 * renders a <nav class="ih-crumb"> + JSON-LD <script> BEFORE the
 * page-hero. /book/ doesn't pass crumbs → no breadcrumb → hero starts
 * flush against navbar bottom. Diagnostic accumulated ~37.5px of
 * vertical offset from the breadcrumb nav + its margin.
 *
 * Fix (CSS-only, zero backend change): hide the visible breadcrumb
 * nav when it precedes a diagnostic page-hero. JSON-LD <script>
 * stays (already display:none by default), preserving SEO.
 *
 * Step labels (Discovery · Device, etc.) are already shown by
 * .ih-progress--diagnostic inside the hero — the breadcrumb's
 * "step 1/5" was redundant anyway.
 * ============================================================ */
.ih-crumb:has(~ .ih-page-hero[data-universe="diagnostic"]){display:none}

/* ============================================================
 * WAVE 5.2E — Universal product/device image containment.
 *
 * Rule: ANY image representing a real product/device/model/brand
 * MUST show 100% of the device — no top/bottom/notch/camera crop.
 *
 *   ✓ object-fit:contain (always)
 *   ✓ object-position:center (always)
 *   ✗ object-fit:cover (forbidden for device images)
 *   ✗ overflow:hidden on a frame that contains a hover-scaled product
 *   ✗ transform:scale(>1) on product imgs inside overflow:hidden parents
 *
 * Targets in order of specificity:
 *   - .ih-grid--models .ih-tile__media   (model selector cards: /book/model/, /diagnostic/model/)
 *   - .ih-brand-card__logo               (brand selector cards: /book/brand/)
 *   - .ih-product__media                 (catalog detail page: /d/<cat>/<brand>/<modelo>/)
 *   - .ih-card__media (non-composition)  (catalog grids: /d/<cat>/, /d/<cat>/<brand>/)
 *
 * SVG CATEGORY icons inside .ih-grid--devices keep their separate
 * scale rule (those are abstract icons with heavy internal padding,
 * NOT product photos — no crop risk).
 * ============================================================ */

/* ── W5.2F real fix — Model selector media area.
 * Root cause: smartphone source assets are press-kit COMPOSITIONS
 * (back-view + front-view side-by-side, content touching all 4
 * edges of the frame). Rendered in a 218×200 1:1 box with
 * object-fit:contain, each individual device shrinks to ~85×171
 * — reads as "cropped" even though it isn't.
 *
 * Fix per the brief ("card adapta-se à imagem"):
 *   - media area grows to 280px min-height (was max:200)
 *   - no max-height ceiling — card adapts upward to the image
 *   - more internal padding (16) so the composition breathes
 *   - 3-col desktop default (was 4) so each card has 30%+ more room
 *   - 4-col only on wide screens (≥1200)
 * Source assets untouched. */
.ih-grid--models .ih-tile__media{
  width:100%;aspect-ratio:1/1;
  min-height:280px;max-height:none;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
  padding:16px;box-sizing:border-box}
.ih-grid--models .ih-tile__media img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;object-position:center;
  display:block}
.ih-grid--models .ih-tile:hover .ih-tile__media img{
  transform:translateY(-3px) scale(1)}
@media (min-width:760px){
  .ih-grid--models{grid-template-columns:repeat(3,1fr);gap:24px}
}
@media (min-width:1200px){
  .ih-grid--models{grid-template-columns:repeat(4,1fr);gap:28px}
}
@media (max-width:760px){
  .ih-grid--models{grid-template-columns:repeat(2,1fr);gap:14px}
  .ih-grid--models .ih-tile__media{min-height:220px;padding:12px}
}

/* Brand selector — logo always entirely visible */
.ih-brand-card__logo{padding:6px 8px;min-height:72px;
  overflow:visible}
.ih-brand-card__logo img{
  max-width:100%;max-height:60px;
  width:auto;height:auto;
  object-fit:contain;object-position:center;
  display:block}

/* ── W5.2F — Catalog product detail (/d/<cat>/<brand>/<modelo>/).
 * Larger media frame so press-kit compositions read clearly. */
.ih-product__media{padding:40px;overflow:visible;
  min-height:480px;display:flex;align-items:center;justify-content:center}
.ih-product__media img{
  max-width:100%;max-height:500px;
  width:auto;height:auto;
  object-fit:contain;object-position:center;
  display:block;margin:0 auto}

/* ── W5.2F — Catalog grid cards (.ih-card__media — used in
 * /d/<cat>/ category pages and /d/<cat>/<brand>/ brand pages).
 * Same enlargement principle. */
.ih-card__media:not(.ih-card__media--composition){
  height:auto;min-height:220px;padding:14px;overflow:visible}
.ih-card__media:not(.ih-card__media--composition) img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;object-position:center;display:block}

/* Generic catalog card media (category & brand grids) — never crop */
.ih-card__media:not(.ih-card__media--composition){
  overflow:visible;padding:8px;box-sizing:border-box}
.ih-card__media:not(.ih-card__media--composition) img{
  max-width:90%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;object-position:center;
  display:block}
/* Hover lift only — never scale a product img */
.ih-card:hover .ih-card__media:not(.ih-card__media--composition) img{
  transform:translateY(-3px) scale(1)}

/* Universal safety helper: <span class="ih-image-frame"> */
.ih-image-frame{display:flex;align-items:center;justify-content:center;
  padding:12px;overflow:visible;width:100%;height:100%;
  box-sizing:border-box}
.ih-image-frame img, .ih-image-frame svg{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;object-position:center;display:block}

/* Mobile: keep padded frame, ensure aspect doesn't crush */
@media (max-width:760px){
  .ih-grid--models .ih-tile__media{max-height:180px;padding:10px}
  .ih-product__media{padding:24px}
  .ih-product__media img{max-height:340px}
  .ih-brand-card__logo{min-height:64px}
}

/* =====================================================================
 * WAVE 5.4 — Customer account premium layer
 * dashboard cards (Repair #100xxx + View details affordance),
 * order detail vertical timeline, summary panel, action row.
 * Style: Apple/Fonfix premium · ink + ink-soft · soft shadow · 18-20 radius
 * Reuses tokens: --ih-ink, --ih-ink-soft, --ih-bg, --ih-bg-alt, --ih-ease,
 *   --ih-line, --ih-accent, --ih-shadow-card-ambient, --ih-radius
 * =====================================================================*/

/* W5.4 — Repair card refinements (additive over existing .ih-repair-card) */
.ih-repair-section{margin-bottom:48px}
.ih-repair-list{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:760px){.ih-repair-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.ih-repair-list{grid-template-columns:repeat(2,1fr)}}

.ih-repair-card__body{padding:24px 24px 18px;display:flex;
  flex-direction:column;gap:12px;flex:1}
.ih-repair-card__num{display:block;font-size:18px;font-weight:600;
  letter-spacing:-.012em;color:var(--ih-ink);font-feature-settings:"tnum" 1}
.ih-repair-card__badge{align-self:flex-start}
.ih-repair-card .ih-repair-card__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:4px;flex-wrap:wrap}
.ih-repair-card__title{font-size:17px;font-weight:500;
  margin:0;letter-spacing:-.012em;color:var(--ih-ink);line-height:1.35}
.ih-repair-card__sub{font-size:13.5px;color:var(--ih-ink-soft);
  margin:0;line-height:1.45}
.ih-repair-card .ih-repair-card__meta{
  display:block;font-size:13px;color:var(--ih-ink-soft);
  margin:0;padding-top:4px;line-height:1.5;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent);
  padding-top:12px}
.ih-repair-card .ih-repair-card__foot{
  padding:14px 24px 18px;
  display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:space-between;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent)}

/* W5.4 — Order detail (header + timeline + panel + actions) */
.ih-order-detail{max-width:var(--ih-maxw);margin:0 auto}
.ih-order-header{display:flex;flex-wrap:wrap;gap:16px 24px;
  align-items:center;justify-content:space-between;
  padding:20px 22px;margin-bottom:28px;
  border-radius:18px;
  background:color-mix(in srgb, var(--ih-bg-alt) 55%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-order-header__id{display:flex;flex-direction:column;gap:4px;min-width:0}
.ih-order-header__num{margin:0;font-size:22px;font-weight:600;
  letter-spacing:-.014em;color:var(--ih-ink);
  font-feature-settings:"tnum" 1}
.ih-order-header__sub{margin:0;font-size:13.5px;color:var(--ih-ink-soft)}

/* Vertical timeline — Booked → Received → Diagnosing → Repairing → Ready → Collected */
.ih-order-timeline{list-style:none;margin:0;padding:0;
  position:relative}
.ih-order-timeline::before{content:"";position:absolute;
  left:9px;top:6px;bottom:6px;width:1.5px;
  background:color-mix(in srgb, var(--ih-ink) 8%, transparent);
  border-radius:2px}
.ih-order-step{position:relative;display:flex;align-items:flex-start;
  gap:18px;padding:8px 0 18px 0;min-height:22px}
.ih-order-step:last-child{padding-bottom:0}
.ih-order-step__dot{position:relative;z-index:1;flex:0 0 20px;
  width:20px;height:20px;border-radius:50%;
  background:var(--ih-bg);
  border:1.5px solid color-mix(in srgb, var(--ih-ink) 14%, transparent);
  transition:background .3s var(--ih-ease), border-color .3s var(--ih-ease),
    box-shadow .3s var(--ih-ease);
  margin-top:1px}
/* Wave 13C (M7) — improved per-state contrast + new "skipped" state.
   4 visually distinct states: done · current · pending · skipped. */
.ih-order-step--done .ih-order-step__dot{
  background:var(--ih-ink);border-color:var(--ih-ink)}
.ih-order-step--current .ih-order-step__dot{
  background:var(--ih-bg);border-color:var(--ih-ink);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--ih-ink) 11%, transparent)}
.ih-order-step--pending .ih-order-step__dot{
  background:var(--ih-bg);
  border-color:color-mix(in srgb, var(--ih-ink) 20%, transparent)}
.ih-order-step--skipped .ih-order-step__dot{
  background:var(--ih-bg);
  border-style:dashed;border-width:1.5px;
  border-color:color-mix(in srgb, var(--ih-ink) 16%, transparent)}
.ih-order-step--skipped .ih-order-step__label{
  color:color-mix(in srgb, var(--ih-ink) 38%, transparent);
  font-style:italic;font-weight:400}
.ih-order-step--skipped .ih-order-step__when{
  color:color-mix(in srgb, var(--ih-ink) 38%, transparent);
  font-style:italic}
.ih-order-step[data-tone="warn"] .ih-order-step__dot{
  background:var(--ih-st-warn);border-color:var(--ih-st-warn)}
.ih-order-step__body{display:flex;flex-direction:column;gap:2px;min-width:0;
  padding-top:1px}
.ih-order-step__label{font-size:15px;font-weight:500;color:var(--ih-ink);
  letter-spacing:-.005em}
.ih-order-step--pending .ih-order-step__label{
  color:color-mix(in srgb, var(--ih-ink) 55%, transparent);font-weight:400}
.ih-order-step--current .ih-order-step__label{font-weight:600}
.ih-order-step__when{font-size:12.5px;color:var(--ih-ink-soft);
  letter-spacing:.02em}

/* Summary panel + actions */
.ih-order-panel{padding:24px 22px;border-radius:20px;
  background:color-mix(in srgb, var(--ih-bg) 96%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent);
  box-shadow:var(--ih-shadow-card-ambient)}
.ih-order-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}

@media (max-width:760px){
  .ih-order-header{padding:18px 18px;gap:12px}
  .ih-order-header__num{font-size:20px}
  .ih-order-panel{padding:20px 18px}
  .ih-repair-card__body{padding:20px 20px 16px}
  .ih-repair-card .ih-repair-card__foot{padding:14px 20px 18px}
}

/* ============================================================
 * WAVE 5.5 — Customer profile, premium dashboard, navbar dropdown.
 * ============================================================ */

/* Profile page */
.ih-profile{max-width:760px;margin:0 auto;width:100%}
/* Wave 6.0A — profile head avatar + verified badge */
.ih-profile__head-avatar{display:inline-flex;align-items:center;
  justify-content:center;width:56px;height:56px;border-radius:50%;
  overflow:hidden;background:var(--ih-ink);
  border:1px solid color-mix(in srgb, var(--ih-ink) 14%, transparent);
  margin-bottom:10px}
.ih-profile__head-avatar img{width:100%;height:100%;
  object-fit:cover;display:block}
.ih-profile__head-verified{display:inline-block;margin-left:6px;
  font-size:13px;color:#2a8044;font-weight:700;line-height:1}
.ih-profile__saved{display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-radius:14px;
  background:color-mix(in srgb, #2a8044 8%, var(--ih-bg));
  border:1px solid color-mix(in srgb, #2a8044 22%, transparent);
  color:#235f33;margin-bottom:24px;font-size:14.5px;font-weight:500}
.ih-profile__saved-icon{display:inline-flex;align-items:center;
  justify-content:center;width:24px;height:24px;border-radius:50%;
  background:#2a8044;color:#fff;font-weight:700;font-size:13px}
.ih-profile__head{display:flex;gap:24px;align-items:flex-end;
  justify-content:space-between;flex-wrap:wrap;
  padding-bottom:24px;margin-bottom:28px;
  border-bottom:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent)}
.ih-profile__head-eyebrow{margin:0 0 4px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ih-ink-soft);font-weight:600}
.ih-profile__head-email{margin:0;font-size:16px;font-weight:600;
  color:var(--ih-ink);letter-spacing:-.012em}
.ih-profile__head-meter{min-width:240px;text-align:right}
.ih-profile__meter-label{margin:0 0 8px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ih-ink-soft);font-weight:600}
.ih-profile__meter{height:6px;border-radius:6px;overflow:hidden;
  background:color-mix(in srgb, var(--ih-ink) 8%, transparent)}
.ih-profile__meter-fill{display:block;height:100%;
  background:linear-gradient(90deg, var(--ih-ink) 0%,
    color-mix(in srgb, var(--ih-ink) 80%, transparent) 100%);
  transition:width .4s var(--ih-ease)}
.ih-profile__meter-pct{margin:6px 0 0;font-size:13px;
  font-feature-settings:"tnum" 1;color:var(--ih-ink-soft)}
.ih-profile__meter-pct strong{color:var(--ih-ink);font-weight:600}
.ih-profile__group-title{margin:32px 0 6px;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ih-ink-soft)}
.ih-profile__group-sub{margin:0 0 14px;font-size:13px;color:var(--ih-ink-soft)}
.ih-profile__grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ih-profile__form{display:flex;flex-direction:column;gap:14px}
.ih-profile__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
@media (max-width:600px){
  .ih-profile__grid-2{grid-template-columns:1fr}
  .ih-profile__head-meter{min-width:0;text-align:left;width:100%}
}

/* Dashboard hint + metrics + sections */
.ih-account__hint{display:grid;
  grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:16px 22px;border-radius:18px;text-decoration:none;
  background:color-mix(in srgb, var(--ih-ink) 4%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent);
  margin-bottom:32px;color:var(--ih-ink);
  transition:background .22s var(--ih-ease),
             border-color .22s var(--ih-ease),
             transform .22s var(--ih-ease)}
.ih-account__hint:hover{
  background:color-mix(in srgb, var(--ih-ink) 6%, transparent);
  border-color:color-mix(in srgb, var(--ih-ink) 18%, transparent);
  transform:translateY(-1px)}
.ih-account__hint-meter{display:inline-block;width:120px;height:6px;
  border-radius:6px;overflow:hidden;
  background:color-mix(in srgb, var(--ih-ink) 10%, transparent)}
.ih-account__hint-meter-fill{display:block;height:100%;background:var(--ih-ink)}
.ih-account__hint-text{font-size:14px;line-height:1.45;color:var(--ih-ink-soft)}
.ih-account__hint-text strong{color:var(--ih-ink);font-weight:600;margin-right:6px}
.ih-account__hint-text em{font-style:normal;font-weight:600;
  color:var(--ih-ink);font-feature-settings:"tnum" 1;margin-left:8px}
.ih-account__hint-cta{font-size:18px;color:var(--ih-ink-soft);font-weight:600}

.ih-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:36px}
@media (max-width:760px){.ih-metrics{grid-template-columns:repeat(2,1fr)}}
/* Wave 13C (M2) — premium metric cards: subtle elevation, hover lift,
   gradient sheen along top edge. Stripe/Linear/Notion-inspired. */
.ih-metric{padding:22px 24px;border-radius:16px;
  background:var(--ih-bg);
  border:1px solid color-mix(in srgb, var(--ih-ink) 7%, transparent);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ih-ink) 4%, transparent),
             0 8px 22px -18px color-mix(in srgb, var(--ih-ink) 18%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;overflow:hidden}
.ih-metric::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--ih-ink) 16%, transparent),
    transparent);
  opacity:.6;pointer-events:none}
.ih-metric:hover{transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--ih-ink) 14%, transparent);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ih-ink) 5%, transparent),
             0 14px 28px -18px color-mix(in srgb, var(--ih-ink) 28%, transparent)}
.ih-metric__label{margin:0 0 8px;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ih-ink-soft);font-weight:600}
/* Wave 13C (M2) — number gets more weight + tabular figures. */
.ih-metric__value{margin:0;font-size:34px;font-weight:600;
  letter-spacing:-.026em;line-height:1;color:var(--ih-ink);
  font-feature-settings:"tnum" 1;
  font-variant-numeric:tabular-nums lining-nums}

.ih-repair-section{margin-bottom:40px}
.ih-repair-section__head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.ih-repair-section__title{margin:0;font-size:22px;font-weight:600;
  letter-spacing:-.018em;color:var(--ih-ink)}
.ih-repair-section__count{font-size:13px;letter-spacing:.06em;
  color:var(--ih-ink-soft);font-feature-settings:"tnum" 1;
  padding:3px 9px;border-radius:6px;
  background:color-mix(in srgb, var(--ih-ink) 5%, transparent)}

.ih-empty{padding:48px 32px;border-radius:18px;text-align:center;
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent);
  border:1px dashed color-mix(in srgb, var(--ih-ink) 14%, transparent)}
.ih-empty__title{margin:0 0 6px;font-size:18px;font-weight:600;
  color:var(--ih-ink);letter-spacing:-.012em}
.ih-empty__sub{margin:0 0 18px;font-size:14px;color:var(--ih-ink-soft);
  line-height:var(--ih-leading-body);max-width:420px;margin-left:auto;margin-right:auto}

.ih-status-pill{display:inline-block;padding:4px 10px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;border-radius:6px;line-height:1.4;
  background:color-mix(in srgb, var(--ih-ink) 5%, transparent);
  color:var(--ih-ink-soft)}
.ih-status-pill--success{
  background:color-mix(in srgb, #2a8044 12%, transparent);color:#235f33}
.ih-status-pill--warn{
  background:color-mix(in srgb, #b85f1a 12%, transparent);color:#7d3d0c}

.ih-repair-card__num{margin:0;font-size:13px;color:var(--ih-ink-soft);
  font-weight:500;letter-spacing:.02em}
.ih-repair-card__num strong{color:var(--ih-ink);font-weight:600;
  font-feature-settings:"tnum" 1;font-size:16px;margin-left:4px}
.ih-repair-card__title{margin:4px 0 2px;font-size:17px;font-weight:600;
  letter-spacing:-.012em;color:var(--ih-ink)}
.ih-repair-card__sub{margin:0;font-size:14px;color:var(--ih-ink-soft);
  font-feature-settings:"tnum" 1}
.ih-repair-card__sub span{color:color-mix(in srgb, var(--ih-ink) 35%, transparent);
  font-weight:600;margin:0 2px}
.ih-repair-card__meta{margin:8px 0 0;font-size:13px;color:var(--ih-ink-soft);
  padding-top:10px;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-repair-card__foot{margin-top:8px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-repair-card__wa{font-size:13px;color:var(--ih-ink-soft);
  text-decoration:none;font-weight:500}
.ih-repair-card__wa:hover{color:var(--ih-ink)}
.ih-repair-card--diag{background:color-mix(in srgb, var(--ih-bg) 96%, transparent)}

.ih-repair-history{display:flex;flex-direction:column;gap:2px}
.ih-repair-history__row{display:grid;
  grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:14px 18px;border-radius:12px;text-decoration:none;color:var(--ih-ink);
  transition:background .2s var(--ih-ease)}
.ih-repair-history__row:hover{background:color-mix(in srgb, var(--ih-ink) 4%, transparent)}
.ih-repair-history__title{font-size:14px;font-weight:500}
.ih-repair-history__date{font-size:12.5px;color:var(--ih-ink-soft);
  font-feature-settings:"tnum" 1}

/* Navbar Account dropdown */
.ih-nav__account{position:relative}
.ih-nav__account-trigger{display:inline-flex;align-items:center;gap:10px;
  border:1px solid color-mix(in srgb, var(--ih-ink) 10%, transparent);
  background:var(--ih-bg);border-radius:999px;padding:6px 14px 6px 6px;
  font:inherit;font-size:13px;color:var(--ih-ink);cursor:pointer;
  transition:border-color .2s var(--ih-ease), background .2s var(--ih-ease)}
.ih-nav__account-trigger:hover{
  border-color:color-mix(in srgb, var(--ih-ink) 22%, transparent);
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent)}
.ih-nav__account-avatar{display:inline-flex;align-items:center;
  justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--ih-ink);color:var(--ih-bg);font-weight:600;font-size:13px;
  overflow:hidden}
.ih-nav__account-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ih-nav__account-name{font-weight:500}
.ih-nav__account-caret{font-size:10px;color:var(--ih-ink-soft);margin-left:-2px}
.ih-nav__account-menu{position:absolute;top:calc(100% + 8px);right:0;
  min-width:240px;background:var(--ih-bg);
  border:1px solid color-mix(in srgb, var(--ih-ink) 10%, transparent);
  border-radius:14px;
  box-shadow:0 18px 38px -18px color-mix(in srgb, var(--ih-ink) 35%, transparent);
  padding:14px 8px;z-index:60}
.ih-nav__account-greeting{margin:0 0 8px;padding:6px 12px 10px;
  font-size:13.5px;font-weight:600;color:var(--ih-ink);
  border-bottom:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-nav__account-greeting span{display:block;font-size:11px;
  font-weight:500;color:var(--ih-ink-soft);margin-top:2px}
.ih-nav__account-item{display:block;padding:9px 12px;font-size:13.5px;
  color:var(--ih-ink);text-decoration:none;border-radius:8px;
  transition:background .15s var(--ih-ease)}
.ih-nav__account-item:hover{background:color-mix(in srgb, var(--ih-ink) 4%, transparent)}
.ih-nav__account-item--sub{color:var(--ih-ink-soft);margin-top:4px;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent);
  padding-top:12px;border-radius:0}
@media (max-width:759px){
  .ih-nav__account-name, .ih-nav__account-caret{display:none}
  .ih-nav__account-trigger{padding:4px}
}

/* ============================================================
 * WAVE 5.8 — Customer timeline notif caption + Ops communications.
 * Silent premium · uppercase eyebrow caption · sober pills.
 * ============================================================ */
/* Wave 13B (M3) — sentence-case + soft check; removes "EMAIL SENT"
   tech-leak. Customer sees confirmation as natural sentence, not
   uppercase audit log row. */
.ih-order-step__notif{display:inline-block;margin-top:6px;
  font-size:12px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ih-ink-soft);
  border-top:1px dashed color-mix(in srgb, var(--ih-ink) 8%, transparent);
  padding-top:5px;line-height:1.3}
.ih-order-step--pending .ih-order-step__notif{display:none}

/* Ops Communications table — calm, audit-grade, no alarm. */
.ih-comms{width:100%;border-collapse:collapse;font-size:.88rem;
  margin-top:.2rem}
.ih-comms thead th{text-align:left;font-weight:600;
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ih-ink-soft);padding:.45rem .55rem;
  border-bottom:1px solid var(--ih-line)}
.ih-comms tbody td{padding:.55rem .55rem;vertical-align:middle;
  border-bottom:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent)}
.ih-comms tbody tr:last-child td{border-bottom:0}
.ih-comms__when{color:var(--ih-ink-soft);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ih-comms__evt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82rem;color:var(--ih-ink)}
.ih-comms__to{color:var(--ih-ink);max-width:240px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ih-comms__chip{display:inline-block;padding:.18rem .55rem;
  border-radius:999px;font-size:.75rem;font-weight:500;
  border:1px solid var(--ih-line);background:var(--ih-bg)}
.ih-comms__chip--email{color:var(--ih-ink)}
.ih-comms__chip--whatsapp{color:#2d7a4f;
  border-color:color-mix(in srgb, #2d7a4f 25%, var(--ih-line))}
.ih-comms__pill{display:inline-block;padding:.18rem .55rem;
  border-radius:999px;font-size:.74rem;font-weight:500;
  letter-spacing:.01em;border:1px solid var(--ih-line);
  background:var(--ih-bg);color:var(--ih-ink-soft)}
.ih-comms__pill--sent{color:#2d7a4f;
  border-color:color-mix(in srgb, #2d7a4f 25%, var(--ih-line))}
.ih-comms__pill--pending{color:var(--ih-ink-soft)}
.ih-comms__pill--failed{color:#b7791f;
  border-color:color-mix(in srgb, #b7791f 30%, var(--ih-line))}
.ih-comms__pill--skipped{color:var(--ih-ink-soft);opacity:.7}
.ih-comms__sent-at{margin-left:.4rem;font-size:.74rem;
  color:var(--ih-ink-soft);font-variant-numeric:tabular-nums}
.ih-comms__err{margin-left:.35rem;color:#b7791f;cursor:help}
@media (max-width:760px){
  .ih-comms thead{display:none}
  .ih-comms,.ih-comms tbody,.ih-comms tr,.ih-comms td{display:block;width:100%}
  .ih-comms tbody tr{padding:.6rem 0;
    border-bottom:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
  .ih-comms tbody td{padding:.15rem 0;border-bottom:0}
  .ih-comms__when{font-size:.78rem}
}

/* ============================================================
 * Wave 6.0B — Saved Addresses (ADR-0034)
 * Premium card grid · matches Wave 5.5 profile/dashboard tone.
 * Mobile-first: stack 1 column < 720px; 2 columns >= 720px.
 * ============================================================ */
.ih-address-flash{margin:0 0 18px;display:flex;flex-direction:column;gap:6px}
.ih-address-flash__msg{margin:0;padding:10px 14px;border-radius:10px;
  font-size:13px;background:color-mix(in srgb, var(--ih-ink) 5%, transparent);
  color:var(--ih-ink)}
.ih-address-flash__msg--success{background:color-mix(in srgb, var(--ih-st-ok) 8%, transparent);
  color:#0a5a2c}
.ih-address-flash__msg--error{background:color-mix(in srgb, var(--ih-st-crit) 8%, transparent);
  color:#7d1010}

.ih-address-list__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin:8px 0 20px;flex-wrap:wrap}
.ih-address-list__head .ih-profile__group-title{margin:0 0 4px}
.ih-address-list__head .ih-profile__group-sub{margin:0}

.ih-address-list{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 28px}
@media (min-width: 720px){
  .ih-address-list{grid-template-columns:1fr 1fr}
}

.ih-address-card{position:relative;display:flex;flex-direction:column;gap:6px;
  padding:18px 20px;border:1px solid color-mix(in srgb, var(--ih-ink) 10%, transparent);
  border-radius:14px;background:#fff;
  box-shadow:0 1px 0 color-mix(in srgb, var(--ih-ink) 4%, transparent);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.ih-address-card:hover{border-color:color-mix(in srgb, var(--ih-ink) 22%, transparent);
  box-shadow:0 4px 16px color-mix(in srgb, var(--ih-ink) 6%, transparent);
  transform:translateY(-1px)}
.ih-address-card--default{border-color:color-mix(in srgb, var(--ih-st-ok) 28%, transparent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--ih-st-ok) 8%, transparent)}
.ih-address-card--confirm{max-width:520px;margin:0 auto 24px}

.ih-address-card__head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:4px}
.ih-address-card__label{margin:0;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ih-ink)}
.ih-address-card__recipient{margin:0;font-size:15px;font-weight:600;color:var(--ih-ink)}
.ih-address-card__lines{margin:0;font-size:14px;color:var(--ih-ink-soft);line-height:1.45}
.ih-address-card__country,.ih-address-card__phone{margin:0;font-size:12px;
  color:var(--ih-ink-soft)}
.ih-address-card__note{margin:10px 0 0;padding:10px 12px;border-radius:10px;
  background:color-mix(in srgb, var(--ih-accent) 7%, transparent);
  font-size:13px;color:var(--ih-ink);line-height:1.45}

.ih-address-card__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;
  padding-top:12px;border-top:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-address-card__inline-form{margin:0;display:inline-flex}

.ih-address-form__padrao{margin-top:8px;padding:14px;border-radius:12px;
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent)}
.ih-address-form__check{display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:14px;color:var(--ih-ink)}
.ih-address-form__check input{width:18px;height:18px;accent-color:var(--ih-ink)}

.ih-btn--danger{color:var(--ih-st-crit)}
.ih-btn--danger:hover{background:color-mix(in srgb, var(--ih-st-crit) 8%, transparent);
  border-color:color-mix(in srgb, var(--ih-st-crit) 30%, transparent)}
.ih-btn--primary.ih-btn--danger{background:var(--ih-st-crit);color:#fff;border-color:var(--ih-st-crit)}
.ih-btn--primary.ih-btn--danger:hover{background:#9a1818}

.ih-profile__manage-link{display:inline-flex;align-items:center;gap:6px;
  margin:10px 0 0;font-size:13px;font-weight:500;color:var(--ih-ink);
  text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--ih-ink) 30%, transparent);
  text-underline-offset:3px}
.ih-profile__manage-link:hover{text-decoration-color:var(--ih-ink)}
.ih-profile__multi-note{margin:8px 0 0;padding:10px 12px;border-radius:10px;
  background:color-mix(in srgb, var(--ih-accent) 6%, transparent);
  font-size:13px;color:var(--ih-ink-soft);line-height:1.45}

/* ============================================================
 * Wave 6.0C — My Devices (ADR-0035)
 * Card with media + body. Mobile-first: 1col <720px; 2col >=720px.
 * Reuses Wave 6.0B .ih-address-flash + Wave 5.5 .ih-profile tokens.
 * ============================================================ */
.ih-device-list{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 28px}
@media (min-width: 720px){
  .ih-device-list{grid-template-columns:1fr 1fr}
}

.ih-device-card{display:flex;gap:14px;padding:16px 18px;
  border:1px solid color-mix(in srgb, var(--ih-ink) 10%, transparent);
  border-radius:14px;background:#fff;
  box-shadow:0 1px 0 color-mix(in srgb, var(--ih-ink) 4%, transparent);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.ih-device-card:hover{border-color:color-mix(in srgb, var(--ih-ink) 22%, transparent);
  box-shadow:0 4px 16px color-mix(in srgb, var(--ih-ink) 6%, transparent);
  transform:translateY(-1px)}
.ih-device-card--default{border-color:color-mix(in srgb, var(--ih-st-ok) 28%, transparent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--ih-st-ok) 8%, transparent)}
.ih-device-card--retired{opacity:.7}
.ih-device-card--retired:hover{transform:none}
.ih-device-card--confirm{max-width:560px;margin:0 auto 24px}

.ih-device-card__media{flex:0 0 72px;width:72px;height:72px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;overflow:hidden;
  background:color-mix(in srgb, var(--ih-ink) 4%, transparent)}
.ih-device-card__media img{width:100%;height:100%;object-fit:cover}
.ih-device-card__media-fallback{font-size:28px;line-height:1}

.ih-device-card__body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.ih-device-card__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:2px}
.ih-device-card__display{margin:0;font-size:16px;font-weight:600;
  color:var(--ih-ink);overflow:hidden;text-overflow:ellipsis}
.ih-device-card__sub{margin:0;font-size:13px;color:var(--ih-ink-soft)}
.ih-device-card__meta{margin:0;font-size:12px;color:var(--ih-ink-soft)}
.ih-device-card__note{margin:10px 0 0;padding:10px 12px;border-radius:10px;
  background:color-mix(in srgb, var(--ih-accent) 6%, transparent);
  font-size:13px;color:var(--ih-ink);line-height:1.45}

.ih-device-card__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
  padding-top:10px;border-top:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-device-card__inline-form{margin:0;display:inline-flex}

/* Wave 13B (M5) — secondary actions collapsed in native <details>.
   Keeps 2 primary CTAs visible; "More" expands inline without JS. */
.ih-device-card__more{display:inline-block;position:relative}
.ih-device-card__more-summary{cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 10px;border-radius:999px;font-size:12px;
  font-weight:500;color:var(--ih-ink-soft);
  border:1px solid color-mix(in srgb, var(--ih-ink) 12%, transparent);
  background:transparent;transition:background-color .12s ease,color .12s ease}
.ih-device-card__more-summary::-webkit-details-marker{display:none}
.ih-device-card__more-summary::after{content:"▾";font-size:9px;opacity:.7}
.ih-device-card__more[open] .ih-device-card__more-summary{
  color:var(--ih-ink);
  background:color-mix(in srgb, var(--ih-ink) 4%, transparent)}
.ih-device-card__more[open] .ih-device-card__more-summary::after{content:"▴"}
.ih-device-card__more-actions{display:flex;flex-wrap:wrap;gap:6px;
  margin-top:8px;padding:8px;border-radius:10px;
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent)}

.ih-device-retired{margin-top:8px;padding-top:18px;
  border-top:1px dashed color-mix(in srgb, var(--ih-ink) 14%, transparent)}

.ih-profile__group-title--small{margin-top:18px;font-size:12px}

/* Dashboard section "My Devices" */
.ih-account__devices{margin:0 0 28px}
.ih-account__devices-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin:0 0 10px;flex-wrap:wrap}
.ih-account__devices-title{margin:0;font-size:18px;font-weight:600;color:var(--ih-ink)}
.ih-account__devices-sub{margin:0;font-size:13px;color:var(--ih-ink-soft)}
.ih-account__devices-cta{font-size:13px;color:var(--ih-ink);text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--ih-ink) 30%, transparent);
  text-underline-offset:3px}
.ih-account__devices-list{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width: 720px){
  .ih-account__devices-list{grid-template-columns:1fr 1fr 1fr}
}
.ih-account__devices-empty{padding:14px 16px;border-radius:12px;
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent);
  font-size:13px;color:var(--ih-ink-soft);display:flex;
  justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

/* ============================================================
 * Wave 6.0D — Booking Prefill: saved devices chip row (ADR-0036).
 * Renders at /book/ step 1 when authenticated cliente has active
 * devices. Hidden otherwise (anon path bit-identical to Wave 4).
 * Mobile-first: horizontal scroll. Desktop: wrap to grid.
 * ============================================================ */
.ih-flow__saved-devices{margin:0 0 22px;
  padding:18px 18px 16px;border-radius:14px;
  background:color-mix(in srgb, var(--ih-accent) 4%, transparent);
  border:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent)}
.ih-flow__saved-head{margin:0 0 12px}
.ih-flow__saved-title{margin:0 0 2px;font-size:14px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ih-ink)}
.ih-flow__saved-sub{margin:0;font-size:13px;color:var(--ih-ink-soft)}

.ih-device-chips{display:flex;gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:2px 0 6px;margin:0 -4px;
  scrollbar-width:thin}
@media (min-width: 720px){
  .ih-device-chips{flex-wrap:wrap;overflow:visible}
}
.ih-device-chip-form{margin:0;display:contents}
.ih-device-chip{position:relative;display:inline-flex;align-items:center;gap:12px;
  flex:0 0 auto;min-width:240px;max-width:320px;
  padding:10px 14px;border:1px solid color-mix(in srgb, var(--ih-ink) 12%, transparent);
  border-radius:14px;background:#fff;color:var(--ih-ink);
  cursor:pointer;text-decoration:none;text-align:left;
  scroll-snap-align:start;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.ih-device-chip:hover{border-color:color-mix(in srgb, var(--ih-ink) 28%, transparent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--ih-ink) 7%, transparent);
  transform:translateY(-1px)}
.ih-device-chip--default{border-color:color-mix(in srgb, var(--ih-st-ok) 30%, transparent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--ih-st-ok) 10%, transparent)}
.ih-device-chip--add{border-style:dashed;background:transparent}

.ih-device-chip__media{flex:0 0 44px;width:44px;height:44px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:10px;overflow:hidden;
  background:color-mix(in srgb, var(--ih-ink) 5%, transparent)}
.ih-device-chip__media img{width:100%;height:100%;object-fit:cover}
.ih-device-chip__media--ghost{font-size:24px;font-weight:300;line-height:1;
  color:var(--ih-ink-soft)}
.ih-device-chip__fallback{font-size:22px;line-height:1}

.ih-device-chip__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ih-device-chip__name{font-size:14px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ih-device-chip__sub{font-size:11px;color:var(--ih-ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ih-device-chip__badge{position:absolute;top:6px;right:8px;
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#0a5a2c;background:color-mix(in srgb, var(--ih-st-ok) 12%, transparent);
  padding:2px 6px;border-radius:6px}

/* Selected-device pill on /book/repair/ */
.ih-flow__device-pill{margin:0 0 8px;padding:6px 12px;display:inline-flex;
  align-items:center;gap:6px;font-size:13px;color:var(--ih-ink);
  background:color-mix(in srgb, var(--ih-st-ok) 8%, transparent);
  border-radius:999px}
.ih-flow__device-pill strong{font-weight:600}

/* Dashboard "Last used device" badge */
.ih-account__devices-last{margin:0 0 8px;font-size:12px;color:var(--ih-ink-soft)}
.ih-account__devices-last strong{color:var(--ih-ink);font-weight:600}

/* ============================================================
 * Wave 6.0E — Warranty Platform (ADR-0037)
 * Cards premium · pills factual · cultural §2 sentinel applied.
 * Reuses .ih-status-pill family from Wave 5.5.
 * ============================================================ */
.ih-warranty-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin:6px 0 18px;flex-wrap:wrap}
.ih-warranty-head__device{margin:0 0 4px;font-size:18px;font-weight:600;
  color:var(--ih-ink)}
.ih-warranty-head__sub{margin:0;font-size:13px;color:var(--ih-ink-soft)}

.ih-warranty-list{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 28px}
@media (min-width: 720px){
  .ih-warranty-list{grid-template-columns:1fr 1fr}
}

.ih-warranty-card{padding:16px 18px;border-radius:14px;background:#fff;
  border:1px solid color-mix(in srgb, var(--ih-ink) 10%, transparent);
  box-shadow:0 1px 0 color-mix(in srgb, var(--ih-ink) 4%, transparent);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease}
.ih-warranty-card:hover{border-color:color-mix(in srgb, var(--ih-ink) 22%, transparent);
  box-shadow:0 4px 16px color-mix(in srgb, var(--ih-ink) 6%, transparent);
  transform:translateY(-1px)}
.ih-warranty-card--detail{max-width:680px;margin:0 auto}

.ih-warranty-card--active{border-color:color-mix(in srgb, var(--ih-st-ok) 28%, transparent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--ih-st-ok) 8%, transparent)}
.ih-warranty-card--expired,
.ih-warranty-card--closed,
.ih-warranty-card--voided,
.ih-warranty-card--void_no_warranty{opacity:.85}
.ih-warranty-card--claimed{border-color:color-mix(in srgb, var(--ih-st-warn) 26%, transparent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--ih-st-warn) 8%, transparent)}

.ih-warranty-card__head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:6px}
.ih-warranty-card__repair{margin:0;font-size:15px;font-weight:600;
  color:var(--ih-ink)}
.ih-warranty-card__policy{margin:0;font-size:13px;color:var(--ih-ink-soft)}
.ih-warranty-card__meta{margin:6px 0 0;font-size:12px;color:var(--ih-ink-soft)}
.ih-warranty-card__meta strong{color:var(--ih-ink);font-weight:600}

.ih-warranty-card__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
  padding-top:12px;border-top:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}

.ih-warranty-detail{display:grid;grid-template-columns:1fr;gap:8px;
  margin:14px 0 0;font-size:13px}
.ih-warranty-detail div{display:flex;gap:8px;flex-wrap:wrap}
.ih-warranty-detail dt{font-weight:600;color:var(--ih-ink-soft);
  min-width:120px;margin:0}
.ih-warranty-detail dd{margin:0;color:var(--ih-ink)}

.ih-warranty-claims{margin:24px 0 0}
.ih-warranty-claims__list{list-style:none;padding:0;margin:8px 0 0;
  display:flex;flex-direction:column;gap:10px}
.ih-warranty-claim{padding:12px 14px;border-radius:10px;
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent);
  font-size:13px}
.ih-warranty-claim__head{margin:0 0 4px;font-size:12px}
.ih-warranty-claim__motivo{margin:0;color:var(--ih-ink)}
.ih-warranty-claim__note{margin:6px 0 0;padding:8px 10px;border-radius:8px;
  background:#fff;color:var(--ih-ink-soft);font-size:12px}

/* Device card / dashboard warranty hint (Wave 6.0E enrichment) */
.ih-device-card__warranty{margin:6px 0 0;font-size:12px;color:var(--ih-ink-soft)}
.ih-device-card__warranty strong{color:var(--ih-ink);font-weight:600}

/* ============================================================
 * Wave 6.1 — Device Timeline (ADR-0038)
 * Mobile-first vertical rail. Reuses .ih-status-pill colour family.
 * Cultural Sentinel: visual neutrality — never alarm or rank.
 * ============================================================ */
.ih-device-detail__retired-banner{margin:0 0 16px;padding:10px 14px;
  border-radius:10px;background:color-mix(in srgb, var(--ih-ink) 6%, transparent);
  font-size:13px;color:var(--ih-ink-soft)}
.ih-device-detail__retired-banner strong{color:var(--ih-ink);font-weight:600}

.ih-device-detail__hero{display:flex;gap:18px;padding:18px 20px;
  border:1px solid color-mix(in srgb, var(--ih-ink) 10%, transparent);
  border-radius:14px;background:#fff;margin:0 0 22px;
  box-shadow:0 1px 0 color-mix(in srgb, var(--ih-ink) 4%, transparent)}
.ih-device-detail__hero .ih-device-card__media{flex:0 0 96px;width:96px;height:96px}
.ih-device-detail__hero-body{flex:1;display:flex;flex-direction:column;gap:4px;
  min-width:0}

.ih-device-detail__section-head{display:flex;align-items:center;
  justify-content:space-between;gap:12px;margin:18px 0 6px;flex-wrap:wrap}
.ih-device-detail__section-head .ih-profile__group-title{margin:0}

.ih-device-detail__warranty-summary{margin:0 0 22px}
.ih-warranty-summary{display:flex;gap:8px;margin:8px 0 6px;flex-wrap:wrap}

.ih-device-detail__active-repairs{margin:0 0 22px}

.ih-device-detail__timeline{margin:6px 0 22px}
.ih-device-detail__timeline-count{font-size:12px;color:var(--ih-ink-soft)}

/* Vertical rail timeline */
.ih-timeline{margin:14px 0 0;position:relative}
.ih-timeline__year{margin:0 0 24px}
.ih-timeline__year-head{margin:0 0 10px;padding-bottom:6px;
  border-bottom:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent)}
.ih-timeline__year-label{font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ih-ink-soft)}

.ih-timeline__list{list-style:none;margin:0;padding:0 0 0 26px;position:relative;
  border-left:1px solid color-mix(in srgb, var(--ih-ink) 10%, transparent)}
.ih-timeline__item{position:relative;padding:10px 0 14px 8px}
.ih-timeline__item + .ih-timeline__item{
  border-top:1px dashed color-mix(in srgb, var(--ih-ink) 6%, transparent)}

.ih-timeline__dot{position:absolute;left:-39px;top:14px;
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;font-size:13px;line-height:1;
  background:#fff;border:1px solid color-mix(in srgb, var(--ih-ink) 18%, transparent);
  color:var(--ih-ink)}
.ih-timeline__item--success .ih-timeline__dot{
  border-color:color-mix(in srgb, var(--ih-st-ok) 35%, transparent);
  color:#0a5a2c;background:color-mix(in srgb, var(--ih-st-ok) 8%, white)}
.ih-timeline__item--warn .ih-timeline__dot{
  border-color:color-mix(in srgb, var(--ih-st-warn) 35%, transparent);
  color:#8a3d10;background:color-mix(in srgb, var(--ih-st-warn) 8%, white)}
.ih-timeline__item--muted .ih-timeline__dot{
  color:var(--ih-ink-soft);
  background:color-mix(in srgb, var(--ih-ink) 4%, white)}

.ih-timeline__body{display:flex;flex-direction:column;gap:2px}
.ih-timeline__head{margin:0;display:flex;align-items:baseline;gap:10px;
  flex-wrap:wrap;font-size:14px;color:var(--ih-ink)}
.ih-timeline__date{font-size:12px;color:var(--ih-ink-soft);
  min-width:54px;letter-spacing:.02em}
.ih-timeline__title{font-weight:600}
.ih-timeline__sub{margin:0;font-size:13px;color:var(--ih-ink-soft);line-height:1.45}
.ih-timeline__link{margin:4px 0 0;font-size:12px}
.ih-timeline__link a{color:var(--ih-ink);text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--ih-ink) 30%, transparent);
  text-underline-offset:3px}
.ih-timeline__link a:hover{text-decoration-color:var(--ih-ink)}

.ih-timeline__empty{padding:18px;border-radius:12px;
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent);
  text-align:center;color:var(--ih-ink-soft)}

/* Dashboard Recent Activity (compact) */
.ih-account__recent{margin:0 0 28px}
.ih-account__recent-head{display:flex;align-items:center;
  justify-content:space-between;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.ih-account__recent-title{margin:0;font-size:18px;font-weight:600;color:var(--ih-ink)}
.ih-account__recent-list{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:8px}
.ih-account__recent-item{display:flex;gap:14px;padding:12px 14px;border-radius:12px;
  background:color-mix(in srgb, var(--ih-ink) 2.5%, transparent);font-size:13px;
  align-items:center;transition:background-color .15s ease}
.ih-account__recent-item:hover{background:color-mix(in srgb, var(--ih-ink) 5%, transparent)}
.ih-account__recent-item__body{flex:1;min-width:0}
.ih-account__recent-item__title{margin:0;font-weight:600;color:var(--ih-ink)}
.ih-account__recent-item__sub{margin:0;color:var(--ih-ink-soft);font-size:12px}
.ih-account__recent-item__date{font-size:12px;color:var(--ih-ink-soft);
  min-width:54px;text-align:right}

/* Wave 13C (M1) — Tone-driven dot replaces emoji set. Consistent
   geometric family across all 11 timeline event kinds. */
.ih-account__recent-item__dot{flex:0 0 10px;width:10px;height:10px;
  border-radius:50%;background:color-mix(in srgb, var(--ih-ink) 22%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ih-ink) 5%, transparent);
  display:inline-block;align-self:center}
.ih-account__recent-item[data-tone="success"] .ih-account__recent-item__dot{
  background:var(--ih-st-ok);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ih-st-ok) 14%, transparent)}
.ih-account__recent-item[data-tone="muted"] .ih-account__recent-item__dot{
  background:color-mix(in srgb, var(--ih-ink) 14%, transparent);
  box-shadow:none}
.ih-account__recent-item[data-tone="warn"] .ih-account__recent-item__dot{
  background:var(--ih-st-warn);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ih-st-warn) 14%, transparent)}

/* ============================================================
 * Wave 6.2 — Device Health (ADR-0039)
 * Cultural Sentinel: no alarm, no ranking. Pills and tones reuse
 * the Wave 5.5 .ih-status-pill colour family.
 * ============================================================ */

/* Small pill used on dashboard preview cards */
.ih-health-pill{display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.4;
  white-space:nowrap}
.ih-health-pill--success{background:color-mix(in srgb, var(--ih-st-ok) 10%, transparent);
  color:#0a5a2c}
.ih-health-pill--neutral{background:color-mix(in srgb, var(--ih-ink) 6%, transparent);
  color:var(--ih-ink)}
.ih-health-pill--warn{background:color-mix(in srgb, var(--ih-st-warn) 10%, transparent);
  color:#8a3d10}
.ih-health-pill--muted{background:color-mix(in srgb, var(--ih-ink) 4%, transparent);
  color:var(--ih-ink-soft)}

/* Detail block on /account/devices/<pk>/ */
.ih-health-block{margin:0 0 22px;padding:18px 20px;border-radius:14px;
  background:#fff;border:1px solid color-mix(in srgb, var(--ih-ink) 10%, transparent);
  box-shadow:0 1px 0 color-mix(in srgb, var(--ih-ink) 4%, transparent)}
.ih-health-block--success{border-color:color-mix(in srgb, var(--ih-st-ok) 26%, transparent)}
.ih-health-block--warn{border-color:color-mix(in srgb, var(--ih-st-warn) 22%, transparent)}
.ih-health-block--muted{border-color:color-mix(in srgb, var(--ih-ink) 14%, transparent);
  background:color-mix(in srgb, var(--ih-ink) 2%, white)}

.ih-health-block__head{margin:0 0 10px}
.ih-health-block__eyebrow{margin:0 0 4px;font-size:11px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--ih-ink-soft)}
.ih-health-block__band{margin:0;font-size:22px;font-weight:700;
  color:var(--ih-ink);line-height:1.2}
.ih-health-block__subcopy{margin:4px 0 0;font-size:13px;
  color:var(--ih-ink-soft);line-height:1.45}

.ih-health-block__factors{list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-direction:column;gap:6px}
.ih-health-block__factor{display:flex;align-items:flex-start;gap:10px;
  padding:8px 10px;border-radius:8px;
  background:color-mix(in srgb, var(--ih-ink) 3%, transparent);
  font-size:13px;color:var(--ih-ink)}
.ih-health-block__factor-icon{flex:0 0 18px;text-align:center;
  font-size:13px;line-height:1.4;color:var(--ih-ink-soft)}
.ih-health-block__factor--positive .ih-health-block__factor-icon{color:#0a5a2c}
.ih-health-block__factor--attention .ih-health-block__factor-icon{color:#8a3d10}
.ih-health-block__factor-text{flex:1;line-height:1.45}

.ih-health-block__explain{margin:14px 0 0;padding-top:12px;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-health-block__explain summary{font-size:12px;color:var(--ih-ink);
  cursor:pointer;font-weight:500}
.ih-health-block__explain summary:hover{text-decoration:underline;
  text-underline-offset:3px}
.ih-health-block__explain-body{margin:8px 0 6px;font-size:12px;
  color:var(--ih-ink-soft);line-height:1.5}
.ih-health-block__explain-note{margin:0;font-size:11px;
  color:var(--ih-ink-soft);font-style:italic;line-height:1.45}

/* ============================================================
 * Wave 6.3.A — Customer Retention reminders widget (ADR-0040)
 * Cultural Sentinel: no alarm tones. Severity is `neutral` or
 * `info` only — never `warning`/`urgent`. Card layout is calm
 * and consistent with Wave 6.1 Recent activity items.
 * ============================================================ */
.ih-reminders{margin:0 0 28px}
.ih-reminders__head{margin:0 0 10px}
.ih-reminders__title{margin:0;font-size:18px;font-weight:600;color:var(--ih-ink)}
.ih-reminders__sub{margin:2px 0 0;font-size:12px;color:var(--ih-ink-soft)}

.ih-reminders__list{display:flex;flex-direction:column;gap:10px}

.ih-reminder{display:flex;gap:12px;padding:14px 16px;
  border-radius:12px;background:#fff;
  border:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent);
  box-shadow:0 1px 0 color-mix(in srgb, var(--ih-ink) 3%, transparent);
  transition:border-color .18s ease, box-shadow .18s ease}
.ih-reminder:hover{border-color:color-mix(in srgb, var(--ih-ink) 18%, transparent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--ih-ink) 6%, transparent)}
.ih-reminder--neutral{background:#fff}
.ih-reminder--info{background:color-mix(in srgb, var(--ih-accent) 3%, white);
  border-color:color-mix(in srgb, var(--ih-accent) 14%, transparent)}

.ih-reminder__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ih-reminder__title{margin:0;font-size:14px;font-weight:600;color:var(--ih-ink);
  line-height:1.35}
.ih-reminder__text{margin:0;font-size:13px;color:var(--ih-ink-soft);
  line-height:1.5}
.ih-reminder__actions{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}

.ih-reminder__dismiss-form{margin:0;display:flex}
.ih-reminder__dismiss{flex:0 0 36px;width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid color-mix(in srgb, var(--ih-ink) 12%, transparent);
  color:var(--ih-ink-soft);border-radius:10px;font-size:18px;line-height:1;
  cursor:pointer;transition:background .15s ease, color .15s ease,
  border-color .15s ease}
.ih-reminder__dismiss:hover{background:color-mix(in srgb, var(--ih-ink) 4%, transparent);
  color:var(--ih-ink);border-color:color-mix(in srgb, var(--ih-ink) 22%, transparent)}
.ih-reminder__dismiss:focus-visible{outline:2px solid var(--ih-ink);outline-offset:2px}

@media (min-width: 720px){
  .ih-reminder__dismiss{flex-basis:44px;width:44px;height:44px}
}

/* ============================================================
 * Home UX polish — How it works section + footer brand polish
 * Editorial, premium, Apple-inspired. Mobile-first.
 * ============================================================ */
.ih-how{padding-top:clamp(32px,4.5vw,52px);
  padding-bottom:clamp(40px,5.5vw,72px)}
.ih-how__inner{max-width:920px;margin:0 auto;padding:0 clamp(20px,3vw,32px)}
.ih-how__statement{margin:6px 0 28px;font-size:clamp(26px,3.8vw,38px);
  font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ih-ink);
  max-width:680px}

.ih-how__steps{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column}
.ih-how__step{display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding:22px 0;border-top:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent);
  align-items:start}
.ih-how__step:last-child{
  border-bottom:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent)}
.ih-how__num{font-size:clamp(22px,2.8vw,28px);font-weight:300;
  letter-spacing:.02em;color:var(--ih-ink-soft);min-width:44px;
  line-height:1.15;font-variant-numeric:tabular-nums}
.ih-how__title{margin:0 0 4px;font-size:17px;font-weight:600;
  letter-spacing:-.01em;color:var(--ih-ink)}
.ih-how__text{margin:0;font-size:14.5px;line-height:var(--ih-leading-body);
  color:var(--ih-ink-soft);max-width:54ch}

@media (min-width: 720px){
  .ih-how__step{grid-template-columns:96px 1fr;gap:24px;padding:26px 0}
  .ih-how__title{font-size:18px}
  .ih-how__text{font-size:15px}
}

/* Footer brand-column rules moved into the Wave FOOTER 2.0 block above
   (single definition). The old .ih-footer__corp/__assurance/__contact
   rules were removed here to avoid overriding the editorial versions. */

/* ============================================================
 * Home Micro-Polish — full-width dual panel (Why + How)
 * Apple promotional panel grammar:
 *  - background goes edge-to-edge (no narrow container)
 *  - 2 columns 50/50 on desktop, stacked on mobile/tablet
 *  - white gap acts as separator (NOT a border, NOT a card edge)
 *  - clean white horizontal bar follows, before Devices section
 * No new assets, no new sections.
 * ============================================================ */

/* ---- Full-width section -------------------------------------------- */
.ih-dual{
  width:100%;
  background:#fafaf7;            /* warm ivory wash · same family as Wave 3.1 */
  padding:0;                     /* outer chrome handled by panels themselves */
}

/* ---- 50/50 grid · the gap is what separates panels visually -------- */
.ih-dual__grid{
  display:grid;
  grid-template-columns:1fr;
  /* warm ivory base, gap painted white = Apple-style separator. */
  gap:0;
  background:#fff;
}

@media (min-width: 980px){
  .ih-dual__grid{
    grid-template-columns:1fr 1fr;
    column-gap:16px;             /* 16px white vertical separator desktop */
  }
}

/* ---- Panels: ivory background, no border, no shadow --------------- */
.ih-dual__panel{
  background:#fafaf7;
  padding:clamp(40px, 5vw, 80px) clamp(24px, 4vw, 64px);
  min-height:clamp(420px, 60vh, 600px);
  display:flex;align-items:flex-start;
}
@media (min-width: 980px){
  .ih-dual__panel{min-height:clamp(520px, 62vh, 680px)}
}

.ih-dual__panel-inner{
  width:100%;max-width:560px;margin:0 auto;
}

/* ---- Typography ---------------------------------------------------- */
.ih-dual__eyebrow{
  margin:0 0 14px;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ih-ink-soft);
}
.ih-dual__headline{
  margin:0 0 clamp(28px, 3vw, 44px);
  font-size:clamp(26px, 3.4vw, 38px);font-weight:600;
  letter-spacing:-.02em;line-height:1.18;color:var(--ih-ink);
  max-width:22ch;
}

/* ---- WHY items (no card edges, no heavy ornaments) ---------------- */
.ih-dual__points{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:clamp(20px, 2vw, 28px)}
.ih-dual__point{margin:0;padding:0}
.ih-dual__point-title{margin:0 0 6px;font-size:17px;font-weight:600;
  letter-spacing:-.005em;color:var(--ih-ink)}
.ih-dual__point-text{margin:0;font-size:14.5px;line-height:1.6;
  color:var(--ih-ink-soft);max-width:42ch}

/* ---- HOW steps (keep editorial 01–04 numbers per spec) ------------ */
.ih-dual__steps{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:clamp(16px, 1.8vw, 22px)}
.ih-dual__step{display:grid;grid-template-columns:auto 1fr;
  gap:18px;padding:0;align-items:start}
.ih-dual__step-num{font-size:clamp(20px, 2vw, 24px);font-weight:300;
  color:var(--ih-ink-soft);min-width:44px;line-height:1.2;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ih-dual__step-title{margin:0 0 4px;font-size:17px;font-weight:600;
  letter-spacing:-.005em;color:var(--ih-ink)}
.ih-dual__step-text{margin:0;font-size:14.5px;line-height:var(--ih-leading-body);
  color:var(--ih-ink-soft);max-width:46ch}

/* ---- Clean white horizontal separator after the dual block -------- */
.ih-dual-sep{
  width:100%;height:16px;background:#fff;
}

/* ---- Make sure the Devices section sits clean below the sep ------ */
.ih-dual-sep + .ih-section#devices{
  padding-top:clamp(48px, 5vw, 80px);
}

/* ---- Mobile: stack panels, 12px white horizontal separator -------- */
@media (max-width: 979px){
  .ih-dual__grid{row-gap:12px}
  .ih-dual__panel{padding:36px 22px;min-height:auto}
  .ih-dual__panel-inner{max-width:none}
  .ih-dual__headline{font-size:24px;max-width:none}
}

/* ====================================================================
 * WAVE CATALOG UX FIX (2026-06-07 · revised b)
 * Brand-card logos · model grid 4/2/1 · flow-sidebar structural fix.
 * Sidebar breakpoint moved 980 → 1180 (Issue 2: overlap caused by too-
 * early activation of the 2-col layout). Below 1180 → single column,
 * sidebar stacks below. Cascade-final overrides.
 * ==================================================================== */

/* ---- Brand-tile logo containment for /d/<cat>/ (.ih-tile inside .ih-grid) */
.ih-grid:not(.ih-grid--models):not(.ih-grid--devices) .ih-tile__media{
  width:100%;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  padding:18%;box-sizing:border-box}
.ih-grid:not(.ih-grid--models):not(.ih-grid--devices) .ih-tile__media img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;object-position:center;display:block}

/* ---- Brand-card logo containment for /book/brand/ (.ih-brand-card) */
.ih-brand-card{
  display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:24px 16px 20px;
  background:#fff;border-radius:18px;
  border:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent);
  font:inherit;cursor:pointer;color:inherit;width:100%;
  text-align:center;
  transition:transform .14s ease, box-shadow .14s ease}
.ih-brand-card:hover{transform:translateY(-2px);
  box-shadow:0 10px 24px -16px color-mix(in srgb, var(--ih-ink) 25%, transparent)}
.ih-brand-card__logo{
  width:100%;display:flex;align-items:center;justify-content:center;
  padding:14% 18%;box-sizing:border-box;min-height:84px;
  overflow:visible}
.ih-brand-card__logo img{
  max-width:100%;max-height:64px;
  width:auto;height:auto;
  object-fit:contain;object-position:center;display:block}
.ih-brand-card__label{
  font-size:13px;color:var(--ih-ink-soft);
  letter-spacing:.01em;margin:0;text-align:center;font-weight:600}
.ih-grid--brands{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px}
@media (min-width:640px){
  .ih-grid--brands{grid-template-columns:repeat(3,1fr);gap:18px}
}
@media (min-width:1180px){
  .ih-grid--brands{grid-template-columns:repeat(4,1fr);gap:22px}
}

/* ---- Model grid 4 / 2 / 1 ---------------------------------------- */
.ih-grid--models{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  min-width:0}
@media (min-width:640px){
  .ih-grid--models{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px}
}
@media (min-width:1180px){
  .ih-grid--models{
    grid-template-columns:repeat(4,minmax(160px,1fr));
    gap:24px}
}

/* Equal card heights · uniform internal layout */
.ih-grid--models .ih-tile{
  display:flex;flex-direction:column;
  min-height:100%;
  padding:18px 16px 20px;
  border-radius:18px;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ih-ink) 4%, transparent);
  transition:transform .14s ease, box-shadow .14s ease}
.ih-grid--models .ih-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -16px color-mix(in srgb, var(--ih-ink) 25%, transparent)}
.ih-grid--models .ih-tile__media{
  flex:0 0 auto;min-height:200px;max-height:240px;
  margin-bottom:12px}
.ih-grid--models .ih-tile__name{
  flex:1 1 auto;display:flex;align-items:flex-start;justify-content:center;
  text-align:center;font-weight:600;font-size:15px;line-height:1.3;
  letter-spacing:-.005em;min-height:42px;padding:0 6px}
.ih-grid--models .ih-tile__price{
  margin-top:4px;font-size:13px;color:var(--ih-ink-soft);text-align:center}
@media (max-width:639px){
  .ih-grid--models .ih-tile{padding:14px 12px 16px}
  .ih-grid--models .ih-tile__media{min-height:160px;max-height:200px;
    margin-bottom:8px}
  .ih-grid--models .ih-tile__name{min-height:auto;font-size:14.5px}
}

/* ---- Flow layout STRUCTURAL fix (Issue 2: sidebar overlap) --------
 * Real cause: --ih-maxw=1180 caps the flow container; with a 340px
 * sidebar + gap, the first track shrinks below 4×180+gap, so the
 * grid overflowed the track and visually intruded into the sidebar.
 *
 * Fix:
 *  - Single column up to <1280
 *  - At >=1280, ALSO override max-width to 1340 so column 1 has room
 *    for 4 cards + 340 sidebar + gap
 *  - On the model grid, minmax(160,1fr) absorbs narrower tracks */
.ih-flow-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
  max-width:var(--ih-maxw);
  margin:0 auto;
  padding:0 var(--ih-space);
  align-items:start}
.ih-flow-layout > *{min-width:0}          /* structural safety */

@media (min-width:1280px){
  /* Wave DS 1.0 (4/7): single official width — the wizard no longer
   * widens past --ih-maxw (1180). Removed the 1420/1340 special-case;
   * sticky-summary refinements below are kept. */
  .ih-flow-layout{
    grid-template-columns:minmax(0,1fr) 340px;
    gap:clamp(32px,3.5vw,56px)}
  .ih-flow-summary{
    position:sticky;top:120px;
    max-height:calc(100vh - 144px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:1}
  .ih-flow-summary::-webkit-scrollbar{width:6px}
  .ih-flow-summary::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--ih-ink) 14%, transparent);
    border-radius:3px}
}

/* Below 1280: sidebar is a plain block below grid, never sticky */
@media (max-width:1279px){
  .ih-flow-summary{
    position:relative !important;
    top:auto !important;
    max-height:none;
    overflow:visible;
    margin-top:24px;
    z-index:auto}
}
/* ==================================================================== */

/* ====================================================================
 * WAVE CATALOG UX · MODEL SEARCH (2026-06-07c)
 * Premium subtle search field above .ih-grid--models. Hidden if no JS.
 * ==================================================================== */
.ih-model-search{margin:0 0 18px 0}
.ih-model-search__inner{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;
  background:#fff;border-radius:14px;
  border:1px solid color-mix(in srgb, var(--ih-ink) 8%, transparent);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ih-ink) 4%, transparent);
  transition:border-color .15s ease, box-shadow .15s ease}
.ih-model-search__inner:focus-within{
  border-color:color-mix(in srgb, var(--ih-ink) 28%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ih-ink) 8%, transparent)}
.ih-model-search__icon{display:inline-flex;flex:0 0 auto;
  color:var(--ih-ink-soft);align-items:center;justify-content:center}
.ih-model-search__input{flex:1 1 auto;
  border:0;outline:none;background:transparent;
  font:inherit;font-size:15px;color:var(--ih-ink);
  letter-spacing:-.005em;
  -webkit-appearance:none;appearance:none;
  min-width:0}
.ih-model-search__input::placeholder{color:var(--ih-ink-soft);font-weight:400}
.ih-model-search__count{flex:0 0 auto;
  font-size:12px;color:var(--ih-ink-soft);
  letter-spacing:.02em;white-space:nowrap;
  font-feature-settings:"tnum" 1}
/* Hide native clear-button on Edge/Safari */
.ih-model-search__input::-webkit-search-cancel-button,
.ih-model-search__input::-webkit-search-decoration{-webkit-appearance:none}

/* Wrapper div that contains search + form within flow-layout column 1 */
.ih-flow-layout__main{min-width:0;display:flex;flex-direction:column}
/* ==================================================================== */

/* ====================================================================
 * SMALL BOOKING UI FIXES (2026-06-07d)
 * Task 1: /book/ step 1 — no reserved sidebar column when has_summary=False.
 * Task 2: brand-card category label + uppercase + tighter spacing.
 * ==================================================================== */

/* Single-column when no summary panel (gate by modifier OR by :has) */
.ih-flow-layout--no-summary,
.ih-flow-layout:not(:has(> .ih-flow-summary)){
  grid-template-columns:minmax(0,1fr) !important;
  max-width:var(--ih-maxw) !important;
  gap:0 !important}
.ih-flow-layout--no-summary .ih-grid--devices,
.ih-flow-layout:not(:has(> .ih-flow-summary)) .ih-grid--devices{
  margin:0 auto;width:100%}

/* Center the 6 device tiles balanced on desktop */
@media (min-width:980px){
  .ih-grid--devices{max-width:980px;margin:0 auto}
}

/* Task 2 — Brand card label: smaller, uppercase, less prominent.
 * When logo exists the category label appears (SMARTPHONES / WEARABLES
 * etc.) — secondary, not a brand-name repeat. */
.ih-brand-card__label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ih-ink-soft);font-weight:600;margin:0}
.ih-brand-card__wordmark{
  display:inline-block;font-weight:700;font-size:18px;
  color:var(--ih-ink);letter-spacing:-.01em}
/* When wordmark fallback is shown alongside img, hide img to avoid stack */
.ih-brand-card__logo:has(> .ih-brand-card__wordmark) img{display:none}
/* ==================================================================== */

/* ====================================================================
 * PART A — BRAND CARD ALIGNMENT (2026-06-08)
 * Lock card height + center logos in a fixed-height area regardless of
 * the natural PNG aspect ratio. Huawei (squat) and Apple (tall) end up
 * occupying the exact same visual zone; the category label sits on the
 * same baseline across the row.
 * ==================================================================== */
.ih-brand-card{
  height:170px;
  padding:0;
  gap:0;
  overflow:hidden}
.ih-brand-card__logo{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:auto;
  padding:18px 22px;
  min-height:0;
  box-sizing:border-box}
.ih-brand-card__logo img{
  max-height:56px;
  max-width:78%;
  width:auto;height:auto;
  object-fit:contain;object-position:center;
  display:block}
.ih-brand-card__label{
  flex:0 0 auto;
  height:38px;
  width:100%;
  display:flex;align-items:center;justify-content:center;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent);
  font-size:10.5px;letter-spacing:.16em;
  background:color-mix(in srgb, var(--ih-ink) 2%, transparent)}
.ih-brand-card__wordmark{
  font-weight:700;font-size:17px;color:var(--ih-ink);
  letter-spacing:-.01em}
@media (max-width:639px){
  .ih-brand-card{height:148px}
  .ih-brand-card__logo{padding:14px 18px}
  .ih-brand-card__logo img{max-height:46px;max-width:80%}
  .ih-brand-card__label{height:32px;font-size:10px;letter-spacing:.14em}
}
/* ==================================================================== */

/* ====================================================================
 * WAVE 1 — BRAND CARD STRICT ALIGNMENT (2026-06-08c)
 * Cascade-final overrides. Strict normalization so heterogeneous logo
 * aspects (Apple icon, Samsung wordmark, Huawei/Pixel composite, etc.)
 * occupy the same visual zone with a unified baseline label.
 * ==================================================================== */
.ih-brand-card{
  height:160px !important;
  padding:0 !important;
  gap:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:18px}
.ih-brand-card__logo{
  flex:1 1 auto !important;
  width:100% !important;
  height:auto !important;
  display:grid !important;
  place-items:center !important;
  padding:16px 20px !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  overflow:hidden}
.ih-brand-card__logo img{
  max-height:40px !important;
  max-width:72% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  margin:0 auto !important}
.ih-brand-card__label{
  flex:0 0 38px !important;
  width:100% !important;
  height:38px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-top:1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent) !important;
  background:color-mix(in srgb, var(--ih-ink) 1.5%, transparent) !important;
  font-size:10.5px !important;
  letter-spacing:.16em !important;
  font-weight:600 !important;
  color:var(--ih-ink-soft) !important;
  margin:0 !important;
  padding:0 !important}

/* Tablet */
@media (min-width:640px) and (max-width:1023px){
  .ih-brand-card{height:152px !important}
  .ih-brand-card__logo{padding:14px 18px !important}
  .ih-brand-card__logo img{max-height:38px !important;max-width:74% !important}
}

/* Mobile */
@media (max-width:639px){
  .ih-brand-card{height:138px !important}
  .ih-brand-card__logo{padding:12px 16px !important}
  .ih-brand-card__logo img{max-height:34px !important;max-width:76% !important}
  .ih-brand-card__label{flex-basis:32px !important;height:32px !important;
    font-size:10px !important;letter-spacing:.14em !important}
}
/* ==================================================================== */

/* ====================================================================
 * PHASE 5.1 — PREMIUM VISUAL REFINEMENT (booking + diagnostic surfaces)
 *
 * Scope: 5 funnel screens — Repair Selection · Store Selection ·
 *        Schedule Selection · Booking Confirmation · Booking Success
 * Method: additive override block (last-rule-wins specificity).
 * Rollback: delete everything between the two PHASE-5.1 markers below,
 *           OR run /var/backups/p5_visual_freeze/BASELINE_P5_VISUAL_FREEZE_20260623_2333/ROLLBACK.sh
 * Date: 2026-06-24
 * Checkpoint: BASELINE_P5_VISUAL_FREEZE_20260623_2333
 * Palette:
 *   - Page surface       #FAF9F7 (warm ivory layer)
 *   - Working cards      #FFFFFF (pure white)
 *   - Hairline border    rgba(0,0,0,.06) (soft black at 6%)
 *   - Very subtle shadow  layered ambient + key, low alpha
 * No animations introduced. No gradients introduced. No new shapes.
 * ==================================================================== */
/* PHASE-5.1-BEGIN */

body.ih-body{ background:#FAF9F7; }

.ih-repair-pick,
.ih-store-card,
.ih-schedule__day,
.ih-confirm__id,
.ih-done__panel{
  background:#FFFFFF !important;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 2px 8px rgba(0,0,0,.03) !important;
}

/* Hover: feedback via border darken only — no translate, no scale. */
.ih-repair-pick:hover,
.ih-store-card:hover,
.ih-schedule__day:hover,
.ih-confirm__id:hover,
.ih-done__panel:hover{
  border-color:rgba(0,0,0,.16) !important;
  background:#FFFFFF !important;
  transform:none !important;
}

/* Selected (Repair Selection card). Solid ink border, no gradient, no lift. */
.ih-repair-pick:has(input:checked){
  background:#FFFFFF !important;
  border-color:#1d1d1f !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,.06),
    0 4px 14px rgba(0,0,0,.05) !important;
  transform:none !important;
}

/* Selected (Schedule day pill). Ink fill stays (it carries the meaning),
 * but no transform lift, no overshoot shadow. */
.ih-schedule__day:has(input:checked){
  background:#1d1d1f !important;
  color:#FFFFFF !important;
  border-color:#1d1d1f !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,.10),
    0 4px 14px rgba(0,0,0,.06) !important;
  transform:none !important;
}

/* Dark mode preserves the relationship (white card → dark card,
 * warm ivory surface → near-black surface). */
@media (prefers-color-scheme:dark){
  body.ih-body{ background:#0a0a0c; }
  .ih-repair-pick,
  .ih-store-card,
  .ih-schedule__day,
  .ih-confirm__id,
  .ih-done__panel{
    background:#15161a !important;
    border:1px solid rgba(255,255,255,.07) !important;
    box-shadow:
      0 1px 2px rgba(0,0,0,.45),
      0 2px 8px rgba(0,0,0,.30) !important;
  }
  .ih-repair-pick:hover,
  .ih-store-card:hover,
  .ih-schedule__day:hover,
  .ih-confirm__id:hover,
  .ih-done__panel:hover{
    border-color:rgba(255,255,255,.18) !important;
    background:#15161a !important;
  }
  .ih-repair-pick:has(input:checked){
    background:#15161a !important;
    border-color:#f5f5f7 !important;
  }
  .ih-schedule__day:has(input:checked){
    background:#f5f5f7 !important;
    color:#1d1d1f !important;
    border-color:#f5f5f7 !important;
  }
}

/* PHASE-5.1-END */
/* ==================================================================== */


/* ==================================================================== */
/* Wave DS 1.0 (5/7) — Repair Selector (Step 4) migrated out of the
 * problem.html inline <style> into the token system. Same layout as
 * Wave UX 4.0/4.2; every hardcoded "Fonfix" hex is now a token, so the
 * combobox + Your-booking summary inherit the palette and dark mode.
 * Scoped to .ih-rs4. */
.ih-rs4__layout { align-items: start; gap: 44px; }
.ih-rs4__main { max-width: 520px; margin: 0 auto; width: 100%; }

/* Trim the hero on Step 4 (smaller title, no redundant sub) so the whole
 * step fits one fold without breaking the hero→section overlap. */
.ih-page-hero:has(+ .ih-rs4) .ih-page-hero__title { font-size: clamp(24px, 3.4vw, 34px) !important; }
.ih-page-hero:has(+ .ih-rs4) .ih-page-hero__sub { display: none !important; }
.ih-page-hero:has(+ .ih-rs4) { padding-bottom: clamp(20px, 2vw, 28px) !important; }
.ih-rs4.ih-section { margin-top: 6px !important; padding-top: 22px !important; background: var(--ih-bg) !important; }

.ih-rs4__device { margin: 2px 0 16px; text-align: center; }
.ih-rs4__img {
  width: 100%; max-width: 232px; height: auto; margin: 0 auto;
  display: block; object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(16,24,40,.14));
}
.ih-rs4__ident { margin-top: 12px; font-size: clamp(17px, 2vw, 21px); letter-spacing: -.01em; }
.ih-rs4__brand { color: var(--ih-ink-soft); font-weight: 500; }
.ih-rs4__dot { color: color-mix(in srgb, var(--ih-ink) 22%, transparent); margin: 0 8px; }
.ih-rs4__model { color: var(--ih-ink); font-weight: 700; }

.ih-rs4__field { margin-bottom: 16px; }
.ih-rs4__label {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ih-ink-soft); margin: 0 0 8px;
}
.ih-rs4__combo { position: relative; }
.ih-rs4__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px; background: var(--ih-surface);
  border: 1px solid var(--ih-line); border-radius: 14px; cursor: pointer;
  font-size: 16px; color: var(--ih-ink); text-align: left; transition: border-color .16s, box-shadow .16s;
}
.ih-rs4__trigger:hover { border-color: color-mix(in srgb, var(--ih-ink) 24%, transparent); }
.ih-rs4__trigger:focus-visible,
.ih-rs4__combo.is-open .ih-rs4__trigger {
  outline: none; border-color: var(--ih-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ih-accent) 16%, transparent);
}
.ih-rs4__current { font-weight: 600; }
.ih-rs4__combo:not(.has-value) .ih-rs4__current { color: color-mix(in srgb, var(--ih-ink) 40%, transparent); font-weight: 500; }
.ih-rs4__chev { width: 20px; height: 20px; color: var(--ih-ink-soft); transition: transform .2s ease; flex: none; }
.ih-rs4__combo.is-open .ih-rs4__chev { transform: rotate(180deg); }

.ih-rs4__list {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  background: var(--ih-surface); border: 1px solid var(--ih-line); border-radius: 16px;
  box-shadow: var(--ih-shadow-lg);
  max-height: 336px; overflow-y: auto;
  opacity: 0; transform: translateY(-6px) scale(.99);
  transition: opacity .16s ease, transform .16s ease;
}
.ih-rs4__combo.is-open .ih-rs4__list { opacity: 1; transform: translateY(0) scale(1); }
.ih-rs4__list[hidden] { display: none; }
.ih-rs4__list::-webkit-scrollbar { width: 10px; }
.ih-rs4__list::-webkit-scrollbar-thumb { background: var(--ih-line); border-radius: 99px; border: 3px solid var(--ih-surface); }
.ih-rs4__opt {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 11px; cursor: pointer; transition: background .12s;
}
.ih-rs4__opt:hover, .ih-rs4__opt.is-active { background: color-mix(in srgb, var(--ih-ink) 4%, transparent); }
.ih-rs4__opt-name { flex: 1; font-weight: 600; color: var(--ih-ink); }
.ih-rs4__opt-price { color: var(--ih-ink-soft); font-variant-numeric: tabular-nums; }
.ih-rs4__opt-check { width: 16px; height: 12px; color: var(--ih-accent); opacity: 0; flex: none; }
.ih-rs4__opt[aria-selected="true"] .ih-rs4__opt-check { opacity: 1; }
.ih-rs4__opt[aria-selected="true"] .ih-rs4__opt-name { color: var(--ih-accent); }

.ih-rs4__stats { margin: 4px 0 8px; border-top: 1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent); }
.ih-rs4__stat {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 15px 2px; border-bottom: 1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent);
}
.ih-rs4__stat-k { color: var(--ih-ink-soft); font-size: 14px; }
.ih-rs4__stat-v { font-size: 17px; font-weight: 700; color: var(--ih-ink); font-variant-numeric: tabular-nums; }
.ih-rs4__price { font-size: 22px; }

.ih-rs4__card {
  margin: 18px 0; padding: 16px 18px; background: var(--ih-bg-alt);
  border: 1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent); border-radius: 14px;
}
.ih-rs4__card-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ih-ink-soft); margin: 0 0 5px; }
.ih-rs4__card-body { margin: 0; color: color-mix(in srgb, var(--ih-ink) 82%, transparent); font-size: 14.5px; line-height: var(--ih-leading-body); white-space: pre-line; }

.ih-rs4__continue { margin-top: 16px; width: 100%; justify-content: center; }
.ih-rs4__continue:disabled { opacity: .45; cursor: not-allowed; }
.ih-rs4__empty { text-align: center; padding: 24px 0; }

/* Your booking — elevated premium summary (Apple/Linear/Stripe language). */
.ih-rs4__aside {
  position: sticky; top: 88px; padding: 22px 22px 18px;
  border: 1px solid color-mix(in srgb, var(--ih-ink) 6%, transparent); border-radius: 16px; background: var(--ih-surface);
  box-shadow: var(--ih-shadow-sm);
}
.ih-rs4__aside [hidden] { display: none; }
.ih-rs4__aside .ih-flow-summary__eyebrow {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ih-ink) 40%, transparent); font-weight: 600; margin: 0 0 12px;
}
.ih-rs4__aside .ih-flow-summary__list { margin: 0; }
.ih-rs4__aside .ih-flow-summary__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--ih-ink) 5%, transparent);
}
.ih-rs4__aside .ih-flow-summary__row:last-of-type { border-bottom: 0; }
.ih-rs4__aside dt { color: var(--ih-ink-soft); font-size: 13px; font-weight: 500; margin: 0; }
.ih-rs4__aside dd { margin: 0; color: var(--ih-ink); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ih-rs4__aside .ih-flow-summary__note { margin: 14px 0 0; font-size: 12px; color: color-mix(in srgb, var(--ih-ink) 40%, transparent); line-height: 1.5; }

@media (max-width: 860px) {
  .ih-rs4__layout { gap: 26px; }
  .ih-rs4__aside { position: static; }
  .ih-rs4__img { max-width: 220px; }
}

/* ============================================================
 * Wave NAV 2.1 — brand cards: remove the category label repeated under
 * every logo (the page hero already states the category). Authoritative
 * override placed LAST because several earlier .ih-brand-card__label
 * blocks (incl. one with `display:flex !important`, ~line 3360) would
 * otherwise win. Hidden via CSS so brand.html (user WIP) stays untouched.
 * ============================================================ */
.ih-brand-card__label{ display:none !important; }

/* ============================================================
 * Wave BOOKING UX 1.0 — Steps 2 & 3 (Choose brand / Choose model):
 * drop the "Your booking" summary sidebar so the choices use the full
 * width. .ih-flow-layout--wide turns the 2-col flow into a full-width
 * block; brand/model grids redistribute into 5 desktop columns (bigger
 * logos, fewer rows). Step 4+ keeps the summary. Sub-desktop layout and
 * responsiveness are unchanged.
 * ============================================================ */
.ih-flow-layout--wide{display:block;max-width:var(--ih-maxw)}
.ih-flow-layout--wide .ih-flow-layout__main{max-width:none}
@media (min-width:940px){
  .ih-flow-layout--wide .ih-grid--brands{grid-template-columns:repeat(5,1fr);gap:20px}
  .ih-flow-layout--wide .ih-grid--models{grid-template-columns:repeat(5,1fr);gap:22px}
}

/* ============================================================
 * Wave HOME/BOOK DEVICES 2.1 — premium PNG presence + per-category
 * balance. Applies to the Home iconrow and to Book Step 1 ONLY via the
 * .ih-devices--photo modifier — the Diagnostic .ih-grid--devices (no
 * modifier) keeps its SVGs untouched. Per-slug widths (img[src*=...])
 * so no device looks smaller than the others. object-fit:contain,
 * never cropped; images shrink on narrow screens (max-width:100%).
 * ============================================================ */

/* — Home "What do you need fixed?" — bigger, editorial — */
@media (min-width:760px){ .ih-iconrow{max-width:700px} }
.ih-iconrow__icon{width:auto;height:auto;min-height:104px;align-items:center;overflow:visible}
.ih-iconrow__icon img{width:auto;height:auto;max-width:100%;transform:none;object-fit:contain}
.ih-iconrow__icon img[src*="smartphones.ie"]{width:118px}
.ih-iconrow__icon img[src*="mac.ie"]{width:150px}
.ih-iconrow__icon img[src*="tablet.ie"]{width:168px}
.ih-iconrow__icon img[src*="wearables.ie"]{width:152px}
.ih-iconrow__icon img[src*="consoles.ie"]{width:140px}
.ih-iconrow__icon img[src*="scooters.ie"]{width:104px}

/* — Book Step 1 (.ih-devices--photo) — big, card stays clean — */
.ih-devices--photo .ih-tile__media{aspect-ratio:auto;max-width:none;height:auto;min-height:132px}
.ih-devices--photo .ih-tile__media img{width:auto;height:auto;max-width:100%;transform:none;object-fit:contain}
.ih-devices--photo .ih-tile__media img[src*="smartphones.ie"]{width:150px}
.ih-devices--photo .ih-tile__media img[src*="mac.ie"]{width:186px}
.ih-devices--photo .ih-tile__media img[src*="tablet.ie"]{width:200px}
.ih-devices--photo .ih-tile__media img[src*="wearables.ie"]{width:186px}
.ih-devices--photo .ih-tile__media img[src*="consoles.ie"]{width:174px}
.ih-devices--photo .ih-tile__media img[src*="scooters.ie"]{width:132px}