/* ============================================================
   MANUAL DA FLORA · Checkout próprio (simulação)
   Usa os tokens e componentes do styles.css do site:
   creme, borda ink de 2px, sombra sólida, pílulas, lime = ação.
   Aqui só entra o que é do checkout.
   Celular primeiro: a etapa do pedido cabe inteira na tela;
   em tela baixa ela aperta (ver "Tela baixa" no fim).
   ============================================================ */

/* Ícones Phosphor Bold que o icons.css do site ainda não mapeia */
.ph-bold.ph-copy:before{content:"\e1ca"}
.ph-bold.ph-pix-logo:before{content:"\ecc2"}
.ph-bold.ph-qr-code:before{content:"\e3e6"}
.ph-bold.ph-credit-card:before{content:"\e1d2"}
.ph-bold.ph-lock-simple:before{content:"\e308"}
.ph-bold.ph-shield-check:before{content:"\e40c"}
.ph-bold.ph-warning-circle:before{content:"\e4e2"}
.ph-bold.ph-caret-down:before{content:"\e136"}
.ph-bold.ph-arrows-clockwise:before{content:"\e094"}
.ph-bold.ph-clock-countdown:before{content:"\ed2c"}
.ph-bold.ph-circle-notch:before{content:"\eb44"}
.ph-bold.ph-envelope-simple:before{content:"\e218"}
.ph-bold.ph-user:before{content:"\e4c2"}
.ph-bold.ph-phone:before{content:"\e3b8"}
.ph-bold.ph-calendar-blank:before{content:"\e10a"}
.ph-bold.ph-lock-key:before{content:"\e2fe"}
.ph-bold.ph-identification-card:before{content:"\e2c8"}
.ph-bold.ph-coins:before{content:"\e78e"}
.ph-bold.ph-bank:before{content:"\e0b4"}

[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ck-body{min-height:100dvh;display:flex;flex-direction:column}

/* ---------- Controles de teste (fora da versão real) ---------- */
/* o botao de simular acompanha a rolagem no celular, para estar sempre a mao durante o teste */
.sim-box{position:sticky;bottom:10px;z-index:4;padding:8px;border:2px dashed var(--muted);border-radius:999px;background:var(--bg)}
.sim-static{position:static}
.sim-btn{display:block;width:100%;min-height:46px;padding:8px 16px;border:var(--b);border-radius:var(--r-pill);background:var(--ink);color:var(--lime);font-weight:900;font-size:15px;transition:transform .15s var(--ease)}
.sim-btn:active{transform:translate(2px,2px)}
.sim-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px;margin-top:-8px}
.sim-link{min-height:40px;padding:4px 2px;color:var(--muted);font-weight:900;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.sim-note{padding:10px 12px;border:2px dashed var(--muted);border-radius:14px;color:var(--muted);font-size:13px;font-weight:700;line-height:1.4}

/* ---------- Topo: marca + etapas ---------- */
.ck-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(980px,calc(100% - 32px));margin-inline:auto;min-height:54px;padding-top:4px}
.steps{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;font-weight:900;font-size:13px;color:var(--muted)}
.steps li{display:flex;align-items:center;gap:6px}
.steps li+li:before{content:"";width:12px;height:2px;border-radius:2px;background:var(--ink);opacity:.3}
.steps b{width:26px;height:26px;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--paper);color:var(--ink);font:400 14px/1 var(--display);transition:background .25s var(--ease)}
.steps b i{font-size:13px}
.steps li[aria-current]{color:var(--ink)}
.steps li[aria-current] b{background:var(--lime);box-shadow:2px 2px 0 var(--ink)}
.steps li.done b{background:var(--ink);color:var(--lime);box-shadow:none}
@media (max-width:479px){.steps li:not([aria-current]) span{display:none}}
.ck-top .wordmark{flex-shrink:0}
.ck-top .wm-1{white-space:nowrap}
@media (max-width:359px){.steps li span{display:none}}

/* ---------- Estrutura ---------- */
.ck{width:min(980px,calc(100% - 32px));margin:2px auto 0;flex:1}
.ck-side{display:none}
.flow>section{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-bottom:24px}
.flow>section[data-step="pedido"]{padding-bottom:0}
.flow>section.enter{animation:stepIn .32s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}}
#pedido-form{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
[data-focus]:focus{outline:none}

