/* build:begin assets/css/base/tokens.css */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap');
:root {
--space: 'Barlow', sans-serif;
--body: 'Barlow', sans-serif;
--headline-pill: 'Barlow', sans-serif;
--figtree: 'Barlow', sans-serif;
--bg: #050505;
--bg-top-start: #11121a;
--panel: #0b0b0f;
--panel-alt: #0b0b10;
--panel-dark: #060608;
--bg-night: #0c0f12;
--glass: rgba(12, 15, 18, 0.82);
--glass-border: rgba(255, 255, 255, 0.12);
--neon-mint: #10ffc8;
--champagne: #ffb347;
--neon-rose: #ff4f70;
--text: #f5f5f7;
--muted: #9ea1b7;
--neon-yellow: #fddf4a;
--neon-pink: #ff4fde;
--neon-lime: #9cff01;
--neon-lime-alt: #c8ff00;
--neon-cyan: #3cf4ff;
--mint-soft: #8dffea;
--accent-hot: #ff007f;
--white: #fff;
--white-soft: #fefefe;
--black: #000;
--black-soft: #111;
--brand-instagram: #e4405f;
--brand-facebook: #1877f2;
--brand-tiktok: #25f4ee;
--brand-youtube: #ff0000;
--brand-whatsapp: #25d366;
--brand-pinterest: #e60023;
--brand-kwai: #ff6a00;
--danger: #ff6b6b;
--danger-accent: #ff5d8d;
--success: #46fcb4;
--success-soft: rgba(70, 252, 180, 0.08);
--success-border: rgba(70, 252, 180, 0.35);
--success-border-strong: rgba(70, 252, 180, 0.55);
--danger-border: rgba(255, 83, 120, 0.4);
--surface-border-subtle: rgba(255, 255, 255, 0.08);
--surface-border-faint: rgba(255, 255, 255, 0.06);
--surface-border: rgba(255, 255, 255, 0.12);
--surface-border-soft: rgba(255, 255, 255, 0.3);
--surface-border-strong: rgba(255, 255, 255, 0.2);
--surface-border-stronger: rgba(255, 255, 255, 0.22);
--surface-border-bright: rgba(255, 255, 255, 0.24);
--surface-border-hover: rgba(255, 255, 255, 0.38);
--surface-border-dashed: rgba(255, 255, 255, 0.18);
--surface-bg-subtle: rgba(255, 255, 255, 0.02);
--surface-bg-soft: rgba(255, 255, 255, 0.04);
--surface-bg-contrast: rgba(255, 255, 255, 0.06);
--surface-bg-hover: rgba(255, 255, 255, 0.08);
--text-alpha-96: rgba(255, 255, 255, 0.96);
--text-alpha-94: rgba(255, 255, 255, 0.94);
--text-alpha-92: rgba(255, 255, 255, 0.92);
--text-alpha-90: rgba(255, 255, 255, 0.9);
--text-alpha-88: rgba(255, 255, 255, 0.88);
--text-alpha-86: rgba(255, 255, 255, 0.86);
--text-alpha-85: rgba(255, 255, 255, 0.85);
--text-alpha-80: rgba(255, 255, 255, 0.8);
--text-alpha-78: rgba(255, 255, 255, 0.78);
--text-alpha-75: rgba(255, 255, 255, 0.75);
--text-alpha-72: rgba(255, 255, 255, 0.72);
--text-alpha-70: rgba(255, 255, 255, 0.7);
--text-alpha-65: rgba(255, 255, 255, 0.65);
--text-alpha-60: rgba(255, 255, 255, 0.6);
--text-alpha-50: rgba(255, 255, 255, 0.5);
--text-alpha-45: rgba(255, 255, 255, 0.45);
--text-alpha-40: rgba(255, 255, 255, 0.4);
--text-alpha-35: rgba(255, 255, 255, 0.35);
--white-alpha-32: rgba(255, 255, 255, 0.32);
--white-alpha-25: rgba(255, 255, 255, 0.25);
--white-alpha-18: rgba(255, 255, 255, 0.18);
--white-alpha-16: rgba(255, 255, 255, 0.16);
--white-alpha-15: rgba(255, 255, 255, 0.15);
--white-alpha-14: rgba(255, 255, 255, 0.14);
--white-alpha-10: rgba(255, 255, 255, 0.1);
--white-alpha-05: rgba(255, 255, 255, 0.05);
--white-alpha-03: rgba(255, 255, 255, 0.03);
--black-alpha-08: rgba(0, 0, 0, 0.08);
--black-alpha-92: rgba(0, 0, 0, 0.92);
--black-alpha-85: rgba(0, 0, 0, 0.85);
--black-alpha-80: rgba(0, 0, 0, 0.8);
--black-alpha-70: rgba(0, 0, 0, 0.7);
--black-alpha-60: rgba(0, 0, 0, 0.6);
--black-alpha-55: rgba(0, 0, 0, 0.55);
--black-alpha-50: rgba(0, 0, 0, 0.5);
--black-alpha-45: rgba(0, 0, 0, 0.45);
--black-alpha-40: rgba(0, 0, 0, 0.4);
--black-alpha-35: rgba(0, 0, 0, 0.35);
--black-alpha-25: rgba(0, 0, 0, 0.25);
--black-alpha-82: rgba(0, 0, 0, 0.82);
--black-alpha-88: rgba(0, 0, 0, 0.88);
--black-alpha-78: rgba(0, 0, 0, 0.78);
--black-alpha-72: rgba(0, 0, 0, 0.72);
--panel-ink: #0b0b14;
--panel-alpha-95: rgba(5, 5, 8, 0.95);
--panel-alpha-90: rgba(5, 5, 8, 0.9);
--panel-alpha-80: rgba(5, 5, 8, 0.8);
--panel-cool-alpha-96: rgba(12, 15, 18, 0.96);
--panel-cool-alpha-94: rgba(12, 15, 18, 0.94);
--panel-cool-alpha-90: rgba(11, 13, 19, 0.9);
--panel-cool-alt-alpha-90: rgba(10, 12, 18, 0.9);
--panel-deep-alpha-92: rgba(5, 6, 12, 0.92);
--champagne-alpha-08: rgba(255, 179, 71, 0.08);
--panel-blue-alpha-64: rgba(8, 10, 18, 0.64);
--panel-blue-alpha-38: rgba(8, 10, 18, 0.38);
--mint-alpha-95: rgba(16, 255, 200, 0.95);
--mint-alpha-90: rgba(16, 255, 200, 0.9);
--mint-alpha-80: rgba(16, 255, 200, 0.8);
--mint-alpha-65: rgba(16, 255, 200, 0.65);
--mint-alpha-50: rgba(16, 255, 200, 0.5);
--mint-alpha-40: rgba(16, 255, 200, 0.4);
--mint-alpha-35: rgba(16, 255, 200, 0.35);
--mint-alpha-28: rgba(16, 255, 200, 0.28);
--mint-alpha-22: rgba(16, 255, 200, 0.22);
--mint-alpha-20: rgba(16, 255, 200, 0.2);
--mint-alpha-18: rgba(16, 255, 200, 0.18);
--mint-alpha-15: rgba(16, 255, 200, 0.15);
--mint-alpha-12: rgba(16, 255, 200, 0.12);
--mint-alpha-08: rgba(16, 255, 200, 0.08);
--mint-alpha-06: rgba(16, 255, 200, 0.06);
--mint-alpha-05: rgba(16, 255, 200, 0.05);
--rose-alpha-85: rgba(255, 79, 112, 0.85);
--rose-alpha-60: rgba(255, 79, 112, 0.6);
--rose-alpha-50: rgba(255, 79, 112, 0.5);
--rose-alpha-40: rgba(255, 79, 112, 0.4);
--rose-alpha-30: rgba(255, 79, 112, 0.3);
--rose-alpha-25: rgba(255, 79, 112, 0.25);
--rose-alpha-22: rgba(255, 79, 112, 0.22);
--rose-alpha-18: rgba(255, 79, 112, 0.18);
--rose-alpha-12: rgba(255, 79, 112, 0.12);
--rose-alpha-08: rgba(255, 79, 112, 0.08);
--rose-alpha-06: rgba(255, 79, 112, 0.06);
--rose-alpha-05: rgba(255, 79, 112, 0.05);
--pink-alpha-35: rgba(255, 79, 222, 0.35);
--pink-alpha-25: rgba(255, 79, 222, 0.25);
--pink-alpha-12: rgba(255, 79, 222, 0.12);
--pink-alpha-08: rgba(255, 79, 222, 0.08);
--pink-alpha-06: rgba(255, 79, 222, 0.06);
--yellow-alpha-90: rgba(253, 223, 74, 0.9);
--yellow-alpha-80: rgba(253, 223, 74, 0.8);
--yellow-alpha-75: rgba(253, 223, 74, 0.75);
--yellow-alpha-70: rgba(253, 223, 74, 0.7);
--yellow-alpha-65: rgba(253, 223, 74, 0.65);
--yellow-alpha-60: rgba(253, 223, 74, 0.6);
--yellow-alpha-55: rgba(253, 223, 74, 0.55);
--yellow-alpha-50: rgba(253, 223, 74, 0.5);
--yellow-alpha-45: rgba(253, 223, 74, 0.45);
--yellow-alpha-40: rgba(253, 223, 74, 0.4);
--yellow-alpha-35: rgba(253, 223, 74, 0.35);
--yellow-alpha-25: rgba(253, 223, 74, 0.25);
--yellow-alpha-20: rgba(253, 223, 74, 0.2);
--yellow-alpha-18: rgba(253, 223, 74, 0.18);
--yellow-alpha-14: rgba(253, 223, 74, 0.14);
--yellow-alpha-12: rgba(253, 223, 74, 0.12);
--yellow-alpha-06: rgba(253, 223, 74, 0.06);
--yellow-alpha-05: rgba(253, 223, 74, 0.05);
--yellow-alpha-32: rgba(253, 223, 74, 0.32);
--accent-hot-alpha-90: rgba(255, 0, 127, 0.9);
--accent-hot-alpha-60: rgba(255, 0, 127, 0.6);
--accent-hot-alpha-55: rgba(255, 0, 127, 0.55);
--accent-hot-alpha-50: rgba(255, 0, 127, 0.5);
--accent-hot-alpha-45: rgba(255, 0, 127, 0.45);
--accent-hot-alpha-40: rgba(255, 0, 127, 0.4);
--accent-hot-alpha-35: rgba(255, 0, 127, 0.35);
--accent-hot-alpha-25: rgba(255, 0, 127, 0.25);
--accent-hot-alpha-20: rgba(255, 0, 127, 0.2);
--accent-hot-alpha-18: rgba(255, 0, 127, 0.18);
--accent-hot-alpha-15: rgba(255, 0, 127, 0.15);
--accent-hot-alpha-12: rgba(255, 0, 127, 0.12);
--accent-hot-alpha-08: rgba(255, 0, 127, 0.08);
--accent-hot-alpha-05: rgba(255, 0, 127, 0.05);
--overlay-bg: rgba(0, 0, 0, 0.28);
--badge-bg: rgba(11, 13, 25, 0.72);
--gold-muted: #d8b74f;
--gold-soft: #f7d58b;
--gold-soft-alpha-25: rgba(255, 233, 145, 0.25);
--gold-halo-alpha-25: rgba(255, 240, 180, 0.25);
--text-soft: #dfe2f5;
--text-soft-alpha-92: rgba(200, 200, 200, 0.92);
--white-off: #f1f1f1;
--pink-soft: #ff5ccf;
--pink-warm: #ff6cc9;
--yellow-warm: #ffe26f;
--pink-soft-alpha-50: rgba(255, 92, 207, 0.5);
--provador-dot-gradient: linear-gradient(130deg, var(--gold-soft), var(--pink-soft));
--panel-input-bg: #050507;
--text-snow: #f7f7ff;
--mint-link: #40f99b;
--mint-link-alpha-55: rgba(64, 249, 155, 0.55);
--cyan-soft: #7cfbff;
--cyan-soft-alpha-85: rgba(124, 251, 255, 0.85);
--cyan-glow-alpha-08: rgba(102, 224, 255, 0.08);
--cyan-glow-alpha-25: rgba(102, 224, 255, 0.25);
--cyan-glow-alpha-35: rgba(102, 224, 255, 0.35);
--panel-modal-alpha-95: rgba(30, 30, 40, 0.95);
--panel-modal-alt-alpha-90: rgba(10, 10, 16, 0.9);
--text-ice: #e8f6ff;
--shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
--category-radius: 6px;
}
/* build:end */
/* build:begin assets/css/base/reset.css */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--figtree);
background: radial-gradient(circle at top, #11121a, #050505 45%);
color: var(--text);
min-height: 100vh;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
/* build:end */
/* build:begin assets/css/components/cart-summary-table.css */
.cart-summary-table {
width: 100%;
border-collapse: collapse;
color: var(--text);
font-size: 0.95rem;
}
.cart-summary-table tr + tr {
border-top: 1px solid var(--storefront-cart-summary-row-border, rgba(255, 255, 255, 0.08));
}
.cart-summary-table td {
padding: 10px 6px;
}
.cart-summary-table .label {
color: var(--muted);
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
font-size: 0.76rem;
}
.cart-summary-table .value {
text-align: right;
font-weight: 700;
font-size: 1rem;
}
.cart-summary-table .value.highlight {
color: var(--storefront-cart-summary-highlight, var(--neon-mint));
text-shadow: var(--storefront-cart-summary-highlight-shadow, 0 0 10px rgba(16, 255, 200, 0.25));
}
.category-body .cart-summary-table {
border-radius: var(--category-radius);
overflow: hidden;
}
/* build:end */
/* build:begin assets/css/components/floating-fields.css */
.vf-field {
--vf-label-x: 14px;
--vf-label-rest-top: 50%;
--vf-label-float-top: -1px;
--vf-label-rest-size: 0.8rem;
--vf-label-float-size: 0.7rem;
--vf-label-rest-color: inherit;
--vf-label-float-color: inherit;
--vf-label-bg: transparent;
--vf-label-float-mask: none;
position: relative;
min-width: 0;
}
.vf-field__label {
position: absolute;
left: var(--vf-label-x);
top: var(--vf-label-rest-top);
transform: translateY(-50%);
z-index: 2;
max-width: calc(100% - (var(--vf-label-x) * 2));
margin: 0;
padding: 0 4px;
border-radius: 6px;
color: var(--vf-label-rest-color);
font-size: var(--vf-label-rest-size);
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: transform 0.18s ease, top 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, font-size 0.18s ease;
}
.vf-field__control {
width: 100%;
min-width: 0;
}
.vf-field.is-focused .vf-field__label,
.vf-field.is-filled .vf-field__label,
.vf-field.vf-field--fixed .vf-field__label {
top: var(--vf-label-float-top);
transform: translateY(-50%);
color: var(--vf-label-float-color);
background: var(--vf-label-bg);
box-shadow: var(--vf-label-float-mask);
font-size: var(--vf-label-float-size);
}
.vf-field .vf-field__control::placeholder {
color: transparent;
}
.vf-field .vf-field__control[data-vf-keep-placeholder="1"]::placeholder {
color: inherit;
}
.vf-field.vf-field--compact {
--vf-label-x: 12px;
--vf-label-rest-size: 0.72rem;
--vf-label-float-size: 0.64rem;
}
/* build:end */
/* build:begin assets/css/components/site-footer.css */
.home-footer {
padding: 48px clamp(16px, 6vw, 48px) 40px;
border-top: 1px solid var(--surface-border-subtle);
color: var(--text-alpha-50);
font-size: 14px;
line-height: 1.6;
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
}
.footer-socials {
display: flex;
gap: 14px;
justify-content: center;
margin-bottom: 36px;
}
.footer-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--surface-border);
color: var(--text-alpha-70);
font-size: 20px;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.footer-social-icon:hover {
color: var(--text);
border-color: var(--surface-border-soft);
background: var(--surface-bg-contrast);
}
.footer-social--instagram:hover {
color: var(--brand-instagram);
border-color: var(--brand-instagram);
}
.footer-social--facebook:hover {
color: var(--brand-facebook);
border-color: var(--brand-facebook);
}
.footer-social--tiktok:hover {
color: var(--text);
border-color: var(--brand-tiktok);
}
.footer-social--youtube:hover {
color: var(--brand-youtube);
border-color: var(--brand-youtube);
}
.footer-social--twitter:hover {
color: var(--text);
border-color: var(--text);
}
.footer-social--whatsapp:hover {
color: var(--brand-whatsapp);
border-color: var(--brand-whatsapp);
}
.footer-social--pinterest:hover {
color: var(--brand-pinterest);
border-color: var(--brand-pinterest);
}
.footer-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 32px;
margin-bottom: 36px;
}
.footer-col__title {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-alpha-85);
margin-bottom: 12px;
}
.footer-col__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.footer-col__list a {
color: var(--text-alpha-50);
text-decoration: none;
transition: color 0.2s;
font-size: 13px;
}
.footer-col__list a:hover {
color: var(--text);
}
.footer-payments {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 24px;
}
.footer-payment-icon {
display: inline-flex;
}
.footer-payment-icon svg {
width: 48px;
height: 32px;
border-radius: 4px;
}
.footer-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-bottom: 24px;
}
.footer-badge-img {
height: 40px;
width: auto;
object-fit: contain;
opacity: 0.7;
transition: opacity 0.2s;
}
.footer-badge-img:hover {
opacity: 1;
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid var(--surface-border-faint);
}
.footer-line {
margin: 0 0 4px;
color: var(--text-alpha-40);
font-size: 13px;
}
.footer-line--sm {
font-size: 12px;
}
.footer-copyright {
margin: 8px 0 0;
font-size: 12px;
color: var(--text-alpha-35);
}
.footer-copyright a {
color: var(--text-alpha-45);
text-decoration: none;
margin-left: 10px;
}
.footer-copyright a:hover {
color: var(--text);
}
@media (max-width: 520px) {
.footer-columns {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
/* build:end */
/* build:begin assets/css/components/notice-card.css */
/* =========================================================
Shared fallback/error cards (503/404 public pages)
========================================================= */
.landing-shell--centered {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.notice-card {
max-width: 520px;
padding: 28px;
border-radius: 18px;
border: 1px solid var(--surface-border);
background: var(--panel-alpha-90);
text-align: center;
}
.notice-card h1 {
margin-bottom: 12px;
}
.notice-card p {
opacity: 0.8;
}
/* build:end */
/* build:begin assets/css/pages/legacy.css */
/* =========================================================
Section 01: Category shell and catalog public surfaces
========================================================= */
.landing-shell {
display: flex;
flex-direction: column;
gap: 0;
}
@keyframes voucher-flow {
0% { background-position: 0% 0%, 20% 20%, 80% 10%, 0 0; }
50% { background-position: 60% 50%, 40% 40%, 60% 20%, 0 0; }
100% { background-position: 0% 0%, 20% 20%, 80% 10%, 0 0; }
}
.category-body {
background: var(--storefront-page-gradient);
color: var(--text);
}
/* Topo da categoria mais compacto */
.category-top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px clamp(16px, 3vw, 32px);
background: var(--storefront-category-top-bg);
border-bottom: 1px solid var(--surface-border-subtle);
}
/* volta pro padrão do restante do site */
.category-top .back-link {
font-size: 0.85rem;
letter-spacing: 2px;
}
/* chip mais “cheio” */
.category-top .category-chip {
padding: 8px 20px;
font-size: 0.85rem;
letter-spacing: 3px;
}
/* carrinho com tamanho confortável */
.category-top .cart-toggle {
min-width: 46px;
height: 46px;
font-size: 1.2rem;
}
.category-top .cart-badge {
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
font-size: 0.7rem;
background: var(--storefront-action-solid-bg);
border-color: var(--storefront-action-solid-border);
color: var(--storefront-action-solid-text);
}
/* mantém o topo na casa dos ~100px em telas maiores */
@media (min-width: 768px){
.category-top {
min-height: 72px;
max-height: 104px;
}
}
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.85rem;
}
.category-chip {
padding: 10px 20px;
border-radius: 999px;
border: 1px solid var(--surface-border-strong);
font-family: var(--space);
text-transform: uppercase;
letter-spacing: 3px;
}
.category-shell {
display: flex;
flex-direction: column;
gap: clamp(32px, 6vw, 64px);
padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 64px) 96px;
}
.order-section {
padding: clamp(56px, 8vw, 110px) clamp(24px, 6vw, 96px) 80px;
text-align: center;
background: var(--bg);
}
.order-section header h2 {
font-family: var(--headline-pill);
/* Agbalumo */
font-size: clamp(2rem, 4vw, 2.8rem);
margin: 6px 0 12px;
}
.order-section header p {
margin: 0 auto;
max-width: 540px;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.5;
}
.category-showcase {
margin-top: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.category-card {
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
aspect-ratio: 4 / 3;
text-decoration: none;
color: var(--white);
}
.category-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.category-card:hover img {
transform: scale(1.05);
}
.category-card__placeholder {
width: 100%;
height: 100%;
background: var(--storefront-category-placeholder-bg);
}
.category-card__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
background: var(--storefront-category-overlay-bg);
pointer-events: none;
}
.category-card__overlay strong {
font-family: var(--figtree);
font-size: 1.1rem;
font-weight: 700;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.category-card__overlay span {
font-family: var(--figtree);
font-size: 0.82rem;
color: var(--text-alpha-85);
text-decoration: underline;
text-underline-offset: 3px;
margin-top: 4px;
}
.badge {
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--storefront-glass-border);
font-size: 0.75rem;
letter-spacing: 2px;
text-transform: uppercase;
}
/* CATEGORY PAGE */
.catalog-section {
padding: 0 clamp(24px, 6vw, 96px);
display: flex;
flex-direction: column;
gap: 32px;
}
.product-grid {
display: flex;
flex-direction: column;
gap: 32px;
}
.product-grid-neo .neo-layout {
display: grid;
grid-template-columns: 84px minmax(360px, 1.05fr) minmax(300px, 0.95fr);
gap: 0;
padding: clamp(6px, 1.5vw, 14px);
border-radius: var(--storefront-pdp-card-radius);
background: var(--surface-bg-subtle);
border: 1px solid var(--surface-border-subtle);
backdrop-filter: blur(8px);
align-items: start;
position: relative;
}
.media-column {
display: grid;
grid-template-columns: 84px minmax(750px, 1fr);
gap: 0;
min-height: 800px;
align-self: stretch;
}
.thumbs-rail {
display: flex;
flex-direction: column;
gap: 10px;
max-height: none;
max-width: 88px;
overflow-y: auto;
flex-wrap: wrap;
}
.media-thumb {
width: 72px;
height: 72px;
border-radius: 12px;
border: 1px solid var(--surface-border);
background: var(--white-alpha-03);
padding: 3px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.media-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.media-thumb-video {
color: var(--accent-hot);
font-weight: 700;
font-size: 1rem;
}
.video-icon {
display: inline-block;
font-size: 1.1rem;
}
.media-thumb.is-active {
border-color: var(--storefront-action-primary-border);
box-shadow: none;
}
.media-viewer {
grid-column: 2 / 3;
border-radius: 24px;
border: none;
background: transparent;
height: 800px;
min-height: 800px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.media-stage {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
overflow: hidden;
}
.media-viewer img,
.media-viewer video {
width: 100%;
height: auto;
object-fit: cover;
display: block;
border-radius: 24px;
border: 1px solid var(--surface-border-subtle);
}
.media-stage img,
.media-stage video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.media-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--surface-border);
background: rgba(0, 0, 0, 0.28);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, opacity 0.2s;
opacity: 0.85;
z-index: 2;
pointer-events: auto;
}
.media-nav--prev {
left: 10px;
}
.media-nav--next {
right: 10px;
}
.media-nav--prev,
.media-nav--next {
border: 1px solid var(--accent-hot-alpha-90);
color: var(--accent-hot);
}
.media-nav:hover {
background: var(--black-alpha-45);
border-color: var(--text-alpha-45);
opacity: 1;
}
.media-viewer .slide-anim {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transition: transform 260ms ease, opacity 260ms ease;
}
.media-viewer .slide-anim img,
.media-viewer .slide-anim video {
width: 100%;
height: auto;
object-fit: cover;
}
.media-stage img,
.media-stage video {
width: 100%;
height: 100%;
object-fit: cover;
}
.alert-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
display: none;
align-items: center;
justify-content: center;
z-index: 1200;
padding: 16px;
}
.alert-overlay.is-open {
display: flex;
}
.alert-box {
background: #0b0b12;
border: 1px solid var(--accent-hot-alpha-50);
border-radius: 16px;
padding: 18px 20px;
color: var(--white);
box-shadow: 0 10px 30px var(--black-alpha-40);
max-width: 360px;
width: 100%;
text-align: center;
font-family: var(--space);
}
.alert-box .alert-message {
margin: 0 0 12px;
font-size: 1rem;
color: var(--neon-pink);
}
.alert-box .alert-close {
width: 100%;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid var(--accent-hot-alpha-60);
background: var(--accent-hot-alpha-12);
color: var(--white);
cursor: pointer;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.field-error {
margin-top: 8px;
color: #ff4d6d;
font-weight: 600;
font-size: 0.9rem;
}
.product-panel {
display: flex;
flex-direction: column;
gap: 16px;
grid-column: 3 / 4;
align-self: start;
width: 500px;
justify-self: start;
}
.panel-head {
display: flex;
gap: 12px;
align-items: flex-start;
justify-content: space-between;
}
.panel-title {
flex: 1;
min-width: 0;
}
.panel-head .product-share-btn {
margin-left: auto;
align-self: flex-start;
}
.product-share-btn {
width: 42px;
height: 42px;
border-radius: var(--storefront-pdp-share-radius);
border: 1px solid var(--storefront-pdp-share-border);
background: var(--storefront-pdp-share-bg);
color: var(--storefront-pdp-share-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--storefront-pdp-share-shadow, none);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.product-share-btn i {
font-size: 1.08rem;
line-height: 1;
}
.product-share-btn:hover,
.product-share-btn:focus-visible {
background: var(--storefront-pdp-share-bg-hover, var(--storefront-pdp-share-bg));
border-color: var(--storefront-pdp-share-border-hover, var(--storefront-pdp-share-border));
color: var(--storefront-pdp-share-text-hover, var(--storefront-pdp-share-text));
box-shadow: var(--storefront-pdp-share-shadow-hover, var(--storefront-pdp-share-shadow, none));
transform: translateY(-1px);
outline: none;
}
.panel-title h3 {
margin: 0;
}
.price-row {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
}
.price-stack {
display: grid;
gap: 4px;
}
.price-row .price-before {
text-decoration: line-through;
color: var(--text-alpha-60);
margin: 0;
}
.price-row .price-now {
font-size: 1.8rem;
margin: 2px 0;
}
.saving-pill {
display: inline-flex;
align-items: center;
width: fit-content;
margin-top: 2px;
padding: 4px 10px;
border-radius: 999px;
background: var(--storefront-status-online-bg);
color: var(--storefront-status-online-text);
border: 1px solid var(--storefront-status-online-border);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.01em;
}
.saving-pill[hidden] {
display: none !important;
}
.payment-hint {
margin: 4px 0 0;
color: var(--text-alpha-80);
font-size: 0.92rem;
line-height: 1.3;
}
.selectors.neo {
display: flex;
flex-direction: column;
gap: 18px;
}
.color-carousel {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
}
.color-carousel__track {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: visible;
padding-top: 4px;
padding-bottom: 4px;
scrollbar-width: none;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.color-carousel__track::-webkit-scrollbar {
height: 0;
}
.color-carousel__nav {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--surface-border-strong);
background: var(--surface-border-faint);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.color-carousel__nav[hidden] {
display: none;
}
.color-carousel__nav:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.color-thumb-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 92px;
padding: 10px;
border-radius: 16px;
border: 1px solid var(--surface-border);
background: var(--white-alpha-03);
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.color-thumb-card__img {
width: 64px;
height: 64px;
border-radius: 14px;
overflow: hidden;
background: var(--surface-border-faint);
display: grid;
place-items: center;
position: relative;
}
.color-thumb-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.color-thumb-card__label {
font-size: 0.8rem;
color: var(--text-alpha-75);
text-align: center;
}
.color-thumb-card.is-active {
border-color: var(--storefront-action-primary-border);
box-shadow: none;
transform: none;
}
.color-thumb-card.is-disabled {
opacity: 0.55;
cursor: not-allowed;
}
.color-thumb-card.is-disabled .color-thumb-card__img::after {
content: 'Acabou';
position: absolute;
inset: 0;
background: var(--black-alpha-60);
color: var(--white);
font-size: 0.65rem;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.selectors .selector select,
.selectors .selector input[type="number"],
.selectors .selector input[type="text"],
.selectors .selector input[type="email"],
.selectors .selector input[type="tel"] {
width: min(120px, 100%);
}
.home-topbar__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.home-action {
position: relative;
width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid var(--storefront-top-action-border);
background: var(--storefront-top-action-bg);
color: var(--storefront-top-action-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.home-action--account {
width: auto;
min-width: 42px;
padding: 0 12px;
gap: 8px;
border-radius: 999px;
}
.home-action--account .home-action__label {
font-size: 0.82rem;
font-weight: 600;
color: var(--storefront-top-action-label);
line-height: 1;
max-width: 88px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-action--account:hover .home-action__label {
color: var(--storefront-top-action-label-hover);
}
.home-action:hover {
border-color: var(--text-alpha-40);
transform: translateY(-1px);
box-shadow: var(--storefront-top-action-shadow-hover);
}
.home-action__badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: var(--storefront-action-solid-bg);
border: 1px solid var(--storefront-action-solid-border);
color: var(--storefront-action-solid-text);
font-size: 0.7rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.home-action__badge--status {
text-transform: uppercase;
letter-spacing: 0.04em;
}
.home-action__badge--status.is-online {
background: var(--storefront-status-online-bg);
border-color: var(--storefront-status-online-border);
color: var(--storefront-status-online-text);
}
.home-action__badge--status.is-offline {
background: var(--storefront-status-offline-bg);
border-color: var(--storefront-status-offline-border);
color: var(--storefront-status-offline-text);
}
.cart-toggle {
position: relative;
min-width: 46px;
height: 46px;
border-radius: 14px;
border: 1px solid var(--surface-border);
background: var(--surface-bg-soft);
color: var(--text);
cursor: pointer;
font-size: 1.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cart-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: var(--storefront-action-solid-bg);
border: 1px solid var(--storefront-action-solid-border);
color: var(--storefront-action-solid-text);
font-size: 0.7rem;
font-weight: 700;
display: none;
align-items: center;
justify-content: center;
}
.cart-flyer {
position: fixed;
min-width: 64px;
height: 44px;
padding: 0 16px;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
background: var(--storefront-top-action-bg);
color: var(--accent-hot);
border: 1px solid var(--storefront-action-outline-border);
box-shadow: 0 10px 24px var(--black-alpha-25);
transition:
left 2.4s cubic-bezier(0.25, 0.8, 0.3, 1),
top 2.4s cubic-bezier(0.25, 0.8, 0.3, 1),
transform 2.4s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.cart-flyer img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.favorites-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.favorites-modal.is-open {
display: flex;
}
.favorites-modal__backdrop {
position: absolute;
inset: 0;
background: var(--panel-alpha-80);
backdrop-filter: blur(6px);
}
.favorites-modal__card {
position: relative;
background: #f4f4f4;
color: #141414;
border-radius: var(--storefront-radius-overlay);
padding: 28px 32px 24px;
max-width: 720px;
width: min(90vw, 720px);
z-index: 2;
box-shadow: 0 30px 80px var(--black-alpha-40);
}
.favorites-modal__close {
position: absolute;
top: 16px;
right: 16px;
border: none;
background: var(--black-alpha-08);
border-radius: var(--storefront-radius-icon);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.favorites-modal__head h2 {
margin: 0 0 6px;
}
.favorites-modal__head p {
margin: 0;
color: var(--black-alpha-60);
}
.favorites-modal__body {
margin-top: 20px;
}
.favorites-empty {
text-align: center;
display: grid;
gap: 12px;
}
.favorites-empty__icon {
font-size: 48px;
color: var(--black-soft);
}
.favorites-empty .btn {
justify-self: center;
}
.favorites-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 18px;
}
.favorites-item {
display: grid;
gap: 10px;
}
.favorites-item__thumb {
border-radius: var(--storefront-radius-surface);
overflow: hidden;
background: var(--white);
border: 1px solid var(--black-alpha-08);
}
.favorites-item__thumb img {
width: 100%;
height: 160px;
object-fit: cover;
}
.favorites-item__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.favorites-item__name {
font-size: 0.9rem;
font-weight: 600;
}
.favorites-item__remove {
border: none;
background: var(--black-alpha-08);
width: 28px;
height: 28px;
border-radius: var(--storefront-radius-compact);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.favorites-modal__footer {
margin-top: 18px;
text-align: center;
font-size: 0.85rem;
color: var(--black-alpha-60);
}
.fav-heart {
color: #ff5b8c;
margin: 0 4px;
}
.fav-brand {
color: var(--neon-pink);
font-weight: 600;
}
/* chip que sai do botão "Adicionar ao carrinho" mostrando a quantidade */
.cart-toggle--bump {
animation: cart-bump 0.3s ease;
}
@keyframes cart-bump {
0% {
transform: scale(1);
}
30% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
html.is-cart-sidebar-open,
body.is-cart-sidebar-open {
overflow: hidden;
overscroll-behavior: none;
}
body.is-cart-sidebar-open {
padding-right: var(--cart-scrollbar-compensation, 0px);
}
.cart-sidebar {
position: fixed;
inset: 0;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.cart-sidebar.is-open {
pointer-events: auto;
opacity: 1;
}
.cart-sidebar__overlay {
position: absolute;
inset: 0;
background: var(--storefront-cart-overlay-bg);
opacity: 0;
transition: opacity 0.3s ease;
}
.cart-sidebar.is-open .cart-sidebar__overlay {
opacity: 1;
}
.cart-sidebar__drawer {
position: absolute;
top: 0;
right: 0;
width: min(420px, 90vw);
height: 100%;
background: var(--storefront-cart-drawer-bg);
border-left: 1px solid var(--storefront-cart-drawer-border);
box-shadow: var(--storefront-cart-drawer-shadow);
display: flex;
flex-direction: column;
padding: 20px;
gap: 16px;
transform: translateX(100%);
transition: transform 0.35s ease-out;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
}
.cart-sidebar.is-open .cart-sidebar__drawer {
transform: translateX(0);
}
.cart-sidebar__head {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-sidebar__metrics {
display: none;
}
.cart-sidebar__metrics span {
color: var(--muted);
font-size: 0.8rem;
}
.cart-sidebar__metrics strong {
display: block;
font-size: 1.1rem;
}
.cart-sidebar__actions {
flex: 0 0 auto;
}
.cart-action-hint {
margin: 0 0 8px;
font-size: 0.82rem;
color: var(--storefront-cart-action-hint);
line-height: 1.35;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.pill-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.size-hint {
margin-top: 8px;
font-size: 0.8rem;
color: var(--storefront-pdp-size-hint-text);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
width: fit-content;
max-width: 100%;
padding: 6px 10px;
border-radius: 10px;
border: 1px solid var(--storefront-pdp-size-hint-border);
background: var(--storefront-pdp-size-hint-bg);
box-shadow: none;
}
.size-hint[hidden],
.size-hint:empty {
display: none !important;
margin: 0;
padding: 0;
border: 0;
}
.story-preview-row {
display: flex;
gap: 12px;
margin: 18px 0 6px;
flex-wrap: wrap;
}
.story-preview {
width: 90px;
height: 90px;
border-radius: var(--storefront-story-preview-radius);
border: 1px solid var(--storefront-action-primary-border);
background: var(--surface-bg-soft);
overflow: hidden;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.story-preview.is-liked {
border-color: var(--storefront-action-primary-border);
box-shadow: none;
}
.story-preview video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
.story-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.68);
display: none;
align-items: center;
justify-content: center;
z-index: 999;
padding: 18px;
}
.story-overlay.is-open {
display: flex;
}
.story-card {
width: min(420px, 96vw);
height: min(88vh, 900px);
background: rgba(12, 12, 16, 0.96);
border-radius: 24px;
padding: 0;
position: relative;
box-shadow: 0 18px 60px var(--black-alpha-40);
overflow: hidden;
}
.story-close {
position: absolute;
top: 22px;
right: 14px;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--white-alpha-18);
background: var(--black-alpha-45);
color: var(--white);
font-size: 1rem;
cursor: pointer;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
}
.story-video-shell {
position: absolute;
inset: 0;
border-radius: 24px;
overflow: hidden;
background: var(--black);
}
.story-video-shell video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.story-progress {
position: absolute;
top: 12px;
left: 16px;
right: 16px;
height: 3px;
background: var(--white-alpha-32);
border-radius: 999px;
overflow: hidden;
z-index: 3;
}
.story-progress__fill {
display: block;
height: 100%;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 10px var(--text-alpha-35);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
}
.story-actions {
position: absolute;
right: 14px;
bottom: 110px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 3;
}
.story-action {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--white-alpha-18);
background: var(--black-alpha-45);
color: var(--white);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
font-size: 1rem;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.story-action:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 10px 26px var(--black-alpha-35);
border-color: var(--text-alpha-35);
}
.story-action__count {
font-size: 0.65rem;
color: var(--text-alpha-70);
}
.story-action.is-liked {
border-color: var(--accent-hot-alpha-60);
box-shadow: 0 0 0 2px var(--accent-hot-alpha-25);
}
.story-action--like.is-liked i {
color: #ff4d8a;
}
.story-action--like.is-like-anim i {
animation: storyLikePop 0.4s ease;
}
.story-action--like.is-unlike-anim i {
animation: storyLikeFade 0.35s ease;
}
@keyframes storyLikePop {
0% {
transform: scale(0.9);
filter: drop-shadow(0 0 0 rgba(255, 77, 138, 0));
}
50% {
transform: scale(1.25);
filter: drop-shadow(0 0 10px rgba(255, 77, 138, 0.7));
}
100% {
transform: scale(1);
filter: drop-shadow(0 0 0 rgba(255, 77, 138, 0));
}
}
@keyframes storyLikeFade {
0% {
transform: scale(1.05);
opacity: 1;
}
100% {
transform: scale(0.95);
opacity: 0.7;
}
}
.story-product {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
display: grid;
grid-template-columns: 54px 1fr auto;
gap: 12px;
align-items: center;
background: rgba(15, 15, 22, 0.92);
border-radius: 16px;
padding: 12px;
z-index: 2;
}
.story-product__thumb {
width: 54px;
height: 54px;
border-radius: 14px;
overflow: hidden;
background: var(--surface-border-faint);
}
.story-product__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.story-product__meta strong {
display: block;
font-size: 0.95rem;
}
.story-product__meta span {
display: block;
font-size: 0.85rem;
color: var(--text-alpha-70);
margin-top: 2px;
}
.story-product__cta {
padding: 10px 14px;
border-radius: 12px;
border: 1px solid var(--storefront-action-primary-border);
background: var(--storefront-action-primary-bg);
color: var(--storefront-action-primary-text);
font-weight: 700;
cursor: pointer;
}
.pill {
padding: 10px 14px;
border-radius: 12px;
border: 1px solid var(--storefront-action-outline-border);
background: var(--surface-bg-soft);
color: var(--text);
cursor: pointer;
transition: all 0.15s ease;
}
[data-size-pills] .pill {
border-color: var(--storefront-pdp-size-pill-border);
background: var(--storefront-pdp-size-pill-bg);
color: var(--storefront-pdp-size-pill-text);
}
[data-size-pills] .pill.is-active {
border-color: var(--storefront-pdp-size-pill-active-border);
background: var(--storefront-pdp-size-pill-active-bg);
color: var(--storefront-pdp-size-pill-active-text);
box-shadow: none;
}
[data-size-pills] .pill.is-disabled {
opacity: 0.5;
pointer-events: auto;
filter: none;
border-color: var(--storefront-pdp-size-pill-disabled-border);
background: var(--storefront-pdp-size-pill-disabled-bg);
color: var(--storefront-pdp-size-pill-disabled-text);
cursor: not-allowed;
}
.pill.is-active {
border-color: var(--storefront-action-primary-border);
box-shadow: none;
}
.pill.is-disabled {
opacity: 0.35;
pointer-events: none;
filter: grayscale(0.4);
}
.product-card.sold-out {
position: relative;
opacity: 0.55;
filter: grayscale(0.6) blur(0.5px);
pointer-events: none;
}
.product-card.sold-out::before {
content: "";
position: absolute;
inset: 0;
background: var(--black-alpha-35);
border-radius: var(--storefront-pdp-card-radius);
z-index: 2;
}
.product-card.sold-out::after {
content: "ESGOTADO";
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
padding: 14px 18px;
background: rgba(120, 0, 0, 0.9);
color: var(--white);
font-weight: 700;
letter-spacing: 0.08em;
text-align: center;
border-radius: 18px;
z-index: 3;
}
.pill:hover {
border-color: var(--storefront-action-primary-border);
box-shadow: none;
}
[data-size-pills] .pill:hover {
border-color: var(--storefront-pdp-size-pill-border-hover);
box-shadow: none;
}
[data-size-pills] .pill.is-active:hover {
border-color: var(--storefront-pdp-size-pill-active-border);
}
[data-size-pills] .pill.is-disabled:hover,
[data-size-pills] .pill:disabled:hover {
border-color: var(--storefront-pdp-size-pill-disabled-border);
box-shadow: none;
}
@media (max-width: 720px){
.pill-group {
gap: 12px;
}
.product-detail-stack {
padding: 18px 0 0;
}
.product-detail-section {
padding: 18px;
border-radius: 20px;
}
.product-detail-attributes {
grid-template-columns: 1fr;
}
.pill {
padding: 12px 16px;
border-radius: 14px;
font-size: 1rem;
}
.selectors .selector label {
font-size: 0.95rem;
}
.selectors .selector select,
.selectors .selector input[type='number'] {
padding: 12px 16px;
font-size: 1rem;
min-width: 240px;
}
.selectors .selector .pill {
padding: 14px 18px;
font-size: 1.05rem;
}
.quantity-compact .qty-wrapper button {
width: 34px;
height: 34px;
font-size: 1.2rem;
}
.quantity-compact .qty-wrapper input {
width: 72px;
height: 36px;
font-size: 1rem;
}
.selectors .selector select,
.selectors .selector input[type='number'] {
padding: 12px 14px;
font-size: 1rem;
min-width: 240px;
}
.actions-row .add-btn {
font-size: 1rem;
max-width: 100%;
min-width: 180px;
}
.selectors .selector select[data-payment] {
width: 100%;
min-width: 240px;
font-size: 1rem;
padding: 12px 16px;
}
}
/* garante a ordem visual: selects -> botões -> meta */
.product-panel .selectors {
order: 1;
}
.product-panel .actions-row {
order: 2;
margin-top: 4px;
}
.actions-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-start;
}
.product-detail-stack {
grid-column: 1 / -1;
display: grid;
gap: 16px;
padding: 20px 14px 8px;
}
.product-detail-section {
display: grid;
gap: 14px;
padding: 22px 24px;
border-radius: 24px;
border: 1px solid var(--surface-border-subtle);
background: var(--surface-base);
}
.product-detail-section__head h4 {
margin: 0;
font-family: var(--figtree);
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
}
.product-detail-brand-band {
display: inline-grid;
gap: 4px;
justify-items: start;
align-self: start;
padding: 12px 16px;
border-radius: 18px;
border: 1px solid var(--surface-border-subtle);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, var(--surface-bg-subtle) 100%);
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}
.product-detail-brand-band__label {
color: var(--text-muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.product-detail-brand-band strong {
color: var(--text-primary);
font-size: 1rem;
}
.product-detail-richtext {
color: var(--text-primary);
line-height: 1.75;
}
.product-detail-richtext > :first-child {
margin-top: 0;
}
.product-detail-richtext > :last-child {
margin-bottom: 0;
}
.product-detail-richtext h1,
.product-detail-richtext h2,
.product-detail-richtext h3,
.product-detail-richtext h4,
.product-detail-richtext h5,
.product-detail-richtext h6 {
margin: 0 0 10px;
font-family: var(--figtree);
color: var(--text-primary);
}
.product-detail-richtext p,
.product-detail-richtext ul,
.product-detail-richtext ol {
margin: 0 0 12px;
}
.product-detail-richtext ul,
.product-detail-richtext ol {
padding-left: 20px;
}
.product-detail-richtext img {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 18px;
}
.product-detail-attributes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 18px;
margin: 0;
}
.product-detail-attributes__item {
display: grid;
gap: 6px;
padding: 14px 16px;
border-radius: 18px;
background: var(--surface-bg-subtle);
}
.product-detail-attributes__item dt {
margin: 0;
color: var(--text-muted);
font-size: 0.84rem;
}
.product-detail-attributes__item dd {
margin: 0;
color: var(--text-primary);
font-weight: 600;
}
.product-detail-size-guide {
display: grid;
gap: 12px;
}
.product-detail-size-guide--image img {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 20px;
border: 1px solid var(--surface-border-subtle);
}
.product-detail-size-guide__table-shell {
overflow-x: auto;
border-radius: 18px;
border: 1px solid var(--surface-border-subtle);
background: var(--surface-bg-subtle);
}
.product-detail-size-guide__table {
width: 100%;
border-collapse: collapse;
min-width: 520px;
}
.product-detail-size-guide__table th,
.product-detail-size-guide__table td {
padding: 12px 14px;
border-bottom: 1px solid var(--surface-border-subtle);
text-align: left;
color: var(--text-primary);
}
.product-detail-size-guide__table thead th {
font-size: 0.82rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.product-detail-size-guide__table tbody tr:last-child th,
.product-detail-size-guide__table tbody tr:last-child td {
border-bottom: 0;
}
/* dois botões com o mesmo tamanho dentro da actions-row */
.actions-row .add-btn {
flex: 1 1 48%;
min-width: 180px;
max-width: 260px;
white-space: nowrap;
text-align: center;
padding-inline: 18px;
}
.quantity-compact input {
width: 120px;
text-align: center;
}
.quantity-compact .qty-wrapper {
display: inline-flex;
align-items: center;
gap: 8px;
}
.quantity-compact .qty-wrapper button {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--storefront-control-button-border);
background: var(--storefront-control-button-bg);
color: var(--storefront-control-button-text);
font-size: 1.1rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
flex: 0 0 auto;
cursor: pointer;
}
.quantity-compact .qty-wrapper button .qty-btn__icon {
line-height: 1;
display: inline-block;
}
.quantity-compact .qty-wrapper button:hover {
border-color: var(--storefront-control-button-border-hover);
box-shadow: var(--storefront-control-button-shadow-hover);
}
.quantity-compact .qty-wrapper input {
width: 64px;
height: 32px;
border: 1px solid var(--storefront-control-input-border);
background: var(--storefront-control-input-bg);
color: var(--storefront-control-input-text);
text-align: center;
border-radius: 10px;
appearance: textfield;
-webkit-appearance: none;
-moz-appearance: textfield;
outline: none;
padding: 0 8px;
}
.quantity-compact .qty-wrapper input::-webkit-outer-spin-button,
.quantity-compact .qty-wrapper input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
@media (max-width: 768px){
.quantity-compact .qty-wrapper {
display: flex;
align-items: center;
gap: 10px;
width: min(100%, 360px);
max-width: 100%;
border: 0;
background: transparent;
padding: 0;
}
.quantity-compact .qty-wrapper button {
width: 38px;
height: 38px;
margin: 0;
border-radius: var(--storefront-radius-control-sm);
border: 1px solid var(--storefront-control-button-border);
background: var(--storefront-control-button-bg);
color: var(--storefront-control-button-text);
font-size: 1.15rem;
box-shadow: none;
}
.quantity-compact .qty-wrapper input {
flex: 1 1 auto;
width: auto;
min-width: 0;
height: 38px;
border: 1px solid var(--storefront-control-input-border);
background: var(--storefront-control-input-bg);
color: var(--storefront-control-input-text);
border-radius: var(--storefront-radius-control-sm);
text-align: center;
padding: 0 10px;
}
}
.selectors .selector select[data-payment] {
width: 260px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 44px;
background-image: var(--storefront-payment-select-arrow);
background-repeat: no-repeat;
background-position: right 20px center;
}
@media (max-width: 520px){
.price-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.saving-pill {
align-self: flex-start;
padding: 4px 10px;
}
}
@media (max-width: 1440px){
.product-grid-neo .neo-layout {
grid-template-columns: 60px minmax(360px, 0.9fr) minmax(300px, 0.9fr);
gap: 10px;
padding: 10px 12px;
}
.media-column {
grid-template-columns: 60px minmax(360px, 1fr);
min-height: 700px;
gap: 10px;
}
.media-viewer {
margin-left: 6px;
height: 620px;
min-height: 620px;
}
.thumbs-rail {
padding-right: 8px;
padding-left: 4px;
gap: 4px;
}
.media-thumb {
width: 48px;
height: 48px;
}
.actions-row .add-btn {
max-width: 220px;
}
}
@media (max-width: 1100px){
.product-grid-neo .neo-layout {
grid-template-columns: 1fr;
gap: 18px;
padding: 12px 10px;
}
.media-column {
grid-template-columns: 1fr;
min-height: auto;
gap: 12px;
}
.thumbs-rail {
flex-direction: row;
flex-wrap: wrap;
max-width: none;
overflow-x: auto;
overflow-y: hidden;
gap: 6px;
padding: 6px 4px 10px;
justify-content: flex-start;
}
.media-thumb {
width: 60px;
height: 60px;
}
.media-viewer {
grid-column: 1 / -1;
height: 460px;
min-height: 460px;
margin-left: 0;
}
.product-panel {
grid-column: 1 / -1;
padding-left: 6px;
padding-right: 6px;
max-width: 100%;
}
.actions-row .add-btn {
flex: 1 1 100%;
min-width: 140px;
max-width: 100%;
}
.selectors .selector select[data-payment] {
width: auto;
}
}
/* Layout confortavel para telas largas (1920x1080 e acima) */
@media (min-width: 1441px){
.product-grid-neo .neo-layout {
grid-template-columns: 72px 620px minmax(360px, 1fr);
gap: 28px;
padding: 18px;
max-width: 1440px;
margin: 0 auto;
}
.media-column {
grid-template-columns: 72px 620px;
gap: 18px;
min-height: 760px;
}
.media-viewer {
height: auto;
min-height: 800px;
margin-left: 0;
}
.media-thumb {
width: 60px;
height: 60px;
}
.actions-row .add-btn {
max-width: 240px;
}
}
.product-card {
border-radius: var(--storefront-pdp-card-radius);
padding: clamp(18px, 4vw, 40px);
background: var(--surface-bg-subtle);
border: 1px solid var(--surface-border-subtle);
backdrop-filter: blur(8px);
display: grid;
grid-template-columns: minmax(220px, 300px) minmax(220px, 1fr) minmax(220px, 280px);
gap: clamp(18px, 4vw, 32px);
align-items: start;
}
.product-tag {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.8rem;
color: var(--muted);
}
.selector {
display: flex;
flex-direction: column;
gap: 8px;
}
.selector select,
.selector input[type='number'] {
background: var(--storefront-control-input-bg);
border: 1px solid var(--storefront-control-input-border);
border-radius: 12px;
color: var(--storefront-control-input-text);
padding: 10px 14px;
font-family: var(--body);
}
.selector select.invalid,
.selector input.invalid {
border-color: var(--danger);
}
.selector small {
color: var(--text-alpha-82);
font-weight: 500;
}
.add-btn {
margin-top: 8px;
padding: 13px;
border-radius: var(--storefront-pdp-cta-radius);
border: 1px solid transparent;
font-family: var(--space);
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 0.98rem;
cursor: pointer;
background: transparent;
color: var(--white);
transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.add-btn.primary {
background: var(--storefront-accent-warning-bg);
border-color: var(--storefront-accent-warning-border);
color: var(--storefront-accent-warning-text);
}
.add-btn.ghost {
background: var(--storefront-action-primary-bg);
border-color: var(--storefront-action-primary-border);
color: var(--storefront-action-primary-text);
}
.add-btn.primary:hover {
filter: brightness(1.05);
box-shadow: 0 12px 22px rgba(240, 198, 64, 0.22);
}
.add-btn.ghost:hover {
filter: brightness(1.05);
box-shadow: var(--storefront-action-primary-shadow-hover);
}
@media (max-width: 1100px){
.product-card {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
}
@media (max-width: 720px){
.product-card {
grid-template-columns: 1fr;
}
}
@media (max-width: 1100px){
.product-grid-neo .neo-layout {
grid-template-columns: minmax(200px, 1fr);
grid-template-rows: auto auto;
}
.media-column {
grid-template-columns: 1fr;
min-height: auto;
}
.thumbs-rail {
flex-direction: row;
flex-wrap: wrap;
max-width: none;
overflow-x: auto;
overflow-y: hidden;
gap: 6px;
padding: 6px 4px 10px;
justify-content: flex-start;
}
.media-thumb {
width: 56px;
height: 56px;
}
.media-viewer {
grid-column: 1 / -1;
height: 420px;
min-height: 420px;
}
.actions-row .add-btn {
font-size: 1rem;
max-width: 100%;
min-width: 180px;
}
.selectors .selector select[data-payment] {
width: 100%;
min-width: 240px;
font-size: 1rem;
padding: 12px 16px;
}
}
.cart-items {
display: flex;
flex-direction: column;
gap: 12px;
flex: 0 0 auto;
padding-right: 0;
}
.cart-item {
display: grid;
grid-template-columns: 72px 1fr;
grid-template-rows: auto 1fr;
gap: 10px 14px;
padding: 14px 16px;
border-radius: 18px;
background: var(--storefront-cart-item-bg);
border: 1px solid var(--storefront-cart-item-border, var(--surface-border-subtle));
box-shadow: var(--storefront-cart-item-shadow, none);
font-size: 0.95rem;
align-items: center;
flex-shrink: 0;
}
.cart-thumb {
width: 64px;
height: 64px;
border-radius: 16px;
overflow: hidden;
background: var(--surface-bg-soft);
flex-shrink: 0;
}
.cart-thumb.placeholder {
background: var(--surface-bg-subtle);
}
.cart-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cart-meta {
flex: 1;
grid-column: 2 / 3;
display: flex;
flex-direction: column;
gap: 4px;
}
.cart-meta strong {
display: block;
}
.cart-price {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
justify-self: flex-end;
}
.cart-item span {
color: var(--muted);
display: block;
margin-top: 4px;
}
.cart-payment {
display: inline-block;
margin-top: 2px;
font-size: 0.85rem;
color: var(--text-alpha-80);
}
.cart-size-hint {
display: block;
margin-top: 2px;
font-size: 0.78rem;
color: var(--text-alpha-60);
}
.cart-item button[data-remove] {
background: var(--storefront-cart-remove-bg);
border: 1px solid var(--storefront-cart-remove-border);
color: var(--storefront-cart-remove-text);
border-radius: var(--storefront-radius-icon);
width: 32px;
height: 32px;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
line-height: 1;
box-shadow: var(--storefront-cart-remove-shadow, none);
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.cart-item button[data-remove]:hover,
.cart-item button[data-remove]:focus-visible {
background: var(--storefront-cart-remove-bg-hover, var(--storefront-cart-remove-bg));
border-color: var(--storefront-cart-remove-border-hover, var(--storefront-cart-remove-border));
color: var(--storefront-cart-remove-text-hover, var(--storefront-cart-remove-text));
box-shadow: var(--storefront-cart-remove-shadow-hover, var(--storefront-cart-remove-shadow, none));
transform: translateY(-1px);
outline: none;
}
.cart-items .empty {
color: var(--muted);
text-align: center;
padding: 16px 0;
}
.cart-empty {
display: grid;
gap: 10px;
justify-items: center;
text-align: center;
padding: 24px 14px;
border-radius: 16px;
border: 1px dashed var(--surface-border-subtle);
background: var(--surface-bg-subtle);
}
.cart-empty__icon {
width: 56px;
height: 56px;
border-radius: 14px;
border: 1px solid var(--surface-border-subtle);
background: var(--surface-bg-soft);
color: var(--text-alpha-65);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.55rem;
line-height: 1;
}
.cart-empty__title {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: var(--text);
}
.cart-empty__subtitle {
margin: 0;
font-size: 0.9rem;
color: var(--muted);
line-height: 1.45;
max-width: 300px;
}
.cart-actions {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.qty-control {
display: inline-flex;
align-items: center;
gap: 6px;
}
.qty-btn {
width: 32px;
height: 32px;
background: var(--storefront-control-button-bg);
border: 1px solid var(--storefront-control-button-border);
color: var(--storefront-control-button-text);
border-radius: 10px;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.qty-btn:hover {
transform: translateY(-1px);
border-color: var(--storefront-control-button-border-hover);
box-shadow: var(--storefront-control-button-shadow-hover);
}
/* garante o mesmo estilo nos controles de quantidade do resumo/carrinho */
.cart-sidebar .qty-btn,
.checkout-panel .qty-btn {
background: var(--storefront-control-button-bg);
border: 1px solid var(--storefront-control-button-border);
color: var(--storefront-control-button-text);
}
.cart-sidebar .qty-btn:hover,
.checkout-panel .qty-btn:hover {
border-color: var(--storefront-control-button-border-hover);
box-shadow: var(--storefront-control-button-shadow-hover);
transform: translateY(-1px);
}
.qty-control input {
width: 54px;
height: 32px;
border: 1px solid var(--storefront-control-input-border);
background: var(--storefront-control-input-bg);
color: var(--storefront-control-input-text);
text-align: center;
border-radius: 10px;
outline: none;
}
/* resumo do carrinho em cards, abaixo da lista */
.cart-summary-footer {
margin-top: 8px;
border-top: 1px solid var(--surface-border-subtle);
padding: 12px 10px 14px;
background: var(--storefront-cart-summary-bg);
border: 1px solid var(--storefront-cart-summary-border, transparent);
border-radius: 14px;
box-shadow: var(--storefront-cart-summary-shadow, none);
}
@media (max-width: 720px){
.cart-summary-footer {
grid-template-columns: 1fr;
}
}
.shipping-card {
margin-top: 14px;
padding: 14px 16px;
border-radius: 16px;
background: var(--storefront-shipping-card-bg);
border: 1px solid var(--storefront-shipping-card-border);
display: flex;
flex-direction: column;
gap: 10px;
}
.shipping-card[hidden] {
display: none;
}
.shipping-card__head {
display: flex;
flex-direction: column;
gap: 6px;
}
.shipping-title {
display: flex;
align-items: center;
gap: 8px;
}
.shipping-title h4 {
margin: 0;
font-size: 0.95rem;
}
.shipping-title__icon {
width: 18px;
height: 18px;
display: block;
opacity: 0.9;
}
.shipping-cep-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 0.85rem;
color: var(--text-alpha-70);
}
.shipping-cep-line strong {
color: var(--text-alpha-94);
}
.shipping-cep-edit {
background: none;
border: 0;
padding: 0;
color: var(--storefront-shipping-link);
font-size: 0.85rem;
cursor: pointer;
text-decoration: underline;
}
.shipping-cep-edit:hover {
opacity: 0.85;
}
.shipping-subtitle {
margin: 0;
font-size: 0.85rem;
color: var(--text-alpha-85);
}
.shipping-card__form {
display: flex;
gap: 8px;
align-items: center;
}
.shipping-cep-line[hidden],
.shipping-card__form[hidden] {
display: none;
}
.shipping-card__form input {
flex: 1;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--storefront-control-input-border);
background: var(--storefront-control-input-bg);
color: var(--storefront-control-input-text);
}
.shipping-calc-btn {
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--storefront-action-outline-border);
background: var(--storefront-action-outline-bg);
color: var(--storefront-action-outline-text);
cursor: pointer;
}
.shipping-calc-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.shipping-card__status {
font-size: 0.85rem;
color: var(--text-alpha-70);
}
.shipping-card__options {
display: flex;
flex-direction: column;
gap: 8px;
}
.shipping-option {
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 12px;
background: var(--storefront-shipping-option-bg);
border: 1px solid var(--storefront-shipping-option-border);
}
.shipping-option:has(input:checked) {
border-color: var(--storefront-shipping-option-selected-border);
background: var(--storefront-shipping-option-selected-bg);
}
.shipping-option__meta strong {
display: block;
font-size: 0.9rem;
}
.shipping-option__meta small {
color: var(--text-alpha-60);
}
.shipping-option__price {
font-weight: 600;
color: var(--storefront-shipping-option-price);
}
@media (max-width: 720px) {
.shipping-card__form {
flex-direction: column;
align-items: stretch;
}
}
.primary-action {
margin-top: 6px;
width: 100%;
padding: 16px;
border-radius: 18px;
border: 1px solid var(--storefront-primary-action-border);
background: var(--storefront-primary-action-bg);
color: var(--storefront-primary-action-text);
font-family: var(--space);
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
box-shadow: var(--storefront-primary-action-shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.primary-action:hover {
filter: brightness(1.05);
transform: translateY(-1px);
box-shadow: var(--storefront-primary-action-shadow-hover);
}
.primary-action--red {
background: var(--storefront-primary-action-red-bg);
border-color: var(--storefront-primary-action-red-border);
color: var(--storefront-primary-action-red-text);
box-shadow: none;
font-size: 0.98rem;
}
.primary-action--red:hover {
filter: brightness(1.05);
box-shadow: var(--storefront-primary-action-red-shadow-hover);
}
.primary-action.is-disabled,
.primary-action[disabled] {
cursor: not-allowed;
opacity: 0.62;
transform: none;
filter: saturate(0.75);
box-shadow: none;
}
.primary-action.is-disabled:hover,
.primary-action[disabled]:hover {
transform: none;
filter: saturate(0.75);
box-shadow: none;
}
.live-activity {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 50;
pointer-events: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.live-activity.show {
opacity: 1;
transform: translateY(0);
}
.live-activity__chip {
display: flex;
align-items: center;
gap: 10px;
background: var(--storefront-live-activity-bg);
border: 1px solid var(--storefront-live-activity-border);
border-radius: var(--storefront-live-activity-radius);
padding: 12px 16px;
box-shadow: var(--storefront-live-activity-shadow);
pointer-events: auto;
margin-top: 8px;
position: relative;
}
.live-activity__avatar {
width: 32px;
height: 32px;
border-radius: var(--storefront-live-activity-avatar-radius);
background: var(--storefront-live-activity-avatar-bg);
border: 1px solid var(--storefront-live-activity-avatar-border);
color: var(--storefront-live-activity-avatar-text);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.live-activity__info strong {
display: block;
color: var(--storefront-live-activity-text);
font-size: 0.95rem;
}
.live-activity__info span {
display: block;
color: var(--storefront-live-activity-muted);
font-size: 0.82rem;
}
.live-activity__close {
position: absolute;
top: 6px;
right: 6px;
width: 20px;
height: 20px;
border-radius: var(--storefront-live-activity-close-radius);
border: 1px solid var(--storefront-cart-remove-border);
background: var(--storefront-cart-remove-bg);
color: var(--storefront-cart-remove-text);
font-size: 0.8rem;
cursor: pointer;
font-weight: 700;
box-shadow: var(--storefront-cart-remove-shadow, none);
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.live-activity__close:hover,
.live-activity__close:focus-visible {
background: var(--storefront-cart-remove-bg-hover, var(--storefront-cart-remove-bg));
border-color: var(--storefront-cart-remove-border-hover, var(--storefront-cart-remove-border));
color: var(--storefront-cart-remove-text-hover, var(--storefront-cart-remove-text));
box-shadow: var(--storefront-cart-remove-shadow-hover, var(--storefront-cart-remove-shadow, none));
transform: translateY(-1px);
outline: none;
}
.live-activity__chip.entering {
animation: liveIn 0.35s ease forwards;
}
.live-activity__chip.exiting {
animation: liveOut 0.3s ease forwards;
}
@keyframes liveIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes liveOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(12px);
}
}
@media (max-width: 720px){
.live-activity {
left: 16px;
bottom: 16px;
}
.live-activity__chip {
padding: 14px 18px;
gap: 12px;
border-radius: var(--storefront-live-activity-radius-mobile);
}
.live-activity__avatar {
width: 36px;
height: 36px;
font-size: 1rem;
}
.live-activity__info strong {
font-size: 1rem;
}
.live-activity__info span {
font-size: 0.9rem;
}
}
.checkout-overlay {
position: fixed;
inset: 0;
background: var(--panel-alpha-90);
display: none;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 900;
}
.checkout-overlay.active {
display: flex;
}
.checkout-panel {
width: min(960px, 95vw);
max-height: 95vh;
overflow: auto;
border-radius: var(--storefront-radius-modal-checkout);
border: 1px solid var(--surface-border);
background: var(--panel);
padding: 32px;
display: grid;
gap: 24px;
}
.checkout-panel h2 {
font-family: var(--space);
text-transform: uppercase;
margin: 0;
}
.checkout-summary {
border-radius: var(--storefront-radius-checkout-summary);
background: var(--surface-bg-subtle);
border: 1px solid var(--surface-border-subtle);
padding: 20px;
}
.checkout-summary ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.checkout-summary li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 0.95rem;
}
.checkout-thumb {
width: 56px;
height: 56px;
border-radius: 12px;
overflow: hidden;
background: var(--surface-bg-soft);
flex-shrink: 0;
}
.checkout-thumb.placeholder {
background: var(--surface-bg-subtle);
}
.checkout-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.checkout-info {
flex: 1;
}
.checkout-info span {
display: block;
color: var(--muted);
font-size: 0.85rem;
margin-top: 4px;
}
.checkout-size-hint {
display: block;
margin-top: 2px;
font-size: 0.78rem;
color: var(--text-alpha-82);
font-weight: 500;
}
.checkout-price {
font-size: 1rem;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.form-grid input,
.form-grid textarea {
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--surface-border);
background: var(--panel-input-bg);
color: var(--text);
}
.form-grid label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.85rem;
color: var(--muted);
}
.checkout-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-end;
margin-top: 20px;
}
.checkout-actions button,
.checkout-actions input[type='submit'] {
padding: 12px 28px;
border-radius: 14px;
border: 1px solid transparent;
font-family: var(--space);
text-transform: uppercase;
letter-spacing: 2px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
color: var(--white);
}
@media (max-width: 768px){
.checkout-panel input[type='text'],
.checkout-panel input[type='email'],
.checkout-panel input[type='tel'] {
font-size: 16px;
line-height: 1.4;
}
.checkout-actions {
flex-direction: column;
align-items: stretch;
}
.checkout-actions button,
.checkout-actions input[type='submit'] {
width: 100%;
font-size: 0.95rem;
}
.primary-action--red {
font-size: 0.95rem;
}
}
.checkout-actions .ghost {
background: var(--storefront-action-primary-bg);
border-color: var(--storefront-action-primary-border);
color: var(--storefront-action-primary-text);
box-shadow: 0 0 0 transparent;
}
.checkout-actions .ghost:hover {
filter: brightness(1.05);
box-shadow: 0 0 8px var(--accent-hot-alpha-25);
}
.checkout-actions .solid:hover {
filter: brightness(1.05);
box-shadow: 0 0 8px var(--storefront-accent-success-border);
}
.success-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
}
.success-card {
max-width: 640px;
background: var(--surface-bg-subtle);
border-radius: 32px;
padding: 48px;
border: 1px solid var(--surface-border-subtle);
box-shadow: var(--shadow);
}
.success-card h1 {
font-family: var(--space);
text-transform: uppercase;
}
.success-logo {
width: min(120px, 40vw);
margin: 0 auto 18px;
filter: drop-shadow(0 0 14px var(--yellow-alpha-40)) drop-shadow(0 0 10px var(--pink-alpha-25));
}
.success-logo img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 0 12px var(--yellow-alpha-50));
}
.success-card a {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 24px;
padding: 14px 28px;
border-radius: 999px;
background: var(--storefront-action-primary-bg);
color: var(--storefront-action-primary-text);
border: 1px solid var(--storefront-action-primary-border);
font-weight: 600;
}
.text-accent {
color: var(--success);
}
.confirmation-hint {
margin-top: 24px;
color: var(--muted);
}
.confirmation-cta {
margin-top: 20px;
text-align: center;
}
.btn-neon {
display: inline-block;
padding: 12px 18px;
border-radius: 14px;
border: 1px solid var(--yellow-alpha-70);
color: var(--neon-yellow);
text-decoration: none;
font-weight: 700;
letter-spacing: 1px;
box-shadow: 0 0 12px var(--yellow-alpha-35);
background: transparent;
transition: box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-neon:hover {
color: var(--neon-yellow);
border-color: var(--yellow-alpha-90);
box-shadow: 0 0 16px var(--yellow-alpha-45);
}
footer {
padding: 32px;
text-align: center;
color: var(--muted);
font-size: 0.9rem;
}
#fireworks {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}
@media (max-width: 720px){
.category-showcase {
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
.category-card__overlay {
padding: 14px;
}
.category-card__overlay strong {
font-size: 0.95rem;
}
}
/* build:end */
/* build:begin assets/css/pages/checkout-consents.css */
.form-consents {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
}
.consent-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--storefront-consent-item-border);
border-radius: var(--storefront-radius-control);
background: var(--storefront-consent-item-bg);
box-shadow: var(--storefront-consent-item-shadow);
color: var(--storefront-consent-item-text);
line-height: 1.4;
}
.consent-item input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--accent-hot);
flex-shrink: 0;
}
.consent-item a {
color: var(--storefront-consent-link);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
text-shadow: none;
}
.consent-item a:hover {
color: var(--storefront-consent-link-hover);
text-shadow: none;
}
/* Modal de termos */
.terms-overlay {
position: fixed;
inset: 0;
background: var(--storefront-terms-overlay-bg);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
z-index: 1000;
}
.terms-overlay.is-open {
opacity: 1;
pointer-events: all;
}
.terms-modal {
width: min(900px, 92vw);
max-height: 80vh;
overflow: auto;
background: var(--storefront-terms-modal-bg);
border: 1px solid var(--storefront-terms-modal-border);
border-radius: var(--storefront-radius-surface);
box-shadow: var(--storefront-terms-modal-shadow);
padding: 24px;
position: relative;
}
.terms-close {
position: absolute;
top: 12px;
right: 45px;
background: var(--storefront-terms-close-bg);
color: var(--storefront-terms-close-text);
border: 1px solid var(--storefront-terms-close-border);
width: 34px;
height: 34px;
border-radius: var(--storefront-radius-icon);
cursor: pointer;
transition: all 0.2s ease;
}
.terms-close:hover {
background: var(--storefront-terms-close-bg-hover);
box-shadow: 0 10px 18px var(--black-alpha-25);
}
.terms-body {
color: var(--storefront-terms-body-text);
font-size: 0.95rem;
line-height: 1.6;
}
.terms-body h1,
.terms-body h2,
.terms-body h3,
.terms-body h4 {
color: var(--storefront-terms-heading);
margin-top: 1rem;
}
.terms-body a {
color: var(--storefront-terms-link);
text-decoration: underline;
}
/* build:end */
/* build:begin assets/css/pages/merge-overlay.css */
/* =========================================================
Merge overlay (lead merge flow)
========================================================= */
.merge-overlay {
position: fixed;
inset: 0;
background: var(--storefront-merge-overlay-bg);
display: none;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 950;
}
.merge-overlay.active {
display: flex;
}
.merge-card {
width: min(520px, 95vw);
background: var(--storefront-merge-card-bg);
border-radius: var(--storefront-radius-overlay);
padding: 32px;
border: 1px solid var(--storefront-merge-card-border);
box-shadow: var(--storefront-merge-card-shadow);
position: relative;
text-align: center;
}
.merge-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: var(--storefront-radius-icon);
border: 1px solid var(--storefront-merge-close-border);
background: var(--storefront-merge-close-bg);
color: var(--storefront-merge-close-text);
font-size: 1.2rem;
cursor: pointer;
}
.merge-kicker {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.8rem;
color: var(--muted);
margin: 0 0 8px;
}
.merge-card h3 {
margin: 0 0 12px;
}
.merge-card p {
margin: 0 0 18px;
color: var(--muted);
}
.merge-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.merge-option {
padding: 14px 20px;
border-radius: var(--storefront-radius-surface);
border: 1px solid var(--storefront-merge-option-border);
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
}
.merge-option.primary {
background: var(--storefront-merge-option-primary-bg);
border-color: var(--storefront-merge-option-primary-border);
color: var(--storefront-merge-option-primary-text);
}
.merge-option.secondary {
background: var(--storefront-merge-option-secondary-bg);
border-color: var(--storefront-merge-option-secondary-border);
color: var(--storefront-merge-option-secondary-text);
}
/* build:end */
/* build:begin assets/css/pages/whatsapp-fab.css */
/* Botao flutuante WhatsApp */
.whatsapp-support {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1200;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.whatsapp-fab {
width: 56px;
height: 56px;
border-radius: var(--storefront-radius-icon);
display: flex;
align-items: center;
justify-content: center;
background: var(--storefront-whatsapp-fab-bg);
border: 1px solid var(--storefront-whatsapp-fab-border);
box-shadow: var(--storefront-whatsapp-fab-shadow);
color: var(--storefront-whatsapp-fab-icon);
font-size: 28px;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}
.whatsapp-fab:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: var(--storefront-whatsapp-fab-shadow-hover);
}
.whatsapp-fab:active {
transform: translateY(0);
}
.whatsapp-hint {
position: relative;
isolation: isolate;
padding: 12px 36px 12px 14px;
border-radius: var(--storefront-radius-control);
background: var(--storefront-whatsapp-hint-bg);
color: var(--storefront-whatsapp-hint-text);
border: 1px solid var(--storefront-whatsapp-hint-border);
box-shadow: 0 10px 22px var(--black-alpha-25);
font-size: 13px;
line-height: 1.2;
display: inline-flex;
align-items: center;
min-width: 170px;
}
.whatsapp-hint::before,
.whatsapp-hint::after {
content: '';
position: absolute;
pointer-events: none;
}
.whatsapp-hint::before {
bottom: -9px;
right: 13px;
border-width: 9px 8px 0 8px;
border-style: solid;
border-color: var(--storefront-whatsapp-hint-border) transparent transparent transparent;
z-index: -2;
}
.whatsapp-hint::after {
bottom: -7px;
right: 14px;
border-width: 8px 7px 0 7px;
border-style: solid;
border-color: var(--storefront-whatsapp-pointer-bg) transparent transparent transparent;
z-index: -1;
}
.whatsapp-hint__text {
display: block;
}
.whatsapp-hint__close {
position: absolute;
top: 6px;
right: 6px;
width: 18px;
height: 18px;
border: 0;
background: transparent;
color: var(--storefront-whatsapp-close-text);
font-weight: 700;
font-size: 15px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
box-shadow: none;
transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
opacity: 0.82;
}
.whatsapp-hint__close:hover {
color: var(--storefront-whatsapp-close-text-hover);
transform: translateY(-1px);
opacity: 1;
}
body.is-plp-filter-open .whatsapp-support {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(12px);
}
/* build:end */
/* build:begin assets/css/pages/festive-bonus.css */
/* Toast de compartilhamento */
.share-toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translate(-50%, 20px);
background: var(--black-alpha-80);
color: var(--white);
padding: 10px 16px;
border-radius: var(--storefront-radius-control);
box-shadow: 0 10px 30px var(--black-alpha-25);
opacity: 0;
transition: opacity .2s ease, transform .2s ease;
z-index: 9999;
font-size: 0.95rem;
letter-spacing: 0.2px;
}
.share-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* ==== FESTIVE CART OVERRIDES (Natal & Ano Novo) ==== */
.category-top {
background:
linear-gradient(120deg, var(--mint-alpha-05), var(--rose-alpha-05)),
var(--black-alpha-92);
box-shadow: 0 14px 36px var(--black-alpha-40);
}
.cart-sidebar {
background: var(--storefront-cart-sidebar-bg, none);
}
.cart-sidebar__overlay {
background: var(--black-alpha-55);
backdrop-filter: blur(6px);
}
.cart-sidebar__drawer {
background: var(--storefront-cart-drawer-bg);
border-left: 1px solid var(--storefront-cart-drawer-border);
box-shadow: var(--storefront-cart-drawer-shadow);
backdrop-filter: var(--storefront-cart-drawer-blur, blur(8px));
padding: 22px;
gap: 18px;
}
.cart-sidebar__head {
gap: 12px;
border-bottom: 1px solid var(--surface-border-subtle);
padding-bottom: 12px;
}
.cart-sidebar__close {
background: var(--storefront-cart-close-bg);
border: 1px solid var(--storefront-cart-close-border);
width: 36px;
height: 36px;
border-radius: var(--storefront-radius-icon);
color: var(--storefront-cart-close-text);
cursor: pointer;
font-size: 1.1rem;
box-shadow: var(--storefront-cart-close-shadow, none);
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.cart-sidebar__close:hover,
.cart-sidebar__close:focus-visible {
border-color: var(--storefront-cart-close-border-hover, var(--storefront-action-primary-border));
color: var(--storefront-cart-close-text-hover, var(--storefront-action-primary-border));
background: var(--storefront-cart-close-bg-hover, var(--surface-bg-soft));
box-shadow: none;
outline: none;
}
.cart-sidebar__metrics {
display: none;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
padding: 14px;
border-radius: var(--storefront-radius-surface-lg);
background: var(--white-alpha-03);
border: 1px solid var(--surface-border-subtle);
box-shadow: inset 0 0 0 1px var(--mint-alpha-06);
}
.cart-sidebar__metrics span {
color: var(--text-alpha-80);
font-size: 0.78rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.cart-sidebar__metrics strong {
display: block;
font-size: 1.35rem;
color: var(--storefront-success-inline-text);
text-shadow: none;
}
.cart-items {
gap: 14px;
}
.cart-item {
background: var(--storefront-cart-item-bg);
border: 1px solid var(--storefront-cart-item-border, var(--surface-border-subtle));
box-shadow: var(--storefront-cart-item-shadow, none);
position: relative;
overflow: hidden;
}
.cart-item::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--storefront-cart-item-accent, linear-gradient(180deg, var(--neon-mint), var(--champagne)));
opacity: 0.95;
}
.cart-payment {
color: var(--storefront-accent-warning-text);
background: var(--storefront-accent-warning-bg);
padding: 4px 8px;
border-radius: 10px;
border: 1px solid var(--storefront-accent-warning-border);
}
.qty-btn,
.cart-sidebar .qty-btn,
.checkout-panel .qty-btn {
background: var(--storefront-control-button-bg);
border: 1px solid var(--storefront-control-button-border);
color: var(--storefront-control-button-text);
}
.qty-btn:hover,
.cart-sidebar .qty-btn:hover,
.checkout-panel .qty-btn:hover {
border-color: var(--storefront-control-button-border-hover);
box-shadow: var(--storefront-control-button-shadow-hover);
}
.cart-summary-footer {
background: var(--storefront-cart-summary-bg);
border: 1px solid var(--storefront-cart-summary-border, transparent);
border-radius: var(--storefront-radius-surface);
box-shadow: var(--storefront-cart-summary-shadow, none);
}
.checkout-overlay {
background: var(--overlay-bg);
}
.checkout-panel {
background: linear-gradient(150deg, var(--panel-cool-alpha-96), var(--panel-cool-alt-alpha-90));
border: 1px solid var(--surface-border);
box-shadow: 0 20px 60px var(--black-alpha-50);
}
.checkout-summary {
background: var(--surface-bg-soft);
border: 1px solid var(--surface-border);
}
.checkout-actions .ghost {
background: var(--storefront-action-outline-bg);
border-color: var(--storefront-action-outline-border);
color: var(--storefront-action-outline-text);
}
/* Bônus (frete/cinto) */
.bonus-activity {
position: fixed;
left: 24px;
bottom: 24px;
z-index: 1300;
pointer-events: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.bonus-activity.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.bonus-balloon {
max-width: 320px;
padding: 12px 16px;
border-radius: var(--storefront-radius-bonus-bubble);
background: var(--storefront-bonus-balloon-bg);
border: 1px solid var(--storefront-bonus-balloon-border);
box-shadow: 0 10px 24px var(--black-alpha-45);
color: var(--storefront-bonus-balloon-text);
display: flex;
gap: 10px;
align-items: center;
}
.bonus-balloon--fireworks {
position: relative;
overflow: visible;
}
.bonus-balloon--fireworks::after {
content: "";
position: absolute;
inset: -14px;
pointer-events: none;
background:
radial-gradient(circle, var(--yellow-alpha-90) 0 10%, transparent 55%),
radial-gradient(circle, var(--mint-alpha-80) 0 12%, transparent 60%),
radial-gradient(circle, var(--rose-alpha-85) 0 12%, transparent 60%);
background-size: 42px 42px, 52px 52px, 62px 62px;
background-position: 20% 30%, 70% 10%, 50% 70%;
background-repeat: no-repeat;
animation: bonusFireworks 1s ease-out forwards;
opacity: 0;
}
@keyframes bonusFireworks {
0% {
transform: scale(0.7);
opacity: 0;
}
40% {
transform: scale(1.05);
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
.bonus-balloon__text {
font-size: 0.95rem;
line-height: 1.4;
}
.bonus-balloon__close {
background: var(--storefront-cart-remove-bg);
border: 1px solid var(--storefront-cart-remove-border);
color: var(--storefront-cart-remove-text);
width: 20px;
height: 20px;
border-radius: var(--storefront-radius-icon);
cursor: pointer;
font-size: 0.8rem;
font-weight: 700;
box-shadow: var(--storefront-cart-remove-shadow, none);
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.bonus-balloon__close:hover,
.bonus-balloon__close:focus-visible {
background: var(--storefront-cart-remove-bg-hover, var(--storefront-cart-remove-bg));
border-color: var(--storefront-cart-remove-border-hover, var(--storefront-cart-remove-border));
color: var(--storefront-cart-remove-text-hover, var(--storefront-cart-remove-text));
box-shadow: var(--storefront-cart-remove-shadow-hover, var(--storefront-cart-remove-shadow, none));
transform: translateY(-1px);
outline: none;
}
.bonus-balloon.entering {
animation: liveIn 0.35s ease forwards;
}
.bonus-balloon.exiting {
animation: liveOut 0.3s ease forwards;
}
.bonus-selector {
margin-top: 10px;
padding: 12px;
border-radius: var(--storefront-radius-bonus-bubble);
background:
linear-gradient(120deg, var(--mint-alpha-08), var(--rose-alpha-06)),
var(--surface-bg-subtle);
border: 1px solid var(--surface-border);
box-shadow: inset 0 0 0 1px var(--surface-bg-soft);
}
.bonus-selector__head h4 {
margin: 2px 0 0;
}
.bonus-selector__hint {
margin: 0 0 8px;
color: var(--muted);
font-size: 0.9rem;
}
.bonus-selector__options {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.bonus-selector__options--gate {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.bonus-gate-overlay {
position: fixed;
inset: 0;
background: var(--black-alpha-70);
backdrop-filter: blur(8px);
display: none;
align-items: center;
justify-content: center;
z-index: 20050;
padding: 20px;
}
.bonus-gate-overlay.is-open {
display: flex;
}
.bonus-gate-card {
width: min(620px, 92vw);
background: var(--storefront-overlay-card-bg);
border: 1px solid var(--storefront-overlay-card-border);
border-radius: var(--storefront-radius-bonus-card);
padding: 18px 18px 16px;
box-shadow: var(--storefront-overlay-card-shadow);
}
.bonus-gate-card h3 {
margin: 6px 0 8px;
}
.bonus-gate-card .bonus-selector__hint {
margin-bottom: 12px;
}
.highlight-amount {
color: var(--storefront-overlay-highlight-text);
font-weight: 800;
text-shadow: var(--storefront-overlay-highlight-shadow);
}
.bonus-gate-continue {
width: 100%;
margin-top: 12px;
padding: 12px 14px;
border-radius: var(--storefront-radius-bonus-option);
border: 1px solid var(--storefront-overlay-cta-border);
background: var(--storefront-overlay-cta-bg);
color: var(--storefront-overlay-cta-text);
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
}
.bonus-gate-continue:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.bonus-option {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 8px 10px;
align-items: center;
padding: 10px 12px;
border-radius: var(--storefront-radius-bonus-option);
background: var(--storefront-overlay-option-bg);
border: 1px solid var(--storefront-overlay-option-border);
min-width: 180px;
flex: 1 1 180px;
}
.bonus-option input[type="radio"],
.bonus-option input[type="checkbox"] {
accent-color: var(--neon-mint);
width: 18px;
height: 18px;
}
.bonus-option__icon {
width: 80px;
height: 80px;
border-radius: var(--storefront-radius-bonus-option-icon);
background: var(--storefront-overlay-option-icon-bg);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: var(--storefront-overlay-option-icon-color);
overflow: hidden;
}
.bonus-option strong {
display: block;
color: var(--text-alpha-96);
line-height: 1.2;
}
.bonus-option__icon img {
width: 70px;
height: 70px;
object-fit: contain;
display: block;
}
.bonus-option small {
color: var(--text-alpha-72);
line-height: 1.2;
}
.bonus-selector--inline {
margin-top: 0;
}
.cart-item--bonus {
grid-template-columns: 72px minmax(0, 1fr) auto;
grid-template-rows: auto;
gap: 10px 12px;
padding: 10px 14px;
border: 1px solid var(--storefront-cart-bonus-border);
box-shadow: var(--storefront-cart-bonus-shadow);
}
.cart-item--bonus .cart-meta {
grid-column: 2 / 3;
grid-row: 1;
gap: 0;
}
.cart-item--bonus .cart-meta strong {
margin: 0;
}
.cart-actions--bonus {
grid-column: 3 / 4;
grid-row: 1;
align-items: center;
justify-content: flex-end;
width: auto;
flex-wrap: nowrap;
gap: 0;
}
.cart-actions--bonus .cart-price {
margin-left: 0;
flex-direction: row;
align-items: center;
gap: 10px;
}
/* Bonus upsell modal */
.bonus-upsell-overlay {
position: fixed;
inset: 0;
background: var(--black-alpha-78);
backdrop-filter: blur(8px);
display: none;
align-items: center;
justify-content: center;
z-index: 20060;
padding: 20px;
}
.bonus-upsell-overlay.is-open {
display: flex;
}
.bonus-upsell-card {
width: min(520px, 92vw);
background: var(--storefront-overlay-card-bg);
border: 1px solid var(--storefront-overlay-card-border);
border-radius: var(--storefront-radius-bonus-sheet);
padding: 20px 20px 18px;
box-shadow: var(--storefront-overlay-card-shadow);
color: var(--text-alpha-96);
}
.bonus-upsell__lead {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.bonus-upsell__gift img {
width: 100px;
height: 100px;
object-fit: contain;
display: block;
filter: var(--storefront-overlay-spotlight-filter);
margin-bottom: 6px;
}
.bonus-upsell__copy {
display: flex;
flex-direction: column;
gap: 6px;
text-align: center;
}
.bonus-upsell-card h3 {
margin: 8px 0 10px;
}
.bonus-upsell__hint {
margin: 0 0 14px;
color: var(--text-alpha-90);
line-height: 1.5;
}
.bonus-upsell__amount {
font-size: 1.45rem;
font-weight: 800;
color: var(--storefront-overlay-highlight-text);
text-shadow: var(--storefront-overlay-highlight-shadow);
}
.bonus-upsell__suggestions {
margin: 8px 0 14px;
padding: 12px 14px;
border-radius: var(--storefront-radius-bonus-option);
background: var(--storefront-overlay-list-bg);
border: 1px solid var(--surface-border-subtle);
}
.bonus-upsell__suggestions-title {
margin: 0 0 8px;
font-weight: 700;
color: var(--text-alpha-96);
}
.bonus-upsell__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
.bonus-upsell__list li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-radius: var(--storefront-radius-bonus-option-icon);
background: var(--storefront-overlay-list-item-bg);
border: 1px solid var(--surface-border-subtle);
color: var(--text-alpha-92);
font-size: 0.95rem;
}
.bonus-upsell__list .upsell-price {
color: var(--storefront-overlay-list-price);
font-weight: 700;
}
.bonus-upsell__actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin-top: 14px;
}
.bonus-upsell__cta,
.bonus-upsell__ghost {
width: 100%;
padding: 12px 14px;
border-radius: var(--storefront-radius-bonus-option);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
border: 1px solid var(--storefront-overlay-ghost-border);
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.bonus-upsell__cta {
background: var(--storefront-overlay-cta-bg);
border-color: var(--storefront-overlay-cta-border);
color: var(--storefront-overlay-cta-text);
box-shadow: var(--storefront-action-primary-shadow);
}
.bonus-upsell__ghost {
background: var(--storefront-overlay-ghost-bg);
color: var(--storefront-overlay-ghost-text);
}
.bonus-upsell__cta:hover,
.bonus-upsell__ghost:hover {
transform: translateY(-1px);
box-shadow: var(--storefront-action-primary-shadow-hover);
}
.bonus-upsell__cta:hover {
filter: brightness(1.05);
}
.upsell-thumb {
width: 90px;
height: 90px;
border-radius: var(--storefront-radius-bonus-option-icon);
overflow: hidden;
background: var(--surface-border-faint);
display: flex;
align-items: center;
justify-content: center;
}
.upsell-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.upsell-thumb__placeholder {
width: 100%;
height: 100%;
background: var(--surface-bg-soft);
}
/* Upsell compact layout overrides */
.upsell-thumb {
width: 110px;
height: 110px;
}
/* build:end */
/* build:begin assets/css/pages/radius-cart-checkout.css */
/* =========================================================
Radius governance: cart and checkout surfaces
========================================================= */
.category-body--radius-standard .checkout-actions .solid {
background: var(--storefront-accent-success-bg);
border-color: var(--storefront-accent-success-border);
color: var(--storefront-accent-success-text);
}
@media (max-width: 720px) {
.category-body--radius-standard .cart-sidebar__drawer {
width: 100vw;
right: 0;
border-radius: 0;
border-left: 0;
}
}
/* build:end */
/* build:begin assets/css/pages/radius-story-social.css */
/* =========================================================
Radius governance: story, feedback and social overlays
========================================================= */
/* Story preview shape is a theme contract, not a generic default. */
.category-body--radius-standard .story-preview,
.category-body--radius-standard .story-preview video {
border-radius: var(--storefront-story-preview-radius);
}
/* build:end */
/* build:begin assets/css/pages/cms-page.css */
/* =========================================================
Section 15: CMS/Institutional pages (pagina.php)
========================================================= */
.cms-page-back {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--surface-border-strong);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.cms-page-back:hover {
border-color: var(--storefront-accent-success-border);
background: var(--storefront-accent-success-bg);
transform: translateY(-1px);
}
.cms-page-shell {
width: min(100%, 960px);
box-sizing: border-box;
margin: clamp(18px, 4vw, 40px) auto clamp(34px, 6vw, 52px);
padding: clamp(18px, 3.8vw, 40px) clamp(18px, 4.2vw, 48px);
border: 0;
border-radius: 0;
background: var(--storefront-cms-panel-bg);
box-shadow: none;
}
.cms-page-shell .legal-header {
margin-bottom: 26px;
}
.cms-page-shell .legal-header h1 {
margin: 0;
line-height: 1.1;
letter-spacing: -0.01em;
font-size: clamp(1.9rem, 3.4vw, 2.45rem);
}
.cms-page-content {
color: var(--text);
display: grid;
gap: 16px;
max-width: 72ch;
font-size: 1.02rem;
line-height: 1.76;
}
.cms-page-content h1,
.cms-page-content h2,
.cms-page-content h3 {
margin: 18px 0 8px;
line-height: 1.28;
letter-spacing: -0.01em;
color: var(--storefront-cms-heading-color);
}
.cms-page-content h1 {
font-size: clamp(1.55rem, 2.5vw, 2rem);
}
.cms-page-content h2 {
font-size: clamp(1.28rem, 2vw, 1.56rem);
}
.cms-page-content h3 {
font-size: clamp(1.12rem, 1.7vw, 1.3rem);
}
.cms-page-content > h1:first-child,
.cms-page-content > h2:first-child,
.cms-page-content > h3:first-child {
margin-top: 0;
}
.cms-page-shell--with-markdown-title .cms-page-content > h1:first-child {
margin-top: 0;
margin-bottom: 6px;
font-size: clamp(2rem, 4vw, 2.85rem);
line-height: 1.08;
letter-spacing: -0.02em;
text-wrap: balance;
}
.cms-page-shell--with-markdown-title .cms-page-content > h1:first-child::after {
content: '';
display: block;
width: clamp(56px, 9vw, 84px);
height: 3px;
margin-top: 14px;
border-radius: 999px;
background: linear-gradient(90deg, var(--storefront-cms-link-color), var(--storefront-cms-link-decoration));
}
.cms-page-shell--with-markdown-title .cms-page-content > h1:first-child + p {
margin-top: -2px;
color: var(--text-alpha-88);
font-size: clamp(1.02rem, 1.55vw, 1.13rem);
}
.cms-page-content p {
margin: 0;
color: var(--storefront-cms-body-color);
}
.cms-page-content strong {
color: var(--storefront-cms-heading-color);
}
.cms-page-content ul,
.cms-page-content ol {
margin: 2px 0 4px;
padding-left: 22px;
display: grid;
gap: 8px;
}
.cms-page-content li {
line-height: 1.68;
}
.cms-page-content a {
color: var(--storefront-cms-link-color);
text-decoration: underline;
text-decoration-color: var(--storefront-cms-link-decoration);
}
.cms-page-content a:hover {
text-decoration-color: var(--storefront-cms-link-decoration-hover);
}
@media (max-width: 720px) {
.cms-page-shell {
margin-top: 14px;
padding-top: 16px;
padding-bottom: 20px;
}
.cms-page-shell .legal-header {
margin-bottom: 20px;
}
.cms-page-content {
font-size: 0.98rem;
line-height: 1.72;
}
.cms-page-shell--with-markdown-title .cms-page-content > h1:first-child {
font-size: clamp(1.72rem, 8vw, 2.2rem);
line-height: 1.12;
}
}
/* build:end */
/* build:begin assets/css/pages/plp.css */
.category-shell--plp {
gap: 40px;
}
.plp-head {
margin-bottom: 24px;
}
.plp-head .section-kicker {
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-alpha-75);
font-size: 0.78rem;
margin-bottom: 8px;
}
.plp-head h1 {
margin: 0;
font-size: clamp(1.8rem, 3vw, 2.4rem);
}
.plp-head p {
margin-top: 8px;
color: var(--text-alpha-72);
}
.plp-filter-shell {
display: grid;
gap: 12px;
margin-bottom: 18px;
}
.plp-filter-bar {
display: none;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
border: 1px solid var(--surface-border);
border-radius: var(--category-radius);
background: linear-gradient(180deg, var(--surface-bg-subtle), var(--surface-bg-soft));
box-shadow: 0 16px 34px var(--black-alpha-18);
}
.plp-filter-bar__intro {
display: grid;
gap: 6px;
min-width: 0;
}
.plp-filter-bar__eyebrow {
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-alpha-66);
font-size: 0.72rem;
font-weight: 700;
}
.plp-filter-bar__meta,
.plp-command__heading {
display: grid;
gap: 4px;
}
.plp-filter-bar__meta strong {
color: var(--text-alpha-96);
font-size: 1rem;
line-height: 1.2;
}
.plp-filter-bar__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.plp-filter-bar__clear,
.plp-command__clear {
border: 1px solid var(--surface-border-strong);
border-radius: var(--category-radius);
background: var(--surface-bg-soft);
color: var(--text-alpha-86);
font-weight: 600;
font-size: 0.82rem;
padding: 10px 14px;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.plp-filter-bar__clear:hover,
.plp-command__clear:hover {
border-color: var(--surface-border-hover);
background: var(--surface-bg-hover);
transform: translateY(-1px);
}
.plp-filter-trigger {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--surface-border-stronger);
border-radius: var(--category-radius);
background: var(--surface-bg-contrast);
color: var(--text-alpha-96);
font-weight: 700;
font-size: 0.82rem;
padding: 11px 14px;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.plp-filter-trigger:hover {
border-color: var(--surface-border-hover);
box-shadow: 0 12px 22px var(--black-alpha-18);
transform: translateY(-1px);
}
.plp-filter-trigger__count {
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: var(--category-radius);
border: 1px solid var(--storefront-action-primary-border);
background: var(--storefront-action-primary-bg);
color: var(--storefront-action-primary-text);
font-size: 0.72rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.plp-filter-overlay {
display: none;
}
.plp-command {
display: grid;
gap: 16px;
padding: 18px 20px;
border: 1px solid var(--surface-border);
border-radius: var(--category-radius);
background: linear-gradient(180deg, var(--surface-bg-subtle), var(--surface-bg-soft));
box-shadow: 0 18px 36px var(--black-alpha-18);
}
.plp-command__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.plp-command__heading h2 {
margin: 0;
color: var(--text-alpha-96);
font-size: clamp(1.02rem, 2vw, 1.24rem);
line-height: 1.2;
}
.plp-command__close {
display: none;
width: 38px;
height: 38px;
border: 1px solid var(--surface-border-stronger);
border-radius: var(--category-radius);
background: var(--surface-bg-contrast);
color: var(--text-alpha-86);
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.plp-command__close:hover,
.plp-command__close:focus-visible {
border-color: var(--surface-border-hover);
background: var(--surface-bg-hover);
color: var(--text-alpha-96);
transform: translateY(-1px);
outline: none;
}
.plp-command__grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}
.plp-field label {
font-size: 0.8rem;
color: var(--text-alpha-78);
margin-bottom: 5px;
display: block;
}
.plp-field {
min-width: 0;
}
.plp-field input,
.plp-field select {
width: 100%;
min-width: 0;
height: 48px;
border: 1px solid var(--surface-border);
border-radius: var(--category-radius);
background: var(--panel-input-bg);
color: var(--text-alpha-96);
padding: 0 14px;
box-shadow: none;
transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.plp-field select {
color-scheme: var(--storefront-plp-select-color-scheme, light);
}
.plp-field select option {
background: var(--storefront-plp-select-option-bg, var(--panel-input-bg));
color: var(--storefront-plp-select-option-text, var(--text-alpha-96));
}
.plp-field input:focus,
.plp-field select:focus {
border-color: var(--storefront-action-primary-border);
background: var(--surface-bg-soft);
box-shadow: none;
outline: none;
}
.plp-field.vf-field {
position: relative;
display: grid;
}
.plp-field.vf-field > label,
.plp-field.vf-field .vf-field__label {
margin-bottom: 0;
color: var(--text-alpha-45);
letter-spacing: 0.04em;
text-transform: none;
background: transparent;
border-radius: 6px;
}
.plp-field.vf-field .vf-field__control {
padding-top: 18px;
padding-bottom: 6px;
}
.plp-field.vf-field.is-focused .vf-field__label,
.plp-field.vf-field.is-filled .vf-field__label,
.plp-field.vf-field.vf-field--fixed .vf-field__label {
top: -1px;
transform: translateY(-50%);
color: var(--storefront-action-primary-border);
background: var(--panel-input-bg);
font-size: 0.64rem;
}
.plp-field.vf-field select.vf-field__control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 36px;
background-image: var(--storefront-payment-select-arrow);
background-repeat: no-repeat;
background-position: calc(100% - 14px) 50%;
background-size: 12px 8px;
}
.plp-command__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.plp-command__footer-meta {
display: grid;
gap: 3px;
min-width: 0;
}
.plp-command__footer-label {
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-alpha-60);
font-size: 0.68rem;
font-weight: 700;
}
.plp-command__footer-meta strong {
color: var(--text-alpha-96);
font-size: 0.96rem;
}
.plp-command__footer-meta span:last-child {
color: var(--text-alpha-70);
font-size: 0.84rem;
}
.plp-command__footer-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.plp-command__submit {
border: 1px solid var(--storefront-action-primary-border);
border-radius: var(--category-radius);
background: var(--storefront-action-primary-bg);
color: var(--storefront-action-primary-text);
cursor: pointer;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.74rem;
padding: 11px 16px;
box-shadow: var(--storefront-action-primary-shadow);
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.plp-command__submit:hover {
filter: brightness(1.03);
transform: translateY(-1px);
box-shadow: var(--storefront-action-primary-shadow-hover);
}
.plp-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.plp-filter-chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 8px 12px;
border: 1px solid var(--surface-border-strong);
border-radius: var(--category-radius);
background: var(--surface-bg-soft);
color: var(--text-alpha-90);
font-size: 0.82rem;
line-height: 1;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.plp-filter-chip:hover {
border-color: var(--storefront-action-primary-border);
background: var(--surface-bg-hover);
transform: translateY(-1px);
}
.plp-filter-chip i {
font-size: 0.92rem;
color: var(--text-alpha-60);
}
.plp-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.plp-card {
border: 1px solid var(--surface-border-subtle);
border-radius: var(--category-radius);
overflow: hidden;
background: var(--surface-bg-subtle);
display: flex;
flex-direction: column;
}
.plp-card__media {
display: block;
aspect-ratio: 3 / 4;
background: var(--surface-bg-soft);
position: relative;
}
.plp-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.plp-card__placeholder {
display: grid;
place-items: center;
height: 100%;
color: var(--text-alpha-65);
font-size: 0.9rem;
}
.plp-card__badge {
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
border: 1px solid var(--surface-border-bright);
border-radius: var(--category-radius);
background: var(--badge-bg);
backdrop-filter: blur(6px);
color: var(--text-alpha-96);
font-size: 0.7rem;
line-height: 1;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 8px;
}
.plp-card__body {
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.plp-card__body h3 {
margin: 0;
font-size: 0.95rem;
line-height: 1.3;
}
.plp-card__pricing {
display: flex;
flex-direction: column;
gap: 2px;
}
.plp-card__price-before {
color: var(--text-alpha-50);
text-decoration: line-through;
font-size: 0.82rem;
}
.plp-card__price-now {
font-size: 1.02rem;
}
.plp-card__meta {
margin-top: auto;
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 8px;
font-size: 0.82rem;
color: var(--text-alpha-80);
}
.plp-card__availability {
border: 1px solid var(--success-border);
color: var(--success);
border-radius: 999px;
padding: 2px 8px;
font-size: 0.72rem;
line-height: 1.2;
}
.plp-card__availability.is-unavailable {
border-color: var(--danger-border);
color: var(--danger-accent);
}
.plp-card.is-unavailable .plp-card__media::after {
content: '';
position: absolute;
inset: 0;
background: var(--overlay-bg);
}
.plp-card__cta {
color: var(--success);
font-weight: 700;
justify-self: end;
}
.plp-empty {
border: 1px dashed var(--surface-border-dashed);
border-radius: var(--category-radius);
padding: 24px;
color: var(--text-alpha-70);
display: grid;
gap: 10px;
}
.plp-empty__action {
color: var(--success);
font-weight: 700;
}
.plp-pagination {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.plp-pagination__link {
min-width: 36px;
height: 36px;
border: 1px solid var(--surface-border-strong);
border-radius: var(--category-radius);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
font-size: 0.82rem;
color: var(--text-alpha-92);
transition: border-color 0.2s ease, background 0.2s ease;
}
.plp-pagination__link:hover {
border-color: var(--surface-border-hover);
background: var(--surface-bg-hover);
}
.plp-pagination__link.is-active {
border-color: var(--storefront-pagination-active-border);
color: var(--storefront-pagination-active-text);
background: var(--storefront-pagination-active-bg);
}
.plp-pagination__link.is-disabled {
opacity: 0.4;
pointer-events: none;
}
.plp-pagination__dots {
color: var(--text-alpha-60);
}
body.is-plp-filter-open {
overflow: hidden;
}
@media (max-width: 1100px) {
.plp-command__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.plp-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.plp-filter-bar {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
border-color: var(--storefront-plp-filter-mobile-border, var(--surface-border));
background: var(--storefront-plp-filter-mobile-bg, linear-gradient(180deg, var(--surface-bg-subtle), var(--surface-bg-soft)));
box-shadow: var(--storefront-plp-filter-mobile-shadow, 0 16px 34px var(--black-alpha-18));
}
.plp-filter-bar__intro {
flex: 1;
}
.plp-filter-bar__actions {
width: auto;
margin-left: auto;
}
.plp-filter-bar__clear {
display: none;
}
.plp-filter-trigger {
display: inline-flex;
}
.plp-filter-overlay {
position: fixed;
inset: 0;
display: block;
background: var(--storefront-plp-filter-mobile-overlay-bg, var(--storefront-cart-overlay-bg));
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
z-index: 1190;
}
.plp-command {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1200;
max-height: min(82vh, 760px);
overflow: auto;
padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
border: 1px solid var(--storefront-plp-filter-mobile-border, var(--surface-border));
border-bottom: 0;
border-radius: var(--storefront-radius-overlay) var(--storefront-radius-overlay) 0 0;
background: var(--storefront-plp-filter-mobile-bg, linear-gradient(180deg, var(--surface-bg-subtle), var(--surface-bg-soft)));
transform: translateY(calc(100% + 32px));
opacity: 0;
visibility: hidden;
transition: transform 0.24s ease, opacity 0.24s ease, visibility 0.24s ease;
box-shadow: var(--storefront-plp-filter-mobile-shadow, 0 -18px 42px var(--black-alpha-32));
}
.plp-command .plp-field input,
.plp-command .plp-field select,
.plp-command .plp-field.vf-field.is-focused .vf-field__label,
.plp-command .plp-field.vf-field.is-filled .vf-field__label,
.plp-command .plp-field.vf-field.vf-field--fixed .vf-field__label {
background: var(--storefront-plp-filter-mobile-field-bg, var(--panel-input-bg));
}
.plp-filter-shell.is-open .plp-filter-overlay {
opacity: 1;
pointer-events: auto;
}
.plp-filter-shell.is-open .plp-command {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.plp-command__close {
display: inline-flex;
}
.plp-command__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.plp-command__footer {
align-items: stretch;
}
.plp-command__footer-actions {
width: 100%;
}
.plp-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.plp-filter-bar {
padding: 14px;
}
.plp-filter-bar__meta strong {
font-size: 0.94rem;
}
.plp-command {
padding-inline: 14px;
}
.plp-command__grid {
grid-template-columns: 1fr;
}
.plp-command__footer-actions {
align-items: stretch;
}
.plp-command__submit,
.plp-command__clear {
width: 100%;
text-align: center;
}
.plp-card__meta {
grid-template-columns: 1fr;
}
.plp-card__cta {
justify-self: start;
}
.plp-grid {
grid-template-columns: 1fr;
}
}
/* build:end */
/* build:begin assets/css/pages/pdp.css */
.category-body--pdp .catalog-section {
padding-top: 0;
}
.category-body--pdp .product-grid {
gap: 24px;
}
.category-body--pdp .product-card {
scroll-margin-top: 96px;
}
/* build:end */
/* build:begin assets/css/pages/checkout-flow.css */
.checkout-body,
.order-status-body {
--checkout-shell-max: 1240px;
--checkout-field-gap: 12px;
--checkout-card-bg: var(--surface-bg-subtle);
--checkout-card-border: var(--surface-border-subtle);
--checkout-card-border-strong: var(--surface-border);
--checkout-card-shadow: 0 16px 40px var(--black-alpha-35);
background: var(--storefront-page-gradient);
color: var(--text);
min-height: 100vh;
}
.checkout-topbar {
position: sticky;
top: 0;
z-index: 20;
background: var(--panel-cool-alpha-96);
border-bottom: 1px solid var(--surface-border-subtle);
padding: 14px clamp(16px, 2.8vw, 32px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
backdrop-filter: blur(12px);
}
.checkout-topbar__brand {
display: inline-flex;
align-items: center;
color: var(--white);
text-decoration: none;
font-family: var(--space);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.checkout-topbar__meta {
text-align: right;
font-size: 0.82rem;
color: var(--text-alpha-72);
line-height: 1.35;
}
.checkout-topbar__meta strong {
color: var(--text-alpha-92);
letter-spacing: 0.02em;
}
.checkout-banner {
background: linear-gradient(120deg, var(--panel-cool-alpha-94), var(--panel-cool-alt-alpha-90));
border-bottom: 1px solid var(--surface-border-subtle);
color: var(--text-alpha-92);
font-size: 0.86rem;
text-align: center;
padding: 9px 16px;
font-weight: 700;
letter-spacing: 0.03em;
}
.checkout-shell {
width: min(var(--checkout-shell-max), calc(100% - 48px));
margin: 24px auto 44px;
display: grid;
grid-template-columns: minmax(0, 1.62fr) minmax(280px, 0.9fr);
gap: 20px;
}
.checkout-main,
.checkout-sidebar {
display: grid;
align-content: start;
gap: 16px;
}
.checkout-card {
background: var(--checkout-card-bg);
border: 1px solid var(--checkout-card-border);
border-radius: 18px;
padding: 18px;
box-shadow: var(--checkout-card-shadow);
backdrop-filter: blur(8px);
}
.checkout-card--muted {
background: var(--surface-bg-subtle);
color: var(--text-alpha-50);
border-color: var(--surface-border-faint);
}
.checkout-step {
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.checkout-step.is-active {
border-color: var(--storefront-action-primary-border);
box-shadow: var(--checkout-card-shadow);
}
.checkout-step.is-complete:not(.is-active) {
border-color: var(--storefront-checkout-complete-border);
box-shadow: var(--storefront-checkout-complete-shadow);
}
.checkout-step.is-locked {
border-color: var(--surface-border-faint);
background: color-mix(in srgb, var(--checkout-card-bg) 92%, var(--white) 8%);
box-shadow: 0 10px 24px var(--black-alpha-18);
}
.checkout-step__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.checkout-step__header-actions {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.checkout-step__status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid var(--surface-border);
background: var(--surface-bg-soft);
color: var(--text-alpha-82);
font-size: 0.78rem;
line-height: 1;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
.checkout-step__status--payment {
border-color: var(--storefront-action-primary-border);
background: var(--surface-bg-soft);
color: var(--storefront-action-primary-border);
}
.checkout-step__title {
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: clamp(1.55rem, 1.8vw, 2.05rem);
font-weight: 800;
color: var(--text-alpha-96);
letter-spacing: 0.005em;
}
.checkout-step__index {
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--surface-bg-soft);
border: 1px solid var(--surface-border);
color: var(--text-alpha-88);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 800;
line-height: 1;
flex-shrink: 0;
}
.checkout-step.is-complete .checkout-step__index {
background: var(--storefront-checkout-complete-index-bg);
border-color: var(--storefront-checkout-complete-border-strong);
color: var(--storefront-checkout-complete-index-text);
}
.checkout-step.is-active .checkout-step__index {
background: var(--storefront-action-primary-bg);
border-color: var(--storefront-action-primary-border);
color: var(--storefront-action-primary-text);
}
.checkout-step.is-locked .checkout-step__title,
.checkout-step.is-locked .checkout-step__header .checkout-section-note {
color: var(--text-alpha-58);
}
.checkout-step.is-locked .checkout-step__status {
opacity: 0.72;
}
.checkout-step.is-locked .checkout-step__index {
border-color: var(--surface-border-faint);
color: var(--text-alpha-50);
background: var(--surface-bg-soft);
}
.checkout-step__body[hidden],
.checkout-step__preview[hidden] {
display: none !important;
}
.checkout-step__preview {
margin-top: 2px;
}
.checkout-preview-card {
border: 1px solid var(--storefront-checkout-complete-border);
border-radius: 14px;
padding: 14px;
background: var(--storefront-checkout-complete-bg);
}
.checkout-preview-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.checkout-preview-card__label {
font-family: var(--space);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--storefront-checkout-complete-label);
}
.checkout-preview-card__link {
appearance: none;
border: 0;
background: transparent;
color: var(--text-alpha-90);
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
padding: 0;
}
.checkout-preview-card__link:hover,
.checkout-preview-card__link:focus-visible {
color: var(--storefront-checkout-complete-label);
text-decoration: underline;
outline: none;
}
.checkout-preview-card__content {
display: grid;
gap: 6px;
}
.checkout-preview-card__value {
color: var(--storefront-checkout-complete-label);
font-size: 0.98rem;
line-height: 1.35;
font-weight: 700;
}
.checkout-preview-card__meta {
color: var(--storefront-checkout-complete-label);
font-size: 0.95rem;
line-height: 1.35;
}
.checkout-preview-card__sub-label {
margin-top: 2px;
color: var(--text-alpha-70);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.checkout-address-map {
margin-top: 12px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--surface-border-subtle);
background: var(--panel-input-bg);
}
.checkout-address-map iframe {
display: block;
width: 100%;
height: 160px;
border: 0;
}
.checkout-form-grid {
display: grid;
gap: var(--checkout-field-gap);
}
.checkout-form-grid--cols,
.checkout-payment-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.checkout-payment-grid {
display: grid;
gap: var(--checkout-field-gap);
}
.checkout-step .checkout-form-grid + .checkout-form-grid {
margin-top: var(--checkout-field-gap);
}
.checkout-form-control {
width: 100%;
min-height: 46px;
border-radius: 12px;
border: 1px solid var(--surface-border);
background: var(--panel-input-bg);
color: var(--text);
padding: 12px 14px;
font-size: 0.93rem;
line-height: 1.25;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.checkout-form-control::placeholder {
color: var(--text-alpha-45);
}
.checkout-step .account-auth-field,
.checkout-step .vf-field--storefront {
position: relative;
display: grid;
}
.checkout-step .account-auth-field__label,
.checkout-step .vf-field--storefront .vf-field__label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-alpha-45);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: none;
line-height: 1;
pointer-events: none;
padding: 0 4px;
background: transparent;
border-radius: 6px;
transition: transform 0.18s ease, top 0.18s ease, color 0.18s ease, background 0.18s ease, font-size 0.18s ease;
}
.checkout-step .account-auth-field--floating .checkout-form-control,
.checkout-step .vf-field--storefront:not(.vf-field--fixed) .vf-field__control {
padding-top: 20px;
padding-bottom: 10px;
}
.checkout-step .account-auth-field--floating:focus-within .account-auth-field__label,
.checkout-step .account-auth-field--floating.is-filled .account-auth-field__label,
.checkout-step .vf-field--storefront.is-focused .vf-field__label,
.checkout-step .vf-field--storefront.is-filled .vf-field__label {
top: -1px;
transform: translateY(-50%);
color: var(--storefront-action-primary-border);
background: var(--panel-input-bg);
font-size: 0.7rem;
}
.checkout-step .account-auth-field--fixed .account-auth-field__label,
.checkout-step .vf-field--storefront.vf-field--fixed .vf-field__label {
top: -1px;
transform: translateY(-50%);
color: var(--storefront-action-primary-border);
background: var(--panel-input-bg);
font-size: 0.7rem;
}
.checkout-form-control:focus,
.checkout-payment-field:focus-within {
border-color: var(--storefront-action-primary-border);
box-shadow: none;
outline: none;
}
.checkout-form-control.is-invalid,
.checkout-shipping-list.is-invalid {
border-color: rgba(239, 68, 68, 0.7) !important;
box-shadow: none;
}
.checkout-step.is-locked .checkout-btn,
.checkout-step.is-locked .checkout-payment-tabs,
.checkout-step.is-locked .checkout-consent {
opacity: 0.75;
}
.checkout-form-control:disabled {
opacity: 0.64;
cursor: not-allowed;
}
.checkout-form-control:-webkit-autofill,
.checkout-form-control:-webkit-autofill:hover,
.checkout-form-control:-webkit-autofill:focus {
-webkit-text-fill-color: var(--text);
-webkit-box-shadow: 0 0 0 1000px var(--panel-input-bg) inset;
border-color: var(--surface-border);
}
.checkout-action-row {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: var(--checkout-field-gap);
align-items: center;
}
.checkout-btn {
display: inline-flex;
align-items: center;
justify-content: center;
appearance: none;
border: 1px solid transparent;
border-radius: 12px;
padding: 11px 16px;
font-family: var(--space);
font-size: 0.84rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
line-height: 1;
color: var(--storefront-action-primary-text);
text-decoration: none;
background: var(--surface-bg-soft);
cursor: pointer;
transition: transform 0.18s ease, filter 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.checkout-btn:hover {
transform: translateY(-1px);
filter: brightness(1.05);
}
.checkout-btn:active {
transform: translateY(0);
}
.checkout-btn:disabled,
.checkout-btn[disabled] {
opacity: 0.58;
cursor: not-allowed;
transform: none;
filter: none;
}
.checkout-btn--primary {
border-color: var(--storefront-action-primary-border);
background: var(--storefront-action-primary-bg);
color: var(--storefront-action-primary-text);
box-shadow: var(--storefront-action-primary-shadow);
}
.checkout-btn--primary:hover {
box-shadow: var(--storefront-action-primary-shadow-hover);
}
.checkout-btn--ghost {
border-color: var(--storefront-action-outline-border);
background: var(--storefront-action-outline-bg);
color: var(--storefront-action-outline-text);
}
.checkout-btn--ghost:hover {
border-color: var(--surface-border-hover);
box-shadow: var(--storefront-action-outline-shadow-hover);
}
.checkout-section-note {
margin: 0;
font-size: 0.84rem;
color: var(--text-alpha-70);
line-height: 1.45;
}
a.checkout-section-note {
text-decoration: none;
color: var(--text-alpha-82);
border-bottom: 1px dashed transparent;
}
a.checkout-section-note:hover {
color: var(--storefront-inline-link);
border-bottom-color: var(--storefront-inline-link-border);
}
.checkout-shipping-list {
display: grid;
gap: 8px;
margin-top: 10px;
}
.checkout-shipping-option {
display: grid;
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
border: 1px solid var(--surface-border-subtle);
border-radius: 12px;
background: var(--storefront-shipping-option-bg);
padding: 10px 12px;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.checkout-shipping-option:hover {
border-color: var(--surface-border);
background: var(--surface-bg-soft);
}
.checkout-shipping-option input {
margin: 0;
accent-color: var(--storefront-choice-accent);
}
.checkout-shipping-option span {
color: var(--text-alpha-88);
font-size: 0.88rem;
line-height: 1.3;
}
.checkout-shipping-option span strong {
display: block;
color: var(--text-alpha-94);
font-size: 0.9rem;
}
.checkout-shipping-option span small {
color: var(--text-alpha-60);
}
.checkout-shipping-option > strong {
color: var(--text-alpha-92);
font-size: 0.88rem;
}
.checkout-shipping-option.is-selected {
border-color: var(--storefront-shipping-option-selected-border);
background: var(--storefront-shipping-option-selected-bg);
box-shadow: none;
}
.checkout-payment-tabs {
display: inline-flex;
border: 1px solid var(--surface-border);
border-radius: 12px;
overflow: hidden;
margin-top: 12px;
margin-bottom: 12px;
background: var(--surface-bg-soft);
}
.checkout-payment-tab {
border: 0;
padding: 11px 16px;
font-family: var(--space);
font-size: 0.83rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-alpha-75);
background: transparent;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.checkout-payment-tab:hover {
color: var(--text-alpha-92);
background: var(--surface-bg-contrast);
}
.checkout-payment-tab.is-active {
background: var(--storefront-action-primary-bg);
color: var(--storefront-action-primary-text);
box-shadow: inset 0 0 0 1px var(--storefront-action-primary-border);
}
.checkout-payment-tab.is-disabled,
.checkout-payment-tab:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.checkout-payment-panel {
display: none;
gap: 10px;
}
.checkout-payment-panel.is-active {
display: grid;
}
.checkout-cardform {
display: grid;
gap: 10px;
}
.checkout-payment-field {
width: 100%;
min-height: 48px;
height: 48px;
border-radius: 12px;
border: 1px solid var(--surface-border);
background: var(--panel-input-bg);
color: var(--text);
padding: 0 12px;
display: flex;
align-items: stretch;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.checkout-payment-field iframe {
width: 100%;
min-height: 0;
height: 100% !important;
display: block;
border: 0;
}
/* Inputs tokenizados (cartao) seguem o mesmo padrao de label flutuante do conta-entrar. */
.account-auth-field--floating .checkout-payment-field,
.vf-field--storefront:not(.vf-field--fixed) .checkout-payment-field {
min-height: 52px;
height: 52px;
padding-top: 18px;
padding-bottom: 8px;
align-items: flex-end;
}
/* Paridade de transicao da borda com conta-entrar.php para campos tokenizados MP. */
#checkoutPaymentCardPanel .checkout-payment-field {
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#checkoutPaymentCardPanel .checkout-payment-field:focus-within {
border-color: var(--storefront-action-primary-border);
box-shadow: none;
}
/* Paridade com conta-entrar.php: mesmo timing/curva de transicao para labels flutuantes. */
#checkoutPaymentCardPanel .account-auth-field--floating .account-auth-field__label,
#checkoutPaymentCardPanel .vf-field--storefront .vf-field__label {
transition: transform 0.18s ease, top 0.18s ease, color 0.18s ease, background 0.18s ease, font-size 0.18s ease;
}
#checkoutPaymentCardPanel .account-auth-field--floating:focus-within .account-auth-field__label,
#checkoutPaymentCardPanel .account-auth-field--floating.is-focused .account-auth-field__label,
#checkoutPaymentCardPanel .account-auth-field--floating.is-filled .account-auth-field__label,
#checkoutPaymentCardPanel .vf-field--storefront.is-focused .vf-field__label,
#checkoutPaymentCardPanel .vf-field--storefront.is-filled .vf-field__label {
top: -1px;
transform: translateY(-50%);
color: var(--storefront-action-primary-border);
background: var(--panel-input-bg);
font-size: 0.7rem;
}
select.checkout-form-control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 40px;
background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23aeb4c2' d='M6 8a1 1 0 0 1-.707-.293l-5-5A1 1 0 0 1 1.707 1.293L6 5.586l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5A1 1 0 0 1 6 8'/%3E%3C/svg%3E\");
background-repeat: no-repeat;
background-position: calc(100% - 18px) 50%;
background-size: 12px 8px;
}
.checkout-consent {
margin-top: 10px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.84rem;
line-height: 1.4;
color: var(--text-alpha-75);
}
.checkout-consent input[type='checkbox'] {
margin-top: 2px;
accent-color: var(--storefront-choice-accent);
}
.checkout-submit {
width: 100%;
margin-top: 12px;
}
.checkout-credits-panel {
margin-top: 8px;
padding: 12px;
border-radius: 12px;
border: 1px solid var(--storefront-warning-panel-border);
background: var(--storefront-warning-panel-bg);
}
.checkout-credits-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.checkout-credits-panel .checkout-consent {
margin-top: 0;
}
.checkout-credits-panel__controls {
display: grid;
gap: 10px;
margin-top: 12px;
}
.checkout-credits-panel__field {
max-width: 240px;
}
.checkout-btn--compact {
min-height: 40px;
padding: 0 14px;
font-size: 0.78rem;
}
.checkout-sidebar {
gap: 14px;
}
.checkout-order-list {
display: grid;
gap: 12px;
}
.checkout-order-item {
display: grid;
grid-template-columns: 60px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
border-bottom: 1px solid var(--surface-border-faint);
padding-bottom: 10px;
}
.checkout-order-item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.checkout-order-thumb {
width: 60px;
height: 60px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--surface-border-subtle);
background: var(--surface-bg-soft);
}
.checkout-order-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.checkout-order-meta {
display: grid;
gap: 4px;
font-size: 0.82rem;
color: var(--text-alpha-72);
}
.checkout-order-meta strong {
color: var(--text-alpha-94);
font-size: 0.9rem;
}
.checkout-order-total {
list-style: none;
margin: 14px 0 0;
padding: 12px;
border-radius: 14px;
border: 1px solid var(--surface-border-subtle);
background: var(--surface-bg-soft);
display: grid;
gap: 8px;
font-size: 0.88rem;
}
.checkout-order-total li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: var(--text-alpha-72);
}
.checkout-order-total li:last-child {
padding-top: 8px;
margin-top: 2px;
border-top: 1px solid var(--surface-border-faint);
color: var(--text-alpha-94);
}
.checkout-order-total li strong {
color: var(--text-alpha-94);
font-weight: 700;
}
.checkout-order-total li.checkout-order-total__discount--active span,
.checkout-order-total li.checkout-order-total__discount--active strong {
color: var(--storefront-semantic-danger-text);
}
.checkout-order-total li.checkout-order-total__shipping--free span,
.checkout-order-total li.checkout-order-total__shipping--free strong {
color: var(--storefront-success-inline-text);
}
.checkout-order-total li#checkoutSummaryCreditsRow span,
.checkout-order-total li#checkoutSummaryCreditsRow strong {
color: var(--storefront-semantic-warning-text);
}
.checkout-offers {
border-color: var(--checkout-card-border);
background: var(--checkout-card-bg);
}
.checkout-offers__title {
margin: 0 0 8px;
font-size: 1.05rem;
font-weight: 800;
color: var(--storefront-semantic-warning-text);
letter-spacing: 0.02em;
}
.checkout-feedback {
display: grid;
gap: 12px;
}
.checkout-feedback-item {
font-size: 0.83rem;
line-height: 1.45;
color: var(--text-alpha-78);
border-bottom: 1px solid var(--surface-border-faint);
padding-bottom: 10px;
}
.checkout-feedback-item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.checkout-feedback-item strong {
display: block;
margin-bottom: 2px;
color: var(--text-alpha-94);
}
.checkout-alert {
margin-top: 4px;
padding: 11px 13px;
border-radius: 12px;
font-size: 0.83rem;
font-weight: 700;
border: 1px solid transparent;
}
.checkout-alert--error {
color: var(--storefront-semantic-danger-text);
background: var(--storefront-semantic-danger-bg);
border-color: var(--storefront-semantic-danger-border);
}
.checkout-alert--success {
color: var(--storefront-checkout-alert-success-text);
background: var(--storefront-checkout-alert-success-bg);
border-color: var(--storefront-checkout-alert-success-border);
}
.checkout-alert--warning {
color: var(--storefront-semantic-warning-text);
background: var(--storefront-semantic-warning-bg);
border-color: var(--storefront-semantic-warning-border);
}
.order-confirmation {
width: min(960px, calc(100% - 44px));
margin: 24px auto 42px;
display: grid;
gap: 14px;
}
.order-confirmation__lead {
text-align: center;
padding: 24px 20px;
}
.order-confirmation__lead h1 {
margin: 0 0 8px;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
color: var(--storefront-order-confirmation-heading);
font-weight: 800;
letter-spacing: 0.01em;
}
.order-confirmation__lead p {
margin: 0;
color: var(--text-alpha-82);
line-height: 1.45;
}
.order-payment-card {
text-align: center;
}
.order-payment-card h2,
#orderTotalLabel {
margin: 4px 0 8px;
font-size: clamp(1.4rem, 3vw, 2rem);
color: var(--text-alpha-96);
}
.order-payment-method-line {
margin: 6px 0 0;
color: var(--text-alpha-72);
font-size: 0.86rem;
font-weight: 700;
}
.order-payment-expiry {
margin: 8px 0 0;
color: var(--text-alpha-72);
font-size: 0.88rem;
text-align: center;
}
.order-payment-expiry.is-expired {
color: var(--storefront-semantic-danger-text);
}
.order-payment-qr {
width: min(220px, 80vw);
height: min(220px, 80vw);
margin: 10px auto;
object-fit: contain;
border: 1px solid var(--surface-border);
border-radius: 14px;
padding: 8px;
background: var(--white);
}
.order-status-body .order-payment-qr[hidden],
.order-status-body .order-payment-code-stack[hidden] {
display: none !important;
}
.order-payment-code {
width: 100%;
margin-top: 8px;
border: 1px solid var(--surface-border);
border-radius: 12px;
padding: 10px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
font-size: 0.76rem;
line-height: 1.4;
resize: vertical;
min-height: 82px;
background: var(--panel-input-bg);
color: var(--text-alpha-90);
}
.order-status-body .order-payment-code-stack {
width: min(100%, 760px);
margin: 0 auto;
display: grid;
justify-items: center;
gap: 10px;
}
.order-status-body .order-payment-code-stack .order-payment-code {
width: 100%;
margin-top: 0;
text-align: left;
}
.order-status-body .order-payment-code-stack .checkout-btn {
min-width: 168px;
}
.order-status-body .account-summary-row--danger span,
.order-status-body .account-summary-row--danger strong {
color: var(--storefront-semantic-danger-text);
}
.order-status-body .account-summary-row--success span,
.order-status-body .account-summary-row--success strong {
color: var(--storefront-semantic-success-text);
}
.order-status-body .order-item__bonus-pill {
display: inline-flex;
align-items: center;
border: 1px solid var(--storefront-bonus-pill-border);
background: var(--storefront-bonus-pill-bg);
color: var(--storefront-bonus-pill-text);
border-radius: 999px;
padding: 2px 8px;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.order-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.order-columns h3,
.checkout-card h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.06rem;
font-weight: 800;
color: var(--text-alpha-94);
}
.order-items {
display: grid;
gap: 10px;
}
.order-item {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) auto;
gap: 10px;
align-items: start;
padding-bottom: 10px;
border-bottom: 1px solid var(--surface-border-faint);
}
.order-item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.order-item__thumb {
width: 56px;
height: 56px;
border-radius: 10px;
overflow: hidden;
background: var(--surface-bg-soft);
border: 1px solid var(--surface-border-subtle);
}
.order-item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.order-status-body .order-item__price-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 2px;
min-width: 120px;
text-align: right;
}
.order-status-body .order-item__price-before {
color: var(--text-alpha-50);
text-decoration: line-through;
font-size: 0.78rem;
line-height: 1.2;
}
.order-status-body .order-item__price-discount {
color: var(--storefront-semantic-danger-text);
font-size: 0.76rem;
line-height: 1.2;
font-weight: 700;
}
.order-status-body .order-item__price-now {
color: var(--text-alpha-96);
font-size: 1rem;
line-height: 1.25;
}
.order-status-body .order-item__price-now.is-bonus {
color: #4bffa8;
}
.order-empty {
text-align: center;
color: var(--text-alpha-72);
line-height: 1.5;
}
.order-empty h1 {
margin-top: 0;
color: var(--text-alpha-95);
}
.order-empty a {
display: inline-flex;
justify-content: center;
margin-top: 12px;
}
@media (max-width: 1100px) {
.checkout-shell {
width: min(960px, calc(100% - 28px));
grid-template-columns: 1fr;
}
.checkout-sidebar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.checkout-sidebar .checkout-card:first-child {
grid-column: 1 / -1;
}
.checkout-form-grid--cols,
.checkout-payment-grid,
.order-columns {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.checkout-topbar {
padding: 13px 14px;
}
.checkout-topbar__meta {
display: none;
}
.checkout-banner {
font-size: 0.79rem;
padding: 8px 12px;
}
.checkout-shell,
.order-confirmation {
width: calc(100% - 18px);
margin-top: 12px;
margin-bottom: 22px;
}
.checkout-card {
border-radius: 16px;
padding: 14px;
}
.checkout-step__title {
font-size: 1.72rem;
}
.checkout-sidebar {
grid-template-columns: 1fr;
}
.checkout-btn {
width: 100%;
justify-content: center;
}
.checkout-action-row {
flex-direction: column;
align-items: stretch;
}
.checkout-step__header {
align-items: flex-start;
flex-direction: column;
}
.checkout-step__header-actions {
width: 100%;
justify-content: space-between;
}
}
/* build:end */
/* build:begin assets/css/pages/account-auth.css */
.account-auth-body {
--checkout-field-gap: 12px;
background: var(--storefront-page-gradient);
color: var(--text);
min-height: 100vh;
}
.account-auth-shell {
width: min(640px, calc(100% - 24px));
margin: clamp(20px, 9vh, 88px) auto 44px;
}
.account-auth-main {
display: block;
}
.account-auth-card {
display: grid;
gap: 16px;
padding: 24px;
}
.account-auth-phase {
display: grid;
gap: 14px;
}
.account-auth-phase[hidden] {
display: none !important;
}
/* Force exclusive PF/PJ field visibility when `hidden` is toggled by JS. */
.account-auth-card [hidden] {
display: none !important;
}
.account-auth-card .checkout-form-grid {
gap: var(--checkout-field-gap);
}
.account-auth-card .checkout-form-grid--cols {
column-gap: var(--checkout-field-gap);
row-gap: var(--checkout-field-gap);
}
.account-auth-phase__title {
margin: 0;
color: var(--text-alpha-96);
font-family: var(--space);
font-size: clamp(1.62rem, 3.1vw, 2rem);
font-weight: 700;
line-height: 1.15;
text-align: center;
}
.account-auth-subtitle {
margin: 0;
color: var(--text-alpha-72);
font-size: 0.92rem;
line-height: 1.45;
text-align: center;
}
.account-auth-form {
display: grid;
gap: 12px;
}
.account-auth-field,
.vf-field--account {
position: relative;
display: grid;
}
.account-auth-field__label,
.vf-field--account .vf-field__label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-alpha-45);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: none;
line-height: 1;
pointer-events: none;
padding: 0 4px;
background: transparent;
border-radius: var(--account-radius-micro);
transition: transform 0.18s ease, top 0.18s ease, color 0.18s ease, background 0.18s ease, font-size 0.18s ease;
}
.account-auth-field--floating .checkout-form-control,
.vf-field--account:not(.vf-field--fixed) .vf-field__control {
padding-top: 20px;
padding-bottom: 10px;
}
.account-auth-field--floating:focus-within .account-auth-field__label,
.account-auth-field--floating.is-filled .account-auth-field__label,
.vf-field--account.is-focused .vf-field__label,
.vf-field--account.is-filled .vf-field__label {
top: -1px;
transform: translateY(-50%);
color: var(--accent-hot-alpha-80);
background: var(--panel-input-bg);
font-size: 0.7rem;
}
.account-auth-field--fixed .account-auth-field__label,
.vf-field--account.vf-field--fixed .vf-field__label {
top: -1px;
transform: translateY(-50%);
color: var(--accent-hot-alpha-80);
background: var(--panel-input-bg);
font-size: 0.7rem;
}
.account-auth-field--floating select.checkout-form-control,
.account-auth-field--fixed select.checkout-form-control,
.vf-field--account select.vf-field__control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23aeb4c2' d='M6 8a1 1 0 0 1-.707-.293l-5-5A1 1 0 0 1 1.707 1.293L6 5.586l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5A1 1 0 0 1 6 8'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: calc(100% - 18px) 50%;
background-size: 12px 8px;
}
.account-auth-btn {
width: 100%;
min-height: 44px;
}
.account-auth-privacy {
margin: 0;
color: var(--text-alpha-66);
font-size: 0.8rem;
line-height: 1.4;
text-align: center;
}
.account-auth-code {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
}
.account-auth-digit {
width: 100%;
min-height: 52px;
border-radius: var(--account-radius-control);
border: 1px solid var(--surface-border);
background: var(--panel-input-bg);
color: var(--text-alpha-96);
text-align: center;
font-family: var(--space);
font-size: 1.45rem;
font-weight: 800;
line-height: 1;
padding: 10px 6px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.account-auth-digit:focus {
border-color: var(--accent-hot-alpha-55);
box-shadow: 0 0 0 2px var(--accent-hot-alpha-18);
outline: none;
}
.account-auth-link {
justify-self: start;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px dashed var(--surface-border);
border-radius: var(--account-radius-control);
background: transparent;
color: var(--text-alpha-88);
font-family: var(--space);
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
min-height: 40px;
padding: 10px 14px;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.account-auth-link--plain {
justify-self: center;
border-style: solid;
border-color: transparent;
background: transparent;
color: var(--text-alpha-78);
font-size: 0.86rem;
letter-spacing: 0.01em;
text-transform: none;
padding: 8px 0;
min-height: unset;
}
.account-auth-link--plain:hover {
color: var(--text-alpha-96);
background: transparent;
border-color: transparent;
}
.account-auth-links-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
justify-content: center;
}
.account-auth-links-row #accountOtpResendBtn {
width: min(240px, 100%);
justify-content: center;
font-variant-numeric: tabular-nums;
}
.account-auth-link:hover {
border-color: var(--surface-border-hover);
color: var(--text);
background: var(--surface-bg-soft);
}
.account-auth-link[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.account-auth-inline-text {
margin: 2px 0 0;
text-align: center;
color: var(--text-alpha-78);
font-size: 0.92rem;
line-height: 1.45;
}
.account-auth-recovery {
display: grid;
gap: 4px;
justify-items: center;
margin-top: 2px;
}
.account-auth-recovery__text {
margin: 0;
text-align: center;
color: var(--text-alpha-66);
font-size: 0.82rem;
line-height: 1.35;
}
.account-auth-recovery__link {
font-size: 0.86rem;
color: var(--text-alpha-90);
}
.account-auth-link-inline {
appearance: none;
border: 0;
padding: 0;
margin: 0;
background: transparent;
color: var(--text-alpha-90);
font-size: inherit;
line-height: inherit;
cursor: pointer;
text-decoration: none;
text-underline-offset: 3px;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.account-auth-link-inline:hover,
.account-auth-link-inline:focus-visible {
color: var(--text);
text-decoration: underline;
text-decoration-color: currentColor;
}
.account-auth-link-inline:focus-visible {
outline: none;
}
.account-auth-link-inline--center {
align-self: center;
}
.account-auth-alert {
border-radius: var(--account-radius-control);
border: 1px solid transparent;
padding: 11px 14px;
font-size: 0.86rem;
line-height: 1.4;
}
.account-auth-alert--error {
border-color: var(--storefront-semantic-danger-border);
background: var(--storefront-semantic-danger-bg);
color: var(--storefront-semantic-danger-text);
}
.account-auth-alert--success {
border-color: var(--storefront-semantic-success-border);
background: var(--storefront-semantic-success-bg);
color: var(--storefront-semantic-success-text);
text-align: center;
}
@media (max-width: 720px) {
.account-auth-shell {
width: min(100%, calc(100% - 20px));
margin-top: 16px;
}
.account-auth-card {
padding: 18px;
}
.account-auth-code {
gap: 8px;
}
.account-auth-digit {
min-height: 48px;
font-size: 1.2rem;
}
}
/* build:end */
/* build:begin assets/css/pages/account-shell.css */
.account-shell-body {
--account-shell-max: 1240px;
--checkout-field-gap: 12px;
background: var(--account-page-gradient);
color: var(--account-shell-text);
min-height: 100vh;
}
.account-shell {
width: min(var(--account-shell-max), calc(100% - 48px));
margin: 24px auto 44px;
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.account-card {
background: var(--account-card-bg);
border: 1px solid var(--account-card-border);
border-radius: var(--account-radius-card);
padding: 18px;
box-shadow: var(--account-card-shadow);
backdrop-filter: blur(8px);
}
.account-shell-body .checkout-topbar {
background: var(--account-topbar-bg);
border-bottom-color: var(--account-topbar-border);
}
.account-shell-body .checkout-topbar__brand {
color: var(--account-brand-color);
}
.account-shell-body .checkout-topbar__meta {
color: var(--account-meta-color);
}
.account-shell-body .checkout-topbar__meta strong {
color: var(--account-meta-strong-color);
}
.account-shell-body .checkout-topbar__actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-width: 0;
margin-left: auto;
}
.account-card h1,
.account-card h2,
.account-card h3 {
margin: 0;
color: var(--text-alpha-96);
}
.account-card p {
color: var(--text-alpha-78);
}
.account-menu {
display: grid;
gap: 10px;
}
.account-menu__identity {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.account-menu__avatar {
width: 44px;
height: 44px;
border-radius: var(--account-radius-avatar);
background: var(--surface-bg-soft);
border: 1px solid var(--surface-border);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--text-alpha-88);
font-weight: 800;
}
.account-menu__name {
display: inline-block;
color: var(--text-alpha-94);
font-size: 1.05rem;
font-weight: 700;
}
.account-menu__logout {
color: var(--text-alpha-62);
font-size: 0.78rem;
text-decoration: none;
}
.account-menu__logout:hover {
color: var(--text-alpha-88);
}
.account-menu__link {
border: 1px solid transparent;
background: transparent;
text-align: left;
color: var(--text-alpha-84);
text-decoration: none;
padding: 10px 10px;
border-radius: var(--account-radius-control-sm);
font-weight: 700;
font-size: 0.88rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.account-menu__link:hover {
border-color: var(--surface-border);
color: var(--text-alpha-94);
background: var(--surface-bg-soft);
}
.account-menu__link.is-active {
background: var(--storefront-action-primary-bg);
border-color: var(--storefront-action-primary-border);
color: var(--account-accent-button-text);
}
.account-menu__icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.account-menu__icon svg {
width: 18px;
height: 18px;
display: block;
}
.account-menu__text {
line-height: 1.2;
}
.account-main {
display: grid;
gap: 12px;
}
.account-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
gap: 12px;
}
.account-grid--account {
grid-template-areas:
"account-data account-address"
"account-info account-address";
}
.account-grid--account > .account-card:nth-child(1) {
grid-area: account-data;
}
.account-grid--account > .account-card:nth-child(2) {
grid-area: account-address;
align-self: start;
}
.account-grid--account > .account-card:nth-child(3) {
grid-area: account-info;
}
.account-info-list {
margin-top: 12px;
display: grid;
gap: 8px;
}
.account-info-row {
width: 100%;
display: grid;
grid-template-columns: minmax(120px, 0.48fr) minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
border-radius: var(--account-radius-control);
border: 1px solid var(--surface-border-subtle);
background: var(--surface-bg-soft);
color: var(--text-alpha-88);
font-size: 0.9rem;
text-align: left;
padding: 11px 12px;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
button.account-info-row {
appearance: none;
cursor: pointer;
}
.account-info-row__label {
color: var(--text-alpha-62);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.66rem;
font-weight: 800;
}
.account-info-row__value {
color: var(--text-alpha-92);
justify-self: end;
text-align: right;
font-weight: 600;
}
.account-info-row__arrow {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-alpha-50);
flex-shrink: 0;
transition: color 0.2s ease, transform 0.2s ease;
}
.account-info-row__arrow::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 1.8px solid currentColor;
border-right: 1.8px solid currentColor;
transform: rotate(45deg);
}
.account-info-row:not(.account-info-row--readonly):hover,
.account-info-row:not(.account-info-row--readonly):focus-visible,
.account-address-trigger:hover,
.account-address-trigger:focus-visible {
border-color: var(--storefront-action-primary-border);
background: var(--surface-bg-soft);
box-shadow: none;
outline: none;
}
.account-info-row:not(.account-info-row--readonly):hover .account-info-row__value,
.account-info-row:not(.account-info-row--readonly):hover .account-info-row__arrow,
.account-info-row:not(.account-info-row--readonly):focus-visible .account-info-row__value,
.account-info-row:not(.account-info-row--readonly):focus-visible .account-info-row__arrow,
.account-address-trigger:hover .account-info-row__arrow,
.account-address-trigger:focus-visible .account-info-row__arrow {
color: var(--storefront-action-primary-border);
}
.account-info-row:not(.account-info-row--readonly):hover .account-info-row__arrow,
.account-info-row:not(.account-info-row--readonly):focus-visible .account-info-row__arrow,
.account-address-trigger:hover .account-info-row__arrow,
.account-address-trigger:focus-visible .account-info-row__arrow {
transform: translateX(2px);
}
.account-info-row--readonly {
cursor: default;
}
.account-info-row--readonly .account-info-row__arrow {
display: none;
}
.account-address-trigger {
width: 100%;
appearance: none;
border: 1px solid var(--surface-border-subtle);
border-radius: var(--account-radius-control);
background: var(--surface-bg-soft);
color: var(--text-alpha-88);
text-align: left;
padding: 11px 12px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.account-card > .account-address-trigger {
margin-top: 12px;
}
.account-address-summary {
display: grid;
gap: 3px;
}
.account-address-summary strong {
color: var(--text-alpha-94);
font-size: 0.92rem;
}
.account-address-summary span {
color: var(--text-alpha-70);
font-size: 0.84rem;
}
.account-field-list {
display: grid;
gap: 10px;
margin-top: 14px;
}
.account-field {
display: grid;
gap: 6px;
}
.account-field__label {
color: var(--text-alpha-60);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.7rem;
font-weight: 700;
}
.account-feed {
margin-top: 12px;
}
.account-order-list {
display: grid;
gap: 10px;
}
.account-order-item {
border: 1px solid var(--surface-border-subtle);
border-radius: var(--account-radius-control);
padding: 12px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
background: var(--black-alpha-40);
}
.account-order-status {
display: inline-flex;
align-items: center;
width: fit-content;
border-radius: var(--account-radius-chip);
border: 1px solid transparent;
padding: 5px 9px;
font-weight: 800;
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.account-order-status.is-await {
border-color: var(--yellow-alpha-35);
background: var(--yellow-alpha-08);
color: var(--account-status-await-text);
}
.account-order-status.is-paid {
border-color: var(--success-border);
background: var(--success-soft);
color: var(--account-status-paid-text);
}
.account-order-status.is-cancel {
border-color: var(--danger-border);
background: var(--rose-alpha-12);
color: var(--account-status-cancel-text);
}
.account-order-meta {
display: grid;
gap: 5px;
font-size: 0.86rem;
color: var(--text-alpha-75);
}
.account-order-meta strong {
color: var(--text-alpha-94);
}
.account-order-btn {
border: 1px solid var(--storefront-action-primary-border);
border-radius: var(--account-radius-control-sm);
background: var(--storefront-action-primary-bg);
color: var(--account-accent-button-text);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 11px 14px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.account-order-btn:hover {
filter: brightness(1.05);
}
.account-shell-body .checkout-btn--primary,
.account-shell-body .checkout-payment-tab.is-active {
color: var(--account-accent-button-text);
}
.account-timeline-wrap {
margin-top: 14px;
overflow-x: auto;
overflow-y: visible;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: var(--surface-border) transparent;
padding: 16px 2px 24px;
}
.account-timeline {
display: flex;
gap: 0;
min-width: max-content;
overflow: visible;
padding: 0;
}
.account-timeline__step {
position: relative;
flex: 1 0 150px;
min-width: 150px;
display: grid;
justify-items: center;
gap: 8px;
padding: 16px 8px 0;
text-align: center;
font-size: 0.74rem;
color: var(--text-alpha-62);
overflow: visible;
}
.account-timeline__step::before {
content: "";
position: absolute;
top: 23px;
right: calc(50% + 7px);
width: calc(50% - 7px);
height: 2px;
border-radius: var(--account-radius-timeline);
background: var(--surface-border);
}
.account-timeline__step::after {
content: "";
position: absolute;
top: 23px;
left: calc(50% + 7px);
width: calc(50% - 7px);
height: 2px;
border-radius: var(--account-radius-timeline);
background: var(--surface-border);
}
.account-timeline__step:first-child::before,
.account-timeline__step:last-child::after {
display: none;
}
.account-timeline__dot {
position: relative;
width: 14px;
height: 14px;
border-radius: var(--account-radius-timeline);
margin: 0 auto;
border: 2px solid var(--surface-border);
box-sizing: border-box;
background: var(--panel);
z-index: 1;
}
.account-timeline__label {
line-height: 1.35;
font-weight: 600;
}
.account-timeline__step.is-pending .account-timeline__dot {
background: var(--surface-border-faint);
}
.account-timeline__step.is-done {
color: var(--text-alpha-88);
}
.account-timeline__step.is-done .account-timeline__dot {
border-color: var(--success);
background: var(--success);
}
.account-timeline__step.is-done::before,
.account-timeline__step.is-done::after {
background: var(--success);
}
.account-timeline__step.is-current {
color: var(--text-alpha-90);
}
.account-timeline__step.is-current .account-timeline__dot {
border-color: var(--surface-border);
background: var(--surface-bg-faint);
}
.account-timeline__step.is-current .account-timeline__dot::after {
content: "";
position: absolute;
inset: -16px;
border-radius: var(--account-radius-timeline);
background: var(--surface-border);
opacity: 0.38;
animation: account-timeline-pulse 1.8s ease-out infinite;
pointer-events: none;
}
.account-timeline__step.is-failed-current {
color: var(--text-alpha-90);
}
.account-timeline__step.is-failed-current::before,
.account-timeline__step.is-failed-current::after {
background: var(--surface-border);
}
.account-timeline__step.is-failed-current .account-timeline__dot {
border-color: var(--danger-border);
background: var(--danger-border);
box-shadow: 0 0 0 4px var(--rose-alpha-12);
}
@keyframes account-timeline-pulse {
0% {
transform: scale(0.4);
opacity: 0.5;
}
70% {
transform: scale(1.95);
opacity: 0;
}
100% {
transform: scale(1.95);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.account-timeline__step.is-current .account-timeline__dot::after {
animation: none;
opacity: 0;
}
}
.account-summary-table {
display: grid;
gap: 8px;
margin-top: 12px;
}
.account-summary-row {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 0.88rem;
color: var(--text-alpha-72);
}
.account-summary-row strong {
color: var(--text-alpha-94);
}
.account-summary-row--danger span,
.account-summary-row--danger strong {
color: var(--account-danger-text);
}
.account-summary-row--success span,
.account-summary-row--success strong {
color: var(--account-success-text);
}
.account-order-header {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
flex-wrap: wrap;
}
.account-order-header p {
margin: 6px 0 0;
}
.account-order-header .account-order-status {
margin-top: 8px;
}
.account-order-header__actions {
display: flex;
gap: 8px;
}
.order-payment-summary-card {
display: grid;
gap: 10px;
}
.order-payment-summary-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.order-payment-summary-card__head h2 {
font-size: 1.15rem;
}
.order-payment-summary-card__method {
color: var(--text-alpha-92);
font-size: 1rem;
font-weight: 700;
text-align: right;
}
.order-payment-summary-card__amount {
color: var(--text-alpha-96);
font-size: 1.9rem;
font-weight: 800;
}
.order-payment-pix {
display: grid;
gap: 10px;
justify-items: center;
}
.order-payment-expiry {
margin: 0;
color: var(--text-alpha-72);
font-size: 0.88rem;
text-align: center;
}
.order-payment-expiry.is-expired {
color: var(--account-danger-text);
}
.order-payment-qr {
width: 210px;
max-width: 100%;
border-radius: var(--account-radius-control);
border: 1px solid var(--surface-border);
background: #fff;
padding: 8px;
}
.order-payment-code {
width: min(100%, 640px);
border-radius: var(--account-radius-control);
border: 1px solid var(--surface-border);
background: var(--panel-input-bg);
color: var(--text-alpha-92);
padding: 12px;
font-size: 0.84rem;
line-height: 1.4;
}
.account-main .order-payment-code-stack {
width: min(100%, 760px);
margin: 0 auto;
display: grid;
justify-items: center;
gap: 10px;
}
.account-main .order-payment-code-stack .order-payment-code {
width: 100%;
margin-top: 0;
text-align: left;
}
.account-main .order-payment-code-stack .checkout-btn {
min-width: 168px;
}
.account-main .order-items {
display: grid;
gap: 10px;
margin-top: 12px;
}
.account-main .order-item {
display: grid;
grid-template-columns: 60px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
border: 1px solid var(--surface-border-subtle);
border-radius: var(--account-radius-control);
padding: 10px;
background: var(--black-alpha-40);
border-bottom: 1px solid var(--surface-border-subtle);
padding-bottom: 10px;
}
.account-main .order-item:last-child {
border-bottom: 1px solid var(--surface-border-subtle);
padding-bottom: 10px;
}
.account-main .order-item__thumb {
width: 60px;
height: 60px;
border-radius: var(--account-radius-media-sm);
overflow: hidden;
background: var(--surface-bg-soft);
border: 1px solid var(--surface-border-faint);
}
.account-main .order-item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.account-main .order-item .order-item__meta small,
.account-main .order-item .order-item__meta span {
color: var(--text-alpha-66);
}
.account-main .order-item .order-item__price-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 2px;
min-width: 120px;
text-align: right;
}
.account-main .order-item .order-item__price-before {
color: var(--text-alpha-50);
text-decoration: line-through;
font-size: 0.78rem;
line-height: 1.2;
}
.account-main .order-item .order-item__price-discount {
color: var(--account-danger-text);
font-size: 0.76rem;
line-height: 1.2;
font-weight: 700;
}
.account-main .order-item .order-item__price-now {
color: var(--text-alpha-96);
font-size: 1rem;
line-height: 1.25;
}
.account-main .order-item .order-item__price-now.is-bonus {
color: var(--account-bonus-text);
}
.account-main .order-item.is-bonus {
grid-template-columns: 60px minmax(0, 1fr) auto;
align-items: center;
padding-block: 8px;
}
.account-main .order-item.is-bonus .order-item__meta {
display: grid;
gap: 2px;
min-width: 0;
}
.account-main .order-item.is-bonus .order-item__price-stack {
min-width: 0;
}
.account-credits-balance {
margin-top: 14px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
border: 1px solid var(--surface-border-subtle);
border-radius: var(--account-radius-control);
padding: 12px;
background: var(--surface-bg-soft);
}
.account-credits-balance__label {
font-size: 0.82rem;
color: var(--text-alpha-64);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.account-credits-balance__value {
font-size: 1.28rem;
color: var(--account-status-paid-text);
}
.account-credits-list {
margin-top: 12px;
display: grid;
gap: 8px;
}
.account-credit-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
gap: 8px;
align-items: center;
border: 1px solid var(--surface-border-subtle);
border-radius: var(--account-radius-control);
padding: 10px;
background: var(--black-alpha-40);
}
.account-credit-badge {
border: 1px solid var(--surface-border);
border-radius: var(--account-radius-chip);
padding: 3px 7px;
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 800;
color: var(--text-alpha-82);
white-space: nowrap;
}
.account-credit-badge.is-cashback {
border-color: var(--storefront-accent-success-border);
background: var(--storefront-accent-success-bg);
color: var(--storefront-accent-success-text);
}
.account-credit-badge.is-manual {
border-color: var(--storefront-accent-success-border);
background: var(--storefront-accent-success-bg);
color: var(--storefront-accent-success-text);
}
.account-credit-badge.is-redemption {
border-color: var(--danger);
background: var(--danger);
color: #ffffff;
}
.account-credit-badge.is-adjust {
border-color: var(--storefront-accent-warning-border);
background: var(--storefront-accent-warning-bg);
color: var(--storefront-accent-warning-text);
}
.account-credit-desc,
.account-credit-date {
font-size: 0.82rem;
color: var(--text-alpha-70);
}
.account-credit-amount {
font-size: 0.86rem;
font-weight: 700;
color: var(--text-alpha-92);
}
.account-credits-load-more {
text-align: center;
margin-top: 1rem;
}
.account-feed__load-more {
text-align: center;
margin-top: 1rem;
}
.account-modal-backdrop {
position: fixed;
inset: 0;
background: var(--account-modal-backdrop-bg);
display: none;
align-items: center;
justify-content: center;
z-index: 120;
padding: 16px;
}
.account-modal-backdrop.is-open {
display: flex;
}
.account-modal {
width: min(520px, 100%);
background: var(--panel);
border-radius: var(--account-radius-modal);
border: 1px solid var(--surface-border);
padding: 20px;
display: grid;
gap: 14px;
color: var(--text-alpha-84);
}
.account-modal h3 {
margin: 0;
color: var(--text-alpha-94);
}
.account-modal__copy {
display: grid;
gap: 8px;
}
.account-modal__copy p {
margin: 0;
line-height: 1.4;
}
.account-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.account-modal__close {
appearance: none;
border: 1px solid var(--surface-border);
width: 30px;
height: 30px;
border-radius: var(--account-radius-modal-close);
background: var(--surface-bg-soft);
color: var(--text-alpha-88);
font-size: 1.25rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.account-modal__close:hover,
.account-modal__close:focus-visible {
border-color: var(--storefront-action-primary-border);
color: var(--storefront-action-primary-border);
background: var(--surface-bg-soft);
outline: none;
}
.account-modal-form {
display: grid;
gap: 12px;
}
.account-modal-name-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 12px;
row-gap: 12px;
}
.account-modal .checkout-form-grid--cols {
column-gap: var(--checkout-field-gap);
row-gap: var(--checkout-field-gap);
}
.account-modal__actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.account-modal select.checkout-form-control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23aeb4c2' d='M6 8a1 1 0 0 1-.707-.293l-5-5A1 1 0 0 1 1.707 1.293L6 5.586l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5A1 1 0 0 1 6 8'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: calc(100% - 18px) 50%;
background-size: 12px 8px;
}
.account-switch {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
width: fit-content;
}
.account-switch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.account-switch__track {
width: 36px;
height: 22px;
border-radius: var(--account-radius-switch-track);
background: var(--surface-bg-soft);
border: 1px solid var(--surface-border);
position: relative;
transition: border-color 0.2s ease, background 0.2s ease;
}
.account-switch__track::after {
content: "";
position: absolute;
left: 2px;
top: 2px;
width: 16px;
height: 16px;
border-radius: var(--account-radius-switch-thumb);
background: var(--text-alpha-72);
transition: transform 0.2s ease, background 0.2s ease;
}
.account-switch input:checked + .account-switch__track {
border-color: var(--storefront-accent-success-border);
background: var(--storefront-accent-success-bg);
}
.account-switch input:checked + .account-switch__track::after {
transform: translateX(14px);
background: var(--success);
}
.account-switch__label {
color: var(--text-alpha-84);
font-size: 0.9rem;
}
.account-modal-open {
overflow: hidden;
}
@media (max-width: 1080px) {
.account-shell {
width: min(960px, calc(100% - 20px));
grid-template-columns: 1fr;
}
.account-grid {
grid-template-columns: 1fr;
}
.account-grid--account {
grid-template-areas:
"account-data"
"account-address"
"account-info";
}
.account-timeline__step {
min-width: 160px;
}
.account-credit-row {
grid-template-columns: 1fr;
}
.account-order-detail-shell .account-order-header__actions {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.account-order-detail-shell .account-order-header__actions .checkout-btn {
width: 100%;
justify-content: center;
}
.account-order-detail-shell .order-payment-summary-card__head {
align-items: flex-start;
}
.account-order-detail-shell .account-summary-row {
align-items: flex-start;
}
.account-order-detail-shell .account-main .order-payment-code-stack {
width: 100%;
}
.account-order-detail-shell .account-main .order-item {
grid-template-columns: 60px minmax(0, 1fr);
}
.account-order-detail-shell .account-main .order-item .order-item__price-stack {
grid-column: 2 / 3;
align-items: flex-start;
text-align: left;
min-width: 0;
}
}
@media (max-width: 720px) {
.account-shell {
margin-top: 16px;
margin-bottom: 24px;
}
.account-card {
border-radius: var(--account-radius-card-mobile);
padding: 14px;
}
.account-shell-body .checkout-topbar__actions {
gap: 8px;
}
.account-order-item,
.order-item {
grid-template-columns: 1fr;
}
.account-order-btn {
width: 100%;
}
.account-info-row,
.account-address-trigger {
grid-template-columns: 1fr auto;
}
.account-info-row__label {
grid-column: 1 / 2;
}
.account-info-row__value {
grid-column: 1 / 2;
justify-self: start;
text-align: left;
}
.account-order-header__actions,
.account-modal__actions {
width: 100%;
display: grid;
}
.account-modal-name-grid {
grid-template-columns: 1fr;
}
.order-payment-summary-card__head {
flex-direction: column;
align-items: flex-start;
}
.order-payment-summary-card__method {
text-align: left;
}
.account-order-detail-body .checkout-topbar {
padding: 13px 14px;
}
.account-order-detail-body {
overflow-x: hidden;
}
.account-order-detail-shell {
width: calc(100% - 18px);
margin-top: 12px;
margin-bottom: 22px;
min-width: 0;
}
.account-order-detail-shell .account-main,
.account-order-detail-shell .account-card {
min-width: 0;
}
.account-order-detail-shell .account-order-status-card {
overflow: hidden;
}
.account-order-detail-shell .account-order-header {
gap: 12px;
}
.account-order-detail-shell .account-order-header h1 {
font-size: 1.45rem;
line-height: 1.15;
overflow-wrap: anywhere;
}
.account-order-detail-shell .account-order-header p {
margin-top: 4px;
line-height: 1.4;
}
.account-order-detail-shell .account-order-header__actions {
width: 100%;
grid-template-columns: 1fr;
}
.account-order-detail-shell .account-order-header__actions .checkout-btn {
width: 100%;
justify-content: center;
}
.account-order-detail-shell .order-payment-summary-card {
gap: 12px;
}
.account-order-detail-shell .order-payment-summary-card__head {
gap: 8px;
}
.account-order-detail-shell .order-payment-summary-card__amount {
font-size: 1.55rem;
line-height: 1.1;
}
.account-order-detail-shell .order-payment-pix {
justify-items: stretch;
}
.account-order-detail-shell .order-payment-pix h3,
.account-order-detail-shell .order-payment-pix .order-payment-expiry {
text-align: center;
}
.account-order-detail-shell .order-payment-qr {
width: min(210px, 100%);
justify-self: center;
}
.account-order-detail-shell .account-main .order-payment-code-stack {
width: 100%;
}
.account-order-detail-shell .account-main .order-payment-code-stack .checkout-btn {
width: 100%;
min-width: 0;
}
.account-order-detail-shell .account-timeline-wrap {
max-width: 100%;
margin-inline: 0;
padding: 10px 0 16px;
scroll-snap-type: x proximity;
}
.account-order-detail-shell .account-timeline__step {
min-width: 120px;
flex-basis: 120px;
padding: 12px 6px 0;
scroll-snap-align: start;
}
.account-order-detail-shell .account-timeline__label {
overflow-wrap: anywhere;
}
.account-order-detail-shell .account-summary-row {
flex-direction: column;
gap: 3px;
}
.account-order-detail-shell .account-summary-row strong {
width: 100%;
text-align: left;
}
.account-order-detail-shell .account-order-totals-card .account-summary-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
}
.account-order-detail-shell .account-order-totals-card .account-summary-row span {
min-width: 0;
overflow-wrap: anywhere;
}
.account-order-detail-shell .account-order-totals-card .account-summary-row strong {
width: auto;
text-align: right;
white-space: nowrap;
justify-self: end;
}
.account-order-detail-shell .account-main .order-items {
gap: 8px;
}
.account-order-detail-shell .account-main .order-item {
grid-template-columns: 56px minmax(0, 1fr);
align-items: start;
gap: 8px 10px;
padding: 10px;
}
.account-order-detail-shell .account-main .order-item__thumb {
width: 56px;
height: 56px;
}
.account-order-detail-shell .account-main .order-item .order-item__meta {
min-width: 0;
}
.account-order-detail-shell .account-main .order-item .order-item__meta strong {
display: block;
line-height: 1.3;
}
.account-order-detail-shell .account-main .order-item .order-item__price-stack {
grid-column: 1 / -1;
padding-left: 66px;
align-items: flex-start;
text-align: left;
min-width: 0;
}
.account-order-detail-shell .account-main .order-item .order-item__price-now {
font-size: 0.96rem;
}
.account-order-detail-shell .account-main .order-item.is-bonus {
grid-template-columns: 56px minmax(0, 1fr) auto;
align-items: center;
}
.account-order-detail-shell .account-main .order-item.is-bonus .order-item__price-stack {
grid-column: 3 / 4;
padding-left: 0;
align-items: flex-end;
text-align: right;
}
.account-order-detail-shell .order-payment-summary-card .account-order-header__actions {
width: 100%;
display: grid;
grid-template-columns: 1fr;
}
.account-order-detail-shell .order-payment-summary-card .account-order-header__actions .checkout-btn {
width: 100%;
justify-content: center;
}
}
/* build:end */
/* build:begin assets/css/pages/storefront-template.css */
.category-body,
.checkout-body,
.order-status-body,
.account-auth-body,
.legal-body {
background: var(--storefront-page-gradient);
color: var(--text);
}
.category-top,
.checkout-topbar {
background: var(--storefront-topbar-bg);
border-bottom-color: var(--storefront-topbar-border);
}
.checkout-topbar__brand {
color: var(--storefront-topbar-brand-color);
}
.checkout-topbar__meta {
color: var(--storefront-topbar-meta-color);
}
.checkout-topbar__meta strong {
color: var(--storefront-topbar-meta-strong-color);
}
.category-top {
background: var(--storefront-category-top-bg);
}
.cms-page-shell {
background: var(--storefront-cms-panel-bg);
}
.cms-page-content h1,
.cms-page-content h2,
.cms-page-content h3,
.cms-page-content strong,
.cms-page-shell .legal-header h1 {
color: var(--storefront-cms-heading-color);
}
.cms-page-content,
.cms-page-content p {
color: var(--storefront-cms-body-color);
}
.cms-page-content a {
color: var(--storefront-cms-link-color);
text-decoration-color: var(--storefront-cms-link-decoration);
}
.cms-page-content a:hover {
text-decoration-color: var(--storefront-cms-link-decoration-hover);
}
.cart-summary-table tr + tr {
border-top-color: var(--storefront-cart-summary-row-border, var(--surface-border-subtle));
}
.cart-summary-table .value.highlight {
text-shadow: var(--storefront-cart-summary-highlight-shadow, 0 0 10px var(--storefront-highlight-glow));
}
/* Shared visual contracts: storefront themes only define tokens. */
.selectors .selector select[data-payment] {
background-image: var(--storefront-payment-select-arrow);
}
.primary-action {
border-color: var(--storefront-primary-action-border);
background: var(--storefront-primary-action-bg);
color: var(--storefront-primary-action-text);
box-shadow: var(--storefront-primary-action-shadow);
}
.primary-action:hover {
box-shadow: var(--storefront-primary-action-shadow-hover);
}
.primary-action--red {
background: var(--storefront-primary-action-red-bg);
border-color: var(--storefront-primary-action-red-border);
color: var(--storefront-primary-action-red-text);
}
.primary-action--red:hover {
box-shadow: var(--storefront-primary-action-red-shadow-hover);
}
.checkout-alert--success {
color: var(--storefront-checkout-alert-success-text);
background: var(--storefront-checkout-alert-success-bg);
border-color: var(--storefront-checkout-alert-success-border);
}
.order-confirmation__lead h1 {
color: var(--storefront-order-confirmation-heading);
}
.cart-item--bonus {
border-color: var(--storefront-cart-bonus-border);
box-shadow: var(--storefront-cart-bonus-shadow);
}
body[data-storefront-template] .favorites-modal__card,
body[data-storefront-template] .merge-card {
border-radius: var(--storefront-radius-overlay);
}
body[data-storefront-template] .media-viewer,
body[data-storefront-template] .media-viewer img,
body[data-storefront-template] .media-viewer video,
body[data-storefront-template] .story-card,
body[data-storefront-template] .story-video-shell {
border-radius: var(--storefront-radius-media);
}
body[data-storefront-template] .story-product,
body[data-storefront-template] .checkout-card,
body[data-storefront-template] .cart-item,
body[data-storefront-template] .primary-action,
body[data-storefront-template] .notice-card,
body[data-storefront-template] .cart-sidebar__metrics {
border-radius: var(--storefront-radius-surface-lg);
}
body[data-storefront-template] .cart-flyer,
body[data-storefront-template] .favorites-item__thumb,
body[data-storefront-template] .cart-thumb,
body[data-storefront-template] .cart-empty,
body[data-storefront-template] .shipping-card,
body[data-storefront-template] .cart-summary-footer,
body[data-storefront-template] .terms-modal,
body[data-storefront-template] .color-thumb-card {
border-radius: var(--storefront-radius-surface);
}
body[data-storefront-template] .cart-toggle,
body[data-storefront-template] .story-product__thumb,
body[data-storefront-template] .checkout-preview-card,
body[data-storefront-template] .checkout-order-total,
body[data-storefront-template] .checkout-thumb,
body[data-storefront-template] .checkout-actions button,
body[data-storefront-template] .checkout-actions input[type='submit'] {
border-radius: var(--storefront-radius-surface-sm);
}
body[data-storefront-template] .selectors .selector select,
body[data-storefront-template] .selectors .selector input[type="number"],
body[data-storefront-template] .selectors .selector input[type="text"],
body[data-storefront-template] .selectors .selector input[type="email"],
body[data-storefront-template] .selectors .selector input[type="tel"],
body[data-storefront-template] .story-product__cta,
body[data-storefront-template] .pill,
body[data-storefront-template] .share-toast,
body[data-storefront-template] .cart-payment,
body[data-storefront-template] .checkout-address-map,
body[data-storefront-template] .checkout-form-control,
body[data-storefront-template] .checkout-btn,
body[data-storefront-template] .checkout-shipping-option,
body[data-storefront-template] .checkout-payment-tabs,
body[data-storefront-template] .checkout-payment-field,
body[data-storefront-template] .checkout-credits-panel,
body[data-storefront-template] .checkout-order-thumb,
body[data-storefront-template] .consent-item,
body[data-storefront-template] .whatsapp-hint,
body[data-storefront-template] .shipping-option,
body[data-storefront-template] .plp-card__cta {
border-radius: var(--storefront-radius-control);
}
body[data-storefront-template] .size-hint,
body[data-storefront-template] .qty-btn,
body[data-storefront-template] .qty-control input,
body[data-storefront-template] .media-thumb img,
body[data-storefront-template] .sg-modal-prod {
border-radius: var(--storefront-radius-control-sm);
}
body[data-storefront-template] .cart-flyer img,
body[data-storefront-template] .sg-modal-prod__img {
border-radius: var(--storefront-radius-compact);
}
body[data-storefront-template] .footer-payment-icon svg {
border-radius: var(--storefront-radius-micro);
}
body[data-storefront-template] .home-action,
body[data-storefront-template] .home-action--account,
body[data-storefront-template] .home-action__badge,
body[data-storefront-template] .cart-badge,
body[data-storefront-template] .plp-card__availability,
body[data-storefront-template] .checkout-step__status,
body[data-storefront-template] .checkout-step__index,
body[data-storefront-template] .story-progress__segment,
body[data-storefront-template] .saving-pill,
body[data-storefront-template] .order-status-body .order-item__bonus-pill {
border-radius: var(--storefront-radius-pill);
}
body[data-storefront-template] .favorites-modal__close,
body[data-storefront-template] .story-close,
body[data-storefront-template] .story-action,
body[data-storefront-template] .media-nav,
body[data-storefront-template] .color-carousel__nav,
body[data-storefront-template] .cart-sidebar__close,
body[data-storefront-template] .cart-item button[data-remove],
body[data-storefront-template] .bonus-balloon__close,
body[data-storefront-template] .live-activity__close,
body[data-storefront-template] .merge-close,
body[data-storefront-template] .whatsapp-fab,
body[data-storefront-template] .whatsapp-hint__close,
body[data-storefront-template] .terms-close,
body[data-storefront-template] .footer-social-icon {
border-radius: var(--storefront-radius-icon);
}
body[data-storefront-template] .cart-sidebar__close,
body[data-storefront-template] .cart-item button[data-remove],
body[data-storefront-template] .bonus-balloon__close,
body[data-storefront-template] .live-activity__close,
body[data-storefront-template] .merge-close,
body[data-storefront-template] .terms-close,
body[data-storefront-template] .favorites-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1;
padding: 0;
flex-shrink: 0;
appearance: none;
-webkit-appearance: none;
}
body[data-storefront-template] .media-thumb {
border-radius: var(--storefront-radius-control);
}
body[data-storefront-template] .color-thumb-card__img {
border-radius: var(--storefront-radius-surface-sm);
}
body[data-storefront-template] .cart-sidebar__drawer {
border-radius: var(--storefront-radius-drawer);
}
/* build:end */
/* build:begin assets/css/pages/storefront-theme-dark.css */
body[data-storefront-template="dark"] {
--storefront-radius-surface-xxl: 32px;
--storefront-radius-overlay: 28px;
--storefront-radius-media: 24px;
--storefront-radius-media-sm: 22px;
--storefront-radius-media-card: 20px;
--storefront-radius-chip: 24px;
--storefront-radius-surface-lg: 18px;
--storefront-radius-surface: 16px;
--storefront-radius-surface-sm: 14px;
--storefront-radius-control: 12px;
--storefront-radius-control-sm: 10px;
--storefront-radius-compact: 8px;
--storefront-radius-micro: 4px;
--storefront-radius-tight: 6px;
--storefront-radius-pill: 999px;
--storefront-radius-icon: 50%;
--storefront-radius-drawer: 0;
--storefront-radius-edge-card: 0;
--storefront-story-preview-radius: 50%;
--storefront-pdp-card-radius: 32px;
--storefront-pdp-payment-chip-radius: var(--storefront-radius-pill);
--storefront-pdp-cta-radius: 16px;
--storefront-pdp-share-radius: var(--storefront-radius-control);
--storefront-radius-modal-checkout: 32px;
--storefront-radius-checkout-summary: 20px;
--storefront-radius-bonus-bubble: 14px;
--storefront-radius-bonus-card: 16px;
--storefront-radius-bonus-sheet: 18px;
--storefront-radius-bonus-option: 12px;
--storefront-radius-bonus-option-icon: 10px;
--storefront-payment-select-arrow: url("data:image/svg+xml;utf8,");
--storefront-primary-action-bg: linear-gradient(120deg, var(--mint-alpha-22), var(--rose-alpha-22));
--storefront-primary-action-border: var(--white-alpha-10);
--storefront-primary-action-text: var(--white);
--storefront-primary-action-shadow: 0 14px 36px var(--black-alpha-35), 0 0 18px var(--rose-alpha-25);
--storefront-primary-action-shadow-hover: 0 18px 42px var(--black-alpha-40), 0 0 24px var(--mint-alpha-28);
--storefront-primary-action-red-bg: var(--accent-hot-alpha-18);
--storefront-primary-action-red-border: var(--accent-hot-alpha-50);
--storefront-primary-action-red-text: var(--white);
--storefront-primary-action-red-shadow-hover: 0 0 0px var(--accent-hot-alpha-35), 0 0 10px var(--accent-hot-alpha-25);
--storefront-checkout-alert-success-bg: var(--storefront-semantic-success-bg);
--storefront-checkout-alert-success-border: var(--storefront-semantic-success-border);
--storefront-checkout-alert-success-text: var(--storefront-semantic-success-text);
--storefront-order-confirmation-heading: var(--storefront-semantic-success-text);
--storefront-cart-bonus-border: var(--mint-alpha-40);
--storefront-cart-bonus-shadow: 0 12px 28px var(--black-alpha-45), 0 0 14px var(--mint-alpha-20);
--storefront-page-gradient: radial-gradient(circle at top, var(--bg-top-start), var(--bg) 45%);
--storefront-topbar-bg: var(--panel-cool-alpha-96);
--storefront-topbar-border: var(--surface-border-subtle);
--storefront-topbar-brand-color: var(--white);
--storefront-topbar-meta-color: var(--text-alpha-72);
--storefront-topbar-meta-strong-color: var(--text-alpha-92);
--storefront-section-bar-bg: rgba(12, 12, 16, 0.7);
--storefront-section-bar-border: var(--surface-border-faint);
--storefront-glass-border: var(--white-alpha-15);
--storefront-glass-border-strong: var(--white-alpha-25);
--storefront-glass-heavy: rgba(12, 12, 16, 0.7);
--storefront-glass-strong: rgba(8, 8, 14, 0.55);
--storefront-glass-medium: rgba(8, 8, 12, 0.55);
--storefront-glass-soft: rgba(8, 8, 12, 0.35);
--storefront-glass-nav: rgba(8, 8, 12, 0.65);
--storefront-card-heavy-bg: rgba(12, 12, 16, 0.7);
--storefront-card-muted-bg: rgba(15, 15, 22, 0.45);
--storefront-story-close-bg: rgba(14, 14, 20, 0.75);
--storefront-story-shell-bg: var(--black);
--storefront-category-top-bg: rgba(5, 5, 5, 0.9);
--storefront-category-placeholder-bg: linear-gradient(135deg, #2a2a2e, #1a1a1e);
--storefront-category-overlay-bg: linear-gradient(to top, var(--black-alpha-60) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);
--storefront-panel-dark-solid: #0b0b12;
--storefront-highlight-glow: rgba(16, 255, 200, 0.25);
--storefront-cms-panel-bg: linear-gradient(180deg, var(--panel-blue-alpha-64), var(--panel-blue-alpha-38));
--storefront-cms-heading-color: var(--white);
--storefront-cms-body-color: var(--text-alpha-94);
--storefront-cms-link-color: var(--neon-cyan);
--storefront-cms-link-decoration: var(--mint-alpha-40);
--storefront-cms-link-decoration-hover: var(--mint-alpha-90);
--storefront-cart-sidebar-bg: radial-gradient(circle at 20% 20%, var(--mint-alpha-05), transparent 32%),
radial-gradient(circle at 80% 30%, var(--rose-alpha-05), transparent 30%);
--storefront-cart-overlay-bg: var(--black-alpha-40);
--storefront-cart-drawer-bg: linear-gradient(160deg, var(--panel-cool-alpha-94), var(--panel-cool-alpha-90)),
radial-gradient(circle at 20% 10%, var(--mint-alpha-08), transparent 40%),
radial-gradient(circle at 80% 0%, var(--rose-alpha-08), transparent 38%);
--storefront-cart-drawer-border: var(--white-alpha-10);
--storefront-cart-drawer-shadow: -12px 0 50px var(--black-alpha-45);
--storefront-cart-drawer-blur: blur(8px);
--storefront-cart-action-hint: var(--champagne);
--storefront-shipping-card-bg: var(--surface-bg-soft);
--storefront-shipping-card-border: var(--surface-border-subtle);
--storefront-shipping-option-bg: var(--black-alpha-45);
--storefront-shipping-option-border: var(--surface-border-subtle);
--storefront-shipping-option-selected-bg: var(--surface-bg-soft);
--storefront-shipping-option-selected-border: var(--storefront-accent-success-border);
--storefront-shipping-option-price: var(--text-alpha-94);
--storefront-shipping-link: var(--storefront-accent-success-border);
--storefront-inline-link: var(--neon-mint);
--storefront-inline-link-border: var(--mint-alpha-50);
--storefront-choice-accent: var(--storefront-action-primary-border);
--storefront-plp-filter-mobile-bg: linear-gradient(180deg, rgba(11, 13, 19, 0.97), rgba(8, 10, 18, 0.96));
--storefront-plp-filter-mobile-border: rgba(255, 255, 255, 0.14);
--storefront-plp-filter-mobile-shadow: 0 -18px 42px rgba(0, 0, 0, 0.5);
--storefront-plp-filter-mobile-overlay-bg: rgba(0, 0, 0, 0.58);
--storefront-plp-filter-mobile-field-bg: #050507;
--storefront-plp-select-color-scheme: dark;
--storefront-plp-select-option-bg: #050507;
--storefront-plp-select-option-text: rgba(255, 255, 255, 0.96);
--storefront-warning-panel-bg: var(--yellow-alpha-06);
--storefront-warning-panel-border: var(--yellow-alpha-32);
--storefront-pagination-active-bg: var(--success-soft);
--storefront-pagination-active-border: var(--success-border-strong);
--storefront-pagination-active-text: var(--success);
--storefront-merge-overlay-bg: var(--black-alpha-85);
--storefront-merge-card-bg: var(--panel-ink);
--storefront-merge-card-border: var(--white-alpha-10);
--storefront-merge-card-shadow: 0 20px 60px var(--black-alpha-40);
--storefront-merge-close-bg: var(--surface-border-subtle);
--storefront-merge-close-border: transparent;
--storefront-merge-close-text: var(--text);
--storefront-merge-option-border: var(--white-alpha-15);
--storefront-merge-option-primary-bg: linear-gradient(120deg, var(--neon-yellow), var(--neon-pink));
--storefront-merge-option-primary-border: transparent;
--storefront-merge-option-primary-text: var(--bg);
--storefront-merge-option-secondary-bg: var(--white-alpha-05);
--storefront-merge-option-secondary-border: var(--white-alpha-15);
--storefront-merge-option-secondary-text: var(--text);
--storefront-consent-item-bg: var(--surface-bg-subtle);
--storefront-consent-item-border: var(--white-alpha-14);
--storefront-consent-item-shadow: 0 0 10px var(--black-alpha-25);
--storefront-consent-item-text: var(--text-snow);
--storefront-consent-link: var(--mint-link);
--storefront-consent-link-hover: var(--cyan-soft);
--storefront-terms-overlay-bg: radial-gradient(circle at 20% 20%, var(--cyan-glow-alpha-08), transparent 35%), var(--black-alpha-72);
--storefront-terms-modal-bg: linear-gradient(145deg, var(--panel-modal-alpha-95), var(--panel-modal-alt-alpha-90));
--storefront-terms-modal-border: var(--cyan-glow-alpha-25);
--storefront-terms-modal-shadow: 0 25px 80px var(--black-alpha-55), 0 0 25px var(--cyan-glow-alpha-35);
--storefront-terms-close-bg: var(--surface-border-subtle);
--storefront-terms-close-border: var(--surface-border-strong);
--storefront-terms-close-text: var(--white);
--storefront-terms-close-bg-hover: var(--white-alpha-14);
--storefront-terms-body-text: var(--text-ice);
--storefront-terms-heading: var(--mint-soft);
--storefront-terms-link: var(--mint-soft);
--storefront-action-primary-bg: var(--accent-hot-alpha-18);
--storefront-action-primary-border: var(--accent-hot-alpha-50);
--storefront-action-primary-text: var(--white);
--storefront-action-primary-shadow: 0 10px 24px var(--black-alpha-25);
--storefront-action-primary-shadow-hover: 0 12px 30px var(--black-alpha-32), 0 0 12px var(--accent-hot-alpha-20);
--storefront-action-solid-bg: var(--accent-hot-alpha-50);
--storefront-action-solid-border: var(--accent-hot-alpha-50);
--storefront-action-solid-text: var(--white);
--storefront-action-outline-bg: var(--surface-bg-soft);
--storefront-action-outline-border: var(--surface-border);
--storefront-action-outline-text: var(--text-alpha-90);
--storefront-action-outline-shadow-hover: 0 0 0 1px var(--white-alpha-10);
--storefront-pdp-size-pill-bg: var(--surface-bg-soft);
--storefront-pdp-size-pill-border: var(--surface-border);
--storefront-pdp-size-pill-border-hover: var(--surface-border-soft);
--storefront-pdp-size-pill-text: var(--text);
--storefront-pdp-size-pill-active-bg: var(--surface-bg-soft);
--storefront-pdp-size-pill-active-border: var(--storefront-action-primary-border);
--storefront-pdp-size-pill-active-text: var(--text);
--storefront-pdp-size-pill-disabled-bg: var(--surface-bg-soft);
--storefront-pdp-size-pill-disabled-border: var(--surface-border-faint);
--storefront-pdp-size-pill-disabled-text: var(--text-alpha-45);
--storefront-pdp-size-hint-bg: var(--surface-bg-subtle);
--storefront-pdp-size-hint-border: var(--storefront-pdp-size-pill-active-border);
--storefront-pdp-size-hint-text: var(--text-alpha-82);
--storefront-semantic-success-bg: var(--success-soft);
--storefront-semantic-success-border: var(--success-border);
--storefront-semantic-success-text: #c7ffe9;
--storefront-semantic-warning-bg: rgba(128, 84, 5, 0.26);
--storefront-semantic-warning-border: rgba(255, 206, 95, 0.5);
--storefront-semantic-warning-text: #ffe8ad;
--storefront-semantic-danger-bg: var(--rose-alpha-12);
--storefront-semantic-danger-border: var(--danger-border);
--storefront-semantic-danger-text: #ffd2db;
--storefront-accent-success-bg: var(--mint-alpha-12);
--storefront-accent-success-border: var(--mint-alpha-40);
--storefront-accent-success-text: var(--neon-mint);
--storefront-checkout-complete-border: var(--mint-alpha-35);
--storefront-checkout-complete-border-strong: var(--mint-alpha-50);
--storefront-checkout-complete-bg: linear-gradient(180deg, color-mix(in srgb, var(--surface-bg-soft) 82%, var(--mint) 18%), var(--surface-bg-soft));
--storefront-checkout-complete-label: var(--success);
--storefront-checkout-complete-index-bg: var(--mint-alpha-20);
--storefront-checkout-complete-index-text: var(--success);
--storefront-checkout-complete-shadow: 0 0 0 1px var(--mint-alpha-18), 0 16px 36px var(--black-alpha-35);
--storefront-accent-warning-bg: rgba(255, 235, 59, 0.18);
--storefront-accent-warning-border: rgba(255, 235, 59, 0.5);
--storefront-accent-warning-text: var(--white);
--storefront-status-online-bg: rgba(42, 193, 112, 0.2);
--storefront-status-online-border: rgba(42, 193, 112, 0.55);
--storefront-status-online-text: #65f1b0;
--storefront-success-inline-text: var(--neon-mint);
--storefront-status-offline-bg: rgba(255, 92, 92, 0.18);
--storefront-status-offline-border: rgba(255, 92, 92, 0.55);
--storefront-status-offline-text: #ff9a9a;
--storefront-control-button-bg: var(--accent-hot-alpha-08);
--storefront-control-button-border: var(--accent-hot-alpha-40);
--storefront-control-button-text: var(--accent-hot);
--storefront-control-button-border-hover: var(--accent-hot-alpha-60);
--storefront-control-button-shadow-hover: 0 0 4px var(--accent-hot-alpha-18);
--storefront-control-group-bg: var(--accent-hot-alpha-05);
--storefront-control-group-border: var(--accent-hot-alpha-35);
--storefront-control-input-bg: var(--black-alpha-50);
--storefront-control-input-border: var(--white-alpha-14);
--storefront-control-input-text: var(--white);
--storefront-control-divider: var(--white-alpha-10);
--storefront-cart-item-bg: rgba(5, 5, 5, 0.55);
--storefront-cart-item-border: var(--surface-border-subtle);
--storefront-cart-item-shadow: 0 12px 28px var(--black-alpha-45), 0 0 16px var(--champagne-alpha-08);
--storefront-cart-item-accent: linear-gradient(180deg, var(--neon-mint), var(--champagne));
--storefront-cart-summary-bg: linear-gradient(135deg, var(--white-alpha-03), var(--surface-border-faint));
--storefront-cart-summary-border: transparent;
--storefront-cart-summary-shadow: inset 0 0 0 1px var(--surface-border-faint), 0 0 18px var(--mint-alpha-08);
--storefront-cart-summary-row-border: rgba(255, 255, 255, 0.08);
--storefront-cart-summary-highlight: var(--neon-mint);
--storefront-cart-summary-highlight-shadow: 0 0 10px rgba(16, 255, 200, 0.25);
--storefront-cart-remove-bg: var(--surface-border-subtle);
--storefront-cart-remove-border: transparent;
--storefront-cart-remove-text: var(--danger);
--storefront-cart-remove-bg-hover: var(--surface-bg-soft);
--storefront-cart-remove-border-hover: var(--surface-border);
--storefront-cart-remove-text-hover: var(--danger);
--storefront-cart-remove-shadow: none;
--storefront-cart-remove-shadow-hover: none;
--storefront-pdp-share-bg: var(--surface-bg-soft);
--storefront-pdp-share-border: var(--storefront-action-outline-border);
--storefront-pdp-share-text: var(--text);
--storefront-pdp-share-bg-hover: var(--surface-bg-soft);
--storefront-pdp-share-border-hover: var(--storefront-action-primary-border);
--storefront-pdp-share-text-hover: var(--text);
--storefront-pdp-share-shadow: none;
--storefront-pdp-share-shadow-hover: none;
--storefront-cart-close-bg: var(--storefront-top-action-bg);
--storefront-cart-close-border: var(--storefront-top-action-border);
--storefront-cart-close-text: var(--storefront-top-action-text);
--storefront-cart-close-bg-hover: var(--surface-bg-soft);
--storefront-cart-close-border-hover: var(--storefront-action-primary-border);
--storefront-cart-close-text-hover: var(--storefront-action-primary-border);
--storefront-cart-close-shadow: var(--storefront-top-action-shadow-hover);
--storefront-top-action-bg: rgba(12, 12, 18, 0.8);
--storefront-top-action-border: var(--white-alpha-18);
--storefront-top-action-text: var(--white);
--storefront-top-action-label: var(--text-alpha-78);
--storefront-top-action-label-hover: var(--white);
--storefront-top-action-shadow-hover: 0 8px 18px var(--black-alpha-35);
--storefront-whatsapp-fab-bg: radial-gradient(circle at 30% 20%, var(--yellow-alpha-18), var(--panel-alpha-95));
--storefront-whatsapp-fab-border: var(--yellow-alpha-80);
--storefront-whatsapp-fab-shadow: 0 12px 30px var(--black-alpha-35), 0 0 18px var(--yellow-alpha-35);
--storefront-whatsapp-fab-shadow-hover: 0 16px 36px var(--black-alpha-40), 0 0 22px var(--yellow-alpha-45);
--storefront-whatsapp-fab-icon: var(--neon-yellow);
--storefront-whatsapp-hint-bg: var(--panel-alpha-90);
--storefront-whatsapp-pointer-bg: var(--panel-alpha-90);
--storefront-whatsapp-hint-border: var(--yellow-alpha-70);
--storefront-whatsapp-hint-text: var(--white-soft);
--storefront-whatsapp-close-bg: var(--panel-alpha-95);
--storefront-whatsapp-close-border: var(--yellow-alpha-70);
--storefront-whatsapp-close-text: var(--neon-yellow);
--storefront-whatsapp-close-bg-hover: var(--yellow-alpha-90);
--storefront-whatsapp-close-text-hover: var(--bg);
--storefront-overlay-card-bg: linear-gradient(135deg, var(--mint-alpha-08), var(--rose-alpha-06)), var(--black-alpha-88);
--storefront-overlay-card-border: var(--white-alpha-18);
--storefront-overlay-card-shadow: 0 18px 40px var(--black-alpha-50), 0 0 24px var(--mint-alpha-12);
--storefront-overlay-option-bg: linear-gradient(120deg, var(--mint-alpha-08), var(--rose-alpha-05));
--storefront-overlay-option-border: var(--white-alpha-14);
--storefront-overlay-option-icon-bg: var(--mint-alpha-12);
--storefront-overlay-option-icon-color: var(--neon-mint);
--storefront-overlay-cta-bg: linear-gradient(120deg, var(--mint-alpha-22), var(--rose-alpha-22));
--storefront-overlay-cta-border: var(--surface-border);
--storefront-overlay-cta-text: var(--white);
--storefront-overlay-ghost-bg: transparent;
--storefront-overlay-ghost-border: var(--neon-yellow);
--storefront-overlay-ghost-text: var(--neon-yellow);
--storefront-overlay-highlight-text: var(--neon-yellow);
--storefront-overlay-highlight-shadow: 0 0 12px var(--yellow-alpha-60);
--storefront-overlay-list-bg: var(--white-alpha-05);
--storefront-overlay-list-item-bg: var(--black-alpha-35);
--storefront-overlay-list-price: var(--neon-yellow);
--storefront-overlay-spotlight-filter: drop-shadow(0 0 12px var(--yellow-alpha-25));
--storefront-bonus-pill-bg: var(--mint-alpha-12);
--storefront-bonus-pill-border: var(--mint-alpha-40);
--storefront-bonus-pill-text: var(--neon-mint);
--storefront-bonus-balloon-bg: var(--black-alpha-82);
--storefront-bonus-balloon-border: var(--surface-border-stronger);
--storefront-bonus-balloon-text: var(--white);
--storefront-bonus-balloon-close-bg: var(--surface-border-subtle);
--storefront-bonus-balloon-close-border: var(--surface-border-strong);
--storefront-bonus-balloon-close-text: var(--white);
--storefront-live-activity-bg: var(--black-alpha-82);
--storefront-live-activity-border: var(--surface-border-stronger);
--storefront-live-activity-text: var(--white);
--storefront-live-activity-muted: var(--muted);
--storefront-live-activity-shadow: 0 10px 24px var(--black-alpha-45);
--storefront-live-activity-radius: 14px;
--storefront-live-activity-radius-mobile: 16px;
--storefront-live-activity-avatar-radius: 50%;
--storefront-live-activity-close-radius: 50%;
--storefront-live-activity-avatar-bg: var(--accent-hot-alpha-15);
--storefront-live-activity-avatar-border: var(--accent-hot-alpha-40);
--storefront-live-activity-avatar-text: var(--accent-hot);
--storefront-live-activity-close-bg: var(--black-alpha-40);
--storefront-live-activity-close-border: var(--surface-border-strong);
--storefront-live-activity-close-text: var(--white);
}
/* build:end */
/* build:begin assets/css/pages/storefront-theme-light.css */
body[data-storefront-template="light"] {
--storefront-radius-surface-xxl: 6px;
--storefront-radius-overlay: 6px;
--storefront-radius-media: 6px;
--storefront-radius-media-sm: 6px;
--storefront-radius-media-card: 6px;
--storefront-radius-chip: 6px;
--storefront-radius-surface-lg: 6px;
--storefront-radius-surface: 6px;
--storefront-radius-surface-sm: 6px;
--storefront-radius-control: 6px;
--storefront-radius-control-sm: 6px;
--storefront-radius-compact: 6px;
--storefront-radius-micro: 6px;
--storefront-radius-tight: 6px;
--storefront-radius-pill: 6px;
--storefront-radius-icon: 6px;
--storefront-radius-drawer: 6px;
--storefront-radius-edge-card: 6px;
--storefront-story-preview-radius: 6px;
--storefront-pdp-card-radius: 6px;
--storefront-pdp-payment-chip-radius: var(--storefront-radius-pill);
--storefront-pdp-cta-radius: 6px;
--storefront-pdp-share-radius: 6px;
--storefront-radius-modal-checkout: 6px;
--storefront-radius-checkout-summary: 6px;
--storefront-radius-bonus-bubble: 6px;
--storefront-radius-bonus-card: 6px;
--storefront-radius-bonus-sheet: 6px;
--storefront-radius-bonus-option: 6px;
--storefront-radius-bonus-option-icon: 6px;
--storefront-payment-select-arrow: url("data:image/svg+xml;utf8,");
--storefront-primary-action-bg: var(--storefront-accent-warning-bg);
--storefront-primary-action-border: var(--storefront-accent-warning-border);
--storefront-primary-action-text: var(--storefront-accent-warning-text);
--storefront-primary-action-shadow: 0 14px 30px rgba(20, 37, 63, 0.1);
--storefront-primary-action-shadow-hover: 0 18px 36px rgba(20, 37, 63, 0.14);
--storefront-primary-action-red-bg: var(--storefront-action-primary-bg);
--storefront-primary-action-red-border: var(--storefront-action-primary-border);
--storefront-primary-action-red-text: var(--storefront-action-primary-text);
--storefront-primary-action-red-shadow-hover: var(--storefront-action-primary-shadow-hover);
--storefront-checkout-alert-success-bg: var(--storefront-accent-success-bg);
--storefront-checkout-alert-success-border: var(--storefront-accent-success-border);
--storefront-checkout-alert-success-text: var(--storefront-accent-success-text);
--storefront-order-confirmation-heading: var(--storefront-accent-success-border);
--storefront-cart-bonus-border: var(--storefront-bonus-pill-border);
--storefront-cart-bonus-shadow: 0 12px 28px rgba(20, 37, 63, 0.1);
--bg: #eef3fa;
--bg-top-start: #f8fbff;
--panel: #ffffff;
--panel-alt: #f7fbff;
--panel-dark: #e8eef6;
--bg-night: #eef3fa;
--glass: rgba(255, 255, 255, 0.84);
--glass-border: rgba(116, 137, 162, 0.16);
--text: #1f2b3d;
--muted: #6a7a92;
--surface-border-subtle: rgba(116, 137, 162, 0.14);
--surface-border-faint: rgba(116, 137, 162, 0.1);
--surface-border: rgba(116, 137, 162, 0.24);
--surface-border-soft: rgba(116, 137, 162, 0.3);
--surface-border-strong: rgba(116, 137, 162, 0.22);
--surface-border-stronger: rgba(116, 137, 162, 0.24);
--surface-border-bright: rgba(116, 137, 162, 0.28);
--surface-border-hover: rgba(90, 112, 141, 0.34);
--surface-border-dashed: rgba(116, 137, 162, 0.22);
--surface-bg-subtle: rgba(255, 255, 255, 0.88);
--surface-bg-soft: rgba(244, 247, 252, 0.94);
--surface-bg-contrast: rgba(238, 243, 250, 0.92);
--surface-bg-hover: rgba(230, 237, 247, 0.95);
--text-alpha-96: rgba(24, 37, 58, 0.96);
--text-alpha-94: rgba(24, 37, 58, 0.94);
--text-alpha-92: rgba(24, 37, 58, 0.92);
--text-alpha-90: rgba(24, 37, 58, 0.9);
--text-alpha-88: rgba(24, 37, 58, 0.88);
--text-alpha-86: rgba(24, 37, 58, 0.86);
--text-alpha-85: rgba(24, 37, 58, 0.85);
--text-alpha-82: rgba(24, 37, 58, 0.82);
--text-alpha-80: rgba(24, 37, 58, 0.8);
--text-alpha-78: rgba(24, 37, 58, 0.78);
--text-alpha-75: rgba(24, 37, 58, 0.75);
--text-alpha-72: rgba(24, 37, 58, 0.72);
--text-alpha-70: rgba(24, 37, 58, 0.7);
--text-alpha-66: rgba(24, 37, 58, 0.66);
--text-alpha-65: rgba(24, 37, 58, 0.65);
--text-alpha-60: rgba(24, 37, 58, 0.6);
--text-alpha-58: rgba(24, 37, 58, 0.58);
--text-alpha-50: rgba(24, 37, 58, 0.5);
--text-alpha-45: rgba(24, 37, 58, 0.45);
--text-alpha-40: rgba(24, 37, 58, 0.4);
--text-alpha-35: rgba(24, 37, 58, 0.35);
--black-alpha-92: rgba(26, 40, 61, 0.92);
--black-alpha-88: rgba(26, 40, 61, 0.88);
--black-alpha-85: rgba(26, 40, 61, 0.85);
--black-alpha-82: rgba(26, 40, 61, 0.82);
--black-alpha-80: rgba(26, 40, 61, 0.8);
--black-alpha-72: rgba(26, 40, 61, 0.72);
--black-alpha-70: rgba(26, 40, 61, 0.7);
--black-alpha-60: rgba(26, 40, 61, 0.16);
--black-alpha-55: rgba(26, 40, 61, 0.14);
--black-alpha-50: rgba(26, 40, 61, 0.12);
--black-alpha-45: rgba(26, 40, 61, 0.1);
--black-alpha-40: rgba(26, 40, 61, 0.08);
--black-alpha-35: rgba(20, 37, 63, 0.1);
--black-alpha-32: rgba(20, 37, 63, 0.12);
--black-alpha-25: rgba(20, 37, 63, 0.08);
--black-alpha-18: rgba(20, 37, 63, 0.05);
--white-alpha-32: rgba(255, 255, 255, 0.32);
--white-alpha-25: rgba(255, 255, 255, 0.25);
--white-alpha-18: rgba(255, 255, 255, 0.18);
--white-alpha-16: rgba(255, 255, 255, 0.16);
--white-alpha-15: rgba(255, 255, 255, 0.15);
--white-alpha-14: rgba(255, 255, 255, 0.14);
--white-alpha-10: rgba(255, 255, 255, 0.1);
--white-alpha-05: rgba(255, 255, 255, 0.05);
--white-alpha-03: rgba(255, 255, 255, 0.03);
--panel-alpha-95: rgba(255, 255, 255, 0.95);
--panel-alpha-90: rgba(255, 255, 255, 0.92);
--panel-alpha-80: rgba(255, 255, 255, 0.84);
--panel-cool-alpha-96: rgba(255, 255, 255, 0.92);
--panel-cool-alpha-94: rgba(255, 255, 255, 0.94);
--panel-cool-alpha-90: rgba(255, 255, 255, 0.9);
--panel-cool-alt-alpha-90: rgba(246, 249, 253, 0.92);
--panel-blue-alpha-64: rgba(255, 255, 255, 0.88);
--panel-blue-alpha-38: rgba(244, 247, 252, 0.92);
--panel-modal-alpha-95: rgba(255, 255, 255, 0.96);
--panel-modal-alt-alpha-90: rgba(245, 248, 252, 0.94);
--badge-bg: rgba(255, 255, 255, 0.82);
--overlay-bg: rgba(8, 11, 14, 0.16);
--shadow: 0 18px 40px rgba(20, 37, 63, 0.08);
--panel-input-bg: #ffffff;
--text-soft: #2f4058;
--text-soft-alpha-92: rgba(47, 64, 88, 0.92);
--text-snow: #223453;
--white-off: #223453;
--accent-hot: #ff5ca6;
--accent-hot-alpha-90: rgba(255, 92, 166, 0.9);
--accent-hot-alpha-60: rgba(255, 92, 166, 0.6);
--accent-hot-alpha-55: rgba(255, 92, 166, 0.55);
--accent-hot-alpha-50: rgba(255, 92, 166, 0.5);
--accent-hot-alpha-45: rgba(255, 92, 166, 0.45);
--accent-hot-alpha-40: rgba(255, 92, 166, 0.4);
--accent-hot-alpha-35: rgba(255, 92, 166, 0.35);
--accent-hot-alpha-25: rgba(255, 92, 166, 0.25);
--accent-hot-alpha-20: rgba(255, 92, 166, 0.2);
--accent-hot-alpha-18: rgba(255, 92, 166, 0.18);
--accent-hot-alpha-15: rgba(255, 92, 166, 0.15);
--accent-hot-alpha-12: rgba(255, 92, 166, 0.12);
--accent-hot-alpha-08: rgba(255, 92, 166, 0.08);
--accent-hot-alpha-05: rgba(255, 92, 166, 0.05);
--neon-mint: #2ac595;
--mint-alpha-95: rgba(42, 197, 149, 0.95);
--mint-alpha-90: rgba(42, 197, 149, 0.9);
--mint-alpha-80: rgba(42, 197, 149, 0.8);
--mint-alpha-65: rgba(42, 197, 149, 0.65);
--mint-alpha-50: rgba(42, 197, 149, 0.5);
--mint-alpha-40: rgba(42, 197, 149, 0.4);
--mint-alpha-35: rgba(42, 197, 149, 0.35);
--mint-alpha-28: rgba(42, 197, 149, 0.28);
--mint-alpha-22: rgba(42, 197, 149, 0.22);
--mint-alpha-20: rgba(42, 197, 149, 0.2);
--mint-alpha-18: rgba(42, 197, 149, 0.18);
--mint-alpha-15: rgba(42, 197, 149, 0.15);
--mint-alpha-12: rgba(42, 197, 149, 0.12);
--mint-alpha-08: rgba(42, 197, 149, 0.08);
--mint-alpha-06: rgba(42, 197, 149, 0.06);
--mint-alpha-05: rgba(42, 197, 149, 0.05);
--success: #2ac595;
--success-soft: #dbfff1;
--success-border: rgba(123, 224, 183, 0.9);
--success-border-strong: rgba(42, 197, 149, 0.45);
--danger: #cc5a74;
--danger-accent: #b94d6c;
--danger-border: rgba(255, 152, 179, 0.5);
--storefront-topbar-bg: rgba(255, 255, 255, 0.88);
--storefront-topbar-border: rgba(116, 137, 162, 0.14);
--storefront-topbar-brand-color: #24344f;
--storefront-topbar-meta-color: rgba(73, 95, 123, 0.82);
--storefront-topbar-meta-strong-color: #24344f;
--storefront-section-bar-bg: rgba(255, 255, 255, 0.72);
--storefront-section-bar-border: rgba(116, 137, 162, 0.12);
--storefront-glass-border: rgba(116, 137, 162, 0.18);
--storefront-glass-border-strong: rgba(116, 137, 162, 0.22);
--storefront-glass-heavy: rgba(255, 255, 255, 0.78);
--storefront-glass-strong: rgba(255, 255, 255, 0.84);
--storefront-glass-medium: rgba(255, 255, 255, 0.9);
--storefront-glass-soft: rgba(244, 247, 252, 0.82);
--storefront-glass-nav: rgba(255, 255, 255, 0.92);
--storefront-card-heavy-bg: rgba(255, 255, 255, 0.82);
--storefront-card-muted-bg: rgba(255, 255, 255, 0.88);
--storefront-story-close-bg: rgba(255, 255, 255, 0.92);
--storefront-story-shell-bg: #edf2f9;
--storefront-category-top-bg: rgba(255, 255, 255, 0.92);
--storefront-category-placeholder-bg: linear-gradient(135deg, #f3f7fc, #e8eef6);
--storefront-category-overlay-bg: linear-gradient(to top, rgba(20, 37, 63, 0.58) 0%, rgba(20, 37, 63, 0.12) 48%, transparent 100%);
--storefront-panel-dark-solid: #ffffff;
--storefront-highlight-glow: rgba(31, 142, 99, 0.12);
--storefront-cms-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 247, 252, 0.96));
--storefront-cms-heading-color: #223453;
--storefront-cms-body-color: rgba(31, 43, 61, 0.92);
--storefront-cms-link-color: #147f68;
--storefront-cms-link-decoration: rgba(20, 127, 104, 0.32);
--storefront-cms-link-decoration-hover: rgba(20, 127, 104, 0.58);
--storefront-cart-sidebar-bg: none;
--storefront-cart-overlay-bg: rgba(20, 37, 63, 0.16);
--storefront-cart-drawer-bg: linear-gradient(180deg, #ffffff, #fbfdff);
--storefront-cart-drawer-border: #d9e4f1;
--storefront-cart-drawer-shadow: -12px 0 40px rgba(20, 37, 63, 0.12);
--storefront-cart-drawer-blur: none;
--storefront-cart-action-hint: #9c7215;
--storefront-shipping-card-bg: #ffffff;
--storefront-shipping-card-border: #118a59;
--storefront-shipping-option-bg: #ffffff;
--storefront-shipping-option-border: #d8e1ec;
--storefront-shipping-option-selected-bg: #f8fbff;
--storefront-shipping-option-selected-border: #118a59;
--storefront-shipping-option-price: #24344f;
--storefront-shipping-link: #118a59;
--storefront-inline-link: #118a59;
--storefront-inline-link-border: rgba(17, 138, 89, 0.35);
--storefront-plp-filter-mobile-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.96));
--storefront-plp-filter-mobile-border: rgba(216, 225, 236, 0.95);
--storefront-plp-filter-mobile-shadow: 0 -18px 42px rgba(20, 37, 63, 0.12);
--storefront-plp-filter-mobile-overlay-bg: rgba(20, 37, 63, 0.16);
--storefront-plp-filter-mobile-field-bg: #ffffff;
--storefront-plp-select-color-scheme: light;
--storefront-plp-select-option-bg: #ffffff;
--storefront-plp-select-option-text: #24344f;
--storefront-choice-accent: #ea3f90;
--storefront-warning-panel-bg: #fff6d8;
--storefront-warning-panel-border: #f0d37a;
--storefront-pagination-active-bg: #ea3f90;
--storefront-pagination-active-border: #ea3f90;
--storefront-pagination-active-text: #ffffff;
--storefront-merge-overlay-bg: rgba(20, 37, 63, 0.18);
--storefront-merge-card-bg: linear-gradient(180deg, #ffffff, #f8fbff);
--storefront-merge-card-border: #d9e4f1;
--storefront-merge-card-shadow: 0 18px 40px rgba(20, 37, 63, 0.12);
--storefront-merge-close-bg: #f8fbff;
--storefront-merge-close-border: #d9e4f1;
--storefront-merge-close-text: #6d7b91;
--storefront-merge-option-border: #d8e1ec;
--storefront-merge-option-primary-bg: #ea3f90;
--storefront-merge-option-primary-border: #ea3f90;
--storefront-merge-option-primary-text: #ffffff;
--storefront-merge-option-secondary-bg: #ffffff;
--storefront-merge-option-secondary-border: #d8e1ec;
--storefront-merge-option-secondary-text: #24344f;
--storefront-consent-item-bg: #ffffff;
--storefront-consent-item-border: #d9e4f1;
--storefront-consent-item-shadow: 0 10px 24px rgba(20, 37, 63, 0.08);
--storefront-consent-item-text: #223453;
--storefront-consent-link: #147f68;
--storefront-consent-link-hover: #118a59;
--storefront-terms-overlay-bg: rgba(20, 37, 63, 0.22);
--storefront-terms-modal-bg: linear-gradient(180deg, #ffffff, #f7fbff);
--storefront-terms-modal-border: #d9e4f1;
--storefront-terms-modal-shadow: 0 22px 44px rgba(20, 37, 63, 0.14);
--storefront-terms-close-bg: #f8fbff;
--storefront-terms-close-border: #d9e4f1;
--storefront-terms-close-text: #6d7b91;
--storefront-terms-close-bg-hover: #ffffff;
--storefront-terms-body-text: #24344f;
--storefront-terms-heading: #223453;
--storefront-terms-link: #147f68;
--storefront-action-primary-bg: #ea3f90;
--storefront-action-primary-border: #ea3f90;
--storefront-action-primary-text: #ffffff;
--storefront-action-primary-shadow: 0 12px 24px rgba(234, 63, 144, 0.18);
--storefront-action-primary-shadow-hover: 0 14px 28px rgba(234, 63, 144, 0.22);
--storefront-action-solid-bg: #ea3f90;
--storefront-action-solid-border: #ea3f90;
--storefront-action-solid-text: #ffffff;
--storefront-action-outline-bg: #ffffff;
--storefront-action-outline-border: #ea3f90;
--storefront-action-outline-text: #24344f;
--storefront-action-outline-shadow-hover: 0 0 0 1px rgba(234, 63, 144, 0.18);
--storefront-pdp-size-pill-bg: #ffffff;
--storefront-pdp-size-pill-border: #d8e1ec;
--storefront-pdp-size-pill-border-hover: #b9c8d9;
--storefront-pdp-size-pill-text: #24344f;
--storefront-pdp-size-pill-active-bg: #ffffff;
--storefront-pdp-size-pill-active-border: #ea3f90;
--storefront-pdp-size-pill-active-text: #24344f;
--storefront-pdp-size-pill-disabled-bg: #ffffff;
--storefront-pdp-size-pill-disabled-border: #d8e1ec;
--storefront-pdp-size-pill-disabled-text: #8b98ad;
--storefront-pdp-size-hint-bg: #ffffff;
--storefront-pdp-size-hint-border: #ea3f90;
--storefront-pdp-size-hint-text: #495f7b;
--storefront-semantic-success-bg: #dbfff1;
--storefront-semantic-success-border: #7be0b7;
--storefront-semantic-success-text: #177a63;
--storefront-semantic-warning-bg: #fff6d8;
--storefront-semantic-warning-border: #f0d37a;
--storefront-semantic-warning-text: #9c7215;
--storefront-semantic-danger-bg: #ffe3ea;
--storefront-semantic-danger-border: #ff98b3;
--storefront-semantic-danger-text: #b94d6c;
--storefront-accent-success-bg: #118a59;
--storefront-accent-success-border: #118a59;
--storefront-accent-success-text: #ffffff;
--storefront-checkout-complete-border: #118a59;
--storefront-checkout-complete-border-strong: #118a59;
--storefront-checkout-complete-bg: var(--surface-bg-soft);
--storefront-checkout-complete-label: #118a59;
--storefront-checkout-complete-index-bg: #118a59;
--storefront-checkout-complete-index-text: #ffffff;
--storefront-checkout-complete-shadow: var(--checkout-card-shadow);
--storefront-accent-warning-bg: #f0c640;
--storefront-accent-warning-border: #f0c640;
--storefront-accent-warning-text: #24344f;
--storefront-status-online-bg: #118a59;
--storefront-status-online-border: #118a59;
--storefront-status-online-text: #ffffff;
--storefront-success-inline-text: #118a59;
--storefront-status-offline-bg: #ea3f90;
--storefront-status-offline-border: #ea3f90;
--storefront-status-offline-text: #ffffff;
--storefront-control-button-bg: #ea3f90;
--storefront-control-button-border: #ea3f90;
--storefront-control-button-text: #ffffff;
--storefront-control-button-border-hover: #d83682;
--storefront-control-button-shadow-hover: 0 0 0 3px rgba(234, 63, 144, 0.12);
--storefront-control-group-bg: #ffffff;
--storefront-control-group-border: #d8e1ec;
--storefront-control-input-bg: #ffffff;
--storefront-control-input-border: #d8e1ec;
--storefront-control-input-text: #24344f;
--storefront-control-divider: #d8e1ec;
--storefront-cart-item-bg: #ffffff;
--storefront-cart-item-border: #dfe8f2;
--storefront-cart-item-shadow: 0 10px 24px rgba(20, 37, 63, 0.08);
--storefront-cart-item-accent: linear-gradient(180deg, #118a59, #f0c640);
--storefront-cart-summary-bg: linear-gradient(180deg, #ffffff, #f8fbff);
--storefront-cart-summary-border: #dbe6f0;
--storefront-cart-summary-shadow: 0 12px 26px rgba(20, 37, 63, 0.06);
--storefront-cart-summary-row-border: #e5edf6;
--storefront-cart-summary-highlight: #118a59;
--storefront-cart-summary-highlight-shadow: none;
--storefront-cart-remove-bg: #ffffff;
--storefront-cart-remove-border: #d8e1ec;
--storefront-cart-remove-text: #ea3f90;
--storefront-cart-remove-bg-hover: #fff3f8;
--storefront-cart-remove-border-hover: #ea3f90;
--storefront-cart-remove-text-hover: #d83682;
--storefront-cart-remove-shadow: 0 6px 14px rgba(20, 37, 63, 0.06);
--storefront-cart-remove-shadow-hover: 0 10px 18px rgba(234, 63, 144, 0.12);
--storefront-pdp-share-bg: var(--storefront-top-action-bg);
--storefront-pdp-share-border: var(--storefront-top-action-border);
--storefront-pdp-share-text: var(--storefront-top-action-text);
--storefront-pdp-share-bg-hover: var(--storefront-top-action-bg);
--storefront-pdp-share-border-hover: var(--text-alpha-40);
--storefront-pdp-share-text-hover: var(--storefront-top-action-text);
--storefront-pdp-share-shadow: none;
--storefront-pdp-share-shadow-hover: var(--storefront-top-action-shadow-hover);
--storefront-cart-close-bg: #ffffff;
--storefront-cart-close-border: #d8e1ec;
--storefront-cart-close-text: #24344f;
--storefront-cart-close-bg-hover: #fff3f8;
--storefront-cart-close-border-hover: #ea3f90;
--storefront-cart-close-text-hover: #ea3f90;
--storefront-cart-close-shadow: 0 8px 20px rgba(20, 37, 63, 0.08);
--storefront-top-action-bg: #ffffff;
--storefront-top-action-border: #d8e1ec;
--storefront-top-action-text: #24344f;
--storefront-top-action-label: #24344f;
--storefront-top-action-label-hover: #24344f;
--storefront-top-action-shadow-hover: 0 10px 24px rgba(20, 37, 63, 0.1);
--storefront-whatsapp-fab-bg: #ffffff;
--storefront-whatsapp-fab-border: #d9e4f1;
--storefront-whatsapp-fab-shadow: 0 14px 32px rgba(20, 37, 63, 0.12);
--storefront-whatsapp-fab-shadow-hover: 0 18px 38px rgba(20, 37, 63, 0.16);
--storefront-whatsapp-fab-icon: var(--brand-whatsapp);
--storefront-whatsapp-hint-bg: #ffffff;
--storefront-whatsapp-pointer-bg: #ffffff;
--storefront-whatsapp-hint-border: #d9e4f1;
--storefront-whatsapp-hint-text: #24344f;
--storefront-whatsapp-close-bg: #ffffff;
--storefront-whatsapp-close-border: #d9e4f1;
--storefront-whatsapp-close-text: #8b98ad;
--storefront-whatsapp-close-bg-hover: #f7fbff;
--storefront-whatsapp-close-text-hover: #24344f;
--storefront-overlay-card-bg: linear-gradient(135deg, #ffffff, #f8fbff);
--storefront-overlay-card-border: #d9e4f1;
--storefront-overlay-card-shadow: 0 18px 40px rgba(20, 37, 63, 0.12);
--storefront-overlay-option-bg: #f8fbff;
--storefront-overlay-option-border: #d9e4f1;
--storefront-overlay-option-icon-bg: #edf9f4;
--storefront-overlay-option-icon-color: #177a63;
--storefront-overlay-cta-bg: #ea3f90;
--storefront-overlay-cta-border: #ea3f90;
--storefront-overlay-cta-text: #ffffff;
--storefront-overlay-ghost-bg: #ffffff;
--storefront-overlay-ghost-border: #d8e1ec;
--storefront-overlay-ghost-text: #24344f;
--storefront-overlay-highlight-text: #118a59;
--storefront-overlay-highlight-shadow: none;
--storefront-overlay-list-bg: #f8fbff;
--storefront-overlay-list-item-bg: #ffffff;
--storefront-overlay-list-price: #118a59;
--storefront-overlay-spotlight-filter: drop-shadow(0 10px 18px rgba(20, 37, 63, 0.12));
--storefront-bonus-pill-bg: #118a59;
--storefront-bonus-pill-border: #118a59;
--storefront-bonus-pill-text: #ffffff;
--storefront-bonus-balloon-bg: #ffffff;
--storefront-bonus-balloon-border: #d9e4f1;
--storefront-bonus-balloon-text: #24344f;
--storefront-bonus-balloon-close-bg: #f8fbff;
--storefront-bonus-balloon-close-border: #d9e4f1;
--storefront-bonus-balloon-close-text: #6d7b91;
--storefront-live-activity-bg: #ffffff;
--storefront-live-activity-border: #d9e4f1;
--storefront-live-activity-text: #24344f;
--storefront-live-activity-muted: #6d7b91;
--storefront-live-activity-shadow: 0 14px 32px rgba(20, 37, 63, 0.12);
--storefront-live-activity-radius: 6px;
--storefront-live-activity-radius-mobile: 6px;
--storefront-live-activity-avatar-radius: 6px;
--storefront-live-activity-close-radius: 6px;
--storefront-live-activity-avatar-bg: #ffe3ea;
--storefront-live-activity-avatar-border: #ea3f90;
--storefront-live-activity-avatar-text: #ea3f90;
--storefront-live-activity-close-bg: #f8fbff;
--storefront-live-activity-close-border: #d9e4f1;
--storefront-live-activity-close-text: #6d7b91;
}
/* build:end */
/* build:begin assets/css/pages/account-theme-dark.css */
.account-shell-body[data-storefront-template="dark"],
.account-shell-body:not([data-storefront-template])[data-account-theme="dark"],
.account-shell-body:not([data-storefront-template]):not([data-account-theme]),
.account-auth-body[data-storefront-template="dark"],
.account-auth-body:not([data-storefront-template]) {
--account-radius-card: 18px;
--account-radius-card-mobile: 14px;
--account-radius-control: 12px;
--account-radius-control-sm: 10px;
--account-radius-chip: 999px;
--account-radius-avatar: 999px;
--account-radius-icon: 999px;
--account-radius-modal: 16px;
--account-radius-modal-close: 9px;
--account-radius-media: 12px;
--account-radius-media-sm: 10px;
--account-radius-switch-track: 999px;
--account-radius-switch-thumb: 999px;
--account-radius-timeline: 999px;
--account-radius-micro: 6px;
}
.account-shell-body[data-storefront-template="dark"],
.account-shell-body:not([data-storefront-template])[data-account-theme="dark"],
.account-shell-body:not([data-storefront-template]):not([data-account-theme]) {
--account-page-gradient: radial-gradient(circle at top, #11121a, var(--bg) 45%);
--account-shell-text: var(--text);
--account-card-bg: var(--surface-bg-subtle);
--account-card-border: var(--surface-border-subtle);
--account-card-shadow: 0 16px 40px var(--black-alpha-35);
--account-topbar-bg: var(--panel-cool-alpha-96);
--account-topbar-border: var(--surface-border-subtle);
--account-brand-color: var(--white);
--account-meta-color: var(--text-alpha-72);
--account-meta-strong-color: var(--text-alpha-92);
--account-accent-button-text: var(--white);
--account-status-await-text: #ffe7aa;
--account-status-paid-text: #c7ffe9;
--account-status-cancel-text: #ffd2db;
--account-danger-text: #ff7b8f;
--account-success-text: #4bffa8;
--account-bonus-text: #4bffa8;
--account-bonus-pill-text: #bfffe5;
--account-manual-text: #bcfff0;
--account-modal-backdrop-bg: rgba(8, 11, 14, 0.74);
--customer-theme-toggle-border: var(--surface-border);
--customer-theme-toggle-surface: var(--surface-bg-subtle);
--customer-theme-toggle-shadow: 0 10px 24px var(--black-alpha-25);
--customer-theme-toggle-hover-shadow: 0 12px 28px var(--black-alpha-25);
--customer-theme-toggle-track-border: var(--surface-border);
--customer-theme-toggle-track-bg: var(--surface-bg-soft);
--customer-theme-toggle-thumb-bg: var(--white);
--customer-theme-toggle-thumb-shadow: 0 4px 12px var(--black-alpha-25);
--customer-theme-toggle-icon-muted: var(--text-alpha-60);
--customer-theme-toggle-icon-sun: var(--champagne);
--customer-theme-toggle-icon-moon: var(--text-alpha-96);
--customer-theme-toggle-focus: var(--accent-hot-alpha-50);
--customer-theme-toggle-focus-ring: var(--accent-hot-alpha-12);
--bg: #050505;
--panel: #0b0b0f;
--panel-alt: #0b0b10;
--panel-dark: #060608;
--bg-night: #0c0f12;
--glass: rgba(12, 15, 18, 0.82);
--glass-border: rgba(255, 255, 255, 0.12);
--text: #f5f5f7;
--muted: #9ea1b7;
--surface-border-subtle: rgba(255, 255, 255, 0.08);
--surface-border-faint: rgba(255, 255, 255, 0.06);
--surface-border: rgba(255, 255, 255, 0.12);
--surface-border-soft: rgba(255, 255, 255, 0.3);
--surface-border-strong: rgba(255, 255, 255, 0.2);
--surface-border-stronger: rgba(255, 255, 255, 0.22);
--surface-border-bright: rgba(255, 255, 255, 0.24);
--surface-border-hover: rgba(255, 255, 255, 0.38);
--surface-border-dashed: rgba(255, 255, 255, 0.18);
--surface-bg-subtle: rgba(255, 255, 255, 0.02);
--surface-bg-soft: rgba(255, 255, 255, 0.04);
--surface-bg-contrast: rgba(255, 255, 255, 0.06);
--surface-bg-hover: rgba(255, 255, 255, 0.08);
--text-alpha-96: rgba(255, 255, 255, 0.96);
--text-alpha-94: rgba(255, 255, 255, 0.94);
--text-alpha-92: rgba(255, 255, 255, 0.92);
--text-alpha-90: rgba(255, 255, 255, 0.9);
--text-alpha-88: rgba(255, 255, 255, 0.88);
--text-alpha-86: rgba(255, 255, 255, 0.86);
--text-alpha-85: rgba(255, 255, 255, 0.85);
--text-alpha-80: rgba(255, 255, 255, 0.8);
--text-alpha-78: rgba(255, 255, 255, 0.78);
--text-alpha-75: rgba(255, 255, 255, 0.75);
--text-alpha-72: rgba(255, 255, 255, 0.72);
--text-alpha-70: rgba(255, 255, 255, 0.7);
--text-alpha-65: rgba(255, 255, 255, 0.65);
--text-alpha-60: rgba(255, 255, 255, 0.6);
--text-alpha-50: rgba(255, 255, 255, 0.5);
--text-alpha-45: rgba(255, 255, 255, 0.45);
--text-alpha-40: rgba(255, 255, 255, 0.4);
--text-alpha-35: rgba(255, 255, 255, 0.35);
--black-alpha-40: rgba(0, 0, 0, 0.4);
--black-alpha-35: rgba(0, 0, 0, 0.35);
--black-alpha-32: rgba(0, 0, 0, 0.32);
--black-alpha-25: rgba(0, 0, 0, 0.25);
--black-alpha-18: rgba(0, 0, 0, 0.18);
--panel-cool-alpha-96: rgba(12, 15, 18, 0.96);
--panel-cool-alpha-94: rgba(12, 15, 18, 0.94);
--panel-cool-alpha-90: rgba(11, 13, 19, 0.9);
--panel-cool-alt-alpha-90: rgba(10, 12, 18, 0.9);
--panel-input-bg: #050507;
--success-soft: rgba(70, 252, 180, 0.08);
--danger-border: rgba(255, 83, 120, 0.4);
}
/* build:end */
/* build:begin assets/css/pages/account-theme-light.css */
.account-shell-body[data-storefront-template="light"],
.account-shell-body:not([data-storefront-template])[data-account-theme="light"],
.account-auth-body[data-storefront-template="light"] {
--account-radius-card: 6px;
--account-radius-card-mobile: 6px;
--account-radius-control: 6px;
--account-radius-control-sm: 6px;
--account-radius-chip: 6px;
--account-radius-avatar: 6px;
--account-radius-icon: 6px;
--account-radius-modal: 6px;
--account-radius-modal-close: 6px;
--account-radius-media: 6px;
--account-radius-media-sm: 6px;
--account-radius-switch-track: 6px;
--account-radius-switch-thumb: 6px;
--account-radius-timeline: 6px;
--account-radius-micro: 6px;
}
.account-shell-body[data-storefront-template="light"],
.account-shell-body:not([data-storefront-template])[data-account-theme="light"] {
--account-page-gradient: radial-gradient(circle at top, #f8fbff, #eef3fa 48%);
--account-shell-text: #1f2b3d;
--account-card-bg: rgba(255, 255, 255, 0.92);
--account-card-border: rgba(116, 137, 162, 0.16);
--account-card-shadow: 0 18px 40px rgba(20, 37, 63, 0.08);
--account-topbar-bg: rgba(255, 255, 255, 0.84);
--account-topbar-border: rgba(116, 137, 162, 0.14);
--account-brand-color: #24344f;
--account-meta-color: rgba(73, 95, 123, 0.82);
--account-meta-strong-color: #24344f;
--account-accent-button-text: #ffffff;
--account-status-await-text: #8f6211;
--account-status-paid-text: #0f7a4f;
--account-status-cancel-text: #b23e5d;
--account-danger-text: #cc5a74;
--account-success-text: #1f8e63;
--account-bonus-text: #20885f;
--account-bonus-pill-text: #167652;
--account-manual-text: #147f68;
--account-modal-backdrop-bg: rgba(8, 11, 14, 0.62);
--customer-theme-toggle-border: rgba(116, 137, 162, 0.18);
--customer-theme-toggle-surface: rgba(255, 255, 255, 0.95);
--customer-theme-toggle-shadow: 0 10px 24px rgba(20, 37, 63, 0.08);
--customer-theme-toggle-hover-shadow: 0 12px 28px rgba(20, 37, 63, 0.12);
--customer-theme-toggle-track-border: rgba(116, 137, 162, 0.16);
--customer-theme-toggle-track-bg: rgba(236, 242, 249, 0.96);
--customer-theme-toggle-thumb-bg: #ffffff;
--customer-theme-toggle-thumb-shadow: 0 4px 12px rgba(20, 37, 63, 0.12);
--customer-theme-toggle-icon-muted: rgba(73, 95, 123, 0.72);
--customer-theme-toggle-icon-sun: #ff7b39;
--customer-theme-toggle-icon-moon: #223453;
--customer-theme-toggle-focus: rgba(255, 0, 127, 0.38);
--customer-theme-toggle-focus-ring: rgba(255, 0, 127, 0.12);
--bg: #eef3fa;
--panel: #ffffff;
--panel-alt: #f8fbff;
--panel-dark: #e8eef6;
--bg-night: #eef3fa;
--glass: rgba(255, 255, 255, 0.82);
--glass-border: rgba(116, 137, 162, 0.16);
--text: #1f2b3d;
--muted: #6a7a92;
--surface-border-subtle: rgba(116, 137, 162, 0.14);
--surface-border-faint: rgba(116, 137, 162, 0.1);
--surface-border: rgba(116, 137, 162, 0.24);
--surface-border-soft: rgba(116, 137, 162, 0.3);
--surface-border-strong: rgba(116, 137, 162, 0.22);
--surface-border-stronger: rgba(116, 137, 162, 0.24);
--surface-border-bright: rgba(116, 137, 162, 0.28);
--surface-border-hover: rgba(90, 112, 141, 0.34);
--surface-border-dashed: rgba(116, 137, 162, 0.22);
--surface-bg-subtle: rgba(255, 255, 255, 0.82);
--surface-bg-soft: rgba(244, 247, 252, 0.94);
--surface-bg-contrast: rgba(238, 243, 250, 0.92);
--surface-bg-hover: rgba(230, 237, 247, 0.95);
--text-alpha-96: rgba(24, 37, 58, 0.96);
--text-alpha-94: rgba(24, 37, 58, 0.94);
--text-alpha-92: rgba(24, 37, 58, 0.92);
--text-alpha-90: rgba(24, 37, 58, 0.9);
--text-alpha-88: rgba(24, 37, 58, 0.88);
--text-alpha-86: rgba(24, 37, 58, 0.86);
--text-alpha-85: rgba(24, 37, 58, 0.85);
--text-alpha-80: rgba(24, 37, 58, 0.8);
--text-alpha-78: rgba(24, 37, 58, 0.78);
--text-alpha-75: rgba(24, 37, 58, 0.75);
--text-alpha-72: rgba(24, 37, 58, 0.72);
--text-alpha-70: rgba(24, 37, 58, 0.7);
--text-alpha-65: rgba(24, 37, 58, 0.65);
--text-alpha-60: rgba(24, 37, 58, 0.6);
--text-alpha-50: rgba(24, 37, 58, 0.5);
--text-alpha-45: rgba(24, 37, 58, 0.45);
--text-alpha-40: rgba(24, 37, 58, 0.4);
--text-alpha-35: rgba(24, 37, 58, 0.35);
--white-alpha-32: rgba(255, 255, 255, 0.32);
--white-alpha-25: rgba(255, 255, 255, 0.25);
--white-alpha-18: rgba(255, 255, 255, 0.18);
--white-alpha-16: rgba(255, 255, 255, 0.16);
--white-alpha-15: rgba(255, 255, 255, 0.15);
--white-alpha-14: rgba(255, 255, 255, 0.14);
--white-alpha-10: rgba(255, 255, 255, 0.1);
--white-alpha-05: rgba(255, 255, 255, 0.05);
--white-alpha-03: rgba(255, 255, 255, 0.03);
--black-alpha-40: rgba(238, 243, 250, 0.88);
--black-alpha-35: rgba(20, 37, 63, 0.1);
--black-alpha-32: rgba(20, 37, 63, 0.12);
--black-alpha-25: rgba(20, 37, 63, 0.08);
--black-alpha-18: rgba(20, 37, 63, 0.05);
--panel-cool-alpha-96: rgba(255, 255, 255, 0.88);
--panel-cool-alpha-94: rgba(255, 255, 255, 0.92);
--panel-cool-alpha-90: rgba(255, 255, 255, 0.9);
--panel-cool-alt-alpha-90: rgba(246, 249, 253, 0.92);
--panel-input-bg: #ffffff;
--success-soft: rgba(70, 252, 180, 0.1);
--success-border: rgba(70, 252, 180, 0.28);
--danger-border: rgba(255, 83, 120, 0.24);
}
.account-shell-body[data-storefront-template="light"] .account-order-status.is-await,
.account-shell-body:not([data-storefront-template])[data-account-theme="light"] .account-order-status.is-await {
border-color: var(--storefront-accent-warning-border);
background: var(--storefront-accent-warning-bg);
color: var(--storefront-accent-warning-text);
}
.account-shell-body[data-storefront-template="light"] .account-order-status.is-paid,
.account-shell-body:not([data-storefront-template])[data-account-theme="light"] .account-order-status.is-paid {
border-color: var(--storefront-accent-success-border);
background: var(--storefront-accent-success-bg);
color: var(--storefront-accent-success-text);
}
.account-shell-body[data-storefront-template="light"] .account-order-status.is-cancel,
.account-shell-body:not([data-storefront-template])[data-account-theme="light"] .account-order-status.is-cancel {
border-color: var(--danger);
background: var(--danger);
color: #ffffff;
}
/* build:end */