html,body{margin:0;padding:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: vitrine estilo app de delivery — busca em pílula, banners e fileiras em carrossel horizontal, sacola fixa no rodapé */
:root {
  --bg: #ffffff;
  --soft: #f5f4f7;
  --ink: #1a1820;
  --muted: #6e6a78;
  --line: #ebe9ef;
  --brand: #e0245e;        /* framboesa DANI */
  --brand-ink: #ffffff;
  --brand-soft: #fde8ef;
  --ok: #138a4c;
  --warn: #b86a00;
  --out: #9a3434;
  --shadow: 0 2px 10px rgba(26,24,32,.08);
  --f-display: "Urbanist", "Avenir Next", system-ui, sans-serif;
  --f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121116; --soft: #1d1b23; --ink: #f1eff5; --muted: #a7a2b3; --line: #2a2731;
  --brand: #ff5c8a; --brand-ink: #24060f; --brand-soft: #3a1622; --ok: #4fd08c; --warn: #f2b14f; --out: #f08c8c;
  --shadow: 0 2px 10px rgba(0,0,0,.4); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #121116; --soft: #1d1b23; --ink: #f1eff5; --muted: #a7a2b3; --line: #2a2731;
  --brand: #ff5c8a; --brand-ink: #24060f; --brand-soft: #3a1622; --ok: #4fd08c; --warn: #f2b14f; --out: #f08c8c;
  --shadow: 0 2px 10px rgba(0,0,0,.4); color-scheme: dark }

* { box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.45; padding-bottom: 96px }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg) }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
h1, h2, h3 { font-family: var(--f-display); margin: 0; line-height: 1.15; text-wrap: balance }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer; -webkit-tap-highlight-color: transparent }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

/* Topo */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg) }
.top .wrap { display: flex; align-items: center; gap: 12px; padding-block: 12px }
.logo { font-family: var(--f-display); font-weight: 800; font-size: 26px; letter-spacing: .04em; color: var(--brand); flex: none }
.logo small { display: block; font-size: 10px; letter-spacing: .22em; color: var(--muted); font-weight: 700; margin-top: -4px }
.search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--soft); border-radius: 999px; padding: 0 14px; height: 44px }
.search svg { flex: none; color: var(--muted) }
.search input { border: 0; background: none; outline: none; width: 100%; min-width: 0; height: 100% }
.icon-btn { flex: none; height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--soft); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink) }
.icon-btn.brand { background: var(--brand); color: var(--brand-ink) }
@media (max-width: 520px) { .hide-sm { display: none } }

/* Carrossel genérico */
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 4px 8px; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px)) }
.rail::-webkit-scrollbar { display: none }
.rail > * { scroll-snap-align: start; flex: none }
@media (prefers-reduced-motion: no-preference) { .rail { scroll-behavior: smooth } }
.sec { padding-top: 22px }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px }
.sec-head h2 { font-size: 20px; font-weight: 800 }
.link { border: 0; background: none; color: var(--brand); font-weight: 600; font-size: 14px; padding: 4px 0 }
.arrows { display: flex; gap: 6px }
.arrows button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font-size: 16px; line-height: 1 }
@media (hover: none) { .arrows { display: none } }

