/* ==========================================================================
   Dar Tajine — design system
   1:1 recreation of src/styles.css (Tailwind v4 tokens) as plain CSS.
   ========================================================================== */

:root {
	--radius: 0.5rem;

	/* Brand palette (unchanged from the original oklch values) */
	--deep-red: oklch(0.40 0.18 25);   /* #8B0000 */
	--gold: oklch(0.74 0.13 85);        /* #C9A227 */
	--gold-soft: oklch(0.85 0.08 85);
	--cream: oklch(0.97 0.025 85);      /* #FFF5E1 */
	--dark-green: oklch(0.30 0.06 150); /* #1F3D2B */

	--background: var(--cream);
	--foreground: oklch(0.20 0.02 40);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.20 0.02 40);
	--primary: var(--deep-red);
	--primary-foreground: var(--cream);
	--secondary: var(--dark-green);
	--secondary-foreground: var(--cream);
	--muted: oklch(0.94 0.02 85);
	--muted-foreground: oklch(0.45 0.03 40);
	--accent: var(--gold);
	--accent-foreground: oklch(0.20 0.02 40);
	--destructive: oklch(0.55 0.22 27);
	--border: oklch(0.88 0.04 80);
	--input: oklch(0.90 0.03 80);
	--ring: var(--gold);

	--gradient-warm: linear-gradient(135deg, oklch(0.40 0.18 25) 0%, oklch(0.30 0.15 30) 100%);
	--gradient-gold: linear-gradient(135deg, oklch(0.78 0.14 85) 0%, oklch(0.65 0.13 70) 100%);
	--gradient-overlay: linear-gradient(180deg, oklch(0.15 0.04 30 / 0.2) 0%, oklch(0.15 0.04 30 / 0.85) 100%);
	--shadow-warm: 0 20px 50px -20px oklch(0.40 0.18 25 / 0.35);
	--shadow-soft: 0 8px 30px -10px oklch(0.20 0.05 30 / 0.15);
	--shadow-gold: 0 0 40px oklch(0.74 0.13 85 / 0.3);

	--font-display: 'Cormorant Garamond', Georgia, serif;
	--font-arabic: 'Amiri', Georgia, serif;
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body {
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-feature-settings: "ss01", "cv01";
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.font-arabic { font-family: var(--font-arabic); }

.container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* ---------- Utilities (kept minimal, matching the original utility layer) ---------- */
.text-gold { color: var(--gold); }
.bg-gold { background-color: var(--gold); }
.bg-deep-red { background-color: var(--deep-red); }
.bg-dark-green { background-color: var(--dark-green); }
.bg-cream { background-color: var(--cream); }
.gradient-warm { background: var(--gradient-warm); }
.gradient-gold { background: var(--gradient-gold); }
.gradient-overlay { background: var(--gradient-overlay); }
.shadow-warm { box-shadow: var(--shadow-warm); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-gold { box-shadow: var(--shadow-gold); }
.text-balance { text-wrap: balance; }

.zellige-bg {
	background-image: url("../images/zellige-pattern.jpg");
	background-size: 180px;
	background-repeat: repeat;
}
.arabesque-bg {
	background-image:
		radial-gradient(circle at 20% 20%, oklch(0.74 0.13 85 / 0.08) 0%, transparent 40%),
		radial-gradient(circle at 80% 70%, oklch(0.40 0.18 25 / 0.06) 0%, transparent 40%);
}

@keyframes float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.animate-float { animation: float-slow 6s ease-in-out infinite; }

/* ---------- Ornament divider & section title (shortcodes) ---------- */
.ornament-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--gold); margin: 0 auto; max-width: 40rem; }
.ornament-divider::before, .ornament-divider::after {
	content: ""; flex: 1; height: 1px; max-width: 8rem;
	background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.ornament-diamond { flex-shrink: 0; }
.ornament-label { font-family: var(--font-arabic); font-size: 1rem; color: oklch(0.74 0.13 85 / 0.9); white-space: nowrap; }

.section-title { max-width: 42rem; }
.section-title--center { margin: 0 auto; text-align: center; }
.section-title--left { text-align: left; }
.section-eyebrow { font-size: 0.75rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--deep-red); font-weight: 500; margin-bottom: 0.75rem; }
.section-arabic { font-family: var(--font-arabic); font-size: 1.5rem; color: var(--gold); margin-bottom: 0.5rem; }
.section-heading { font-size: 2.25rem; font-weight: 600; color: var(--foreground); }
@media (min-width: 768px) { .section-heading { font-size: 3rem; } }
.section-description { margin-top: 1rem; color: var(--muted-foreground); line-height: 1.7; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: transparent;
	transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {
	background-color: oklch(0.97 0.025 85 / 0.95);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow-soft);
	border-bottom: 1px solid var(--border);
}
.site-header-row { display: flex; align-items: center; justify-content: space-between; height: 5rem; gap: 1rem; }

