/*
Theme Name:   Storefront MB Ice
Theme URI:    https://mbdeposito.local/
Description:  Child theme do Storefront com identidade visual MB Ice (preto, dourado e prata-gelo).
Author:       Ninja
Template:     storefront
Version:      1.14.3
Text Domain:  storefront-mbice
*/

:root {
	--mbice-black: #0a0a0a;
	--mbice-black-soft: #161616;
	--mbice-black-elev: #1f1f1f;
	--mbice-gold: #dfa428;
	--mbice-gold-light: #f2c765;
	--mbice-gold-dark: #7a4f12;
	--mbice-ice: #f2f0ea;
	--mbice-ice-blue: #cfc9ba;
	--mbice-silver: #d8d3c6;
	/* Tipografia: pilha "system-ui" — cada sistema operacional usa sua
	   própria fonte nativa (San Francisco no macOS/iOS, Segoe UI no
	   Windows, Roboto no Android) em vez de forçar uma fonte externa.
	   Escolha deliberada, não omissão: numa loja de bairro com pedido
	   feito no celular, legibilidade e carregamento rápido pesam mais
	   que uma fonte decorativa — e cada cliente ainda vê o texto no
	   estilo "nativo" do próprio aparelho. */
	--mbice-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== Tipografia ===== */
body {
	font-family: var(--mbice-font);
	font-size: 16px;
	line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mbice-font);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h1 { font-size: 1.9em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

/* ===== Base ===== */
body {
	background-color: var(--mbice-black);
	color: var(--mbice-silver);
	/* O tema pai (Storefront) define "overflow-x: hidden" no body por
	   padrão — isso quebra qualquer "position: sticky" na página (o
	   navegador é obrigado a tratar overflow-y como "auto" quando só um
	   eixo tem overflow "hidden", e isso desativa o sticky). "clip" evita
	   essa consequência colateral mantendo o corte horizontal. */
	overflow-x: clip;
	overflow-y: visible;
}

a,
a:visited {
	color: var(--mbice-gold-light);
}

a:hover,
a:focus,
a:active {
	color: var(--mbice-gold);
}

/* O contorno de foco padrão do navegador (azul/roxo) aparece em
   qualquer link/botão clicado — troca pra dourado em todo o site,
   em vez de remover (manter o contorno é importante pra quem navega
   pelo teclado). */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
.menu-toggle:focus,
.menu-toggle:focus-visible,
.main-navigation a:focus,
.main-navigation a:focus-visible {
	outline: 2px solid var(--mbice-gold) !important;
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--mbice-ice);
}

::selection {
	background: var(--mbice-gold);
	color: var(--mbice-black);
}

/* ===== Header ===== */
.site-header {
	background-color: var(--mbice-black-soft);
	border-bottom: 1px solid var(--mbice-gold-dark);
}

.site-title a,
.site-title a:hover {
	color: var(--mbice-gold) !important;
}

.site-description {
	color: var(--mbice-ice-blue);
}

.main-navigation ul li a {
	color: var(--mbice-ice);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--mbice-gold);
}

.main-navigation ul ul {
	background-color: var(--mbice-black-elev);
	border-top: 2px solid var(--mbice-gold);
}

/* O botão "MENU" (hamburguer mobile) usa a classe ".menu-toggle" do
   Storefront, que tem mais especificidade que o seletor genérico
   "button" já usado pra dourar os outros botões do site — por isso
   ficava branco/preto padrão do navegador, destoando do tema. */
button.menu-toggle {
	background-color: var(--mbice-black-elev);
	color: var(--mbice-ice);
	border: 1px solid var(--mbice-gold-dark);
}

button.menu-toggle:hover {
	background-color: var(--mbice-gold);
	color: var(--mbice-black);
	border-color: var(--mbice-gold);
}

/* ===== Content area ===== */
.content-area,
#content,
.site-content {
	background-color: var(--mbice-black);
	color: var(--mbice-silver);
}

.storefront-primary-navigation,
.site-branding {
	background-color: var(--mbice-black-soft);
}

/* ===== Buttons ===== */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	background-color: var(--mbice-gold);
	color: var(--mbice-black);
	border: 1px solid var(--mbice-gold-dark);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--mbice-gold-light);
	color: var(--mbice-black);
	border-color: var(--mbice-gold);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--mbice-gold);
	color: var(--mbice-black);
	border: 1px solid var(--mbice-gold-dark);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--mbice-gold-light);
	color: var(--mbice-black);
}

/* ===== Preços e destaques WooCommerce ===== */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--mbice-gold);
	font-weight: 700;
}

/* Cards de produto: fundo escuro elevado com borda dourada fina — o card
   branco anterior (modelado num site de referência) destoava do resto da
   identidade preto/dourado que a marca usa em todo o material promocional
   (cardápios, posts). Revisão pedida por Diego em 2026-09-20. */
.woocommerce ul.products li.product {
	background-color: var(--mbice-black-elev);
	border: 1px solid var(--mbice-gold-dark);
	padding: 1em;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	color: var(--mbice-ice);
}

.woocommerce ul.products li.product .price {
	color: var(--mbice-gold-light);
	font-weight: 700;
	font-size: 1.05em;
}