/* Banners */
.banner { width: min(86%, 520px); aspect-ratio: 2.2 / 1; max-width: 100%; border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; position: relative; overflow: hidden; border: 0; text-align: left }
.banner h3 { font-size: clamp(20px, 4.4vw, 28px); font-weight: 800; max-width: 14ch; position: relative }
.banner p { margin: 0; font-size: 13.5px; opacity: .92; max-width: 30ch; position: relative }
.banner .cta { align-self: flex-start; background: rgba(255,255,255,.95); color: #1a1820; border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; position: relative }
.banner::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.14) }
.banner.b1 { background: linear-gradient(135deg, #e0245e, #ff7a59) }
.banner.b2 { background: linear-gradient(135deg, #3b2a8f, #7b5cff) }
.banner.b3 { background: linear-gradient(135deg, #0d6b5c, #2fb38f) }
.dots { display: flex; gap: 6px; justify-content: center; margin-top: 4px }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .2s }
.dots i.on { width: 18px; background: var(--brand) }

/* Categorias */
.cat { width: 82px; border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; text-align: center }
.cat .ic { width: 72px; height: 72px; border-radius: 22px; background: var(--soft); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--brand); border: 2px solid transparent }
.cat[aria-pressed="true"] .ic { border-color: var(--brand) }
.cat .ic svg { transition: transform .2s ease }
.cat:hover .ic svg { transform: scale(1.08) rotate(-4deg) }
.ph-ic { position: absolute; inset: 0; display: grid; place-items: center }
.ph-ic svg { width: 46%; height: 46%; max-width: 110px; max-height: 110px }
.th .ph-ic svg, .flyer .ph-ic svg { width: 70%; height: 70% }
.th, .flyer, .hero, .ph { position: relative }
.cat span { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* Cartão de produto */
.pc { width: 158px; border: 0; background: none; padding: 0; text-align: left; display: grid; gap: 6px; align-content: start; min-width: 0 }
.grid .pc { width: auto }
.pc .ph { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: 16px; background: var(--soft); overflow: hidden; display: grid; place-items: center }
.pc .ph img { width: 100%; height: 100%; object-fit: cover }
.pc .ph .ini { font-family: var(--f-display); font-weight: 800; font-size: 34px; color: var(--muted); opacity: .5 }
.pc .add { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); color: var(--brand); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 22px; font-weight: 600; line-height: 1; border: 0 }
.pc .tag { position: absolute; left: 8px; top: 8px; background: var(--bg); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700 }
.tag.low { color: var(--warn) } .tag.out { color: var(--out) } .tag.ex { color: var(--muted) }
.pc .price { font-family: var(--f-display); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums }
.pc .name { font-size: 13.5px; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.pc .sub { font-size: 12px; color: var(--muted) }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px }

.empty { background: var(--soft); border-radius: 18px; padding: 32px 20px; text-align: center; color: var(--muted) }
.empty strong { display: block; color: var(--ink); font-family: var(--f-display); font-size: 19px; margin-bottom: 4px }

.encomenda { margin-top: 28px; background: var(--brand-soft); border-radius: 20px; padding: 20px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap }
.encomenda h2 { font-size: 19px; font-weight: 800 }
.encomenda p { margin: 4px 0 0; color: var(--muted); font-size: 14px; max-width: 46ch }
footer { color: var(--muted); font-size: 13px; padding-block: 28px 8px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.selectable { user-select: all; font-variant-numeric: tabular-nums }

/* Botões */
.btn { border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 700; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--ink); font-size: 14.5px }
.btn.primary { background: var(--brand); color: var(--brand-ink) }
.btn.small { padding: 7px 12px; font-size: 13px }
.btn.danger { color: var(--out) }
.btn[disabled] { opacity: .5; cursor: not-allowed }

/* Barra da sacola */
.bagbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); pointer-events: none }
.bagbar button { pointer-events: auto; width: min(560px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 16px; padding: 14px 18px; font-weight: 700; box-shadow: 0 8px 24px rgba(224,36,94,.35) }
.bagbar .count { background: rgba(255,255,255,.22); border-radius: 8px; padding: 2px 8px; font-variant-numeric: tabular-nums }

/* Folhas (bottom sheet) */
.overlay { position: fixed; inset: 0; background: rgba(10,8,14,.5); z-index: 50; display: flex; align-items: flex-end; justify-content: center }
@media (min-width: 700px) { .overlay { align-items: center; padding: 24px } }
.sheet { background: var(--bg); width: min(560px, 100%); max-height: 92%; overflow: auto; border-radius: 24px 24px 0 0; padding: 20px max(18px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); display: grid; gap: 14px }
@media (min-width: 700px) { .sheet { border-radius: 24px } }
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: -6px auto 2px }
.sheet h2 { font-size: 22px; font-weight: 800 }
.sheet .hero { aspect-ratio: 4 / 3; max-width: 100%; border-radius: 18px; background: var(--soft); overflow: hidden; display: grid; place-items: center }
.sheet .hero img { width: 100%; height: 100%; object-fit: cover }
.sheet .hero .ini { font-family: var(--f-display); font-weight: 800; font-size: 60px; color: var(--muted); opacity: .45 }
.kv { display: flex; gap: 8px; flex-wrap: wrap }
.pill { background: var(--soft); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 600 }
.pill.ok { color: var(--ok) } .pill.low { color: var(--warn) } .pill.out { color: var(--out) }
.hint { color: var(--muted); font-size: 13px; margin: 0 }
.field { display: grid; gap: 4px; min-width: 0 }
.field label { font-size: 13px; font-weight: 600 }
.field input, .field textarea, .field select { border: 1px solid var(--line); background: var(--soft); border-radius: 12px; padding: 10px 12px; width: 100%; min-width: 0 }
.field textarea { min-height: 76px; resize: vertical }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
@media (max-width: 460px) { .row2 { grid-template-columns: 1fr } }
.foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap }
.preview { background: var(--soft); border-radius: 12px; padding: 12px; white-space: pre-wrap; font-size: 13.5px; user-select: all }
.line { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center }
.line .th { width: 52px; height: 52px; border-radius: 12px; background: var(--soft); overflow: hidden; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; color: var(--muted) }
.line .th img { width: 100%; height: 100%; object-fit: cover }
.line .info { min-width: 0 }
.line .info strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.line .info span { font-size: 12.5px; color: var(--muted) }
.qty { display: inline-flex; align-items: center; background: var(--soft); border-radius: 999px }
.qty button { border: 0; background: none; width: 32px; height: 32px; font-weight: 700; font-size: 17px; color: var(--brand) }
.qty output { min-width: 24px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums }
.total { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; border-top: 1px solid var(--line); padding-top: 12px }

/* Painel da loja */
.admin { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--bg); border-left: 1px solid var(--line); z-index: 40; display: flex; flex-direction: column; box-shadow: var(--shadow) }
.admin-head { padding: calc(14px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px }
.admin-head h2 { font-size: 20px; font-weight: 800 }
.tabs { display: flex; gap: 6px; padding: 0 18px 12px; border-bottom: 1px solid var(--line); overflow-x: auto }
.tab { border: 0; background: var(--soft); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13.5px; white-space: nowrap }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg) }
.admin-body { overflow: auto; padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; align-content: start }
.inv { border: 1px solid var(--line); border-radius: 16px; padding: 10px; display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center }
.inv .ops { grid-column: 2 / -1; display: flex; gap: 6px; flex-wrap: wrap }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px }
.kpis div { background: var(--soft); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0 }
.kpis span { font-size: 12px; color: var(--muted) }
.kpis strong { font-family: var(--f-display); font-size: 18px; font-variant-numeric: tabular-nums }
.pos { color: var(--ok) } .neg { color: var(--out) }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; z-index: 80; font-weight: 600; font-size: 14px; max-width: calc(100% - 32px) }
/* Controle de quantidade no cartão */
.ctl { position: absolute; right: 8px; bottom: 8px }
.ctl .add { position: static }
.ctl.step { display: flex; align-items: center; background: var(--brand); color: var(--brand-ink); border-radius: 999px; box-shadow: var(--shadow); height: 34px }
.ctl.step button { border: 0; background: none; color: inherit; width: 32px; height: 34px; font-size: 18px; font-weight: 700 }
.ctl.step output { min-width: 16px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums }
.flyer { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--brand-soft); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; color: var(--brand); box-shadow: 0 6px 18px rgba(0,0,0,.2); pointer-events: none }
.flyer img { width: 100%; height: 100%; object-fit: cover }

