:root {
    --shop-bg: #0b0b0c;
    --shop-surface: #121213;
    --shop-panel: #1d1d1f;
    --shop-raised: #29292c;
    --shop-divider: #2b2b2e;
    --shop-text: #f5f5f6;
    --shop-muted: #a3a3a8;
    --shop-subtle: #77777d;
    --shop-pink: #fe2c55;
    --shop-pink-pressed: #e91f49;
    --shop-cyan: #25f4ee;
    --shop-orange: #ff531f;
    --shop-gold: #ffba08;
    --shop-safe-bottom: env(safe-area-inset-bottom, 0px);
    --shop-safe-top: env(safe-area-inset-top, 0px);
    --shop-ease: cubic-bezier(.2, .72, .22, 1);
    color-scheme: dark;
}

html[data-theme="light"] {
    --shop-bg: #f2f2f3;
    --shop-surface: #fff;
    --shop-panel: #fff;
    --shop-raised: #f3f3f4;
    --shop-divider: #e7e7e9;
    --shop-text: #161823;
    --shop-muted: #6f7077;
    --shop-subtle: #929399;
    color-scheme: light;
}

html { background: var(--shop-bg); font-size: 16px; -webkit-text-size-adjust: 100%; }
body,
body.product-dark,
body.checkout-dark,
body.pix-dark,
body.status-dark {
    background: var(--shop-bg);
    color: var(--shop-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: "kern" 1, "tnum" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--shop-cyan); outline-offset: 2px; }
