/* ============================
   Loja Hinode — UI 2025 (apenas CSS)
   - Tema Claro (Padrão) e Escuro (Opcional via JS: html[data-theme="dark"])
   - Design moderno, responsivo e com persistência de tema.
   - CORREÇÃO: Touch Action e Scroll Snap para Mobile UX. (Versão Final)
   ============================ */
/* Base + Tema + Layout */
:root{ --bg:#fff; --bg-2:#f7f9fc; --panel:#fff; --line:#e6ebf2; --text:#0f172a; --muted:#5f6b85; --brand:#2563eb; --brand-strong:#1e40af; --accent:#16a34a; --price:#d97706; --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.25rem; --space-5:1.75rem; --space-6:2.25rem; --rad-lg:18px; --rad:14px; --rad-sm:10px; --shadow:0 14px 30px rgba(15,23,42,.08), 0 3px 8px rgba(15,23,42,.06); --shadow-soft:0 10px 24px rgba(15,23,42,.06); --ring:0 0 0 3px color-mix(in srgb,var(--brand) 28%,transparent); }
html[data-theme="dark"]{ --bg:#0b0f15; --bg-2:#101725; --panel:#0f1522; --line:#1c2738; --text:#e7edf6; --muted:#a6b4c6; --brand:#4aa3ff; --brand-strong:#2d6ebf; --accent:#22c55e; --price:#f59e0b; --shadow:0 16px 34px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.25); --shadow-soft:0 12px 28px rgba(0,0,0,.28); }
*{ box-sizing:border-box; } html{ scroll-behavior:smooth; overflow-x:hidden; } body{ margin:0; color:var(--text); background:var(--bg); font:400 16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; touch-action:pan-y; }
a{ color:var(--brand); text-decoration:none; } a:hover{ color:var(--brand-strong); } img{ display:block; max-width:100%; height:auto; }
*{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--brand) 55%,var(--line)) transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--brand) 55%,var(--line)); border-radius:999px; }
.wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:clamp(16px,4vw,24px); touch-action:pan-y pinch-zoom; } .section{ padding-block:var(--space-5); }
/* Header */
.hdr{ position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(10px) saturate(140%); border-bottom:1px solid var(--line); }
.top{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) clamp(16px,4vw,24px); } .brand{ font-weight:800; letter-spacing:.2px; color:var(--brand); font-size:clamp(1.2rem,2.6vw,1.6rem); }
.nav{ display:flex; gap:var(--space-3); flex:1; flex-wrap:wrap; margin-left: var(--space-2); } .nav a{ color:var(--text); opacity:.9; font-weight:600; } .nav a:hover{ opacity:1; color:var(--brand-strong); } .menu-btn{ display:none; }
.search{ margin-left:auto; display:flex; gap:var(--space-2); } .search input{ width:min(48vw,420px); height:46px; padding:0 var(--space-3); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--rad); color:var(--text); outline:none; transition:border-color .2s,box-shadow .2s; } .search input::placeholder{ color:var(--muted); } .search input:focus{ border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); box-shadow:var(--ring); }
/* Botões */
.btn{ appearance:none; border:0; cursor:pointer; background:var(--brand); color:#fff; font-weight:800; height:46px; padding:0 var(--space-4); border-radius:var(--rad); box-shadow:var(--shadow-soft); transition:transform .08s ease,box-shadow .2s ease,background .2s ease; display:inline-flex; align-items:center; justify-content:center; }
.btn:hover{ transform:translateY(-1px); } .btn:active{ transform:translateY(0); } .btn.alt{ background:var(--accent); } .btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--line); box-shadow: none; } .btn.warn{ background:#ef4444; } .btn.sm{ height:34px; padding:0 12px; font-weight:800; border-radius:10px; }
/* Hero */
.hero{ margin-top:var(--space-3); background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 6%,#fff) 0%,var(--bg) 64%); border:1px solid var(--line); border-radius:clamp(16px,2vw,22px); padding:clamp(18px,3.5vw,36px); display:grid; gap:var(--space-4); grid-template-columns:1.25fr 1fr; align-items:center; overflow:hidden; } html[data-theme="dark"] .hero{ background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--bg)) 0%,var(--bg) 64%); }
.hero-title{ font-weight:900; letter-spacing:-.015em; line-height:1.15; font-size:clamp(1.9rem,4vw,2.7rem); margin:.2rem 0 .6rem; } .hero-title .grad{ background:linear-gradient(90deg,var(--brand),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: var(--space-2); } .badge{ display:inline-flex; align-items:center; height:28px; padding:0 12px; background:var(--brand); color:#fff; font-weight:800; border-radius:999px; font-size:.82rem; box-shadow:var(--shadow-soft); } html[data-theme="dark"] .badge{ color: var(--bg); }
.hero-cta{ display:flex; gap:var(--space-2); margin-top:var(--space-2); } .hero-cards{ width:100%; }
/* Carrossel: Aplicado Scroll Snap e touch-action:pan-x para gestos */
.scroller.auto{ overflow-x:auto; scroll-snap-type:x mandatory; touch-action:pan-x; } .scroller.auto .inner{ display:flex; gap:var(--space-2); }
.scroller{ display:flex; gap:var(--space-2); overflow-x:auto; overflow-y:hidden; padding-bottom:6px; scroll-snap-type:x mandatory; scroll-padding-inline:16px; -webkit-overflow-scrolling:touch; touch-action:pan-x; /* Importante para rolagem suave */ overscroll-behavior-x:contain; } .scroller .card{ scroll-snap-align:start; flex:0 0 clamp(220px,48vw,280px); }
.grid{ display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); margin-top:var(--space-3); touch-action:pan-y pinch-zoom; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--rad-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-soft); transition:transform .15s ease,box-shadow .22s ease,border-color .22s ease; } .card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--brand) 22%,var(--line)); } .card .p{ padding:var(--space-3); }
.card img{ width:100%; height:clamp(200px,28vw,240px); object-fit:contain; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--rad); transform:translateZ(0); touch-action:pan-y pinch-zoom; } .card-title{ font-weight:800; line-height:1.35; min-height:2.6em; } .price{ color:var(--price); font-weight:900; margin-top:.35rem; font-size:1.12rem; } .muted.brand{ color:var(--muted); font-size:.86rem; margin-top: .2rem; }
.card.mini img{ height: 120px; } .card.mini .p{ padding: var(--space-2); } .card.mini .card-title{ font-size: .9rem; min-height: 2.4em; } .card.mini .price{ font-size: 1rem; }
/* Setas do Carrossel (Desktop Only) */
.scroller-wrap{ position:relative; } .scroller-arrow{ display:none; }
@media(hover:hover) and (pointer:fine){ .scroller-arrow{ display:flex; align-items:center; justify-content:center; position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; background:color-mix(in srgb,var(--panel) 80%,transparent); backdrop-filter:blur(4px); border:1px solid var(--line); color:var(--text); font-size:28px; font-weight:700; line-height:1; cursor:pointer; box-shadow:var(--shadow-soft); transition:transform .1s,background .2s,opacity .2s; opacity:0; } .scroller-wrap:hover .scroller-arrow{ opacity:1; } .scroller-arrow:hover{ background:var(--panel); border-color:var(--brand); } .scroller-arrow:active{ transform:translateY(-50%) scale(0.95); } .scroller-arrow.prev{ left:12px; } .scroller-arrow.next{ right:12px; } .scroller-arrow[disabled]{ opacity:0.1 !important; cursor:not-allowed; } }
/* Breadcrumbs & Chips */
.breadcrumbs{ color:var(--muted); font-size:.92rem; margin:var(--space-3) 0; } .breadcrumbs a{ color:var(--brand); }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin:var(--space-2) 0 var(--space-3); } .chip{ display:inline-flex; align-items:center; height:34px; padding:0 12px; background:var(--bg-2); color:var(--text); border:1px solid var(--line); border-radius:999px; font-weight:700; font-size:.9rem; } .chip.on{ background:color-mix(in srgb,var(--brand) 8%,var(--bg)); border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); color:var(--brand-strong); } .chip.link{ background: transparent; border: none; font-weight: 600; color: var(--brand); }
/* Página de Produto */
.prod{ display:grid; gap:var(--space-4); grid-template-columns:1.08fr 1fr; touch-action:pan-y pinch-zoom; } @media(max-width:900px){ .prod{ grid-template-columns:1fr; } }
.gallery{ display:grid; gap:var(--space-2); } .gallery-main img{ width:100%; height:min(60vh,520px); object-fit:contain; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--rad-lg); transform:translateZ(0); touch-action:pan-y pinch-zoom; }
/* Miniaturas (Thumbs): Regras de rolagem horizontal otimizadas */
.thumbs{
    display:flex;
    gap:10px;
    padding:10px 2px 12px;
    overflow-x:auto; /* Habilita o scroll */
    overflow-y:hidden;
    scroll-snap-type:x mandatory; /* Snap suave */
    scroll-padding-inline:10px;
    -webkit-overflow-scrolling:touch; /* Inércia no iOS */
    overscroll-behavior-x:contain;
    touch-action:pan-x; /* Permite deslizar lateralmente sem mover a página verticalmente */
    border-radius:12px;
}
.thumbs::-webkit-scrollbar{ height:8px; }
.thumbs::-webkit-scrollbar-thumb{ background: color-mix(in srgb,var(--brand) 55%, var(--line)); border-radius:999px; }
.th{
    flex:0 0 auto;
    height:86px;
    width:auto;
    aspect-ratio:1/1;
    object-fit:contain;
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:var(--rad);
    cursor:pointer;
    scroll-snap-align:start;
    transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease;
    touch-action: manipulation; /* Garante que o toque funcione para rolagem */
}
.th:hover{ border-color:color-mix(in srgb,var(--brand) 30%,var(--line)); transform:translateY(-1px); }
.title{ margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.25; } .price-lg{ color:var(--price); font-weight:900; font-size:clamp(1.6rem,3.4vw,2.2rem); margin:.6rem 0 .9rem; } .desc{ color:var(--text); opacity:.94; } .actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }
/* Modal Lead */
.modal{ display:none; position:fixed; inset:0; z-index:70; background:color-mix(in srgb,#000 70%,transparent); align-items:center; justify-content:center; padding:var(--space-3); }
.modal-card{ width:100%; max-width:560px; background:var(--panel); border:1px solid var(--line); border-radius:var(--rad-lg); padding:var(--space-4); box-shadow:var(--shadow); }
.modal-card input:not([type="checkbox"]){ width:100%; height:46px; padding:0 var(--space-3); margin-bottom:var(--space-2); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--rad); color:var(--text); }
.modal-actions{ display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
/* FAB WhatsApp */
.fab{ position:fixed; right:16px; bottom:16px; z-index:60; background:#25D366; color:#fff; font-weight:900; padding:12px 18px; border-radius:999px; box-shadow:0 10px 26px rgba(37,211,102,.35); }
/* Footer */
footer{ border-top:1px solid var(--line); color:var(--muted); text-align:center; padding:var(--space-5) 0; margin-top:var(--space-6); background:color-mix(in srgb,var(--bg) 96%,transparent); } html[data-theme="dark"] footer{ background:color-mix(in srgb,var(--bg) 96%,transparent); }
/* Admin Styles */
.section.card.p{ background:var(--panel); border:1px solid var(--line); border-radius:var(--rad-lg); padding:var(--space-3); box-shadow:var(--shadow-soft); margin-bottom: var(--space-4); }
.card.p label { display: block; font-weight: 700; margin-bottom: 4px; font-size: .9em; }
.card.p input:not([type=checkbox]):not([type=submit]), .card.p textarea { width:100%; height:46px; padding:0 var(--space-3); border-radius:var(--rad); background:var(--bg-2); border:1px solid var(--line); color:var(--text); margin-bottom:var(--space-2); }
.note{ padding:var(--space-2) var(--space-3); margin-bottom:var(--space-3); border-radius:var(--rad); border:1px solid transparent; font-size: 0.95em; }
.note.ok{ background:color-mix(in srgb,var(--accent) 10%,transparent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); color:color-mix(in srgb,var(--accent) 80%,var(--text)); }
.note.error{ background:color-mix(in srgb,#ef4444 10%,transparent); border-color:color-mix(in srgb,#ef4444 40%,transparent); color:color-mix(in srgb,#ef4444 80%,var(--text)); }
html[data-theme="dark"] .note.ok{ color:color-mix(in srgb,var(--accent) 85%,var(--text)); }
html[data-theme="dark"] .note.error{ color:color-mix(in srgb,#f87171 85%,var(--text)); }
.step{ border:1px dashed var(--line); border-radius:var(--rad); padding:var(--space-3); margin-top:var(--space-2); } .step h3{ margin:0 0 6px; } .step p{ margin: 0 0 10px; font-size: 0.9em; color: var(--muted); }
.pill{ display:inline-block; margin:.35rem .5rem 0 0; padding:.4rem .7rem; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); color:var(--muted); font-size: .85em; }
.progress{ height:10px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; overflow:hidden; margin:.6rem 0; } .progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--accent)); transition:width .3s; } .progress.indeterminate i{ animation:slide 1.2s infinite linear; width: 30%; } @keyframes slide{ from{ transform:translateX(-100%);} to{ transform:translateX(330%);} }
.stats{ margin-top: 10px; } .muted.msg{ margin-top: 6px; font-size: .9em; }
.log{ height:200px; overflow:auto; background:var(--bg-2); border:1px solid var(--line); padding:12px; border-radius:10px; font-family: monospace; font-size: .85em; white-space: pre-wrap; word-break: break-all; } html[data-theme="dark"] .log { background: #0f151e; border-color: var(--line); }
.table-wrap{ overflow:auto; } .table-wrap table.t thead th{ text-align:left; font-size:.9rem; color:var(--muted); font-weight:800; border-bottom:1px solid var(--line); padding:8px 10px; white-space: nowrap; } .table-wrap table.t tbody td{ background:var(--panel); padding:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align: middle; } .table-wrap table.t tbody tr td:first-child{ border-left:1px solid var(--line); border-radius:10px 0 0 10px; } .table-wrap table.t tbody tr td:last-child{ border-right:1px solid var(--line); border-radius:0 10px 10px 0; }
.badge{ display:inline-flex; align-items:center; height:26px; padding:0 10px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; font-size:.82rem; font-weight:800; }
.status-novo{ color:#1d4ed8; border-color:#93c5fd; background:#eff6ff; } .status-contatado{ color:#0f766e; border-color:#99f6e4; background:#ecfeff; } .status-negociacao{ color:#a16207; border-color:#fde68a; background:#fffbeb; } .status-convertido{ color:#065f46; border-color:#86efac; background:#ecfdf5; } .status-perdido{ color:#991b1b; border-color:#fecaca; background:#fef2f2; }
.btn.sm[href*="wa.me"]{ background:#25D366; color:#fff; box-shadow:0 4px 12px rgba(37,211,102,.3); } .btn.sm[href*="wa.me"]:hover{ background:#1ebe5d; }
.pill.sm{ background:transparent; border:1px solid var(--line); color:var(--text); height:32px; padding:0 10px; border-radius:999px; font-weight:800; cursor:pointer; font-size: .8rem; } .pill.sm:hover{ border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); color:var(--brand-strong); }
.h2.sub{ margin-top:20px; border-top:1px solid var(--line); padding-top:16px; font-size: 1.25rem; } .muted.sub { font-size: 0.9em; margin-bottom: 10px; color: var(--muted); }
/* Admin Plus Styles */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:8px} .kpi-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px} .kpi-top{color:var(--muted);font-weight:700;font-size:.85rem} .kpi-num{font-weight:900;font-size:1.6rem;margin-top:4px} /* Heatmap */ .heatmap{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin-top:10px} .heatmap .cell{height:16px;border-radius:4px;background:var(--bg-2);border:1px solid var(--line)} .heatmap .cell.l1{background:#d1fae5}.heatmap .cell.l2{background:#a7f3d0} .heatmap .cell.l3{background:#6ee7b7}.heatmap .cell.l4{background:#34d399} /* Kanban */ .kanban-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .kan-col{border:1px dashed var(--line);border-radius:12px;padding:10px;min-height:200px;background:var(--bg-2)} .kan-title{font-weight:900;margin-bottom:6px;color:var(--muted)} .kan-list{min-height:10px} .kan-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px;cursor:grab;display:grid;gap:4px} .kan-card .top{display:flex;justify-content:space-between;align-items:center} .kan-card .name{font-weight:800} .kan-card .muted{font-size:.85rem;color:var(--muted)} .kan-card.sel{outline:2px solid var(--brand)} /* Drawer */ .drawer{position:fixed;inset:auto 0 0 auto;top:0;width:min(420px,92vw);background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--shadow);height:100vh;transform:translateX(110%);transition:.2s;z-index:80;padding:14px; overflow-y: auto;} .drawer.open{transform:translateX(0)} .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .drawer-title{font-weight:900;font-size:1.2rem} .drawer-sub{color:var(--muted);font-size:.9rem} .drawer-block{margin:10px 0} .drawer .list{display:grid;gap:6px;margin-top:6px} .drawer-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} /* Responsivo */ @media(max-width:1100px){.kanban-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.kanban-grid{grid-template-columns:1fr}}
/* Acessibilidade */
:where(a,button,.btn,.chip,.th,.card,input){ outline:none; } :where(a,button,.btn,.chip,.th,.card,input:not([type=checkbox])):focus-visible{ box-shadow:var(--ring); }
@media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }
/* Mobile Nav */
@media(max-width:860px){ .menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--bg-2); border:1px solid var(--line); color:var(--text); cursor: pointer; } .nav{ position:fixed; inset:66px 0 auto 0; background:var(--panel); border-bottom:1px solid var(--line); padding:var(--space-3); gap:var(--space-2); display:none; flex-direction: column; z-index: 35; } html.menu-open .nav{ display:flex; } .search{ margin-left:0; flex-grow: 1; } .top { flex-wrap: wrap; padding-bottom: var(--space-2); } }
/* Theme Toggle */
.theme-switch{ position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 10px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); cursor:pointer; user-select:none; } .theme-switch input{ position:absolute; inset:0; opacity:0; cursor:pointer; } .theme-switch .icon{ font-size:16px; line-height:1; } .theme-switch .sun{ opacity:1; transition:.2s; } .theme-switch .moon{ opacity:.45; transition:.2s; }
html[data-theme="dark"] .theme-switch{ background:color-mix(in srgb,var(--brand) 6%,var(--bg-2)); border-color:color-mix(in srgb,var(--brand) 28%,var(--line)); } html[data-theme="dark"] .theme-switch .sun{ opacity:.45; } html[data-theme="dark"] .theme-switch .moon{ opacity:1; }
/* Lightbox/Zoom */
.lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.75); z-index:1000; padding:24px; } .lightbox.open{ display:flex; } .lightbox img{ max-width:100vw; max-height:85vh; object-fit:contain; border-radius:14px; background:#fff; } html[data-theme="dark"] .lightbox img{ background:var(--bg-2); } .lightbox .close{ position:absolute; top:14px; right:14px; border:0; border-radius:999px; padding:10px 14px; font-weight:800; background:#f04444; color:#fff; cursor: pointer; font-size: 1.2rem; line-height: 1; }


/* ===== PATCH MOBILE – MINIATURAS DO PRODUTO (thumbs) ===== */

/* Pais não capturam o gesto lateral das thumbs */
.gallery,
.gallery-main { touch-action: pan-y pinch-zoom; }

/* Pista horizontal das miniaturas */
.thumbs{
  display:flex;
  gap:10px;
  padding:10px 2px 12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:10px;
  -webkit-overflow-scrolling:touch;   /* inércia iOS */
  overscroll-behavior-x:contain;      /* não arrasta a página */
  touch-action:pan-x;                  /* gesto lateral suave */
  border-radius:12px;
  contain: content;                    /* performance */
  scrollbar-gutter: stable both-edges; /* evita “pulo” do conteúdo */
}
/* barra de rolagem discreta */
.thumbs::-webkit-scrollbar{ height:8px; }
.thumbs::-webkit-scrollbar-thumb{
  background: color-mix(in srgb,var(--brand) 55%, var(--line));
  border-radius:999px;
}

/* Cada thumb com área de toque confortável e snap */
.th{
  flex:0 0 auto;
  height:86px;
  aspect-ratio:1/1;
  object-fit:contain;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--rad);
  cursor:pointer;
  scroll-snap-align:start;
  transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease;
  touch-action:manipulation;   /* toque responde rápido */
  user-select:none;            /* evita seleção acidental */
  -webkit-user-drag:none;      /* evita “arrastar imagem” no iOS */
  pointer-events:auto;
}
.th:hover{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--line));
  transform:translateY(-1px);
}
.th:active{ transform: scale(.99); }

/* (Opcional) deixa o snap mais “grudado” em cada parada */
.thumbs { scroll-snap-stop: always; }