/* Checkout */
.checkout { position: fixed; inset: 0; z-index: 60; background: var(--soft); overflow: auto; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) }
.co-head { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px) }
.co-head .wrap { display: flex; align-items: center; gap: 10px; padding-block: 12px; max-width: 640px }
.co-head h2 { font-size: 19px; font-weight: 800 }
.back { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--soft); font-size: 20px; line-height: 1 }
.co-body { max-width: 640px; display: grid; gap: 12px; padding-block: 14px }
.co-card { background: var(--bg); border-radius: 18px; padding: 16px; display: grid; gap: 12px; min-width: 0 }
.co-card h3 { font-size: 16px; font-weight: 800; display: flex; justify-content: space-between; align-items: baseline; gap: 8px }
.co-card h3 small { font-family: var(--f-body); font-weight: 500; color: var(--muted); font-size: 13px }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px }
.opt { position: relative; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 2px; cursor: pointer; font-weight: 600; font-size: 14px }
.opt small { font-weight: 400; color: var(--muted); font-size: 12.5px }
.opt input { position: absolute; opacity: 0; pointer-events: none }
.opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft) }
.opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px }
.coupon { display: flex; gap: 8px }
.coupon input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--soft); border-radius: 12px; padding: 10px 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600 }
.applied { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--brand-soft); border: 1.5px dashed var(--brand); border-radius: 14px; padding: 10px 12px }
.applied strong { letter-spacing: .06em }
.msg-err { color: var(--out); font-size: 13px; margin: 0 }
.sum { display: grid; gap: 6px; font-variant-numeric: tabular-nums }
.sum div { display: flex; justify-content: space-between; gap: 10px }
.sum .disc { color: var(--ok); font-weight: 600 }
.sum .big { font-family: var(--f-display); font-weight: 800; font-size: 22px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px }
.co-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--bg); border-top: 1px solid var(--line); padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) }
.co-foot .in { max-width: 608px; margin: 0 auto; display: flex; gap: 8px }
.co-foot .btn.primary { flex: 1; justify-content: space-between; padding: 14px 18px; border-radius: 16px; font-size: 15px }
.co-foot .btn.wa { background: #1fa855; color: #fff }
.store { width: 250px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--bg); padding: 0; text-align: left; display: grid }
.store .cover { height: 74px; position: relative }
.store .logo-s { position: absolute; left: 14px; bottom: -22px; width: 48px; height: 48px; border-radius: 14px; background: var(--bg); border: 3px solid var(--bg); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 18px; box-shadow: var(--shadow) }
.store .txt { padding: 28px 14px 14px; display: grid; gap: 2px }
.store .txt strong { font-family: var(--f-display); font-size: 16px }
.store .txt span { font-size: 12.5px; color: var(--muted) }
.partner-tag { font-size: 11.5px; font-weight: 600; color: var(--brand) }
.lhead { border-radius: 20px; overflow: hidden; background: var(--soft); margin-bottom: 18px }
.lhead .cover { height: 110px; position: relative }
.lhead .logo-s { position: absolute; left: 18px; bottom: -28px; width: 64px; height: 64px; border-radius: 18px; background: var(--bg); border: 4px solid var(--bg); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 24px }
.lhead .txt { padding: 38px 18px 18px; display: grid; gap: 4px }
.lhead h2 { font-size: 24px; font-weight: 800 }
.partners-intro { margin-top: 30px; padding-top: 22px; border-top: 8px solid var(--soft) }
.cp-row { border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap }
.cp-row strong { letter-spacing: .06em }
.cp-row.off { opacity: .55 }