.site-logo { display: flex; align-items: center; gap: 0.75rem; }
.site-logo-badge {
	position: relative; height: 2.75rem; width: 2.75rem; border-radius: 999px;
	background: var(--gradient-warm); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-warm);
}
.site-logo-badge::after { content: ""; position: absolute; inset: -2px; border-radius: 999px; border: 1px solid oklch(0.74 0.13 85 / 0.4); }
.site-logo-letter { font-family: var(--font-arabic); font-size: 1.5rem; color: var(--cream); }
.site-logo-text { line-height: 1.2; }
.site-logo-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--foreground); }
.site-logo-name em { font-style: normal; color: var(--gold); }
.site-logo-sub { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted-foreground); }

.site-nav { display: none; }
.site-nav ul.menu { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.site-nav .menu-item a {
	position: relative; font-size: 0.875rem; font-weight: 500; color: oklch(0.20 0.02 40 / 0.8);
	transition: color .2s ease; padding-bottom: 2px;
}
.site-nav .menu-item a:hover, .site-nav .current-menu-item a { color: var(--deep-red); }
.site-nav .current-menu-item a::after {
	content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%; background: var(--gold);
}
@media (min-width: 1024px) { .site-nav { display: block; } }

.site-header-actions { display: flex; align-items: center; gap: 0.5rem; }
.icon-btn {
	position: relative; height: 2.5rem; width: 2.5rem; border-radius: 999px; border: 0; background: transparent;
	display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--foreground);
	transition: background-color .2s ease;
}
.icon-btn svg { height: 1rem; width: 1rem; }
.icon-btn:hover { background-color: var(--muted); }
.icon-btn--search { display: none; }
@media (min-width: 640px) { .icon-btn--search { display: flex; } }
.icon-btn--cart .cart-count {
	position: absolute; top: -2px; right: -2px; height: 1.25rem; width: 1.25rem; border-radius: 999px;
	background: var(--deep-red); color: var(--cream); font-size: 10px; font-weight: 600;
	display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-warm);
}
.icon-btn--cart .cart-count.is-empty { display: none; }
.mobile-menu-toggle .icon-close { display: none; }
.mobile-menu-toggle.is-open .icon-menu { display: none; }
.mobile-menu-toggle.is-open .icon-close { display: block; }
@media (min-width: 1024px) { .mobile-menu-toggle { display: none; } }

.header-search { display: none; padding-top: 0.75rem; }
.header-search.is-open { display: block; }
.header-search .search-form { display: flex; gap: 0.5rem; }
.header-search .search-field { flex: 1; border: 1px solid var(--border); border-radius: 0.375rem; padding: 0.6rem 1rem; font-size: 0.875rem; background: var(--background); }
.header-search .search-submit { border: 0; border-radius: 999px; padding: 0 1.25rem; background: var(--gradient-warm); color: var(--cream); font-size: 0.875rem; cursor: pointer; }

