/* Modelo Essencial (VITRINE-ESSENCIAL §2 a §5; DESIGN-SYSTEM-2 §30; L14b): contagem
   regressiva, letreiro de benefícios, slideshow, vitrine em grade, card de loja,
   cabeçalho e rodapé do modelo e WhatsApp flutuante. Medidas iguais às da
   referência de layout, conferidas por tools/shot/ref.mjs (1440 e 390 px). Só
   tokens de app.css (o tema da loja dá as cores). Carrega quando o tema liga
   alguma opção do modelo ou a página é do page builder. */
:root{
  --color-ribbon:#e02424;--color-wa:#1a8f49;
}
/* destaque claro: o destaque misturado ao branco (gradientes, anéis e "% OFF") */
.lay-ess,.shop-card{--accent-light:color-mix(in srgb,var(--color-accent) 55%,rgb(255 255 255))}
/* grade de conteúdo do modelo: 1300 px com 16 px de respiro */
.lay-ess{--container:1300px;--gutter:16px}

/* ---------- G1 contagem regressiva (topo, fixa) ---------- */
.has-countdown{--cd-h:45px}
.cd-bar{position:sticky;top:0;z-index:var(--z-sticky);background:linear-gradient(135deg,var(--accent-light,var(--color-accent)) 0%,var(--color-accent-hover) 100%);color:var(--color-on-accent);line-height:normal}
.cd-in{display:flex;align-items:center;justify-content:center;gap:8px;max-width:none;height:var(--cd-h,45px);padding:8px 14px;overflow:hidden}
.cd-text{min-width:0;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;line-height:1.375;letter-spacing:1.5px;text-align:center;text-transform:uppercase}
.cd-dot{flex:none;font-size:16px;font-weight:700}
.cd-clock{flex:none;margin:0}
.cd-time{display:flex;align-items:center;gap:4px}
.cd-blk{display:flex;justify-content:center;width:36px}
.cd-val{font-size:20px;font-weight:700;line-height:20px;font-variant-numeric:tabular-nums;text-align:center}
.cd-sep{font-size:14px}
.cd-btn{flex:none;display:flex;align-items:center;justify-content:center;padding:4px 20px;border-radius:30px;background:var(--color-on-image);color:var(--accent-ink,var(--color-text));font-size:12px;font-weight:700;line-height:1.2}
.cd-btn:hover{background:color-mix(in srgb,var(--color-on-image) 90%,var(--color-on-image-ink))}
@media (max-width:767px){
  .cd-in{gap:6px;padding:4px 8px}
  .cd-text{font-size:12px;letter-spacing:.5px}
  .cd-time{gap:2px}.cd-blk{width:24px}.cd-val{font-size:16px;line-height:16px}
  .cd-btn{min-height:30px;padding:2px 12px;line-height:1;white-space:nowrap}
}
.has-countdown .site-header{top:var(--cd-h)}
.has-countdown .toolbar{top:calc(var(--cd-h) + var(--header-h) - 1px)}
@media (min-width:1024px){.has-countdown .buy,.has-countdown .filters.sheet,.has-countdown.is-wholesale .gallery{top:calc(var(--cd-h) + var(--header-h) + 24px)}}
html:has(.has-countdown){scroll-padding-top:calc(var(--header-h) + 60px)}

