/*
Theme Name:   Silvazar
Theme URI:    https://silvazar.com/
Author:       Silvazar
Author URI:   https://silvazar.com/
Description:  The Silvazar storefront: forest green, sage and silver, built on Storefront for WooCommerce.
Template:     storefront
Version:      1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  silvazar
*/

/* ------------------------------------------------------------------
   1. Brand tokens
------------------------------------------------------------------ */
:root {
	--sz-green: #123417;
	--sz-green-hover: #1e4a25;
	--sz-sage: #e4e8e3;
	--sz-sage-light: #f3f5f2;
	--sz-ink: #1f2420;
	--sz-muted: #565d57;
	--sz-silver: #b9bec0;
	--sz-line: #d9ddd8;
	--sz-white: #ffffff;
	--sz-font-display: "Jost", "Helvetica Neue", Arial, sans-serif;
	--sz-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
	--sz-font-arabic: "Noto Kufi Arabic", "Tahoma", sans-serif;
	--sz-radius: 2px;
	--sz-gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* ------------------------------------------------------------------
   2. Base typography (readable: dark ink, normal weight)
------------------------------------------------------------------ */
body,
button,
input,
select,
textarea,
.button {
	font-family: var(--sz-font-body);
	color: var(--sz-ink);
	-webkit-font-smoothing: antialiased;
}

body {
	font-size: 16px;
	line-height: 1.65;
	background: var(--sz-white);
}

:lang(ar),
[dir="rtl"] body {
	font-family: var(--sz-font-arabic);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.widget-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--sz-font-display);
	color: var(--sz-green);
	font-weight: 400;
	letter-spacing: 0.06em;
}

h1, .product_title { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.2; }
h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.14em; }
h3 { font-size: 1.2rem; }

a { color: var(--sz-green); }
a:hover, a:focus { color: var(--sz-green-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--sz-green);
	outline-offset: 2px;
}

p, li, td, th, label { color: var(--sz-ink); }

/* ------------------------------------------------------------------
   3. Buttons
------------------------------------------------------------------ */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-element-button,
.wp-block-button__link,
.added_to_cart {
	background-color: var(--sz-green);
	border: 1px solid var(--sz-green);
	color: var(--sz-white);
	font-family: var(--sz-font-display);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.82rem;
	padding: 0.95em 1.9em;
	border-radius: var(--sz-radius);
	transition: background-color 0.2s ease, color 0.2s ease;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.added_to_cart:hover {
	background-color: var(--sz-green-hover);
	border-color: var(--sz-green-hover);
	color: var(--sz-white);
}

.is-style-outline .wp-block-button__link,
.button.alt-outline {
	background: transparent;
	color: var(--sz-green);
	border: 1px solid var(--sz-green);
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--sz-green);
	color: var(--sz-white);
}

/* Buttons on dark (hero / green sections) */
.sz-on-dark .wp-block-button__link {
	background: var(--sz-white);
	color: var(--sz-green);
	border-color: var(--sz-white);
}
.sz-on-dark .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sz-white);
	border-color: var(--sz-white);
}

/* ------------------------------------------------------------------
   4. Header
------------------------------------------------------------------ */
.site-header {
	background: var(--sz-white);
	border-bottom: 1px solid var(--sz-line);
	padding-top: 1.25rem;
	margin-bottom: 0;
}

.site-header .site-branding .site-title,
.site-header .site-branding .site-title a {
	font-family: var(--sz-font-display);
	font-weight: 300;
	font-size: 1.9rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--sz-green);
}

.site-header .site-branding .site-description { display: none; }

.site-header .custom-logo-link img {
	max-height: 56px;
	width: auto;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	font-family: var(--sz-font-display);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.82rem;
	color: var(--sz-ink);
	padding: 1.1em 1em;
}

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

.site-header-cart .cart-contents,
.site-header-cart .cart-contents .amount {
	color: var(--sz-green);
}

.site-search .widget_product_search input[type="search"] {
	background: var(--sz-sage-light);
	border: 1px solid var(--sz-line);
	border-radius: var(--sz-radius);
}

/* ------------------------------------------------------------------
   5. Layout helpers
------------------------------------------------------------------ */
.storefront-breadcrumb {
	background: var(--sz-sage-light);
	padding: 0.85em 0;
	margin-bottom: 2.5em;
	font-size: 0.85rem;
}
.storefront-breadcrumb a { color: var(--sz-muted); }

/* Front page: hide the page title and let blocks run edge to edge */
.home.page .entry-header,
.home.page .storefront-breadcrumb { display: none; }

.home.page .site-main { margin-bottom: 0; }

.home.page .hentry { margin-bottom: 0; }