.mobile-nav { display: none; padding: 1rem 0 1.5rem; border-top: 1px solid var(--border); margin-top: 0.5rem; }
.mobile-nav.is-open { display: block; }
.mobile-nav-list { list-style: none; margin: 0; padding: 0; }
.mobile-nav-list li a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; }
.mobile-nav-list li a:hover { background-color: var(--muted); }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding: 3rem 0 6rem; }
@media (min-width: 1024px) { .hero { padding: 5rem 0 8rem; } }
.hero-pattern { position: absolute; inset: 0; opacity: 0.06; pointer-events: none; background-image: url("../images/zellige-pattern.jpg"); background-size: 180px; }
.hero-grid { position: relative; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.hero-badge {
	display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 1rem; border-radius: 999px;
	background: oklch(0.40 0.18 25 / 0.1); color: var(--deep-red); font-size: 0.75rem; letter-spacing: 0.3em;
	text-transform: uppercase; font-weight: 500; margin-bottom: 1.5rem;
}
.hero-badge-dot { height: 0.375rem; width: 0.375rem; border-radius: 999px; background: var(--deep-red); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.hero-arabic { font-family: var(--font-arabic); font-size: 1.875rem; color: var(--gold); margin-bottom: 0.75rem; }
.hero-title { font-size: 3rem; font-weight: 600; line-height: 1.05; color: var(--foreground); }
.hero-title em { font-style: italic; color: var(--deep-red); }
@media (min-width: 768px) { .hero-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 4.5rem; } }
.hero-lead { margin-top: 1.5rem; font-size: 1.125rem; color: var(--muted-foreground); max-width: 32rem; line-height: 1.7; }
.hero-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.hero-stats { margin-top: 3rem; display: flex; align-items: center; gap: 2rem; }
.hero-stat-num { font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; color: var(--deep-red); }
.hero-stat-label { font-size: 0.75rem; color: var(--muted-foreground); letter-spacing: 0.05em; text-transform: uppercase; }
.hero-stat-divider { height: 2.5rem; width: 1px; background: var(--border); }

.hero-visual { position: relative; }
.hero-blob { position: absolute; height: 18rem; width: 18rem; border-radius: 999px; filter: blur(64px); }
.hero-blob--gold { top: -2rem; right: -2rem; background: oklch(0.74 0.13 85 / 0.15); }
.hero-blob--red { bottom: -3rem; left: -2rem; background: oklch(0.40 0.18 25 / 0.15); }
.hero-frame { position: relative; }
.hero-frame::before, .hero-frame::after { content: ""; position: absolute; border-radius: 999px; border: 1px solid oklch(0.74 0.13 85 / 0.3); }
.hero-frame::before { inset: 1rem; }
.hero-frame::after { inset: 0; border-color: oklch(0.74 0.13 85 / 0.2); }
.hero-image { position: relative; aspect-ratio: 1/1; border-radius: 999px; overflow: hidden; box-shadow: var(--shadow-warm); border: 4px solid var(--cream); }
.hero-image img { height: 100%; width: 100%; object-fit: cover; }

.hero-chip {
	position: absolute; bottom: -1.5rem; left: -1.5rem; background: var(--cream); border-radius: 1rem;
	box-shadow: var(--shadow-warm); padding: 1rem; display: flex; align-items: center; gap: 0.75rem; border: 1px solid oklch(0.74 0.13 85 / 0.3);
}
.hero-chip-icon { height: 2.5rem; width: 2.5rem; border-radius: 999px; background: var(--gradient-gold); display: flex; align-items: center; justify-content: center; }
.hero-chip-icon svg { height: 1.25rem; width: 1.25rem; color: var(--dark-green); }
.hero-chip-label { font-size: 0.75rem; color: var(--muted-foreground); }
.hero-chip-value { font-family: var(--font-display); font-weight: 600; }

.hero-tag { position: absolute; top: -1rem; right: -1rem; background: var(--deep-red); color: var(--cream); border-radius: 1rem; box-shadow: var(--shadow-warm); padding: 0.75rem 1.25rem; }
.hero-tag-arabic { font-family: var(--font-arabic); font-size: 1.5rem; color: var(--gold); line-height: 1; }
.hero-tag-label { font-size: 10px; letter-spacing: 0.3em; margin-top: 0.25rem; opacity: 0.8; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500;
	border-radius: 999px; border: 0; cursor: pointer; transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
.btn-primary { background: var(--gradient-warm); color: var(--cream); padding: 1rem 2rem; box-shadow: var(--shadow-warm); letter-spacing: 0.02em; }
.btn-primary:hover { box-shadow: var(--shadow-gold); }
.btn-link { color: var(--foreground); border-bottom: 2px solid oklch(0.74 0.13 85 / 0.4); padding-bottom: 0.25rem; }
.btn-link:hover { color: var(--deep-red); border-color: var(--deep-red); }
.btn-cream { background: var(--cream); color: var(--deep-red); padding: 0.75rem 1.5rem; }
.btn-cream:hover { background: var(--gold); }

/* ==========================================================================
   Feature strip
   ========================================================================== */
.feature-strip { background: var(--dark-green); color: var(--cream); padding: 3rem 0; }
.feature-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-item { display: flex; align-items: center; gap: 1rem; }
.feature-icon { height: 3rem; width: 3rem; border-radius: 999px; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature-icon svg { height: 1.25rem; width: 1.25rem; color: var(--gold); }
.feature-title { font-family: var(--font-display); font-size: 1.125rem; }
.feature-text { font-size: 0.875rem; color: oklch(0.97 0.025 85 / 0.7); }

/* ==========================================================================
   Category grid (home + product-category taxonomy)
   ========================================================================== */
.section { padding: 6rem 0; }
.section-tight { padding: 3rem 0; }
.category-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (min-width: 768px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .category-grid { grid-template-columns: repeat(5, 1fr); } }
.category-card { position: relative; aspect-ratio: 3/4; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-soft); transition: box-shadow .3s ease; display: block; }
.category-card:hover { box-shadow: var(--shadow-warm); }
.category-card--offset { }
@media (min-width: 1024px) { .category-card--offset { transform: translateY(1.5rem); } }
.category-card img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; transition: transform .7s ease; }
.category-card:hover img { transform: scale(1.1); }
.category-card-overlay { position: absolute; inset: 0; background: var(--gradient-overlay); }
.category-card-body { position: absolute; inset: 0; padding: 1.25rem; display: flex; flex-direction: column; justify-content: flex-end; color: var(--cream); }
.category-card-arabic { font-family: var(--font-arabic); font-size: 1.25rem; color: var(--gold); margin-bottom: 0.25rem; }
.category-card-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.category-card-cta { font-size: 0.75rem; letter-spacing: 0.05em; opacity: 0.8; }

/* ==========================================================================
   Products grid + card (shared with WooCommerce loop)
   ========================================================================== */
.products-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 3rem; }