/* ===== Cards / Widgets ===== */
.widget-area .widget {
	background-color: var(--mbice-black-soft);
	color: var(--mbice-silver);
}

.widget-title {
	color: var(--mbice-gold);
	border-bottom: 1px solid var(--mbice-gold-dark);
}

/* ===== Carrinho / Ícone ===== */
.site-header-cart .cart-contents {
	color: var(--mbice-ice);
}

.site-header-cart .cart-contents:hover {
	color: var(--mbice-gold);
}

/* ===== Footer ===== */
.site-footer,
#colophon,
footer.site-footer {
	background-color: var(--mbice-black-soft);
	color: var(--mbice-silver);
	border-top: 1px solid var(--mbice-gold-dark);
}

.site-footer a {
	color: var(--mbice-gold-light);
}

.site-footer a:hover {
	color: var(--mbice-gold);
}

/* ===== Formulários ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
	background-color: var(--mbice-black-elev);
	color: var(--mbice-ice);
	border: 1px solid var(--mbice-gold-dark);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--mbice-gold);
	outline: 2px solid var(--mbice-gold);
	outline-offset: 1px;
}

/* ============================================================
   Vitrine de produtos — cards mais profissionais
   ============================================================ */
.woocommerce ul.products li.product img {
	border-radius: 6px;
	transition: transform 0.35s ease;
}

/* Efeitos de :hover só em dispositivos com mouse de verdade (pointer:fine).
   Em touch (Android/iOS) o :hover "gruda" depois do toque até o usuário
   tocar em outro lugar — isolar assim evita esse bug clássico do Safari
   e Chrome mobile. */
@media (hover: hover) and (pointer: fine) {
	.woocommerce ul.products li.product:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 24px rgba(212, 175, 55, 0.18);
		border-color: var(--mbice-gold-dark);
	}

	.woocommerce ul.products li.product:hover img {
		transform: scale(1.04);
	}
}

.woocommerce ul.products li.product .button {
	width: 100%;
	margin-top: 0.75em;
	border-radius: 6px;
}

/* Layout do card: nome + preço empilhados à esquerda, imagem alinhada
   à direita (mesmo padrão do site de referência), via CSS Grid — sem
   precisar sobrescrever o template PHP do WooCommerce. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: grid;
	grid-template-columns: 1fr 84px;
	grid-template-areas:
		"title image"
		"price image";
	column-gap: 1em;
	align-items: center;
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	grid-area: title;
	align-self: end;
	margin: 0;
	font-size: 1em;
}

.woocommerce ul.products li.product .price {
	grid-area: price;
	align-self: start;
	margin: 0;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
	grid-area: image;
	width: 84px;
	height: 84px;
	object-fit: contain;
	/* As fotos de produto (recorte de catálogo) já vêm com fundo branco —
	   mantemos esse fundo claro como um "selo" da foto em vez de tentar
	   remover, mas com borda dourada pra integrar com o card escuro. */
	background-color: #f4f1e8;
	border: 1px solid var(--mbice-gold-dark);
	border-radius: 8px;
	margin: 0;
}

.woocommerce span.onsale {
	background-color: var(--mbice-gold);
	color: var(--mbice-black);
	border-radius: 50px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.75em;
	letter-spacing: 0.02em;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.woocommerce ul.products li.product span.onsale {
	position: absolute;
	top: 0.5em;
	left: 0.5em;
}

/* ============================================================
   Página de produto individual
   ============================================================ */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.6em;
}

.woocommerce div.product .woocommerce-product-gallery {
	border: 1px solid var(--mbice-gold-dark);
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--mbice-black-soft);
}

.woocommerce div.product form.cart .quantity {
	margin-right: 0.75em;
}

.woocommerce div.product form.cart .quantity .qty {
	height: 100%;
	min-height: 48px;
	text-align: center;
	border-radius: 6px;
}

.woocommerce div.product form.cart .button {
	min-height: 48px;
	padding: 0 2em;
	border-radius: 6px;
	font-size: 1em;
}

.woocommerce-tabs {
	background-color: var(--mbice-black-soft);
	border: 1px solid #2a2a2a;
	border-radius: 10px;
	padding: 1.5em;
	margin-top: 2em;
}

.woocommerce-tabs ul.tabs li a {
	color: var(--mbice-ice);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--mbice-gold);
	font-weight: 700;
}

/* Selos de confiança abaixo do botão de compra */
.mbice-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin-top: 1.5em;
	padding-top: 1.5em;
	border-top: 1px solid #2a2a2a;
}

.mbice-trust-badges .mbice-badge {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.9em;
	color: var(--mbice-silver);
}

.mbice-trust-badges .mbice-badge .dashicons {
	color: var(--mbice-gold);
}

/* ============================================================
   Aviso de pedido mínimo / taxa de entrega
   ============================================================ */
.mbice-order-info {
	background-color: var(--mbice-black-soft);
	border: 1px solid var(--mbice-gold-dark);
	border-radius: 8px;
	padding: 1em 1.25em;
	margin-bottom: 1.5em;
	color: var(--mbice-ice);
	font-size: 0.95em;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
}

.mbice-order-info strong {
	color: var(--mbice-gold);
}