.home .site-content > .col-full {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.home .entry-content > * {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.home .entry-content > .alignfull {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.sz-section { padding-top: var(--sz-gap); padding-bottom: var(--sz-gap); }

.sz-sage { background: var(--sz-sage); }

.sz-eyebrow {
	font-family: var(--sz-font-display);
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 0.78rem;
	color: var(--sz-muted);
}

/* Signature corner-bracket frame (from the original Silvazar look) */
.is-style-sz-frame,
.sz-frame {
	position: relative;
	margin-top: 14px;
	margin-right: 14px;
}
.is-style-sz-frame::after,
.sz-frame::after {
	content: "";
	position: absolute;
	top: -14px;
	right: -14px;
	width: 34%;
	max-width: 120px;
	height: 34%;
	max-height: 120px;
	border-top: 2px solid var(--sz-green);
	border-right: 2px solid var(--sz-green);
	pointer-events: none;
}
.sz-on-dark .is-style-sz-frame::after { border-color: var(--sz-white); }

/* Hero */
.sz-hero.wp-block-cover {
	min-height: clamp(460px, 78vh, 760px);
}
.sz-hero h1 {
	color: var(--sz-white);
	font-weight: 300;
	letter-spacing: 0.1em;
	font-size: clamp(2.2rem, 5vw, 3.8rem);
}
.sz-hero p { color: rgba(255, 255, 255, 0.92); font-size: 1.1rem; }

/* Category tiles */
.sz-tile.wp-block-cover {
	min-height: 360px;
	transition: transform 0.4s ease;
}
.sz-tile.wp-block-cover:hover { transform: translateY(-3px); }
.sz-tile h3 {
	color: var(--sz-white);
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-weight: 400;
}
.sz-tile a { color: inherit; text-decoration: none; }

/* Promise strip */
.sz-promises h3 {
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 0.4em;
}
.sz-promises p { color: var(--sz-muted); font-size: 0.95rem; }

/* ------------------------------------------------------------------
   6. Product grid
------------------------------------------------------------------ */
ul.products li.product {
	text-align: center;
}

ul.products li.product img {
	background: var(--sz-sage-light);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: 1rem;
	transition: opacity 0.3s ease;
}
ul.products li.product a:hover img { opacity: 0.88; }

ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	color: var(--sz-ink);
	padding: 0;
	margin-bottom: 0.35em;
}

ul.products li.product .price,
.single-product div.product p.price,
.single-product div.product span.price {
	color: var(--sz-green);
	font-weight: 500;
}

ul.products li.product .price del,
.single-product div.product .price del { color: var(--sz-muted); opacity: 1; }

.onsale {
	background: var(--sz-green);
	color: var(--sz-white);
	border: 0;
	border-radius: var(--sz-radius);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.7rem;
	padding: 0.4em 0.9em;
}

/* ------------------------------------------------------------------
   7. Single product
------------------------------------------------------------------ */
.single-product div.product .woocommerce-product-gallery {
	background: var(--sz-sage-light);
}

.single-product div.product .woocommerce-product-details__short-description {
	color: var(--sz-ink);
	font-size: 1rem;
}

.single-product div.product .product_meta {
	color: var(--sz-muted);
	font-size: 0.88rem;
	border-top: 1px solid var(--sz-line);
}

.woocommerce-tabs ul.tabs li a {
	font-family: var(--sz-font-display);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.82rem;
	color: var(--sz-ink);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--sz-green); }

.sz-duties-note {
	font-size: 0.88rem;
	color: var(--sz-muted);
	border-left: 2px solid var(--sz-silver);
	padding-left: 0.9em;
	margin: 1.2em 0;
}

/* ------------------------------------------------------------------
   8. Forms, cart, checkout
------------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.select2-container .select2-selection--single {
	background: var(--sz-white);
	border: 1px solid var(--sz-line);
	border-radius: var(--sz-radius);
	box-shadow: none;
	color: var(--sz-ink);
}

table.shop_table th,
table.cart th { font-family: var(--sz-font-display); letter-spacing: 0.08em; }

#payment,
.woocommerce-checkout-review-order-table { background: var(--sz-sage-light); }

.sz-insurance-row td { vertical-align: top; }
.sz-insurance-label { font-weight: 600; cursor: pointer; display: inline-flex; gap: 0.5em; align-items: center; }
.sz-insurance-desc { display: block; color: var(--sz-muted); font-size: 0.85rem; margin-top: 0.3em; font-weight: 400; }
.sz-duties-row td { padding-top: 0; }

.woocommerce-message,
.woocommerce-info {
	background: var(--sz-sage);
	color: var(--sz-ink);
	border-left: 3px solid var(--sz-green);
}
.woocommerce-message a,
.woocommerce-info a { color: var(--sz-green); }

/* ------------------------------------------------------------------
   9. Footer
------------------------------------------------------------------ */
.site-footer {
	background: var(--sz-green);
	color: rgba(255, 255, 255, 0.86);
	padding-top: 3.5em;
}
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer .widget-title {
	color: var(--sz-white);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.85rem;
	border: 0;
}
.site-footer a,
.site-footer a:not(.button):not(.components-button) { color: var(--sz-white); }
.site-footer p, .site-footer li { color: rgba(255, 255, 255, 0.86); }
.site-footer .site-info {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding: 1.5em 0;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.75);
}
.site-footer .sz-footer-menu { list-style: none; margin: 0 0 0.6em; padding: 0; }
.site-footer .sz-footer-menu li { display: inline-block; margin: 0 1.1em 0.4em 0; }

.storefront-handheld-footer-bar { background: var(--sz-white); border-top: 1px solid var(--sz-line); }
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.cart .count { color: var(--sz-green); }

/* ------------------------------------------------------------------
   10. Mobile
------------------------------------------------------------------ */
@media (max-width: 767px) {
	.site-header .site-branding .site-title,
	.site-header .site-branding .site-title a { font-size: 1.45rem; letter-spacing: 0.26em; }
	.sz-hero.wp-block-cover { min-height: 72vh; }
	.sz-tile.wp-block-cover { min-height: 260px; }
	.is-style-sz-frame::after, .sz-frame::after { top: -10px; right: -10px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}