/* Carrinho do pedido de atacado Uranyx: ícone com selo no header, entrada no menu mobile,
   "Adicionar ao carrinho" na página do produto, o recado (toast) e a página /carrinho.
   Arquivo próprio, carregado em todas as páginas por causa do selo do header. Mesma
   gramática do conta.css — chanfro no canto, fio laranja, rótulo em monoespaçada, o
   verde-acinzentado das fichas e o escuro da missão.
   Movimento com as curvas do site: --ease (a saída longa dos links e cartões), --ease-reveal
   (as revelações) e a varredura diagonal dos botões. Tudo o que mexe fica dentro de
   prefers-reduced-motion:no-preference, lá embaixo; o style.css ainda desliga o resto. */

/* ---------- Header ---------- */
/* Quadrado irmão da conta, com a mesma moldura (o fundo do botão é a cor do fio e o ::after
   pinta o miolo 1 px para dentro, porque o chanfro cortaria uma border de verdade) e a mesma
   varredura laranja. O selo mora fora do link: o clip-path cortaria o que passa da borda. */
.header-carrinho{position:relative;display:inline-flex;flex-shrink:0;animation:chrome-item .7s var(--ease-reveal) .32s both}
.header-carrinho-link{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;width:47px;height:45px;background:#5c6259;color:#efeee8;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);transition:color .35s}
.header-carrinho-link::after{content:'';position:absolute;inset:1px;z-index:-2;background:#101211;clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%)}
.header-carrinho-link::before{content:'';position:absolute;inset:-3px -30%;z-index:-1;background:var(--orange);transform:translateX(-110%) skewX(22deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.header-carrinho-link:hover,.header-carrinho-link:focus-visible{color:var(--ink)}
.header-carrinho-link:hover::before,.header-carrinho-link:focus-visible::before{transform:translateX(0) skewX(22deg)}
.header-carrinho-link i{font-size:19px;line-height:1}
/* Na página do carrinho a moldura acende, como a da conta. */
.header-carrinho-link.is-ativa{background:var(--orange)}

/* Selo: retângulo laranja com o número em tinta (contraste 7,6:1). O anel da cor do header
   descola o selo do botão; é box-shadow, então o overflow que esconde o número rolando não o corta. */
.carrinho-selo{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;overflow:hidden;background:var(--orange);color:var(--ink);font:700 11px/1 var(--display);letter-spacing:0;font-variant-numeric:tabular-nums}
.carrinho-selo[hidden]{display:none}
/* O número antigo e o novo dividem a mesma célula enquanto um sai e o outro entra (carrinho.js). */
.carrinho-selo-num{grid-area:1/1}
.header-carrinho-selo{position:absolute;top:-7px;right:-8px;z-index:2;box-shadow:0 0 0 2px #101211;pointer-events:none}

/* De 768 a 1024 px o "Vamos conversar" some e o menu inteiro divide a linha com a conta e o
   carrinho: menos respiro entre os links para "Sobre a Uranyx" não quebrar em duas linhas. */
@media(min-width:768px) and (max-width:1024px){
 .site-header{gap:18px}
 .desktop-nav{gap:18px}
 .header-actions{gap:10px}
}
@media(min-width:768px) and (max-width:900px){.desktop-nav{gap:14px}.desktop-nav i{margin-left:6px}}
/* Logo acima de 1024 px o "Vamos conversar" volta e a linha fica cheia de novo: com o nome do
   lojista no botão da conta, os links do menu quebravam em duas linhas. */
@media(min-width:1025px) and (max-width:1180px){.site-header{gap:16px}.desktop-nav{gap:24px}}
@media(max-width:767px){
 .site-header{gap:14px}
 .header-carrinho-link{width:45px;height:42px;background:#6b765e;clip-path:polygon(0 0,100% 0,100% 80%,80% 100%,0 100%)}
 .header-carrinho-link::after{clip-path:polygon(0 0,100% 0,100% 80%,80% 100%,0 100%)}
 .header-carrinho-link i{font-size:20px}
 .header-carrinho-selo{top:-6px;right:-6px}
}
/* Telas estreitas: a marca inteira e três quadrados cabem até 367 px; abaixo disso os quadrados
   e os vãos encolhem, e só nos celulares de 320 px a marca diminui. */
@media(max-width:366px){
 .site-header{gap:10px}
 .header-actions{gap:7px}
 .header-conta,.header-carrinho-link,.menu-toggle{width:42px}
}
@media(max-width:347px){.brand-metal img{width:120px}}

/* Menu mobile: o carrinho vem antes da conta, no mesmo cartão (.menu-conta), com o selo ao lado do rótulo. */
.mobile-menu .menu-carrinho{grid-template-columns:22px minmax(0,1fr) auto 22px}
.mobile-menu .menu-carrinho+.menu-conta{margin-top:10px}
/* Colunas fixas: com o selo escondido (carrinho vazio) a seta continua na ponta. */
.menu-carrinho>.carrinho-selo{grid-column:3;box-shadow:0 0 0 2px #101713}
.menu-carrinho>i:last-child{grid-column:4}

/* ---------- Recado (toast) ---------- */
/* Painel escuro da missão, com o chanfro, logo abaixo do header e perto do ícone (o carrinho.js
   mede onde o header termina). O fio laranja da base é o relógio do recado: encolhe no tempo
   em que ele fica aberto e para com o ponteiro em cima. É só visual — o anúncio para leitor de
   tela é o role=status ao lado. Fora do .smooth-scroll-content: o transform da rolagem suave
   prenderia o position:fixed. */
.carrinho-toast{position:fixed;top:var(--carrinho-toast-topo,100px);right:var(--gutter);z-index:69;display:flex;align-items:center;gap:14px;width:max-content;max-width:min(480px,calc(100vw - 2 * var(--gutter)));padding:12px 12px 15px 14px;background:#141b16;color:var(--paper);clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);opacity:0;visibility:hidden;transform:translate3d(0,18px,0)}
.carrinho-toast.is-visivel{opacity:1;visibility:visible;transform:none}
.carrinho-toast-tempo{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff1a;pointer-events:none}
.carrinho-toast-tempo::after{content:'';position:absolute;inset:0;background:var(--orange);transform-origin:left}
.carrinho-toast-icone{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;background:var(--orange);color:var(--ink);font-size:18px;clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%)}
.carrinho-toast-texto{flex:1;min-width:0;margin:0;font-size:13px;line-height:1.5;color:#bfc8b6;overflow-wrap:anywhere}
.carrinho-toast-texto strong{display:block;margin-bottom:1px;font:600 15px/1.3 var(--display);letter-spacing:-.01em;color:var(--paper)}
.carrinho-toast-link{flex-shrink:0;display:inline-flex;align-items:center;gap:12px;align-self:stretch;padding:0 12px 0 16px;border-left:1px solid #ffffff1f;color:var(--orange-light);font:700 12px/1 var(--display);white-space:nowrap;transition:color .3s}
.carrinho-toast-link i{font-size:17px;display:inline-block}
.carrinho-toast-link:hover{color:var(--paper)}
.carrinho-toast-link:hover i{animation:arrow-pass .65s cubic-bezier(.3,.6,.2,1)}
.carrinho-toast-link:focus-visible{outline-offset:-4px}
.carrinho-toast.is-erro{background:#f6e3d8;color:#6f2a10}
.carrinho-toast.is-erro .carrinho-toast-tempo{background:#c2410c26}
.carrinho-toast.is-erro .carrinho-toast-tempo::after{background:#c2410c}
.carrinho-toast.is-erro .carrinho-toast-icone{background:#c2410c;color:var(--paper)}
.carrinho-toast.is-erro .carrinho-toast-texto{color:#6f2a10}
.carrinho-toast.is-erro .carrinho-toast-texto strong{color:#4a1a08}
.carrinho-toast.is-erro .carrinho-toast-link,.carrinho-toast.sem-link .carrinho-toast-link{display:none}
@media(max-width:767px){
 .carrinho-toast{left:var(--gutter);width:auto;max-width:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
 .carrinho-toast-link{padding:0 6px 0 12px}
}

/* ---------- Página do produto ---------- */
/* O pedido: versão (ou cor) e quantidade lado a lado, o botão laranja embaixo. Campos em
   caixa, na moldura das etiquetas de versão: fio de 1 px, chanfro no canto de baixo. */
.carrinho-add{display:flex;flex-direction:column;gap:18px;margin:0 0 26px}
.atacado-bloqueado+.carrinho-add{margin-top:30px}
.carrinho-add-campos{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px}
.carrinho-add-campo{display:flex;flex-direction:column;gap:9px;min-width:0}
.carrinho-add-campo.carrinho-add-cor{flex:1 1 220px}
.carrinho-add-campo>label{font:10px/1.5 monospace;letter-spacing:.16em;text-transform:uppercase;color:#3a4237}
.carrinho-add-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px}
.btn.carrinho-add-botao{flex:0 1 auto;min-height:56px}
.carrinho-add-ver{gap:22px;padding:10px 0;font-size:12px}
.carrinho-add-ver[hidden]{display:none}
.carrinho-add-ver [data-carrinho-ver-qtd]{display:inline-block;font:10px/1 monospace;letter-spacing:.08em;color:#5d6656}
.carrinho-add[aria-busy=true] .carrinho-add-botao{cursor:progress}

/* Versão ou cor: o <select> de verdade, dentro da moldura. Com cor, a bolinha dela por dentro;
   com versão (2,5 L, iOS) não há cor para mostrar e o texto encosta à esquerda. */
.carrinho-cor{position:relative;padding:1px;background:#b9c0ae;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);transition:background .35s}
.carrinho-cor:hover{background:#6f7865}
.carrinho-cor:focus-within{background:var(--orange)}
.carrinho-cor select{display:block;width:100%;height:54px;padding:0 44px 0 46px;border:0;border-radius:0;background:#f8f8f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' stroke='%23141715' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center/12px 8px;-webkit-appearance:none;appearance:none;cursor:pointer;color:var(--ink);font:600 16px/1.2 var(--display);letter-spacing:-.01em;clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%)}
.carrinho-cor select:focus-visible{outline:none}
.carrinho-cor.is-versao select{padding-left:16px}
.carrinho-cor-amostra{position:absolute;top:50%;left:17px;z-index:1;width:18px;height:18px;margin-top:-9px;border:1px solid #00000024;border-radius:50%;background:var(--dot);pointer-events:none;transition:background .35s,opacity .3s,scale .45s var(--ease)}
.carrinho-cor.is-versao .carrinho-cor-amostra{opacity:0;scale:.4}

/* Quantidade: − | número | +, segmentados pelo mesmo fio. Os botões nascem hidden e o
   carrinho.js mostra; sem JS fica o campo numérico do navegador, com as setinhas dele. */
.carrinho-qtd{display:inline-flex;gap:1px;padding:1px;background:#b9c0ae;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);transition:background .35s}
.carrinho-qtd:hover{background:#6f7865}
.carrinho-qtd:has(input:focus-visible){background:var(--orange)}
.carrinho-qtd input{width:76px;height:54px;min-width:0;padding:0 6px;border:0;border-radius:0;background:#f8f8f3;color:var(--ink);font:600 18px/1 var(--display);letter-spacing:-.02em;text-align:center;font-variant-numeric:tabular-nums}
.carrinho-qtd input:focus-visible{outline:none}
.carrinho-qtd>:last-child{clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%)}
.carrinho-qtd.is-pronto input{-moz-appearance:textfield;appearance:textfield}
.carrinho-qtd.is-pronto input::-webkit-inner-spin-button,.carrinho-qtd.is-pronto input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.carrinho-qtd-passo{position:relative;width:48px;height:54px;flex-shrink:0;display:grid;place-items:center;padding:0;background:#f8f8f3;color:var(--ink);font-size:17px;transition:background .3s,color .3s}
.carrinho-qtd-passo[hidden]{display:none}
.carrinho-qtd-passo:hover{background:#e5e8df}
.carrinho-qtd-passo:active{background:#dfe3d6}
.carrinho-qtd-passo i{display:block}
.carrinho-qtd-passo:focus-visible{outline:2px solid var(--orange);outline-offset:-4px}
/* aria-disabled, e não disabled: o botão continua no Tab e o foco não cai no <body> ao chegar no 1. */
.carrinho-qtd-passo[aria-disabled=true]{color:#14171540;background:#f8f8f3;cursor:not-allowed}
@media(max-width:767px){
 .carrinho-add-campos{gap:14px}
 .carrinho-add-campo.carrinho-add-cor{flex-basis:100%}
 .btn.carrinho-add-botao{flex:1 1 100%;justify-content:space-between}
}

/* Botão com estado (carrinho.js): o rótulo ganha duas camadas. Enviando, a varredura do
   hover fica no lugar, o rótulo sobe e entram as três barras enviesadas da marca (///);
   adicionado, as barras sobem e entra o "✓ Adicionado"; na volta tudo desce e a varredura sai.
   Vale também no toque e no Enter, que não têm hover. */
.carrinho-botao-rotulo{display:inline-flex;flex:1 1 auto;align-items:center;justify-content:inherit;gap:inherit}
.btn>.carrinho-botao-ocupado,.btn>.carrinho-botao-feito{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none;opacity:0;transform:translate3d(0,120%,0)}
.carrinho-botao-ocupado{gap:5px}
.carrinho-botao-ocupado>span{display:block;width:6px;height:16px;background:currentColor;transform:skewX(-24deg)}
.carrinho-botao-ocupado>span:nth-child(2){background:none;box-shadow:inset 0 0 0 1px currentColor}
.btn .carrinho-botao-feito i{animation:none;color:#b95425;font-size:19px}
.btn.is-enviando::before,.btn.is-adicionado::before{transform:translateX(0) skewX(22deg)}
.btn.is-enviando,.btn.is-adicionado{color:var(--hover-text)}
.btn:is(.is-enviando,.is-adicionado)>.carrinho-botao-rotulo{transform:translate3d(0,-120%,0);opacity:0}
.btn.is-enviando>.carrinho-botao-ocupado,.btn.is-adicionado>.carrinho-botao-feito{transform:none;opacity:1}
.btn.is-adicionado>.carrinho-botao-ocupado{transform:translate3d(0,-120%,0);opacity:0}
.btn.is-enviando:disabled{cursor:progress}
/* No "Adicionar" a varredura do estado é escura: a do hover do laranja é a cor do papel e,
   parada no lugar, o botão sumiria na página. Escuro, com o ✓ em laranja, como o painel do preço. */
.btn.carrinho-add-botao:hover::before{transition:transform .7s cubic-bezier(.2,.7,.2,1),background-color .35s}
.btn.carrinho-add-botao:is(.is-enviando,.is-adicionado){--sweep:var(--ink);color:var(--paper)}
.btn.carrinho-add-botao .carrinho-botao-feito i{color:var(--orange)}
/* No toque o :hover gruda depois do toque: a varredura cor de papel ficaria parada e o botão
   sumiria na página quando o "Adicionado" sai. Sem ponteiro, o laranja volta. */
@media(hover:none){.btn.carrinho-add-botao:not(.is-enviando):not(.is-adicionado):hover::before{transform:translateX(-110%) skewX(22deg)}}

/* ---------- Página do carrinho ---------- */
.carrinho .conta-cabecalho{margin-bottom:clamp(30px,4vw,54px)}
.carrinho-alerta{margin-bottom:24px}
.carrinho-principal{display:flex;flex-direction:column;gap:26px;min-width:0;container-type:inline-size}
.carrinho-lista{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
/* Atalho para o resumo: só quando ele cai para depois da lista (coluna única). */
.carrinho-atalho{display:none;align-self:flex-start;gap:18px;padding:8px 0;font-size:12px}
.carrinho-resumo{scroll-margin-top:110px}
@media(max-width:900px){.carrinho-atalho{display:inline-flex;margin-bottom:-8px}}

/* Linha estreita (celular e a coluna ao lado do resumo): foto à esquerda, título em cima,
   quantidade e subtotal embaixo. Larga (a partir de 660 px de lista): tudo numa fileira. */
.carrinho-item{display:grid;grid-template-columns:104px minmax(0,1fr) auto 42px;grid-template-areas:"foto info info remover" "foto qtd subtotal subtotal";align-items:center;gap:14px 20px;padding:22px 0;border-bottom:1px solid var(--line);transition:opacity .35s}
.carrinho-item.is-atualizando{opacity:.5}
.carrinho-item-foto{grid-area:foto;align-self:start;position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;background:#e6e8df;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.carrinho-item-foto::after{content:'';position:absolute;inset:55% 22% 12%;background:#6d755726;filter:blur(14px);border-radius:50%;pointer-events:none}
.carrinho-item-foto img{position:relative;z-index:1;width:80%;height:80%;object-fit:contain;filter:drop-shadow(5px 9px 5px #232d2825);transition:transform 1s var(--ease)}
.carrinho-item:hover .carrinho-item-foto img{transform:translateY(-4px) rotate(-3deg) scale(1.03)}
.carrinho-item-info{grid-area:info;display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.carrinho-item-linha{margin:0;font:9px/1.5 monospace;letter-spacing:.12em;text-transform:uppercase;color:#6b7462}
.carrinho-item-titulo{font-size:clamp(19px,1.5vw,23px);line-height:1.15;letter-spacing:-.03em}
.carrinho-item-titulo a{background:linear-gradient(var(--orange),var(--orange)) no-repeat 0 100%/0 1px;padding-bottom:2px;transition:background-size .6s var(--ease),color .3s}
.carrinho-item-titulo a:hover{background-size:100% 1px;color:#b95425}
.carrinho-item-cor{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;line-height:1.4;color:#4f5949}
.carrinho-item-amostra{flex-shrink:0;width:14px;height:14px;border:1px solid #00000024;border-radius:50%;background:var(--dot)}
/* Versão (2,5 L, iOS): a etiqueta da página do produto, pequena e acesa. */
.carrinho-item-versao{display:inline-flex;align-items:center;gap:8px;margin:0;font:9px/1.5 monospace;letter-spacing:.12em;text-transform:uppercase;color:#5d6656}
.carrinho-item-versao>b{padding:4px 9px;background:var(--ink);color:var(--paper);font:600 12px/1.2 Manrope,system-ui,sans-serif;letter-spacing:.01em;text-transform:none}
.carrinho-item-unitario{margin:0;font:600 14px/1.35 var(--display);color:var(--ink)}
.carrinho-item-unitario span{font:500 12px/1.35 Manrope,system-ui,sans-serif;color:#6b7462}
.carrinho-item-qtd{grid-area:qtd;justify-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.carrinho-qtd.is-compacto input{width:58px;height:44px;font-size:16px}
.carrinho-qtd.is-compacto .carrinho-qtd-passo{width:42px;height:44px;font-size:15px}
.carrinho-item-atualizar{min-height:44px;padding:0 16px;border:1px solid #939e86;background:transparent;color:var(--ink);font:700 12px/1 var(--display);transition:background .3s,color .3s,border-color .3s}
.carrinho-item-atualizar:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.carrinho-item-atualizar[hidden]{display:none}
.carrinho-item-subtotal{grid-area:subtotal;justify-self:end;margin:0;font:600 21px/1.2 var(--display);letter-spacing:-.035em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.carrinho-item-remover{grid-area:remover;justify-self:end;align-self:start}
.carrinho-item-remover-botao{display:grid;place-items:center;width:42px;height:40px;padding:0;border:1px solid #aeb8a0;color:#4f5949;font-size:17px;clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);transition:background .35s,color .35s,border-color .35s}
.carrinho-item-remover-botao:hover{background:#f6e3d8;border-color:#d3a497;color:#c2410c}
.carrinho-item-remover-botao:focus-visible{outline-offset:-4px}
@container (min-width:660px){
 .carrinho-item{grid-template-columns:112px minmax(0,1fr) auto 42px;grid-template-areas:"foto info qtd remover";gap:14px 26px}
 .carrinho-lista.tem-preco .carrinho-item{grid-template-columns:112px minmax(0,1fr) auto minmax(136px,auto) 42px;grid-template-areas:"foto info qtd subtotal remover"}
 .carrinho-item-foto,.carrinho-item-remover{align-self:center}
}
@container (max-width:439px){
 .carrinho-item{grid-template-columns:76px minmax(0,1fr) auto 42px;grid-template-areas:"foto info info remover" "qtd qtd subtotal subtotal";gap:16px 14px}
 .carrinho-item-foto{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
 .carrinho-item-titulo{font-size:18px}
}

.carrinho-lista-acoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.carrinho-lista-acoes>form{display:contents}
.carrinho-lista-acoes .text-link{gap:22px;padding:10px 0;font-size:12px}
.carrinho-esvaziar{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;color:#4f5949;font:700 12px/1 var(--display);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:color .3s,text-decoration-color .3s}
.carrinho-esvaziar i{font-size:17px}
.carrinho-esvaziar:hover{color:#c2410c;text-decoration-color:currentColor}

/* Resumo: a coluna escura das páginas da conta, com o total, o mínimo e o finalizar. */
.conta-lateral.carrinho-resumo{gap:20px;--btn-line-fill:#141b16}
.carrinho-resumo>h2{font-size:clamp(26px,2.2vw,34px)}
.carrinho-resumo>.btn{width:100%;justify-content:space-between;gap:18px;padding-inline:24px}
.carrinho-resumo a:not(.btn){color:var(--orange-light);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-thickness .3s}
.carrinho-resumo a:not(.btn):hover{text-decoration-thickness:2px}
.conta-lateral .carrinho-nota{font-size:12px;line-height:1.65}
.carrinho-total{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;width:100%;margin:0;padding-top:18px;border-top:1px solid #ffffff1f}
.carrinho-total dt{font:10px/1.5 monospace;letter-spacing:.16em;text-transform:uppercase;color:#a7b39a}
.carrinho-total dd{margin:0;font:600 clamp(34px,3vw,46px)/1 var(--display);letter-spacing:-.045em;color:var(--paper);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Pedido mínimo: barra fina com o enviesado da marca; cheia, acende inteira. */
.carrinho-minimo{display:flex;flex-direction:column;gap:11px;width:100%}
.carrinho-minimo-barra{display:block;height:5px;background:#ffffff14;overflow:hidden}
.carrinho-minimo-barra>span{display:block;height:100%;background:repeating-linear-gradient(115deg,var(--orange) 0 9px,#f47b42b3 9px 13px);transition:width .9s var(--ease)}
.conta-lateral .carrinho-minimo p{margin:0;font-size:12px;line-height:1.6}
.carrinho-minimo.is-atingido .carrinho-minimo-barra>span{background:var(--orange)}
.conta-lateral .carrinho-minimo.is-atingido p{display:flex;align-items:center;gap:9px;color:var(--orange-light)}
.carrinho-minimo.is-atingido i{font-size:18px}
.carrinho-finalizar[aria-disabled=true]{opacity:.6;cursor:progress}

/* Depois de abrir o WhatsApp: a pergunta que decide se o carrinho esvazia. */
.carrinho-confirmar{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;padding:20px 20px 22px;background:#1d2520;--btn-line-fill:#1d2520;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.carrinho-confirmar::before{content:'';position:absolute;top:0;left:0;width:64px;height:3px;background:var(--orange)}
.carrinho-confirmar[hidden]{display:none}
.carrinho-confirmar:focus{outline:none}
.carrinho-confirmar:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.conta-lateral .carrinho-confirmar p{margin:0;font-size:12px;line-height:1.65}
.conta-lateral .carrinho-confirmar p strong{font:600 17px/1.3 var(--display);letter-spacing:-.02em;white-space:normal}
.carrinho-confirmar-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.carrinho-confirmar-acoes>form{display:contents}
.carrinho-confirmar .btn{flex:1 1 auto;justify-content:space-between;gap:20px;padding:15px 18px;font-size:12px}
.carrinho-resumo .btn-line{background:#5c6259;color:var(--paper);--sweep:var(--orange);--hover-text:var(--ink)}

/* Vazio: o painel das páginas da conta, com o convite para o catálogo. */
.carrinho-vazio{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:760px;padding:clamp(28px,4vw,52px);background:#e5e8df;border:1px solid #c9d0bd;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%)}
.carrinho-vazio::before{content:'';position:absolute;top:0;left:0;width:90px;height:3px;background:var(--orange)}
.carrinho-vazio-icone{width:54px;height:54px;display:grid;place-items:center;background:var(--ink);color:var(--orange);font-size:25px;clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%)}
.carrinho-vazio h2{font-size:clamp(32px,3.4vw,50px);line-height:1.05;letter-spacing:-.045em}
.carrinho-vazio h2:focus{outline:none}
.carrinho-vazio p{max-width:54ch;font-size:14px;line-height:1.75;color:#4f5949}

@media(max-width:767px){
 .carrinho-lista-acoes{flex-direction:column;align-items:stretch}
 .carrinho-lista-acoes .text-link{justify-content:space-between}
 .carrinho-esvaziar{align-self:center}
 .carrinho-vazio{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
 .carrinho-vazio .btn{width:100%;justify-content:space-between}
 .carrinho-confirmar .btn{flex-basis:100%}
}

/* ---------- Movimento ---------- */
/* Nada muda seco. Selo: pula (escala 1 → 1,25 → 1) e solta o anel laranja do botão flutuante
   do WhatsApp; do zero ele entra crescendo; o número rola para cima (subiu) ou para baixo
   (desceu). O que precisa de medida — linha que fecha, painel que abre, valor que rola — é
   Web Animations no carrinho.js, que confere prefers-reduced-motion antes de animar. */
@keyframes carrinho-pulso{0%{scale:1}35%{scale:1.25}100%{scale:1}}
@keyframes carrinho-anel{0%{box-shadow:var(--carrinho-anel-base),0 0 0 2px #f47b42}100%{box-shadow:var(--carrinho-anel-base),0 0 0 11px #f47b4200}}
@keyframes carrinho-selo-entra{0%{scale:0;opacity:0}55%{scale:1.25;opacity:1}100%{scale:1;opacity:1}}
@keyframes carrinho-selo-sai{from{scale:1;opacity:1}to{scale:0;opacity:0}}
@keyframes carrinho-num-entra{from{transform:translate3d(0,110%,0);opacity:0}to{transform:none;opacity:1}}
@keyframes carrinho-num-sai{from{transform:none;opacity:1}to{transform:translate3d(0,-110%,0);opacity:0}}
@keyframes carrinho-num-entra-desce{from{transform:translate3d(0,-110%,0);opacity:0}to{transform:none;opacity:1}}
@keyframes carrinho-num-sai-desce{from{transform:none;opacity:1}to{transform:translate3d(0,110%,0);opacity:0}}
@keyframes carrinho-sobe-leve{from{transform:translate3d(0,10px,0);opacity:0}to{transform:none;opacity:1}}
@keyframes carrinho-icone-entra{0%{transform:translate3d(-10px,10px,0) scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes carrinho-barras{0%,70%,100%{transform:skewX(-24deg) translate3d(0,0,0);opacity:.35}35%{transform:skewX(-24deg) translate3d(0,-4px,0);opacity:1}}
@keyframes carrinho-tempo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* Mesmo número de pontos no começo e no fim: polígonos diferentes não interpolam, pulariam. */
@keyframes carrinho-revela{from{clip-path:polygon(0 0,0 0,0 34px,0 100%,0 100%)}to{clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%)}}
@keyframes carrinho-chega{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
 .carrinho-selo{--carrinho-anel-base:0 0 0 0 transparent}
 .header-carrinho-selo{--carrinho-anel-base:0 0 0 2px #101211}
 .menu-carrinho .carrinho-selo{--carrinho-anel-base:0 0 0 2px #101713}
 .carrinho-selo.is-pulsando{animation:carrinho-pulso .6s var(--ease-reveal),carrinho-anel .9s var(--ease-glide) .08s}
 .carrinho-selo.is-entrando{animation:carrinho-selo-entra .7s var(--ease-reveal) both,carrinho-anel .9s var(--ease-glide) .25s}
 .carrinho-selo.is-saindo{animation:carrinho-selo-sai .45s var(--ease-reveal) both}
 .carrinho-selo-num.is-chegando{animation:carrinho-num-entra .55s var(--ease) both}
 .carrinho-selo-num.is-saindo{animation:carrinho-num-sai .45s var(--ease) both}
 .carrinho-selo.is-descendo .carrinho-selo-num.is-chegando{animation-name:carrinho-num-entra-desce}
 .carrinho-selo.is-descendo .carrinho-selo-num.is-saindo{animation-name:carrinho-num-sai-desce}

 /* Toast: sobe enquanto aparece; some só apagando, e volta para baixo já invisível. */
 .carrinho-toast{transition:opacity .4s ease,transform 0s linear .45s,visibility 0s linear .45s}
 .carrinho-toast.is-visivel{transition:opacity .45s ease,transform .8s var(--ease),visibility 0s}
 .carrinho-toast.is-visivel .carrinho-toast-icone i{animation:carrinho-icone-entra .7s var(--ease) .12s both}
 .carrinho-toast.is-visivel .carrinho-toast-tempo::after{animation:carrinho-tempo var(--carrinho-toast-ms,2600ms) linear both}
 .carrinho-toast:hover .carrinho-toast-tempo::after{animation-play-state:paused}
 .carrinho-toast-texto.is-trocando{animation:carrinho-sobe-leve .5s var(--ease) both}

 .btn>.carrinho-botao-rotulo,.btn>.carrinho-botao-ocupado,.btn>.carrinho-botao-feito{transition:transform .65s var(--ease),opacity .4s}
 .carrinho-botao-ocupado>span{animation:carrinho-barras .9s var(--ease-glide) infinite}
 .carrinho-botao-ocupado>span:nth-child(2){animation-delay:.12s}
 .carrinho-botao-ocupado>span:nth-child(3){animation-delay:.24s}
 .btn.is-adicionado .carrinho-botao-feito i{animation:carrinho-icone-entra .6s var(--ease) .15s both}
 .carrinho-add-ver.is-chegando{animation:carrinho-chega .8s var(--ease) both}
 .carrinho-add-ver [data-carrinho-ver-qtd].is-trocando{animation:carrinho-sobe-leve .45s var(--ease) both}

 /* − e + afundam um pouco no clique e voltam com a curva longa do site. */
 .carrinho-qtd-passo i{transition:transform .5s var(--ease)}
 .carrinho-qtd-passo:active:not([aria-disabled=true]) i{transform:scale(.78);transition-duration:.12s}
 .carrinho-qtd-passo:active:not([aria-disabled=true]){background:#dfe3d6}

 /* O "Finalizar" esmaece enquanto a quantidade grava, sem piscar. */
 .carrinho-finalizar{transition:color .35s,box-shadow .4s,transform .4s,opacity .35s}

 /* Carrinho vazio chegando: o painel se abre na diagonal, como o menu, e o conteúdo sobe em cascata. */
 .carrinho-vazio.is-chegando{animation:carrinho-revela .9s var(--ease) both}
 .carrinho-vazio.is-chegando>*{animation:carrinho-chega .8s var(--ease) both}
 .carrinho-vazio.is-chegando>:nth-child(1){animation-name:carrinho-icone-entra;animation-delay:.14s}
 .carrinho-vazio.is-chegando>:nth-child(2){animation-delay:.22s}
 .carrinho-vazio.is-chegando>:nth-child(3){animation-delay:.3s}
 .carrinho-vazio.is-chegando>:nth-child(4){animation-delay:.38s}
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
 @keyframes carrinho-revela-m{from{clip-path:polygon(0 0,0 0,0 22px,0 100%,0 100%)}to{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}}
 .carrinho-vazio.is-chegando{animation-name:carrinho-revela-m}
}
@media(prefers-reduced-motion:reduce){
 .header-carrinho,.carrinho-selo,.carrinho-selo-num,.carrinho-botao-ocupado>span,.carrinho-vazio,.carrinho-vazio>*,.carrinho-add-ver,.carrinho-toast-texto,.carrinho-toast-tempo::after{animation:none}
 .carrinho-toast,.carrinho-item,.carrinho-minimo-barra>span,.carrinho-qtd,.carrinho-cor,.carrinho-cor-amostra,.btn>.carrinho-botao-rotulo,.btn>.carrinho-botao-ocupado,.btn>.carrinho-botao-feito{transition:none}
 .carrinho-selo-num.is-saindo{display:none}
}