/* ============================================================
   Carrinho e Checkout (WooCommerce Blocks)
   ============================================================ */
.wc-block-cart,
.wc-block-checkout,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	color: var(--mbice-silver);
}

.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-totals-wrapper,
.wc-block-components-shipping-rates-control__package,
.wc-block-checkout__form,
.wc-block-components-order-summary,
.wc-block-components-address-form {
	background-color: var(--mbice-black-soft) !important;
	border-color: #2a2a2a !important;
	color: var(--mbice-silver) !important;
}

.wc-block-cart-item__product-name,
.wc-block-components-product-name,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-checkout__title,
.wc-block-components-checkout-step__title {
	color: var(--mbice-ice) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--mbice-gold) !important;
	font-weight: 700;
}

.wc-block-components-radio-control__option {
	background-color: var(--mbice-black-elev) !important;
	border: 1px solid #2a2a2a !important;
	border-radius: 6px;
}

.wc-block-components-radio-control__option[aria-checked="true"] {
	border-color: var(--mbice-gold) !important;
}

.wc-block-components-radio-control-accordion-option input,
.wc-block-components-radio-control__input {
	accent-color: var(--mbice-gold);
}

.wc-block-components-text-input input,
.wc-block-components-textarea input,
.wc-block-checkout__form input,
.wc-block-checkout__form select,
.wc-block-checkout__form textarea {
	background-color: var(--mbice-black-elev) !important;
	color: var(--mbice-ice) !important;
	border-color: var(--mbice-gold-dark) !important;
}

/* Campos de País/Estado (e qualquer outro seletor dos blocos de
   checkout) — cobertura ampla porque o checkout é renderizado via
   JavaScript e o wrapper/elemento visível pode variar. */
.wc-block-components-country-input,
.wc-block-components-country-input select,
.wc-block-components-country-input input,
.wc-block-components-state-input,
.wc-block-components-state-input select,
.wc-block-components-state-input input,
.wc-block-components-select-input,
.wc-block-components-select-input select {
	background-color: var(--mbice-black-elev) !important;
	color: var(--mbice-ice) !important;
	border-color: var(--mbice-gold-dark) !important;
}

/* O foco padrão do navegador/WooCommerce Blocks nesses campos vem em
   azul/roxo — força dourado, consistente com o resto do site. */
.wc-block-checkout__form input:focus,
.wc-block-checkout__form select:focus,
.wc-block-checkout__form textarea:focus,
.wc-block-components-country-input select:focus,
.wc-block-components-state-input select:focus,
.wc-block-components-select-input select:focus {
	outline: 2px solid var(--mbice-gold) !important;
	border-color: var(--mbice-gold) !important;
	color: var(--mbice-ice) !important;
}

/* Botões visíveis dos blocos do WooCommerce (finalizar pedido, aplicar
   cupom, voltar ao carrinho, etc.) — mesmo padrão dourado/preto do resto
   do site. Não usa o seletor genérico ".wc-block-components-button"
   porque essa classe também é reaproveitada em botões de ícone pequenos
   (ex.: remover item do carrinho), que não devem virar caixas douradas. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-totals-coupon__button,
.wc-block-components-checkout-return-to-cart-button {
	background-color: var(--mbice-gold) !important;
	color: var(--mbice-black) !important;
	border: 1px solid var(--mbice-gold-dark) !important;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 6px !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-totals-coupon__button:hover,
.wc-block-components-checkout-return-to-cart-button:hover {
	background-color: var(--mbice-gold-light) !important;
	color: var(--mbice-black) !important;
}

.wc-block-components-notice-banner {
	border-radius: 8px;
}

/* ============================================================
   Grade de produtos do WooCommerce Blocks (ex.: "Novidade na loja"
   no carrinho vazio) — mesma legibilidade da vitrine da Loja:
   nome em branco, preço em dourado.
   ============================================================ */
.wc-block-grid__product-title {
	color: var(--mbice-ice) !important;
}

.wc-block-grid__product-price,
.wc-block-grid__product-price__value,
.wc-block-grid__product-price__regular {
	color: var(--mbice-gold) !important;
	font-weight: 700;
}

.wc-block-grid__product-link:hover .wc-block-grid__product-title {
	color: var(--mbice-gold) !important;
}

/* Cobertura genérica: blocos interativos do WooCommerce (carrinho vazio
   "Novidade na loja" e o cross-sell "Você pode se interessar por..." do
   carrinho com itens) usam famílias de classe diferentes entre si e da
   grade estática da Loja. Pega qualquer variação dentro desses blocos,
   pelo padrão do nome da classe, em vez de depender de um nome exato. */
.wp-block-woocommerce-empty-cart-block a:not(.wp-block-button__link):not(.add_to_cart_button):not(.button),
.wp-block-woocommerce-empty-cart-block h2,
.wp-block-woocommerce-empty-cart-block h3,
.wp-block-woocommerce-empty-cart-block [class*="product-title"],
.wp-block-woocommerce-empty-cart-block [class*="product-name"],
.wp-block-woocommerce-product-collection a:not(.wp-block-button__link):not(.add_to_cart_button):not(.button),
.wp-block-woocommerce-product-collection h2,
.wp-block-woocommerce-product-collection h3,
.wp-block-woocommerce-product-collection .wp-block-post-title,
.wp-block-woocommerce-product-collection [class*="product-title"],
.wp-block-woocommerce-product-collection [class*="product-name"] {
	color: var(--mbice-ice) !important;
}