/* ---------- Voltar: para a página (etapa do pedido) ou para o pedido (etapas de pagamento) ---------- */
.ck-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 2px -2px;padding:4px 10px 4px 2px;color:var(--ink);font-weight:900;font-size:14px}
.ck-back i{width:30px;height:30px;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--paper);box-shadow:2px 2px 0 var(--ink);font-size:14px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.ck-back:hover i{transform:translate(-2px,0)}
.ck-back:active i{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}

/* ---------- Item do pedido ---------- */
.item{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 14px;border:var(--b);border-radius:16px;background:var(--paper);box-shadow:var(--sh)}
.item img{width:36px;aspect-ratio:2/3;object-fit:cover;border:var(--b);border-radius:5px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-5deg);flex-shrink:0}
.item-txt{flex:1;min-width:0}
.item-txt b{display:block;font:400 19px/1.1 var(--display)}
.item-txt small{display:block;margin-top:3px;font:700 13px/1.3 var(--body);color:var(--muted)}
.item-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1;flex-shrink:0}
.item-price s{font-weight:900;font-size:13px;color:var(--muted);text-decoration-thickness:2px;text-decoration-color:var(--ink)}
.item-price strong{margin-top:4px;font:400 26px/1 var(--display);white-space:nowrap}

/* ---------- Campos: rótulo dentro da caixa, sempre visível ---------- */
.group{margin:0;padding:0;border:0;min-width:0}
.group legend{display:block;padding:0;margin-bottom:10px;font-weight:900;font-size:16px;line-height:1.25}
.dados legend{margin-bottom:0}
.help{margin-top:2px;color:var(--muted);font-size:14px;font-weight:700;line-height:1.35}
.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:10px}
.fld{position:relative;display:block;min-width:0;padding:7px 12px;border:var(--b);border-radius:14px;background:var(--paper);cursor:text;transition:box-shadow .18s var(--ease),transform .18s var(--ease),background .2s}
/* no celular cada campo ocupa a linha inteira (nome comprido e parcela nao cortam); so validade e CVV ficam lado a lado */
.fld{grid-column:1/-1}
.fld-half{grid-column:auto}
.fld>span{display:block;font:900 11px/1.2 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 16px no campo: abaixo disso o iPhone dá zoom ao focar */
.fld input,.fld select{display:block;width:100%;height:26px;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--ink);font:700 16px/1 var(--body)}
.fld input::placeholder{color:#7C8370;font-weight:400}
.fld input:focus,.fld input:focus-visible,.fld select:focus,.fld select:focus-visible{outline:none}
.fld:focus-within{box-shadow:var(--sh);transform:translate(-1px,-1px)}
.fld:has(:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.fld.is-err{background:var(--pink-soft)}
.fld-i{padding-left:44px}
.fld-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:20px;line-height:1}
.fld-select{cursor:pointer}
.fld select{padding-right:18px;-webkit-appearance:none;appearance:none;cursor:pointer}
.fld-select:after{content:"\e136";font-family:"Phosphor-Bold";position:absolute;right:10px;bottom:11px;font-size:14px;line-height:1;pointer-events:none}
.ok-mark{position:absolute;right:12px;top:50%;width:24px;height:24px;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--lime);font-size:12px;transform:translateY(-50%) scale(0);transition:transform .25s var(--ease)}
.fld.is-ok .ok-mark{transform:translateY(-50%) scale(1)}
.fld.is-ok input{padding-right:32px}
.msg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding:7px 12px;border:var(--b);border-radius:12px;font-size:14px;font-weight:700;line-height:1.35}
.msg-err{background:var(--pink-soft)}
.msg-err i{font-size:18px}
.msg-fix{background:var(--blue-soft);cursor:pointer}
.msg-fix b{font-weight:900;overflow-wrap:anywhere}
.msg .link{font-size:14px;min-height:32px}

/* ---------- Forma de pagamento ---------- */
.pay-opts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.opt{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 12px;border:var(--b);border-radius:16px;background:var(--paper);cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt>i{font-size:24px;flex-shrink:0}
.opt b{display:block;font-weight:900;font-size:16px;line-height:1.1}
.opt small{display:block;margin-top:3px;font-size:13px;font-weight:700;color:var(--muted);line-height:1.2}
.opt:has(:checked){background:var(--lime-soft);box-shadow:var(--sh);transform:translate(-1px,-1px)}
.opt:has(:checked):after{content:"\e182";font-family:"Phosphor-Bold";position:absolute;right:-7px;top:-9px;width:24px;height:24px;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--lime);font-size:12px}
.opt:has(:focus-visible){outline:3px solid var(--blue);outline-offset:3px}