.app-shell { width: min(100%, 480px); background: var(--shop-surface); box-shadow: 0 0 0 1px #ffffff08, 0 20px 80px #0008; }
.shop-icon { stroke-width: 1.85; }

/* The device chrome appears only when installed, avoiding a duplicate OS status bar in normal browsers. */
.device-statusbar { display: none; }
@media (display-mode: standalone) and (max-width: 520px) {
    .device-statusbar { position: sticky; top: 0; z-index: 80; display: flex; align-items: end; justify-content: space-between; width: min(100%, 480px); height: calc(26px + var(--shop-safe-top)); margin: 0 auto; padding: var(--shop-safe-top) 18px 4px; background: var(--shop-surface); color: var(--shop-text); font-size: 12px; font-weight: 700; }
    .device-statusbar span { display: flex; align-items: center; gap: 5px; }
    .device-statusbar .shop-icon { width: 15px; height: 15px; }
}

.topbar { min-height: 56px; padding: 6px 12px; background: color-mix(in srgb, var(--shop-surface) 94%, transparent); border-color: var(--shop-divider); backdrop-filter: blur(18px); }
.product-dark .topbar { top: 0; }
.icon-button { width: 36px; height: 40px; color: var(--shop-text); }
.icon-button .shop-icon { width: 24px; height: 24px; }
.product-dark .search { height: 40px; border-radius: 8px; background: var(--shop-raised); }
.product-dark .search input { color: var(--shop-text); }
.product-more-menu { border: 1px solid var(--shop-divider); background: var(--shop-panel); box-shadow: 0 14px 45px #0008; }

.product-dark .product-gallery { height: auto !important; max-height: none; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; touch-action: pan-y pinch-zoom; }
.gallery-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; transform: none !important; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 220ms ease; }
.gallery-slide img.is-loaded { opacity: 1; }
.gallery-slide:not(:has(img.is-loaded)) { background: linear-gradient(100deg, #eee 20%, #fafafa 35%, #eee 50%); background-size: 240% 100%; animation: shop-shimmer 1.15s linear infinite; }
.gallery-counter { right: 12px !important; bottom: 12px !important; padding: 4px 8px !important; border-radius: 999px !important; background: #161616b8 !important; font-size: 11px !important; backdrop-filter: blur(8px); }
.gallery-expand { top: 12px; right: 12px; bottom: auto; left: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #1616169c; color: #fff; backdrop-filter: blur(8px); }
.gallery-expand .shop-icon { width: 18px; }
.gallery-prev, .gallery-next { display: none !important; }

.deal-bar { min-height: 78px; height: auto; padding: 9px 14px 10px; background: linear-gradient(112deg, #ff5a20 0%, var(--shop-orange) 56%, #ff4217 100%); }
.deal-bar::after { opacity: .15; }
.deal-price { align-items: baseline; column-gap: 7px; }
.deal-price > span { padding: 3px 6px; border-radius: 5px; font-size: 14px; line-height: 1.2; }
.deal-price > small { font-size: 12px; font-weight: 650; }
.deal-price strong { font-size: 28px; font-weight: 760; letter-spacing: -.9px; }
.deal-price strong i { font-size: 12px; }
.deal-price del { margin-top: 3px; color: #ffe0d8; font-size: 12px; }
.deal-countdown { align-items: flex-start; gap: 5px; }
.deal-countdown > b { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.deal-countdown > b .shop-icon { width: 14px; height: 14px; }
.deal-countdown > span { font-size: 11px; }

.installments { height: 44px; padding: 0 14px; background: var(--shop-surface); border-color: var(--shop-divider); color: var(--shop-text); font-size: 13px; }
.benefit-chips { min-height: 43px; padding: 6px 14px 9px; background: var(--shop-surface); }
.benefit-chips span { border-color: color-mix(in srgb, var(--shop-pink) 25%, var(--shop-divider)); background: color-mix(in srgb, var(--shop-pink) 8%, var(--shop-surface)); color: color-mix(in srgb, var(--shop-pink) 70%, var(--shop-text)); font-size: 11px; }
.dark-summary, .dark-shipping, .variant-row, .customer-protection-panel, .product-offers, .creator-videos, .reviews-section, .merchant-profile-card, .more-from-store, .dark-description, .product-recommendations { background: var(--shop-panel) !important; color: var(--shop-text) !important; border-color: var(--shop-bg) !important; }
.dark-summary { padding: 13px 14px 15px; border-bottom-width: 1px; }
.product-title-line h1 { font-size: 16px; line-height: 1.42; font-weight: 450; letter-spacing: -.12px; }
.product-title-line button { display: grid; flex: 0 0 34px; width: 34px; height: 34px; padding: 5px; place-items: center; color: var(--shop-text); }
.product-title-line button .shop-icon { width: 23px; height: 23px; }
.product-title-line button.is-saved { color: var(--shop-pink); }
.product-title-line button.is-saved .shop-icon { fill: currentColor; }
.dark-rating { margin-top: 9px; color: var(--shop-text); font-size: 12px; }
.dark-rating > .shop-icon { width: 16px; height: 16px; color: var(--shop-gold); fill: currentColor; }
.dark-rating a { color: #5ea9ff; }
.dark-rating b { font-weight: 450; }
.dark-shipping { padding: 13px 14px; }
.dark-shipping > div { font-size: 13px; }
.dark-shipping p { margin-left: 25px; color: var(--shop-muted); font-size: 11px; }
.section-chevron { width: 18px; height: 18px; color: var(--shop-muted); }

.product-sections { top: 56px; z-index: 25; gap: 22px; justify-content: flex-start; padding: 0 14px; height: 44px; align-items: center; background: color-mix(in srgb, var(--shop-surface) 94%, transparent); border-color: var(--shop-divider); backdrop-filter: blur(18px); }
.product-sections a { position: relative; color: var(--shop-muted); font-size: 12px; }
.product-sections a.is-active { color: var(--shop-text); font-weight: 650; }
.product-sections a.is-active::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -13px; height: 2px; border-radius: 2px; background: var(--shop-text); }
.variant-row { padding: 12px 14px; }
.variant-thumbnails img { border: 1px solid var(--shop-divider); }
.customer-protection-panel, .product-offers, .creator-videos, .reviews-section, .merchant-profile-card, .more-from-store, .dark-description { border-bottom: 8px solid var(--shop-bg) !important; }
.customer-protection-panel { padding: 15px 14px 16px; }
.customer-protection-panel header { color: #dca47d; }
.customer-protection-panel div { color: var(--shop-text); font-size: 12px; line-height: 1.6; }
.product-offers, .creator-videos, .reviews-section, .merchant-profile-card, .more-from-store, .dark-description { padding-left: 14px; padding-right: 14px; }
.creator-videos > div { gap: 8px; scroll-snap-type: x mandatory; }
.creator-video-card, .creator-videos > div > button { flex-basis: 132px; width: 132px; height: 184px; scroll-snap-align: start; border-radius: 8px; background: var(--shop-raised); }
.creator-videos img, .creator-videos video { filter: saturate(.94) contrast(1.02); }

.reviews-section h2 { font-size: 16px; }
.reviews-section header button { color: var(--shop-muted); }
.review-score { margin: 16px 0; }
.review-score > strong { font-size: 32px; }
.review-filters button, .review-sheet-filters button { border: 1px solid transparent; background: var(--shop-raised); color: var(--shop-text); }
.review-filters button[aria-pressed="true"], .review-sheet-filters button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--shop-pink) 55%, transparent); background: color-mix(in srgb, var(--shop-pink) 16%, var(--shop-raised)); color: color-mix(in srgb, var(--shop-pink) 76%, var(--shop-text)); }
.customer-review { border-color: var(--shop-divider); }
.review-avatar { background: linear-gradient(145deg, #52525a, #2e2e34); color: #fff; }
.review-author small, .review-variant { color: var(--shop-muted); }
.seller-reply { background: var(--shop-raised); }

.shipping-expiry { bottom: calc(74px + var(--shop-safe-bottom)); width: min(100%, 480px); height: 40px; padding: 0 13px; grid-template-columns: 20px 1fr auto 22px; background: #173638f5; color: #dffffe; font-size: 11px; backdrop-filter: blur(14px); }
.shipping-expiry strong { font-size: 11px; }
.dark-buybar { width: min(100%, 480px); height: calc(74px + var(--shop-safe-bottom)); padding: 8px 10px calc(8px + var(--shop-safe-bottom)); grid-template-columns: 38px 42px 54px minmax(0, 1fr); gap: 6px; background: color-mix(in srgb, var(--shop-panel) 97%, transparent); border-color: var(--shop-divider); backdrop-filter: blur(18px); }
.dark-buybar > a { font-size: 9px; }
.dark-buybar > a .shop-icon { width: 23px; height: 23px; }
.dark-buybar .cart-only, .dark-buybar form button { min-width: 0; border-radius: 999px; }
.dark-buybar form button { background: var(--shop-pink); box-shadow: none; }
.dark-buybar form button:active, .variant-confirm:active, .pay-now:active, .checkout-footer > button:active { transform: scale(.975); background: var(--shop-pink-pressed); }
.dark-buybar form button strong { font-size: 16px; }

.commerce-overlay, .payment-overlay, .coupon-overlay { background: transparent; }
.commerce-backdrop, .payment-backdrop { background: rgb(0 0 0 / calc(.72 * var(--backdrop-opacity, 1))); backdrop-filter: blur(calc(2px * var(--backdrop-opacity, 1))); }
.variant-sheet, .review-sheet, .payment-sheet, .coupon-sheet { width: min(100%, 480px); border: 1px solid #ffffff10; border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--shop-panel); color: var(--shop-text); box-shadow: 0 -20px 55px #0009; overscroll-behavior: contain; }
.variant-sheet > header, .review-sheet > header, .payment-sheet > header, .coupon-sheet > header { background: color-mix(in srgb, var(--shop-panel) 96%, transparent); border-color: var(--shop-divider); backdrop-filter: blur(16px); }
.variant-sheet > header button, .review-sheet > header button, .payment-sheet > header button, .coupon-sheet > header button { color: var(--shop-text); }
.sheet-handle::after { background: var(--shop-subtle); }
.variant-card-grid button { border-color: var(--shop-divider); background: var(--shop-raised); color: var(--shop-text); }
.variant-card-grid button[aria-checked="true"] { border-color: var(--shop-text); box-shadow: inset 0 0 0 1px var(--shop-text); }
.variant-card-grid button.is-pressed, .payment-row.is-pressed, .shipping-coupon.is-pressed { transform: scale(.985); }
.variant-confirm, .pay-now, .coupon-confirm { background: var(--shop-pink); }

.checkout-page { background: var(--shop-bg); color: var(--shop-text); }
.checkout-header, .checkout-address, .checkout-store, .shop-discount, .order-summary, .payment-section, .checkout-footer { background: var(--shop-panel) !important; color: var(--shop-text); }
.checkout-header { position: sticky; top: 0; z-index: 26; height: 54px; border-color: var(--shop-divider); backdrop-filter: blur(18px); }
.checkout-header > a { display: grid; width: 34px; height: 34px; place-items: center; }
.checkout-header > a .shop-icon { width: 25px; height: 25px; }
.checkout-address { padding: 15px 14px; }
.address-editor summary { font-size: 14px; }
.address-editor summary small { color: var(--shop-muted); font-size: 12px; }
.address-editor input, .order-note { background: var(--shop-raised); border-color: var(--shop-divider); color: var(--shop-text); }
.address-form-head { display: none; }
.checkout-store { padding: 16px 14px; }
.checkout-store-head strong { font-size: 15px; }
.bundle-hint { margin: 24px 0 22px; font-size: 13px; }
.checkout-item { grid-template-columns: 92px minmax(0, 1fr); min-height: 142px; }
.checkout-item > img { width: 92px; height: 92px; border-radius: 4px; }
.checkout-item-info h2 { font-size: 14px; }
.checkout-item-info > p { font-size: 12px; }
.checkout-item-info > strong { font-size: 17px; }
.delivery-promise { background: #173638; }
.shop-discount { border-color: var(--shop-bg); }
.order-summary, .payment-section { padding: 20px 14px; border-color: var(--shop-bg); }
.order-summary > div { font-size: 13px; }
.payment-row, .modal-payment-row { border-color: var(--shop-divider); }
.payment-row > span:nth-child(2), .modal-payment-row > span:nth-child(2) { font-size: 15px; }
.pay-icon { overflow: hidden; background: #fff; }
.pay-icon img { width: 100%; height: 100%; object-fit: contain; }
.checkout-footer { width: min(100%, 480px); border-color: var(--shop-divider); padding-bottom: var(--shop-safe-bottom); }
.checkout-footer > button { height: 52px; background: var(--shop-pink); }

.pix-page, .status-page { background: var(--shop-surface); color: var(--shop-text); }
.pix-header, .status-header { background: color-mix(in srgb, var(--shop-surface) 94%, transparent); backdrop-filter: blur(18px); }
.pix-code-card, .tracking-card, .status-address, .status-items, .success-hero { background: var(--shop-panel); border-color: var(--shop-divider); }
.view-order { background: var(--shop-panel); color: var(--shop-text); }

.product-loading, .checkout-loading { background: var(--shop-surface); }
.checkout-loading span i, .product-loading span i { background: var(--shop-pink); }
.checkout-loading span i:last-child, .product-loading span i:last-child { background: var(--shop-cyan); }
.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border: 2px solid #ffffff55; border-top-color: #fff; border-radius: 50%; animation: shop-spin .7s linear infinite; }
.image-error::after { content: "Imagem indisponível"; position: absolute; inset: 0; display: grid; place-items: center; background: var(--shop-raised); color: var(--shop-muted); font-size: 12px; }
.network-banner { background: #2b2023; color: #ffb3c1; }

html[data-theme="light"] .product-more-menu,
html[data-theme="light"] .variant-sheet,
html[data-theme="light"] .review-sheet,
html[data-theme="light"] .payment-sheet,
html[data-theme="light"] .coupon-sheet { border-color: #dedee1; box-shadow: 0 -18px 50px #0003; }
html[data-theme="light"] .dark-buybar { box-shadow: 0 -1px 0 var(--shop-divider), 0 -8px 28px #0000000d; }
html[data-theme="light"] .shipping-expiry { background: #dff7f5f5; color: #176d69; }
html[data-theme="light"] .shipping-expiry strong { color: #16837d; }
html[data-theme="light"] .customer-protection-panel header { color: #a15f32; }
html[data-theme="light"] .review-avatar { background: linear-gradient(145deg, #f0f0f2, #d9d9de); color: #555; }
html[data-theme="light"] .gallery-slide:not(:has(img.is-loaded)) { background: linear-gradient(100deg, #eee 20%, #fafafa 35%, #eee 50%); background-size: 240% 100%; }

@media (max-width: 520px) {
    .app-shell { max-width: none; box-shadow: none; }
    .topbar { padding-left: 10px; padding-right: 10px; }
    .address-editor[open]::before { content: ""; position: fixed; inset: 0; z-index: 89; background: #000b; backdrop-filter: blur(2px); }
    .address-editor[open] form { position: fixed; left: 50%; bottom: 0; z-index: 90; display: grid; width: min(100%, 480px); max-height: 88dvh; margin: 0; padding: 0 16px calc(18px + var(--shop-safe-bottom)); overflow-y: auto; transform: translateX(-50%); border-radius: 20px 20px 0 0; background: var(--shop-panel); box-shadow: 0 -24px 60px #0009; animation: shop-sheet-in 360ms var(--shop-ease); }
    .address-form-head { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; min-height: 58px; margin: 0 -16px 12px; padding: 0 16px; border-bottom: 1px solid var(--shop-divider); background: var(--shop-panel); }
    .address-form-head strong { grid-column: 2; text-align: center; }
    .address-form-head button { grid-column: 3; display: grid; width: 34px; height: 34px; padding: 6px; border: 0; place-items: center; background: transparent; color: var(--shop-text); }
    .address-form-head .shop-icon { width: 22px; height: 22px; }
}

@media (max-width: 380px) {
    .deal-price strong { font-size: 24px; }
    .deal-bar { padding-left: 11px; padding-right: 11px; }
    .dark-buybar { grid-template-columns: 34px 38px 48px minmax(0, 1fr); gap: 4px; }
    .dark-buybar form button strong { font-size: 14px; }
    .dark-buybar form button small { font-size: 9px; }
    .creator-video-card, .creator-videos > div > button { flex-basis: 122px; width: 122px; height: 172px; }
}

@keyframes shop-shimmer { to { background-position: -240% 0; } }
@keyframes shop-spin { to { transform: rotate(360deg); } }
@keyframes shop-sheet-in { from { transform: translate(-50%, 100%); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
