/*
Theme Name: Ateliê
Theme URI: https://andressachaves.art.br
Description: Tema filho do Storefront para a loja do Ateliê Andressa Chaves. O conteúdo cresce com a janela, a grade de produtos é fluida e o modo escuro segue o sistema do visitante.
Author: Ateliê Andressa Chaves
Template: storefront
Version: 1.0.0
Text Domain: atelie
Update URI: false
*/

/* ==========================================================================
   1. Variáveis. O claro repete as cores do Personalizar; o escuro vem do sistema do visitante.
   ========================================================================== */
:root {
	color-scheme: light dark;
	--a-bg: #fff;
	--a-superficie: #fff;
	--a-faixa: #f3f6f8;
	--a-borda: #dde4ea;
	--a-texto: #3b4650;
	--a-titulo: #1f2933;
	--a-suave: #5b6772;
	--a-acento: #009ace;
	--a-acento-hover: #007aa3;
	--a-sobre-acento: #fff;
	--a-link-rodape: #007aa3;
	--a-selo-fundo: #e6f6fb;
	--a-selo-texto: #00607f;
	--a-gutter: clamp(1rem, 2.2vw, 2.25rem);
	--a-gap: clamp(.75rem, 1.1vw, 1.5rem);
	--a-card-min: 150px;
	--a-galeria-max: 580px;
}

@media (min-width: 600px) {
	:root { --a-card-min: 190px; }
}

@media (min-width: 1000px) {
	:root { --a-card-min: 200px; }
}

@media (min-width: 1700px) {
	:root { --a-card-min: 240px; }
}

/* ==========================================================================
   2. Base e telas largas. O Storefront trava o .col-full em 66,5em (cerca de 1064 px).
   ========================================================================== */
html {
	font-size: clamp(1rem, .875rem + .25vw, 1.125rem); /* de 16 a 18 px com a fonte padrão do navegador, e acompanha a escolha do visitante */
}

h1, .alpha { font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); }
h2, .beta { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); }
h3, .gamma { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
.page-template-template-homepage .entry-header h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }

@media (min-width: 768px) {
	.col-full {
		box-sizing: border-box;
		max-width: min(94vw, 2300px);
		margin-inline: auto;
		padding-inline: var(--a-gutter);
	}
}

/* ==========================================================================
   3. Cabeçalho: logo, busca e menu acompanham a largura.
   ========================================================================== */
.site-header .custom-logo-link img {
	width: clamp(110px, 5vw + 40px, 150px);
	max-width: none;
	max-height: none;
	height: auto;
}

.custom-logo-link picture { display: block; }

@media (min-width: 768px) {
	.woocommerce-active .site-header .site-branding { width: auto; max-width: 60%; margin-right: 0; }
	.woocommerce-active .site-header .site-search { width: min(24rem, 38%); }
	.woocommerce-active .site-header .main-navigation { width: 100%; margin-right: 0; }
}

/* Em tablet o menu inteiro tem de caber numa linha: sem isso, "WhatsApp" sobra sozinho numa segunda linha alta. */
@media (min-width: 768px) and (max-width: 1023px) {
	.main-navigation ul.menu { margin-left: -.75em; }
	.main-navigation ul.menu > li > a { padding-inline: .75em; }
}

/* ==========================================================================
   4. Grade fluida de produtos, categorias e seções da página inicial.
   ========================================================================== */
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--a-card-min)), 1fr));
	gap: var(--a-gap);
	margin: 0 0 var(--a-gap);
	padding: 0;
}

/* Os pseudo-elementos que limpam o float virariam células vazias da grade. */
ul.products::before, ul.products::after { content: none; display: none; }

/* O Storefront dimensiona o card em % com até 5 classes por seletor e usa !important em first e last. */
ul.products li.product {
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: clamp(.5rem, 1vw, .75rem);
	background: var(--a-superficie);
	border: 1px solid var(--a-borda);
	border-radius: .75rem;
	font-size: .95rem;
}

ul.products li.product > a.woocommerce-LoopProduct-link { flex: 1 1 auto; }