/* ---------- G2 cabeçalho do modelo ---------- */
.lay-ess{--header-h:43px}
.lay-ess .site-header{box-shadow:none;border-bottom:1px solid rgb(0 0 0/.1);line-height:normal}
.lay-ess .hdr{display:grid;grid-template-columns:20px 0 minmax(0,1fr) 60px;gap:0 20px;max-width:none;height:auto;min-height:42px;padding:8px 16px}
.lay-ess .hdr-left{grid-column:1}.lay-ess .brand{grid-column:3;justify-content:center}.lay-ess .hdr-right{grid-column:4}
.lay-ess .hdr-left,.lay-ess .hdr-right{gap:20px}
.lay-ess .hdr .icon-btn{width:20px;height:20px;padding:0;border-radius:0}
.lay-ess .hdr .icon-btn::after{content:"";position:absolute;inset:-12px}
.lay-ess .hdr .icon-btn .icon{width:20px;height:20px}
.lay-ess .brand img{height:26px;max-height:none}
.lay-ess .brand .logo{font-size:20px;line-height:26px;letter-spacing:.08em}
.lay-ess .acct-btn{display:none}
@media (min-width:1024px){
  .lay-ess{--header-h:61px}
  .lay-ess .hdr{display:flex;align-items:center;min-height:60px}
  .lay-ess .hdr-left{display:none}
  .lay-ess .brand{flex:none;justify-content:flex-start}
  .lay-ess .brand img{height:20px}
  .lay-ess .brand .logo{font-size:18px;line-height:20px}
  .lay-ess .main-nav{flex:1;justify-content:center;gap:0;height:auto;padding:0 16px;font-size:12px}
  .lay-ess .main-nav>.nav-item{display:inline-flex;align-items:center;padding:10px 12px}
  .lay-ess .main-nav>.nav-link{margin:10px 12px}
  .lay-ess .main-nav>:first-child{padding-left:0;margin-left:0}
  .lay-ess .nav-link{display:flex;align-items:center;gap:4px;padding:0 0 6px;border-bottom:3px solid transparent;font-weight:400;line-height:normal;letter-spacing:0;text-transform:uppercase;color:var(--accent-ink,var(--color-text));transition:border-color .25s}
  .lay-ess .nav-item:hover>.nav-link,.lay-ess .nav-link:hover,.lay-ess .nav-link[aria-current]{border-bottom-color:currentColor}
  .lay-ess .hdr-right{flex:none}
  .lay-ess .hdr-search{display:none}
  .lay-ess .search-btn,.lay-ess .acct-btn{display:inline-grid}
}

/* ---------- G3 faixa de benefícios em letreiro ---------- */
.mq{display:flex;align-items:center;height:42px;overflow:hidden;background:linear-gradient(135deg,var(--color-accent-hover),var(--accent-light,var(--color-accent)));color:var(--color-on-accent);font-size:12px;font-weight:600;line-height:12px;text-transform:uppercase}
.mq-track{display:flex;width:max-content;animation:mq 40s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-list{display:flex;margin:0;padding:0;list-style:none}
.mq-list li{display:flex;align-items:center;padding:0 45px;white-space:nowrap}
.mq-list li::after{content:"•";margin-left:45px;opacity:.3}
.mq-list .icon{width:16px;height:16px;margin-right:12px}
@keyframes mq{to{transform:translateX(-50%)}}
@media (max-width:767px){.mq{height:36px}.mq-list li{padding:0 25px}.mq-list li::after{margin-left:25px}}
@media (prefers-reduced-motion:reduce){.mq{overflow-x:auto;scrollbar-width:none}.mq-track{animation:none}.mq-list[aria-hidden]{display:none}}

/* ---------- H1 slideshow ---------- */
.ss{position:relative;background:var(--color-surface)}
.ss-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ss-track::-webkit-scrollbar{display:none}
.ss-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.ss-link{display:block;position:relative}
.ss-link:focus-visible{box-shadow:none;outline:3px solid var(--color-on-image);outline-offset:-6px}
.ss-slide img{display:block;width:100%;aspect-ratio:390/441;object-fit:cover}
@media (min-width:768px){.ss-slide img{aspect-ratio:8/3}}
.ss-copy{position:absolute;inset:auto 0 0;display:grid;gap:10px;justify-items:start;padding:96px var(--gutter) 48px;background:linear-gradient(to top,rgb(0 0 0/.6),rgb(0 0 0/.25) 60%,transparent);color:var(--color-on-image)}
.ss-title{font-family:var(--font-heading);font-size:var(--fs-h1);font-weight:var(--heading-weight,600);line-height:1.1;max-width:18ch;text-transform:var(--heading-case,none)}
.ss-text{font-size:var(--fs-sm);max-width:40ch}
@media (min-width:1024px){.ss-copy{padding:0 max(48px,calc((100vw - var(--container))/2 + var(--gutter))) 64px;inset:0 0 0 0;align-content:end;background:linear-gradient(to right,rgb(0 0 0/.5),transparent 60%)}}
.ss-arrow{position:absolute;top:50%;z-index:var(--z-raised);display:none;place-items:center;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-pop)}
.ss-arrow:hover{background:var(--color-surface)}
@media (min-width:1024px){.ss-arrow{display:grid}}
.ss-prev{left:16px}.ss-next{right:16px}
.ss-dots{position:absolute;left:0;right:0;bottom:8px;z-index:var(--z-raised);display:flex;justify-content:center;gap:2px}
.ss-dot{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none}
.ss-dot::before{content:"";width:8px;height:8px;border-radius:4px;background:rgb(255 255 255/.6);box-shadow:0 0 0 1px rgb(0 0 0/.3);transition:width .2s var(--ease)}
.ss-dot[aria-current]::before{width:20px;background:var(--color-on-image)}

