/* ============================================================================
 * Arabian Mirage — Loja por blocos (Product Collection + Product Filters)
 * "Vitrine Noturna" (2026-07-13): a loja inteira (vitrine/categoria/marca)
 * abandona o passe diurno (areia) e vira uma extensão do Ato III da home —
 * dark oud + dourado, cards noir-veil, filtros em "gabinete de curadoria".
 * Estilização branded dos blocos WooCommerce. Enfileirado só nos archives.
 * Tokens herdados de style.css :root (--am-noir, --am-gold, --am-bone, etc.).
 * Nenhuma classe/atributo funcional do WooCommerce Blocks foi removido —
 * só recoloração/reestilização do que já existia.
 * ========================================================================== */

/* ── Layout vitrine/categoria/marca ────────────────────────────────────────── */
.am-loja {
	padding-top: 1.5rem;
	padding-bottom: 3rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	box-sizing: border-box;
}
.am-loja__breadcrumbs {
	font-family: var(--am-font-body);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(245, 239, 227, 0.62); /* Item 5: margem AA (era .5, ~4.8:1 no limite) */
	margin-bottom: 1.5rem;
}
.am-loja__breadcrumbs a { color: rgba(245, 239, 227, 0.62); text-decoration: none; transition: color var(--am-transition); }
.am-loja__breadcrumbs a:hover { color: var(--am-gold); }

.am-loja__header {
	margin-bottom: 2.5rem;
}
.am-loja__title {
	margin: 0 0 .5rem;
}
.am-loja__description {
	font-family: var(--am-font-body);
	color: rgba(245, 239, 227, 0.6);
	max-width: 70ch;
	margin: 0;
	line-height: 1.6;
}

.am-loja__layout { align-items: flex-start; }

/* Item 3 (2026-07-13): sidebar FLUI com a página (era position: sticky; top:1rem).
   O gabinete de filtros é alto (todos os grupos + "+ Adicionar filtro" ao fim);
   fixá-lo no topo encalhava o controle de adicionar filtro quando o painel
   passava da altura da viewport — o usuário não alcançava o fundo ("não scrolla").
   Em fluxo normal, a rolagem da página inteira chega a todos os grupos e ao
   popover de adicionar filtro. */
.am-loja__sidebar { position: static; }

/* ── Gabinete de curadoria: painel dos filtros ─────────────────────────────── */
.am-loja-filtros {
	background: var(--am-noir-veil);
	border: 1px solid rgba(200, 161, 83, 0.18);
	border-radius: 4px;
	padding: 1.75rem 1.5rem;
}

/* ── Cabeçalho de cada filtro ──────────────────────────────────────────────── */
.am-loja-filtros .am-filter {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	position: relative;
	border-bottom: 1px solid rgba(200, 161, 83, 0.14);
}
.am-loja-filtros .am-filter:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.am-loja-filtros .am-filter__title {
	font-family: var(--am-font-heading);
	color: var(--am-bone);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 .8rem;
	position: relative;
	padding-right: 1.5rem;
	display: block;
	cursor: pointer;
	user-select: none;
	transition: color var(--am-transition);
}
.am-loja-filtros .am-filter__title:hover {
	color: var(--am-gold);
}
.am-loja-filtros .am-filter__title:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--am-gold);
}
/* Chevron dourado do acordeão */
.am-loja-filtros .am-filter:not(.am-filter--active) .am-filter__title::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 2px solid var(--am-gold);
	border-bottom: 2px solid var(--am-gold);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	position: absolute;
	right: 0.5rem;
	top: 0.4rem;
}
.am-loja-filtros .am-filter.is-open:not(.am-filter--active) .am-filter__title::after {
	transform: rotate(-135deg);
	top: 0.5rem;
}

/* Oculta o conteúdo dos filtros colapsados (comportamento — não tocar) */
.am-loja-filtros .am-filter:not(.is-open):not(.am-filter--active) > :nth-child(n+2):not(.am-filter__remove) {
	display: none !important;
}

/* Itens (checkbox list) — Montserrat; ativo/hover em ouro sobre noir. */
.am-loja-filtros .wc-block-product-filter-checkbox-list__item {
	font-family: var(--am-font-body);
	font-size: .9rem;
}
.am-loja-filtros .wc-block-product-filter-checkbox-list__text { color: rgba(245, 239, 227, 0.75); transition: color var(--am-transition); }