/* As 6 categorias da página inicial usam 2, 3 ou 6 colunas, para a última linha nunca ficar com uma categoria só. */
.storefront-product-categories ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

ul.products li.product img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0 0 .75rem;
	border-radius: .5rem;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-category__title {
	margin: 0 0 .35rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

ul.products li.product .price {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	font-weight: 600;
}

ul.products li.product .button {
	display: block;
	width: 100%;
	margin: .5rem 0 0;
	text-align: center;
	border-radius: .5rem;
}

@media (min-width: 600px) {
	.storefront-product-categories ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	ul.products li.product .woocommerce-loop-product__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}
}

@media (min-width: 1100px) {
	.storefront-product-categories ul.products { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ==========================================================================
   5. Barra de ordenação, produtos por página e paginação.
   ========================================================================== */
.storefront-sorting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.25rem;
	margin-bottom: var(--a-gap);
}

.storefront-sorting::before, .storefront-sorting::after { content: none; display: none; }
.storefront-sorting .woocommerce-notices-wrapper:empty { display: none; }

.storefront-sorting .woocommerce-ordering,
.storefront-sorting .woocommerce-result-count {
	float: none;
	margin: 0;
	padding: 0;
}

.storefront-sorting .woocommerce-ordering select {
	padding: .45rem .75rem;
	border: 1px solid var(--a-borda);
	border-radius: .5rem;
	background-color: var(--a-superficie);
	color: var(--a-texto);
}

.storefront-sorting .woocommerce-pagination {
	float: none;
	flex: 1 1 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.atelie-por-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.atelie-por-pagina ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.atelie-por-pagina li + li::before { content: "·"; margin: 0 .45rem; color: var(--a-suave); }
.atelie-por-pagina a { text-decoration: underline; }
.atelie-por-pagina a:hover { text-decoration: none; }
.atelie-por-pagina [aria-current] { font-weight: 700; color: var(--a-titulo); }

.woocommerce-pagination .page-numbers li .page-numbers { border-radius: .4rem; }

@media (min-width: 768px) {
	.storefront-sorting .woocommerce-pagination { flex: 0 1 auto; margin-left: auto; }
}

@media (max-width: 767px) {
	.storefront-sorting .woocommerce-ordering { flex: 1 1 100%; }
	.storefront-sorting .woocommerce-ordering select { width: 100%; }
}

/* ==========================================================================
   6. Página do produto: galeria, resumo legível ao lado e abas na largura da página. O teto da galeria é o das fotos:
   as do Elo7 têm no máximo 580 px, e ampliar além disso só borra. Para fotos maiores, subir --a-galeria-max (até 760px).
   O Storefront tem variantes .storefront-full-width-content.single-product com 4 classes, por isso a classe dobrada.
   ========================================================================== */
@media (min-width: 1024px) {
	.single-product div.product {
		display: grid;
		grid-template-columns: 1fr minmax(0, var(--a-galeria-max)) minmax(0, 720px) 1fr;
		align-items: start;
	}

	.single-product div.product::before, .single-product div.product::after { content: none; display: none; }

	.single-product.single-product div.product .images,
	.single-product.single-product div.product .woocommerce-product-gallery {
		grid-column: 2;
		width: auto;
		float: none;
		margin-right: 0;
	}

	.single-product.single-product div.product .summary {
		grid-column: 3;
		width: auto;
		float: none;
		padding-left: clamp(1.5rem, 3vw, 3.5rem);
	}

	.single-product div.product .woocommerce-product-gallery__image img { margin-inline: auto; }

	/* Abas: lista estreita e texto com linhas legíveis, centrados sob a galeria e o resumo. */
	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related,
	.single-product div.product .up-sells { grid-column: 1 / -1; }

	.single-product div.product .woocommerce-tabs {
		display: grid;
		grid-template-columns: minmax(10rem, 18rem) minmax(0, 72ch);
		column-gap: clamp(1.5rem, 4vw, 4rem);
		justify-content: center;
		align-items: start;
	}

	.single-product div.product .woocommerce-tabs::before, .single-product div.product .woocommerce-tabs::after { content: none; display: none; }
	.single-product div.product .woocommerce-tabs ul.tabs { grid-area: 1 / 1; width: auto; float: none; margin: 0; }
	.single-product div.product .woocommerce-tabs .panel { grid-area: 1 / 2; width: auto; float: none; margin: 0 0 3.7em; }
}

/* ==========================================================================
   7. Catálogo com encomenda pelo WhatsApp (antes era CSS inline do mu-plugin).
   ========================================================================== */
.atelie-encomenda { margin: 1.2em 0; }
.atelie-prazo { margin: 0 0 1em; font-size: 1.05em; }

.atelie-pronta {
	display: inline-block;
	margin: 0 0 .8em;
	padding: .2em .7em;
	border-radius: 1em;
	line-height: 1.3;
	background: var(--a-selo-fundo);
	color: var(--a-selo-texto);
	font-size: .85em;
	font-weight: 700;
}

ul.products .atelie-pronta { margin-bottom: .5rem; font-size: .8rem; }

.atelie-whatsapp {
	display: inline-block;
	padding: .8em 1.6em;
	border-radius: 999px;
	background: var(--a-acento);
	color: var(--a-sobre-acento);
	font-size: 1.2rem;
	font-weight: 700;
	text-decoration: none;
}

.atelie-whatsapp:hover, .atelie-whatsapp:focus { background: var(--a-acento-hover); color: var(--a-sobre-acento); }

/* ==========================================================================
   8. Rodapé com as redes do ateliê.
   ========================================================================== */
.atelie-rodape { text-align: center; }
.atelie-rodape p { margin: 0 0 .3em; }

.atelie-redes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .75rem;
	margin: .9rem 0 0;
	padding: 0;
	list-style: none;
}

.atelie-redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid currentcolor;
	border-radius: 50%;
	text-decoration: none;
}