@media (prefers-reduced-motion: no-preference) {
  .bagbar button.bump { animation: bump .35s ease }
  @keyframes bump { 30% { transform: scale(1.04) } 60% { transform: scale(.98) } }
  .ctl.step output.pop { animation: pop .25s ease }
  @keyframes pop { 50% { transform: scale(1.4) } }
  .pc .ph img { transition: transform .2s ease, opacity .3s ease }
  .banner { transition: transform .2s ease }
  .pc:hover .ph img { transform: scale(1.04) }
}

.nofind { background: var(--brand-soft); border-radius: 22px; padding: 26px 20px; display: grid; justify-items: center; gap: 8px; text-align: center }
.nofind svg { border-radius: 20px; background: var(--bg); padding: 8px; width: 76px; height: 76px }
.nofind strong { font-family: var(--f-display); font-size: 20px; font-weight: 800; text-wrap: balance; max-width: 26ch }
.nofind p { margin: 0 0 6px; color: var(--muted); font-size: 14.5px; max-width: 38ch }
.nofind .btn { padding: 13px 22px; max-width: 100% }
.field.invalid input, .field.invalid textarea { border-color: var(--out); background: color-mix(in srgb, var(--out) 8%, var(--soft)) }
/* v12: preço de/por, selos, galeria, variações, pedidos, frete grátis, voo e transições */
.tags { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; flex-wrap: wrap; max-width: calc(100% - 16px) }
.pc .tags .tag { position: static }
.tag.deal, .pill.deal { background: var(--brand); color: var(--brand-ink) }
.prices { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0 }
.prices .minc, .pp-price .un { color: var(--muted); font-size: 12px; font-weight: 600 }
.minq { margin: -4px 0 0; font-size: 14px; color: var(--muted) } .minq b { color: var(--ink, inherit) }
.prices .old { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums }
.price.big { font-family: var(--f-display); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums }
.buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.buy .btn.primary { flex: 1; min-width: 180px; padding-block: 14px }
img.lz { opacity: 0; transition: opacity .3s ease }
img.lz.ok { opacity: 1 }
.ph:has(img.lz:not(.ok)), .hero:has(img.lz:not(.ok)), .slide:has(img.lz:not(.ok)), .th:has(img.lz:not(.ok)) { background: linear-gradient(90deg, var(--soft) 0%, var(--line) 50%, var(--soft) 100%) 0 0 / 200% 100% }
.banner { aspect-ratio: auto; min-height: clamp(158px, 40vw, 236px); gap: 6px }
.banner > * { flex: none }
.banner.bp { padding-right: 42% }
.banner.bp p { white-space: nowrap }
.banner .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; position: relative }
.banner.bp h3 { font-size: clamp(18px, 4vw, 24px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.banner.bp p { font-family: var(--f-display); font-weight: 800; font-size: 18px }
.banner.bp p s { font-family: var(--f-body); font-weight: 500; font-size: 13px; opacity: .75 }
.banner .bimg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 36%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.25); z-index: 1 }
.banner .bimg img { width: 100%; height: 100%; object-fit: cover }
.banner .bimg .ph-ic svg { width: 64%; height: 64% }
.gallery { display: grid; gap: 6px }
.g-rail { margin: 0; padding: 0; gap: 0; border-radius: 18px; scroll-padding-inline: 0 }
.g-rail .slide { width: 100%; aspect-ratio: 4 / 3; background: var(--soft); display: grid; place-items: center; position: relative }
.g-rail .slide img { width: 100%; height: 100%; object-fit: cover }
.vars { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0 }
.vars legend { font-size: 13px; font-weight: 700; margin-bottom: 8px; padding: 0 }
.chip { position: relative; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px; cursor: pointer }
.chip input { position: absolute; opacity: 0; pointer-events: none }
.chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand) }
.chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px }
.fgbox { display: grid; gap: 8px; background: var(--soft); border-radius: 14px; padding: 12px }
.fgbox p { margin: 0; font-size: 13.5px }
.fgbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden }
.fgbar i { display: block; height: 100%; background: var(--ok); border-radius: inherit; transition: width .5s ease }
.bagbar button { position: relative; overflow: hidden }
.bagbar .fgline { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(255,255,255,.75); transition: width .5s ease }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: var(--brand-ink); font-size: 11px; font-weight: 800; margin-left: 4px }
.badge[hidden] { display: none }
.ped { border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: grid; gap: 8px }
.ped-top, .ped-bot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap }
.ped ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px }
.ped li { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums }
.ped-bot strong { font-family: var(--f-display); font-size: 17px; font-variant-numeric: tabular-nums }
.ped .ops { display: flex; gap: 6px; flex-wrap: wrap }
.st { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; background: var(--soft); white-space: nowrap }
.st-novo { background: var(--brand-soft); color: var(--brand) }
.st-confirmado { color: var(--warn) } .st-entregue { color: var(--ok) } .st-cancelado { color: var(--muted); text-decoration: line-through }
.fotos { display: flex; gap: 8px; flex-wrap: wrap }
.fotos:empty { display: none }
.fthumb { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--soft) }
.fthumb img { width: 100%; height: 100%; object-fit: cover }
.fthumb em { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; text-align: center; padding: 1px 0 }
.fthumb button { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 1; display: grid; place-items: center; padding: 0 }
.sent { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 40px 20px }
.sent h2 { font-size: 26px; font-weight: 800 }
.sent .hint { max-width: 36ch; font-size: 14.5px }
.sent .btn { min-width: 240px }
.sent .btn:not(.primary) { background: var(--bg) }
.sent .check { width: 84px; height: 84px }
.sent .check circle { fill: var(--ok); opacity: .14 }
.sent .check path { fill: none; stroke: var(--ok); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 90 }
.fly-x { position: fixed; z-index: 100; pointer-events: none; width: 42px; height: 42px }
.flyer { position: relative; width: 42px; height: 42px; box-shadow: 0 6px 16px rgba(0,0,0,.22) }

