/* Coringa Leve — categorias, tags e busca de produtos. Medidas dos modelos Elementor 1010
   (com a barra "Explore mais", 3 colunas) e 6497 (sem barra, 4 colunas) e do card 3188. */

.shop ul { margin: 0; padding: 0; list-style: none; }

/* Faixa com título e trilha */
.shop-head { position: relative; padding: 4em 1em; background: var(--navy); text-align: center; }
.shop-head::before { content: ""; position: absolute; inset: 0; opacity: .07; background-size: cover; pointer-events: none; }
.shop-head.is-near::before { background-image: url(/wp-content/uploads/2026/10/fundo-textura-720.webp); } /* textura leve (36 KB); com preload em templates/shop.php */
.shop-head__in { position: relative; display: flex; flex-direction: column; gap: 20px; max-width: 1300px; margin: 0 auto; }
.shop-head__title { margin: 15px 0 0; font: 500 25px/1 var(--fredoka); text-transform: uppercase; color: #fff; }
.shop-head .woocommerce-breadcrumb { margin: 0 0 1em; font: 400 16px/1.5 var(--poppins); color: #fff; }
.shop-head .woocommerce-breadcrumb a { color: #e2e2e2; }
.shop-head .woocommerce-breadcrumb a:hover { color: #fff; }

/* Abas das categorias principais. A ativa ganha o amarelo; o texto fica azul-marinho
   (branco no amarelo dava 1,9:1 de contraste). */
.cat-tabs { padding: 30px 0 20px; background: var(--gray); }
.shop .cat-tabs__list { display: flex; justify-content: center; max-width: 1200px; margin: 0 auto; }
.cat-tabs__item { flex: 1 1 0; min-width: 0; padding: 7px; }
.cat-tabs__link { display: flex; align-items: center; justify-content: center; height: 100%; padding: 15px; background: #fff; border: 1px solid var(--navy); border-radius: 5px; font: 500 18px/1 var(--fredoka); color: var(--navy); text-align: center; }
.cat-tabs__link:hover, .cat-tabs__link:focus-visible, .cat-tabs__link[aria-current] { background: var(--yellow); color: var(--navy); }

/* Barra lateral + vitrine */
.shop-main { display: flex; gap: 24px; min-height: 100vh; padding: 10px max(48px, calc((100% - 1200px) / 2)) 48px; background: var(--gray); }
.shop-main--side { padding-inline: max(48px, calc((100% - 1300px) / 2)); }
.shop-side { flex: 0 1 25%; min-width: 0; }
.shop-list { flex: 1 1 100%; min-width: 0; }
.shop-main--side .shop-list { flex: 0 1 85%; }

.sfilter { position: sticky; top: 10px; }
.sfilter__title { display: flex; justify-content: center; align-items: center; padding: 20px; background: var(--red); border: 1px solid #e8e8e8; border-bottom: 0; border-radius: 15px 15px 0 0; font: 500 22px/1 var(--fredoka); text-transform: uppercase; color: #fff; list-style: none; cursor: default; }
.sfilter__title::-webkit-details-marker { display: none; }
.sfilter__ico { display: none; }
.shop .sfilter__list { margin-bottom: 10px; padding: 20px; background: #fff; border: 1px solid #e8e8e8; border-top: 0; border-radius: 0 0 15px 15px; }
.sfilter__list li + li { margin-top: 13px; }
.sfilter__sub { margin-top: 8px; }
.shop .sfilter__sub { padding-left: 10px; }
.sfilter__link { display: flex; align-items: flex-start; min-height: 20px; padding-left: 25px; font: 500 16px/1.2 var(--poppins); color: #333; }
.sfilter__deco { flex: none; width: 16px; height: 16px; margin: calc((1.2em - 16px) / 2) 5px 0 0; background: #fff; border: 1px solid #ccc; border-radius: 3px; }
.sfilter__link:hover, .sfilter__link:focus-visible { color: var(--blue); }
.sfilter__link:hover .sfilter__deco, .sfilter__link:focus-visible .sfilter__deco { border-color: var(--blue); }

.shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: -2px 0 46px; }
.shop-main--side .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop .pcard { box-shadow: none; }
.shop-more { display: flex; justify-content: center; }
.shop-more .btn { font-weight: 500; }
.shop-more.is-loading .btn { opacity: .6; pointer-events: none; }
.shop-empty { margin: 20px 0; font: 500 18px/1.4 var(--poppins); color: var(--navy); text-align: center; }

/* Texto da categoria (SEO) */
.shop-desc { padding: 24px 20px 48px; }
.shop-desc__in { max-width: 1300px; margin: 0 auto; font: 400 15px/1.7 var(--poppins); color: var(--text); }
.shop-desc__in > :last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
	.shop-head__title { font-size: 16px; }
	.shop-main, .shop-main--side { gap: 15px; padding: 15px 15px 30px; }
	.shop-main--side .shop-side { flex-basis: 30%; }
	.shop-main--side .shop-list { flex-basis: 70%; }
	.sfilter__title { font-size: 16px; }
	.shop-grid, .shop-main--side .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: -4.5px; }
	.shop .pcard__btn .btn { font-size: 16px; }
}

@media (max-width: 767px) {
	.shop-head { padding: 35px 24px 24px; }
	.shop-head__title { margin-top: 0; font-size: 22px; }
	.cat-tabs { padding: 15px 0; }
	.shop .cat-tabs__list { flex-wrap: wrap; }
	.cat-tabs__item { flex: 0 0 50%; padding: 5px; }
	.cat-tabs__link { padding: 15px 0; font-size: 14px; }

	.shop-main, .shop-main--side { flex-direction: column; gap: 20px; padding: 0 10px 30px; }
	.shop-main--side .shop-side, .shop-main--side .shop-list { flex: none; }
	.sfilter { position: static; padding-bottom: 10px; }
	.sfilter__title { justify-content: space-between; padding: 15px; font: 600 16px/1.5 var(--fredoka); cursor: pointer; }
	.sfilter__ico { display: block; font-size: 15px; transform: rotate(90deg); }
	.sfilter[open] .sfilter__ico { transform: rotate(-90deg); }
	.shop .sfilter__list { margin-bottom: 0; padding: 15px 15px 30px; }
	.sfilter__list li + li, .sfilter__sub { margin-top: 5px; }
	.sfilter__link { font-size: 14px; }

	.shop-grid, .shop-main--side .shop-grid { gap: 10px; margin-top: -7px; }
	.shop .pcard { padding: 10px; }
	.shop .pcard__title { min-height: 50px; padding: 10px 10px 5px; font-size: 16px; justify-content: flex-start; }
	.shop .pcard__btn .btn { padding: 8px 7px; font-size: 12px; line-height: 1.2; white-space: normal; }
}

/* Todos Brinquedos e Mapa do Site: faixa azul com a mesma textura de formas das categorias, barra "Categorias" azul */
.shop-head--blue { background: var(--blue); }
.sfilter--blue .sfilter__title { background: var(--blue); }
@media (min-width: 1025px) { .shop--all .shop-main { padding-top: 48px; } }
/* Celular: sem as abas entre a faixa azul e o filtro, o filtro encostava na faixa. */
@media (max-width: 767px) { .shop--all .shop-main { padding-top: 15px; } }

/* Mapa do Site */
.smap__in { display: flex; flex-wrap: wrap; padding: 48px max(48px, calc((100% - 1300px) / 2)); background: var(--gray); }
.smap__sec { flex: 0 0 25%; min-width: 0; padding-right: 16px; }
.smap__title { margin: 8px 0 18px; font: 600 20px/1.2 var(--poppins); color: var(--blue); }
.smap .smap__list { margin: 0 0 24px; padding-left: 40px; list-style: disc; font: 400 15px/1.6 var(--poppins); color: var(--text); }
.smap__list a { color: var(--text); }
.smap__list a:hover { color: var(--blue); }
@media (max-width: 1024px) { .smap__sec { flex-basis: 50%; } }
@media (max-width: 767px) {
	.smap__in { padding: 15px 10px 30px; }
	.smap__sec { flex-basis: 100%; padding-right: 0; }
}

/* Filtro do catálogo: categoria marcada e vitrine carregando */
.sfilter__link.is-active { color: var(--blue); }
.sfilter__link.is-active .sfilter__deco { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 10px no-repeat; border-color: var(--blue); }
.shop-list.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s; }

/* Subcategorias: mesmo espaço entre todos os itens e botão de mostrar/esconder (− / +) */
.shop .sfilter__sub { margin-top: 13px; }
.sfilter__item--sub { position: relative; }
.sfilter__tog { position: absolute; top: 0; left: -4px; display: flex; align-items: center; justify-content: center; width: 22px; height: 20px; padding: 0; font: 600 16px/1 var(--poppins); color: #555; background: none; border: 0; cursor: pointer; }
.sfilter__tog::before { content: "\2212"; }
.sfilter__tog[aria-expanded="false"]::before { content: "+"; }
.sfilter__tog:hover, .sfilter__tog:focus-visible { color: var(--blue); }
.sfilter__tog[aria-expanded="false"] ~ .sfilter__sub { display: none; }
@media (max-width: 767px) { .shop .sfilter__sub { margin-top: 5px; } }