/*
Theme Name: Qasim Chunri House
Theme URI: https://qasimchunrihouse.com
Author: Qasim Chunri House
Author URI: https://qasimchunrihouse.com
Description: Official luxury e-commerce WordPress theme for Qasim Chunri House (v3: single-page shop with filters, product pages, AJAX add to cart, trending slider). Handcrafted Pakistani Chunri & traditional womenswear store with WooCommerce integration, dual color schemes (QCH Vibrant Orange & Royal Merlot), instant live customizer, direct WhatsApp ordering (03005404400), parcel tracking, and complete storefront templates.
Version: 3.6.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qasim-chunri-house
Tags: e-commerce, custom-logo, custom-menu, featured-images, full-width-template, theme-options, translation-ready
*/

@font-face {
	font-family: "Cormorant Garamond";
	src: url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("assets/fonts/dm-sans-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
}

:root {
	--accent: #ff5500;
	--accent-dark: #d44300;
	--canvas: #fffaf5;
	--ink: #33292b;
	--muted: #81777a;
	--line: #e8e0db;
	--warm: #f3ece6;
	--bar: #1e1b1a;
	--footer: #231f20;
	--footer-top: #161314;
	--warmth: 100%;
	--neutral: #f3f3f3;
	--serif: "Cormorant Garamond", Georgia, serif;
	--sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
body {
	margin: 0;
	background: var(--canvas);
	color: var(--ink);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { text-decoration: none; color: inherit; transition: color .2s ease; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: #ffe0cc; color: #361a0e; }

.page-container {
	max-width: 1400px;
	width: 100%;
	padding: 0 48px;
	margin: 0 auto;
}

.section-pad { padding: 80px 0 90px; }

/* Eyebrows & Headings */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	line-height: 1.5;
	text-transform: uppercase;
}

.eyebrow.with-line:before {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
	display: inline-block;
}

.eyebrow.light { color: #fbd6c4; }

.section-title {
	font-family: var(--serif);
	font-size: clamp(38px, 4.2vw, 58px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.03em;
	margin: 14px 0 14px;
}

.section-title em, .editorial-text h2 em, .track-hero h1 em, .center-heading h1 em {
	color: var(--accent);
	font-weight: 400;
	font-style: italic;
}

.section-intro {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.8;
	margin: 0;
}

/* Buttons */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 26px;
	border: 1px solid transparent;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: background .25s, color .25s, border-color .25s, transform .25s;
	white-space: nowrap;
	border-radius: 2px;
}

.button:hover { transform: translateY(-2px); }

.button-primary {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

.button-primary:hover {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
	color: #fff;
}

.button-outline {
	border-color: var(--accent);
	color: var(--accent);
	background: transparent;
}

.button-outline:hover {
	color: #fff;
	background: var(--accent);
}

.underlined-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 6px;
	border-bottom: 1px solid var(--accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--accent);
	text-transform: uppercase;
	transition: gap .2s ease;
}

.underlined-link:hover { gap: 16px; }

.icon-button {
	width: 38px;
	height: 38px;
	padding: 6px;
	border: 0;
	background: transparent;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: opacity .2s, transform .2s;
}

.icon-button:hover { opacity: .75; transform: scale(1.05); }

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.announcement-bar {
	min-height: 32px;
	background: var(--bar);
	color: color-mix(in srgb, #f3e8e2 var(--warmth), var(--neutral));
	display: flex;
	align-items: center;
	padding: 6px 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
}

.announcement-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	width: 100%;
}

.announcement-link {
	color: #25d366;
	font-weight: 700;
	white-space: nowrap;
}

.announcement-link:hover { text-decoration: underline; }

.site-header {
	background: var(--canvas);
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 2px 10px rgba(0,0,0,.02);
}

.header-main {
	height: 78px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.brand-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	width: 180px;
	height: 58px;
	overflow: hidden;
}

.brand-logo-img,
.brand-logo .custom-logo {
	display: block;
	height: 52px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	object-position: left center;
}

/* WordPress adds .custom-logo when a logo is selected in Customizer.
 * Keep the link and image bounded so a large uploaded PNG cannot stretch
 * the header or push product/page content below the fold. */
.brand-logo .custom-logo-link {
	display: block;
	width: 180px;
	height: 58px;
	max-width: 180px;
	line-height: 0;
}

.header-nav {
	display: flex;
	align-items: center;
	margin: 0 auto;
}

.header-nav ul.qch-menu, .header-nav ul.menu {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.2vw, 30px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-nav li {
	list-style: none;
	position: relative;
}

.header-nav a {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--ink);
	padding: 8px 0;
	display: inline-block;
	white-space: nowrap;
	position: relative;
}

.header-nav a:hover, .header-nav .current-menu-item > a {
	color: var(--accent);
}

.header-nav .current-menu-item > a:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--accent);
}

/* Submenu Dropdowns */
.header-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -12px;
	min-width: 200px;
	background: color-mix(in srgb, #fffdfa var(--warmth), #fff);
	box-shadow: 0 12px 28px rgba(45,22,30,.12);
	border: 1px solid var(--line);
	padding: 10px 16px;
	margin: 0;
	z-index: 90;
	border-radius: 4px;
}

.header-nav li:hover > .sub-menu, .header-nav li:focus-within > .sub-menu {
	display: block;
}

.header-nav .sub-menu li a {
	display: block;
	padding: 8px 0;
	font-size: 11.5px;
	border-bottom: 1px solid color-mix(in srgb, #f6f0ea var(--warmth), var(--neutral));
}

.header-nav .sub-menu li:last-child a { border-bottom: 0; }

.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.header-wa-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: #f0faf4;
	border: 1px solid #c3ebcf;
	border-radius: 20px;
	color: #128c46;
	font-size: 11px;
	font-weight: 700;
	transition: background .2s, transform .2s;
}

.header-wa-btn:hover {
	background: #25d366;
	color: #fff;
	transform: scale(1.02);
}

.wa-dot {
	width: 8px;
	height: 8px;
	background: #25d366;
	border-radius: 50%;
	display: inline-block;
}

.header-wa-btn:hover .wa-dot { background: #fff; }

.bag-trigger { position: relative; }

.icon-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--accent);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
}

.mobile-menu-trigger { display: none; }

/* ==========================================================================
   MOBILE DRAWER NAVIGATION
   ========================================================================== */
.qch-drawer-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(30, 20, 24, .5);
	backdrop-filter: blur(2px);
	z-index: 100;
}