/* Checkbox dourado 1px, preenchimento dourado + check em noir quando marcado. */
.am-loja-filtros .wc-block-product-filter-checkbox-list__input-wrapper::before {
	display: none;
}
.am-loja-filtros .wc-block-product-filter-checkbox-list__input {
	background: transparent;
	border-color: rgba(200, 161, 83, 0.5);
}
.am-loja-filtros .wc-block-product-filter-checkbox-list__item:hover .wc-block-product-filter-checkbox-list__input {
	border-color: var(--am-gold);
}
.am-loja-filtros .wc-block-product-filter-checkbox-list__input:checked {
	accent-color: var(--am-gold);
	background: var(--am-gold);
	border-color: var(--am-gold);
}
.am-loja-filtros .wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark {
	color: var(--am-noir);
}
.am-loja-filtros .wc-block-product-filter-checkbox-list__input:focus-visible {
	outline: 2px solid var(--am-gold);
	outline-offset: 2px;
}
.am-loja-filtros .wc-block-product-filter-checkbox-list__input:disabled {
	background: rgba(245, 239, 227, 0.08);
	border-color: rgba(245, 239, 227, 0.2);
	cursor: not-allowed;
}
.am-loja-filtros .wc-block-product-filter-checkbox-list__input:disabled:checked + .wc-block-product-filter-checkbox-list__mark {
	color: rgba(245, 239, 227, 0.3);
}
.am-loja-filtros .wc-block-product-filter-checkbox-list__item:hover .wc-block-product-filter-checkbox-list__text {
	color: var(--am-flare);
}
.am-loja-filtros .wc-block-product-filter-checkbox-list__count {
	/* Item 5 (2026-07-13): bumped .4 -> .6 alpha so the count reaches AA on
	   the noir-veil filter panel (was ~3:1, below the 4.5 floor for small text). */
	color: rgba(245, 239, 227, 0.6);
	font-size: .8rem;
}

/* ── Chips de filtros ativos — outline dourado, preenche no hover ──────────── */
.am-filter--active { margin-bottom: 1.25rem; }
.wc-block-product-filter-removable-chips__item {
	background: transparent;
	color: var(--am-gold);
	border: 1px solid rgba(200, 161, 83, 0.5);
	border-radius: 999px;
	font-family: var(--am-font-body);
	font-size: .8rem;
	padding: .3rem .7rem;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	transition: background var(--am-transition), color var(--am-transition);
}
.wc-block-product-filter-removable-chips__item:hover {
	background: var(--am-gold);
	color: var(--am-noir);
}
.wc-block-product-filter-removable-chips__remove { color: currentColor; }

/* Botão "Limpar" (clear) — outline dourado sobre noir. */
.wp-block-woocommerce-product-filter-clear-button,
.wc-block-product-filter-clear-button {
	color: var(--am-gold);
	font-family: var(--am-font-body);
	font-size: .8rem;
	background: none;
	border: none;
	cursor: pointer;
}
.wp-block-woocommerce-product-filter-clear-button:hover { color: var(--am-flare); }

/* ── Slider de preço — trilho neutro, faixa preenchida e handles dourados ──── */
.am-filter--price .wc-block-product-filter-price-slider__range input[type="range"] {
	accent-color: var(--am-gold);
}
.am-filter--price .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb { background: var(--am-gold); }
.am-filter--price .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb { background: var(--am-gold); }
.am-filter--price .wc-block-product-filter-price-slider__range-input-wrapper input {
	background: transparent;
	border-color: rgba(200, 161, 83, 0.35);
	color: var(--am-bone);
}