@media (prefers-reduced-motion: no-preference) {
  .rv { animation: rv .5s cubic-bezier(.2,.7,.2,1) both }
  @keyframes rv { from { opacity: 0; transform: translateY(16px) } }
  .ph:has(img.lz:not(.ok)), .hero:has(img.lz:not(.ok)), .slide:has(img.lz:not(.ok)), .th:has(img.lz:not(.ok)) { animation: shimmer 1.2s linear infinite }
  @keyframes shimmer { to { background-position: -200% 0 } }
  .bagbar .count.pop { animation: pop .3s ease }
  .bagbar:not([hidden]) { animation: barIn .3s cubic-bezier(.2,.8,.2,1) }
  @keyframes barIn { from { transform: translateY(120%) } }
  .pc { transition: transform .15s ease }
  .pc:active { transform: scale(.97) }
  .ctl .add, .ctl.step { transition: transform .15s ease }
  .ctl .add:active { transform: scale(.88) }
  .overlay { animation: fadeIn .2s ease both }
  @keyframes fadeIn { from { opacity: 0 } }
  .sheet { animation: up .3s cubic-bezier(.2,.8,.2,1) both }
  @keyframes up { from { transform: translateY(40px); opacity: 0 } }
  .overlay.closing { animation: fadeOut .2s ease forwards }
  .overlay.closing .sheet { animation: down .2s ease-in forwards }
  @keyframes fadeOut { to { opacity: 0 } }
  @keyframes down { to { transform: translateY(40px); opacity: 0 } }
  /* sem "fill": um transform preso faria o rodapé fixo do checkout rolar junto */
  .checkout { animation: slide .3s cubic-bezier(.2,.8,.2,1) }
  @keyframes slide { from { transform: translateX(40px); opacity: 0 } }
  .checkout.leaving { animation: slideOut .24s ease-in forwards }
  @keyframes slideOut { to { transform: translateX(40px); opacity: 0 } }
  .admin { animation: panelIn .3s cubic-bezier(.2,.8,.2,1) both }
  @keyframes panelIn { from { transform: translateX(100%) } }
  .admin.leaving { animation: panelOut .22s ease-in forwards }
  @keyframes panelOut { to { transform: translateX(100%) } }
  .shake { animation: shake .4s ease }
  @keyframes shake { 20%, 60% { transform: translateX(-6px) } 40%, 80% { transform: translateX(6px) } }
  .co-foot .btn.wa { position: relative; overflow: hidden }
  .co-foot .btn.wa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-100%); animation: shine 3.2s ease-in-out 1s infinite }
  @keyframes shine { 0% { transform: translateX(-100%) } 30%, 100% { transform: translateX(100%) } }
  .sent > * { animation: rv .45s cubic-bezier(.2,.7,.2,1) both }
  .sent > :nth-child(2) { animation-delay: .25s } .sent > :nth-child(3) { animation-delay: .32s } .sent > :nth-child(n+4) { animation-delay: .4s }
  .sent .check circle { animation: popc .4s cubic-bezier(.3,1.6,.5,1) both; transform-origin: center }
  @keyframes popc { from { transform: scale(0) } }
  .sent .check path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .45s .2s ease-out forwards }
  @keyframes draw { to { stroke-dashoffset: 0 } }
  ::view-transition-old(root) { animation: .12s ease-out both vtOut }
  ::view-transition-new(root) { animation: .2s ease-out both vtIn }
  @keyframes vtOut { to { opacity: 0 } }
  @keyframes vtIn { from { opacity: 0 } }
}

