/* Checkout do comprador. Tudo le os tokens --ck-* (look.jsx aplica a aparencia publicada da loja no ): --ck-primary / --ck-on-primary (texto do botao por luminancia) / --ck-primary-ink (a cor legivel sobre branco), --ck-bg, --ck-radius (cartao) / --ck-radius-control (campo) / --ck-radius-btn (botao), --ck-font. Temas (data-theme): essencial (padrao), linha, vitrine, contraste. Estrutura (data-layout): uma-pagina, etapas. */ /* ---------- tokens do checkout (padrao = essencial) ---------- */ :root{ --ck-primary:#062F28; --ck-on-primary:#FFFFFF; --ck-primary-hover:#052922; --ck-primary-ink:#062F28; --ck-primary-soft:#EEF3F1; --ck-primary-line:#B4C5C1; --ck-ring:rgba(6,47,40,.32); --ck-bg:#F3F4F2; --ck-surface:#FFFFFF; --ck-surface-2:#F7F8F7; --ck-heading:#101412; --ck-text:#262B28; --ck-muted:#5B625E; --ck-line:#E2E5E3; --ck-line-strong:#C9CECB; --ck-radius:14px; --ck-radius-control:10px; --ck-radius-btn:999px; --ck-shadow:0 1px 2px rgba(16,20,18,.04),0 10px 28px -16px rgba(16,20,18,.16); --ck-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --ck-star:#B86E00; --ck-good:#0B7A43; --ck-bad:#B42318; --ck-bad-soft:#FDECEA; --ck-summary-bg:var(--ck-surface); --ck-summary-line:var(--ck-line); /* design system dentro do checkout */ --font-ui:var(--ck-font); --font-display:var(--ck-font); --font-numeric:var(--ck-font); --text-heading:var(--ck-heading); --text-body:var(--ck-text); --text-muted:var(--ck-muted); --text-subtle:#8A918D; --border-subtle:var(--ck-line); --border-default:var(--ck-line); --border-strong:var(--ck-line-strong); --field-border:var(--ck-line-strong); --field-border-focus:var(--ck-primary-ink); --field-bg:var(--ck-surface); --ring-focus:0 0 0 3px var(--ck-ring); --ring-danger:0 0 0 3px rgba(180,35,24,.25); --control-accent-bg:var(--ck-primary); --control-accent-fg:var(--ck-on-primary); --control-accent-bg-hover:var(--ck-primary-hover); --control-primary-bg:var(--ck-primary); --control-primary-fg:var(--ck-on-primary); --control-primary-bg-hover:var(--ck-primary-hover); --control-secondary-bg:var(--ck-surface); --control-secondary-fg:var(--ck-heading); --control-secondary-border:var(--ck-line-strong); --control-ghost-fg:var(--ck-muted); --radius-pill:var(--ck-radius-btn); --radius-card:var(--ck-radius); --radius-control:var(--ck-radius-control); --radius-md:var(--ck-radius-control); --shadow-card:var(--ck-shadow); --shadow-lime:0 6px 18px -8px var(--ck-ring); --danger-500:var(--ck-bad); } html[data-theme="linha"]{ --ck-bg:#FFFFFF; --ck-surface:#FFFFFF; --ck-surface-2:#F6F7F6; --ck-line:#DADDDB; --ck-line-strong:#B9BFBB; --ck-radius:2px; --ck-radius-control:2px; --ck-radius-btn:2px; --ck-shadow:none; --ck-summary-bg:#F6F7F6; } html[data-theme="vitrine"]{ --ck-bg:#FAF6F0; --ck-surface:#FFFFFF; --ck-surface-2:#FBF8F4; --ck-line:#EDE5DA; --ck-line-strong:#D6CABB; --ck-heading:#1E1812; --ck-text:#2E2721; --ck-muted:#6A5F54; --ck-radius:20px; --ck-radius-control:14px; --ck-radius-btn:999px; --ck-shadow:0 1px 2px rgba(60,40,20,.05),0 22px 44px -28px rgba(60,40,20,.32); --ck-summary-bg:var(--ck-primary-soft); --ck-summary-line:var(--ck-primary-line); } html[data-theme="contraste"]{ --ck-bg:#FFFFFF; --ck-surface:#FFFFFF; --ck-surface-2:#FFFFFF; --ck-heading:#000000; --ck-text:#000000; --ck-muted:#2B2B2B; --ck-line:#1A1A1A; --ck-line-strong:#000000; --ck-radius:6px; --ck-radius-control:6px; --ck-radius-btn:6px; --ck-shadow:none; --ck-star:#8A4B00; --ck-good:#005A2B; --ck-bad:#9B1C12; --text-subtle:#2B2B2B; --text-3xs:12px; --text-2xs:13px; --text-xs:15px; --text-sm:16px; --text-base:17px; --text-md:18px; --text-lg:21px; --text-xl:23px; } /* ---------- base ---------- */ body{margin:0;background:var(--ck-bg);color:var(--ck-text);font-family:var(--ck-font);font-size:var(--text-base)} .checkout-page{min-height:100vh;display:flex;flex-direction:column} .checkout-main{flex:1;width:min(1120px,calc(100% - 40px));margin:0 auto;padding:36px 0 56px} .gg-consent-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} :focus-visible{outline:2px solid var(--ck-primary-ink);outline-offset:2px} label>span>:is(input,select,textarea):focus-visible{outline:none} a{color:var(--ck-primary-ink)} [data-numeric]{font-variant-numeric:tabular-nums} /* ---------- cabecalho, avisos e oferta ---------- */ .ck-announcement{font-size:var(--text-sm);font-weight:600;text-align:center;line-height:1.4} .ck-announcement p,.ck-announcement a{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:10px 16px;overflow-wrap:anywhere} .ck-announcement a{text-decoration:underline;text-underline-offset:3px} .ck-announcement a:focus-visible{outline:2px solid currentColor;outline-offset:-4px} .checkout-header{background:var(--ck-surface);border-bottom:1px solid var(--ck-line)} .ck-header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1120px,calc(100% - 40px));min-height:68px;margin:0 auto;padding:12px 0} .ck-align-centro .ck-header-inner{justify-content:center} .ck-align-centro .ck-secure{position:absolute;right:0;top:50%;transform:translateY(-50%)} .ck-brand{display:flex;align-items:center;min-width:0} .ck-brand img{display:block;width:auto;height:var(--ck-logo-h,40px);max-height:var(--ck-logo-h,40px);max-width:min(260px,60vw);object-fit:contain} .ck-store-name{color:var(--ck-heading);font:700 var(--text-xl)/1.15 var(--ck-font);letter-spacing:-.01em;overflow-wrap:anywhere} .ck-logo-p .ck-store-name{font-size:var(--text-lg)}.ck-logo-g .ck-store-name{font-size:26px}.ck-logo-gg .ck-store-name{font-size:30px} .secure-note{display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 12px;border:1px solid var(--ck-line);border-radius:999px;background:var(--ck-surface-2);color:var(--ck-muted);font-size:var(--text-xs);font-weight:600} .secure-note svg{color:var(--ck-good)} .ck-urgency{background:var(--ck-heading);color:#FFFFFF} .ck-urgency-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;width:min(1120px,calc(100% - 32px));margin:0 auto;padding:10px 0;font-size:var(--text-sm);text-align:center} .ck-urgency p{margin:0} .ck-timer{display:inline-block;min-width:8ch;margin:0 2px;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.14);font-weight:700;font-variant-numeric:tabular-nums} .ck-urgency-coupon{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;background:var(--ck-primary);color:var(--ck-on-primary);font-size:var(--text-xs);font-weight:700} html[data-theme="contraste"] .ck-urgency{background:#000} /* ---------- titulo da pagina ---------- */ .checkout-heading{max-width:680px;margin-bottom:24px} .checkout-heading h1{margin:0 0 6px;color:var(--ck-heading);font:700 clamp(26px,3.4vw,36px)/1.12 var(--ck-font);letter-spacing:-.02em} .checkout-heading p{margin:0;color:var(--ck-muted);font-size:var(--text-base);line-height:1.5} .store-connection{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:12px;color:var(--ck-muted);font-size:var(--text-xs)} .store-connection strong{color:var(--ck-heading)} .connection-dot{width:8px;height:8px;border-radius:50%;background:var(--ck-good);box-shadow:0 0 0 4px rgba(11,122,67,.14)} .ck-live-stat{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:6px 12px;border-radius:999px;background:var(--ck-surface);border:1px solid var(--ck-line);color:var(--ck-text);font-size:var(--text-xs)} .ck-live-stat svg{color:var(--ck-good)} .checkout-notice,.checkout-error{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:12px 14px;border-radius:var(--ck-radius-control);font-size:var(--text-sm);font-weight:600;line-height:1.4} .checkout-notice{border:1px solid var(--ck-primary-line);background:var(--ck-primary-soft);color:var(--ck-heading)} .checkout-error{border:1px solid var(--ck-bad);background:var(--ck-bad-soft);color:var(--ck-bad)} .checkout-notice svg,.checkout-error svg{flex:none} .ck-preview-note{border-style:dashed} /* ---------- banners ---------- */ .ck-banner{margin:0 0 24px;overflow:hidden;border-radius:var(--ck-radius);background:var(--ck-surface-2)} .ck-banner img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover} .ck-banner a{display:block} .ck-banner a:focus-visible{outline-offset:-3px} .ck-banner-middle{margin:24px 0 0} /* ---------- paineis e formulario ---------- */ .checkout-panel{background:var(--ck-surface);border:1px solid var(--ck-line);border-radius:var(--ck-radius);box-shadow:var(--ck-shadow);padding:28px} .panel-title{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--ck-heading);font:700 var(--text-lg)/1.25 var(--ck-font);letter-spacing:-.01em} .panel-title:focus{outline:none} .panel-title:focus-visible{outline:2px solid var(--ck-primary-ink);outline-offset:4px} .ck-num{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--ck-primary-soft);color:var(--ck-primary-ink);font-size:var(--text-xs);font-weight:800} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-grid .full{grid-column:1 / -1} .checkout-section{margin-top:28px;padding-top:28px;border-top:1px solid var(--ck-line)} /* Bloco de ação: oferta adicional, cupom, total e o botão de pagar, logo depois da forma de pagamento. Separado por um filete como as demais seções, mas SEM numero de etapa — nao e mais uma coisa a preencher, e o fecho. */ .ck-action-block{margin-top:28px;padding-top:24px;border-top:1px solid var(--ck-line)} .ck-action-block .price-line.total{margin-top:0} .checkout-grid,.checkout-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.85fr);gap:24px;align-items:start} .checkout-grid{grid-template-areas:"main aside" "extra aside"} .ck-main-col{grid-area:main;min-width:0;display:grid;gap:16px} .ck-extra-col{grid-area:extra;min-width:0} .checkout-grid>.order-card{grid-area:aside} .uf-select{display:flex;flex-direction:column;gap:6px;font-family:var(--ck-font)} .uf-select span{font-size:var(--text-xs);font-weight:600;color:var(--ck-text)} .uf-select select{height:44px;padding:0 10px;border:1px solid var(--field-border);border-radius:var(--ck-radius-control);background:var(--ck-surface);font:var(--text-base) var(--ck-font);color:var(--ck-text)} .uf-select select:focus-visible{outline:none;border-color:var(--ck-primary-ink);box-shadow:var(--ring-focus)} .uf-select small,.field-error{color:var(--ck-bad);font-size:var(--text-2xs)} .address-grid{grid-template-columns:repeat(6,minmax(0,1fr))} .address-grid>:nth-child(1){grid-column:span 2}.address-grid>:nth-child(2){grid-column:span 4}.address-grid>:nth-child(3){grid-column:span 2}.address-grid>:nth-child(4){grid-column:span 4}.address-grid>:nth-child(5){grid-column:span 2}.address-grid>:nth-child(6){grid-column:span 3}.address-grid>:nth-child(7){grid-column:span 1} /* Campos do design system: 44 px no minimo (toque). */ .ck-checkout label>span:has(>input),.card-pay label>span:has(>input),.pay-box label>span:has(>input){height:44px !important} /* forma de pagamento */ .method-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:16px} .method-tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:8px 12px;border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius-control);background:var(--ck-surface);color:var(--ck-text);font:600 var(--text-sm) var(--ck-font);cursor:pointer;transition:border-color .15s,background .15s} .method-tab:hover{border-color:var(--ck-primary-ink)} .method-tab.active{border-color:var(--ck-primary-ink);background:var(--ck-primary-soft);color:var(--ck-heading);box-shadow:inset 0 0 0 1px var(--ck-primary-ink)} .method-tab small{padding:2px 7px;border-radius:999px;background:var(--ck-primary);color:var(--ck-on-primary);font-size:var(--text-2xs);font-weight:700} .pix-box{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;padding:16px;border:1px solid var(--ck-line);border-radius:var(--ck-radius-control);background:var(--ck-surface-2);color:var(--ck-text)} .pix-box svg{grid-row:span 2;color:var(--ck-primary-ink);margin-top:2px} .pix-box strong{color:var(--ck-heading);font-size:var(--text-md)} .pix-box p{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--ck-muted)} /* entrega */ .shipping-options{display:grid;gap:10px;margin-top:16px} .shipping-option{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 14px;border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius-control);background:var(--ck-surface);cursor:pointer} .shipping-option:hover{border-color:var(--ck-primary-ink)} .shipping-option.active{border-color:var(--ck-primary-ink);background:var(--ck-primary-soft);box-shadow:inset 0 0 0 1px var(--ck-primary-ink)} .shipping-option input{width:18px;height:18px;flex:none;accent-color:var(--ck-primary-ink)} .shipping-option>span{display:grid;flex:1;min-width:0} .shipping-option b{color:var(--ck-heading);font-size:var(--text-sm)} .shipping-option small{color:var(--ck-muted);font-size:var(--text-xs)} .shipping-option strong{white-space:nowrap;color:var(--ck-heading)} .shipping-option s,.order-bump s{color:var(--ck-muted);font-weight:400;margin-right:4px} .shipping-empty{margin:14px 0 0;color:var(--ck-muted);font-size:var(--text-sm)} .ck-carrier{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--ck-muted);font-size:var(--text-xs)} .ck-carrier ul{display:flex;margin:0;padding:0;list-style:none} /* botoes das etapas */ .ck-step-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px} .ck-step-actions>button:last-child{margin-left:auto} .ck-step-actions>button:only-child{margin-left:0} /* ---------- resumo do pedido ---------- */ .order-card,.cart-card{position:sticky;top:24px;padding:24px;background:var(--ck-summary-bg);border:1px solid var(--ck-summary-line);border-radius:var(--ck-radius);box-shadow:var(--ck-shadow);color:var(--ck-text)} .order-card h2,.cart-heading h2{margin:0;color:var(--ck-heading);font:700 var(--text-lg)/1.25 var(--ck-font)} .order-card>h2{margin-bottom:16px} .cart-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--ck-summary-line);color:var(--ck-muted)} .cart-heading span{display:block;margin-top:4px;color:var(--ck-muted);font-size:var(--text-xs)} .cart-items{display:grid;gap:12px;margin:16px 0} .cart-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ck-summary-line)} .cart-item:last-child{border-bottom:0;padding-bottom:0} .ck-line-main{display:flex;align-items:center;gap:12px;min-width:0} .ck-thumb{position:relative;flex:none;width:52px;height:52px;border-radius:var(--ck-radius-control);background:var(--ck-surface-2);border:1px solid var(--ck-line);display:grid;place-items:center;color:var(--ck-muted)} .ck-thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit} .ck-thumb b{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ck-heading);color:#FFFFFF;font-size:11px;line-height:20px;text-align:center} .cart-item-info{min-width:0} .cart-item-info strong,.cart-item-info span{display:block} .cart-item-info strong{overflow:hidden;color:var(--ck-heading);font-size:var(--text-sm);text-overflow:ellipsis;white-space:nowrap} .cart-item-info span{margin-top:3px;color:var(--ck-muted);font-size:var(--text-xs)} .cart-item>strong{color:var(--ck-heading);font-size:var(--text-sm);white-space:nowrap} .quantity-control{display:inline-flex;align-items:center;gap:4px;flex:none;border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius-control);background:var(--ck-surface)} .quantity-control button{width:34px;height:34px;border:0;border-radius:var(--ck-radius-control);background:transparent;color:var(--ck-heading);font-size:16px;cursor:pointer} .quantity-control button:hover:not(:disabled){background:var(--ck-surface-2)} .quantity-control button:disabled{opacity:.35;cursor:not-allowed} .quantity-control span{min-width:20px;text-align:center;font-weight:700;color:var(--ck-heading)} .cart-empty{display:grid;justify-items:center;gap:8px;padding:28px 8px;color:var(--ck-muted);text-align:center} .cart-empty strong{color:var(--ck-heading);font-size:var(--text-sm)} .cart-empty span{font-size:var(--text-xs)} .cart-total{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0;padding-top:14px;border-top:1px solid var(--ck-summary-line);color:var(--ck-heading);font:700 var(--text-lg) var(--ck-font)} .coupon-row{display:flex;gap:8px;margin-top:4px} .coupon-row input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--field-border);border-radius:var(--ck-radius-control);background:var(--ck-surface);font:var(--text-sm) var(--ck-font);color:var(--ck-text);text-transform:uppercase} .coupon-row input:focus-visible{outline:none;border-color:var(--ck-primary-ink);box-shadow:var(--ring-focus)} .coupon-row button{height:44px !important} .coupon-message{margin:6px 0 0;color:var(--ck-bad);font-size:var(--text-xs)} .coupon-message.ok{color:var(--ck-good);font-weight:600} .coupon-message button{margin-left:6px;border:0;background:none;color:inherit;text-decoration:underline;cursor:pointer;font:inherit} .price-lines{display:grid;gap:8px;margin-top:16px} .price-line{display:flex;justify-content:space-between;gap:16px;color:var(--ck-muted);font-size:var(--text-sm)} .price-line span:last-child{color:var(--ck-text);font-variant-numeric:tabular-nums} .price-line.discount span:last-child{color:var(--ck-good);font-weight:600} .price-line.total{align-items:baseline;margin:14px 0 16px;padding-top:14px;border-top:1px solid var(--ck-summary-line);color:var(--ck-heading);font:700 var(--text-lg) var(--ck-font)} .price-line.total span:last-child{color:var(--ck-heading);font-size:24px;letter-spacing:-.01em} .order-bump{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px;border:2px dashed var(--ck-primary-line);border-radius:var(--ck-radius-control);background:var(--ck-surface);cursor:pointer} .order-bump.active{border-style:solid;border-color:var(--ck-primary-ink);background:var(--ck-primary-soft)} .order-bump input{width:20px;height:20px;flex:none;accent-color:var(--ck-primary-ink)} .order-bump img{width:52px;height:52px;flex:none;border-radius:var(--ck-radius-control);object-fit:cover} .order-bump>span{display:grid;gap:2px;min-width:0;color:var(--ck-heading)} .order-bump small{color:var(--ck-muted);font-size:var(--text-xs)} .order-bump em{font-style:normal;font-weight:700} .ck-submit-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;color:var(--ck-muted);font-size:var(--text-xs);text-align:center} .ck-submit-note svg{color:var(--ck-good)} .ck-later{margin:4px 0 0;padding:12px;border-radius:var(--ck-radius-control);background:var(--ck-surface-2);color:var(--ck-muted);font-size:var(--text-xs);text-align:center} .ck-brands{display:grid;gap:8px;margin-top:16px} .ck-brands>span{color:var(--ck-muted);font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em} .ck-brands ul{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none} .gg-brand{display:flex;align-items:center;justify-content:center;width:46px;height:30px;padding:0 5px;border:1px solid #D9DCDA;border-radius:5px;background:#FFFFFF;overflow:hidden} .gg-brand img{display:block;height:15px;width:auto;max-width:100%} .gg-brand-pix img{height:14px}.gg-brand-elo img{height:15px}.gg-brand-mastercard img{height:20px}.gg-brand-amex{padding:0}.gg-brand-amex img{height:28px}.gg-brand-hipercard img{height:13px} .gg-brand-boleto{width:56px}.gg-brand-boleto img{height:16px} .gg-brand-correios{width:92px;height:34px}.gg-brand-correios img{height:18px} /* resumo recolhivel do celular (so aparece em telas estreitas) */ .ck-summary-toggle{display:none} /* ---------- etapas ---------- */ .ck-steps{padding:16px 20px;background:var(--ck-surface);border:1px solid var(--ck-line);border-radius:var(--ck-radius);box-shadow:var(--ck-shadow)} .ck-steps-count{margin:0 0 10px;color:var(--ck-muted);font-size:var(--text-xs);font-weight:600} .ck-steps ol{display:flex;gap:8px;margin:0;padding:0;list-style:none} .ck-steps li{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:var(--ck-muted);font-size:var(--text-sm);font-weight:600} .ck-step-dot{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ck-line-strong);background:var(--ck-surface);font-size:var(--text-xs)} .ck-steps li.current{color:var(--ck-heading)} .ck-steps li.current .ck-step-dot{border-color:var(--ck-primary);background:var(--ck-primary);color:var(--ck-on-primary)} .ck-steps li.done{color:var(--ck-text)} .ck-steps li.done .ck-step-dot{border-color:var(--ck-primary-ink);color:var(--ck-primary-ink);background:var(--ck-primary-soft)} .ck-step-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ck-steps-track{height:4px;margin-top:14px;overflow:hidden;border-radius:999px;background:var(--ck-line)} .ck-steps-track span{display:block;height:100%;border-radius:inherit;background:var(--ck-primary-ink);transition:width .3s ease} .ck-step-review{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--ck-line);border-radius:var(--ck-radius-control);background:var(--ck-surface-2);font-size:var(--text-sm)} .ck-step-review+.ck-step-review{margin-top:8px} .ck-step-review div{display:grid;gap:2px;min-width:0} .ck-step-review b{color:var(--ck-heading);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em} .ck-step-review span{color:var(--ck-text);overflow-wrap:anywhere} .ck-link-button{padding:4px 2px;border:0;background:none;color:var(--ck-primary-ink);font:600 var(--text-sm) var(--ck-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer} /* ---------- catalogo ---------- */ .catalog-section{min-width:0} .catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .catalog-toolbar h2{margin:0;color:var(--ck-heading);font:700 var(--text-lg) var(--ck-font)} .catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .catalog-product{display:flex;flex-direction:column;overflow:hidden;background:var(--ck-surface);border:1px solid var(--ck-line);border-radius:var(--ck-radius);box-shadow:var(--ck-shadow)} .catalog-product-art{display:grid;place-items:center;min-height:120px;background:var(--ck-surface-2);color:var(--ck-muted)} .catalog-product-art img{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover} .catalog-product-content{display:flex;flex-direction:column;flex:1;padding:16px} .catalog-product-meta{color:var(--ck-good);font-size:var(--text-2xs);font-weight:700} .catalog-product h3{margin:6px 0 0;color:var(--ck-heading);font:700 var(--text-md)/1.3 var(--ck-font)} .catalog-product p{margin:6px 0 14px;color:var(--ck-muted);font-size:var(--text-xs);line-height:1.5} .catalog-product-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto} .catalog-product-bottom strong{color:var(--ck-heading);font:700 var(--text-lg) var(--ck-font)} .price-stack{display:grid;gap:1px} .price-stack s{color:var(--ck-muted);font-size:var(--text-2xs)} .variant-picker{display:grid;gap:10px;margin:12px 0 4px} .variant-option>span{display:block;margin-bottom:6px;color:var(--ck-muted);font-size:var(--text-2xs);font-weight:600} .variant-values{display:flex;flex-wrap:wrap;gap:6px} .variant-chip{min-width:40px;min-height:36px;padding:0 12px;border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius-btn);background:var(--ck-surface);color:var(--ck-text);font:600 var(--text-xs) var(--ck-font);cursor:pointer} .variant-chip:hover:not(:disabled){border-color:var(--ck-primary-ink)} .variant-chip.active{border-color:var(--ck-primary);background:var(--ck-primary);color:var(--ck-on-primary)} .variant-chip:disabled{color:var(--text-subtle);text-decoration:line-through;cursor:not-allowed;opacity:.6} .mobile-cart-bar{display:none} /* ---------- pedido criado e obrigado ---------- */ .success-state{display:grid;gap:12px;max-width:600px;margin:24px auto;text-align:center} .success-mark{width:60px;height:60px;display:grid;place-items:center;margin:0 auto 4px;border-radius:50%;background:var(--ck-primary);color:var(--ck-on-primary)} .success-mark.status-pending{background:#FDF0D8;color:#8A5300} .success-mark.status-failed,.success-mark.status-canceled{background:var(--ck-bad-soft);color:var(--ck-bad)} .success-state h1{margin:0;color:var(--ck-heading);font:700 32px/1.15 var(--ck-font);letter-spacing:-.02em} .success-state p{margin:0 0 8px;color:var(--ck-muted);line-height:1.6} .order-receipt{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:4px 0 8px;color:var(--ck-muted);font-size:var(--text-sm)} .order-receipt b{color:var(--ck-heading)} .order-receipt-items{display:grid;gap:4px;margin-bottom:18px;color:var(--ck-text);font-size:var(--text-xs)} .ck-thanks{display:grid;gap:12px;margin:8px 0 16px;padding:20px;border:1px solid var(--ck-line);border-radius:var(--ck-radius-control);background:var(--ck-surface-2);text-align:left} .ck-thanks h2{margin:0;color:var(--ck-heading);font:700 var(--text-lg)/1.3 var(--ck-font)} .ck-thanks>p{margin:0 !important;color:var(--ck-muted);font-size:var(--text-sm)} .ck-thanks-steps{display:grid;gap:10px;margin:4px 0 0;padding:0;list-style:none} .ck-thanks-steps li{display:flex;gap:12px;align-items:flex-start} .ck-thanks-steps li>span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ck-primary);color:var(--ck-on-primary);font-size:var(--text-xs);font-weight:800} .ck-thanks-steps div{display:grid;gap:2px;padding-top:3px} .ck-thanks-steps b{color:var(--ck-heading);font-size:var(--text-sm)} .ck-thanks-steps small{color:var(--ck-muted);font-size:var(--text-xs);line-height:1.45} .ck-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:var(--ck-radius-btn);background:#1F7A4C;color:#FFFFFF;font-weight:700;font-size:var(--text-sm);text-decoration:none} .ck-whatsapp:hover{background:#17623C;color:#FFFFFF} .ck-pix-payee{margin:0 !important;justify-self:stretch;padding:10px 12px;border-radius:var(--ck-radius-control);background:var(--ck-surface-2);color:var(--ck-text) !important;font-size:var(--text-sm);text-align:center} .ck-pix-payee b{color:var(--ck-heading)} .ck-pix-mark{height:40px;width:auto} .ck-qr-placeholder{display:grid;place-items:center;width:200px;height:200px;border:1px dashed var(--ck-line-strong);border-radius:var(--ck-radius-control);color:var(--ck-muted);font-size:var(--text-xs);text-align:center;padding:12px} /* ---------- prova social ---------- */ .ck-social{margin-top:32px} .ck-social h2{margin:0 0 14px;color:var(--ck-heading);font:700 var(--text-lg) var(--ck-font)} .ck-testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px} .ck-social.compact .ck-testimonials{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .ck-testimonial{display:flex;flex-direction:column;gap:10px;margin:0;padding:18px;background:var(--ck-surface);border:1px solid var(--ck-line);border-radius:var(--ck-radius);box-shadow:var(--ck-shadow)} .ck-testimonial blockquote{flex:1;margin:0;color:var(--ck-text);font-size:var(--text-sm);line-height:1.55;overflow-wrap:anywhere} .ck-testimonial-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .ck-testimonial figcaption{display:flex;align-items:center;gap:10px} .ck-testimonial figcaption img,.ck-avatar{width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover} .ck-avatar{display:grid;place-items:center;background:var(--ck-primary-soft);color:var(--ck-primary-ink);font-size:var(--text-xs);font-weight:800} .ck-testimonial figcaption>span:not(.ck-avatar):not(.ck-verified){display:grid;min-width:0;flex:1} .ck-testimonial figcaption b{color:var(--ck-heading);font-size:var(--text-sm)} .ck-testimonial figcaption small{color:var(--ck-muted);font-size:var(--text-xs)} .ck-verified{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#E6F4EC;color:var(--ck-good);font-size:var(--text-2xs);font-weight:700} .ck-stars{display:inline-flex;gap:2px} .ck-stars svg{fill:none;stroke:var(--ck-star);stroke-width:1.6} .ck-stars svg.on{fill:var(--ck-star)} .ck-social>.ck-link-button{margin-top:12px} /* ---------- rodape ---------- */ .ck-footer{margin-top:auto;border-top:1px solid var(--ck-line);background:var(--ck-surface)} .ck-footer-inner{display:grid;gap:14px;width:min(1120px,calc(100% - 40px));margin:0 auto;padding:28px 0} .ck-footer .ck-brands{margin:0} .ck-footer-text{margin:0;max-width:760px;color:var(--ck-text);font-size:var(--text-sm);line-height:1.6;white-space:pre-line;overflow-wrap:anywhere} .ck-footer-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:var(--text-sm)} .ck-footer-links a{color:var(--ck-primary-ink);text-decoration:underline;text-underline-offset:3px} .ck-footer-legal{margin:0;color:var(--ck-muted);font-size:var(--text-xs)} /* ---------- pagamento online (Pix, cartao, boleto) ---------- */ .payment-panel{display:grid;gap:12px;margin:4px 0 8px;text-align:left} .pay-box{display:grid;gap:12px;padding:18px;border:1px solid var(--ck-line);border-radius:var(--ck-radius-control);background:var(--ck-surface)} .pay-loading{grid-auto-flow:column;justify-content:center;align-items:center;gap:10px;color:var(--ck-muted);font-size:var(--text-sm)} .pay-loading svg{animation:gg-pay-spin 1s linear infinite} @keyframes gg-pay-spin{to{transform:rotate(360deg)}} .pix-pay{justify-items:center} .pix-qr{display:block;width:min(220px,100%);height:auto;aspect-ratio:1;border:1px solid var(--ck-line);border-radius:var(--ck-radius-control);image-rendering:pixelated;background:#fff} .pix-steps{justify-self:stretch;display:grid;gap:4px;margin:0;padding-left:20px;color:var(--ck-text);font-size:var(--text-xs);line-height:1.5} .pix-code-label{justify-self:stretch;color:var(--ck-text);font-size:var(--text-xs);font-weight:600} .pix-code{justify-self:stretch;box-sizing:border-box;width:100%;min-width:0;margin-top:-6px;padding:10px 12px;border:1px solid var(--field-border);border-radius:var(--ck-radius-control);background:var(--ck-surface-2);color:var(--ck-text);font:var(--text-2xs)/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;resize:none} .pix-pay>button{justify-self:stretch} .pix-timer{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--ck-muted);font-size:var(--text-xs)} .pix-timer b{color:var(--ck-heading);font-variant-numeric:tabular-nums} .pay-message{margin:0 !important;color:var(--ck-text) !important;font-size:var(--text-sm);line-height:1.5} .pay-error{display:flex;align-items:flex-start;gap:6px;margin:0 !important;padding:10px 12px;border-radius:var(--ck-radius-control);background:var(--ck-bad-soft);color:var(--ck-bad) !important;font-size:var(--text-sm);line-height:1.45} .pay-error svg{flex:none;margin-top:2px} .pay-note{margin:0 !important;color:var(--ck-muted) !important;font-size:var(--text-2xs);text-align:center} .sandbox-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px dashed #A86200;border-radius:var(--ck-radius-control);background:#FDF0D8;color:var(--ck-heading);font-size:var(--text-xs);font-weight:600} .sandbox-banner span{flex:1;min-width:150px} .card-pay .form-grid{gap:12px} .billing-fields{margin:0;padding:0;border:0;min-width:0} .billing-fields legend{margin-bottom:10px;padding:0;color:var(--ck-heading);font-size:var(--text-sm);font-weight:600} .success-state.has-payment{max-width:560px} .boleto-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;color:var(--ck-primary-ink);font-weight:600;font-size:var(--text-sm);text-decoration:underline;overflow-wrap:anywhere} .connect-panel{max-width:560px;margin:0 auto} .connect-panel h2{margin:0 0 8px;font:700 var(--text-lg) var(--ck-font);color:var(--ck-heading)} .connect-panel p{margin:0 0 18px;color:var(--ck-muted);font-size:var(--text-sm);line-height:1.5} .loading-state{display:grid;justify-items:center;gap:10px;padding:72px 20px;color:var(--ck-muted);font-size:var(--text-sm)} .loading-state svg{animation:gg-pay-spin 1s linear infinite} .store-closed-panel{text-align:center;padding:28px 20px} .store-closed-panel h1{margin:12px 0 10px;font:700 var(--text-xl)/1.3 var(--ck-font);color:var(--ck-heading);overflow-wrap:anywhere} .store-closed-panel p{margin:0 0 10px} .store-closed-panel p:last-child{margin-bottom:0} .store-closed-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--ck-surface-2);color:var(--ck-muted)} /* =================== temas =================== */ /* linha: sem sombra, linhas finas, cantos retos, campos altos, titulos em caixa alta */ html[data-theme="linha"] .checkout-header{border-bottom-color:var(--ck-heading)} html[data-theme="linha"] .checkout-panel{border:0;border-top:2px solid var(--ck-heading);padding:24px 0 0;background:transparent} html[data-theme="linha"] .checkout-section{border-top-color:var(--ck-line)} html[data-theme="linha"] .panel-title{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.09em} html[data-theme="linha"] .ck-num{border-radius:0;background:var(--ck-heading);color:#FFFFFF} html[data-theme="linha"] .ck-checkout label>span:has(>input),html[data-theme="linha"] .card-pay label>span:has(>input){height:52px !important} html[data-theme="linha"] .uf-select select{height:52px} html[data-theme="linha"] .method-tab,html[data-theme="linha"] .shipping-option{min-height:60px} html[data-theme="linha"] .order-card,html[data-theme="linha"] .cart-card{border-color:var(--ck-line)} html[data-theme="linha"] .catalog-product{box-shadow:none} html[data-theme="linha"] .catalog-product-art{border-bottom:1px solid var(--ck-line)} html[data-theme="linha"] .checkout-heading h1{font-weight:600;letter-spacing:-.03em} html[data-theme="linha"] .ck-steps{border:0;border-radius:0;background:transparent;padding:0 0 16px} html[data-theme="linha"] .ck-step-dot{border-radius:0} html[data-theme="linha"] .ck-testimonial{box-shadow:none} html[data-theme="linha"] .secure-note{border-radius:0;background:transparent} html[data-theme="linha"] .ck-thumb b{border-radius:0} /* vitrine: fotos grandes, fundo quente, resumo destacado */ html[data-theme="vitrine"] .checkout-header{background:transparent;border-bottom:0} html[data-theme="vitrine"] .catalog-grid{gap:20px} html[data-theme="vitrine"] .catalog-product-art img{aspect-ratio:1/1} html[data-theme="vitrine"] .catalog-product-art{min-height:200px} html[data-theme="vitrine"] .catalog-product h3{font-size:var(--text-lg)} html[data-theme="vitrine"] .catalog-product-content{padding:18px 20px 20px} html[data-theme="vitrine"] .order-card,html[data-theme="vitrine"] .cart-card{padding:28px;border-width:1px;box-shadow:0 30px 60px -36px rgba(60,40,20,.45)} html[data-theme="vitrine"] .order-card>h2,html[data-theme="vitrine"] .cart-heading h2{font-size:var(--text-xl)} html[data-theme="vitrine"] .ck-thumb{width:72px;height:72px;background:var(--ck-surface)} html[data-theme="vitrine"] .price-line.total span:last-child{font-size:28px} html[data-theme="vitrine"] .checkout-heading h1{font-size:clamp(28px,3.8vw,40px)} html[data-theme="vitrine"] .ck-num{background:var(--ck-primary);color:var(--ck-on-primary)} /* contraste: fonte maior, bordas fortes, foco bem visivel, links sublinhados */ html[data-theme="contraste"] :focus-visible{outline:3px solid #000000;outline-offset:3px;box-shadow:0 0 0 6px #FFD500} html[data-theme="contraste"] label>span:has(>input:focus-visible){outline:3px solid #000000;outline-offset:2px;box-shadow:0 0 0 6px #FFD500 !important} html[data-theme="contraste"] .checkout-panel,html[data-theme="contraste"] .order-card,html[data-theme="contraste"] .cart-card,html[data-theme="contraste"] .catalog-product,html[data-theme="contraste"] .ck-testimonial,html[data-theme="contraste"] .ck-steps{border:2px solid #000000} html[data-theme="contraste"] .ck-checkout label>span:has(>input),html[data-theme="contraste"] .card-pay label>span:has(>input){height:52px !important;border-width:2px !important;border-color:#000000 !important} html[data-theme="contraste"] .uf-select select,html[data-theme="contraste"] .coupon-row input,html[data-theme="contraste"] .method-tab,html[data-theme="contraste"] .shipping-option,html[data-theme="contraste"] .variant-chip,html[data-theme="contraste"] .quantity-control{border:2px solid #000000} html[data-theme="contraste"] .uf-select select{height:52px} html[data-theme="contraste"] .method-tab.active,html[data-theme="contraste"] .shipping-option.active{box-shadow:inset 0 0 0 2px #000000;background:#FFF6BF} html[data-theme="contraste"] a,html[data-theme="contraste"] .ck-link-button{text-decoration:underline;text-decoration-thickness:2px} html[data-theme="contraste"] .ck-num,html[data-theme="contraste"] .ck-thanks-steps li>span{background:#000000;color:#FFFFFF} html[data-theme="contraste"] .panel-title{font-size:var(--text-xl)} html[data-theme="contraste"] .secure-note{border:2px solid #000000;color:#000000;background:#FFFFFF} html[data-theme="contraste"] .gg-brand{border-color:#000000} html[data-theme="contraste"] .checkout-heading h1{font-size:clamp(30px,3.8vw,40px)} /* fundo escuro escolhido pela loja: textos que ficam direto no fundo viram claros */ html[data-bg-tone="dark"] .checkout-heading h1,html[data-bg-tone="dark"] .catalog-toolbar h2,html[data-bg-tone="dark"] .ck-social h2{color:#FFFFFF} html[data-bg-tone="dark"] .checkout-heading p,html[data-bg-tone="dark"] .store-connection{color:rgba(255,255,255,.78)} html[data-bg-tone="dark"] .store-connection strong{color:#FFFFFF} html[data-bg-tone="dark"] body>#gg-consent-footer-root .gg-consent-footer,html[data-bg-tone="dark"] .gg-consent-footer button{color:rgba(255,255,255,.8)} /* =================== celular =================== */ @media (max-width:860px){ .checkout-grid,.checkout-layout{grid-template-columns:minmax(0,1fr)} .checkout-grid{grid-template-areas:"main" "aside" "extra"} .order-card,.cart-card{position:static} .cart-card{scroll-margin-top:12px} } @media (max-width:760px){ .ck-header-inner{width:calc(100% - 32px);min-height:60px;padding:10px 0} .ck-brand img{height:calc(var(--ck-logo-h,40px) * .8);max-height:calc(var(--ck-logo-h,40px) * .8)} .secure-note{padding:6px 8px} .secure-note>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .checkout-main{width:calc(100% - 32px);padding:22px 0 40px} .checkout-panel{padding:20px 16px} html[data-theme="linha"] .checkout-panel{padding:20px 0 0} .form-grid{grid-template-columns:1fr;gap:14px} .form-grid .full{grid-column:auto} .address-grid{grid-template-columns:1fr 1fr} .address-grid>*{grid-column:span 1 !important} .address-grid>:nth-child(2),.address-grid>:nth-child(5){grid-column:1 / -1 !important} .checkout-heading{margin-bottom:18px} .checkout-heading h1{font-size:28px} .checkout-heading p{font-size:var(--text-sm)} .store-connection strong{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .catalog-grid{grid-template-columns:1fr} .catalog-toolbar{align-items:flex-start;flex-direction:column} .catalog-product-bottom{align-items:stretch;flex-direction:column} .catalog-product-bottom button{width:100%} .cart-card,.order-card{padding:18px} .cart-item{flex-wrap:wrap} .quantity-control{margin-left:auto} .method-tabs{grid-template-columns:1fr 1fr} .ck-steps{padding:14px 16px} .ck-step-label{font-size:var(--text-xs)} .ck-steps li:not(.current) .ck-step-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .ck-step-actions{flex-direction:column-reverse;align-items:stretch} .ck-step-actions>button{width:100%;margin-left:0 !important} .ck-social{margin-top:24px} .ck-testimonials{grid-template-columns:1fr} .ck-footer-inner{width:calc(100% - 32px)} .success-state{margin:8px auto 24px} .success-state h1{font-size:28px} .pay-box{padding:14px} .ck-thanks{padding:16px} /* "Ver resumo · total" no topo, recolhivel */ .ck-summary-toggle{display:block;background:var(--ck-summary-bg);border:1px solid var(--ck-summary-line);border-radius:var(--ck-radius)} .ck-summary-toggle>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:0 16px;border:0;background:transparent;color:var(--ck-primary-ink);font:600 var(--text-sm) var(--ck-font);cursor:pointer} .ck-summary-toggle>button>span{display:inline-flex;align-items:center;gap:8px} .ck-summary-toggle>button>b{color:var(--ck-heading);font-size:var(--text-md)} .ck-summary-body{padding:0 16px 16px} .ck-summary-body .cart-items{margin-top:4px} .mobile-cart-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border:0;border-radius:var(--ck-radius-btn);background:var(--ck-heading);box-shadow:0 12px 32px -12px rgba(0,0,0,.45);color:#FFFFFF;font:600 var(--text-sm) var(--ck-font);cursor:pointer} .mobile-cart-bar span{display:grid;text-align:left} .mobile-cart-bar small{color:rgba(255,255,255,.72);font-size:var(--text-2xs);font-weight:500} .mobile-cart-bar b{padding:10px 16px;border-radius:var(--ck-radius-btn);background:var(--ck-primary);color:var(--ck-on-primary)} .checkout-page.has-cart-bar .checkout-main{padding-bottom:96px} html[data-theme="vitrine"] .order-card,html[data-theme="vitrine"] .cart-card{padding:20px} } @media (prefers-reduced-motion:reduce){ .pay-loading svg,.loading-state svg{animation:none} .ck-steps-track span{transition:none} html{scroll-behavior:auto} } .order-card.ck-hide-mobile{} @media (max-width:860px){.order-card.ck-hide-mobile{display:none}} @media (max-width:760px){.ck-urgency-inner>svg{display:none}}