:root{--red:#800a03;--red2:#a91c12;--ink:#211a17;--muted:#776d67;--cream:#f7f0e2;--paper:#fffdf8;--line:#e9dfd2;--green:#257a4b;--shadow:0 18px 55px rgba(49,31,23,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button{cursor:pointer}.app-header{height:92px;position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:32px;padding:0 max(24px,calc((100vw - 1240px)/2));background:rgba(255,253,248,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.brand{margin-right:auto}/* O logo é .jpeg, formato sem transparência: ele vem dentro de um retângulo branco que aparecia como um bloco atrás da marca. `multiply` faz o branco sumir no creme do cabeçalho e preserva o laranja, sem depender de refazer o arquivo. Trocando por um .png com fundo transparente, esta linha pode cair. */ .brand img{display:block;width:116px;height:76px;object-fit:contain;mix-blend-mode:multiply}.header-location{display:flex;gap:10px;align-items:center}.header-location div{display:grid}.header-location small{color:var(--green);font-weight:700}.header-location strong{font-size:13px}.status-dot{width:9px;height:9px;border-radius:99px;background:#37a565;box-shadow:0 0 0 5px #e2f4e8}.cart-button{border:0;border-radius:999px;background:var(--red);color:#fff;display:flex;align-items:center;gap:9px;padding:12px 15px;font-weight:700}.cart-button b{display:grid;place-items:center;min-width:23px;height:23px;border-radius:99px;background:#fff;color:var(--red);font-size:12px}.welcome{max-width:1240px;margin:28px auto;padding:56px 64px;border-radius:30px;display:grid;grid-template-columns:1fr 320px;gap:50px;align-items:center;background:radial-gradient(circle at 88% 30%,rgba(255,255,255,.14),transparent 25%),linear-gradient(125deg,#4f0703,#8b1008 63%,#a52618);color:#fff;overflow:hidden;position:relative}.welcome:before{content:"";position:absolute;width:380px;height:380px;border:80px solid rgba(255,255,255,.04);border-radius:50%;right:-100px;top:-180px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:800;color:var(--red)}.welcome .eyebrow{color:#f0c6a9}.welcome h1{font:700 clamp(38px,5vw,64px)/1.04 Lora,serif;margin:14px 0}.welcome h1 em{font-style:normal;color:#f5cfaa}.welcome p{max-width:580px;color:#f4ded6;font-size:16px;line-height:1.6}.welcome-card{position:relative;z-index:1;background:var(--cream);color:var(--red);border-radius:22px;padding:28px;display:grid;gap:7px;transform:rotate(2deg);box-shadow:0 22px 45px rgba(42,0,0,.22)}.welcome-card span{text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:800}.welcome-card strong{font:700 28px/1.15 Lora,serif}.welcome-card small{margin-top:14px;font-weight:700}.catalog-shell{max-width:1240px;margin:0 auto;padding:46px 0 100px}.catalog-head{display:flex;justify-content:space-between;align-items:end;gap:30px}.catalog-head h2{font:700 34px Lora,serif;margin:8px 0 0}.search{width:310px;height:50px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:14px;padding:0 15px;background:#fff}.search:focus-within{border-color:var(--red)}.search input{border:0;outline:0;width:100%;background:transparent}.categories{display:flex;gap:10px;overflow:auto;padding:24px 2px 18px;scrollbar-width:none;position:sticky;top:91px;z-index:20;background:linear-gradient(var(--paper) 80%,transparent)}.category{white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:12px 18px;font-weight:700}.category span{margin-right:7px}.category.active{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 8px 22px rgba(128,10,3,.2)}.catalog-meta{display:flex;justify-content:space-between;padding:16px 0 20px}.catalog-meta span{color:var(--muted);font-size:13px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product-card{border:1px solid var(--line);background:#fff;border-radius:20px;overflow:hidden;transition:.25s;display:flex;flex-direction:column}.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#dbcabd}.product-image{height:210px;position:relative;background:#f1e8db;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:cover;transition:.4s}.product-card:hover img{transform:scale(1.04)}.badge{position:absolute;left:13px;top:13px;background:var(--cream);color:var(--red);border-radius:99px;padding:7px 10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.product-body{padding:18px;display:flex;flex-direction:column;flex:1}.product-body small{color:var(--red);font-weight:800;text-transform:uppercase;font-size:10px;letter-spacing:.08em}.product-body h3{font:700 20px Lora,serif;margin:7px 0}.product-body p{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 18px}.product-buy{margin-top:auto;display:flex;align-items:end;justify-content:space-between}.price{display:grid}.price strong{font-size:20px;color:var(--red)}.price small{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}.add-button{width:44px;height:44px;border-radius:12px;border:0;background:var(--red);color:#fff;font-size:24px;transition:.2s}.add-button:hover{background:var(--red2);transform:scale(1.05)}.empty-state{text-align:center;padding:80px 20px}.empty-state span{font-size:44px}.overlay{position:fixed;inset:0;background:rgba(25,15,12,.52);z-index:49;backdrop-filter:blur(3px)}.cart-drawer{position:fixed;z-index:50;right:0;top:0;width:min(460px,100%);height:100dvh;background:var(--paper);box-shadow:-30px 0 70px rgba(20,10,5,.2);transform:translateX(102%);transition:.32s;display:flex;flex-direction:column}.cart-drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:25px 26px 14px}.drawer-head h2{font:700 28px Lora,serif;margin:5px 0}.close{border:1px solid var(--line);background:#fff;width:42px;height:42px;border-radius:50%;font-size:25px;color:var(--ink)}.steps{display:flex;align-items:center;padding:8px 27px 20px;color:#a49a92}.steps span{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ebe3da;font-size:11px;font-weight:800}.steps span small{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px;font-size:9px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.steps span.active{background:var(--red);color:#fff}.steps i{height:2px;background:#e4dbd1;flex:1}.drawer-body{flex:1;overflow:auto;padding:22px 26px}.empty-cart{text-align:center;padding:70px 30px}.empty-cart span{font-size:50px}.empty-cart h3{font:700 23px Lora,serif}.empty-cart p{color:var(--muted);font-size:14px}.cart-item{display:grid;grid-template-columns:78px 1fr auto;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}.cart-item img{width:78px;height:78px;border-radius:13px;object-fit:cover;background:#eee}.cart-item h3{font-size:14px;margin:2px 0 6px}.cart-item strong{font-size:14px;color:var(--red)}.remove{border:0;background:transparent;color:#9d9189;font-size:18px}.quantity{display:flex;align-items:center;margin-top:10px;gap:11px}.quantity button{width:27px;height:27px;border:1px solid var(--line);background:#fff;border-radius:8px}.quantity b{font-size:12px}.drawer-foot{border-top:1px solid var(--line);padding:20px 26px 26px;background:#fff}.total-line{display:flex;justify-content:space-between;font-size:16px}.total-line strong{font-size:21px;color:var(--red)}.drawer-foot>small{display:block;color:var(--muted);font-size:11px;margin:5px 0 17px}.primary-action{width:100%;min-height:52px;border:0;border-radius:13px;background:var(--red);color:#fff;font-weight:800;padding:0 18px;display:flex;align-items:center;justify-content:space-between}.primary-action:hover{background:var(--red2)}.primary-action:disabled{background:#c9beb6}.mobile-cart{display:none}.checkout{position:fixed;inset:0;z-index:60;background:rgba(25,15,12,.63);padding:25px;overflow:auto;backdrop-filter:blur(4px)}.checkout-panel{max-width:760px;margin:0 auto;background:var(--paper);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.checkout-steps{max-width:440px}.checkout form{padding:15px 28px 30px}.fulfillment{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fulfillment label{position:relative;border:1px solid var(--line);background:#fff;border-radius:15px;padding:17px;display:grid;gap:5px;cursor:pointer}.fulfillment input{position:absolute;opacity:0;pointer-events:none}.fulfillment label:has(input:checked){border:2px solid var(--red);padding:16px;background:#fff8f2}.fulfillment span{font-size:24px}.fulfillment small{color:var(--muted)}fieldset{border:0;padding:0;margin:26px 0}legend{font:700 18px Lora,serif;margin-bottom:13px}legend em,label em{font:400 11px Inter,sans-serif;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{font-size:12px;font-weight:700}.form-grid .full{grid-column:1/-1}input,textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px 14px;background:#fff;outline:none;margin-top:7px}input:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(128,10,3,.07)}input.invalid{border-color:#c9342b}.error{color:#b42318;font-size:10px;display:block;margin-top:4px;min-height:3px}.privacy{display:flex;gap:10px;align-items:flex-start;font-size:11px;color:var(--muted);line-height:1.5}.privacy input{width:auto;margin-top:2px;accent-color:var(--red)}.privacy a{color:var(--red)}.checkout-summary{margin:23px -28px -30px;padding:20px 28px;background:#f2e9dc;display:grid;grid-template-columns:180px 1fr;align-items:center;gap:20px}.checkout-summary div{display:grid}.checkout-summary strong{color:var(--red);font-size:22px}.toast{position:fixed;z-index:100;left:50%;bottom:25px;transform:translate(-50%,30px);opacity:0;background:#231b17;color:#fff;padding:12px 18px;border-radius:99px;font-size:13px;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){.welcome,.catalog-shell{margin-left:18px;margin-right:18px}.welcome{grid-template-columns:1fr;padding:40px}.welcome-card{display:none}.product-grid{grid-template-columns:repeat(2,1fr)}.catalog-head{align-items:stretch;flex-direction:column}.search{width:100%}}@media(max-width:600px){.app-header{height:76px;padding:0 16px}.brand img{width:92px;height:64px}.header-location,.cart-label{display:none}.cart-button{padding:10px}.welcome{margin:12px 12px 0;padding:26px 25px;border-radius:22px}.welcome h1{font-size:28px;margin:8px 0}.welcome p{font-size:14px}.catalog-shell{margin:0;padding:14px 14px 110px}.catalog-head{gap:14px}.catalog-head h2{font-size:28px;margin-top:0}.categories{top:75px;margin:0 -14px;padding-left:14px;padding-right:14px}.subcategories{padding-bottom:6px}.catalog-meta{padding-top:8px}.product-grid{grid-template-columns:1fr 1fr;gap:10px}.product-image{height:142px}.product-body{padding:13px}.product-body h3{font-size:16px}.product-body p{display:none}.price strong{font-size:15px}.add-button{width:38px;height:38px}.mobile-cart{display:flex;position:fixed;z-index:35;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));height:58px;border:0;border-radius:15px;background:var(--red);color:#fff;align-items:center;justify-content:space-between;padding:0 18px;box-shadow:0 15px 35px rgba(75,5,0,.32)}.mobile-cart span{font-size:12px}.checkout{padding:0}.checkout-panel{min-height:100dvh;border-radius:0}.checkout form{padding:10px 18px 25px}.drawer-head{padding:20px 18px 12px}.steps{padding-left:20px;padding-right:20px}.fulfillment{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.checkout-summary{margin-left:-18px;margin-right:-18px;margin-bottom:-25px;padding:18px;grid-template-columns:1fr}.checkout-summary .primary-action{min-height:56px}} .header-location.closed small{color:#a10d08}.header-location.closed .status-dot{background:#a10d08;box-shadow:0 0 0 5px #f8dedb} /* Identidade Odila Doces */ :root{--brand-primary:#f47721;--brand-accent:#ffd15a;--brand-ink:#242225;--red:var(--brand-primary);--red2:#d95e0e;--ink:var(--brand-ink);--muted:#766a61;--cream:#fff0c9;--paper:#fffaf2;--line:#f1d9ba;--green:#527a3d;--shadow:0 18px 55px rgba(72,42,17,.14)} .welcome{background:radial-gradient(circle at 88% 30%,rgba(255,255,255,.22),transparent 25%),linear-gradient(125deg,#d95e0e,#f47721 60%,#ffc342)} .welcome .eyebrow{color:#fff0bc}.welcome h1 em{color:var(--brand-accent)}.welcome p{color:#fff7e8}.welcome-card{background:#fff7e4;color:var(--brand-primary);box-shadow:0 22px 45px rgba(115,57,5,.24)} /* Sem disco branco e sem sombra: só o logo. O `multiply` lá em cima dissolve o fundo branco do .jpeg no creme do cabeçalho. */ .order-submit-error{display:block;text-align:center;margin:8px 0}.order-success{padding:60px 34px 70px;text-align:center}.order-success[hidden]{display:none}.order-success>span{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 22px;border-radius:50%;background:#dff4e6;color:#237649;font-size:36px;font-weight:800}.order-success>small{color:var(--red);font-weight:800;letter-spacing:.12em}.order-success h2{margin:9px 0 12px;font:700 30px Lora,serif}.order-success p{max-width:480px;margin:0 auto 28px;color:var(--muted);line-height:1.6}.order-success .primary-action{max-width:340px;margin:0 auto;justify-content:center} .subcategories{display:flex;gap:8px;overflow:auto;padding:2px 2px 12px;scrollbar-width:none}.subcategories[hidden]{display:none}.subcategory{white-space:nowrap;border:1px solid #e5d7c6;background:#f8f1e7;color:#51443c;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700}.subcategory span{margin-right:6px}.subcategory.active{background:#2d211b;border-color:#2d211b;color:#fff}@media(max-width:600px){.subcategories{margin:0 -14px;padding-left:14px;padding-right:14px}} .app-header .brand{margin-right:0}.header-categories{position:static;top:auto;z-index:auto;margin:0 auto 0 8px;padding:0;background:none;overflow:visible}.header-categories .category{padding:10px 14px;font-size:13px}.header-categories .category.active{box-shadow:none}@media(max-width:760px){.app-header{height:132px;flex-wrap:wrap;align-content:center;gap:6px 14px;padding:4px 16px 8px}.app-header .brand{margin-right:auto}.header-categories{order:4;flex:0 0 100%;width:100%;margin:0;padding:0;overflow:auto}.header-categories .category{flex:1;justify-content:center;padding:9px 12px}.welcome{margin-top:12px}}@media(max-width:600px){.app-header{height:126px;padding:3px 14px 8px}.header-categories{margin:0}.header-categories .category{font-size:12px;padding:8px 10px}.header-categories .category span{margin-right:4px}} .cart-icon{width:20px;height:20px;flex:none;color:#fff} .header-categories{position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%)}@media(max-width:760px){.header-categories{position:static;top:auto;left:auto;transform:none}} .header-location{margin-left:auto} .search input{margin:0;padding:0;border-radius:0}.search input:focus{box-shadow:none} /* Resumo do pedido visível ao lado do catálogo apenas no desktop. */ .desktop-cart{display:none} /* Largura da coluna lateral: usada pela grade do catálogo e pela busca, que ficam empilhadas e precisam começar e terminar no mesmo lugar. */ :root{--aside-w:320px} /* A fila de subcategorias tinha 2px de padding-top, então as pílulas ficavam coladas no "O que você quer hoje?" — e 28px de folga embaixo, invertendo o ritmo. Com 16px (o mesmo respiro dado ao carrinho), a primeira pílula fica no mesmo nível do topo do painel do pedido. */ .subcategories{padding-top:16px} /* ── Cabeçalho ──────────────────────────────────────────────────────────────── As categorias estavam com position:absolute e left:50% para centralizar. Fora do fluxo, elas ignoravam o gap de 32px do cabeçalho e encostavam no "Loja aberta" (vão medido: -1px, contra 32px entre todos os outros itens). Com uma quarta categoria a sobreposição seria de dezenas de pixels. Voltando para o fluxo, as margens automáticas centralizam no espaço livre entre a marca e os botões, e o gap volta a valer para todos. */ .header-actions{display:flex;align-items:center;gap:32px} /* Só acima de 760px: abaixo disso o cabeçalho é de duas linhas, com as categorias ocupando a segunda inteira — esse layout já funciona. */ @media (min-width:761px){ .app-header{flex-wrap:nowrap} /* Navegação encostada na marca, ações à direita. Centralizar as categorias no cabeçalho não cabe: com quatro categorias, o centro exigiria 398px por lado e os botões da direita ocupam 470px — ou eles encolhem e quebram em duas linhas ("Meu / pedido"), ou a navegação invade o "Loja aberta", que era o defeito original. Alinhada à esquerda, a barra aguenta qualquer quantidade de categorias sem colidir. */ .brand{flex:0 0 auto;margin-right:0} .header-categories{position:static;top:auto;left:auto;transform:none;margin:0 auto 0 0;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none} .header-categories::-webkit-scrollbar{display:none} .header-actions{flex:0 0 auto} /* Rótulos dos botões nunca quebram em duas linhas. */ .header-actions .account-button, .header-actions .cart-button, .header-location small{white-space:nowrap} } @media (min-width:1100px){ .catalog-content{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start} .catalog-content .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .desktop-cart{display:flex;position:sticky;top:112px;max-height:calc(100dvh - 132px);min-height:380px;overflow:hidden;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 14px 36px rgba(49,31,23,.1)} .desktop-cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line)} .desktop-cart-head h3{margin:5px 0 0;font:700 22px Lora,serif} .desktop-cart-head>.material-symbols-outlined{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#f7eee8;color:var(--red);font-size:23px} .desktop-cart-items{flex:1;min-height:170px;overflow:auto;padding:4px 18px} .desktop-cart .empty-cart{padding:42px 12px} .desktop-cart .empty-cart span{font-family:'Material Symbols Outlined';font-size:48px;color:#b0a49c} .desktop-cart .empty-cart h3{margin:12px 0 6px;font-size:19px} .desktop-cart .empty-cart p{margin:0;font-size:12px;line-height:1.5} .desktop-cart .cart-item{grid-template-columns:52px minmax(0,1fr) 22px;gap:10px;padding:13px 0} .desktop-cart .cart-item img{width:52px;height:52px;border-radius:10px} .desktop-cart .cart-item h3{font-size:12px;margin-top:0} .desktop-cart .cart-item strong{font-size:12px} .desktop-cart .quantity{gap:7px;margin-top:8px} .desktop-cart .quantity button{width:25px;height:25px} .desktop-cart .quantity b{min-width:38px;font-size:11px} .desktop-cart-foot{padding:17px 18px 18px;border-top:1px solid var(--line);background:#fff} .desktop-cart-foot>small{display:block;margin:5px 0 14px;color:var(--muted);font-size:10px;line-height:1.4} .desktop-cart-foot .total-line{font-size:13px} .desktop-cart-foot .total-line strong{font-size:19px} .desktop-cart-foot .primary-action{min-height:48px;border-radius:11px} /* A busca e o carrinho são a mesma coluna: a busca tinha 310px fixos contra 320px da coluna, então a borda esquerda dela ficava 10px para dentro. A medida agora sai da mesma variável, para não voltarem a divergir. */ .catalog-content{grid-template-columns:minmax(0,1fr) var(--aside-w)} .catalog-head .search{width:var(--aside-w)} /* A busca fica no fim do cabeçalho do catálogo e o carrinho começa no topo da grade logo abaixo: as duas bordas se encostavam, com vão de 0px. */ .desktop-cart{margin-top:16px} /* Última linha do carrinho não leva divisória: com um item só, a linha ficava solta no meio do espaço vazio. */ .desktop-cart .cart-item:last-child{border-bottom:0} } /* Botão Minha Conta no Cabeçalho */ .account-button { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); display: flex; align-items: center; gap: 7px; padding: 10px 14px; font-weight: 700; font-size: 13px; transition: .2s; } .account-button:hover { border-color: var(--red); color: var(--red); } .account-button .material-symbols-outlined { font-size: 18px; color: var(--red); } /* ── Campos de seleção ──────────────────────────────────────────────────────── `select` nunca entrou na regra de input/textarea: os campos Cidade e Bairro ficavam com a aparência nativa, colados no rótulo e com outra altura — tanto no modal de endereço quanto no checkout. */ select { width: 100%; margin-top: 7px; padding: 13px 40px 13px 14px; border: 1px solid var(--line); border-radius: 11px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23776d67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; color: var(--ink); appearance: none; outline: none; } select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(128, 10, 3, .07); } /* Modais da Área do Cliente */ .account-modal-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(25, 15, 12, 0.65); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(4px); overflow: auto; } .account-modal-backdrop[hidden] { display: none !important; } .account-modal-card { width: min(100%, 640px); max-height: 90vh; display: flex; flex-direction: column; background: var(--paper); border-radius: 24px; padding: 28px; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25); overflow: hidden; } .login-card-box, .address-card-box { width: min(100%, 460px); } .account-modal-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; } .account-modal-head h2 { margin: 4px 0 0; font: 700 26px Lora, serif; } .head-actions { display: flex; align-items: center; gap: 12px; } .text-link-btn { border: 0; background: none; color: var(--red); font-weight: 700; font-size: 13px; cursor: pointer; } .account-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 20px; } .account-tab { border: 0; background: #f3eae0; color: var(--ink); padding: 9px 15px; border-radius: 99px; font-size: 12px; font-weight: 700; cursor: pointer; } .account-tab.active { background: var(--red); color: #fff; } .account-tab-content { flex: 1; overflow: auto; } .account-tab-content[hidden] { display: none !important; } /* Lista de Pedidos do Cliente */ .customer-order-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 18px; margin-bottom: 14px; } .order-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .order-card-header strong { font-size: 15px; color: var(--red); } .order-card-header small { color: var(--muted); font-size: 12px; } /* Status Tracker Timeline */ .status-tracker { margin: 16px 0; padding: 12px; background: #faf6f1; border-radius: 12px; } .tracker-steps { display: flex; justify-content: space-between; position: relative; } .tracker-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; position: relative; z-index: 1; } .tracker-step .dot { width: 24px; height: 24px; border-radius: 50%; background: #e0d5c9; color: #776d67; font-size: 10px; font-weight: 800; display: grid; place-items: center; } .tracker-step.completed .dot { background: #257a4b; color: #fff; } .tracker-step.current .dot { background: var(--red); color: #fff; box-shadow: 0 0 0 4px #f5d7cf; } .tracker-step small { font-size: 9px; font-weight: 700; color: var(--muted); text-align: center; } .tracker-step.completed small, .tracker-step.current small { color: var(--ink); } .order-items-preview { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.5; white-space: pre-line; background: #fff; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; } .order-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; } /* Endereços Salvos */ .tab-action-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .tab-action-bar p { margin: 0; color: var(--muted); font-size: 13px; } .btn-secondary { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 12px; cursor: pointer; } .saved-address-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 16px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: start; } .saved-address-card.default { border-color: #b6d7c1; background: #f6faf7; } .saved-address-card strong { font-size: 14px; } .saved-address-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .address-actions { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; } /* Antes eram textos sem área de toque, todos iguais e na mesma cor: no celular "Usar no pedido" quebrava uma palavra por linha ao lado do endereço. */ .address-actions button { border: 1px solid var(--line); background: #fff; color: var(--red); border-radius: 9px; padding: 7px 10px; min-height: 34px; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; } .address-actions button:hover { border-color: var(--red); background: #fff8f2; } /* Ação destrutiva não pode parecer igual às outras. */ .address-actions button[data-delete-address] { color: #b42318; } .address-actions button[data-delete-address]:hover { border-color: #e3b4ae; background: #fdf4f3; } /* ── Selo de status do pedido ────────────────────────────────────────────────── O cartão de pedido sempre montou , mas a regra existia só em admin/styles.css: na loja o selo saía como texto solto, quebrando em duas linhas no canto do cartão. Cores seguem o ORDER_STATUS_GUIDE. */ .customer-order-card .status { display: inline-block; border-radius: 99px; padding: 6px 10px; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: #ece8e5; color: #665b55; } .customer-order-card .status.pending { background: #fff2ce; color: #94610c; } .customer-order-card .status.confirmed { background: #dff4e6; color: #237649; } .customer-order-card .status.preparing { background: #e4e9fa; color: #405aa0; } .customer-order-card .status.ready { background: #f1e6fb; color: #6b3fa0; } .customer-order-card .status.delivering { background: #ffe8d4; color: #a25415; } .customer-order-card .status.done { background: #ece8e5; color: #665b55; } .customer-order-card .status.cancelled { background: #fbe3e0; color: #a12a1e; } /* Título e selo lado a lado: o selo não encolhe, o título quebra. */ .order-card-header { align-items: flex-start; gap: 12px; } .order-card-header > div { min-width: 0; } /* ── Formulários da área do cliente ─────────────────────────────────────────── Os campos de "Meus Dados" ficavam colados: só os modais de login e cadastro tinham margem, e por style inline. */ .account-tab-content form label, .login-card-box form label, .address-card-box form label { display: block; font-size: 12px; font-weight: 700; } .account-tab-content form label + label, .login-card-box form label + label, .address-card-box form label + label { margin-top: 14px; } /* Dentro do grid os campos ficam lado a lado (Número e Complemento): a margem de empilhamento desalinharia a linha. */ .account-modal-card .form-grid label + label { margin-top: 0; } .account-modal-card .form-grid { margin-top: 14px; } .account-tab-content form .primary-action { margin-top: 22px; } .account-tab-content form label em { font: 400 11px Inter, sans-serif; color: var(--muted); } /* E-mail da conta vem do login e não é editável aqui. */ .account-tab-content input[readonly] { background: #f6f1ea; color: var(--muted); cursor: not-allowed; } /* `.primary-action` usa space-between para o botão da sacola ("Ver sacola" + preço). Nos modais o rótulo é único e ficava encostado na esquerda. */ .account-modal-card .primary-action { justify-content: center; gap: 8px; } /* ── Linha do tempo do pedido ───────────────────────────────────────────────── O CSS já preparava o terreno (position:relative no trilho, z-index nos passos), mas a linha que liga as bolinhas nunca foi desenhada. */ .tracker-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 11px; height: 2px; background: #e0d5c9; z-index: 0; } .tracker-step { min-width: 0; } .tracker-step small { line-height: 1.25; overflow-wrap: anywhere; } /* ── Celular ────────────────────────────────────────────────────────────────── A área do cliente não tinha nenhuma regra para tela pequena: 28px de padding, as três abas ocupando exatamente a largura disponível (sem folga) e cartão de endereço disputando espaço com quatro botões. */ @media (max-width: 600px) { .account-modal-backdrop { padding: 10px; align-items: start; } /* Login/cadastro/recuperação/nova senha são sempre um formulário curto só -- diferente da conta (abas) e do endereço, não precisam de align:start pra caber na tela, e ficam feios encostados no topo com vão vazio embaixo. */ #customer-login-modal { align-items: center; } .account-modal-card { padding: 18px 15px; border-radius: 20px; max-height: calc(100dvh - 20px); } .account-modal-head { margin-bottom: 16px; } .account-modal-head h2 { font-size: 21px; } .head-actions { flex-shrink: 0; gap: 8px; } /* As três abas somavam 427px em 347 disponíveis — a de "Meus Dados" ficava fora da tela. Sem o emoji e dividindo o espaço, as três cabem. */ .account-tabs { gap: 6px; margin-bottom: 16px; } .account-tab { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: 11px; white-space: nowrap; } .tab-emoji { display: none; } .customer-order-card { padding: 15px; } .order-card-foot { flex-direction: column; align-items: flex-start; gap: 6px; } /* Seis legendas em ~41px de coluna viravam "Confirmad/o" e "Em/prepar/o". No celular fica só a linha do tempo: o nome da etapa atual já aparece no selo no alto do cartão. */ .status-tracker { padding: 14px 10px; } .tracker-step small { display: none; } .tracker-step .dot { width: 26px; height: 26px; font-size: 11px; } .tracker-steps::before { left: 13px; right: 13px; top: 12px; } /* Endereço: texto em cima ocupando a largura toda, ações embaixo. */ .tab-action-bar { flex-direction: column; align-items: stretch; gap: 10px; } .tab-action-bar .btn-secondary { padding: 11px 14px; } .saved-address-card { flex-direction: column; gap: 12px; padding: 15px; } .address-actions { width: 100%; } .address-actions button { flex: 1 1 auto; text-align: center; } } /* ── Checkout no celular: cartões de entrega/retirada e placeholders ──────── Os dois cartões empilhados (1 por linha) ficavam enormes -- emoji de 24px, título e subtítulo em 3 linhas cada, mais a bolinha do radio competindo com a borda vermelha que já mostra qual está selecionado. Lado a lado, com ícone à esquerda e sem a bolinha (só a cor/borda indicam a seleção), cabem os dois numa fração da altura. Os placeholders continuam podendo ficar menores que o valor digitado sem disparar o zoom automático do iOS (que olha o font-size do campo, não do ::placeholder). */ @media (max-width: 600px) { .fulfillment { grid-template-columns: 1fr 1fr; } .fulfillment label { grid-template-columns: 20px 1fr; column-gap: 7px; padding: 10px; border-radius: 12px; gap: 1px; } .fulfillment label:has(input:checked) { padding: 9px; } .fulfillment span { font-size: 16px; grid-row: 1/3; } .fulfillment b { font-size: 12px; } .fulfillment small { font-size: 10px; line-height: 1.25; } /* input/select herdam font-size do