.qch-menu-open .qch-drawer-backdrop { display: block; }

.qch-mobile-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(340px, 86vw);
	background: var(--canvas);
	box-shadow: 10px 0 35px rgba(0,0,0,.15);
	z-index: 110;
	transform: translateX(-110%);
	transition: transform .3s cubic-bezier(.25, .8, .25, 1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.qch-menu-open .qch-mobile-drawer {
	transform: translateX(0);
}

.drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--line);
}

.drawer-close-btn {
	font-size: 22px;
	color: var(--ink);
}

.drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 22px;
}

.drawer-nav ul.drawer-menu, .drawer-nav ul.menu, .drawer-nav ul.qch-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.drawer-nav li {
	border-bottom: 1px solid var(--line);
}

.drawer-nav li a {
	display: block;
	padding: 14px 0;
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--ink);
}

.drawer-nav li a:hover { color: var(--accent); }

.drawer-nav .sub-menu {
	list-style: none;
	padding: 0 0 10px 14px;
	margin: 0;
}

.drawer-nav .sub-menu li { border: 0; }
.drawer-nav .sub-menu li a { font-size: 16px; padding: 6px 0; font-family: var(--sans); }

.drawer-footer {
	padding: 20px 22px;
	border-top: 1px solid var(--line);
	background: color-mix(in srgb, #f7f1ec var(--warmth), var(--neutral));
}

.drawer-whatsapp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px;
	background: #25d366;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	border-radius: 2px;
	margin-bottom: 12px;
}

.drawer-notes {
	display: flex;
	justify-content: space-between;
	font-size: 10.5px;
	color: var(--muted);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
	min-height: 600px;
	background-size: cover;
	background-position: center 35%;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.hero-inner {
	position: relative;
	z-index: 2;
	min-height: 600px;
	display: flex;
	align-items: center;
}

.hero-copy {
	max-width: 600px;
	padding: 30px 0;
}

.hero-copy h1 {
	font-family: var(--serif);
	font-size: clamp(52px, 5.8vw, 84px);
	font-weight: 500;
	letter-spacing: -.04em;
	line-height: .95;
	margin: 20px 0 22px;
	color: #2b2022;
}

.hero-copy p {
	max-width: 480px;
	color: #574d4f;
	font-size: 14px;
	line-height: 1.85;
	margin: 0;
}

.hero-buttons {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	flex-wrap: wrap;
}

.hero-whatsapp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 24px;
	min-height: 48px;
	background: #25d366;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	border-radius: 2px;
	transition: background .2s, transform .2s, box-shadow .2s;
}