ul.products, .product-grid { display: grid !important; grid-template-columns: repeat(1, 1fr) !important; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { ul.products, .product-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { ul.products.columns-4, .product-grid--4 { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 1200px) { ul.products.columns-3, .product-grid--3 { grid-template-columns: repeat(3, 1fr) !important; } }

ul.products li.product, .product-card {
	position: relative; background: var(--card); border-radius: 0.75rem; overflow: hidden; border: 1px solid oklch(0.88 0.04 80 / 0.6);
	box-shadow: var(--shadow-soft); transition: box-shadow .5s ease, transform .5s ease;
}
ul.products li.product:hover, .product-card:hover { box-shadow: var(--shadow-warm); transform: translateY(-4px); }

ul.products li.product a.woocommerce-LoopProduct-link { display: block; position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--muted); }
ul.products li.product img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; transition: transform .7s ease; }
ul.products li.product a.woocommerce-LoopProduct-link:hover img { transform: scale(1.1); }

.product-badge {
	position: absolute; top: 1rem; left: 1rem; z-index: 2; background: var(--deep-red); color: var(--cream);
	font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.375rem 0.75rem; border-radius: 999px; font-weight: 500; box-shadow: var(--shadow-warm);
}
.product-arabic {
	position: absolute; top: 1rem; right: 1rem; z-index: 2; font-family: var(--font-arabic); font-size: 1.5rem; color: var(--cream);
	opacity: 0; transition: opacity .5s ease; filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.4));
}
ul.products li.product:hover .product-arabic { opacity: 1; }

ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--foreground); margin: 0.75rem 0 0; padding: 0 1.25rem; }
ul.products li.product:hover .woocommerce-loop-product__title { color: var(--deep-red); }
ul.products li.product > a:not(.woocommerce-LoopProduct-link), ul.products li.product .price { padding: 0 1.25rem; }
ul.products li.product .price { display: block; margin: 0.5rem 0 1.25rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--deep-red); }
ul.products li.product .price del { color: var(--muted-foreground); font-size: 1rem; margin-right: 0.5rem; }
ul.products li.product .star-rating { margin: 0.5rem 1.25rem 0; color: var(--gold); }