.wp-block-woocommerce-empty-cart-block [class*="price"],
.wp-block-woocommerce-product-collection [class*="price"] {
	color: var(--mbice-gold) !important;
	font-weight: 700;
}

/* Botão "Adicionar ao carrinho" dessas grades usa o bloco nativo do
   Gutenberg (wp-block-button__link), classe diferente da ".button"
   clássica do WooCommerce — por isso precisa de regra própria pra
   entrar no mesmo padrão dourado/preto do resto do site. */
.wp-block-button__link {
	background-color: var(--mbice-gold) !important;
	color: var(--mbice-black) !important;
	border: 1px solid var(--mbice-gold-dark) !important;
	font-weight: 700;
}

.wp-block-button__link:hover {
	background-color: var(--mbice-gold-light) !important;
	color: var(--mbice-black) !important;
}

/* ============================================================
   Compatibilidade entre navegadores e sistemas
   (Windows, macOS, Android, iOS — Chrome, Edge, Firefox, Safari)
   ============================================================ */

/* Evita "flash" cinza ao tocar em links/botões no Android/Chrome
   e a "sticky bar" azul de seleção em navegadores antigos. */
a,
button,
.button,
input[type="button"],
input[type="submit"] {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Suaviza a renderização de fonte no macOS/iOS (WebKit) e Firefox,
   evitando texto "encorpado" nesses sistemas em relação ao Windows/Android. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Faz os controles nativos do navegador (checkbox, radio, calendário de
   data, barra de rolagem em alguns navegadores) já nascerem no tema escuro,
   em vez do branco padrão que destoa em Windows/macOS/Android/iOS. */
:root {
	color-scheme: dark;
}

/* Barra de rolagem customizada — Chrome/Edge/Safari (WebKit) e Firefox. */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--mbice-black);
}

::-webkit-scrollbar-thumb {
	background-color: var(--mbice-gold-dark);
	border-radius: 10px;
	border: 2px solid var(--mbice-black);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--mbice-gold);
}

html {
	scrollbar-width: thin;
	scrollbar-color: var(--mbice-gold-dark) var(--mbice-black);
}

/* Firefox usa uma pseudo-classe própria para seleção de texto. */
::-moz-selection {
	background: var(--mbice-gold);
	color: var(--mbice-black);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Uniformiza a aparência do <select>, que por padrão é muito diferente
   entre Windows, macOS, Android e iOS — remove a seta nativa e desenha
   uma seta própria, consistente com a identidade visual do site. */
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23dfa428' d='M7 9 0 0h14z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;
	background-size: 12px 8px;
	padding-right: 2.5em;
}

/* iOS aumenta o zoom da página automaticamente ao focar em campos com
   fonte menor que 16px — travar o mínimo evita esse comportamento. */
input,
textarea,
select {
	font-size: 16px;
}

/* Alvos de toque com tamanho mínimo confortável (Android/iOS recomendam
   ~44px) para botões, campos e o seletor de quantidade. */
.button,
button,
input[type="button"],
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select {
	min-height: 44px;
}

/* A barra fixa de navegação mobile do Storefront precisa de um respiro
   extra em iPhones com "ilha dinâmica"/indicador de home (área seguindo
   env(safe-area-inset-*), suportada por Safari iOS e navegadores baseados
   em Chromium recentes no Android). Sem suporte, o valor extra é 0 e nada
   muda. */
.storefront-handheld-footer-bar {
	padding-bottom: env(safe-area-inset-bottom, 0);
}

/* A barra fixa mobile (ícones de busca/conta/carrinho) pega a cor de
   fundo do Customizer do Storefront ("header_background_color"), que
   nunca foi configurado aqui — ficava branca, destoando do tema preto/
   dourado. Sobrescreve direto para bater com o header. */
.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.search .site-search {
	background-color: var(--mbice-black-soft) !important;
}

.storefront-handheld-footer-bar {
	border-top-color: var(--mbice-gold-dark) !important;
	color: var(--mbice-ice) !important;
}

.storefront-handheld-footer-bar a,
.storefront-handheld-footer-bar a:visited,
.site-footer .storefront-handheld-footer-bar a:not(.button):not(.components-button) {
	color: var(--mbice-gold-light) !important;
}

.storefront-handheld-footer-bar ul li > a {
	border-right-color: var(--mbice-gold-dark) !important;
}

