/* Aliases onto the shared TL75 design system (design-system.css) so the
   storefront, dashboard and admin draw from the same brand tokens. */
:root{--yellow:var(--tl-brand-yellow);--ink:var(--tl-text-primary);--paper:var(--tl-bg-surface);--muted:var(--tl-text-secondary);--line:var(--tl-border)}
/* === IMAGENS PERFEITAS - Top de Linha: sem blur, sem grayscale, sem fosco === */
.product-photo img,.hero-photo img,.brand-panel img,.brand img,.selection-row img{filter:none!important;opacity:1!important;-webkit-filter:none!important;mix-blend-mode:normal!important;backdrop-filter:none!important;image-rendering:auto}
.product-photo img{image-rendering:-webkit-optimize-contrast}
.hero-photo,.product-photo{background:#f1f1f1}
.hero-photo>img,.product-photo img{width:100%;height:100%;object-fit:cover;display:block}
.map-panel iframe{filter:none!important;opacity:1!important}
.brand img,.brand-panel img{max-width:150px;max-height:150px;width:auto;height:auto;object-fit:contain}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:78px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--tl-font-sans)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 4px rgba(255,202,5,.45)}img{max-width:100%;display:block}button{border:0}h1,h2,h3,p,figure{margin:0}h1,h2{letter-spacing:-.055em;line-height:1.04}h2{font-size:clamp(36px,4vw,56px)}em{font-style:normal}h1{font-size:clamp(44px,5.6vw,74px);font-weight:900;letter-spacing:-.045em;line-height:.92;text-wrap:balance}h1 em{display:inline-block;background:var(--yellow);padding:2px 10px 6px;margin-top:8px;line-height:1;transform:rotate(-1deg);box-shadow:4px 0 var(--yellow),-4px 0 var(--yellow);border-radius:2px}.wrap{width:min(1280px,88%);margin-inline:auto}.topline{padding:7px 5%;display:flex;justify-content:space-between;background:var(--tl-brand-ink);color:#fff;font-size:11px;letter-spacing:1px}.header{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 5%;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(8px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:9px;flex-shrink:0}.brand img{border-radius:50%;width:38px;height:38px}.brand>span{font-size:14px;font-weight:900;letter-spacing:-.4px;line-height:1.1}.brand small{display:block;font-size:8px;letter-spacing:1.4px;margin-top:3px}.header nav{display:flex;gap:22px;font-size:13px}.header nav a:hover,.link:hover{text-decoration:underline;text-underline-offset:5px}.header-actions{display:flex;gap:14px;align-items:center}.bag{background:transparent;display:inline-flex;align-items:center;gap:0;padding:6px 2px;white-space:nowrap;position:relative}.bag svg{flex-shrink:0}.bag span{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;background:var(--yellow);border-radius:var(--tl-radius-full);font-weight:800;font-size:11px;line-height:1;position:absolute;top:-4px;right:-10px;box-shadow:0 1px 4px #0002}.bag span:empty{display:none}#menu{display:none;background:transparent;font-size:22px}.hero{display:grid;grid-template-columns:1.2fr .8fr;position:relative;gap:4%;padding-block:36px 42px;align-items:center}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;margin-bottom:24px}.hero .eyebrow{display:flex;align-items:center;gap:9px}.eyebrow span{width:8px;height:8px;background:var(--yellow);border-radius:50%}.intro{color:var(--muted);margin-block:28px;line-height:1.7}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;font-size:14px;font-weight:700;padding:17px 22px;min-height:48px;border-radius:var(--tl-radius-md);transition:background .15s}.yellow{background:var(--yellow);color:#111}.yellow:hover{background:#f0b900}.dark{background:#111;color:white}.dark:hover{background:#333}.link{font-size:14px;font-weight:700;background:transparent}.hero-proof{margin-top:44px;border-top:1px solid var(--line);padding-top:22px;display:flex;align-items:center;gap:20px;font-size:12px}.hero-proof>strong{font-size:32px;letter-spacing:-1px;white-space:nowrap}.hero-proof strong span{color:#b88700;font-size:24px}.hero-proof a{text-decoration:underline;text-underline-offset:3px}.hero-photo{height:535px;position:relative;background:#111;justify-self:center;width:100%;max-width:390px}.hero-photo>img{height:100%;width:100%;object-fit:cover}.hero-photo figcaption{position:absolute;bottom:0;left:0;right:0;background:var(--yellow);padding:14px 18px;font-size:11px;font-weight:700;letter-spacing:1px}.hero-photo figcaption a{display:block;font-weight:400;letter-spacing:0;margin-top:3px;font-size:12px}.hero-side{position:absolute;right:-30px;writing-mode:vertical-rl;font-size:10px;letter-spacing:3px}.ribbon{background:var(--yellow);display:flex;justify-content:space-around;align-items:center;gap:20px;padding:20px 5%;font-size:17px;font-weight:800;letter-spacing:1px;overflow:hidden}.ribbon b{font-size:30px;line-height:1}.catalog,.reviews{padding-block:72px}.section-head{margin-bottom:28px}.section-head h2{margin-top:6px}.section-desc{color:var(--muted);font-size:14px;margin-top:10px;line-height:1.5;max-width:520px}.catalog-bar{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:26px;display:flex;flex-direction:column;gap:12px}.catalog-bar-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}#filters{display:flex;gap:8px;flex-wrap:wrap}#filters button{padding:9px 16px;background:#f2f2f2;border-radius:var(--tl-radius-full);font-size:13px;font-weight:600;transition:all .15s;border:1px solid transparent}#filters button[aria-pressed=true]{background:#111;color:#fff;border-color:#111}#filters button:hover:not([aria-pressed=true]){background:#e8e8e8}#result-count{font-size:12px;color:var(--muted);letter-spacing:.2px}.product-photo{position:relative;background:#f1f1f1;aspect-ratio:3/4.1;overflow:hidden}.product-photo img{width:100%;height:100%;object-fit:cover}.product-tag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.96);padding:5px 8px;font-size:10px;letter-spacing:.8px;font-weight:700;border-radius:4px;user-select:none}.product-meta{padding:14px 14px 16px}.product-cat{display:block;font-size:10px;letter-spacing:1px;color:var(--muted);font-weight:700;margin-bottom:4px}.product-meta h3{font-size:16px;letter-spacing:-.3px;line-height:1.25}.product-meta p{font-size:13px;color:var(--muted);margin:6px 0 14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-actions{display:flex;align-items:center;gap:10px}.product-actions button{flex:1;background:#111;color:white;padding:11px 12px;font-size:13px;font-weight:700;border-radius:8px;transition:background .15s}.product-actions button[aria-pressed=true]{background:var(--yellow);color:#111}.product-actions button:hover{background:#222}.product-actions a{font-size:12px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}.catalog-note,.source-note{font-size:12px;color:var(--muted);margin-top:18px;line-height:1.6}.manifesto{background:#111;color:white;padding-block:80px}.manifesto-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:10%;align-items:center}.brand-panel{border:1px solid #414141;padding:55px 30px;display:grid;justify-items:center;gap:28px}.brand-panel img{border-radius:50%;width:150px;height:150px}.brand-panel span{font-size:12px;letter-spacing:3px}.manifesto .eyebrow{color:var(--yellow)}.manifesto h2{font-size:clamp(34px,3.6vw,50px)}.manifesto h2 em{color:var(--yellow)}.manifesto p:not(.eyebrow){color:#c8c8c8;margin:24px 0;max-width:530px}.rating{font-size:12px}.rating strong{display:block;font-size:40px;line-height:1.4;letter-spacing:-1px}.rating strong span{font-size:18px;color:#a77500;letter-spacing:2px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.review-card{border:1px solid var(--line);padding:28px;display:flex;flex-direction:column}.stars{color:#936c00;letter-spacing:3px;font-size:16px}.review-card blockquote{margin:18px 0 26px;line-height:1.65;font-size:17px}.review-card .author{font-weight:700;font-size:13px;margin-top:auto}.review-card a{font-size:12px;color:var(--muted);text-decoration:underline}.visit{padding-block:30px 90px;display:grid;grid-template-columns:1fr 1.1fr;gap:8%;align-items:center}.visit address{font-style:normal;margin-block:25px;font-size:15px}.hours{margin:0;max-width:370px;font-size:14px}.hours>div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);gap:10px}.hours dd{margin:0}.visit .actions{margin-top:25px}.map-panel{height:470px;background:#eee;display:flex;flex-direction:column}.map-panel iframe{width:100%;border:0;flex:1}.map-panel>a{padding:18px 22px;background:var(--yellow);font-size:13px;font-weight:700;display:flex;justify-content:space-between;gap:15px}.map-panel span{font-weight:400}footer{background:#111;color:#fff;padding-top:45px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-bottom:40px}.footer-top>div>span{display:block;color:#aaa;letter-spacing:1px;font-size:11px;margin-bottom:8px}.footer-top>div>a{font-size:17px}.footer-bottom{border-top:1px solid #383838;display:flex;justify-content:space-between;gap:20px;padding-block:22px;font-size:12px;color:#aaa}dialog{border:0;padding:30px;width:min(520px,94vw);max-height:85dvh;margin:auto;box-shadow:0 15px 80px #0004}dialog::backdrop{background:#0009}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.dialog-head h2{font-size:32px}.dialog-head button{background:transparent;font-size:32px;padding:0 10px}dialog>p{color:var(--muted);font-size:14px;margin-block:20px}dialog .button{width:100%;margin-top:20px}.selection-row{display:flex;gap:15px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.selection-row img{width:50px;height:65px;object-fit:cover}.selection-row>div{flex:1}.selection-row strong{font-size:14px}.selection-row button{display:block;font-size:12px;background:transparent;text-decoration:underline;padding:5px 0}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:13px 22px;z-index:40;border:1px solid #555;max-width:90vw;opacity:0;pointer-events:none;font-size:14px}.toast.show{opacity:1}.skip{position:fixed;top:-100px;left:15px;z-index:50;padding:12px;background:var(--yellow)}.skip:focus{top:10px}[hidden]{display:none!important}body:has(dialog[open]){overflow:hidden}@media(min-width:1500px){.hero-photo{max-width:390px}}@media(max-width:1050px){.header nav{gap:15px;font-size:12px}.brand>span{font-size:14px}.hero-photo{height:475px}.hero-side{right:-22px}.hero{gap:30px}.product-actions{align-items:stretch;flex-direction:column}}@media(max-width:780px){.wrap{width:90%}.header{padding:10px 5%;min-height:60px;gap:10px}.header nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:22px 5%;border-bottom:1px solid #ddd;flex-direction:column;font-size:16px}.header nav.open{display:flex}#menu{display:block}.hero{grid-template-columns:1fr 0.72fr;gap:20px;padding-block:35px}.hero-photo{height:380px}.hero h1{font-size:46px}.intro{font-size:14px}.hero .actions{gap:15px}.hero-proof{margin-top:25px}.hero-side{display:none}.ribbon{font-size:12px;padding:16px 20px;white-space:nowrap}.ribbon span:nth-of-type(3),.ribbon b:last-child{display:none}.section-head{align-items:start}.product-meta h3{font-size:17px}.catalog,.reviews{padding-block:60px}.manifesto-grid{gap:6%}.brand-panel{padding:40px 15px}.brand-panel span{font-size:10px;letter-spacing:1px}.review-grid{gap:12px}.review-card{padding:20px}.visit{gap:30px}.map-panel{height:420px}.footer-top{flex-wrap:wrap}}@media(max-width:560px){.topline{font-size:10px}.brand>span{font-size:13px}.brand small{font-size:8px;letter-spacing:1px}.brand img{width:38px;height:38px}.header-actions{display:flex;gap:6px;align-items:center}.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:transparent;transition:background .15s}.icon-btn:hover{background:#f2f2f2}.bag{font-size:12px}.hero{grid-template-columns:1fr}.hero h1{font-size:clamp(45px,12vw,64px)}.hero-copy{padding-block:10px}.hero-photo{height:440px;width:100%;max-width:none}.hero-photo>img{object-position:center 40%}.hero-proof{margin-bottom:5px}.ribbon{justify-content:center;gap:10px 14px;font-size:10px;flex-wrap:wrap;white-space:normal;row-gap:6px}.ribbon b{font-size:22px}.section-head{flex-direction:column;gap:22px}.eyebrow{margin-bottom:18px}.catalog-bar{align-items:start}#filters button{font-size:12px;padding:9px 15px}.product-photo{aspect-ratio:3/4;max-height:490px}.product-actions{flex-direction:row;align-items:center}.product-meta h3{font-size:21px}.manifesto-grid{grid-template-columns:1fr;gap:35px}.manifesto{padding-block:50px}.brand-panel{padding:30px}.review-grid{grid-template-columns:1fr}.review-card{padding:25px}.review-card blockquote{margin-bottom:22px}.visit{grid-template-columns:1fr;padding-block:0 60px}.map-panel{height:350px}.footer-top{align-items:start;gap:30px}.footer-top>.brand{width:100%}.footer-bottom{flex-direction:column;gap:8px}.hero .eyebrow{font-size:11px}.map-panel>a{font-size:11px;padding:16px}.catalog-note{font-size:13px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
/* === MELHORIAS UX - Top de Linha === */
.search-wrap{position:relative;display:flex;align-items:center}
.search-wrap input{width:260px;max-width:38vw;padding:10px 36px 10px 14px;border:1px solid var(--line);border-radius:24px;font-size:13px;background:#fff;outline:none;transition:border .15s}
.search-wrap input:focus{border-color:#111}
.search-wrap span{position:absolute;right:12px;pointer-events:none;color:var(--muted)}
.catalog-bar{flex-wrap:wrap}
.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.dialog-actions .button{flex:1}
.dialog-actions .link{padding:10px 14px}
.product-photo img{transition:transform .35s}
.header.scrolled{box-shadow:0 4px 20px #0001}
.ribbon{animation:none}
.review-card{transition:border-color .15s}
.review-card:hover{border-color:#111}
.hero-photo figcaption a:hover,.product-actions a:hover{text-decoration-thickness:2px}
.toast{border-radius:8px;transition:opacity .2s}
#search::-webkit-search-cancel-button{appearance:none}
@media(max-width:780px){.search-wrap input{width:100%} .catalog-bar{gap:12px}}
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:30;display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:12px 16px;border-radius:var(--tl-radius-full);box-shadow:0 8px 28px #0003;font-weight:700;font-size:14px;text-decoration:none;transition:transform .15s, box-shadow .15s}
.whatsapp-float:hover{transform:translateY(-2px);box-shadow:0 12px 32px #0004}
.whatsapp-float-icon{display:grid;place-items:center;width:28px;height:28px}
.whatsapp-float-text{white-space:nowrap}
@media(max-width:560px){.whatsapp-float{right:14px;bottom:14px;padding:12px;width:52px;height:52px;justify-content:center}.whatsapp-float-text{display:none}}

/* === CARROSSEL - Top de Linha (fluido + rápido) === */
.carousel{padding-block:56px}
.carousel-viewport{position:relative;display:flex;align-items:center;gap:10px;margin-top:18px}
.carousel-track{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-behavior:smooth;scroll-padding-inline:16px;padding:8px 2px 12px;flex:1;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin;will-change:scroll-position;cursor:grab}
.carousel-track:active{cursor:grabbing}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-card{flex:0 0 280px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .22s cubic-bezier(.25,.46,.45,.94), box-shadow .22s;will-change:transform}
.carousel-card:hover{transform:translateY(-4px);box-shadow:var(--tl-shadow-lg)}
.carousel-card .product-photo{aspect-ratio:3/4;overflow:hidden}
.carousel-card .product-photo img{transition:transform .45s cubic-bezier(.25,.46,.45,.94)}
.carousel-card:hover .product-photo img{transform:scale(1.04)}
.carousel-card .product-meta{padding:12px 12px 14px}
.carousel-card .product-cat{font-size:10px;letter-spacing:1px;color:var(--muted);font-weight:700}
.carousel-card h3{font-size:15px;letter-spacing:-.3px;margin:2px 0 4px}
.carousel-card p{font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px}
.carousel-btn{width:40px;height:40px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-size:22px;flex-shrink:0;transition:background .15s, transform .15s}
.carousel-btn:hover{background:#333;transform:scale(1.06)}
.carousel-btn:active{transform:scale(.96)}
.carousel-btn:disabled{opacity:.3;pointer-events:none}
.carousel-dots{display:flex;gap:7px;justify-content:center;align-items:center;margin-top:18px;min-height:24px}
.carousel-dots button{width:28px;height:6px;border-radius:var(--tl-radius-full);background:#ddd;padding:0;border:0;transition:background .22s, transform .22s cubic-bezier(.25,.46,.45,.94);cursor:pointer}
.carousel-dots button span{display:block;width:100%;height:100%}
.carousel-dots button[aria-selected=true]{background:var(--yellow);transform:scaleY(1.35)}
.carousel-dots button:focus-visible{outline:2px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 4px rgba(255,202,5,.45)}
.carousel-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.carousel-actions .button{padding:12px 16px;font-size:13px}
@media(max-width:780px){.carousel-card{flex:0 0 76vw;max-width:300px}.carousel-btn{display:none}.carousel-viewport{gap:0}}
@media(prefers-reduced-motion:reduce){.carousel-track{scroll-behavior:auto}.carousel-card,.carousel-card .product-photo img,.carousel-btn,.carousel-dots button{transition:none}}

/* === HERO INSTAGRAM EMBED — enquadramento sem bug + efeito suave === */
.hero-embed-wrap{border-radius:16px;overflow:hidden;box-shadow:0 12px 32px #0002;animation:heroFloat 6s ease-in-out infinite;will-change:transform}
.hero-embed{width:100%;height:100%;background:#fff;display:flex;align-items:stretch}
.hero-embed iframe{width:100%!important;height:100%!important;min-height:100%;border:0;display:block;background:#fff}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero-embed-wrap:hover{animation-play-state:paused}
@media(max-width:560px){.hero-embed iframe{min-height:440px}}
@media(prefers-reduced-motion:reduce){.hero-embed-wrap{animation:none}}

@media print{header,.topline,.ribbon,footer .footer-bottom a,.map-panel iframe,.whatsapp-float{display:none} .hero-photo,.carousel-card{break-inside:avoid}}

/* === DIREÇÃO LUXESHOP ADAPTADA À TL75 === */
.header{min-height:76px;padding-inline:6%;box-shadow:0 2px 18px #111107}.brand img{border-radius:8px;width:44px;height:44px}.brand>span{font-size:15px;letter-spacing:.8px}.header nav{gap:28px;font-size:13px}.header nav a{position:relative}.header nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--yellow);transition:right .2s}.header nav a:hover:after{right:0}.hero{padding-block:64px 78px;gap:7%}.hero-copy{padding-left:2%}.hero-photo{border-radius:16px;box-shadow:16px 16px 0 var(--yellow);max-width:430px;height:570px}.hero-photo figcaption{padding:17px 20px}.hero h1{font-size:clamp(48px,6.2vw,82px);letter-spacing:-.065em}.ribbon{letter-spacing:2px;padding-block:22px}.catalog{padding-block:90px}.section-head{display:flex;justify-content:space-between;align-items:end}.section-head h2{font-size:clamp(38px,4.5vw,62px)}.catalog-bar{border:1px solid var(--line);padding:16px 18px;border-radius:var(--tl-radius-md);background:#fff}.carousel-card{border-radius:var(--tl-radius-md);box-shadow:0 8px 24px #1111110d}.carousel-card .product-photo{aspect-ratio:3/4.2}.product-tag{border-radius:var(--tl-radius-xs);background:var(--yellow)}.product-actions button{border-radius:var(--tl-radius-xs)}.product-actions a{font-size:11px;text-transform:uppercase;letter-spacing:.4px}.manifesto{padding-block:96px}.brand-panel{border-radius:var(--tl-radius-md);box-shadow:10px 10px 0 var(--yellow)}.review-card{border-radius:var(--tl-radius-md);background:#fff}.visit{padding-block:45px 110px}.map-panel{border-radius:var(--tl-radius-md);overflow:hidden;box-shadow:10px 10px 0 var(--yellow)}
@media(max-width:780px){.header{min-height:68px}.hero{padding-block:42px 60px}.hero-photo{box-shadow:10px 10px 0 var(--yellow)}.catalog{padding-block:65px}.section-head{display:block}}

/* === CHECKOUT E CARRINHO — vitrine preta & amarela TL75, acabamento profissional === */
dialog.shop-dialog {
  position: relative;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: 18px;
  padding: clamp(26px, 4vw, 38px);
  box-shadow: 0 30px 90px rgba(10, 10, 10, .32), 0 2px 0 #fff inset;
  width: min(560px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  /* O diálogo usa a altura da viewport e rola internamente quando o conteúdo é longo
     (carrinho com vários itens), mantendo título e ações sempre alcançáveis. */
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c9c9c9 transparent;
}
dialog.shop-dialog::-webkit-scrollbar { width: 10px; }
dialog.shop-dialog::-webkit-scrollbar-track { background: transparent; }
dialog.shop-dialog::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border: 3px solid #fff;
  border-radius: var(--tl-radius-full);
}
dialog.shop-dialog::-webkit-scrollbar-thumb:hover { background: #b9b9b9; }

/* faixa amarela superior — assinatura da marca */
dialog.shop-dialog::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--yellow) 0%, #ffe680 42%, var(--yellow) 100%);
  pointer-events: none;
}
dialog#checkout { width: min(580px, calc(100vw - 24px)); }

dialog .dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
}
.dialog-heading { min-width: 0; }
dialog .dialog-head h2 {
  color: #111;
  font-size: clamp(26px, 4.6vw, 34px);
  line-height: 1.05;
  margin-top: 8px;
}
dialog .dialog-head button,
dialog .dialog-head .dialog-close {
  flex: 0 0 auto;
  color: #4a4a4a;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f4f4f4;
  font-size: 24px;
  line-height: 1;
  transition: background .15s, color .15s, transform .15s;
}
dialog .dialog-head .dialog-close:hover { color: #111; background: #e9e9e9; transform: rotate(90deg); }
dialog .dialog-lead,
dialog > p {
  margin: 14px 0 16px;
  color: #666d78;
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 46ch;
}
/* Em viewports baixos o texto de apoio sai de cena antes do formulário */
@media(max-height:760px) {
  dialog#checkout .dialog-lead { display: none; }
  dialog.shop-dialog { padding-top: 24px; }
  dialog .dialog-head { padding-bottom: 14px; }
}

/* --- lista de itens --- */
.selection-list { display: grid; gap: 2px; }
/* O script injeta o parágrafo do carrinho vazio sem classe, por isso a regra
   alcança tanto .selection-empty quanto um <p> direto dentro da lista. */
.selection-empty,
.selection-list > p {
  margin: 0;
  padding: 30px 20px;
  border: 1px dashed #dedede;
  border-radius: 12px;
  background: rgb(251, 251, 251);
  color: #757c87;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

.selection-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgb(239, 239, 239);
}
.selection-row:last-child { border-bottom: 0; }
.selection-row img {
  width: 62px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  background: linear-gradient(135deg, #f7f7f5, #ecebe7);
  box-shadow: 0 3px 10px rgba(17, 17, 17, .09);
}
.selection-row strong { display: block; color: #151515; font-size: 15px; letter-spacing: -.01em; }
.selection-row small { display: block; margin-top: 4px; color: #767d88; font-size: 12.5px; }
.selection-row > div:nth-child(2) button {
  margin-top: 8px;
  padding: 0;
  background: none;
  color: #8a8f97;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.selection-row > div:nth-child(2) button:hover { color: #b4232c; }

/* --- controle de quantidade --- */
.quantity-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e4e4e4;
  border-radius: var(--tl-radius-full);
  background: #fff;
}
.quantity-control button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #111;
  font-size: 18px;
  line-height: 1;
  transition: background .15s, color .15s;
}
.quantity-control button:hover { background: var(--yellow); color: #111; }
.quantity-control span { min-width: 22px; color: #111; text-align: center; font-weight: 800; font-size: 14px; }

/* --- total --- */
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 12px;
  background: #111;
  color: #f2f2f2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.cart-total strong { color: var(--yellow); font-size: 24px; font-weight: 900; letter-spacing: -.6px; }

/* --- botões --- */
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dialog-actions .button { flex: 1 1 100%; min-height: 50px; justify-content: space-between; padding-inline: 20px; }
.dialog-actions .button span { font-size: 15px; }
.dialog-actions .link {
  padding: 9px 14px;
  color: #5f666f;
  font-size: 12.5px;
  font-weight: 600;
  background: #f5f5f5;
  border: 1px solid #ececec;
  border-radius: var(--tl-radius-full);
}
.dialog-actions .link:hover { color: #111; background: #ededed; border-color: #dedede; }
/* Ações secundárias (links) ficam centralizadas numa linha própria */
.dialog-actions > .link { flex: 0 1 auto; }
.dialog-actions > .link:first-of-type { margin-left: auto; }
.dialog-actions > .link:last-of-type { margin-right: auto; }

/* --- formulário --- */
.checkout-form { display: grid; gap: 13px; margin-top: 18px; }
/* Em telas baixas (notebook), dois campos curtos dividem a linha
   para o formulário caber sem esconder o botão de pagamento. */
@media(min-width:520px) {
  .checkout-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; }
}
.checkout-form label { display: grid; gap: 7px; color: #2a2a2a; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
/* Marca os campos obrigatórios sem repetir a palavra em cada rótulo */
.checkout-form label > span i { font-style: normal; color: #c8371f; }
.checkout-form .field-hint {
  margin: -9px 0 0;
  color: #8b9098;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
}
.checkout-form input[aria-invalid="true"] { border-color: #c8371f; background-image: linear-gradient(rgb(255, 250, 249), rgb(255, 250, 249)); }
.checkout-form input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(200, 55, 31, .18); }
.checkout-form input {
  min-height: 46px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #dedede;
  border-radius: 10px;
  /* Cores hex completas: valores curtos/inválidos deixariam o campo transparente sob o overlay */
  background-color: rgb(251, 251, 251);
  background-image: linear-gradient(rgb(251, 251, 251), rgb(251, 251, 251));
  color: #111;
  font: 400 14.5px/1.45 var(--tl-font-sans);
  letter-spacing: normal;
  text-transform: none;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.checkout-form input::placeholder { color: #a1a7b0; opacity: 1; }
.checkout-form input:hover {
  border-color: #b9b9b9;
  background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
}
.checkout-form input:focus {
  border-color: #9a7200;
  background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
  box-shadow: 0 0 0 3px rgba(255, 202, 5, .28);
}
/* Autofill: mantém o campo claro e o texto preto */
.checkout-form input:-webkit-autofill { -webkit-text-fill-color: #111; }
.checkout-form input:-webkit-autofill:hover,
.checkout-form input:-webkit-autofill:focus { -webkit-text-fill-color: #111; }

.checkout-summary {
  padding: 16px 18px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fafafa;
  color: #333;
  font-size: 13.5px;
}
.checkout-summary > strong {
  display: block;
  margin-bottom: 10px;
  color: #111;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.checkout-summary > div { display: flex; justify-content: space-between; gap: 18px; padding: 6px 0; color: #555c66; }
.checkout-summary > div b { color: #111; }
.checkout-summary .checkout-total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #e2e2e2;
  color: #111;
  font-size: 16px;
  font-weight: 800;
}
.checkout-summary .checkout-total b { color: #111; font-size: 19px; }
.checkout-form .button { justify-content: space-between; width: 100%; min-height: 52px; margin-top: 4px; padding-inline: 20px; }
.checkout-pay-options { display: flex; gap: 10px; margin-top: 4px; }
.checkout-pay-options .button { flex: 1; min-width: 0; margin-top: 0; }
@media (max-width: 480px) { .checkout-pay-options { flex-direction: column; } }
.pix-panel { text-align: center; padding-top: 6px; }
.pix-back { background: transparent; color: var(--muted); font-size: 13px; text-decoration: underline; padding: 0; margin-bottom: 14px; }
.pix-panel h3 { font-size: 24px; margin-bottom: 8px; }
.pix-status { color: var(--muted); font-size: 14px; margin-bottom: 18px; min-height: 20px; }
.pix-qr-image { width: 220px; height: 220px; margin: 0 auto 18px; display: block; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 10px; object-fit: contain; }
.pix-code-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #2a2a2a; text-align: left; margin-bottom: 7px; }
.pix-code-row { margin-bottom: 16px; }
.pix-code-row input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f7f7f7; color: #111; }
.pix-panel .button { width: 100%; }
/* Em telas baixas o botão de pagamento acompanha a rolagem, para nunca
   ficar escondido abaixo do formulário. */
@media(max-height:820px) {
  dialog#checkout #checkout-submit {
    position: sticky;
    bottom: -1px;
    z-index: 2;
    box-shadow: 0 -12px 18px 8px #fff, 0 0 0 1px #fff;
  }
}
.checkout-message { min-height: 20px; margin: 0 !important; color: #b4232c !important; font-size: 13px !important; font-weight: 700; }

.source-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 14px !important;
  color: #8b9098;
  font-size: 11.5px;
  line-height: 1.45;
}
/* Ícone de segurança em SVG, alinhado à linguagem visual do site */
.source-note-lock {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  color: #9aa0a8;
}
.source-note-lock svg { width: 12px; height: 12px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media(max-width:560px) {
  dialog.shop-dialog { padding: 24px 18px; border-radius: 16px; }
  .selection-row { grid-template-columns: 56px minmax(0, 1fr); row-gap: 10px; }
  .selection-row img { width: 56px; height: 72px; }
  .selection-row .quantity-control { grid-column: 2; justify-self: start; }
  .cart-total { padding: 15px 16px; }
  .cart-total strong { font-size: 21px; }
  .checkout-form { gap: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  dialog .dialog-head .dialog-close,
  .quantity-control button,
  .checkout-form input { transition: none; }
  dialog .dialog-head .dialog-close:hover { transform: none; }
}

/* Refinos de acabamento e acessibilidade */
.carousel-card{cursor:pointer}
.product-price{margin:4px 0 11px;font-size:15px;font-weight:900;letter-spacing:-.2px}
.product-actions button{min-width:0}
.product-actions .product-details{flex:1;text-align:center;background:#fff;color:#111;border:1px solid #ddd;padding:10px 12px}
.product-actions .product-details:hover{background:#f4f4f4}
.dialog-kicker{color:#a27b00!important;font-size:10.5px!important;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;margin:0!important}
#product-detail{position:relative;padding:0;width:min(760px,94vw);overflow:hidden;border-radius:var(--tl-radius-lg)}
.detail-layout{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.1fr);min-height:420px}
.detail-image{background:#f1f1f1;min-height:420px}
.detail-image img{width:100%;height:100%;object-fit:cover}
.detail-copy{display:flex;flex-direction:column;justify-content:center;padding:42px 40px}
.detail-copy h2{font-size:clamp(28px,4vw,46px);margin:8px 0 14px}
.detail-copy p{color:var(--muted);font-size:15px;line-height:1.6}
.detail-availability{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12.5px;font-weight:700;letter-spacing:.3px}
.detail-availability--in-stock{color:#0a7a3d}
.detail-availability--check{color:#7a5c00}
.detail-sizes{margin-top:16px}
.detail-sizes-label{display:block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.detail-sizes-list{display:flex;flex-wrap:wrap;gap:8px}
.size-chip{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--tl-radius-md);font-size:13px;font-weight:700;background:#fff}
.detail-price{margin:20px 0;font-size:24px}
.detail-copy .button{justify-content:center;margin-top:4px}
.detail-note{margin-top:16px;font-size:12px!important}
@media(max-width:620px){dialog.shop-dialog{padding:24px 18px;width:calc(100vw - 24px)}dialog.shop-dialog .dialog-head h2{font-size:26px}.detail-layout{grid-template-columns:1fr;min-height:0}#product-detail{padding:0}.detail-image{height:330px;min-height:0}.detail-copy{padding:27px 23px 30px}.detail-copy h2{font-size:32px}.detail-copy .button{width:100%}.product-actions .product-details{font-size:12px;padding:10px 9px}}
.header nav a,.button,.link,.product-actions button,.carousel-btn,#filters button{transition:color var(--tl-transition-normal),background-color var(--tl-transition-normal),border-color var(--tl-transition-normal),box-shadow var(--tl-transition-normal),transform var(--tl-transition-normal)}
.button:hover{box-shadow:var(--tl-shadow-lg);transform:translateY(-1px)}.dark:hover{box-shadow:var(--tl-shadow-lg)}
.search-wrap input{min-height:42px}.header-actions button{min-height:40px;min-width:40px}
.product-photo{background:linear-gradient(135deg,#f7f7f5,#ecebe7)}
@media(max-width:560px){.button{min-height:50px}.actions{gap:14px}.hero-photo{margin-inline:4px}.catalog-bar{padding:14px}.search-wrap{width:100%}.search-wrap input{max-width:none;width:100%}}

/* Botão de fechar dos modais: alvo de clique confortável em telas de toque. */
dialog.shop-dialog .dialog-close { touch-action: manipulation; }

/* Fundo desfocado durante detalhes, carrinho e checkout */
dialog::backdrop {
  background: rgba(8, 9, 12, .66);
  backdrop-filter: blur(9px) saturate(.82);
  -webkit-backdrop-filter: blur(9px) saturate(.82);
}
/* === ACESSIBILIDADE E TOQUE (auditoria) ===
   Texto apenas para leitores de tela: visível ao leitor, invisível na tela. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Alvos de toque: mínimo recomendado de 44x44 para uso no celular.
   Os botões de ícone do cabeçalho tinham 40x40. */
.header-actions button { min-width: 44px; min-height: 44px; }
.header nav a { padding-block: 11px; display: inline-block; }
.footer-top a, .footer-bottom a { padding-block: 6px; display: inline-block; }

/* Botão de limpar a busca: aparece só quando há texto digitado. */
.search-wrap .search-clear {
  position: absolute;
  right: 34px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #ededed;
  color: #555;
  font-size: 15px;
  line-height: 1;
}
.search-wrap .search-clear:hover { background: #dedede; color: #111; }
.search-wrap input[type="search"] { padding-right: 62px; }

/* Foco por teclado sempre visível e com bom contraste (WCAG 2.4.7). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(255, 202, 5, .45);
  border-radius: 4px;
}
/* Dentro dos diálogos, o anel não deve encostar na borda arredondada. */
dialog .dialog-close:focus-visible { outline-offset: 2px; }

/* Link "pular para as peças" aparece ao focar (navegação por teclado). */
.skip:focus {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 60;
  padding: 12px 18px;
  background: #111; color: #fff;
  border-radius: 8px;
  outline: 3px solid var(--yellow);
}

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

/* === ACABAMENTO DOURADO — CTAs e faixas amarelas ganham o gradiente
   --gold-foil (definido em design-system.css) em vez do amarelo chapado. === */
.button.yellow{background:var(--gold-foil);border:1px solid rgba(0,0,0,.08)}
.button.yellow:hover{background:linear-gradient(135deg,#fff7d9 0%,#f2bd00 45%,#b78600 100%)}
.ribbon{background:var(--gold-foil)}
.hero-photo figcaption{background:var(--gold-foil)}
.map-panel>a{background:var(--gold-foil)}

/* === CONTRASTE — textos dourados que ficavam em cima do limite AA (ou
   abaixo dele) usam --gold-text (design-system.css: escuro no claro,
   mais claro no escuro) em vez de tons fixos. === */
.stars{color:var(--gold-text)}
.rating strong span{color:var(--gold-text)}
.dialog-kicker{color:#7a5c00!important}

/* === ALINHAMENTO — .icon-btn (lua/lupa) só virava flex centralizado
   dentro do media query mobile; em telas largas o ícone ficava sem
   alinhamento definido, desalinhado em relação ao carrinho (.bag), que já
   é flex. Aplicando sempre, os três ficam no mesmo eixo em qualquer
   largura. === */
.icon-btn{background:transparent;display:inline-flex;align-items:center;justify-content:center}

/* === CARROSSEL — a barra de rolagem nativa duplicava visualmente os
   pontinhos de paginação (mesma altura/cor); já existem os botões ‹ › e
   os pontinhos, então a barra nativa fica escondida. === */
.carousel-track{scrollbar-width:none}

/* === MODO CLARO/ESCURO — o toggle (#theme-toggle) alterna [data-theme]
   no <html>; a maior parte da troca de cor já vem de design-system.css
   (tokens semânticos). Aqui só ficam os ajustes específicos do storefront:
   ícone do botão e diálogos (carrinho/checkout/detalhe do produto), que
   continuam claros de propósito — formulário de pagamento mais legível — e
   por isso travam --ink/--muted/--line nos valores claros mesmo com o
   site no escuro. === */
#theme-toggle .icon-moon{display:none}
html[data-theme="dark"] #theme-toggle .icon-sun{display:none}
html[data-theme="dark"] #theme-toggle .icon-moon{display:block}
html[data-theme="dark"] dialog{--ink:#0F1115;--muted:#4B5563;--line:#E5E7EB}
html[data-theme="dark"] .header{background:rgba(15,17,21,.92)}
html[data-theme="dark"] .search-wrap input{background:var(--tl-bg-surface-secondary)}
html[data-theme="dark"] .search-wrap span,
html[data-theme="dark"] .search-clear{color:var(--muted)}
html[data-theme="dark"] #filters button{background:var(--tl-bg-surface-secondary);color:var(--tl-text-primary)}
html[data-theme="dark"] #filters button[aria-pressed=true]{background:var(--yellow);color:#111}
html[data-theme="dark"] .carousel-card,
html[data-theme="dark"] .review-card{background:var(--tl-bg-surface)}
html[data-theme="dark"] .product-tag{background:rgba(24,27,32,.9);color:var(--tl-text-primary)}
html[data-theme="dark"] .map-panel{background:var(--tl-bg-surface-secondary)}
html[data-theme="dark"] .catalog-bar{background:var(--tl-bg-surface)}
html[data-theme="dark"] .product-photo{background:var(--tl-bg-surface-secondary)}
html[data-theme="dark"] .icon-btn:hover{background:var(--tl-bg-surface-secondary)}
html[data-theme="dark"] .header nav.open{background:var(--tl-bg-surface);border-bottom-color:var(--tl-border)}

/* === CABEÇALHO MOBILE — 4 botões (lua/lupa/carrinho/menu) + logo não
   cabiam mais em 375px depois do botão de tema entrar na fileira (a regra
   de acessibilidade força min-width/height:44px por botão, maior que o
   38px que o design mobile original previa para .icon-btn). Sem isso o
   header estourava a largura da tela e criava rolagem horizontal na
   página inteira. Testado até o scrollWidth bater exatamente com a
   viewport em 375px. === */
@media(max-width:560px){
  .header-actions{gap:2px}
  .bag{padding:6px 0}
  .header{padding-inline:3%}
  .brand{gap:6px}
}

/* === Confirmação de pedido: banner fixo (não some sozinho, ao contrário do
   .toast) mostrando o número do pedido pro cliente guardar/copiar para
   rastreio e suporte. === */
.order-banner{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:45; width:min(520px,92vw);
  background:var(--paper); color:var(--ink); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.18);
  display:flex; align-items:flex-start; gap:14px; padding:16px 18px;
}
.order-banner-body{flex:1}
.order-banner-body p{font-size:14px;line-height:1.5;margin:0 0 8px}
.order-banner-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.order-banner-code span{font-size:11px;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;font-weight:700}
.order-banner-code b{font-size:18px;letter-spacing:1px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.order-banner-copy{font-size:12px;font-weight:700;background:var(--yellow);color:#111;padding:6px 12px;border-radius:999px;flex-shrink:0}
.order-banner-copy:hover{background:#f0b900}
.order-banner-close{background:transparent;font-size:20px;line-height:1;color:var(--muted);padding:2px 6px;flex-shrink:0}
.order-banner--failure{border-color:#dc2626}
.order-banner--pending{border-color:var(--yellow)}
@media(max-width:560px){.order-banner{top:8px;padding:14px}.order-banner-body p{font-size:13px}}

/* Os dois botoes do card de produto precisam ocupar exatamente a mesma caixa.
   Com box-sizing:border-box e flex-basis:0, o navegador usa borda+padding como
   base minima do item: "Ver detalhes" tinha 1px de borda e 9px de padding
   lateral, "Adicionar" tinha borda 0 e 12px, entao as bases divergiam e um
   saia mais largo (117x43) que o outro (113x41). Igualar borda, padding e
   fonte resolve nos dois eixos. */
/* Uma acao principal por card. Antes eram dois botoes pretos do mesmo peso
   disputando o clique, e de tamanhos diferentes: "Ver detalhes" tinha borda de
   1px e padding menor, e com box-sizing:border-box e flex-basis:0 isso muda a
   base do item flex. Empilhados, o problema deixa de existir. */
.product-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.product-actions .product-add{width:100%;border:1px solid transparent;padding:12px;font-size:13.5px;font-weight:700;border-radius:var(--tl-radius-xs);background:#111;color:#fff}
.product-actions .product-add[aria-pressed="true"]{background:var(--yellow);color:#111}
.product-actions .product-add:disabled{background:#f2f2f2;color:#9aa0a8;cursor:not-allowed}
.product-actions .product-details{width:100%;background:transparent;border:0;padding:2px 0;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.product-actions .product-details:hover{background:transparent;color:#111}

/* Tamanho e estoque: os dois ja vinham na API e so apareciam no detalhe. */
.card-sizes{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0}
.card-sizes .size-chip{min-width:0;height:auto;padding:3px 7px;font-size:10px;border-radius:3px}
.product-flag{position:absolute;top:10px;right:10px;padding:5px 8px;font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;border-radius:var(--tl-radius-xs)}
.product-flag--low{background:#c8371f;color:#fff}
.product-flag--out{background:#111;color:#fff}
.carousel-card--out .product-photo img{filter:grayscale(1);opacity:.55}
.carousel-card--out .product-meta h3,.carousel-card--out .product-price{color:var(--muted)}

/* Botao que troca a vitrine pelo catalogo inteiro */
.catalog-expand{display:flex;justify-content:center;margin-top:20px}
.catalog-expand-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:13px 26px;border:1px solid #111;border-radius:999px;background:#fff;color:#111;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.catalog-expand-btn:hover{background:#111;color:#fff}

/* Modo grade: todas as pecas de uma vez, sem arraste lateral. As setas e as
   bolinhas somem porque nao ha mais faixa para percorrer. */
.catalog--expanded .carousel-btn,.catalog--expanded .carousel-dots{display:none}
.catalog--expanded #products{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:20px;padding:2px;overflow:visible;cursor:default;scroll-snap-type:none}
.catalog--expanded .carousel-card{flex:initial;width:auto}
/* No telefone o minmax de 228px só caberia uma coluna e a grade viraria uma
   lista comprida; duas colunas mantêm o catálogo escaneável. */
@media(max-width:600px){
  .catalog--expanded #products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .catalog--expanded .product-meta{padding:10px 10px 12px}
  .catalog--expanded .product-meta h3{font-size:14px}
  .catalog--expanded .product-price{font-size:14px;margin:4px 0 9px}
  .catalog--expanded .product-actions .product-add{padding:10px 8px;font-size:12px}
  .catalog--expanded .card-sizes .size-chip{padding:2px 5px;font-size:9px}
}

/* --- Diálogo de detalhe do produto --- */
/* O botao de fechar so tinha touch-action: sem posicao ele caia depois do
   conteudo e o overflow:hidden do dialogo o empurrava para fora da tela. */
#product-detail .dialog-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  color:#111;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:background .15s
}
#product-detail .dialog-close:hover{background:#fff}
#product-detail{overflow:auto}
.detail-copy{gap:2px}

/* Tamanho: chips clicaveis, nao mais so decorativos */
.detail-sizes{margin:14px 0 4px}
.detail-sizes-label{display:block;margin-bottom:8px;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.detail-sizes-label i{font-style:normal;font-weight:600;letter-spacing:.2px;text-transform:none;color:#c8371f}
.detail-sizes-list{display:flex;flex-wrap:wrap;gap:8px}
.detail-sizes-list .size-chip{cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.detail-sizes-list .size-chip:hover{border-color:#111}
.detail-sizes-list .size-chip[aria-pressed="true"]{background:#111;border-color:#111;color:#fff}

/* Quantidade */
.detail-qty{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0 6px}
.detail-qty .detail-sizes-label{margin:0}
.detail-qty-control{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:var(--tl-radius-md);overflow:hidden}
.detail-qty-control button{width:40px;height:40px;border:0;background:#fff;color:#111;font-size:17px;font-weight:700;cursor:pointer;transition:background .15s}
.detail-qty-control button:hover:not(:disabled){background:#f2f2f2}
.detail-qty-control button:disabled{color:#c4c4c4;cursor:not-allowed}
.detail-qty-control span{min-width:40px;text-align:center;font-size:15px;font-weight:800}

.detail-add:disabled{background:#f2f2f2;color:#9aa0a8;cursor:not-allowed}
.detail-availability--low{color:#c8371f}
.detail-availability--out{color:var(--muted)}
.selection-size{display:block;font-size:11px;font-weight:700;letter-spacing:.4px;color:#111}

@media(max-width:560px){
  #product-detail .dialog-close{top:8px;right:8px}
  .detail-qty{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Busca acima das categorias: como agora ela e filha direta da coluna
   .catalog-bar, o width:100% dela esticaria o campo por toda a largura da
   barra. Um teto deixa o campo com cara de campo. */
.catalog-bar > .search-wrap{max-width:420px}
@media(max-width:560px){ .catalog-bar > .search-wrap{max-width:none} }

/* ===================================================================
   REVISÃO DE RESPONSIVIDADE MOBILE — auditoria comparando o código com o
   site ao vivo (getBoundingClientRect em várias larguras: 320/360/375/390/
   414/428px). Achou alvos de toque abaixo de 44px (mínimo recomendado,
   WCAG 2.5.5 / Apple HIG) espalhados pelo carrinho, catálogo, hero e visita,
   e um estouro horizontal real de cabeçalho em telas de ~320-360px: a
   correção anterior (comentário "CABEÇALHO MOBILE" acima) só foi testada até
   375px, onde encaixa exato — abaixo disso, .brand (164px) + .header-actions
   (182px fixos, 4 botões de 44px) passam da largura útil. =================== */

/* Cabeçalho em telas muito estreitas (320-360px reais, ex. iPhone SE 1ª/2ª
   geração, Android de entrada): esconde o texto da marca, mantém só o logo
   circular e os 4 ícones em 44px intactos. Libera ~130px, mais que o
   necessário pros ~47px de estouro calculados em 320px. */
@media(max-width:380px){
  .brand>span{display:none}
}

/* "Ver detalhes" tinha só 24px de altura (padding:2px 0 + fonte 12.5px) -
   bem abaixo dos 44px recomendados, presente em todo card da vitrine.
   Mantém a hierarquia visual (ainda secundário, sublinhado, discreto), só
   aumenta a área clicável real. */
.product-actions .product-details{min-height:44px;display:flex;align-items:center;justify-content:center;padding:2px 0}

@media(max-width:560px){
  /* Botões +/- de quantidade no carrinho e no modal de detalhe: eram 30px e
     40px fixos. */
  .quantity-control button{width:44px;height:44px}
  .detail-qty-control button{width:44px;height:44px}

  /* Botão "×" de fechar dos 3 diálogos (carrinho, checkout, detalhe do
     produto): eram 40x40px. */
  dialog .dialog-head button,
  dialog .dialog-head .dialog-close,
  #product-detail .dialog-close{width:44px;height:44px}

  /* Chips de categoria do catálogo: ~39px de altura reais mesmo com
     padding:9px 15px, por causa da fonte de 12px. */
  #filters button{min-height:44px;display:inline-flex;align-items:center}

  /* Links de texto sem padding vertical: "Fale com a loja" (hero) e "Ligar
     para a loja" / "Compartilhar localização" (visita) ficavam com 22-24px
     de altura de toque. */
  .hero .actions .link,
  .visit .actions .link{padding-block:11px;display:inline-block}

  /* "Remover" no carrinho (ação destrutiva) tinha 19px de altura — o menor
     alvo de toque do site. Seletor mira só o botão de remover, não os de
     quantidade (que já são 44px, ver acima). */
  .selection-row > div:nth-child(2) button{min-height:44px;display:inline-flex;align-items:center}

  /* "Copiar resumo" / "Limpar carrinho": 40px, 4px abaixo do mínimo. */
  .dialog-actions .link{min-height:44px;display:inline-flex;align-items:center}

  /* Selo de categoria da foto e chip de tamanho no card: fonte de 10px,
     abaixo do piso de 12px legível em celular. */
  .product-tag{font-size:12px;padding:5px 9px}
  .card-sizes .size-chip{font-size:11px}

  /* Campo de busca: 42px, 2px abaixo do alvo de toque recomendado. */
  .search-wrap input{min-height:44px}
}

@media(max-width:600px){
  /* No modo grade (catálogo expandido, 2 colunas), o chip de tamanho cai
     ainda mais, pra 9px. */
  .catalog--expanded .card-sizes .size-chip{font-size:10px}
}

/* Botão de limpar a busca (×): ícone de 26x26px. Aumenta só a área de
   toque (hit-slop), sem mudar o tamanho visual do ícone. */
.search-wrap .search-clear{position:relative}
.search-wrap .search-clear::before{content:"";position:absolute;inset:-9px}

/* Modal de detalhe do produto em telas baixas (celular deitado, ex.
   667x375): com foto + categoria + título + descrição + disponibilidade +
   cor + tamanho + quantidade + preço, o conteúdo passa da altura da
   viewport, e o botão de comprar fica escondido abaixo da dobra sem
   nenhum indício visual de que dá pra rolar. Fixa o botão embaixo, igual já
   acontece no checkout (#checkout-submit vira sticky em
   @media(max-height:820px), ver mais acima no arquivo). */
@media(max-height:700px){
  #product-detail .detail-add{position:sticky;bottom:-1px;z-index:2;box-shadow:0 -12px 18px 8px #fff,0 0 0 1px #fff}
}