.hero-whatsapp-btn:hover {
	background: #20ba59;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(37,211,102,.28);
}

.hero-collection-note {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 9.5px;
	font-weight: 700;
	color: #8c7376;
	letter-spacing: .16em;
	margin-top: 48px;
}

.note-rule { display: inline-block; width: 26px; height: 1px; background: #8c7376; }

.hero-vertical-text {
	position: absolute;
	bottom: 30px;
	right: 24px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: color-mix(in srgb, #fff8ed var(--warmth), var(--neutral));
	font-size: 9px;
	letter-spacing: .22em;
	font-weight: 700;
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ==========================================================================
   PROMISE BAR
   ========================================================================== */
.promise-bar {
	background: color-mix(in srgb, #f2eae5 var(--warmth), var(--neutral));
	border-bottom: 1px solid color-mix(in srgb, #ebe1db var(--warmth), var(--neutral));
}

.promise-inner {
	min-height: 90px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
}

.promise-inner > div {
	min-height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	border-right: 1px solid #dccfc8;
}

.promise-inner > div:first-child { justify-content: flex-start; }
.promise-inner > div:last-child { border-right: 0; justify-content: flex-end; }

.promise-symbol {
	color: var(--accent);
	font-family: var(--serif);
	font-size: 24px;
	line-height: 1;
}

.promise-inner span { display: flex; flex-direction: column; gap: 2px; }
.promise-inner strong { color: #49383e; font-size: 12px; font-weight: 700; }
.promise-inner small { color: #8c7c7c; font-size: 10.5px; }

/* ==========================================================================
   CIRCULAR CATEGORIES
   ========================================================================== */
.hs-section { padding: 80px 0; }
.hs-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 36px;
}

.circle-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 22px;
}

.circle-card {
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.circle-ring {
	position: relative;
	width: 100%;
	max-width: 210px;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: color-mix(in srgb, #efe7e0 var(--warmth), var(--neutral));
	border: 1px solid var(--line);
}

.circle-ring img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	transition: transform .5s ease;
}

.circle-card:hover .circle-ring img { transform: scale(1.08); }
.circle-card strong { margin-top: 16px; font-size: 13.5px; font-weight: 700; }
.circle-card small { margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.4; max-width: 180px; }
.circle-card i { font-style: normal; font-size: 9px; color: var(--accent); font-weight: 700; margin-top: 4px; }

/* ==========================================================================
   SALE MARQUEE RIBBON
   ========================================================================== */
.sale-ribbon {
	position: relative;
	padding: 26px 0;
	background: var(--accent);
	overflow: hidden;
	margin: 20px 0;
}

.sale-wave {
	position: absolute;
	left: -5%;
	width: 110%;
	height: 28px;
	background: var(--accent);
	opacity: .35;
}

.sale-wave-top { top: 2px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.sale-wave-bottom { bottom: 2px; border-radius: 0 0 50% 50% / 0 0 100% 100%; }

.sale-track { position: relative; overflow: hidden; }
.sale-scroll {
	display: flex;
	align-items: center;
	width: max-content;
	animation: sale-move 28s linear infinite;
}

.sale-cell {
	display: inline-flex;
	align-items: center;
	gap: 22px;
	padding: 0 20px;
}

.sale-cell b { color: #fff; font-size: 18px; font-weight: 700; white-space: nowrap; }
.sale-badge {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	background: #fff;
	color: var(--accent);
	font-weight: 800;
	font-size: 13px;
	border-radius: 6px;
	transform: rotate(-8deg);
}

@keyframes sale-move {
	from { transform: translateX(0); }
	to { transform: translateX(-33.3333%); }
}

/* ==========================================================================
   PRODUCTS SECTION & CLEAN GRID
   ========================================================================== */
.featured-section { background: color-mix(in srgb, #f6f1ec var(--warmth), var(--neutral)); }
.section-heading-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
}

.product-tabs {
	display: flex;
	gap: 28px;
	border-bottom: 1px solid var(--line);
	margin: 28px 0 34px;
}

.product-tabs button {
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 0 2px 14px;
	margin-bottom: -1px;
	background: transparent;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .2s, border-color .2s;
}

.product-tabs button.active {
	color: var(--accent);
	border-color: var(--accent);
}

.clean-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px 22px;
}

.clean-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 2px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.clean-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(45,22,30,.08);
}

.clean-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: .82;
	background: color-mix(in srgb, #f4efec var(--warmth), var(--neutral));
	overflow: hidden;
}

.clean-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	transition: transform .5s ease;
}

.clean-card:hover .clean-media img { transform: scale(1.06); }

.clean-off, .product-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--accent);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 5px 8px;
	border-radius: 2px;
	text-transform: uppercase;
}

.clean-body {
	padding: 16px 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.product-category {
	display: block;
	font-size: 9.5px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 700;
	margin-bottom: 6px;
}

.clean-name {
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--ink);
	margin-bottom: 8px;
}

.clean-name:hover { color: var(--accent); }

.clean-price {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--accent);
}

.clean-price del {
	color: #a89d9e;
	font-weight: 400;
	font-size: 12px;
}

.clean-foot {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin: 10px 0 14px;
}

.swatch-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.swatch-row i {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid rgba(0,0,0,.15);
}

.product-card-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: auto;
}

.button-wa-card {
	background: #25d366;
	color: #fff;
	border: 1px solid #20b858;
	font-size: 9.5px;
	font-weight: 700;
	padding: 8px 6px;
	min-height: 36px;
	text-align: center;
	border-radius: 2px;
}

.button-wa-card:hover {
	background: #1eb956;
	color: #fff;
}

.button-outline-card {
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink);
	font-size: 9.5px;
	font-weight: 700;
	padding: 8px 6px;
	min-height: 36px;
	text-align: center;
	border-radius: 2px;
}

.button-outline-card:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* ==========================================================================
   EDITORIAL & STORY
   ========================================================================== */
.editorial-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 520px;
	background: color-mix(in srgb, #eae0d9 var(--warmth), var(--neutral));
}

.editorial-text {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.editorial-text-inner {
	max-width: 500px;
	padding: 60px 48px;
	position: relative;
	z-index: 2;
}

.editorial-text h2 {
	font-family: var(--serif);
	font-size: clamp(40px, 4.4vw, 62px);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -.03em;
	margin: 18px 0 16px;
}

.editorial-text p {
	color: #6d6264;
	font-size: 13.5px;
	line-height: 1.85;
	margin-bottom: 26px;
}

.editorial-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.editorial-watermark {
	position: absolute;
	font-family: var(--serif);
	font-size: 220px;
	bottom: -110px;
	left: -20px;
	z-index: 1;
	line-height: 1;
	color: rgba(255, 85, 0, .05);
	font-weight: 700;
	pointer-events: none;
}

.editorial-image {
	position: relative;
	min-height: 520px;
	overflow: hidden;
}

.editorial-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
}

.editorial-image-label {
	position: absolute;
	bottom: 20px;
	right: 24px;
	color: #fff;
	font-size: 9.5px;
	letter-spacing: .18em;
	font-weight: 700;
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.story-section { background: var(--canvas); }
.story-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(50px, 6vw, 110px);
}

.story-image-wrap {
	position: relative;
	height: 540px;
	background: #d8bca8;
}

.story-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.story-stamp {
	position: absolute;
	z-index: 3;
	right: -30px;
	bottom: 30px;
	width: 105px;
	height: 105px;
	border-radius: 50%;
	background: color-mix(in srgb, #fffdfa var(--warmth), #fff);
	color: var(--accent);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(45,20,25,.12);
	text-align: center;
	transform: rotate(-8deg);
}

.story-stamp > span { font-size: 26px; line-height: 1; }
.story-stamp small { font-size: 9px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; }

.story-copy h2 {
	font-size: clamp(40px, 4.2vw, 58px);
	margin: 16px 0 18px;
}

.story-copy p {
	font-size: 13.5px;
	color: #6e6366;
	line-height: 1.9;
	margin-bottom: 14px;
}

.story-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
	gap: 14px;
	margin: 24px 0 26px;
}

.story-values div { display: flex; flex-direction: column; gap: 4px; }
.story-values strong { font-family: var(--serif); font-size: 28px; font-weight: 500; color: var(--accent); line-height: 1; }
.story-values span { font-size: 10.5px; color: var(--muted); }

/* ==========================================================================
   CUSTOMER REVIEWS
   ========================================================================== */
.hs-reviews {
	background: var(--accent);
	color: #fff;
	text-align: center;
	padding: 85px 0 95px;
	position: relative;
}

.hs-reviews h2 {
	font-family: var(--serif);
	font-size: clamp(38px, 4.4vw, 56px);
	font-weight: 500;
	margin: 12px 0 40px;
}

.review-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	text-align: left;
}