/* ── Toolbar (contagem + ordenação) — quiet, tracked, sobre noir ───────────── */
.am-loja__toolbar {
	/* F1 (2026-07-13): explicit flex row — don't rely only on the Gutenberg
	   group layout attribute, so result-count and ordering group share one
	   vertical baseline regardless of block-library CSS load order. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	border-bottom: 1px solid rgba(200, 161, 83, 0.18);
	padding-bottom: .9rem;
	margin-bottom: 1.75rem;
	gap: 1rem;
}
.am-loja__toolbar .woocommerce-result-count {
	/* Item 2 (2026-07-13): muted-but-readable — .72 alpha (ratio >=4.5 on noir),
	   11px, .18em tracking, uppercase. */
	font-family: var(--am-font-body);
	color: rgba(245, 239, 227, 0.72);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin: 0;
}
.am-loja__toolbar .orderby,
.am-loja__toolbar select {
	font-family: var(--am-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	border: 1px solid rgba(200, 161, 83, 0.35);
	border-radius: 2px;
	padding: .5rem 2.2rem .5rem .8rem;
	color: var(--am-bone);
	background-color: transparent;
	color-scheme: dark;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C8A153' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
	transition: border-color var(--am-transition), box-shadow var(--am-transition);
}
.am-loja__toolbar .orderby:hover,
.am-loja__toolbar select:hover {
	border-color: var(--am-gold);
}
.am-loja__toolbar .orderby:focus,
.am-loja__toolbar select:focus {
	outline: none;
	border-color: var(--am-gold);
	box-shadow: 0 0 0 2px rgba(200, 161, 83, 0.3);
}
/* Opções do <select> nativo herdam color-scheme: dark do próprio elemento —
   evita o dropdown branco-sobre-branco no Chrome/Firefox/Safari. */

/* Item 1 (2026-07-13): o <select> vivo é `.woocommerce-ordering select`
   (bloco catalog-sorting) e herdava --am-text-dark (rgb 27,27,27 sobre noir =
   1.15:1, ilegível) da regra utilitária `.woocommerce .woocommerce-ordering
   select` (spec 0,3,1) do style.css. Sobe a especificidade aqui (0,4,1) pra
   vencer: texto --am-bone (>=4.5:1), borda + chevron dourados, color-scheme
   dark pro dropdown nativo. */
.am-loja__toolbar .woocommerce .wc-block-catalog-sorting select,
.am-loja__toolbar .wc-block-catalog-sorting .woocommerce-ordering select,
.am-loja__toolbar .woocommerce-ordering select.orderby {
	font-family: var(--am-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--am-bone);
	background-color: transparent;
	color-scheme: dark;
	border: 1px solid rgba(200, 161, 83, 0.6);
	border-radius: 2px;
	padding: .5rem 2.2rem .5rem .8rem;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C8A153' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
}
.am-loja__toolbar .woocommerce .wc-block-catalog-sorting select:hover,
.am-loja__toolbar .wc-block-catalog-sorting .woocommerce-ordering select:hover {
	border-color: var(--am-gold);
}
.am-loja__toolbar .woocommerce .wc-block-catalog-sorting select:focus,
.am-loja__toolbar .wc-block-catalog-sorting .woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--am-gold);
	box-shadow: 0 0 0 2px rgba(200, 161, 83, 0.3);
}
/* Eyebrow "ORDENAR" dourado à esquerda do select — deixa claro o que é o campo. */
.am-loja__toolbar .wc-block-catalog-sorting {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}
.am-loja__toolbar .wc-block-catalog-sorting::before {
	content: "ORDENAR";
	font-family: var(--am-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--am-gold);
	white-space: nowrap;
}

/* ── Cards de produto — linguagem .pcard-x da home aplicada ao grid real ──── */
.am-loja__grid .wc-block-product-template,
.am-loja__grid .wp-block-woocommerce-product-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 2rem !important;
}
@media (max-width: 768px) {
	.am-loja__grid .wc-block-product-template,
	.am-loja__grid .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 480px) {
	.am-loja__grid .wc-block-product-template,
	.am-loja__grid .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: .9rem !important;
	}
	.am-product-card__button .wp-block-button__link,
	.am-product-card__button button {
		font-size: .7rem;
		padding: .6rem .6rem;
	}
}

.am-loja__grid .wc-block-product {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important; /* Item 4: preenche a linha do grid -> cards da mesma linha com altura igual */
	background: var(--am-noir-veil) !important;
	border: none !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	transition: transform var(--am-dur-base) var(--am-ease-luxe) !important;
	margin: 0 !important;
	padding: 16px 16px 20px !important;
}
/* Filete foil que desenha da esquerda pra direita no hover (igual .pcard-x::after) */
.am-loja__grid .wc-block-product::after {
	content: '';
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 1px;
	background: var(--am-foil);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--am-dur-slow) var(--am-ease-luxe);
}
.am-loja__grid .wc-block-product:hover {
	transform: translateY(-8px);
}
.am-loja__grid .wc-block-product:hover::after { transform: scaleX(1); }

