:root { --yellow:#ffca05; --ink:#171717; --muted:#8a8a8a; --line:#e2e2e2; --green:#1fb866; --red:#f6253e; --tap:48px; }
    * { box-sizing:border-box; }
    html, body { margin:0; min-height:100%; }
    body { background:linear-gradient(180deg,#fafafa 0%,#f0f1f3 240px); color:var(--ink); font-family:Inter,Arial,sans-serif; padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)); }
    button, input, select { font:inherit; }
    button { cursor:pointer; }
    .topbar { height:64px; background:linear-gradient(180deg,#ffd633 0%,var(--yellow) 100%); display:flex; align-items:center; justify-content:center; position:sticky; top:0; z-index:25; box-shadow:0 4px 14px rgba(0,0,0,.12); padding-top:env(safe-area-inset-top,0px); }
    .topbar-back { position:absolute; left:16px; width:var(--tap); height:var(--tap); border:0; border-radius:50%; background:#e9b900; color:#181818; font-size:22px; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,.08); }
    .brand { display:flex; align-items:center; gap:10px; line-height:1.08; }
    .brand img { height:48px; width:auto; max-width:48px; border-radius:50%; object-fit:contain; background:transparent; }
    .brand strong { display:block; font-size:15px; line-height:18px; font-weight:800; }
    .brand small { display:block; color:#686000; font-size:11px; line-height:13px; font-weight:500; }
    .page { width:min(100%, 480px); padding:16px; margin:0 auto; }
    #cart-card { background:transparent; box-shadow:none; border-radius:0; }
    .checkout-flow-hint { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin:12px 0 4px; padding:10px 12px; border-radius:12px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06); font-size:12px; font-weight:700; color:#9a9a9a; }
    .checkout-flow-hint .active { color:var(--ink); }
    .checkout-flow-hint .done { color:var(--green); }
    .checkout-flow-hint .sep { color:#ccc; font-weight:400; }
    .page h1 { margin:12px 0 16px; font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.02em; }
    .empty { text-align:center; background:#fff; border-radius:12px; padding:28px 20px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
    .empty h2 { margin:14.94px 0 8px; font-size:18px; }
    .empty p { color:var(--muted); margin:14px 0 16px; font-size:14px; }
    .empty .primary { min-height:51px; padding:16px; font-size:15px; border:0; }
    .white-card { background:#fff; border-radius:14px; box-shadow:0 2px 9px rgba(0,0,0,.07); }
    .cart-item { display:flex; gap:12px; align-items:center; min-height:88px; margin-bottom:12px; padding:12px; background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
    .cart-item img { width:64px; height:64px; object-fit:contain; flex:none; border-radius:10px; }
    .cart-item-main { min-width:0; flex:1; }
    .cart-item-name { font-size:14px; font-weight:700; line-height:1.28; }
    .cart-item-price { margin-top:3px; font-size:13px; font-weight:600; }
    .cart-item-qty { color:#777; font-size:12px; }
    .remove { border:0; background:none; color:#aaa; padding:8px; font-size:17px; }
    .summary { margin-top:16px; padding:16px; }
    .sum-row { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#404040; font-size:14px; margin:0; padding:9px 0; }
    .sum-row strong { color:#222; }
    .sum-row.shipping strong { color:var(--green); }
    .sum-row.total { padding:14px 0 8px; border-top:2px solid #f0f0f0; color:#171717; font-size:16px; font-weight:800; }
    .sum-row.total strong { color:var(--red); font-size:20px; }
    .primary, .secondary { display:block; width:100%; border-radius:14px; min-height:var(--tap); padding:14px 16px; font-weight:800; font-size:16px; }
    .summary .primary { margin-top:14px; }
    .primary { border:0; background:var(--yellow); color:#111; padding:15px 16px; }
    .secondary { min-height:58px; margin-top:10px; border:2px solid var(--yellow); background:#fff; color:#171717; }
    .bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; height:64px; padding-bottom:env(safe-area-inset-bottom,0px); background:#fff; border-top:1px solid #e4e4e4; box-shadow:0 -3px 16px rgba(0,0,0,.07); }
    .bottom-nav button { position:relative; flex:1; border:0; background:none; color:#b4b4b4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:7px 4px 6px; font-size:10px; font-weight:700; }
    .bottom-nav i { display:flex; align-items:center; justify-content:center; width:24px; height:24px; font-size:20px; font-style:normal; line-height:1; }
    .bottom-nav .active { color:#222; }
    .bottom-nav .active i { color:var(--yellow); filter:drop-shadow(0 2px 4px rgba(255,202,5,.35)); }
    .nav-badge { position:absolute; top:3px; left:calc(50% + 7px); display:none; min-width:18px; height:18px; padding:0 4px; border-radius:10px; background:#ef3340; color:#fff; font-size:10px; line-height:18px; font-weight:800; }
    .nav-badge:not(:empty) { display:block; }
    .overlay { position:fixed; inset:0; z-index:50; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.65); padding:10px; }
    .overlay.show { display:flex; }
    .modal { width:min(100%,500px); max-height:calc(100vh - 20px); overflow:auto; border-radius:16px; background:#fff; box-shadow:0 12px 50px rgba(0,0,0,.25); }
    .modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:23px 24px 8px; }
    .modal-head h2 { margin:0; font-size:20px; }
    .close { border:0; background:none; color:#999; font-size:24px; font-weight:800; }
    .modal-sub { margin:0; padding:0 24px 15px; color:#999; font-size:13px; }
    .delivery-overlay { align-items:center; padding:18px 0; }
    .delivery-overlay .modal { position:relative; width:min(92%,420px); max-height:none; overflow:visible; border-radius:20px; padding:28px 20px 24px; box-shadow:0 18px 45px rgba(0,0,0,.28); border:1px solid rgba(0,0,0,.06); }
    .delivery-overlay .modal-head { padding:0; margin:0; }
    .delivery-overlay .modal-head h2 { width:100%; margin:0 0 5px; text-align:center; font-size:18px; letter-spacing:-.3px; }
    .delivery-overlay .modal-head h2 i { margin-right:4px; }
    .delivery-overlay .close { display:block; position:absolute; top:15px; right:17px; padding:0; font-size:25px; line-height:1; }
    .delivery-overlay .modal-sub { padding:0; margin:0 0 20px; text-align:center; }
    .delivery-option { display:flex; align-items:center; gap:16px; width:100%; margin:0 0 12px; padding:20px; border:2px solid #ddd; border-radius:12px; text-align:left; background:#fff; }
    .delivery-option.selected { border-color:var(--yellow); background:#fffef8; box-shadow:0 2px 8px rgba(255,204,1,.25); }
    .delivery-option .option-icon { width:34px; color:var(--yellow); font-size:26px; text-align:center; }
    .delivery-option strong { display:block; font-size:15px; }
    .delivery-option span span { display:block; color:#999; font-size:12px; margin-top:2px; }
    .modal-footer { padding:0; }
    .modal-footer .primary { margin-top:0; }
    .delivery-overlay .modal-footer .primary:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
    .schedule-overlay { align-items:center; }
    .schedule-overlay .modal { width:min(90%,500px); padding:24px; border-radius:16px; }
    .schedule-overlay .modal-head { padding:0; margin-bottom:20px; }
    .schedule-overlay .modal-head h2 { font-size:20px; }
    .schedule-copy { margin:0 0 20px; color:#666; text-align:center; font-size:14px; }
    .schedule-field { margin-bottom:16px; }
    .schedule-field label { display:block; margin-bottom:8px; font-size:14px; font-weight:600; }
    .schedule-field label i { color:var(--yellow); margin-right:5px; }
    .schedule-field input, .schedule-field select { width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; background:#fff; font-size:14px; }
    .schedule-summary { display:none; margin:20px 0; padding:16px; border-radius:8px; background:#f8f8f8; text-align:center; }
    .schedule-summary.show { display:block; }
    .schedule-summary i { color:var(--green); font-size:24px; }
    .schedule-summary strong { color:#e2b400; font-size:16px; }
    .schedule-back { width:100%; margin-top:8px; padding:14px; border:0; border-radius:8px; background:#f5f5f5; color:#333; font-weight:600; }
    .checkout-modal { align-items:center; }
    .checkout-modal .modal { width:min(100%,500px); padding:24px 20px 28px; border-radius:18px; box-shadow:0 16px 48px rgba(0,0,0,.2); }
    .checkout-modal .modal-head { padding:0; margin-bottom:20px; }
    .order-summary { margin:0 0 20px; border:1px solid #e5e5e5; border-radius:12px; overflow:hidden; }
    .order-summary-top, .order-summary-total { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; font-size:14px; }
    .order-summary-total { background:#fff3bf; color:#9c4511; font-weight:700; }
    .order-summary-total strong { font-size:17px; }
    .order-summary-top { cursor:pointer; background:#f8f8f8; }
    .order-summary-details { padding:12px 16px; border-bottom:1px solid #e5e5e5; }
    .order-summary-line { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; color:#666; font-size:13px; }
    .order-summary-line:last-child { margin-bottom:0; }
    .order-summary-line strong { color:#333; font-weight:600; }
    .order-summary-details.collapsed { display:none; }
    .progress { display:flex; align-items:flex-start; gap:0; padding:12px 16px 16px; margin-bottom:24px; background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.06); }
    .progress-step { position:relative; flex:1; text-align:center; color:#999; font-size:12px; font-weight:700; }
    .progress-step:not(:last-child)::after { content:""; position:absolute; top:19px; left:60%; width:80%; height:2px; background:#ddd; }
    .progress-step.done:not(:last-child)::after { background:var(--green); }
    .progress-dot { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0 auto 5px; border-radius:50%; background:#e3e3e3; color:#888; font-weight:700; font-size:16px; }
    .progress-step.active { color:#e7ae00; }
    .progress-step.active .progress-dot { background:var(--yellow); color:#fff; box-shadow:0 0 0 5px #fff4c8; }
    .progress-step.done { color:var(--green); }
    .progress-step.done .progress-dot { background:var(--green); color:#fff; }
    .step-panel { padding:0; }
    .step-panel.hidden { display:none; }
    .section-title { margin:0 0 16px; color:#333; font-size:16px; }
    .section-title i, .payment-title i { color:var(--yellow); margin-right:8px; }
    .field { margin:0 0 16px; }
    .field label { display:block; margin:0 0 8px; font-size:14px; font-weight:600; }
    .field label i { display:inline-block; width:14px; margin-right:4px; color:#111; text-align:center; }
    .field input, .field select { width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; background:#fff; color:#222; font-size:14px; }
    .field input:focus, .field select:focus { outline:2px solid #ffe27a; border-color:#eab900; }
    .field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .field small { color:#aaa; font-weight:400; }
    .step-actions { display:flex; gap:12px; margin:24px 0 0; border-top:1px solid #f3f3f3; padding:14px 0 6px; }
    .step-actions button { min-height:49px; border-radius:8px; font-weight:600; }
    .step-actions .back-btn { background:#fff; border:2px solid #ddd; color:#777; }
    .step-actions .next-btn { flex:2; background:var(--yellow); border:0; color:#fff; padding:14px 24px; font-size:15px; }
    .step-actions .back-btn { flex:1; padding:14px 24px; }
    #step-1 .step-actions { display:block; margin-top:0; border-top:0; padding-top:0; }
    #step-1 .step-actions .next-btn { display:inline-block; width:auto; min-height:0; padding:14px 24px; border-radius:8px; }
    #step-3 .step-actions { display:block; margin-top:0; border-top:0; padding-top:0; }
    #step-3 .step-actions .back-btn { width:100%; min-height:0; border:0; background:transparent; color:#999; padding:12px; }
    .age-note { margin:20px 0 0; color:#777; font-size:11px; }
    .age-note i { margin-right:4px; color:#667085; }
    .age-compliance-banner {
      display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px;
      padding:7px 10px; background:#111827; color:#f9fafb; font-size:11px; line-height:1.35;
      text-align:center; border-bottom:2px solid #FFCC01;
    }
    .age-compliance-banner strong { color:#FFCC01; font-weight:800; }
    .age-compliance-banner a { color:#FFCC01; font-weight:700; }
    .age-confirm-box {
      display:flex; gap:10px; align-items:flex-start; margin:14px 0 12px; padding:12px 12px;
      border:1px solid #e7ebef; border-radius:12px; background:#fffdf3;
    }
    .age-confirm-box input { margin-top:3px; width:18px; height:18px; flex:none; accent-color:#07883f; }
    .age-confirm-box label { font-size:13px; line-height:1.45; color:#344054; font-weight:600; }
    .age-confirm-box a { color:#07883f; }
    .checkout-legal-links { margin:10px 0 0; text-align:center; font-size:12px; font-weight:700; }
    .checkout-legal-links a { color:#07883f; text-decoration:none; }
    .checkout-legal-links a:hover { text-decoration:underline; }
    .checkout-legal-note { margin:8px 0 0; text-align:center; color:#8a93a3; font-size:11px; }
    .review-card { background:#f7f7f7; border-radius:12px; padding:15px 16px; }
    .receipt-brand { text-align:center; font-size:14px; font-weight:800; letter-spacing:.5px; color:#111; }
    .receipt-date { text-align:center; margin-top:2px; font-size:12px; color:#888; }
    .receipt-customer { text-align:center; font-size:13px; color:#333; font-weight:600; }
    .receipt-divider { border-top:1px dashed #ddd; margin:12px 0; }
    .receipt-table { width:100%; border-collapse:collapse; font-size:12.5px; }
    .receipt-table th { color:#999; font-size:11.5px; text-align:left; text-transform:uppercase; padding-bottom:8px; }
    .receipt-table td { padding:6px 0; color:#333; vertical-align:top; border-bottom:1px solid #eee; }
    .receipt-table th:nth-child(2), .receipt-table td:nth-child(2) { text-align:center; }
    .receipt-table th:last-child, .receipt-table td:last-child { text-align:right; }
    .review-check { display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0 auto 10px; border-radius:50%; background:#d9f8e6; color:var(--green); font-size:28px; }
    .review-title { text-align:center; margin:0; font-size:16px; }
    .review-sub { text-align:center; margin:4px 0 16px; color:#999; font-size:12px; }
    .review-card h3 { margin:0; text-align:center; font-size:14px; }
    .review-card .review-date { margin:2px 0 10px; text-align:center; color:#888; font-size:11px; }
    .review-line { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px dashed #ddd; font-size:12px; }
    .review-line.total { font-size:15px; font-weight:800; }
    .review-line.total strong { color:var(--red); }
    .payment-title { margin:20px 0 11px; font-size:16px; }
    .payment-option { display:flex; align-items:center; gap:13px; width:100%; margin:9px 0; padding:13px 16px; border:2px solid #e1e1e1; border-radius:12px; background:#fff; text-align:left; }
    .payment-option.selected { border-color:#18ae5a; background:#f2fff6; }
    .payment-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:#23bba7; color:#fff; font-size:21px; }
    .payment-option.card .payment-icon { background:#5e54e9; }
    .payment-options-unavailable { display:grid; gap:10px; margin:10px 0 2px; }
    .payment-option.unavailable { min-height:58px; margin:0; padding:12px 16px; border-width:1px; border-color:#dce3ee; border-radius:10px; background:#fff; color:#95a2b6; opacity:1; cursor:not-allowed; }
    .payment-option.unavailable .payment-icon { flex:0 0 24px; width:24px; height:24px; border-radius:0; background:transparent !important; color:#98a6bb; font-size:18px; }
    .payment-disabled-name { color:#95a2b6; font-size:14px; font-weight:700; line-height:1.25; white-space:nowrap; }
    .payment-status { margin-left:auto; color:#ff7887; font-size:12px; font-weight:400; line-height:1.3; text-align:right; }
    .payment-option[disabled] { pointer-events:none; }
    .payment-copy { flex:1; }
    .payment-copy strong { display:block; font-size:14px; }
    .payment-copy span { display:block; color:#1aab57; font-size:12px; }
    .payment-option.card .payment-copy span { color:#777; }
    .radio { width:19px; height:19px; border:2px solid #ccd1d7; border-radius:50%; }
    .selected .radio { border:6px solid #23ad61; }
    .pix-only-note { margin:12px 0 0; padding:11px 12px; border-radius:10px; background:#f3faf6; border:1px solid #cdeedc; color:#245c3c; font-size:12px; line-height:1.45; }
    .shipping-note { margin-top:15px; padding:11px 12px; border-left:4px solid var(--yellow); background:#fff4cc; font-size:12px; }
    .pix-button { position:sticky; bottom:8px; z-index:5; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; margin-top:16px; border:0; border-radius:11px; background:#09ac75; color:#fff; font-size:16px; font-weight:800; box-shadow:0 -5px 14px rgba(255,255,255,.92), 0 7px 18px rgba(9,172,117,.22); }
    .pix-button i { color:#fff; font-size:17px; line-height:1; }
    .pix-notice { display:none; margin-top:11px; padding:11px; border-radius:9px; background:#fff7e6; color:#8b5a00; font-size:12px; }
    .pix-notice.show { display:block; }
    .pix-result { display:grid; gap:10px; text-align:center; }
    .pix-result-title { margin:0; color:#087a56; font-size:14px; font-weight:800; }
    .pix-qr { display:block; width:180px; height:180px; margin:0 auto; border-radius:10px; background:#fff; object-fit:contain; }
    .pix-code { width:100%; min-height:72px; padding:9px; border:1px solid #dfe5e1; border-radius:8px; background:#fff; color:#444; font:11px/1.35 Consolas,monospace; resize:vertical; }
    .pix-copy { width:100%; min-height:42px; border:0; border-radius:9px; background:#087a56; color:#fff; font-weight:800; }
    .pix-error { color:#9c4511; }
    @media (min-width:700px) { .overlay { align-items:center; } }
    @media (max-width:430px) { .page { width:min(100% - 20px,450px); } .cart-item { padding-inline:14px; } .checkout-modal .step-panel { padding-left:0; padding-right:0; } .checkout-modal .progress { padding-left:10px; padding-right:10px; } .checkout-modal .modal-head { padding-left:0; padding-right:0; } .payment-option.unavailable { gap:10px; padding-inline:12px; } .payment-disabled-name { font-size:13px; } .payment-status { max-width:48%; font-size:11px; } }