/* v13: página do produto, esqueleto de carregamento, fotos protegidas e espaço para o selo do Netlify */
.pc a.name { text-decoration: none }
/* Fotos: sem menu de salvar no toque longo, sem arrastar e sem selecionar; a camada por cima recebe o toque */
img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none }
.ph::after, .slide::after, .bimg::after { content: ""; position: absolute; inset: 0; z-index: 1 }
.ph .tags, .ph .ctl, .pp-main .tags { z-index: 2 }

.skl { display: block; height: 13px; border-radius: 7px; background: var(--soft); width: 100% }
.skl.skh { height: 22px; border-radius: 9px }
.pc.sk { pointer-events: none; gap: 8px }
.pc.sk .ph, .cat.sk .ic, .pp.sk .pp-main { background: var(--soft) }
.cat.sk { pointer-events: none }
.pp.sk .pp-info { gap: 14px }
@media (prefers-reduced-motion: no-preference) {
  .skl, .pc.sk .ph, .cat.sk .ic, .pp.sk .pp-main { background: linear-gradient(90deg, var(--soft) 0%, var(--line) 50%, var(--soft) 100%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite }
}

.pp-nav { display: flex; align-items: center; gap: 10px; padding-top: 6px }
.pp-nav .crumb { flex: 1; min-width: 0; display: flex; gap: 6px; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden }
.pp-nav .crumb a { color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis }
.pp-nav .crumb a:last-child { color: var(--ink); font-weight: 600 }
.pp-nav .btn span { display: inline }
@media (max-width: 560px) { .pp-nav .btn { width: 40px; height: 40px; padding: 0; border-radius: 50% } .pp-nav .btn span { display: none } }
.pp { display: grid; gap: 18px; padding-top: 12px }
@media (min-width: 900px) { .pp { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 36px; align-items: start } .pp-media { position: sticky; top: 80px } }
.pp-media { display: grid; gap: 10px; min-width: 0 }
.pp-main { position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: var(--soft) }
.pp-main .g-rail { height: 100%; border-radius: 0 }
.pp-main .g-rail .slide { aspect-ratio: 1; height: 100% }
.pp-main .slide .ph-ic svg { width: 40%; height: 40% }
.g-count { position: absolute; right: 12px; bottom: 12px; z-index: 2; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums }
.g-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none }
.g-thumbs::-webkit-scrollbar { display: none }
.g-th { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; padding: 0; border: 2px solid transparent; background: var(--soft); opacity: .65 }
.g-th.on { border-color: var(--brand); opacity: 1 }
.g-th img { width: 100%; height: 100%; object-fit: cover; display: block }
.pp-info { display: grid; gap: 16px; min-width: 0; align-content: start }
.pp-info h1 { font-size: clamp(22px, 5.4vw, 30px); font-weight: 800 }
.pp-info > div > .hint { margin-top: 6px; font-size: 14px }
.pp-info .hint .link { font-size: inherit; padding: 0 }
.pp-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.pp-price .price.big { font-size: 32px }
.pp-price .old { font-size: 15px }
.pp-price .save { background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 999px }
.pp .kv { align-items: center }
.pp .vars legend b { font-weight: 600; color: var(--muted) }
.pp .chip { padding: 10px 16px }
.pp-buy { display: flex; gap: 10px; align-items: stretch }
.qty.big { border-radius: 16px }
.qty.big button { width: 44px; height: 52px; font-size: 20px }
.qty.big output { min-width: 28px; font-size: 16px }
.pp-buy .btn.primary { flex: 1; border-radius: 16px; font-size: 16px; padding: 14px 18px; box-shadow: 0 8px 22px rgba(224,36,94,.28); transition: background .2s }
/* "Adicionado": o verde enche o botão da esquerda para a direita */
.pp-buy .btn.primary { position: relative; overflow: hidden; isolation: isolate }
.pp-buy .btn.primary::before { content: ""; position: absolute; inset: 0; background: var(--ok); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1); z-index: -1 }
.pp-buy .btn.primary.done { color: #fff; box-shadow: 0 8px 22px rgba(19,138,76,.3) }
.pp-buy .btn.primary.done::before { transform: scaleX(1) }
.pp-buy .btn.primary span { display: inline-block }
.pp-buy .btn.primary.done:not(.instant) span { animation: popIn .35s cubic-bezier(.3,1.5,.5,1) }
.pp-buy .btn.primary.instant::before { transition: none }
.qty.big.in { background: color-mix(in srgb, var(--ok) 12%, var(--soft)) }
.qty.big.in button { color: var(--ok) }
/* cor que já está na sacola ganha um ✓ verde */
.chip.has::after { content: "✓"; color: var(--ok); font-weight: 800; margin-left: 6px }
#ppBag:empty { display: none }
.ppbag { display: grid; gap: 10px; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px }
.ppbag-l { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600 }
.ppbag .btn { justify-self: stretch }
.perks { list-style: none; margin: 0; padding: 14px; display: grid; gap: 8px; background: var(--soft); border-radius: 16px; font-size: 14px }
.perks li { display: flex; gap: 10px; align-items: baseline }
.perks li::before { content: "✓"; color: var(--ok); font-weight: 800 }
.pp-desc h2 { font-size: 18px; font-weight: 800; margin-bottom: 8px }
.pp-desc p { margin: 0; white-space: pre-line; line-height: 1.6 }



/* Recorte de fotos no painel: foto inteira visível, escurecida fora do quadrado */
.sheet { grid-auto-rows: max-content }
.sheet.crop { width: min(560px, 100%) }
.crop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.crop-head h2 { font-size: 17px; text-align: center; flex: 1 }
.crop-stage { position: relative; overflow: hidden; border-radius: 16px; background: #141218; touch-action: none; cursor: grab; user-select: none }
.crop-stage.moving { cursor: grabbing }
.crop-stage > * { position: absolute; left: 0; top: 0 }
.crop-bg { background: #fff }
.crop-stage img { max-width: none; transform-origin: 0 0; pointer-events: none }
.crop-frame { pointer-events: none; box-shadow: 0 0 0 9999px rgba(20,18,24,.62); outline: 2px solid #fff; outline-offset: -1px; border-radius: 2px }
.crop-grid { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; background:
  linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255,255,255,.75) calc(33.33% - .5px), rgba(255,255,255,.75) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.75) calc(66.66% - .5px), rgba(255,255,255,.75) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
  linear-gradient(transparent calc(33.33% - .5px), rgba(255,255,255,.75) calc(33.33% - .5px), rgba(255,255,255,.75) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.75) calc(66.66% - .5px), rgba(255,255,255,.75) calc(66.66% + .5px), transparent calc(66.66% + .5px)) }
.crop-stage.moving .crop-grid { opacity: 1 }
.crop-zoom { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--muted) }
.crop-zoom input { flex: 1; accent-color: var(--brand) }
.crop-modes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap }
.fthumb { width: 76px; height: 76px }
.fthumb .fcut { left: 3px; right: auto }
.fthumb .fcapa { top: auto; bottom: 3px; right: 3px }

