/*
Theme Name: Arzen
Theme URI: https://example.com/arzen
Author: Antigravity
Author URI: https://example.com/
Description: Tema moderno para loja online baseado em Material Design 3. Tema Filho (Child Theme) do poderoso tema Astra, otimizado para o plugin WooCommerce.
Template: astra
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arzen
Tags: e-commerce, custom-background, custom-colors, custom-menu, featured-images, astra-child
*/

/* 
 * Este tema usa os blocos do Astra mas as cores, 
 * estilos e o CSS de Material Design 3 são aplicados aqui. 
 */

/* ==========================================================================
   HOMEPAGE Arzen (MD3 Based)
   ========================================================================== */

/* Cores Base do Mockup (MD3 Palette) */
:root {
	--md-sys-color-primary: #534AB7;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-surface: #f7f4ff;
	--md-sys-color-on-surface: #1c1b1f;

	/* Paleta de Categorias */
	--arzen-cat-lavender-bg: #f0e6ff;
	--arzen-cat-lavender-icon: #7c6fd2;
	--arzen-cat-champagne-bg: #fff5e6;
	--arzen-cat-champagne-icon: #d2a65d;
	--arzen-cat-pink-bg: #ffedf4;
	--arzen-cat-pink-icon: #d86c8f;
	--arzen-cat-green-bg: #eaf8ee;
	--arzen-cat-green-icon: #5eb37c;

	/* Paleta Completa (12 categorias) */
	--arzen-purple-bg: #f0e6ff;   --arzen-purple-icon: #7c6fd2;
	--arzen-amber-bg: #fff5e6;    --arzen-amber-icon: #c07b2d;
	--arzen-orange-bg: #fff0e6;   --arzen-orange-icon: #c4662a;
	--arzen-pink-bg:   #ffedf4;   --arzen-pink-icon:   #d86c8f;
	--arzen-green-bg:  #eaf8ee;   --arzen-green-icon:  #5eb37c;
	--arzen-lavender-bg: #ece8ff; --arzen-lavender-icon: #8b7fda;
	--arzen-teal-bg:   #e6f7f5;   --arzen-teal-icon:   #3a9e8c;
	--arzen-sage-bg:   #eef5e8;   --arzen-sage-icon:   #6a9e50;
	--arzen-forest-bg: #e6f0e8;   --arzen-forest-icon: #447a50;
	--arzen-rose-bg:   #fce8ef;   --arzen-rose-icon:   #c45878;
	--arzen-indigo-bg: #e8eaff;   --arzen-indigo-icon: #5560c8;
	--arzen-warm-bg:   #fef0e6;   --arzen-warm-icon:   #c07040;

	/* Elevation MD3 Shadows */
	--md-sys-elevation-level1: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
	--md-sys-elevation-level2: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);

	--arzen-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.arzen-front-page {
	background-color: var(--md-sys-color-surface);
	font-family: var(--arzen-font-family);
	color: var(--md-sys-color-on-surface);
}

.arzen-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* 1. HERO SECTION */
.arzen-hero {
	position: relative;
	text-align: center;
	padding: 100px 20px 80px;
	overflow: hidden;
}

.arzen-hero-background {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 0;
	pointer-events: none;
}

.arzen-circle-large {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 480px; height: 480px;
	border: 1px dashed rgba(82, 71, 158, 0.15);
	border-radius: 50%;
}

.arzen-dot {
	position: absolute;
	width: 6px; height: 6px;
	border-radius: 50%;
}
.dot-purple { background: var(--arzen-cat-lavender-icon); top: 20%; left: 30%; }
.dot-green { background: var(--arzen-cat-green-icon); top: 50%; left: 20%; }
.dot-orange { background: var(--arzen-cat-champagne-icon); top: 70%; left: 35%; }
.dot-pink { background: var(--arzen-cat-pink-icon); top: 15%; right: 25%; }

.arzen-hero-content {
	position: relative;
	z-index: 1;
	max-width: 600px;
	margin: 0 auto;
}

.arzen-hero-subtitle {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 4px;
	color: var(--md-sys-color-primary);
	margin-bottom: 8px;
	text-transform: uppercase;
}