/* ===== Ajustes responsivos ===== */
@media (max-width: 768px) {
	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		font-size: 1.3em;
	}

	.mbice-order-info {
		flex-direction: column;
		gap: 0.5em;
		font-size: 0.9em;
	}

	.mbice-trust-badges {
		gap: 0.75em;
		font-size: 0.85em;
	}

	.woocommerce-tabs {
		padding: 1em;
	}

	/* Empilha o banner e a barra de ferramentas já a partir de tablet —
	   antes só empilhava abaixo de 480px, deixando a faixa 481–768px
	   (tablets pequenos, celulares grandes deitados) com o layout em
	   linha apertado. */
	.mbice-store-banner__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.mbice-store-banner__social {
		justify-content: center;
	}

	/* Largura explícita (não só "align-items: stretch") no item de texto:
	   em flex-direction:column, align-items:stretch por si só não bastou
	   pra travar a largura do bloco de nome/endereço/status ao tamanho da
	   tela em todos os casos testados — o texto do endereço continuava
	   numa linha só, vazando pra fora da viewport no celular e sendo
	   cortado sem possibilidade de rolagem (overflow-x:clip no body).
	   Largura de 100% é garantida independente do comportamento do
	   "stretch" do flexbox. */
	.mbice-store-banner__info {
		width: 100%;
	}

	.mbice-shop-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	/* "flex: 0 1 320px" no card de busca define a base do eixo principal —
	   que em flex-direction:row (desktop) é largura, mas vira ALTURA
	   quando a barra empilha em coluna aqui no mobile. Sem resetar,
	   o campo ficava 320px de altura, e com border-radius:999px isso
	   virava um círculo gigante cobrindo a página.
	   !important necessário: a regra base ".mbice-shop-toolbar
	   .woocommerce-product-search" (mais abaixo no arquivo, fora de
	   media query) declara "flex: 0 1 320px" e, com a mesma
	   especificidade, vence por ordem de origem mesmo dentro desta
	   media query — mesma causa do bug já corrigido no banner. */
	.mbice-shop-toolbar .woocommerce-product-search {
		flex-basis: auto !important;
	}
}

@media (max-width: 480px) {
	.woocommerce div.product form.cart .quantity,
	.woocommerce div.product form.cart .button {
		width: 100%;
	}

	.woocommerce div.product form.cart .quantity {
		margin-right: 0;
		margin-bottom: 0.5em;
	}

	.woocommerce div.product form.cart {
		display: flex;
		flex-wrap: wrap;
	}

	.mbice-trust-badges .mbice-badge {
		font-size: 0.8em;
	}
}

/* ============================================================
   Faixa da loja: banner, logo, endereço e status de funcionamento
   ============================================================ */
.mbice-store-banner {
	background: linear-gradient(135deg, var(--mbice-black) 0%, var(--mbice-black-soft) 55%, #241b06 100%);
	border-bottom: 1px solid var(--mbice-gold-dark);
	padding: 1.75em 1em;
}

.mbice-store-banner__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1.25em;
}

/* Item flex sem "min-width: 0" usa o tamanho do próprio conteúdo como
   largura mínima (min-width:auto é o padrão em itens flex) — some com
   o "stretch" do breakpoint mobile e faz o endereço vazar pra fora da
   tela em vez de quebrar linha. */
.mbice-store-banner__info {
	min-width: 0;
}

.mbice-store-banner__address {
	overflow-wrap: break-word;
}

.mbice-store-banner__logo img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: contain;
}

.mbice-store-banner__name {
	color: var(--mbice-gold);
	margin: 0 0 0.15em;
	font-size: 1.5em;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.mbice-store-banner__address {
	color: var(--mbice-silver);
	margin: 0 0 0.4em;
	font-size: 0.9em;
}

.mbice-store-banner__status {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-weight: 700;
	font-size: 0.9em;
}

.mbice-store-banner__status.is-open {
	color: #5fd97a;
}

.mbice-store-banner__status.is-closed {
	color: #e2664d;
}

.mbice-status-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: currentColor;
	display: inline-block;
}

.mbice-store-banner__social {
	margin: 0.5em 0 0;
	font-size: 0.9em;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 1.2em;
}

.mbice-social-link {
	color: var(--mbice-gold-light);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
}

.mbice-social-link:hover {
	color: var(--mbice-gold);
	text-decoration: underline;
}

.mbice-social-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* ============================================================
   Hero da home (Loja principal): tagline da marca com fundo em
   gradiente preto/dourado — a home era só a lista de produtos, sem
   nenhuma peça de identidade além do banner de endereço/horário.
   ============================================================ */
.mbice-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 15% 20%, rgba(223, 164, 40, 0.16) 0%, transparent 45%),
		radial-gradient(circle at 85% 75%, rgba(223, 164, 40, 0.1) 0%, transparent 50%),
		linear-gradient(135deg, var(--mbice-black) 0%, #171106 60%, var(--mbice-black) 100%);
	border: 1px solid var(--mbice-gold-dark);
	border-radius: 12px;
	padding: 2.5em 2em;
	margin: 1.5em 0;
	text-align: center;
}

.mbice-hero__eyebrow {
	color: var(--mbice-gold-light);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.8em;
	font-weight: 700;
	margin: 0 0 0.6em;
}

.mbice-hero__title {
	color: var(--mbice-ice);
	font-size: 2em;
	font-weight: 900;
	letter-spacing: 0.01em;
	line-height: 1.15;
	margin: 0 0 0.4em;
	text-transform: uppercase;
}

.mbice-hero__title strong {
	color: var(--mbice-gold);
}

.mbice-hero__tagline {
	color: var(--mbice-silver);
	font-size: 1.05em;
	margin: 0 auto;
	max-width: 480px;
}