/* ---------- trilho com setas (categorias em círculos) ---------- */
.rail-nav{position:relative}
.rail-arrow{position:absolute;top:calc(50% - 18px);z-index:var(--z-raised);display:none;place-items:center;width:30px;height:40px;padding:0;border:0;background:none;color:var(--color-text)}
.rail-arrow .icon{width:30px;height:30px;stroke-width:1.25}
@media (min-width:1024px){.rail-arrow{display:grid}}
.rail-prev{left:-16px}.rail-next{right:-16px}
@media (min-width:1400px){.rail-prev{left:-48px}.rail-next{right:-48px}}

/* ---------- H3 categorias em círculos (modelo) ---------- */
.lay-ess .section{padding-block:40px}
@media (min-width:1024px){.lay-ess .section{padding-block:56px}}
.lay-ess .cats-circles{padding-block:32px}
.lay-ess .sx-circles{justify-content:flex-start;gap:16px;margin:0 calc(var(--gutter)*-1) 0 0;padding:0;scroll-snap-type:x mandatory}
.lay-ess .sx-circle{display:flex;flex-direction:column;align-items:center;gap:12px;width:120px;font-size:14px;font-weight:700;line-height:normal;letter-spacing:0;text-transform:var(--cat-case,none);scroll-snap-align:start}
.lay-ess .sx-circle-ph{width:120px;height:120px;border:1px solid transparent;border-radius:50%;background:color-mix(in srgb,var(--color-accent) 12%,var(--color-bg))}
.lay-ess .sx-circle-ph img{object-position:50% 20%}
.lay-ess .sx-circle-name{width:100%;text-align:center}
@media (min-width:768px){
  .lay-ess .sx-circles{margin-right:0;overflow-x:auto}
  .lay-ess .sx-circle{width:200px}.lay-ess .sx-circle-ph{width:200px;height:200px}
}