/* v14: animações suaves */
.slide { background-size: cover; background-position: center }
.btn, .bagbar button, .chip, .ctl button, .qty button, .back { position: relative; overflow: hidden }
.ctl .add { position: relative; right: auto; bottom: auto }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; transform: scale(0) }
.top { view-transition-name: topo }
.bagbar { view-transition-name: sacola }
@media (prefers-reduced-motion: no-preference) {
  .ripple { animation: ripple .6s cubic-bezier(.2,.8,.2,1) }
  @keyframes ripple { 0% { transform: scale(0); opacity: .22 } 100% { transform: scale(1); opacity: 0 } }
  @keyframes popIn { from { transform: scale(.6); opacity: 0 } }
  .btn, .bagbar button, .back, .chip, .g-th, .cat { transition: transform .16s cubic-bezier(.2,.8,.2,1), background-color .2s, border-color .2s, color .2s, opacity .2s, box-shadow .2s }
  .btn:active, .bagbar button:active, .back:active, .chip:active, .g-th:active { transform: scale(.96) }
  .cat:active .ic { transform: scale(.94) }
  .cat .ic { transition: transform .16s ease, border-color .2s }
  .qty button { transition: transform .12s ease }
  .qty button:active { transform: scale(.85) }
  .fadein > * { animation: fadeUp .45s cubic-bezier(.2,.7,.2,1) both }
  .fadein > :nth-child(2) { animation-delay: .06s } .fadein > :nth-child(3) { animation-delay: .12s } .fadein > :nth-child(n+4) { animation-delay: .18s }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(12px) } }
  ::view-transition-group(topo), ::view-transition-group(sacola) { animation-duration: .3s }
}