/* ---------- Extras (order bump): valem no Pix e no cartão ----------
   Hierarquia: capa, nome em letra de título, o que a pessoa ganha, preço e botão de adicionar. */
#extras legend{margin-bottom:0}
.bumps{display:grid;gap:12px;margin-top:12px}
.bump{position:relative;display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:14px;padding:14px 14px 14px 12px;border:2px dashed var(--ink);border-radius:18px;background:var(--paper);cursor:pointer;transition:background .2s,box-shadow .18s var(--ease),transform .18s var(--ease)}
.bump input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
/* capa inteira do produto, sem recorte: cada uma no seu formato */
.bump img{justify-self:center;width:auto;height:auto;max-width:68px;max-height:96px;border:var(--b);border-radius:6px;box-shadow:3px 3px 0 var(--ink);background:var(--paper)}
.bump:nth-of-type(odd) img{transform:rotate(-3deg)}
.bump:nth-of-type(even) img{transform:rotate(3deg)}
.bump-txt{min-width:0}
.bump-txt b{display:block;font:400 19px/1.15 var(--display);text-wrap:balance}
.bump-txt small{display:block;margin-top:5px;font-size:14px;font-weight:700;color:var(--muted);line-height:1.4;text-wrap:pretty}
.bump-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.bump-price{font:400 21px/1 var(--display);white-space:nowrap}
.bump-add{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 14px 4px 11px;border:var(--b);border-radius:var(--r-pill);background:var(--bg);box-shadow:2px 2px 0 var(--ink);font-weight:900;font-size:13px;line-height:1;white-space:nowrap;transition:background .2s,transform .18s var(--ease),box-shadow .18s var(--ease)}
.bump-add i{font-size:14px}
.bump-add [data-on]{display:none}
.bump:has(:checked){border-style:solid;background:var(--lime-soft);box-shadow:var(--sh);transform:translate(-1px,-1px)}
.bump:has(:checked) .bump-add{background:var(--lime);transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.bump:has(:checked) .bump-add [data-on]{display:inline}
.bump:has(:checked) .bump-add [data-off]{display:none}
.bump:has(:focus-visible){outline:3px solid var(--blue);outline-offset:3px}

.assure{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:0;padding:0;list-style:none;font-size:12.5px;font-weight:900;color:var(--muted)}
.assure li{display:flex;align-items:center;gap:6px}
.assure i{font-size:15px;color:var(--ink)}

/* ---------- Barra de pagamento: gruda no rodapé do celular ---------- */
.pay{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-inline:-16px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(244,241,234,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:var(--b)}
.total{flex-shrink:0}
.total small{display:block;font:900 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.total strong{display:block;margin-top:4px;font:400 26px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.pay .btn{flex:1;min-width:0;max-width:236px;min-height:52px;padding:10px 16px;font-size:17px}
.btn[disabled]{cursor:progress;opacity:.75;transform:none}
.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Pagamento: Pix e cartão ---------- */
.title.ck-title{font-size:clamp(30px,4.4vw,46px);margin-top:0}
.ck-sub{margin-top:-4px;font-size:16px;font-weight:700;color:var(--muted);line-height:1.45;text-wrap:pretty}
.ck-sub b{color:var(--ink);font-weight:900;white-space:nowrap}
#pix-live{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.pix-card{min-width:0;padding:16px;border:var(--b);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--sh-lg)}
.pix-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pix-badge{flex-shrink:0;width:52px;height:52px;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--lime);box-shadow:3px 3px 0 var(--ink);font-size:28px;transform:rotate(-6deg)}
.pix-sum{display:grid;justify-items:start;gap:6px;min-width:0}
.pix-amount{font:400 34px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.timer{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:var(--r-pill);background:var(--lime-soft);font-weight:900;font-size:13px;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
.timer i{font-size:15px}
.timer.late{background:var(--pink-soft)}
#copy.is-ok{background:var(--ink);color:var(--lime)}
.pix-code{margin-top:12px;padding:8px 12px;border-radius:10px;background:var(--bg);font:700 12px/1.3 ui-monospace,Menlo,Consolas,monospace;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* três passos em linha, cada um com seu ícone, ligados por tracejado */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 0;padding:0;list-style:none;font-size:12.5px;font-weight:700;line-height:1.3;text-align:center}
.how li{position:relative;display:grid;justify-items:center;align-content:start;gap:8px}
.how li+li:before{content:"";position:absolute;top:21px;right:calc(50% + 28px);width:calc(100% - 48px);border-top:2px dashed var(--ink);opacity:.4}
.how b{width:44px;height:44px;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--bg);font-size:20px;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.how strong{font-weight:900}
.how li.on b{background:var(--lime);box-shadow:2px 2px 0 var(--ink)}
.how li.was b{background:var(--ink);color:var(--lime)}
.qr{margin-top:14px;border-top:2px dashed var(--ink);padding-top:6px}
.qr summary{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:900;font-size:14px;cursor:pointer;list-style:none}
.qr summary::-webkit-details-marker{display:none}
.qr summary .tog{margin-left:auto;transition:transform .25s var(--ease)}
.qr[open] summary .tog{transform:rotate(180deg)}
.qr-box{position:relative;width:max-content;max-width:100%;margin:8px auto 4px;padding:10px;border:var(--b);border-radius:14px;background:var(--paper)}
.qr-box canvas{display:block;max-width:100%;height:auto}
.qr-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);padding:5px 12px;border:var(--b);border-radius:var(--r-pill);background:var(--lime);box-shadow:2px 2px 0 var(--ink);font-weight:900;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.status{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border:var(--b);border-radius:var(--r-pill);background:var(--blue-soft);font-weight:900;font-size:15px}
.status i{font-size:18px}
.mail-line{text-align:center;font-size:14px;font-weight:700;color:var(--muted);line-height:1.5}
.mail-line b{color:var(--ink);font-weight:900;overflow-wrap:anywhere}
.mail-line .link{font-size:14px;margin-left:4px;min-height:44px}
.alt-line{margin-top:-14px}
.alt-line .link{margin-left:0}
.expired{display:grid;justify-items:center;gap:12px;margin-top:10px;padding:26px 20px;border:var(--b);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--sh-lg);text-align:center}
.expired .q-ico{width:52px;height:52px;display:grid;place-items:center;border:var(--b);border-radius:50%;font-size:24px}
.expired h2{font:400 28px/1.1 var(--display)}
.expired p{color:var(--muted);font-weight:700;font-size:15px;margin-bottom:6px}
/* ---------- Cartão: o desenho acompanha o que a pessoa digita ---------- */
#cartao-form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.pix-card .fields{margin-top:0}
.cc-stage{position:relative;display:grid;place-items:center;height:186px;margin:-6px 0 12px}
.cc-stage .sun{width:186px;height:186px}
.cc-art{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;gap:2px 10px;width:min(236px,84%);aspect-ratio:1.586;padding:13px 15px 12px;border:var(--b);border-radius:14px;background:var(--blue);color:var(--paper);box-shadow:var(--sh-lg);transform:rotate(-3deg)}
.cc-chip{width:34px;height:25px;border:var(--b);border-radius:6px;background:var(--lime)}
.cc-brand{justify-self:end;font:400 17px/1.2 var(--display);letter-spacing:.02em}
.cc-number{grid-column:1/-1;align-self:center;font-weight:900;font-size:clamp(13px,4.2vw,16px);letter-spacing:.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-holder,.cc-exp{min-width:0;display:grid;gap:1px;line-height:1.15}
.cc-exp{text-align:right}
.cc-art small{font-weight:900;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.cc-art b{font-weight:900;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.test-note{margin-top:10px;text-align:center}
#to-pix i{font-size:17px}

/* ---------- Manual liberado ---------- */
.done-art{position:relative;display:grid;place-items:center;height:200px;margin-top:6px}
.done-art .sun{width:184px;height:184px}
.done-art img{position:relative;z-index:1;width:108px;border:var(--b);border-radius:6px;box-shadow:var(--sh-lg);transform:rotate(-5deg)}
.done-art .burst{width:92px;height:92px;left:calc(50% + 34px);top:2px}
.done-art .burst b{font-size:24px}
[data-step="pronto"].enter .done-art img{animation:pop .5s var(--ease) both}
[data-step="pronto"].enter .burst{animation:burstIn .45s var(--ease) .28s both}
@keyframes pop{from{opacity:0;transform:rotate(6deg) translateY(26px) scale(.86)}}
@keyframes burstIn{from{opacity:0;transform:rotate(-10deg) scale(.3)}}
[data-step="pronto"] .title,[data-step="pronto"] .ck-sub{text-align:center;align-items:center}
.receipt{padding:14px 16px;border:2px dashed var(--ink);border-radius:16px;font-size:15px;font-weight:700}
.receipt>b{font-weight:900}
.receipt ul{margin:8px 0 12px;padding:0;list-style:none;display:grid;gap:6px;color:var(--muted)}
.receipt li{display:flex;align-items:center;gap:8px}
.receipt li i{color:var(--ink);font-size:15px}
.receipt p{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding-top:10px;border-top:2px solid var(--ink)}
.receipt strong{font:400 22px/1 var(--display);white-space:nowrap}
[data-step="pronto"] .guarantee{margin-top:0}

/* ---------- Tela estreita (celulares de 320 a 359 px) ---------- */
@media (max-width:359px){
  .ck-top,.ck{width:calc(100% - 24px)}
  .pay{margin-inline:-12px;padding-inline:12px;gap:10px}
  .pay .btn{padding-inline:12px;font-size:16px}
  .pay .btn i{display:none}
  .total strong{font-size:23px}
  .item{gap:10px;padding-inline:10px 12px}
  .item-price strong{font-size:23px}
  .opt{padding-inline:9px;gap:8px}
  .opt>i{font-size:21px}
  .bump{grid-template-columns:56px minmax(0,1fr);gap:10px;padding:12px 12px 12px 10px}
  .bump img{max-width:56px;max-height:80px}
  .bump-txt b{font-size:17px}
  .bump-add{padding-inline:9px 11px}
  .pix-card{padding:14px}
  .pix-amount{font-size:28px}
  .pix-badge{width:46px;height:46px;font-size:24px}
  .how{font-size:12px;gap:6px}
  .fld-i{padding-left:40px}
  .fld-ico{left:11px;font-size:19px}
}
/* ---------- Tela baixa (navegador com as barras abertas): aperta só o que não custa leitura ---------- */
@media (max-height:719px) and (max-width:559px){
  .ck-top{min-height:48px;padding-top:2px}
  .flow>section,#pix-live{gap:12px}
  #pedido-form{gap:16px}
  .title.ck-title{font-size:28px}
  .ck-back{min-height:40px}
  .ck-sub{font-size:15px}
  .pix-card{padding:14px}
  .pix-head{margin-bottom:10px}
  .how{margin-top:12px;gap:8px}
}

/* ---------- Telas largas: o pagamento vira um bloco estreito no centro ---------- */
@media (min-width:560px){
  .sim-box{position:static}
  .fld{grid-column:auto}
  .fld-wide{grid-column:1/-1}
  .ck{margin-top:16px}
  .flow{max-width:520px;margin-inline:auto}
  .flow>section,.flow>section[data-step="pedido"]{padding-bottom:40px}
  .pay{position:static;margin:4px 0 0;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .pay .btn{max-width:280px;font-size:18px}
}

/* ---------- Computador: resumo à esquerda, pagamento num cartão à direita ---------- */
@media (min-width:900px){
  .ck-top{min-height:76px}
  .steps{font-size:14px;gap:10px}
  .steps li+li:before{width:22px}
  .ck{display:grid;grid-template-columns:.82fr 1fr;gap:64px;align-items:start;margin-top:28px;padding-bottom:64px}
  .ck-side{display:block;position:sticky;top:28px}
  .side-art{position:relative;display:grid;place-items:center;height:400px}
  .side-art .sun{width:330px;height:330px}
  .side-art img{position:relative;z-index:1;width:226px;border:var(--b);border-radius:6px;box-shadow:var(--sh-lg);transform:rotate(-5deg)}
  .ck-side .checks{margin:26px 0 22px}
  .flow{max-width:none;margin:0;padding:32px;border:var(--b);border-radius:var(--r-card);background:var(--bg);box-shadow:10px 10px 0 var(--ink)}
  .flow>section,.flow>section[data-step="pedido"]{padding-bottom:0}
  #pedido-form{gap:16px}
  .assure{justify-content:flex-start;order:2;margin-top:4px}
  [data-step="pronto"] .guarantee{display:none}
}

@media (prefers-reduced-motion:reduce){
  .flow>section.enter,[data-step="pronto"].enter .done-art img,[data-step="pronto"].enter .burst{animation:none}
  .spin{animation-duration:2.4s}
}

/* ---------- Cartão (Card Payment Brick do Mercado Pago) ---------- */
.ph-bold.ph-lock-simple:before{content:"\e308"}
.ck-brick{min-height:120px;margin-top:6px}
.ck-brick>.status{margin-top:10px}
.ck-mp{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:13px;font-weight:800;color:var(--muted)}
.ck-mp i{font-size:15px}
#usar-pix{display:inline-flex;align-items:center;gap:6px}
#cartao-analise{margin-top:12px}

/* ============================================================
   Revisão de atrito (14/10): etapas numeradas, ícones no texto,
   confiança colada no botão, extras com preço do servidor.
   ============================================================ */
.ph-bold.ph-lightning:before{content:"\e2de"}
.ph-bold.ph-book-open:before{content:"\e0e6"}
.ph-bold.ph-plus:before{content:"\e3d4"}

/* item: o que é, quanto tem, quando chega */
.item{align-items:flex-start;padding:14px 16px 14px 14px}
.item img{width:44px;margin-top:2px}
.item-txt small{display:flex;align-items:center;gap:5px}
.item-txt small i{font-size:14px;color:var(--ink)}
.item-chip{width:max-content;max-width:100%;margin-top:7px!important;padding:3px 9px;border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--lime);color:var(--ink)!important;font-weight:900!important;font-size:12px!important}
.item-price{align-self:center}

/* etapas do formulário: número + pergunta, mais ar entre os blocos */
#pedido-form{gap:26px}
.group legend{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:17px}
.dados legend{margin-bottom:0}
.leg-n{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--ink);color:var(--lime);font:400 14px/1 var(--display)}
.leg-opc{margin-left:auto;padding:2px 9px;border:2px solid var(--ink);border-radius:var(--r-pill);font-weight:900;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.fields{margin-top:12px}

/* Pix: o caminho mais rápido vem marcado e identificado */
.opt small{display:flex;align-items:center;gap:4px}
.opt small i{font-size:13px;color:var(--ink)}
.opt-tag{position:absolute;left:12px;top:-11px;padding:1px 8px;border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--ink);color:var(--lime);font-style:normal;font-weight:900;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.pay-opts{margin-top:4px}

/* confiança: logo acima do botão, no momento da decisão */
.assure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;justify-content:stretch;font-size:13px;color:var(--ink)}
.assure li{align-items:flex-start;gap:9px;padding:10px 10px 10px 8px;border:2px solid var(--ink);border-radius:14px;background:var(--paper)}
.as-ico{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--lime-soft)}
.as-ico i{font-size:16px!important}
.assure b{display:block;font-weight:900;font-size:13px;line-height:1.2}
.assure li span:last-child{font-weight:700;font-size:12px;line-height:1.3;color:var(--muted)}

/* total: reage quando entra um extra */
.total strong.pulsa{animation:totalPulsa .45s var(--ease)}
@keyframes totalPulsa{40%{transform:scale(1.08);color:var(--ink)}}
.total small{white-space:nowrap}
@media (max-width:374px){
  .assure{grid-template-columns:minmax(0,1fr)}
  .leg-opc{display:none}
}
@media (prefers-reduced-motion:reduce){ .total strong.pulsa{animation:none} }

/* selo "Mais rápido" fica acima do nome, sem cobrir */
.opt:has(.opt-tag){padding-top:18px}
.item-chip{white-space:nowrap}
.assure li{align-items:center;padding:8px 10px 8px 8px}
.assure b{font-size:13px}

/* total do rodapé: o número que decide, com o contexto embaixo (itens e forma de pagar) */
.total{display:grid;gap:1px;min-width:0}
.total small{font:900 11px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pay .total strong{font:400 32px/1.05 var(--display);text-shadow:3px 3px 0 var(--lime);font-variant-numeric:tabular-nums;white-space:nowrap}
.total-sub{font-weight:800;font-size:12px;line-height:1.2;color:var(--ink);white-space:nowrap}
.item{align-items:center}
.item-txt b{font-size:21px}
@media (max-width:374px){ .pay .total strong{font-size:27px} }

/* bônus incluído, embaixo do nome do manual */
.item-txt .item-bonus{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:2px 8px;border:1.5px solid var(--ink);border-radius:999px;background:var(--lime);font:900 11.5px/1.3 var(--body);color:var(--ink)}

/* rodapé fixo: total e botão sempre cabem, mesmo com os dois extras (R$ 86,00) e "Pagar com cartão" */
.pay .btn{white-space:normal;line-height:1.1;text-align:center;justify-content:center}
.pay .btn #go-label{overflow-wrap:normal}
@media (max-width:480px){
  .pay{gap:10px}
  .pay .total strong{font-size:27px}
  .pay .btn{flex:1 1 0;max-width:none;font-size:15.5px;padding-inline:12px;gap:6px}
}
@media (max-width:360px){ .pay .total strong{font-size:23px} .pay .btn{font-size:14.5px} }

/* vitrine (teste.manualdaflora.site): aviso de demonstração e botão de simular em destaque */
.ck-vitrine{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 14px;border:var(--b);border-radius:14px;background:var(--lime);font-weight:800;font-size:14px;line-height:1.35}
.ck-vitrine i{font-size:18px;flex-shrink:0}
.is-vitrine #qr,.is-vitrine #how{display:none}
.is-vitrine .sim-btn{background:var(--lime);color:var(--ink);font-size:16px;box-shadow:3px 3px 0 var(--ink)}

/* transição para o checkout (View Transitions entre páginas): o botão tocado vira o botão de pagar, a marca fica, o resto sobe.
   Navegador sem suporte abre normal; quem pede menos movimento não vê animação. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root){animation:.14s cubic-bezier(.4,0,1,1) both flora-sai}
::view-transition-new(root){animation:.36s cubic-bezier(.16,1,.3,1) .12s both flora-entra}
::view-transition-group(flora-cta){animation-duration:.42s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-group(flora-marca){animation-duration:.3s}
@keyframes flora-sai{to{opacity:0;transform:scale(.98)}}
@keyframes flora-entra{from{opacity:0;transform:translateY(24px)}}
.ck-top .wordmark{view-transition-name:flora-marca}
#go{view-transition-name:flora-cta}

/* 14/10: parcela do cartão na barra não espreme o botão */
.pay .total{min-width:0;flex:1 1 auto}
.total-sub{white-space:normal;max-width:190px}
.pay .btn{flex:0 0 auto;white-space:nowrap}



/* O que você está levando: manual + bônus fixos; cada extra aparece só quando é marcado (sem JS, via :has) */
.levando{padding:14px 16px 12px;border:var(--b);border-radius:18px;background:var(--paper);box-shadow:var(--sh)}
.lv-tit{margin:0 0 10px;font:400 18px/1.1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.lv-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lv-item{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border:2px solid var(--ink);border-radius:12px;background:var(--bg)}
.lv-item img{width:30px;height:44px;object-fit:cover;flex-shrink:0;border:2px solid var(--ink);border-radius:4px;box-shadow:2px 2px 0 var(--ink);background:var(--paper);transform:rotate(-4deg)}
.lv-item span{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.lv-item b{font:900 14px/1.15 var(--body)}
.lv-item small{font:700 12px/1.2 var(--body);color:var(--muted)}
.lv-bonus{background:var(--lime-soft,#EEFFC2)}
.lv-tag{font-style:normal;font:900 10.5px/1 var(--body);letter-spacing:.06em;padding:3px 7px;border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--pink,#FF4F81);color:#fff}
.lv-extra{display:none;background:var(--orange-soft,#FFE6DB)}
.ck:has(#extras input[value="sos"]:checked) .lv-extra[data-lv="sos"],
.ck:has(#extras input[value="diario"]:checked) .lv-extra[data-lv="diario"]{display:flex;animation:lvIn .35s cubic-bezier(.34,1.6,.64,1) both}
@keyframes lvIn{from{opacity:0;transform:translateY(-6px) scale(.94)}to{opacity:1;transform:none}}
.lv-nota{display:flex;align-items:center;gap:6px;margin:10px 0 0;font:700 12.5px/1.3 var(--body);color:var(--muted)}
.lv-nota i{font-size:14px;color:var(--ink)}
@media (max-width:359px){ .lv-list{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .ck:has(#extras input:checked) .lv-extra{animation:none} }

/* 15/10: kit (SOS + Diário) em destaque no "Leve também" */
.bump-kit{grid-template-columns:84px minmax(0,1fr);border-style:solid;background:var(--lime-soft);box-shadow:var(--sh)}
.bump-kit .kit-covers{position:relative;justify-self:center;width:76px;height:96px}
.bump-kit .kit-covers img{position:absolute;max-width:54px;max-height:78px;border:var(--b);border-radius:6px;box-shadow:3px 3px 0 var(--ink);background:var(--paper)}
.bump-kit .kc-a{left:0;top:10px;transform:rotate(-8deg)}
.bump-kit .kc-b{right:0;top:0;transform:rotate(6deg);max-width:50px}
.kit-tag{display:inline-flex;align-items:center;gap:5px;margin-bottom:6px;padding:3px 10px;border:var(--b);border-radius:var(--r-pill);background:var(--orange);color:var(--ink);font:900 12px/1.2 var(--body);font-style:normal;letter-spacing:.02em}
.kit-cheio{margin-right:6px;font:700 14px/1 var(--body);color:var(--muted);text-decoration-thickness:2px;text-decoration-color:var(--pink)}
.bump-kit:has(:checked){background:var(--lime);transform:translate(-1px,-1px)}
@media (max-width:480px){.bump-kit{grid-template-columns:68px minmax(0,1fr)}.bump-kit .kit-covers{width:62px;height:84px}.bump-kit .kit-covers img{max-width:44px;max-height:64px}.bump-kit .kc-b{max-width:40px}.kit-tag{font-size:11.5px}}

.kit-tag{display:flex;width:fit-content;max-width:100%;justify-content:flex-start;gap:6px;text-wrap:balance}
.kit-tag span{display:inline;margin:0;padding:0;flex:none}
.bump-kit .bump-foot{flex-wrap:wrap;row-gap:8px}
.bump-kit .bump-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}

/* ícones próprios (sprite inline): tamanho e cor seguem o texto, como os da fonte */
i.ci{display:inline-grid;place-items:center;font-style:normal;line-height:0;flex-shrink:0}
i.ci svg{width:1em;height:1em;overflow:visible}

/* troca de tela como no iOS: a página sai para a esquerda escurecendo e o carrinho entra pela direita; na volta, o inverso */
::view-transition-old(root){animation:.46s cubic-bezier(.32,.72,0,1) both ios-sai}
::view-transition-new(root){animation:.46s cubic-bezier(.32,.72,0,1) both ios-entra;box-shadow:-18px 0 44px rgba(30,36,23,.3)}
@keyframes ios-sai{to{transform:translateX(-30%);filter:brightness(.7)}}
@keyframes ios-entra{from{transform:translateX(100%)}}
html:active-view-transition-type(voltar)::view-transition-old(root){animation:.46s cubic-bezier(.32,.72,0,1) both ios-volta-sai;z-index:2;box-shadow:18px 0 44px rgba(30,36,23,.3)}
html:active-view-transition-type(voltar)::view-transition-new(root){animation:.46s cubic-bezier(.32,.72,0,1) both ios-volta-entra;z-index:1;box-shadow:none}
@keyframes ios-volta-sai{to{transform:translateX(100%)}}
@keyframes ios-volta-entra{from{transform:translateX(-30%);filter:brightness(.7)}}
a[data-buy],.header .wordmark,.ck-top .wordmark,#go{view-transition-name:none!important}

/* escassez (19/10): promoção de outubro com contador, no visual claro do checkout */
/* 06/11: virou barra fina no topo (o contador grande pesava no pedido) */
.ck-escassez{background:var(--ink,#111);color:var(--paper,#FFFDF7);font-size:12.5px;line-height:1.3;text-align:center;padding:6px 10px}
.ck-escassez[hidden]{display:none}
.ck-escassez p{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 8px;font-weight:700}
.ck-escassez p>b{color:var(--lime,#C6FF3D);font-weight:900}
.ck-escassez s{opacity:.6}
.esc-cont b{font-variant-numeric:tabular-nums;font-weight:900}
/* 19/10: "o que você está levando" é lista, não botão: sem borda, sem fundo de card, sem sombra */
.lv-item{border:0;background:transparent;padding:4px 0;border-radius:0;cursor:default}
.lv-bonus,.lv-extra{background:transparent}
.lv-item img{box-shadow:none}

/* 19/10: menos atrito e espaçamento regular no pedido */
[data-step="pedido"]>*+*{margin-top:18px}
#pedido-form .group{margin-top:0}
#pedido-form .group+.group{margin-top:22px}
#pedido-form .fields{margin-bottom:0}
#pedido-form .group legend{margin-bottom:12px}
#pedido-form .fields{display:grid;gap:10px}
/* 04/11: igual ao mecanismo: e-mail inteiro, nome e celular lado a lado */
#pedido-form .fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#pedido-form .fld-wide{grid-column:1/-1}
#pedido-form .fld:not(.fld-wide){grid-column:auto}
.bumps{display:grid;gap:10px}
.bump small{line-height:1.35}