/* ---------- H4 vitrine em grade ---------- */
.showcase.section,.lay-ess .showcase.section{padding-block:32px}
.sw-head{display:grid;gap:8px;justify-items:center;margin-bottom:32px;text-align:center}
.sw-eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink,var(--color-text))}
.sw-head h2{font-family:var(--font-heading);font-size:23px;font-weight:700;line-height:normal;letter-spacing:0;text-transform:none}
.grid-products.grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
@media (min-width:768px){.grid-products.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-products.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.showcase .more{display:flex;justify-content:center;margin-top:16px}
.showcase .more .btn{min-height:0;padding:11px 32px;border-radius:20px;font-size:16px;font-weight:600;line-height:18px;letter-spacing:0;text-transform:none}

/* ---------- card de loja (§5) ---------- */
.sc{display:flex;flex-direction:column;gap:0;margin-bottom:16px;border-radius:20px 20px 0 0;background:var(--color-bg);text-align:left;line-height:normal}
.sc-media{display:block}
.sc-info{display:flex;flex:1;flex-direction:column;padding:16px 8px 4px}
.sc-alt{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--photo-fit,cover);opacity:0;transition:opacity .25s var(--ease)}
@media (hover:hover){.sc:hover .sc-alt{opacity:1}}
.sc-ribbon{position:absolute;top:18px;right:-36px;width:140px;padding:5px 0;transform:rotate(45deg);background:var(--color-ribbon);color:var(--color-on-image);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.sc-tag{position:absolute;top:8px;left:8px;padding:4px 8px;background:var(--color-text);color:var(--color-bg);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sc.is-soldout .ph img{opacity:.7}
.sc-dots{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:0;padding:0 0 16px;list-style:none}
.sc-dots li{display:flex}
.sc-dot{position:relative;display:block;box-sizing:border-box;width:23px;height:23px;padding:3px;border:1px solid var(--accent-light,var(--color-border));border-radius:50%;background:var(--color-bg)}
.sc-dot::before{content:"";position:absolute;inset:-7px}
.sc-dot .dot{box-sizing:border-box;width:15px;height:15px;border:1px solid var(--accent-light,var(--color-border))}
.sc-dot .dot circle{stroke:none}
.sc-dot[aria-pressed="true"]{border-color:var(--accent-ink,var(--color-text))}
.sc-dot.is-unavailable .dot{opacity:.45}
.sc-dots .swatch-more{font-size:14px}
.sc-name{margin:0;font-family:var(--font-body);font-size:16px;font-weight:600;line-height:normal;letter-spacing:0;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-name a:hover{text-decoration:underline;text-underline-offset:3px}
.sc-price{margin:0 0 16px;font-variant-numeric:tabular-nums}
.sc-price>p{margin:0}
.sc-old{display:block;font-size:13.6px;color:var(--color-muted)}
.sc-now{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.sc-now b{padding:4px 0;font-size:16px;font-weight:700;color:var(--accent-ink,var(--color-text))}
.sc-now .from{margin-right:4px;font-size:var(--fs-xs);color:var(--color-muted)}
.sc-now .unit{margin-left:2px;font-size:var(--fs-xs);color:var(--color-muted)}
.sc-off{margin-left:8px;font-size:14px;font-weight:400;color:color-mix(in srgb,var(--accent-ink,var(--color-text)) 70%,var(--color-bg))}
.sc .sc-btn{width:100%;min-height:0;margin-top:auto;padding:12px;border:0;border-radius:20px;font-size:16px;font-weight:600;line-height:18px;letter-spacing:0;text-transform:none}
.sc .btn-secondary.sc-btn{padding:11px;border:1px solid currentColor}

/* ---------- G5 rodapé do modelo ---------- */
.ft-ess{margin-top:0;padding-block:24px;border-top:0;font-size:14px;line-height:normal}
.ft-ess .footer-grid{grid-template-columns:minmax(0,1fr);gap:0;margin:16px 0 24px}
.ft-ess .footer-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 24px;font-family:var(--font-body);font-size:14px;font-weight:700;line-height:normal;letter-spacing:0;text-transform:uppercase;color:var(--color-text);list-style:none}
.ft-ess summary::-webkit-details-marker{display:none}
.ft-ess summary .icon{display:none}
.ft-ess ul{gap:16px;color:var(--color-text)}
.ft-contact p{margin:0 0 16px}
.ft-contact ul{margin-bottom:24px}
.ft-ess .ft-social{display:flex;margin:0}
.ft-social a{position:relative;display:block;width:14px;height:17px;margin-right:24px;color:var(--color-text)}
.ft-social a::before{content:"";position:absolute;inset:-15px}
.ft-social .icon{width:14px;height:14px;stroke-width:2}
.ft-ess .legal{justify-content:flex-start;gap:4px 16px;margin:16px 0 0;padding:0;border:0;font-size:12px;color:var(--color-text)}
@media (max-width:767px){
  .ft-acc{margin:0 calc(var(--gutter)*-1)}
  .ft-acc>summary{min-height:57px;margin:0;padding:16px;border-bottom:1px solid var(--color-border);cursor:pointer}
  .ft-acc:first-child>summary{border-top:1px solid var(--color-border)}
  .ft-acc>summary .icon{display:block;width:20px;height:20px}
  .ft-acc[open]>summary .ft-plus,.ft-acc:not([open])>summary .ft-minus{display:none}
  .ft-acc ul{padding:16px}
  .ft-contact{padding-top:14px}
}
@media (min-width:768px){
  .ft-ess .footer-grid{grid-template-columns:1.5fr 1fr 1.3fr;column-gap:48px;margin-bottom:48px}
  .ft-acc>summary{pointer-events:none}
}

/* ---------- G6 barra inferior de navegação (só no celular) ---------- */
.bn{display:none}
@media (max-width:767px){
  .has-bn{--bn-h:70px;--bar-h:var(--bn-h);padding-bottom:calc(var(--bn-h) + env(safe-area-inset-bottom))}
  /* atacado: a barra de pedido fica logo acima da navegação, com folga para o botão em destaque */
  .has-bn.has-order-bar{--bar-h:calc(136px + var(--bn-h))}
  .has-bn .order-bar{bottom:calc(var(--bn-h) + env(safe-area-inset-bottom));padding-bottom:20px}
  .bn{position:fixed;inset:auto 0 0;z-index:var(--z-sticky);display:flex;align-items:flex-end;justify-content:space-around;box-sizing:border-box;height:calc(var(--bn-h) + env(safe-area-inset-bottom));padding:0 env(safe-area-inset-right) calc(8px + env(safe-area-inset-bottom)) env(safe-area-inset-left);border-top:1px solid var(--color-on-image);background:linear-gradient(135deg,var(--accent-light,var(--color-accent)) 0%,var(--color-accent-hover) 100%);box-shadow:0 -2px 15px rgb(0 0 0/.1);color:color-mix(in srgb,var(--color-on-accent) 95%,var(--color-accent))}
  .bn-item{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;height:44px;padding:0;border:0;background:none;color:inherit;font:400 var(--fs-2xs)/14px var(--font-body);text-align:center;white-space:nowrap;cursor:pointer}
  .bn-item:focus-visible{box-shadow:none;outline:2px solid var(--color-on-accent);outline-offset:-2px;border-radius:4px}
  .bn-ico{position:relative;display:block;width:20px;height:20px;margin-bottom:2px}
  .bn-ico .icon{display:block;width:20px;height:20px}
  .bn-badge,.bn-ico:has(.bn-badge[hidden])::after{position:absolute;top:-2px;left:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--color-on-image);border-radius:10px;background:var(--color-accent-hover);color:var(--color-on-accent);font-size:var(--fs-2xs);font-weight:800;line-height:1;transform:translateX(-50%)}
  .bn-ico:has(.bn-badge[hidden])::after{content:"0"} /* sacola vazia: "0", como na referência */
  .bn-main{bottom:5px;font-weight:700;color:var(--color-on-accent)}
  .bn-disc{position:absolute;bottom:20px;left:50%;display:grid;place-items:center;box-sizing:border-box;width:55px;height:55px;margin-left:-27.5px;border:4px solid var(--color-on-image);border-radius:50%;background:var(--color-accent-hover);color:var(--color-on-accent)}
  .bn-disc .icon{width:26px;height:26px;fill:currentColor;stroke-width:1}
  .has-bn .wa-fab{bottom:calc(var(--bar-h) + 12px + env(safe-area-inset-bottom))}
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){.bn-disc{transition:transform .15s var(--ease)}.bn-main:active .bn-disc{transform:scale(.94)}}

/* ---------- G4 WhatsApp flutuante ---------- */
.wa-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + var(--bar-h) + env(safe-area-inset-bottom));z-index:var(--z-sticky);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--color-wa);color:var(--color-on-image);box-shadow:0 0 8px 4px rgb(0 0 0/.05)}
.wa-fab::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--color-wa);animation:wa-pulse 2.2s ease-out infinite}
.wa-fab .icon{width:26px;height:26px;stroke-width:1.75}
@media (min-width:768px){.wa-fab{width:56px;height:56px}.wa-fab .icon{width:28px;height:28px}}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(1.45);opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-fab::before{display:none}}
body:has(.sticky-cta.show) .wa-fab{bottom:calc(84px + env(safe-area-inset-bottom))}

