/*
Theme Name: Storefront Child - Esponja Magic
Theme URI: https://esponjamagiccosmetics.com.br
Description: Tema filho do Storefront para a Esponja Magic Cosmetics
Author: Esponja Magic Cosmetics
Template: storefront
Version: 1.0.0
Text Domain: storefront-child
*/

:root {
	--em-preto: #090909;
	--em-roxo: #4B173F;
	--em-magenta: #8E1D68;
	--em-dourado: #D4A629;
	--em-laranja: #F08A24;
	--em-branco: #F8F5F2;

	--em-font-heading: 'Tenor Sans', sans-serif;
	--em-font-body: 'Tenor Sans', sans-serif;
}

body {
	background-color: var(--em-branco);
	color: var(--em-preto);
	font-family: var(--em-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--em-font-heading);
	color: var(--em-preto);
}

a {
	color: var(--em-magenta);
}

a:hover,
a:focus {
	color: var(--em-roxo);
}

.site-header {
	background-color: var(--em-preto);
}

.site-header .site-title a,
.site-header .site-description {
	color: var(--em-branco);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button.alt,
button.button.alt {
	background-color: var(--em-magenta);
	color: var(--em-branco);
	border-color: var(--em-magenta);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
a.button.alt:hover,
button.button.alt:hover {
	background-color: var(--em-roxo);
	border-color: var(--em-roxo);
}

.woocommerce span.onsale {
	background-color: var(--em-laranja);
	color: var(--em-preto);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--em-magenta);
}

.site-footer {
	background-color: var(--em-preto);
	color: var(--em-branco);
}

.site-footer a {
	color: var(--em-dourado);
}

.em-benefits-bar {
	background-color: var(--em-roxo);
	color: var(--em-branco);
	text-align: center;
	font-size: 0.85rem;
	padding: 8px 12px;
	font-family: var(--em-font-body);
}

.em-benefits-bar ul {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Cabeçalho — navegação, busca e carrinho
   ========================================================================== */

.main-navigation ul li a {
	color: var(--em-branco);
	font-family: var(--em-font-body);
}

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

.main-navigation .menu-toggle {
	color: var(--em-branco);
	border-color: var(--em-branco);
}

.site-search .search-field {
	border-color: var(--em-branco);
	background-color: transparent;
	color: var(--em-branco);
}

.site-search .search-field::placeholder {
	color: var(--em-branco);
	opacity: 0.7;
}

.site-search button[type="submit"] {
	color: var(--em-preto);
	background-color: var(--em-dourado);
	border-color: var(--em-dourado);
}

.site-search button[type="submit"]:hover {
	background-color: var(--em-laranja);
	border-color: var(--em-laranja);
}

.site-header-cart a.cart-contents,
.site-header-cart a.cart-contents .amount {
	color: var(--em-branco);
}

.site-header-cart a.cart-contents:hover,
.site-header-cart:hover > li > a {
	color: var(--em-dourado);
}

.site-header-cart .count {
	color: var(--em-dourado);
}

.site-header-cart .widget_shopping_cart_content .total .amount {
	color: var(--em-magenta);
}

/* ==========================================================================
   Rodapé
   ========================================================================== */

.site-footer .widget-title {
	color: var(--em-branco);
	font-family: var(--em-font-heading);
}

.site-footer .site-info {
	color: var(--em-branco);
	opacity: 0.85;
	font-size: 0.85rem;
}

.storefront-handheld-footer-bar {
	background-color: var(--em-preto);
	border-top: 1px solid var(--em-roxo);
}

.storefront-handheld-footer-bar ul li > a {
	color: var(--em-branco);
}

.storefront-handheld-footer-bar ul li.current-menu-item > a {
	color: var(--em-dourado);
}

/* ==========================================================================
   Home e páginas institucionais — seções com transição suave (GSAP)
   ========================================================================== */

.em-home-section {
	padding: 64px 24px;
	max-width: 1100px;
	margin: 0 auto;
}

.em-home-section h2 {
	font-size: 2rem;
	margin-bottom: 16px;
}

.em-home-section--dark {
	max-width: none;
	background-color: var(--em-preto);
	color: var(--em-branco);
}

.em-home-section--dark h2,
.em-home-section--dark h3 {
	color: var(--em-branco);
}

.em-home-section--dark .em-home-section-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.em-home-hero {
	padding: 96px 24px;
	text-align: center;
	background-color: var(--em-preto);
	color: var(--em-branco);
}

.em-home-hero h1 {
	font-size: 3rem;
	color: var(--em-branco);
	margin-bottom: 16px;
}

.em-home-hero .button {
	display: inline-block;
	margin-top: 16px;
	padding: 14px 32px;
	background-color: var(--em-magenta);
	color: var(--em-branco);
	text-decoration: none;
	border-radius: 2px;
}

.em-home-hero .button:hover {
	background-color: var(--em-roxo);
	color: var(--em-branco);
}

.em-placeholder-note {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 10px;
	font-size: 0.75rem;
	background-color: var(--em-dourado);
	color: var(--em-preto);
	border-radius: 2px;
}

.em-home-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin-top: 24px;
}

.em-home-gallery img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 2px;
}