a.add_to_cart_button.dar-add-btn {
	position: absolute; bottom: 1.25rem; right: 1.25rem; height: 2.5rem; width: 2.5rem; border-radius: 999px;
	background: var(--gradient-warm) !important; color: var(--cream) !important; display: flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow-warm); font-size: 0 !important; transition: transform .2s ease;
}
a.add_to_cart_button.dar-add-btn::before { content: "+"; font-size: 1.25rem; line-height: 1; }
a.add_to_cart_button.dar-add-btn:hover { transform: scale(1.1); }
ul.products li.product { padding-bottom: 4.5rem; }

/* ==========================================================================
   Promo banner
   ========================================================================== */
.promo-banner { position: relative; overflow: hidden; border-radius: 1.5rem; background: var(--gradient-warm); color: var(--cream); padding: 2.5rem; box-shadow: var(--shadow-warm); }
@media (min-width: 768px) { .promo-banner { padding: 4rem; } }
.promo-pattern { position: absolute; inset: 0; opacity: 0.1; background-image: url("../images/zellige-pattern.jpg"); background-size: 150px; }
.promo-blob { position: absolute; top: -6rem; right: -6rem; height: 18rem; width: 18rem; border-radius: 999px; background: oklch(0.74 0.13 85 / 0.3); filter: blur(64px); }
.promo-grid { position: relative; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .promo-grid { grid-template-columns: 1fr 1fr; } }
.promo-arabic { font-family: var(--font-arabic); font-size: 1.5rem; color: var(--gold); margin-bottom: 0.5rem; }
.promo-title { font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; line-height: 1.2; }
@media (min-width: 768px) { .promo-title { font-size: 3rem; } }
.promo-title em { font-style: italic; color: var(--gold); }
.promo-text { margin-top: 1rem; color: oklch(0.97 0.025 85 / 0.8); max-width: 28rem; }
.promo-image { position: relative; height: 16rem; border-radius: 1rem; overflow: hidden; border: 4px solid oklch(0.74 0.13 85 / 0.4); box-shadow: var(--shadow-gold); }
.promo-image img { height: 100%; width: 100%; object-fit: cover; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-grid { margin-top: 4rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card { position: relative; background: var(--card); border-radius: 1rem; padding: 2rem; box-shadow: var(--shadow-soft); border: 1px solid oklch(0.88 0.04 80 / 0.6); }
.testimonial-quote-icon { position: absolute; top: 1.5rem; right: 1.5rem; height: 2rem; width: 2rem; color: oklch(0.74 0.13 85 / 0.3); }
.testimonial-stars { display: flex; gap: 0.125rem; margin-bottom: 1rem; color: var(--gold); }
.testimonial-body { font-family: var(--font-display); font-size: 1.125rem; font-style: italic; color: var(--foreground); line-height: 1.7; }
.testimonial-footer { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar { height: 2.5rem; width: 2.5rem; border-radius: 999px; background: var(--gradient-gold); display: flex; align-items: center; justify-content: center; color: var(--dark-green); font-weight: 600; }
.testimonial-name { font-weight: 500; }
.testimonial-city { font-size: 0.75rem; color: var(--muted-foreground); }

/* ==========================================================================
   Page headers (Shop / Categories / etc.)
   ========================================================================== */
.page-hero { position: relative; background: var(--dark-green); color: var(--cream); padding: 5rem 0; overflow: hidden; text-align: center; }
.page-hero-pattern { position: absolute; inset: 0; opacity: 0.07; background-image: url("../images/zellige-pattern.jpg"); background-size: 200px; }
.page-hero-arabic { font-family: var(--font-arabic); font-size: 1.5rem; color: var(--gold); margin-bottom: 0.5rem; }
.page-hero-title { font-family: var(--font-display); font-size: 3rem; font-weight: 600; }
@media (min-width: 768px) { .page-hero-title { font-size: 3.75rem; } }
.page-hero-lead { margin-top: 1rem; color: oklch(0.97 0.025 85 / 0.7); max-width: 36rem; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Shop layout + native WooCommerce filter widgets styled as the sidebar
   ========================================================================== */
.page-content-wrapper { padding: 3rem 0; }
.shop-layout { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .shop-layout { grid-template-columns: 260px 1fr; } }
.shop-sidebar .widget {
	background: var(--card); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-soft); border: 1px solid oklch(0.88 0.04 80 / 0.6); margin-bottom: 1.5rem;
}
.shop-sidebar .widget-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
.shop-sidebar ul { list-style: none; margin: 0; padding: 0; }
.shop-sidebar ul li a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; color: var(--foreground); }
.shop-sidebar ul li a:hover { background: var(--muted); }
.shop-sidebar ul li.chosen a { background: var(--deep-red); color: var(--cream); }
.shop-sidebar .price_slider_amount .button { background: var(--gradient-warm); border-radius: 999px; color: var(--cream); }
.woocommerce-ordering select, .shop-sidebar select {
	width: 100%; background: var(--background); border: 1px solid var(--border); border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem;
}
.woocommerce-result-count { font-size: 0.875rem; color: var(--muted-foreground); }

/* ==========================================================================
   Single product
   ========================================================================== */
.woocommerce div.product .woocommerce-breadcrumb { font-size: 0.75rem; color: var(--muted-foreground); letter-spacing: 0.05em; margin-bottom: 2rem; }
.woocommerce div.product .woocommerce-breadcrumb a:hover { color: var(--deep-red); }
.woocommerce div.product div.images { border-radius: 1.5rem; overflow: hidden; box-shadow: var(--shadow-warm); position: relative; }
.woocommerce div.product div.images::before { content: ""; position: absolute; inset: 0.75rem; border: 1px solid oklch(0.74 0.13 85 / 0.3); border-radius: 1rem; z-index: 5; pointer-events: none; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-family: var(--font-display); font-size: 3rem; font-weight: 600; color: var(--deep-red); }
.woocommerce div.product .product_title { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; }
@media (min-width: 768px) { .woocommerce div.product .product_title { font-size: 3rem; } }
.single-product-arabic { font-family: var(--font-arabic); font-size: 1.5rem; color: var(--gold); margin-top: 0.5rem; }
.woocommerce div.product .woocommerce-product-rating .star-rating { color: var(--gold); }
.woocommerce div.product .woocommerce-product-details__short-description { margin-top: 1.5rem; font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.7; }

.product-trust-row { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.product-trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.75rem; border-radius: 0.75rem; background: var(--card); border: 1px solid var(--border); }
.product-trust-item svg { height: 1.25rem; width: 1.25rem; color: var(--deep-red); margin-bottom: 0.375rem; }
.product-trust-item span { font-size: 0.75rem; color: var(--muted-foreground); }

.woocommerce div.product form.cart { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.woocommerce div.product form.cart .quantity { background: var(--card); border: 1px solid var(--border); border-radius: 999px; }
.woocommerce div.product form.cart .quantity input.qty { border: 0; background: transparent; width: 3.5rem; text-align: center; height: 3rem; }
.woocommerce div.product form.cart button.single_add_to_cart_button {
	background: var(--gradient-warm) !important; color: var(--cream) !important; border-radius: 999px !important; height: 3rem; padding: 0 1.5rem !important;
	font-size: 0.875rem !important; font-weight: 500 !important; box-shadow: var(--shadow-warm); border: 0 !important;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover { box-shadow: var(--shadow-gold); }

.related.products { margin-top: 5rem; padding-top: 5rem; border-top: 1px solid var(--border); }
.related.products > h2 { font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; text-align: center; margin-bottom: 3rem; }

/* ==========================================================================
   Cart / Checkout / My Account (native WooCommerce markup, styled)
   ========================================================================== */
.woocommerce-cart .cart-collaterals, .woocommerce-checkout-review-order,
.woocommerce table.shop_table, .woocommerce-account .woocommerce-MyAccount-content {
	background: var(--card); border-radius: 1rem; border: 1px solid var(--border); box-shadow: var(--shadow-soft);
}
.woocommerce table.shop_table { padding: 0; border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th { background: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; padding: 1rem; text-align: left; }
.woocommerce table.shop_table td { padding: 1rem; border-top: 1px solid var(--border); }
.woocommerce #content table.cart img, .woocommerce table.cart img { border-radius: 0.75rem; width: 5rem; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, #place_order {
	background: var(--gradient-warm) !important; color: var(--cream) !important; border-radius: 999px !important; border: 0 !important;
	padding: 0.85rem 1.75rem !important; font-weight: 500 !important; box-shadow: var(--shadow-warm); font-size: 0.875rem !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, #place_order:hover { box-shadow: var(--shadow-gold); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-checkout select {
	border: 1px solid var(--border); border-radius: 0.375rem; background: var(--background); padding: 0.75rem 1rem;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { outline: none; border-color: var(--deep-red); box-shadow: 0 0 0 1px var(--deep-red); }
.select2-container--default .select2-selection--single { border-radius: 0.375rem !important; border-color: var(--border) !important; height: auto !important; padding: 0.4rem 0; }
.woocommerce-info, .woocommerce-message { border-top-color: var(--gold) !important; border-radius: 0.75rem; }
.woocommerce-info::before, .woocommerce-message::before { color: var(--gold) !important; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li a { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--deep-red); color: var(--cream); }
.woocommerce-MyAccount-navigation li a:hover { background: var(--muted); }
.woocommerce-orders-table__cell-order-number a { color: var(--deep-red); font-family: var(--font-display); font-weight: 600; }
.woocommerce ul.order_details li strong, mark.order-status { color: var(--dark-green); }

/* ==========================================================================
   About page
   ========================================================================== */
.about-hero { position: relative; padding: 5rem 0; overflow: hidden; text-align: center; }
@media (min-width: 1024px) { .about-hero { padding: 8rem 0; } }
.about-hero-inner { max-width: 56rem; margin: 0 auto; padding: 0 1rem; position: relative; }
.about-gallery { display: grid; gap: 1rem; padding: 3rem 0; }
@media (min-width: 768px) { .about-gallery { grid-template-columns: repeat(3, 1fr); } }
.about-gallery-tall { border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-warm); aspect-ratio: 3/4; }
@media (min-width: 768px) { .about-gallery-tall { grid-row: span 2; aspect-ratio: auto; } }
.about-gallery-img { border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-warm); aspect-ratio: 4/3; }
.about-gallery img { height: 100%; width: 100%; object-fit: cover; }
.about-recipe { grid-column: span 1; background: var(--dark-green); color: var(--cream); border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) { .about-recipe { grid-column: span 2; padding: 3rem; } }
.about-recipe-arabic { font-family: var(--font-arabic); font-size: 1.25rem; color: var(--gold); margin-bottom: 0.75rem; }
.about-recipe-title { font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; margin-bottom: 1rem; }
.about-recipe-text { color: oklch(0.97 0.025 85 / 0.8); line-height: 1.7; }

.values-grid { margin-top: 3rem; display: grid; gap: 2rem; text-align: center; }
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-num { font-family: var(--font-display); font-size: 3.75rem; color: oklch(0.74 0.13 85 / 0.4); font-weight: 600; margin-bottom: 0.5rem; }
.value-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--deep-red); }
.value-text { margin-top: 0.75rem; color: var(--muted-foreground); line-height: 1.7; }

/* ==========================================================================
   Categories (editorial) page
   ========================================================================== */
.category-stories { margin-top: 4rem; display: flex; flex-direction: column; gap: 3rem; }
.category-story { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .category-story { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.category-story--reverse .category-story-media { order: 2; }
.category-story-media { position: relative; }
.category-story-media::before { content: ""; position: absolute; inset: -0.5rem; border-radius: 1.5rem; border: 1px solid oklch(0.74 0.13 85 / 0.3); }
.category-story-image { position: relative; aspect-ratio: 5/4; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-warm); }
.category-story-image img { height: 100%; width: 100%; object-fit: cover; }
.category-story-arabic-badge { position: absolute; top: 1.5rem; left: 1.5rem; font-family: var(--font-arabic); font-size: 2.25rem; color: var(--cream); filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.4)); }
.category-story-num { font-size: 0.75rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--deep-red); margin-bottom: 0.75rem; }
.category-story-title { font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; }
@media (min-width: 768px) { .category-story-title { font-size: 3rem; } }
.category-story-text { margin-top: 1rem; font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.7; }
.category-story-link { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--deep-red); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-cards { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
.contact-card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 2rem; text-align: center; box-shadow: var(--shadow-soft); transition: box-shadow .3s ease; }
.contact-card:hover { box-shadow: var(--shadow-warm); }
.contact-card-icon { margin: 0 auto 1rem; height: 3.5rem; width: 3.5rem; border-radius: 999px; background: var(--gradient-warm); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-warm); }
.contact-card-icon svg { height: 1.5rem; width: 1.5rem; color: var(--cream); }
.contact-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.contact-card p { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; }

