/* * cart-sheet.css — Mini-carrinho lateral aberto pelo ícone do header. * * Mesma REGRA DURA do style.css: nenhuma cor hex/rgb hardcoded — só * var(--...) de themes.css. Exceções neutras (idênticas às do style.css): * rgba(0,0,0,...) em box-shadow e no backdrop do overlay, que é neutro e * funciona nos 4 temas (inclusive o lilás, que já é dark). * * Carregado em todas as páginas quando o WooCommerce está ativo * (inc/cart-sheet.php) — o header existe no site inteiro. */ /* === Casca === */ .pb-cart-sheet { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; } .pb-cart-sheet.is-open { visibility: visible; pointer-events: auto; } /* * Logado, a barra de administração do WordPress fica fixa no topo e por cima * de tudo (z-index 99999), cortando o cabeçalho do sheet. Descer o sheet pela * altura dela resolve — as medidas são as do próprio WP (32px no desktop, * 46px abaixo de 782px). */ body.admin-bar .pb-cart-sheet { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .pb-cart-sheet { top: 46px; } } /* Abaixo de 600px o WP solta a barra (ela rola com a página): sem desconto. */ @media screen and (max-width: 600px) { body.admin-bar .pb-cart-sheet { top: 0; } } /* Trava o scroll da página enquanto o sheet está aberto (aplicada no ). */ .pb-cart-open { overflow: hidden; } .pb-cart-sheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); opacity: 0; transition: opacity 0.28s ease; } .pb-cart-sheet.is-open .pb-cart-sheet__backdrop { opacity: 1; } .pb-cart-sheet__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.45); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); } .pb-cart-sheet.is-open .pb-cart-sheet__panel { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .pb-cart-sheet__backdrop, .pb-cart-sheet__panel { transition: none; } } /* === Cabeçalho === */ .pb-cart-sheet__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--line); } .pb-cart-sheet__title { font-family: var(--font-heading); font-size: 26px; font-weight: 400; color: var(--ink); margin: 0; } .pb-cart-sheet__close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .pb-cart-sheet__close:hover { background: var(--surface-2); color: var(--ink); } /* === Corpo (trocado via fragments) === */ .pb-cart-sheet__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .pb-cart-sheet__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 24px; } /* === Item === */ .pb-cart-sheet__list { list-style: none; margin: 0; padding: 0; } .pb-cart-sheet__item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); } .pb-cart-sheet__item:last-child { border-bottom: none; } .pb-cart-sheet__item.is-busy { opacity: 0.45; pointer-events: none; } .pb-cart-sheet__thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--img); } .pb-cart-sheet__info { min-width: 0; } .pb-cart-sheet__name { font-family: var(--font-heading); font-size: 19px; line-height: 1.25; margin: 0 0 4px; color: var(--ink); } .pb-cart-sheet__name a { color: inherit; text-decoration: none; } .pb-cart-sheet__name a:hover { color: var(--accent-2); } /* Variações/metadados do item, renderizados por wc_get_formatted_cart_item_data(). */ .pb-cart-sheet__info .variation { margin: 0 0 8px; font-family: var(--font-body); font-size: 12.5px; color: var(--ink-faint); } .pb-cart-sheet__info .variation dt, .pb-cart-sheet__info .variation dd { display: inline; margin: 0; } .pb-cart-sheet__info .variation dd { margin-right: 8px; } .pb-cart-sheet__info .variation p { display: inline; font-size: inherit; color: inherit; } /* === Quantidade === */ .pb-cart-sheet__qty { display: inline-flex; align-items: center; margin-top: 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; } .pb-cart-sheet__step { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--ink-soft); font-size: 15px; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .pb-cart-sheet__step:hover { background: var(--surface-2); color: var(--ink); } .pb-cart-sheet__qty-input { width: 38px; height: 30px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: none; text-align: center; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink); -moz-appearance: textfield; appearance: textfield; } .pb-cart-sheet__qty-input:focus { outline: none; background: var(--surface-2); } .pb-cart-sheet__qty-input::-webkit-outer-spin-button, .pb-cart-sheet__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* === Preço / remover === */ .pb-cart-sheet__line { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; } .pb-cart-sheet__remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--ink-faint); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .pb-cart-sheet__remove:hover { background: var(--line); color: var(--ink); } .pb-cart-sheet__subtotal { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; } /* === Vazio === */ .pb-cart-sheet__empty { text-align: center; padding: 64px 8px; } .pb-cart-sheet__empty svg { margin: 0 auto 20px; opacity: 0.6; } .pb-cart-sheet__empty-title { font-family: var(--font-heading); font-size: 24px; color: var(--ink); margin: 0 0 6px; } .pb-cart-sheet__empty-text { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 22px; } /* === Rodapé === */ .pb-cart-sheet__foot { flex: 0 0 auto; padding: 20px 24px 24px; border-top: 1px solid var(--line); background: var(--surface); } .pb-cart-sheet__totals { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); } .pb-cart-sheet__total { font-size: 22px; font-weight: 700; color: var(--ink); } .pb-cart-sheet__note { font-size: 12.5px; color: var(--ink-faint); margin: 4px 0 16px; } .pb-cart-sheet__go { display: flex; width: 100%; } .pb-cart-sheet__clear { display: block; width: 100%; margin-top: 10px; padding: 10px; border: none; background: none; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 0.2s ease; } .pb-cart-sheet__clear:hover { color: var(--ink); } /* === Estado de carregamento (durante o AJAX) === */ .pb-cart-sheet__loading { position: absolute; inset: 0; background: var(--bg); opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } .pb-cart-sheet.is-busy .pb-cart-sheet__loading { opacity: 0.4; visibility: visible; } @media (max-width: 480px) { .pb-cart-sheet__panel { width: 100vw; } .pb-cart-sheet__scroll, .pb-cart-sheet__head { padding-left: 18px; padding-right: 18px; } .pb-cart-sheet__foot { padding-left: 18px; padding-right: 18px; } }