@media (max-width: 480px) {
	.mbice-hero {
		padding: 1.75em 1.25em;
	}

	.mbice-hero__title {
		font-size: 1.5em;
	}
}

/* ============================================================
   Barra de busca + filtro de categorias no topo da Loja
   ============================================================ */
.mbice-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	background-color: var(--mbice-black-soft);
	border: 1px solid var(--mbice-gold-dark);
	border-radius: 8px;
	padding: 0.9em 1.1em;
	margin: 1em 0 1.5em;
	z-index: 500;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

/* Barra fixa no topo ao rolar. Controlada via JS (IntersectionObserver)
   em vez de "position: sticky" nativo — nesse tema o sticky não estava
   funcionando de forma confiável mesmo com o CSS correto (containing
   block herdado do layout do Storefront), então essa abordagem contorna
   o problema de forma garantida. */
.mbice-shop-toolbar.is-pinned {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	border-radius: 0;
	max-width: none;
}

.mbice-shop-toolbar-placeholder {
	display: none;
}

/* Barra de categorias em "pills" (chips) roláveis na horizontal — troca
   o <select> anterior (uma categoria por vez, escondida até abrir) por
   todas as categorias visíveis de cara, no mesmo estilo de selo/badge
   usado no resto da loja. São links reais (funcionam sem JS). */
.mbice-category-pills {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 0.2em 0.1em;
	margin-right: 0.75em;
	/* A lista rola na horizontal e é cortada bruscamente na borda direita
	   — sem isso, sobra um resquício da borda dourada do próximo selo
	   "flutuando" sozinho, parecendo elemento quebrado. O degradê some
	   suavemente com o conteúdo antes do corte, sinalizando "tem mais
	   pra rolar" em vez de simplesmente truncar. */
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

.mbice-category-pills::-webkit-scrollbar {
	display: none;
}

.mbice-category-pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 1.1em;
	border-radius: 999px;
	border: 1px solid var(--mbice-gold-dark);
	background-color: var(--mbice-black-elev);
	color: var(--mbice-silver);
	font-size: 0.82em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mbice-category-pill:hover,
.mbice-category-pill:focus-visible {
	border-color: var(--mbice-gold);
	color: var(--mbice-gold-light);
}

.mbice-category-pill.is-active {
	background-color: var(--mbice-gold);
	border-color: var(--mbice-gold);
	color: var(--mbice-black);
}

/* Campo de busca como uma peça só (input + botão), no mesmo estilo de
   "pílula" com borda dourada usado nos filtros de categoria ao lado —
   antes o input branco padrão do navegador destoava completamente do
   preto/dourado do resto da barra. */
.mbice-shop-toolbar .woocommerce-product-search {
	flex: 0 1 320px;
	display: flex;
	gap: 0;
	border: 1px solid var(--mbice-gold-dark);
	border-radius: 999px;
	background-color: var(--mbice-black-elev);
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.mbice-shop-toolbar .woocommerce-product-search:focus-within {
	border-color: var(--mbice-gold);
}

.mbice-shop-toolbar .woocommerce-product-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8d3c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0.9em center;
	background-size: 16px 16px;
	border: none;
	color: var(--mbice-ice);
	padding: 0 1em 0 2.6em;
}

.mbice-shop-toolbar .woocommerce-product-search input[type="search"]::placeholder {
	color: var(--mbice-silver);
	opacity: 0.75;
}

.mbice-shop-toolbar .woocommerce-product-search input[type="search"]:focus {
	outline: none;
}

.mbice-shop-toolbar .woocommerce-product-search button {
	flex: 0 0 auto;
	border: none;
	border-left: 1px solid var(--mbice-gold-dark);
	border-radius: 0;
	padding: 0 1.3em;
}

/* ============================================================
   Seções de categoria na Loja ("BEBIDAS", "CERVEJAS", etc.)
   ============================================================ */
.mbice-category-section {
	margin-bottom: 2.5em;
	/* Respiro ao rolar até a seção pelo filtro de categorias: a barra de
	   categorias agora fica fixa (sticky) no topo, então precisa desse
	   espaço pra não cobrir o título da seção. */
	scroll-margin-top: 90px;
}

.mbice-category-section__title {
	color: var(--mbice-gold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1.2em;
	font-weight: 800;
	border-bottom: 2px solid var(--mbice-gold-dark);
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	display: flex;
	align-items: center;
	gap: 0.6em;
}

/* Selo circular dourado antes do título — mesmo tratamento de ícone em
   círculo usado nos cardápios/posts da marca (ex.: "BEBIDAS GELADAS",
   "GELO DE QUALIDADE"), pra reforçar a identidade visual na loja. */
.mbice-category-section__title::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--mbice-black-elev);
	border: 1.5px solid var(--mbice-gold);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	/* Ícone genérico (garrafa) usado como fallback pra qualquer categoria
	   nova que ainda não tenha um ícone dedicado abaixo. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfa428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6M10 2v5.5L5.5 15a3 3 0 0 0 2.6 4.5h7.8a3 3 0 0 0 2.6-4.5L14 7.5V2'/%3E%3C/svg%3E");
}

/* Ícone por categoria — um desenho compatível com o que a seção vende,
   em vez da mesma garrafa genérica repetida em todo canto. Mira pelo
   "id" da seção (contém o slug da categoria, gerado no
   archive-product.php), sem precisar de nenhum campo extra no WP. */

/* Bebidas não alcoólicas: copo com canudo */
#mbice-cat-nao-alcoolicos .mbice-category-section__title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfa428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14l-1.3 15.7A3 3 0 0 1 14.7 21H9.3a3 3 0 0 1-3-2.3L5 3z'/%3E%3Cpath d='M5.6 8h12.8'/%3E%3Cpath d='M15 3l1 6'/%3E%3C/svg%3E");
}