/* Imagem — auréola dourada radial atrás, saturação levemente reduzida,
   zoom suave no hover (mesma mecânica de .pcard-x__img). */
.am-product-card__image {
	position: relative;
	margin: 0 0 16px !important;
	aspect-ratio: 3 / 3.3;
	overflow: hidden;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.am-product-card__image::before {
	content: '';
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 161, 83, 0.22), transparent 65%);
	opacity: 0;
	transition: opacity var(--am-dur-slow);
	z-index: 1;
	pointer-events: none;
}
.am-loja__grid .wc-block-product:hover .am-product-card__image::before { opacity: 1; }
.am-product-card__image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	filter: saturate(.92);
	transition: transform var(--am-dur-slow) var(--am-ease-luxe);
}
.am-loja__grid .wc-block-product:hover .am-product-card__image img { transform: scale(1.05); }

/* Eyebrow de marca (injetado via render_block, ver inc/loja-blocos.php) */
.am-pc-eyebrow {
	font-family: var(--am-font-body);
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(245, 239, 227, 0.62); /* Item 5: margem AA (era .5, ~4.8:1 no limite) */
	margin: 0 0 2px;
	text-align: center;
}

.am-product-card__title {
	margin: 0 !important;
	padding: 0 !important;
}
.am-product-card__title a {
	font-family: var(--am-font-heading);
	font-weight: 400;
	color: var(--am-bone);
	font-size: 1.05rem;
	text-decoration: none;
	transition: color var(--am-transition);
}
.am-product-card__title a:hover { color: var(--am-gold); }

/* Família olfativa (injetada via render_block) */
.am-pc-fam {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--am-gold);
	margin: 4px 0 0;
	text-align: center;
}

/* Preço — sussurrado, NUNCA vermelho (política de marca: luxo não grita preço). */
.am-product-card__price {
	font-family: var(--am-font-body);
	color: var(--am-bone);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: .03em;
	margin: 10px 0 0 !important;
	padding: 0 !important;
}
.am-product-card__price del { color: rgba(245, 239, 227, 0.4); font-weight: 400; font-size: 12px; }
.am-product-card__price ins { color: var(--am-bone); text-decoration: none; font-weight: 400; }

/* Botão "Adicionar ao carrinho" — ghost dourado (.btn-x), preenche no hover. */
.am-product-card__button {
	margin: 14px 0 0 !important;
	padding: 0 !important;
	margin-top: auto !important; /* Item 4: empurra o CTA pro rodapé -> botões alinhados mesmo com títulos de alturas diferentes */
}
.am-product-card__button .wp-block-button__link,
.am-product-card__button a,
.am-product-card__button button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: transparent;
	color: var(--am-bone);
	border: 1px solid rgba(200, 161, 83, 0.5);
	border-radius: 2px;
	font-family: var(--am-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	padding: 12px 10px;
	transition: background var(--am-transition), color var(--am-transition), border-color var(--am-transition);
}
.am-product-card__button .wp-block-button__link:hover,
.am-product-card__button a:hover,
.am-product-card__button button:hover {
	background: var(--am-gold);
	color: var(--am-noir);
	border-color: var(--am-gold);
}

/* Badge "◆ Oferta" — herda .wc-block-components-product-sale-badge do style.css
   (dourado, glifo ◆ via ::before); garante posição dentro do card. */
.am-product-card__badge {
	position: absolute;
	top: .5rem;
	left: .5rem;
	z-index: 2;
	width: max-content !important;
	white-space: nowrap !important;
}