.arzen-hero-title {
	font-size: 56px;
	font-weight: 800;
	letter-spacing: 12px;
	color: var(--md-sys-color-primary);
	margin: 0 0 16px 0;
	text-transform: uppercase;
}

.arzen-hero-description {
	font-size: 16px;
	color: #4a4a4a;
	margin-bottom: 40px;
}

/* Botão Pílula (Pill Button) MD3 */
.arzen-button-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
	height: 48px;
	padding: 0 32px;
	border-radius: 24px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	box-shadow: var(--md-sys-elevation-level1);
	transition: all 0.2s ease-in-out;
}
.arzen-button-pill:hover, .arzen-button-pill:focus {
	box-shadow: var(--md-sys-elevation-level2);
	transform: translateY(-2px);
	color: var(--md-sys-color-on-primary);
}

/* 2. SECÇÕES COMUNS */
.arzen-section {
	padding: 60px 0;
}

.arzen-section-title {
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--md-sys-color-primary);
	letter-spacing: 3px;
	margin-bottom: 48px;
	position: relative;
}

/* 3. GRELHAS */
.arzen-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.arzen-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* 12 categorias: 6 por linha × 2 linhas */
.arzen-grid-6 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

/* 10 produtos: 5 por linha × 2 linhas */
.arzen-grid-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.arzen-md3-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	border-radius: 24px;
	text-decoration: none;
	color: var(--md-sys-color-on-surface);
	transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
	border: 1px solid rgba(0,0,0,0.02);
}
.arzen-md3-card:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: var(--md-sys-elevation-level1);
}

.card-lavender { background-color: var(--arzen-cat-lavender-bg); }
.card-champagne { background-color: var(--arzen-cat-champagne-bg); }
.card-pink { background-color: var(--arzen-cat-pink-bg); }
.card-green { background-color: var(--arzen-cat-green-bg); }

.card-lavender .arzen-card-icon-wrap { color: var(--arzen-cat-lavender-icon); }
.card-champagne .arzen-card-icon-wrap { color: var(--arzen-cat-champagne-icon); }
.card-pink .arzen-card-icon-wrap { color: var(--arzen-cat-pink-icon); }
.card-green .arzen-card-icon-wrap { color: var(--arzen-cat-green-icon); }

.arzen-card-icon-wrap {
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 50%;
}

.card-large .arzen-card-icon-wrap {
	width: 80px; height: 80px; margin-bottom: 32px;
}

.arzen-card-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 8px 0;
	letter-spacing: 1px;
}

.arzen-card-subtitle {
	font-size: 11px;
	font-weight: 600;
	opacity: 0.6;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.card-large {
	padding: 56px 32px 48px;
}
.card-large .arzen-card-title {
	font-size: 20px;
}
.card-large .arzen-card-subtitle {
	margin-bottom: 24px;
}

/* Cores de pílula alternativas para a grid secundária */
.btn-purple { background-color: var(--arzen-cat-lavender-icon); border: none; color: white; }
.btn-orange { background-color: var(--arzen-cat-champagne-icon); border: none; color: white;}
.btn-green { background-color: var(--arzen-cat-green-icon); border: none; color: white;}

.btn-purple:hover, .btn-purple:focus { color: white; }
.btn-orange:hover, .btn-orange:focus { color: white; }
.btn-green:hover, .btn-green:focus { color: white; }

/* ==========================================================================
   CATEGORY CARDS (12 em arzen-grid-6)
   ========================================================================== */

.arzen-cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 12px 18px;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	border: 0.8px solid rgba(0,0,0,0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	text-align: center;
}

.arzen-cat-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--md-sys-elevation-level1);
}

.arzen-cat-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255,255,255,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.arzen-cat-name {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #3C3489;
	margin-bottom: 4px;
	line-height: 1.3;
}

.arzen-cat-sub {
	display: block;
	font-size: 9px;
	letter-spacing: 0.3px;
	opacity: 0.7;
	line-height: 1.2;
}