/* ---------- seleção rápida do card de loja (ADR-034 §3; DS-2 §32): janela de 1000 px no computador, folha de baixo no celular ---------- */
.qs{width:min(1000px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:16px;border:0;border-radius:0;background:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-modal);overflow:auto;overscroll-behavior:contain}
.qs::backdrop{background:var(--color-overlay)}
.qs[open]{animation:qs-in .2s var(--ease-in)}
@keyframes qs-in{from{opacity:0;transform:translateY(12px)}}
.qs-x{position:absolute;top:0;right:0;z-index:var(--z-raised);width:59px;height:59px;border-radius:0}
.qs-x .icon{width:27px;height:27px;stroke-width:1.25}
.qs-pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.qs-media{position:relative;min-width:0}
.qs-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.qs-track::-webkit-scrollbar{display:none}
.qs-track:focus-visible{box-shadow:inset var(--shadow-focus)}
.qs-ph{flex:0 0 100%;margin:0;scroll-snap-align:start}
.qs-dots{position:absolute;inset:auto 0 8px;display:flex;justify-content:center}
.qs-dot{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none}
.qs-dot::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--color-on-image) 60%,transparent);box-shadow:0 0 0 1px rgb(18 18 21/.18);transition:width .2s var(--ease)}
.qs-dot[aria-pressed="true"]::before{width:18px;background:var(--color-on-image)}
.qs-info{display:flex;flex-direction:column;gap:16px;min-width:0;padding-top:16px}
.qs-name{padding-right:48px;font-family:var(--font-body);font-size:23px;font-weight:400;line-height:28px;letter-spacing:0;text-transform:none}
.qs-buy{display:flex;flex-direction:column;gap:16px}
.qs-price{display:grid}
.qs-old{font-size:14px;line-height:17px;color:var(--color-muted)}
.qs-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.qs-now b{font-size:28px;font-weight:400;line-height:34px;font-variant-numeric:tabular-nums}
.qs-now .from{font-size:14px;color:var(--color-muted)}
.qs-form{display:flex;flex-direction:column;gap:16px}
.qs-opt{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.qs-label{padding:0;font-size:14px;line-height:17px;font-weight:400}
.qs-label b{font-weight:700;text-transform:uppercase}
.qs-colors{display:flex;flex-wrap:wrap;gap:12px}
.qs-sw{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:3px;border:1px solid var(--accent-light,var(--color-border-input));border-radius:50%;cursor:pointer}
.qs-sw .dot{display:block;width:30px;height:30px}
.qs-sw:has(input:checked){box-shadow:inset 0 0 0 3px var(--accent-light,var(--color-text))}
.qs-sw:has(input:focus-visible),.qs-sizes .size:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px}
.qs-sw.is-unavailable{opacity:.4}
.qs-sizes{display:flex;flex-wrap:wrap;gap:8px}
.qs-sizes .size{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 10px;border:1px solid color-mix(in srgb,var(--color-text) 30%,transparent);border-radius:8px;background:var(--color-bg);color:var(--color-text);font-size:14px;font-weight:400}
.qs-sizes .size:has(input:checked){background:color-mix(in srgb,var(--color-text) 10%,var(--color-bg));border-color:var(--color-text);color:var(--color-text)}
.qs-sizes .size.is-unavailable{background:var(--color-bg);opacity:.45;text-decoration:line-through;cursor:not-allowed}
.qs-sizes .size-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qs-form .hint:empty{display:none}
.qs-stock{display:flex;align-items:center;gap:6px;margin-top:-8px;font-size:14px;color:var(--color-muted)}
.qs-stock::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--color-success)}
.qs-stock.is-low{color:var(--color-warning-fg)}.qs-stock.is-low::before{background:var(--color-warning)}
.qs-actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;margin-top:8px}
.qs-actions .stepper{display:grid;grid-template-columns:40px 28px 40px;height:47px;border:1px solid color-mix(in srgb,var(--color-text) 30%,transparent);border-radius:4px;overflow:hidden}
.qs-actions .stepper button{width:40px;height:45px;font-size:16px}
.qs-actions .stepper .cell{width:28px;height:45px;border:0;background:none;font-size:14px}
.qs-cta.btn{min-height:46px;padding:0 28px;border-radius:20px;font-size:16px;font-weight:400;letter-spacing:0;text-transform:none}
.qs-more{align-self:flex-start;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.qs-wait .qs-ph{margin:0;height:auto;aspect-ratio:2/3}
.qs-fail{display:grid;gap:16px;padding:16px 48px 16px 0}
@media (max-width:767px){
  .qs{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;padding:4px 4px calc(16px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}
  .qs[open]{animation:qs-up .25s var(--ease-in)}
  .qs-x{top:10px;right:10px;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--color-bg) 85%,transparent)}
  .qs-pd{grid-template-columns:minmax(0,1fr);gap:0}
  .qs-media{overflow:hidden;border-radius:16px 16px 0 0}
  .qs-ph{aspect-ratio:auto;height:min(52dvh,538px)}
  .qs-wait .qs-ph{height:52dvh}
  .qs-info{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px 12px;padding:8px 12px 0}
  .qs-name{padding-right:0}
  .qs-buy{display:contents}
  .qs-price{justify-items:end;text-align:right}
  .qs-form,.qs-buy>.avail,.qs-buy>.btn,.qs-more,.qs-info>.note{grid-column:1/-1}
  .qs-form{gap:12px}
  .qs-fail{padding:56px 12px 8px}
}
@keyframes qs-up{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.qs[open]{animation:none}}