/* ── Paginação — tracked uppercase, página atual/hover em dourado ──────────── */
.am-loja__pagination {
	margin-top: 3rem;
	gap: .5rem;
}
.am-loja__pagination .page-numbers {
	font-family: var(--am-font-body);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(245, 239, 227, 0.6);
	padding: .5rem .9rem;
	border: 1px solid rgba(200, 161, 83, 0.25);
	border-radius: 2px;
	text-decoration: none;
	transition: background var(--am-transition), color var(--am-transition), border-color var(--am-transition);
}
.am-loja__pagination .page-numbers.current,
.am-loja__pagination .page-numbers:hover {
	background: var(--am-gold);
	border-color: var(--am-gold);
	color: var(--am-noir);
}

/* ── Sem resultados (Product Collection: zero produtos após filtro) ────────── */
.am-loja__no-results {
	text-align: center;
	padding: 3.5rem 1.5rem;
	background: var(--am-noir-veil);
	border: 1px solid rgba(200, 161, 83, 0.18);
	border-radius: 4px;
	gap: 1rem;
}
.am-loja__no-results p {
	font-family: var(--am-font-whisper);
	font-style: italic;
	font-size: 1.1rem;
	color: rgba(245, 239, 227, 0.75);
	margin: 0;
}
.am-loja__no-results p strong {
	font-family: var(--am-font-heading);
	font-style: normal;
	color: var(--am-bone);
	font-size: 1.3rem;
}
.am-loja__no-results a {
	color: var(--am-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.am-loja__no-results a:hover { color: var(--am-flare); }
.am-loja__no-results-jade {
	margin-top: .5rem;
	font-family: var(--am-font-body);
	font-size: .9rem;
	color: rgba(245, 239, 227, 0.6);
}
.am-loja__no-results-jade .am-chat-trigger {
	display: inline-flex;
	align-items: center;
	margin-top: .75rem;
	background: transparent;
	color: var(--am-gold);
	border: 1px solid rgba(200, 161, 83, 0.5);
	border-radius: 2px;
	font-family: var(--am-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: .8rem 1.5rem;
	cursor: pointer;
	transition: background var(--am-transition), color var(--am-transition);
}
.am-loja__no-results-jade .am-chat-trigger:hover {
	background: var(--am-gold);
	color: var(--am-noir);
}

/* ── Subcategorias (bloco arabian-mirage/loja-subcategorias) ───────────────── */
.am-subcats-wrapper {
	margin-bottom: 3rem;
}
.am-subcats-title {
	font-family: var(--am-font-heading);
	color: var(--am-bone);
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 0 1.5rem 0;
	border-left: 2px solid var(--am-gold);
	padding-left: 0.75rem;
	line-height: 1.1;
}
.am-subcats {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1.25rem;
}
.am-subcat {
	position: relative;
}
.am-subcat__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--am-bone);
	background: var(--am-noir-veil);
	border: none;
	border-radius: 4px;
	padding: 1.25rem 1rem;
	transition: transform var(--am-dur-base) var(--am-ease-luxe);
}
.am-subcat__link::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 1px;
	background: var(--am-foil);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--am-dur-slow) var(--am-ease-luxe);
}
.am-subcat__link:hover { transform: translateY(-4px); }
.am-subcat__link:hover::after { transform: scaleX(1); }
.am-subcat__media img { width: 100%; height: auto; margin-bottom: .8rem; border-radius: 2px; filter: saturate(.92); }
.am-subcat__name {
	font-family: var(--am-font-heading);
	color: var(--am-bone);
	font-size: .95rem;
}
.am-subcat .am-cat-count { color: rgba(245, 239, 227, 0.45); font-size: .8rem; }

