/**
 * ==========================================================================
 * Chamani — Product Archive Stylesheet
 * Path: wp-content/themes/hello-elementor-child/assets/chamani-archive.css
 * --------------------------------------------------------------------------
 * Shared design tokens + component styles for the custom Product Archive
 * page (Hero / Intro / SEO sections). Enqueued ONLY on product category
 * archives and the shop page — see chamani_enqueue_archive_assets() in
 * functions.php — so this weight never loads on the Single Product page
 * or anywhere else on the site.
 *
 * SCOPE CHANGE: as of the Phase 3 Grid rewrite, this file NO LONGER owns
 * grid/product-card/Load-More styling. `template-parts/archive-product/
 * section-grid.php` is a self-contained Single File Component that embeds
 * its own <style> block (grid layout, card design, reveal-on-scroll states,
 * Load More button, and its own tablet/mobile breakpoints), guarded so it
 * prints at most once per request even if the shortcode runs twice on one
 * page. This file's design tokens (Section 1) are still the source of
 * truth that component's var(--cmp-plp-*) fallbacks quietly defer to when
 * both files are loaded together — see COMPONENT AUTONOMY NOTE below.
 *
 * COMPONENT AUTONOMY NOTE:
 * Every var(--cmp-plp-*) usage in this file carries an explicit fallback
 * value (e.g. var(--cmp-plp-ink, #29211c)) matching the :root default.
 * This means the Hero/Intro component still renders its full, correct
 * visual design even in an edge case where the :root token block failed
 * to load ahead of this file (e.g. a caching/minification plugin that
 * reorders or strips empty-looking blocks, or the component being
 * rendered in an isolated preview context). The :root block remains the
 * single source of truth for the values — the fallbacks are a resilience
 * net, not a second place to edit tokens.
 *
 * Structure of this file (appended to as each section is built):
 *   0. Full-bleed layout breakout (escapes Elementor's boxed container)
 *   1. Design tokens (CSS custom properties)
 *   2. Base resets / scope isolation
 *   3. Shared utility classes (kicker, eyebrow, section title/copy)
 *   4. Hero section
 *   5. Intro strip
 *   6. Responsive — tablet
 *   7. Responsive — mobile
 *
 * @package Chamani
 * @subpackage Archive
 * ========================================================================== */

/* ==========================================================================
 * 0. FULL-BLEED LAYOUT BREAKOUT
 * --------------------------------------------------------------------------
 * WHY THIS EXISTS:
 * Elementor wraps every widget (including our [chamani_archive_hero]
 * shortcode widget) inside nested containers that are typically
 * `max-width: 1140px` (Boxed content-width) plus horizontal padding on
 * `.elementor-container` / `.e-con`. Our Hero and Intro sections are
 * designed to be true full-bleed (background spans 100% of the viewport,
 * only the inner copy is constrained via `.cmp-plp-container`). Without
 * this override, the hero renders squeezed inside Elementor's boxed
 * width.
 *
 * TECHNIQUE:
 * `width: 100vw` + `margin-inline: calc(50% - 50vw)` breaks the element
 * out of any ancestor's constrained width, regardless of how deeply
 * Elementor has nested it, because the calculation is relative to the
 * viewport, not the parent. This is safer than the classic
 * `left: 50%; margin-left: -50vw;` trick because it does not require
 * `position: relative` bookkeeping or fight RTL logical properties —
 * `margin-inline` applies symmetrically regardless of text direction.
 *
 * SCROLLBAR CAVEAT:
 * `100vw` includes the vertical scrollbar's width, which can introduce a
 * few pixels of horizontal overscroll on desktop browsers with classic
 * (non-overlay) scrollbars. Since this stylesheet is conditionally
 * enqueued ONLY on archive/shop pages, it is safe to neutralize that
 * here with `overflow-x: clip` on the document — it will never affect
 * any other template on the site.
 *
 * ELEMENTOR OVERFLOW CLIPPING:
 * Some Elementor sections/containers set `overflow: hidden` on
 * themselves (for their own internal effects), which would clip our
 * full-bleed breakout at the container edge no matter what width we
 * declare. The `:has()` rule below finds any Elementor wrapper that
 * directly contains our scope and forces `overflow: visible` on it so
 * the breakout is never silently clipped. `:has()` has been supported in
 * all evergreen browsers since early 2023; for older browsers, add
 * `overflow: visible !important;` manually to the specific
 * `.elementor-widget-shortcode` wrapping the Hero widget via Elementor's
 * "Advanced → Custom CSS" panel on that widget.
 * ========================================================================== */

html,
body {
	overflow-x: clip;
}

.elementor-widget-shortcode:has(.cmp-plp-scope),
.elementor-element:has(> .elementor-widget-container > .cmp-plp-scope),
.elementor-container:has(.cmp-plp-scope),
.e-con:has(.cmp-plp-scope) {
	overflow: visible !important;
	max-width: none !important;
}