/* Cervejas: caneca de chope com alça e espuma */
#mbice-cat-cervejas .mbice-category-section__title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfa428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h11v8a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9z'/%3E%3Cpath d='M16 11h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M5 9c0-2 1-4 3-4s2 1.5 3.5 1.5S13 5 14 6c.8.8 1 1.8 1 3'/%3E%3C/svg%3E");
}

/* Cigarro: cigarro aceso com fumaça */
#mbice-cat-cigarro .mbice-category-section__title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfa428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='11' width='15' height='4' rx='1'/%3E%3Cline x1='6.5' y1='11' x2='6.5' y2='15'/%3E%3Cpath d='M19 7c1.5 1 1.5 2 0 3s-1.5 2 0 3'/%3E%3C/svg%3E");
}

/* Destilados: copo baixo (tumbler) com gelo e dose */
#mbice-cat-destilados .mbice-category-section__title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfa428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='16' rx='1.5'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Crect x='9' y='14.5' width='3' height='3'/%3E%3C/svg%3E");
}

/* Energético: raio */
#mbice-cat-energetico .mbice-category-section__title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfa428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/%3E%3C/svg%3E");
}

/* Snacks: pacote de salgadinho */
#mbice-cat-snacks .mbice-category-section__title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfa428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l1.2 3.2H6.8L8 3z'/%3E%3Cpath d='M6.8 6.2h10.4l-1.6 13a2 2 0 0 1-2 1.8h-3.2a2 2 0 0 1-2-1.8l-1.6-13z'/%3E%3Cline x1='12' y1='10' x2='12' y2='17'/%3E%3C/svg%3E");
}

/* Outros (produtos sem categoria própria): caixa genérica */
#mbice-cat-uncategorized .mbice-category-section__title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfa428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='12' rx='1'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M12 8v12'/%3E%3Cpath d='M8 8c0-2 1.5-4 4-4s4 2 4 4'/%3E%3C/svg%3E");
}

/* ============================================================
   Remove o título de página duplicado (Loja, Carrinho, Finalizar
   Compra, Minha Conta) — o banner novo da loja já mostra o nome/
   identidade, esse título do Storefront ficava redundante e com
   espaçamento gigante embaixo.
   ============================================================ */
.woocommerce-shop .woocommerce-products-header,
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header {
	display: none;
}

/* ============================================================
   Alinhamento do texto na barra de busca + categorias
   ============================================================ */
.mbice-shop-toolbar,
.mbice-shop-toolbar * {
	line-height: normal;
}

.mbice-shop-toolbar .woocommerce-product-search input[type="search"],
.mbice-shop-toolbar .woocommerce-product-search button {
	height: 40px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 0;
}

/* ============================================================
   Checkout (blocos do WooCommerce): espaçamento mais respirado
   entre rótulo, campo e opções — texto estava muito colado.
   ============================================================ */
.wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-checkout__form .wc-block-components-text-input {
	margin-bottom: 1.1em !important;
}

.wc-block-components-text-input label,
.wc-block-components-address-form label {
	line-height: 1.4 !important;
}

.wc-block-components-radio-control__option {
	/* Mantém o espaço à esquerda (48px) que o WooCommerce reserva pro
	   círculo do radio, que é posicionado com "position: absolute" —
	   um "padding: 1em" uniforme aqui fazia o texto ficar em cima do
	   círculo. */
	padding: 0.9em 1em 0.9em 48px !important;
	margin-bottom: 0.6em !important;
	line-height: 1.4;
}

.wc-block-components-radio-control__option-layout {
	gap: 0.4em;
}

/* O círculo do radio é desenhado via CSS (appearance:none), não é o
   radio nativo do navegador — por isso "accent-color" não funciona
   nele. Força a cor dourada diretamente no indicador selecionado. */
.wc-block-components-radio-control__input {
	border-color: var(--mbice-gold-dark) !important;
	background-color: var(--mbice-black-elev) !important;
}

.wc-block-components-radio-control__input:checked {
	border-color: var(--mbice-gold) !important;
	background-color: var(--mbice-gold) !important;
}

.wc-block-components-radio-control__description {
	margin-top: 0.3em !important;
}

/* Esconde a opção "Usar o mesmo endereço para cobrança": já removemos
   o bloco de endereço de cobrança da página do checkout, então essa
   caixa de marcação não tem mais função — cobrança sempre acompanha
   a entrega automaticamente. (Classe corrigida: a anterior não
   correspondia a nenhum elemento real.) */
.wc-block-checkout__use-address-for-billing {
	display: none !important;
}