/* ── "+ Adicionar filtro" (progressive disclosure) ─────────────────────────── */
.am-add-filter { position: relative; margin-top: .5rem; }
.am-add-filter__toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--am-font-body);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--am-gold);
	background: none;
	border: 1px dashed rgba(200, 161, 83, 0.5);
	border-radius: 2px;
	padding: .6rem .8rem;
	cursor: pointer;
	width: 100%;
	justify-content: center;
	transition: background var(--am-transition), color var(--am-transition);
}
.am-add-filter__toggle:hover { background: var(--am-gold); color: var(--am-noir); }
.am-add-filter__plus { font-size: 1.1em; line-height: 1; }
.am-add-filter__panel {
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	margin-top: .35rem;
	background: var(--am-noir-deep);
	border: 1px solid var(--am-gold);
	border-radius: 4px;
	padding: .6rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.am-add-filter__search {
	width: 100%;
	font-family: var(--am-font-whisper);
	font-style: italic;
	font-size: .9rem;
	padding: .5rem .1rem;
	border: none;
	border-bottom: 1px solid rgba(200, 161, 83, 0.4);
	border-radius: 0;
	background: transparent;
	color: var(--am-bone);
	margin-bottom: .5rem;
	transition: border-color var(--am-transition);
}
.am-add-filter__search:focus {
	outline: none;
	border-color: var(--am-gold);
}
.am-add-filter__search::placeholder {
	color: rgba(245, 239, 227, 0.4);
}
/* Item 3 (2026-07-13): lista rola internamente e nunca ultrapassa a viewport. */
.am-add-filter__list { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 360px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.am-add-filter__option {
	font-family: var(--am-font-body);
	font-size: .85rem;
	color: rgba(245, 239, 227, 0.75);
	padding: .5rem .6rem;
	border-radius: 2px;
	cursor: pointer;
}
.am-add-filter__option:hover,
.am-add-filter__option:focus {
	background: var(--am-gold);
	color: var(--am-noir);
	outline: none;
}
.am-add-filter__empty {
	font-family: var(--am-font-body);
	font-size: .8rem;
	color: rgba(245, 239, 227, 0.4);
	padding: .5rem .6rem;
}

/* Pool oculto por padrão; revelado pelo componente JS (.is-revealed) — comportamento, não tocar. */
.am-loja-filtros .am-filter--optional { display: none; }
.am-loja-filtros .am-filter--optional.is-revealed { display: block; position: relative; }
.am-filter__remove {
	position: absolute;
	top: 0.2rem;
	right: 1.5rem;
	background: none;
	border: none;
	color: rgba(245, 239, 227, 0.5);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	z-index: 10;
}
.am-filter__remove:hover { color: var(--am-gold); }

.am-loja-filtros .am-filter--optional .am-filter__title {
	padding-right: 2.75rem;
}

/* ── Drawer/overlay mobile + responsivo ────────────────────────────────────── */

/* Botão "Filtrar" que abre o overlay no mobile — ghost dourado (oculto no desktop). */
.wc-block-product-filters__open-overlay,
.wp-block-woocommerce-product-filters__open-overlay {
	background: transparent !important;
	color: var(--am-gold) !important;
	border: 1px solid rgba(200, 161, 83, 0.5) !important;
	border-radius: 2px !important;
	font-family: var(--am-font-body) !important;
	font-weight: 600 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	padding: 0.75rem 1.25rem !important;
	cursor: pointer !important;
	display: none !important; /* Oculto no desktop por padrão */
	align-items: center !important;
	gap: 0.5rem !important;
	font-size: 0.8rem !important;
	transition: background var(--am-transition) !important, color var(--am-transition) !important;
	margin-bottom: 1.5rem !important;
}
.wc-block-product-filters__open-overlay:hover,
.wp-block-woocommerce-product-filters__open-overlay:hover {
	background: var(--am-gold) !important;
	color: var(--am-noir) !important;
	border-color: var(--am-gold) !important;
}
.wc-block-product-filters__open-overlay svg,
.wp-block-woocommerce-product-filters__open-overlay svg {
	width: 18px !important;
	height: 18px !important;
	fill: currentColor !important;
}

/* Cabeçalho do drawer (oculto no desktop). */
.wc-block-product-filters__overlay-header {
	font-family: var(--am-font-heading) !important;
	color: var(--am-gold) !important;
	background: var(--am-noir-deep) !important;
	border-bottom: 1px solid rgba(200, 161, 83, 0.25) !important;
	padding: 1rem 1.5rem !important;
	display: none !important; /* Oculto no desktop por padrão */
	justify-content: space-between !important;
	align-items: center !important;
}
.wc-block-product-filters__overlay-header::before {
	content: "Filtros";
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: .03em;
}

/* Botão Fechar do drawer */
.wc-block-product-filters__close-overlay {
	background: none !important;
	border: none !important;
	color: var(--am-gold) !important;
	font-family: var(--am-font-body) !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	font-size: 0.95rem !important;
	padding: 0 !important;
}
.wc-block-product-filters__close-overlay svg {
	width: 20px !important;
	height: 20px !important;
	fill: currentColor !important;
}

/* Rodapé do drawer (Apply/Aplicar) (oculto no desktop). */
.wc-block-product-filters__overlay-footer {
	box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4) !important;
	padding: 1rem 1.5rem !important;
	background: var(--am-noir-deep) !important;
	display: none !important; /* Oculto no desktop por padrão */
}
.wc-block-product-filters__apply {
	background: var(--am-gold) !important;
	color: var(--am-noir) !important;
	font-family: var(--am-font-body) !important;
	font-weight: 600 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	border: 1px solid var(--am-gold) !important;
	border-radius: 2px !important;
	padding: 0.75rem 1.5rem !important;
	width: 100% !important;
	cursor: pointer !important;
	font-size: 0.85rem !important;
	text-align: center !important;
	transition: background var(--am-transition) !important;
}
.wc-block-product-filters__apply:hover {
	background: var(--am-flare) !important;
}

/* Wrapper/Container do drawer */
.wc-block-product-filters__overlay-wrapper {
	background: var(--am-noir) !important;
}
.wc-block-product-filters__overlay {
	background: var(--am-noir) !important;
}

@media (max-width: 768px) {
	/* Colunas empilham; a sidebar/overlay nativo do product-filters assume. */
	.am-loja__layout { flex-direction: column; }
	.am-loja__sidebar { position: static; width: 100%; flex-basis: auto !important; }
	/* A coluna principal é um flex item com `min-width: auto` (min-content); um
	   descendente largo — o <select> de ordenação em width:100% do WooCommerce —
	   a impede de encolher abaixo de 100vw, estourando 20px além do track de
	   350px (padding de .am-loja) → scroll horizontal no mobile. `min-width: 0`
	   remove esse piso de min-content e a coluna volta a caber no track. */
	.am-loja__main { width: 100%; min-width: 0; box-sizing: border-box; }
	/* O <select> de ordenação tem min-content ditado pela opção mais longa
	   ("Ordenar por preço: maior para menor") — como flex item com
	   `min-width: auto` ele se recusa a encolher abaixo disso e estoura o
	   track no mobile. Damos a ele a linha inteira (flex 1 1 100%) + `min-width: 0`
	   pra poder encolher, e o próprio select vira width:100% do track. */
	.am-loja__toolbar .wc-block-catalog-sorting { flex: 1 1 100%; min-width: 0; max-width: 100%; }
	.am-loja__toolbar .woocommerce-ordering { width: 100%; max-width: 100%; }
	.am-loja__toolbar .orderby,
	.am-loja__toolbar select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
	.am-loja__grid .wc-block-product-template,
	.am-loja__grid .wp-block-woocommerce-product-template {
		gap: 1rem;
	}

	/* Ajustes de responsividade do overlay no mobile (alinha nosso breakpoint com o do WC) */
	.wc-block-product-filters__open-overlay,
	.wp-block-woocommerce-product-filters__open-overlay {
		display: inline-flex !important;
		width: 100% !important;
		justify-content: center !important;
	}

	.wc-block-product-filters__overlay-header {
		display: flex !important;
	}

	.wc-block-product-filters__overlay-footer {
		display: block !important;
	}

	.wc-block-product-filters__overlay {
		display: none !important;
	}
	.is-overlay-opened .wc-block-product-filters__overlay {
		display: flex !important;
	}
}

/* ── Busca por nome (bloco arabian-mirage/product-filter-search) ──────────── */
/* Fio dourado só embaixo (sem caixa branca) + itálico Cormorant no placeholder. */
.am-filter--search {
	margin-bottom: 1.5rem;
}
.am-search-field__input {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--am-font-whisper);
	font-style: italic;
	font-size: 1rem;
	padding: .5rem .1rem;
	border: none;
	border-bottom: 1px solid rgba(200, 161, 83, 0.4);
	border-radius: 0;
	color: var(--am-bone);
	background-color: transparent;
	caret-color: var(--am-gold);
	transition: border-color var(--am-transition);
}
.am-search-field__input:focus {
	outline: none;
	border-color: var(--am-gold);
}
.am-search-field__input::placeholder {
	color: rgba(245, 239, 227, 0.4);
	font-family: var(--am-font-whisper);
	font-style: italic;
}