.cmp-plp-fullbleed {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* ==========================================================================
 * 1. DESIGN TOKENS
 * ========================================================================== */

:root {
	--cmp-plp-bg: #fbf6ec;
	--cmp-plp-surface: #fffdf8;
	--cmp-plp-surface-2: #f4ecdf;
	--cmp-plp-ink: #29211c;
	--cmp-plp-muted: #756d65;
	--cmp-plp-red: #9f3327;
	--cmp-plp-red-dark: #7f241c;
	--cmp-plp-gold: #b98a31;
	--cmp-plp-green: #56745d;
	--cmp-plp-line: #e7dbc7;
	--cmp-plp-shadow-lg: 0 22px 65px rgba(82, 55, 30, .08);
	--cmp-plp-shadow-md: 0 14px 38px rgba(82, 55, 30, .07);
	--cmp-plp-shadow-sm: 0 8px 24px rgba(82, 55, 30, .055);
	--cmp-plp-radius-xl: 36px;
	--cmp-plp-radius-lg: 24px;
	--cmp-plp-radius-md: 17px;
	--cmp-plp-container: 1240px;
	--cmp-plp-transition: 250ms ease;
}

html {
	scroll-behavior: smooth;
}

/* ==========================================================================
 * 2. BASE RESETS / SCOPE ISOLATION
 * --------------------------------------------------------------------------
 * .cmp-plp-scope namespaces every rule below so Elementor's global styles
 * (or the hello-elementor parent theme's defaults) cannot leak in, and so
 * these rules cannot leak out onto the rest of the site.
 * ========================================================================== */

.cmp-plp-scope,
.cmp-plp-scope * {
	box-sizing: border-box;
}

.cmp-plp-scope {
	direction: rtl;
	color: var(--cmp-plp-ink, #29211c);
	font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	line-height: 1.85;
}

.cmp-plp-scope img {
	display: block;
	max-width: 100%;
}

.cmp-plp-scope a {
	color: inherit;
	text-decoration: none;
}

.cmp-plp-scope button,
.cmp-plp-scope input {
	font: inherit;
}

.cmp-plp-container {
	width: min(var(--cmp-plp-container, 1240px), calc(100% - 48px));
	margin-inline: auto;
}

/* ==========================================================================
 * 3. SHARED UTILITY CLASSES
 * --------------------------------------------------------------------------
 * Used across Hero and SEO/Intro sections alike.
 * ========================================================================== */

.cmp-plp-kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--cmp-plp-gold, #b98a31);
	font-size: 12px;
	font-weight: 900;
}

.cmp-plp-kicker::before {
	content: "";
	width: 30px;
	height: 2px;
	background: currentColor;
}

.cmp-plp-eyebrow {
	color: var(--cmp-plp-gold, #b98a31);
	font-size: 12px;
	font-weight: 900;
}

.cmp-plp-section-title {
	margin: 5px 0 10px;
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.5;
	letter-spacing: -.4px;
}

.cmp-plp-section-copy {
	margin: 0;
	color: var(--cmp-plp-muted, #756d65);
	font-size: 14px;
	line-height: 2;
}

@media (max-width: 640px) {
	.cmp-plp-container {
		width: calc(100% - 28px);
	}

	.cmp-plp-section-title {
		font-size: 27px;
	}
}

/* ==========================================================================
 * 4. HERO SECTION
 * --------------------------------------------------------------------------
 * `.cmp-plp-hero` is a full-bleed section (width: 100vw via the breakout
 * rules in Section 0). `.cmp-plp-container` nested inside it (see
 * section-hero.php) re-constrains the actual copy/box to the normal
 * reading width — this is what gives the "background full width, content
 * boxed" effect.
 * ========================================================================== */

.cmp-plp-hero {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: 18px 0 54px;
	background:
		radial-gradient(circle at 7% 12%, rgba(185, 138, 49, .08), transparent 25%),
		var(--cmp-plp-bg, #fbf6ec);
}

.cmp-plp-breadcrumb {
	padding: 8px 0 23px;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	color: var(--cmp-plp-muted, #756d65);
	font-size: 12px;
}

.cmp-plp-breadcrumb a {
	transition: var(--cmp-plp-transition, 250ms ease);
}

.cmp-plp-breadcrumb a:hover {
	color: var(--cmp-plp-red, #9f3327);
}

.cmp-plp-breadcrumb strong {
	color: var(--cmp-plp-ink, #29211c);
}

/* --- Hero box --- */

.cmp-plp-hero-box {
	position: relative;
	min-height: 500px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	border: 1px solid var(--cmp-plp-line, #e7dbc7);
	border-radius: var(--cmp-plp-radius-xl, 36px);
	background: linear-gradient(135deg, #fffdf8, #f0e4d2);
	box-shadow: var(--cmp-plp-shadow-lg, 0 22px 65px rgba(82, 55, 30, .08));
}

.cmp-plp-hero-copy {
	position: relative;
	z-index: 3;
	padding: 65px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cmp-plp-hero-copy h1 {
	margin: 13px 0 10px;
	font-size: clamp(44px, 5vw, 62px);
	line-height: 1.3;
	letter-spacing: -1.4px;
}

.cmp-plp-hero-copy > p {
	max-width: 610px;
	margin: 0;
	color: var(--cmp-plp-muted, #756d65);
	font-size: 15px;
	line-height: 2;
}

/* --- Stats --- */

.cmp-plp-hero-stats {
	margin-top: 30px;
	padding-top: 24px;
	display: flex;
	gap: 33px;
	border-top: 1px solid var(--cmp-plp-line, #e7dbc7);
}

.cmp-plp-hero-stats > div {
	min-width: 105px;
}

.cmp-plp-hero-stats strong {
	display: block;
	color: var(--cmp-plp-ink, #29211c);
	font-size: 16px;
	line-height: 1.6;
}

.cmp-plp-hero-stats span {
	display: block;
	color: var(--cmp-plp-muted, #756d65);
	font-size: 10px;
}

/* --- Art / image --- */

.cmp-plp-hero-art {
	position: relative;
	min-width: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.cmp-plp-hero-art::before {
	content: "";
	position: absolute;
	width: 370px;
	height: 370px;
	border-radius: 50%;
	background: rgba(159, 51, 39, .09);
}

.cmp-plp-hero-art::after {
	content: "";
	position: absolute;
	left: -70px;
	bottom: -90px;
	width: 220px;
	height: 220px;
	border: 38px solid rgba(185, 138, 49, .12);
	border-radius: 50%;
}

.cmp-plp-hero-circle {
	position: absolute;
	z-index: 1;
	width: 295px;
	height: 295px;
	border: 1px solid rgba(185, 138, 49, .18);
	border-radius: 50%;
}

.cmp-plp-hero-art img {
	position: relative;
	z-index: 3;
	width: min(285px, 62%);
	object-fit: contain;
	filter: drop-shadow(0 28px 22px rgba(66, 38, 21, .18));
	transform: rotate(-4deg);
	transition: transform .55s ease;
}

.cmp-plp-hero-box:hover .cmp-plp-hero-art img {
	transform: rotate(-2deg) translateY(-6px);
}

.cmp-plp-hero-art-label {
	position: absolute;
	z-index: 4;
	left: 26px;
	bottom: 24px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	backdrop-filter: blur(14px);
	color: var(--cmp-plp-muted, #756d65);
	font-size: 10px;
	font-weight: 800;
}

/* ==========================================================================
 * 5. INTRO STRIP
 * ========================================================================== */

.cmp-plp-intro {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: 0 0 38px;
	background: var(--cmp-plp-bg, #fbf6ec);
}

.cmp-plp-intro-box {
	padding-bottom: 28px;
	display: grid;
	grid-template-columns: .85fr 1.5fr;
	gap: 50px;
	align-items: end;
	border-bottom: 1px solid var(--cmp-plp-line, #e7dbc7);
}

.cmp-plp-intro-box h2 {
	margin: 5px 0 0;
	font-size: 34px;
	line-height: 1.45;
}

.cmp-plp-intro-box > p {
	max-width: 700px;
	margin: 0;
	color: var(--cmp-plp-muted, #756d65);
	font-size: 13px;
	line-height: 2;
}

/* ==========================================================================
 * 6. RESPONSIVE — TABLET
 * ========================================================================== */

@media (max-width: 900px) {
	.cmp-plp-hero-box {
		grid-template-columns: 1fr;
	}

	.cmp-plp-hero-art {
		min-height: 330px;
	}

	.cmp-plp-intro-box {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ==========================================================================
 * 7. RESPONSIVE — MOBILE
 * ========================================================================== */

@media (max-width: 640px) {
	.cmp-plp-hero {
		padding-bottom: 42px;
	}

	.cmp-plp-hero-box {
		min-height: auto;
		border-radius: 24px;
	}

	.cmp-plp-hero-copy {
		padding: 34px 23px;
	}

	.cmp-plp-hero-copy h1 {
		font-size: 39px;
	}

	.cmp-plp-hero-copy > p {
		font-size: 13px;
	}

	.cmp-plp-hero-stats {
		gap: 13px;
		overflow-x: auto;
	}

	.cmp-plp-hero-stats > div {
		min-width: 95px;
	}

	.cmp-plp-hero-stats strong {
		font-size: 13px;
	}

	.cmp-plp-hero-art {
		min-height: 280px;
	}

	.cmp-plp-hero-art::before {
		width: 270px;
		height: 270px;
	}

	.cmp-plp-hero-art img {
		width: 190px;
	}

	.cmp-plp-intro-box h2 {
		font-size: 28px;
	}
}