.review-card {
	background: #fff;
	color: var(--ink);
	padding: 28px 24px;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

.review-stars {
	color: #f5a623;
	font-size: 16px;
	letter-spacing: 3px;
	margin-bottom: 10px;
}

.review-card h3 {
	font-size: 14.5px;
	font-weight: 700;
	margin: 0 0 8px;
}

.review-card p {
	color: #645a5d;
	font-size: 12.5px;
	line-height: 1.75;
	margin: 0 0 16px;
	flex: 1;
}

.review-card strong {
	font-size: 11.5px;
	display: block;
}

.review-product {
	font-size: 10px;
	color: var(--accent);
	font-weight: 700;
	margin-top: 4px;
}

/* ==========================================================================
   FAQS & ACCORDIONS
   ========================================================================== */
.faq-home { background: var(--canvas); }
.faq-home-grid {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 8%;
}

.faq-list { border-top: 1px solid var(--line); }
.faq-list details {
	border-bottom: 1px solid var(--line);
	padding: 0;
	transition: background .2s ease;
}

.faq-list summary {
	padding: 20px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	list-style: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-plus {
	font-size: 22px;
	font-weight: 300;
	color: var(--accent);
	transition: transform .25s ease;
	line-height: 1;
}

.faq-list details[open] .faq-plus { transform: rotate(45deg); }
.faq-list details p {
	color: #6d6164;
	font-size: 13px;
	line-height: 1.85;
	margin: -4px 30px 22px 0;
}

.bottom-promise {
	min-height: 64px;
	background: color-mix(in srgb, #f4ede8 var(--warmth), var(--neutral));
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	text-align: center;
	padding: 12px 20px;
}

.bottom-promise span {
	color: #524045;
	font-family: var(--serif);
	font-size: 20px;
	font-style: italic;
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.site-footer {
	background: var(--footer);
	color: color-mix(in srgb, #f8f0ed var(--warmth), var(--neutral));
}

.footer-newsletter {
	background: var(--footer-top);
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.newsletter-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	padding: 40px 0;
}

.newsletter-inner h2 {
	font-family: var(--serif);
	font-size: clamp(34px, 3.8vw, 50px);
	font-weight: 500;
	margin: 10px 0 6px;
	color: #fff;
}

.newsletter-inner p {
	max-width: 480px;
	color: #c9bcba;
	font-size: 13px;
	margin: 0;
}

.footer-wa-cta {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	padding: 14px 24px;
}

.footer-wa-cta:hover {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
}

.footer-main {
	display: grid;
	grid-template-columns: 1.5fr .9fr .9fr 1.2fr;
	gap: 45px;
	padding: 65px 0 55px;
}

.footer-brand .footer-tagline {
	font-family: var(--serif);
	font-style: italic;
	font-size: 17px;
	color: #eed6ce;
	margin: 14px 0 8px;
}

.footer-about-text {
	color: #b09ea2;
	font-size: 12px;
	line-height: 1.8;
	max-width: 290px;
	margin: 0 0 18px;
}

.footer-social-row {
	display: flex;
	gap: 10px;
}

.social-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #736467;
	display: grid;
	place-items: center;
	color: #f0e2e3;
	font-size: 14px;
	transition: background .2s, border-color .2s, color .2s;
}

.social-circle:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.footer-column h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 11.5px;
	margin: 0 0 18px;
}

.footer-column ul.footer-menu, .footer-column ul.menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.footer-column li a {
	color: #c9b7ba;
	font-size: 12px;
	transition: color .2s ease;
}

.footer-column li a:hover { color: #fff; }

.footer-contact .footer-highlight-contact {
	color: #25d366 !important;
	font-weight: 700;
	font-size: 13.5px;
	display: block;
	margin-bottom: 8px;
}

.footer-contact-link {
	display: block;
	color: #c9b7ba;
	font-size: 12px;
	margin-bottom: 6px;
}

.footer-contact-link:hover { color: #fff; }
.footer-address { display: block; font-size: 11.5px; color: #a08f93; margin-top: 8px; }
.footer-badge-cod { display: inline-block; font-size: 10.5px; color: #eed6ce; margin-top: 6px; font-weight: 700; }

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 58px;
	border-top: 1px solid rgba(255,255,255,.08);
	color: #a8949a;
	font-size: 11px;
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
	margin: 40px 0 60px;
}

.about-hero-image {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

.about-image-badge {
	position: absolute;
	bottom: 16px;
	left: 16px;
	background: rgba(30,20,24,.8);
	color: #fff;
	padding: 6px 12px;
	font-size: 10px;
	letter-spacing: .08em;
	border-radius: 2px;
}

.about-hero-text h2 {
	font-family: var(--serif);
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1.1;
	margin: 12px 0 18px;
}

.about-hero-text p {
	color: #645a5d;
	font-size: 14px;
	line-height: 1.85;
	margin-bottom: 14px;
}

.about-values-section {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin: 50px 0;
}

.about-value-card {
	background: #fff;
	border: 1px solid var(--line);
	padding: 30px 24px;
	border-radius: 4px;
}

.about-val-icon {
	font-size: 28px;
	color: var(--accent);
	margin-bottom: 12px;
	display: block;
}

.about-value-card h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 8px;
}

.about-value-card p {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.75;
	margin: 0;
}

.about-editorial-banner {
	background: color-mix(in srgb, #f4ede8 var(--warmth), var(--neutral));
	padding: 50px 40px;
	border-radius: 4px;
	text-align: center;
	margin: 50px 0;
}

.about-editorial-inner {
	max-width: 650px;
	margin: 0 auto;
}

.about-editorial-inner h2 {
	font-family: var(--serif);
	font-size: 38px;
	font-weight: 500;
	margin: 12px 0 16px;
}

.about-editorial-inner p {
	color: #6d6265;
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 24px;
}

/* ==========================================================================
   TRACK ORDER PAGE
   ========================================================================== */
.track-hero {
	background: var(--accent);
	color: #fff;
	padding: 50px 0 65px;
}

.track-hero h1 {
	font-family: var(--serif);
	font-size: clamp(44px, 5vw, 68px);
	font-weight: 500;
	line-height: 1;
	margin: 12px 0;
}

.track-hero p {
	color: rgba(255,255,255,.9);
	font-size: 13.5px;
	max-width: 540px;
	margin: 0;
	line-height: 1.8;
}

.breadcrumbs-light { color: rgba(255,255,255,.75); margin-bottom: 18px; font-size: 11px; }
.breadcrumbs-light a:hover { color: #fff; }
.breadcrumbs-light span:last-child { color: #fff; }

.track-page { padding: 60px 0 90px; }
.track-wrap {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.track-form-card {
	background: color-mix(in srgb, #f4ece7 var(--warmth), var(--neutral));
	padding: 32px 28px;
	border-radius: 4px;
}

.track-form-card h2 {
	font-family: var(--serif);
	font-size: 30px;
	font-weight: 600;
	margin: 10px 0 6px;
}

.track-form-card p {
	color: #6e6265;
	font-size: 12.5px;
	line-height: 1.7;
	margin: 0 0 20px;
}

.track-help {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #e0d2cb;
	font-size: 11.5px;
}

.track-help span { display: block; color: var(--muted); margin-bottom: 6px; }
.track-help a { color: var(--accent); font-weight: 700; }

.track-result {
	border: 1px solid var(--line);
	background: #fff;
	padding: 32px 28px;
	border-radius: 4px;
}

.track-timeline { padding: 10px 0 0; }
.track-step {
	display: flex;
	gap: 16px;
	position: relative;
	padding-bottom: 26px;
}

.track-step:not(:last-child):before {
	content: "";
	position: absolute;
	left: 17px;
	top: 34px;
	bottom: 2px;
	width: 2px;
	background: var(--line);
}

.track-step.reached:not(:last-child):before { background: var(--accent); }

.track-dot {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--line);
	display: grid;
	place-items: center;
	background: #fff;
	flex-shrink: 0;
	font-size: 15px;
}

.track-step.reached .track-dot {
	border-color: var(--accent);
	background: var(--accent);
	color: #fff;
}

.track-step strong { display: block; font-size: 13.5px; }
.track-step p { color: var(--muted); font-size: 11.5px; line-height: 1.6; margin: 4px 0 0; }

.track-faq-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 50px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
}

.track-faq-strip strong { font-size: 13px; display: block; margin-bottom: 6px; }
.track-faq-strip p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-page { padding: 40px 0 80px; }
.contact-heading { margin-bottom: 40px; }
.contact-heading h1 { font-family: var(--serif); font-size: clamp(38px, 4.4vw, 58px); margin: 10px 0; }
.contact-heading p { color: var(--muted); font-size: 14px; max-width: 600px; margin: 0; }

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: 45px;
	align-items: start;
}

.contact-info {
	background: color-mix(in srgb, #f4ede8 var(--warmth), var(--neutral));
	padding: 36px 30px;
	border-radius: 4px;
}

.contact-flower { font-size: 28px; color: var(--accent); display: block; margin-bottom: 12px; }
.contact-info h2 { font-family: var(--serif); font-size: 28px; font-weight: 500; margin: 0 0 10px; }
.contact-info p { color: #6b5e62; font-size: 13px; line-height: 1.8; margin-bottom: 22px; }

.contact-info-link {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 18px;
}

.contact-info-link > span { font-size: 20px; color: var(--accent); line-height: 1; }
.contact-info-link span:first-child + div span { display: block; font-size: 9.5px; font-weight: 700; color: var(--muted); letter-spacing: .1em; margin-bottom: 4px; }
.contact-info-link a { font-size: 14px; font-weight: 700; color: var(--ink); }
.contact-info-link a:hover { color: var(--accent); }

.contact-info-note {
	background: color-mix(in srgb, #fffdfa var(--warmth), #fff);
	border-left: 3px solid var(--accent);
	padding: 12px 14px;
	font-size: 12px;
	color: #6a5c60;
	margin-top: 24px;
}

.contact-form-wrap {
	background: #fff;
	border: 1px solid var(--line);
	padding: 36px 32px;
	border-radius: 4px;
}

.contact-form-wrap h2 { font-family: var(--serif); font-size: 30px; font-weight: 500; margin: 0 0 6px; }
.contact-form-wrap p { color: var(--muted); font-size: 13px; margin: 0 0 24px; }

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 22px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

.field input, .field textarea {
	border: 1px solid #dcd1cc;
	background: color-mix(in srgb, #fffdfa var(--warmth), #fff);
	padding: 12px 14px;
	font-size: 13px;
	border-radius: 2px;
}

.field input:focus, .field textarea:focus {
	outline: none;
	border-color: var(--accent);
}

.form-success {
	background: #d4edda;
	color: #155724;
	padding: 12px 16px;
	border-radius: 4px;
	margin-bottom: 20px;
	font-size: 13px;
}

.form-error {
	background: #f8d7da;
	color: #721c24;
	padding: 12px 16px;
	border-radius: 4px;
	margin-bottom: 20px;
	font-size: 13px;
}

/* Reference homepage additions */
.announcement-rotator {
	position: relative;
	flex: 1;
	min-height: 18px;
	text-align: center;
	overflow: hidden;
}

.announcement-message {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .45s ease, transform .45s ease;
}

.announcement-message.is-active {
	opacity: 1;
	transform: translateY(0);
}

.compact-heading { align-items: center; }
.edit-note { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.you-are-in-section { background: color-mix(in srgb, #fbf7f2 var(--warmth), var(--neutral)); }
.edit-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.edit-card { position: relative; min-height: 230px; overflow: hidden; background: color-mix(in srgb, #eee5de var(--warmth), var(--neutral)); }
.edit-card img { width: 100%; height: 260px; object-fit: cover; object-position: center 20%; transition: transform .5s ease; }
.edit-card:hover img { transform: scale(1.05); }
.edit-card:after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(28,20,22,.72)); }
.edit-card strong { position: absolute; z-index: 2; left: 20px; bottom: 18px; color: #fff; font-family: var(--serif); font-size: 24px; font-weight: 500; }
.edit-discount { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 5px 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; }
.trending-section { background: color-mix(in srgb, #f1e9e2 var(--warmth), var(--neutral)); }
.trending-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 70px; align-items: center; }
.trending-media { position: relative; min-height: 460px; background: #e9ded4; overflow: hidden; }
.trending-media img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: center 20%; }
.trending-stamp { position: absolute; right: 20px; bottom: 20px; display: grid; place-items: center; width: 86px; height: 86px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: #fff; font-family: var(--serif); font-size: 23px; line-height: .75; text-align: center; text-shadow: 0 1px 5px rgba(0,0,0,.4); }
.trending-stamp small { font-family: var(--sans); font-size: 8px; letter-spacing: .1em; }
.trending-copy p { max-width: 470px; color: #66595a; font-size: 14px; line-height: 1.9; }
.trending-price { margin: 22px 0 26px; color: var(--accent); font-size: 21px; font-weight: 700; }
.trending-price del { margin-right: 8px; color: #9d8e8e; font-size: 14px; font-weight: 400; }
.famous-sections { background: var(--canvas); }
.famous-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.famous-card { position: relative; min-height: 190px; padding: 24px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .25s ease, color .25s ease; }
.famous-card:hover { background: var(--accent); color: #fff; }
.famous-card > span { display: block; color: var(--accent); font-size: 11px; font-weight: 700; margin-bottom: 28px; }
.famous-card:hover > span, .famous-card:hover small { color: rgba(255,255,255,.8); }
.famous-card strong { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500; }
.famous-card small { display: block; max-width: 190px; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.famous-card b { position: absolute; right: 20px; bottom: 18px; color: var(--accent); font-size: 18px; }
.famous-card:hover b { color: #fff; }

@keyframes category-move { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 11px)); } }

.category-marquee { display: flex; width: max-content; gap: 22px; animation: category-move 34s linear infinite; }
.category-marquee:hover { animation-play-state: paused; }
.category-marquee .circle-card { flex: 0 0 210px; width: 210px; }
.hs-categories .page-container { overflow: hidden; }

/* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 1100px) {
	.page-container { padding: 0 28px; }
	.circle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.clean-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.footer-main { grid-template-columns: 1fr 1fr; gap: 35px; }
}

@media (max-width: 1100px) {
	.desktop-nav { display: none; }
	.mobile-menu-trigger { display: inline-flex; }
}

@media (max-width: 860px) {
	.header-wa-btn .wa-label { display: none; }
	.header-wa-btn { padding: 6px 8px; }
	.circle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.clean-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.review-grid { grid-template-columns: 1fr; }
	.editorial-section, .story-grid { grid-template-columns: 1fr; }
	.editorial-image { min-height: 380px; }
	.story-image-wrap { height: 420px; }
	.faq-home-grid { grid-template-columns: 1fr; gap: 30px; }
	.track-wrap { grid-template-columns: 1fr; }
	.contact-grid { grid-template-columns: 1fr; }
	.about-hero-grid, .about-values-section { grid-template-columns: 1fr; }
	.promise-inner { grid-template-columns: repeat(2, 1fr); gap: 16px 0; padding: 18px 0; }
		.promise-inner > div { border-right: 0; justify-content: flex-start; }
	.edit-strip { grid-template-columns: repeat(3, minmax(210px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
	.trending-grid { grid-template-columns: 1fr; gap: 30px; }
	.famous-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
	.page-container { padding: 0 18px; }
		.announcement-inner { flex-direction: column; gap: 3px; text-align: center; }
	.announcement-rotator { width: 100%; }
	.header-main { height: 68px; }
	.brand-logo-img, .brand-logo .custom-logo { height: 42px; max-width: 140px; }
	.brand-logo .custom-logo-link { max-width: 140px; }
	.clean-grid { grid-template-columns: 1fr; }
	.circle-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.footer-main { grid-template-columns: 1fr; }
	.form-grid { grid-template-columns: 1fr; }
		.track-faq-strip { grid-template-columns: 1fr; }
	.trending-media, .trending-media img { min-height: 340px; }
	.famous-grid { grid-template-columns: 1fr; }
	.footer-bottom { flex-direction: column; gap: 8px; text-align: center; padding: 16px 0; }
}