.atelie-redes a:hover, .atelie-redes a:focus-visible { background: color-mix(in srgb, currentcolor 14%, transparent); }
.atelie-redes svg { width: 1.35rem; height: 1.35rem; fill: currentcolor; }

/* ==========================================================================
   9. Celular: botões de largura total, sem rolagem horizontal.
   ========================================================================== */
@media (max-width: 599px) {
	.atelie-whatsapp { display: block; padding: .9em 1em; text-align: center; }
}

/* ==========================================================================
   10. Modo escuro, só pelo sistema do visitante. O Storefront injeta as cores do Personalizar em CSS inline,
   então os seletores abaixo repetem os dele com o prefixo html para vencer sem !important.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root {
		--a-bg: #121417;
		--a-superficie: #1a1e23;
		--a-faixa: #0e1013;
		--a-borda: #2b3238;
		--a-texto: #e6e8eb;
		--a-titulo: #f2f4f6;
		--a-suave: #a9b1ba;
		--a-acento: #2bb3e6;
		--a-acento-hover: #5cc6ee;
		--a-sobre-acento: #08151c;
		--a-link-rodape: #2bb3e6;
		--a-selo-fundo: rgb(43 179 230 / 16%);
		--a-selo-texto: #8bd8f4;
	}

	html, body { background-color: var(--a-bg); color: var(--a-texto); }
	h1, h2, h3, h4, h5, h6, .wc-block-grid__product-title { color: var(--a-titulo); }
	a { color: var(--a-acento); }

	/* Cabeçalho, menu e barra do celular */
	html .site-header,
	html .secondary-navigation ul ul,
	html .main-navigation ul.menu > li.menu-item-has-children::after,
	html .storefront-handheld-footer-bar,
	html .storefront-handheld-footer-bar ul li > a,
	html .storefront-handheld-footer-bar ul li.search .site-search,
	html button.menu-toggle,
	html button.menu-toggle:hover { background-color: var(--a-superficie); }

	html .site-header { border-bottom-color: var(--a-borda); }
	html p.site-description, html .site-header, html .storefront-handheld-footer-bar { color: var(--a-texto); }

	html .main-navigation ul li a,
	html .site-title a,
	html ul.menu li a,
	html .site-branding h1 a,
	html button.menu-toggle,
	html button.menu-toggle:hover,
	html .handheld-navigation .dropdown-toggle { color: var(--a-titulo); }

	html .main-navigation ul li a:hover,
	html .main-navigation ul li:hover > a,
	html .site-title a:hover,
	html .site-header ul.menu li.current-menu-item > a { color: var(--a-acento); }

	html button.menu-toggle, html button.menu-toggle:hover { border-color: var(--a-titulo); }
	html button.menu-toggle::after, html button.menu-toggle::before, html button.menu-toggle span::before { background-color: var(--a-titulo); }

	/* Campos e busca */
	html input[type="text"], html input[type="number"], html input[type="email"], html input[type="tel"],
	html input[type="url"], html input[type="password"], html input[type="search"], html textarea, html .input-text {
		background-color: #23282e;
		color: var(--a-texto);
	}

	html input[type="search"]::placeholder { color: var(--a-suave); }
	html .widget_search form::before, html .widget_product_search form::before { color: var(--a-suave); }

	/* Botões: azul claro com texto escuro, que passa de 7:1 de contraste */
	html button, html input[type="button"], html input[type="reset"], html input[type="submit"],
	html .button, html .widget a.button, html .added_to_cart,
	html button.alt, html .button.alt {
		background-color: var(--a-acento);
		border-color: var(--a-acento);
		color: var(--a-sobre-acento);
	}

	html button:hover, html input[type="button"]:hover, html input[type="reset"]:hover, html input[type="submit"]:hover,
	html .button:hover, html .widget a.button:hover, html .added_to_cart:hover,
	html button.alt:hover, html .button.alt:hover {
		background-color: var(--a-acento-hover);
		border-color: var(--a-acento-hover);
		color: var(--a-sobre-acento);
	}

	/* Preço, paginação, breadcrumb e abas */
	html ul.products li.product .price, html .woocommerce-tabs ul.tabs li.active a, html .onsale { color: var(--a-titulo); }
	html .onsale { border-color: var(--a-titulo); }
	html .woocommerce-breadcrumb a, html a.woocommerce-review-link, html .product_meta a { color: var(--a-acento); }

	html .pagination .page-numbers li .page-numbers,
	html .woocommerce-pagination .page-numbers li .page-numbers:not(.current) {
		background-color: var(--a-superficie);
		color: var(--a-texto);
	}

	html .pagination .page-numbers li .page-numbers.current,
	html .woocommerce-pagination .page-numbers li .page-numbers.current {
		background-color: var(--a-acento);
		color: var(--a-sobre-acento);
	}

	html .pagination .page-numbers li a.page-numbers:hover,
	html .woocommerce-pagination .page-numbers li a.page-numbers:hover { background-color: var(--a-borda); }

	html .woocommerce-pagination, html .pagination, html .hentry .entry-header, html .hentry .entry-taxonomy,
	html .single-product div.product .product_meta,
	html .woocommerce-tabs ul.tabs, html .woocommerce-tabs ul.tabs li { border-color: var(--a-borda); }

	html table:not(.has-background) th, html table:not(.has-background) tbody tr:nth-child(2n) td,
	html fieldset, html fieldset legend { background-color: var(--a-superficie); }
	html table:not(.has-background) tbody td { background-color: var(--a-bg); }
	html table:not(.has-background) th, html table:not(.has-background) td { border-color: var(--a-borda); }

	html .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
		background-color: var(--a-acento);
		color: var(--a-sobre-acento);
	}

	html ul.products li.product .woocommerce-loop-category__title .count { color: var(--a-suave); }
	html .storefront-product-pagination a { background-color: var(--a-superficie); color: var(--a-texto); }
	html .woocommerce-tabs ul.tabs li::after { color: var(--a-texto); }

	/* Rodapé */
	html .site-footer { background-color: var(--a-faixa); color: var(--a-texto); }
	html .site-footer a:not(.button):not(.components-button) { color: var(--a-link-rodape); }
	html .site-footer .storefront-handheld-footer-bar a:not(.button):not(.components-button) { color: var(--a-titulo); }
	html .site-footer h1, html .site-footer h2, html .site-footer h3, html .site-footer h4,
	html .site-footer h5, html .site-footer h6 { color: var(--a-titulo); }
}