/* Esconde a seção "Opções de entrega": como só existe uma forma de
   entrega (calculada pelo CEP), mostrar uma escolha sem opção real só
   atrapalha — o valor continua sendo calculado e cobrado normalmente,
   só a seleção visual desaparece (removida também do conteúdo da
   página de checkout). */
.wc-block-checkout__shipping-option,
.wc-block-checkout__shipping-method {
	display: none !important;
}

/* "Opções de pagamento" usa uma variante da mesma família de radio
   (com acordeão pra mostrar a descrição do método) que não tinha
   recebido o estilo escuro — ficava com borda clara padrão, destoando
   do resto do checkout. */
.wc-block-components-radio-control-accordion-option {
	background-color: var(--mbice-black-elev) !important;
	border: 1px solid #2a2a2a !important;
	border-radius: 6px;
}

.wc-block-components-radio-control-accordion-option[aria-checked="true"] {
	border-color: var(--mbice-gold) !important;
}

/* WooCommerce desenha um anel de seleção (box-shadow inset bege claro,
   #d8d3c6) que vem de um fallback padrão do bloco, nunca coberto pelo
   nosso border acima — aparecia como uma linha clara em volta da opção
   marcada, destoando do preto/dourado. Sobrescrevemos com a cor do tema. */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	box-shadow: none !important;
}
.wc-block-components-radio-control-accordion-option[aria-checked="true"],
.wc-block-components-radio-control__option[aria-checked="true"] {
	box-shadow: 0 0 0 1.5px var(--mbice-gold) inset !important;
}

.wc-block-components-radio-control-accordion-content {
	background-color: var(--mbice-black-elev) !important;
	color: var(--mbice-silver) !important;
	border-top: 1px solid #2a2a2a !important;
	overflow-x: hidden;
}
.wc-block-components-radio-control-accordion-content::-webkit-scrollbar {
	height: 0;
	background: transparent;
}
.wc-block-components-radio-control-accordion-content {
	scrollbar-width: none;
}

/* ============================================================
   Revisão geral: elementos clássicos do WooCommerce que ainda não
   tinham identidade visual própria (Minha Conta, tabelas de pedido,
   paginação, avisos) — ficavam com o estilo padrão claro do tema,
   destoando do resto do site escuro.
   ============================================================ */
.woocommerce-MyAccount-navigation ul {
	border-top-color: #2a2a2a;
}

.woocommerce-MyAccount-navigation ul li {
	border-bottom-color: #2a2a2a;
}

.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link a:hover {
	color: var(--mbice-gold);
}

table.shop_table {
	border-color: #2a2a2a;
	color: var(--mbice-silver);
}

table.shop_table th {
	color: var(--mbice-gold);
	border-bottom: 2px solid var(--mbice-gold-dark) !important;
}

table.shop_table td,
table.shop_table th {
	border-color: #2a2a2a !important;
}

.woocommerce-pagination .page-numbers li span.page-numbers,
.woocommerce-pagination .page-numbers li a.page-numbers {
	color: var(--mbice-ice);
	border-color: #2a2a2a;
}

.woocommerce-pagination .page-numbers li span.page-numbers.current {
	background-color: var(--mbice-gold);
	color: var(--mbice-black);
}

.woocommerce-pagination .page-numbers li a.page-numbers:hover {
	background-color: var(--mbice-black-elev);
	color: var(--mbice-gold);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: var(--mbice-black-elev);
	color: var(--mbice-ice);
	border-top-color: var(--mbice-gold);
}

.woocommerce-message .button,
.woocommerce-info .button {
	background-color: var(--mbice-gold) !important;
	color: var(--mbice-black) !important;
}

/* ============================================================
   Login / "Minha Conta" (antes de entrar) — o formulário estava solto
   no topo da página, sem cartão, sem centralização, com uma área vazia
   enorme embaixo. "body.logged-in" nunca combina com esta página, então
   dá pra restringir o cartão só ao formulário de login/cadastro sem
   afetar o dashboard (pedidos, endereços etc.) de quem já está logado.
   ============================================================ */
body.woocommerce-account:not(.logged-in) .entry-content .woocommerce {
	max-width: 420px;
	margin: 3.5em auto;
	padding: 2em;
	background-color: var(--mbice-black-soft);
	border: 1px solid var(--mbice-gold-dark);
	border-radius: 10px;
}

body.woocommerce-account:not(.logged-in) .entry-content .woocommerce form.login,
body.woocommerce-account:not(.logged-in) .entry-content .woocommerce form.register {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

body.woocommerce-account:not(.logged-in) .entry-content .woocommerce .form-row label {
	display: block;
	margin-bottom: 0.35em;
	color: var(--mbice-ice);
}

body.woocommerce-account:not(.logged-in) .entry-content .woocommerce form.login p.lost_password {
	margin: 0;
}

/* Divisor "· · ·" do bloco de carrinho vazio (padrão do editor de blocos
   do WordPress) herdava a cor cinza do texto do corpo e ficava minúsculo
   e solto no meio do preto — parecia um ícone quebrado. Recolore pro
   dourado da marca e dá mais respiro ao redor. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator {
	margin: 1.75em auto;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
	color: var(--mbice-gold-dark);
}