/* ================================================================ MÁRCIO PEÇA A PEÇA — CART.CSS (carrinho de compras) Cole no , depois de css/auth.css: (no ofertas/ofertas.html, use "/css/cart.css") ================================================================ */ /* Ícone do carrinho no menu desktop */ .btn-nav-cart{ position:relative; display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;margin-right:10px; border:1.5px solid rgba(255,214,0,.45); border-radius:50%; background:rgba(255,214,0,.06); color:var(--yellow);font-size:17px; cursor:pointer;transition:var(--t); } .btn-nav-cart:hover{background:rgba(255,214,0,.16);border-color:var(--yellow);transform:translateY(-2px)} .cart-badge{ position:absolute;top:-6px;right:-6px; min-width:19px;height:19px;padding:0 5px; background:var(--red);color:#fff; border-radius:999px; font-family:var(--fb);font-size:11px;font-weight:800; display:none;align-items:center;justify-content:center; border:2px solid var(--blue-deep); } .cart-badge.show{display:flex} /* No menu mobile o badge fica em linha com o texto, não flutuando */ .auth-drawer-link .cart-badge{position:static;margin-left:6px;border:none} @media(max-width:900px){ .btn-nav-cart{display:none} } /* Botões "Adicionar" nos cards de produto */ .p-btn-row{display:flex;gap:8px} .p-btn-row > a, .p-btn-row > button{flex:1} .p-btn-cart{ display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:12px 14px; background:var(--grad-yel); border:none;border-radius:12px; color:#040B38;font-family:var(--fb);font-weight:800;font-size:13px; cursor:pointer;transition:var(--t); box-shadow:var(--sh-y); } .p-btn-cart:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,214,0,.45)} .p-btn-cart.added{background:linear-gradient(135deg,#25D366,#1ebe5a);color:#fff;box-shadow:none} /* Overlay + drawer lateral */ .cart-overlay{ position:fixed;inset:0;z-index:9999; background:rgba(4,11,56,.75); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); display:none;opacity:0;transition:opacity .3s ease; } .cart-overlay.open{display:block;opacity:1} .cart-drawer{ position:fixed;top:0;right:0;bottom:0; width:100%;max-width:420px; background:linear-gradient(160deg,rgba(26,62,200,.25) 0%,rgba(7,15,69,.98) 40%); border-left:1.5px solid rgba(255,214,0,.25); box-shadow:-10px 0 40px rgba(0,0,0,.4); display:flex;flex-direction:column; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); } .cart-overlay.open .cart-drawer{transform:translateX(0)} .cart-header{ display:flex;align-items:center;justify-content:space-between; padding:24px 24px 18px;border-bottom:1px solid var(--line);flex-shrink:0; } .cart-header h2{ font-family:var(--fh);font-size:20px;font-weight:600; text-transform:uppercase;letter-spacing:.5px;color:var(--white); display:flex;align-items:center;gap:10px;margin:0; } .cart-header h2 i{color:var(--yellow)} .cart-close{ width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.06);border:1px solid var(--line); color:var(--w80);font-size:15px;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:var(--t);flex-shrink:0; } .cart-close:hover{background:rgba(255,255,255,.14);color:var(--white)} .cart-items{flex:1;overflow-y:auto;padding:8px 20px} .cart-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)} .cart-item:last-child{border-bottom:none} .cart-item-img{ width:56px;height:56px;flex-shrink:0;border-radius:10px;object-fit:contain; background:rgba(255,255,255,.05);border:1px solid var(--line); } .cart-item-img-vazia{display:flex;align-items:center;justify-content:center;color:var(--w30);font-size:18px} .cart-item-info{flex:1;min-width:0} .cart-item-nome{ font-family:var(--fb);font-size:13px;font-weight:600;color:var(--white); overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; margin-bottom:4px; } .cart-item-preco{font-family:var(--fb);font-size:12px;color:var(--yellow);font-weight:700;margin-bottom:8px} .cart-item-qtd{display:flex;align-items:center;gap:10px} .cart-qtd-btn{ width:26px;height:26px;border-radius:8px; background:rgba(255,255,255,.06);border:1px solid var(--line); color:var(--white);font-size:15px;font-weight:700;line-height:1; cursor:pointer;transition:var(--t);display:flex;align-items:center;justify-content:center; } .cart-qtd-btn:hover{background:rgba(255,214,0,.14);border-color:var(--yellow);color:var(--yellow)} .cart-item-qtd span{font-family:var(--fb);font-size:13px;font-weight:700;color:var(--white);min-width:16px;text-align:center} .cart-item-remover{ width:32px;height:32px;border-radius:9px;flex-shrink:0; background:rgba(230,50,0,.08);border:1px solid rgba(230,50,0,.25); color:#FF8A65;font-size:13px;cursor:pointer;transition:var(--t); display:flex;align-items:center;justify-content:center; } .cart-item-remover:hover{background:rgba(230,50,0,.18);border-color:#E63200} .cart-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center; height:100%;padding:60px 20px;text-align:center; } .cart-empty i{font-size:48px;color:rgba(255,214,0,.2);margin-bottom:16px} .cart-empty p{font-family:var(--fb);color:var(--w60);font-size:14px} .cart-footer{padding:20px;border-top:1px solid var(--line);flex-shrink:0} .cart-summary-box{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px} .cart-summary-row{display:flex;align-items:center;justify-content:space-between;font-family:var(--fb);font-size:13px;color:var(--w60)} .cart-summary-row + .cart-summary-row{margin-top:8px} .cart-summary-row span:last-child{color:var(--white);font-weight:600} .cart-summary-row span.pendente{color:var(--w60);font-weight:500;font-style:italic} .cart-total-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-family:var(--fb)} .cart-total-row span{font-size:13px;color:var(--w60);text-transform:uppercase;letter-spacing:.5px} .cart-total-row strong{font-size:22px;color:var(--yellow);font-family:var(--fh)} .cart-checkout{ width:100%;padding:15px; background:linear-gradient(135deg,#25D366,#1ebe5a); border:none;border-radius:12px; color:#fff;font-family:var(--fb);font-weight:800;font-size:15px; text-transform:uppercase;letter-spacing:.5px; cursor:pointer;transition:var(--t); display:flex;align-items:center;justify-content:center;gap:8px; box-shadow:0 10px 26px rgba(37,211,102,.35); } .cart-checkout:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(37,211,102,.45)} @media(max-width:480px){ .cart-drawer{max-width:100%} } .cart-close:focus-visible, .cart-qtd-btn:focus-visible, .cart-item-remover:focus-visible, .cart-checkout:focus-visible, .p-btn-cart:focus-visible, .btn-nav-cart:focus-visible{outline:2px solid var(--yellow);outline-offset:2px} @media(prefers-reduced-motion: reduce){ .cart-drawer{transition:none} .cart-overlay{transition:none} } /* ============================================================ V12 — Ações dos cards: botões proporcionais e responsivos ============================================================ */ .p-btn-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; width:100%; margin-top:auto; align-items:stretch; } .p-btn-row > .p-btn, .p-btn-row > .p-btn-cart{ width:100%; min-width:0; min-height:52px; height:52px; margin:0; padding:0 10px; border-radius:13px !important; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--fb); font-size:12.5px; line-height:1; font-weight:900; text-align:center; white-space:nowrap; word-break:normal; overflow-wrap:normal; letter-spacing:0; } .p-btn-row > .p-btn i, .p-btn-row > .p-btn-cart i{ flex:0 0 auto; font-size:14px; margin:0; } /* Desktop amplo: um pouco mais confortável sem aumentar demais */ @media (min-width:1200px){ .p-btn-row > .p-btn, .p-btn-row > .p-btn-cart{ font-size:13px; padding-inline:12px; } } /* Tablets e celulares: mantém os dois CTAs alinhados e legíveis */ @media (max-width:700px){ .p-btn-row{gap:8px} .p-btn-row > .p-btn, .p-btn-row > .p-btn-cart{ min-height:48px; height:48px; padding-inline:8px; font-size:12px; border-radius:12px !important; } .p-btn-row > .p-btn i, .p-btn-row > .p-btn-cart i{font-size:13px} } /* Em telas realmente estreitas, empilha para nunca esmagar o texto */ @media (max-width:340px){ .p-btn-row{grid-template-columns:1fr} .p-btn-row > .p-btn, .p-btn-row > .p-btn-cart{height:46px;min-height:46px} }