/* Cores de fundo e ícone por categoria */
.cat-purple   { background: var(--arzen-purple-bg);   border-color: #ccc6f0; }
.cat-amber    { background: var(--arzen-amber-bg);    border-color: #f0d8b0; }
.cat-orange   { background: var(--arzen-orange-bg);   border-color: #f0c8a0; }
.cat-pink     { background: var(--arzen-pink-bg);     border-color: #f0c0d0; }
.cat-green    { background: var(--arzen-green-bg);    border-color: #b0ddc0; }
.cat-lavender { background: var(--arzen-lavender-bg); border-color: #bbb6e8; }
.cat-teal     { background: var(--arzen-teal-bg);     border-color: #9ed4cc; }
.cat-sage     { background: var(--arzen-sage-bg);     border-color: #aed4a0; }
.cat-forest   { background: var(--arzen-forest-bg);   border-color: #9ec4a8; }
.cat-rose     { background: var(--arzen-rose-bg);     border-color: #e8b0c0; }
.cat-indigo   { background: var(--arzen-indigo-bg);   border-color: #b0b8e8; }
.cat-warm     { background: var(--arzen-warm-bg);     border-color: #e8c8a0; }

.cat-purple   .arzen-cat-icon { color: var(--arzen-purple-icon); }
.cat-amber    .arzen-cat-icon { color: var(--arzen-amber-icon);  }
.cat-orange   .arzen-cat-icon { color: var(--arzen-orange-icon); }
.cat-pink     .arzen-cat-icon { color: var(--arzen-pink-icon);   }
.cat-green    .arzen-cat-icon { color: var(--arzen-green-icon);  }
.cat-lavender .arzen-cat-icon { color: var(--arzen-lavender-icon); }
.cat-teal     .arzen-cat-icon { color: var(--arzen-teal-icon);   }
.cat-sage     .arzen-cat-icon { color: var(--arzen-sage-icon);   }
.cat-forest   .arzen-cat-icon { color: var(--arzen-forest-icon); }
.cat-rose     .arzen-cat-icon { color: var(--arzen-rose-icon);   }
.cat-indigo   .arzen-cat-icon { color: var(--arzen-indigo-icon); }
.cat-warm     .arzen-cat-icon { color: var(--arzen-warm-icon);   }

.cat-purple   .arzen-cat-sub { color: var(--arzen-purple-icon); }
.cat-amber    .arzen-cat-sub { color: var(--arzen-amber-icon);  }
.cat-orange   .arzen-cat-sub { color: var(--arzen-orange-icon); }
.cat-pink     .arzen-cat-sub { color: var(--arzen-pink-icon);   }
.cat-green    .arzen-cat-sub { color: var(--arzen-green-icon);  }
.cat-lavender .arzen-cat-sub { color: var(--arzen-lavender-icon); }
.cat-teal     .arzen-cat-sub { color: var(--arzen-teal-icon);   }
.cat-sage     .arzen-cat-sub { color: var(--arzen-sage-icon);   }
.cat-forest   .arzen-cat-sub { color: var(--arzen-forest-icon); }
.cat-rose     .arzen-cat-sub { color: var(--arzen-rose-icon);   }
.cat-indigo   .arzen-cat-sub { color: var(--arzen-indigo-icon); }
.cat-warm     .arzen-cat-sub { color: var(--arzen-warm-icon);   }

/* ==========================================================================
   PRODUCT CARDS (10 em arzen-grid-5)
   ========================================================================== */

.arzen-product-card {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	border: 0.8px solid #ddd8f5;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arzen-product-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--md-sys-elevation-level1);
}

.arzen-product-thumb-link {
	display: block;
	text-decoration: none;
}

.arzen-product-thumb {
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.arzen-product-thumb .arzen-product-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	margin: 0;
}

.arzen-product-body {
	padding: 12px 10px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	background: #fff;
	border-top: none;
}

.arzen-product-name {
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: #3C3489;
	text-decoration: none;
	text-align: center;
	line-height: 1.4;
}

.arzen-product-name:hover {
	color: var(--md-sys-color-primary);
}

.arzen-product-price {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
}

.arzen-btn-add {
	display: inline-block;
	margin-top: 4px;
	padding: 6px 16px;
	border-radius: 12px;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: #fff;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.arzen-btn-add:hover {
	opacity: 0.88;
	transform: translateY(-1px);
	color: #fff;
}

/* Secção hero com fundo ligeiramente diferente */
.arzen-destaques-section {
	background: #faf8ff;
	margin: 0 -24px;
	padding: 60px 24px;
}

/* ==========================================================================
   Responsividade
   ========================================================================== */

@media (max-width: 1200px) {
	.arzen-grid-6 { grid-template-columns: repeat(4, 1fr); }
	.arzen-grid-5 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
	.arzen-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.arzen-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.arzen-grid-6 { grid-template-columns: repeat(3, 1fr); }
	.arzen-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
	.arzen-hero-title { font-size: 36px; letter-spacing: 6px; }
	.arzen-grid-4, .arzen-grid-3 { grid-template-columns: 1fr; }
	.arzen-grid-6 { grid-template-columns: repeat(2, 1fr); }
	.arzen-grid-5 { grid-template-columns: repeat(2, 1fr); }
	.arzen-circle-large { width: 300px; height: 300px; }
}

/* ==========================================================================
   WOOCOMMERCE MD3 GLOBAL STYLES
   ========================================================================== */

/* 1. Grelha de Produtos (Product Cards) */
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
	background-color: #ffffff;
	border-radius: 20px;
	padding: 16px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Leve base */
	transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
	border: 1px solid rgba(0,0,0,0.02);
	text-align: center;
}
.woocommerce ul.products li.product:hover, 
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--md-sys-elevation-level1);
}

/* Imagens dos Produtos Arredondadas */
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img {
	border-radius: 16px;
	margin-bottom: 16px;
}

/* Tipografia dos Produtos */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--arzen-font-family);
	font-size: 15px;
	font-weight: 600;
	color: var(--md-sys-color-on-surface);
	padding: 0;
	margin-bottom: 8px;
}

.woocommerce ul.products li.product .price {
	color: #4a4a4a;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 16px;
}

/* 2. Botões "Adicionar ao Carrinho" & Botões Primários (Pill Buttons) */
.woocommerce ul.products li.product .button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
	border-radius: 24px !important;
	padding: 12px 24px !important;
	font-family: var(--arzen-font-family) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	text-transform: none !important;
	box-shadow: var(--md-sys-elevation-level1) !important;
	transition: all 0.2s ease-in-out !important;
	border: none !important;
	line-height: normal !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover {
	background-color: #3b327b !important; /* Roxo mais escuro (Hover MD3) */
	box-shadow: var(--md-sys-elevation-level2) !important;
	transform: translateY(-2px);
}

/* 3. Inputs, Forms e Quantidades */
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea,
.woocommerce .quantity .qty {
	border-radius: 12px !important;
	border: 1px solid #e0e2e5 !important;
	padding: 12px 16px !important;
	font-family: var(--arzen-font-family);
	background-color: #fbf8ff !important;
	transition: border-color 0.2s;
}

.woocommerce form .form-row input.input-text:focus, 
.woocommerce form .form-row textarea:focus,
.woocommerce .quantity .qty:focus {
	border-color: var(--md-sys-color-primary) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(82, 71, 158, 0.1) !important;
}

/* Mensagens de Loja / Avisos (Banners MD3) */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: 16px !important;
	border-top: none !important;
	background-color: #ffffff !important;
	box-shadow: var(--md-sys-elevation-level1) !important;
	font-family: var(--arzen-font-family);
	color: var(--md-sys-color-on-surface) !important;
	padding: 16px 24px 16px 60px !important;
	position: relative;
	border-left: 6px solid var(--md-sys-color-primary) !important;
}
.woocommerce-error { border-left-color: #ba1a1a !important; }
.woocommerce-message { border-left-color: var(--arzen-cat-green-icon) !important; }

/* 4. Separadores de Produto e Layout Singular */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0 !important;
	margin-bottom: 24px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: 16px 16px 0 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 3px solid var(--md-sys-color-primary) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--arzen-font-family);
	font-weight: 600;
	color: #4a4a4a !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--md-sys-color-primary) !important;
}