/* ---------- v16: botão fixo, bolinhas de cor, abas, ficha do perfume, selo ---------- */
.pill.orig { display: inline-flex; align-items: center; gap: 5px; color: var(--brand) ; background: var(--brand-soft) }
.chip.sw { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px }
.pp .chip.sw { padding: 6px 14px 6px 6px }
.sw-i { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); background: var(--soft) }
img.sw-i { box-shadow: 0 0 0 1px rgba(0,0,0,.08) }
.acc { display: grid; border-top: 1px solid var(--line) }
.acc details { border-bottom: 1px solid var(--line) }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 2px; font-weight: 800; font-size: 16px }
.acc summary::-webkit-details-marker { display: none }
.acc summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s; flex: none; margin-right: 4px }
.acc details[open] > summary::after { transform: translateY(2px) rotate(225deg) }
.acc summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px }
.acc-b { padding: 0 2px 18px }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5 }
.ficha { display: grid; gap: 16px }
.fi { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.fi div { background: var(--soft); border-radius: 12px; padding: 10px 12px; min-width: 0 }
.fi dt { font-size: 12px; color: var(--muted); font-weight: 600 }
.fi dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere }
.notas { display: grid; gap: 12px }
.notas b, .forca b { font-size: 13px }
.ntags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px }
.ntags span { border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 600 }
.forca { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.lv { display: flex; gap: 4px; margin-top: 6px }
.lv i { flex: 1; height: 6px; border-radius: 3px; background: var(--line) }
.lv i.on { background: var(--brand) }
.pp-stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  transform: translateY(110%); visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s }
.pp-stick.on { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1) }
.pp-stick-in { width: min(720px, 100%); margin: 0 auto; display: flex; align-items: center; gap: 10px }
.pp-stick-in > img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; background: var(--soft) }
.pp-stick-t { min-width: 0; flex: 1; display: grid; line-height: 1.25 }
.pp-stick-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pp-stick-t span { font-size: 14px; font-weight: 800 }
.pp-stick .btn.primary { flex: none; border-radius: 14px; padding: 13px 16px; font-size: 15px; position: relative; overflow: hidden; isolation: isolate; max-width: 58% }
.pp-stick .btn.primary span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block }
.pp-stick .btn.primary::before { content: ""; position: absolute; inset: 0; background: var(--ok); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1); z-index: -1 }
.pp-stick .btn.primary.done { color: #fff }
.pp-stick .btn.primary.done::before { transform: scaleX(1) }
.pp-stick .btn.primary.instant::before { transition: none }
body.stick .bagbar { visibility: hidden }
body.stick #produto { padding-bottom: 76px }
@media (prefers-reduced-motion: reduce) { .pp-stick, .pp-stick.on { transition: none } }
/* painel: foto de cada opção e ficha do perfume */
.fv { display: grid; gap: 10px }
.fv-l { display: grid; gap: 6px }
.fv-l > span { font-weight: 700; font-size: 14px }
.fv-l > div { display: flex; gap: 6px; overflow-x: auto; padding: 2px }
.fv-l button { flex: none; width: 48px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--soft); cursor: pointer; opacity: .55 }
.fv-l button.on { border-color: var(--brand); opacity: 1 }
.fv-l img { width: 100%; height: 100%; object-fit: cover; display: block }
.perf { border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 12px; min-width: 0 }
.perf legend { font-weight: 800; padding: 0 6px }
.em-produto #home { display: none }
.carregando main, .carregando footer { visibility: hidden }
/* foto principal do produto aparece direto, sem esmaecer (a versão pequena da vitrine fica por baixo) */
.pp-main .slide:first-child img.lz { opacity: 1; transition: none }
/* selo Original nos cards da vitrine */
.pc .orig-c { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; background: var(--bg); color: var(--brand); border-radius: 999px; padding: 3px 8px 3px 6px; font-size: 11px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.12) }
.pc .orig-c svg { width: 12px; height: 12px }