.contact-grid { margin-top: 3rem; display: grid; gap: 2rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-form-panel { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 2rem; box-shadow: var(--shadow-soft); }
@media (min-width: 1024px) { .contact-form-panel { padding: 2.5rem; } }
.contact-form-panel h2 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; margin-bottom: 1.5rem; }

.wpcf7-form p { margin: 0 0 1rem; }
.wpcf7-form label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form textarea {
	width: 100%; background: var(--background); border: 1px solid var(--border); border-radius: 0.375rem; padding: 0.75rem 1rem; font-size: 0.875rem;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--deep-red); box-shadow: 0 0 0 1px var(--deep-red); }
.wpcf7-form .wpcf7-submit {
	display: inline-flex; align-items: center; gap: 0.5rem; background: var(--gradient-warm); color: var(--cream); border: 0; border-radius: 999px;
	padding: 0.85rem 1.5rem; font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow-warm); cursor: pointer;
}
.wpcf7-form .wpcf7-submit:hover { box-shadow: var(--shadow-gold); }

.map-panel { position: relative; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-warm); border: 1px solid var(--border); min-height: 400px; }
.map-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-badge { position: absolute; bottom: 1rem; left: 1rem; background: var(--cream); border-radius: 0.75rem; box-shadow: var(--shadow-warm); padding: 1rem; border: 1px solid oklch(0.74 0.13 85 / 0.3); max-width: 260px; }
.map-badge-row { display: flex; align-items: center; gap: 0.5rem; color: var(--deep-red); margin-bottom: 0.25rem; }
.map-badge-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.map-badge-hours { font-family: var(--font-display); font-size: 1.125rem; margin: 0; }
.map-badge-sub { font-size: 0.75rem; color: var(--muted-foreground); margin: 0.25rem 0 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; margin-top: 6rem; background: var(--dark-green); color: var(--cream); overflow: hidden; }
.site-footer-inner { position: relative; padding: 4rem 0; }
.footer-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.footer-logo-badge { height: 2.75rem; width: 2.75rem; border-radius: 999px; border: 1px solid oklch(0.74 0.13 85 / 0.5); display: flex; align-items: center; justify-content: center; }
.footer-logo-name { font-family: var(--font-display); font-size: 1.5rem; }
.footer-logo-sub { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: oklch(0.97 0.025 85 / 0.6); }
.footer-tagline { font-size: 0.875rem; color: oklch(0.97 0.025 85 / 0.7); line-height: 1.7; }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.footer-social-btn { height: 2.25rem; width: 2.25rem; border-radius: 999px; border: 1px solid oklch(0.97 0.025 85 / 0.2); display: flex; align-items: center; justify-content: center; transition: all .2s ease; }
.footer-social-btn svg { height: 1rem; width: 1rem; }
.footer-social-btn:hover { background: var(--gold); color: var(--dark-green); border-color: var(--gold); }
.footer-col-title { color: var(--gold); font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem; font-family: var(--font-sans); font-weight: 500; }
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.875rem; color: oklch(0.97 0.025 85 / 0.8); }
.footer-list a:hover { color: var(--gold); }
.footer-list--contact li { display: flex; align-items: flex-start; gap: 0.75rem; }
.footer-list--contact svg { height: 1rem; width: 1rem; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.footer-bottom { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid oklch(0.97 0.025 85 / 0.1); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: oklch(0.97 0.025 85 / 0.5); }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
.footer-bismillah { font-family: var(--font-arabic); font-size: 1rem; color: oklch(0.74 0.13 85 / 0.8); }

/* ==========================================================================
   404
   ========================================================================== */
.error-404-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 1rem; text-align: center; }
.error-404-arabic { font-family: var(--font-arabic); font-size: 4.5rem; color: var(--gold); margin-bottom: 1rem; }
.error-404-code { font-size: 4.5rem; font-family: var(--font-display); font-weight: 600; color: var(--deep-red); }
.error-404-title { margin-top: 1rem; font-size: 1.25rem; font-family: var(--font-display); }
.error-404-text { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }