/* ==========================================================================
   Dairy Gold Farm: farm-to-jar theme (v3, light and modern)
   White and soft cream; deep farm green for one feature band, the CTA card and the footer;
   label gold for the main action. Tight sans headings, Playfair italic for accents.
   ========================================================================== */

/* Fonts, served from the theme (assets/fonts, SIL Open Font License) instead of Google Fonts.
   Variable files: one file covers every weight in its range. Latin only for Inter and Playfair;
   the Urdu font carries the Arabic-script set. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url("../fonts/playfair-display-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/playfair-display-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Noto Nastaliq Urdu";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("../fonts/noto-nastaliq-urdu-arabic.woff2") format("woff2");
	unicode-range: U+0020, U+00A0, U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

:root {
	--green-950: #0b1d0e;
	--green-900: #102512;
	--green-800: #183a1e;
	--green-700: #24502b;
	--green-100: #e7efe4;
	--gold: #c9a24a;
	--gold-600: #b08a33;
	--gold-200: #ecd9a6;
	--gold-ink: #80621f; /* gold for text on light backgrounds (5.3:1 on cream) */
	--ghee: #f4c430;
	--ghee-50: #fff8e1;
	--red: #b3261e;
	--cream: #f8f5ec;
	--sand: #f1ece0; /* tinted panels on cream */
	--paper: #ffffff;
	--ink: #1d1f1a;
	--muted: #5c6157;
	--line: #e6e0d2;
	--wa: #15803d; /* darker than WhatsApp's own green so white text passes 4.5:1 */
	--radius: 16px;
	--radius-lg: 24px;
	--radius-xl: 32px; /* hero, feature cards */
	--ease: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* long reveals */
	--ease-soft: cubic-bezier(0.33, 1, 0.68, 1); /* slow moves on photographs */
	--ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); /* the shutter */
	--serif: "Playfair Display", Georgia, "Times New Roman", serif; /* accents: quotes, numbers, italics */
	--display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* headings */
	--sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--urdu: "Noto Nastaliq Urdu", serif;
	--header-h: 68px;
	/* Type scale: seven text sizes; headings use their own fluid sizes. */
	--fs-xs: .8125rem; /* 13px */
	--fs-sm: .875rem;  /* 14px */
	--fs-md: .9375rem; /* 15px */
	--fs-base: 1rem;   /* 16px */
	--fs-lg: 1.125rem; /* 18px */
	--fs-xl: 1.25rem;  /* 20px */
	--fs-2xl: 1.5rem;  /* 24px */
	/* Vertical rhythm: sections, and the full-width bands between them. */
	--section-y: 64px;
	--band-y: 56px;
	--bottom-nav-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 28px); }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 16px/1.65 var(--sans);
	-webkit-font-smoothing: antialiased;
	padding-bottom: var(--bottom-nav-h);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: var(--green-700); text-underline-offset: 3px; }
a:hover { color: var(--gold-ink); }
h1, h2, h3, h4 { font-family: var(--display); color: var(--green-900); line-height: 1.1; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.75rem); }
h3 { font-size: var(--fs-xl); letter-spacing: -.02em; line-height: 1.25; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.01em; color: var(--gold-ink); }
p { margin: 0 0 1em; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ghee); outline-offset: 2px; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 999; background: var(--paper); padding: 10px 16px; border-radius: 8px; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.container--narrow { max-width: 860px; }
@media (min-width: 768px) { .container { padding: 0 28px; } }

.urdu { font-family: var(--urdu); line-height: 2.1; }
.lead { font-size: var(--fs-lg); color: var(--muted); }

.dg-icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: .75em 1.4em;
	border-radius: 999px; border: 2px solid transparent;
	font-weight: 600; font-size: var(--fs-base); line-height: 1.2; text-decoration: none; text-align: center;
	cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .16s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--sm { min-height: 40px; padding: .5em 1.1em; font-size: var(--fs-md); }
.btn--lg { min-height: 54px; padding: .9em 1.7em; font-size: var(--fs-lg); }
.btn--block { display: flex; width: 100%; }
.btn--gold { background: var(--gold); color: var(--green-950); }
.btn--gold:hover { background: #d6b25c; color: var(--green-950); }
.btn--green { background: var(--green-800); color: #fff; }
.btn--green:hover { background: var(--green-900); color: #fff; }
.btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff; background: rgba(255, 255, 255, .06); }
.btn--ghost:hover { background: #fff; color: var(--green-900); }
.btn--outline-dark { border-color: var(--green-800); color: var(--green-800); background: transparent; }
.btn--outline-dark:hover { background: var(--green-800); color: #fff; }
.btn--whatsapp { background: var(--wa); color: #fff; }
.btn--whatsapp:hover { background: #116a32; color: #fff; }

.icon-btn {
	display: inline-flex; align-items: center; justify-content: center; position: relative;
	width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; text-decoration: none;
}
.icon-btn:hover { background: var(--green-100); color: var(--green-900); }

/* ---------- Section heads ---------- */
.page-hero__meta { display: inline-flex; align-items: center; gap: .45em; margin: 0 0 .6em; color: var(--gold-200); font-size: var(--fs-md); }
.page-hero__meta .dg-icon { width: 1.1em; height: 1.1em; }
.page-hero__sub + .page-hero__meta { margin: 1em 0 0; }
.empty-state .page-hero__meta { color: var(--gold-ink); font-weight: 600; }

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
/* Left-aligned by default; the products, ordering, comparison and FAQ heads stay centred over their centred content. */
.section-head { max-width: 720px; margin: 0 0 40px; text-align: left; }
.section-head .section-urdu { text-align: inherit; }
.products-section .section-head, .how-order .section-head, .compare .section-head, .faq-section .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .section-intro { color: var(--muted); font-size: var(--fs-lg); margin: 0; }
.section-more { text-align: center; margin: 36px 0 0; }

/* ---------- Top bar & header ---------- */
.topbar { background: var(--green-900); color: var(--gold-200); font-size: var(--fs-sm); }
.topbar__inner { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 32px; }
.topbar__text { margin: 0; display: grid; text-align: center; }
/* One message at a time: the outgoing one fades out first, and the incoming one waits for it
   (the delay on .is-active), so the two never show together. */
.topbar__msg { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .5em; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; }
.topbar__msg.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease) .2s, transform .28s var(--ease) .2s, visibility 0s linear .2s; }
.topbar__phone { display: none; color: var(--gold-200); text-decoration: none; align-items: center; gap: .4em; white-space: nowrap; }
.topbar .dg-icon { width: 1.1em; height: 1.1em; }
@media (min-width: 900px) {
	.topbar__inner { justify-content: space-between; }
	.topbar__phone { display: inline-flex; }
}

/* Compact header: one slim full-width white bar with a hairline under it. Short on purpose,
   so the top bar, header and hero all fit in the first screen of a small laptop. */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, .96); color: var(--green-900);
	-webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px);
	box-shadow: 0 1px 0 var(--line);
	transition: box-shadow .25s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(16, 37, 18, .35); }
.site-header__inner { display: flex; align-items: center; gap: 8px; min-height: var(--header-h); }
/* Top bar and header run the full width of the screen (no centred column): logo at the left
   edge, actions at the right edge, with only a small gutter. */
.topbar__inner.container, .site-header__inner.container, .search-panel > .container { max-width: none; padding: 0 12px; }
@media (min-width: 768px) { .topbar__inner.container, .site-header__inner.container, .search-panel > .container { padding: 0 24px; } }
@media (min-width: 1280px) { .topbar__inner.container, .site-header__inner.container, .search-panel > .container { padding: 0 40px; } }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-header .brand__logo, .drawer .brand__logo { height: 50px; width: auto; max-width: none; border-radius: 12px; }
.custom-logo-link img { max-height: 50px; width: auto; }
.site-header .brand { margin-right: auto; }
.header-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.primary-nav { display: none; }
.cart-link .cart-count, .bottom-nav .cart-count {
	position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 9px; background: var(--ghee); color: var(--green-950);
	font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}
.cart-count[data-count="0"] { display: none; }
.hide-mobile { display: none !important; }

@media (min-width: 900px) { :root { --section-y: 96px; --band-y: 80px; } }
@media (min-width: 1024px) {
	:root { --header-h: 84px; }
	.menu-toggle { display: none; }
	.site-header .brand { margin-right: 0; }
	.site-header .brand__logo { height: 62px; }
	/* The menu sits right after the logo and the actions at the far end, two tight groups
	   rather than three items spread across the full width. */
	.primary-nav { display: block; margin: 0 auto 0 40px; align-self: stretch; }
	.primary-nav__list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; height: 100%; }
	/* Plain links; the current page gets a gold bar along the header's bottom edge. */
	.primary-nav__list a { white-space: nowrap; position: relative;
		display: flex; align-items: center; height: 100%; padding: 0 16px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: var(--fs-base);
	}
	.primary-nav__list a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); transform: scaleX(0); transition: transform .25s var(--ease); }
	.primary-nav__list a:hover { color: var(--green-900); }
	.primary-nav__list .current-menu-item > a { color: var(--green-900); font-weight: 600; }
	.primary-nav__list .current-menu-item > a::after { transform: none; }
	.header-actions { margin-left: 0; gap: 4px; }
	.header-actions .icon-btn { width: 46px; height: 46px; }
	.header-actions .icon-btn .dg-icon { width: 23px; height: 23px; }
	.hide-mobile { display: inline-flex !important; }
	.header-actions .btn { margin-left: 12px; min-height: 50px; padding: 0 26px; font-size: var(--fs-base); }
}

.primary-nav__list a { transition: color .2s var(--ease); }

.search-panel { background: var(--cream); padding: 12px 0; box-shadow: 0 1px 0 var(--line); }
.search-form { display: flex; gap: 8px; }
.search-form__field { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.search-form__submit { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--gold); color: var(--green-950); font-weight: 600; cursor: pointer; }

/* ---------- Drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.drawer__panel {
	position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 360px);
	background: var(--paper); color: var(--green-900); display: flex; flex-direction: column; overflow-y: auto;
	animation: drawer-in .25s var(--ease);
}
@keyframes drawer-in { from { transform: translateX(-100%); } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.drawer__list { list-style: none; margin: 0; padding: 8px 12px; display: grid; gap: 2px; }
.drawer__list a { display: block; padding: 14px 16px; color: var(--green-900); text-decoration: none; font: 600 var(--fs-xl)/1.3 var(--display); letter-spacing: -.02em; border-radius: var(--radius); }
.drawer__list a:hover, .drawer__list .current-menu-item > a { background: var(--cream); }
.drawer__foot { margin-top: auto; padding: 16px; display: grid; gap: 10px; }
body.drawer-open { overflow: hidden; }

/* ---------- Hero: an inset, rounded photo card ---------- */
.hero { padding: 0; }
/* The photo runs edge to edge; only the text and jar inside keep a readable width. */
.hero > .container { max-width: none; padding: 0; }
.hero__card { position: relative; overflow: hidden; background: var(--green-950); color: #fff; isolation: isolate; }
.hero__inner { max-width: 1280px; margin: 0 auto; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(11, 29, 14, .94) 0%, rgba(11, 29, 14, .8) 48%, rgba(11, 29, 14, .35) 100%),
		linear-gradient(0deg, rgba(11, 29, 14, .75), transparent 45%);
}
.hero__inner { display: grid; gap: 36px; padding: 44px 20px 84px; align-items: center; }
.hero__title { color: #fff; font-size: clamp(2.4rem, 6.6vw, 4.6rem); line-height: 1; letter-spacing: -.045em; margin-bottom: .3em; }
.hero__urdu { color: var(--gold-200); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 .4em; text-align: left; }
.hero__text { color: rgba(255, 255, 255, .84); font-size: var(--fs-lg); max-width: 520px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 20px; }
.hero__ticks { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); color: #fff; }
.hero__ticks li { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__ticks .dg-icon { color: var(--ghee); width: 1.1em; height: 1.1em; }
.hero__product { position: relative; justify-self: center; width: min(74vw, 400px); }
.hero__jar { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.hero__jar img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__seal {
	position: absolute; left: -14px; bottom: 28px; width: 96px; height: 96px; border-radius: 50%;
	display: grid; place-content: center; text-align: center; gap: 2px;
	background: var(--ghee); color: var(--green-950);
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
}
.hero__seal b { font: 600 var(--fs-xs)/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.hero__seal span { font: italic 700 var(--fs-2xl)/1 var(--serif); }
@media (min-width: 900px) {
	.hero__inner { grid-template-columns: 1.3fr 1fr; padding: 64px 64px 104px; min-height: min(620px, calc(100svh - var(--header-h) - 32px)); }
	.hero__product { justify-self: end; }
}

/* ---------- Trust bar: a white card lifted over the hero's bottom edge ---------- */
.trust-bar { position: relative; z-index: 2; margin-top: -44px; }
.trust-bar > .container { padding: 0 20px; }
.trust-bar__inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 14px; border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 24px 50px -28px rgba(16, 37, 18, .45); }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; }
.trust-item:last-child { grid-column: 1 / -1; justify-content: center; }
.trust-item__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--green-100); color: var(--green-800); flex: none; }
.trust-item b { display: block; font-size: var(--fs-md); color: var(--green-900); line-height: 1.25; letter-spacing: -.01em; }
.trust-item small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; }
@media (min-width: 768px) { .trust-bar > .container { padding: 0 44px; } }
@media (min-width: 900px) {
	.trust-bar__inner { grid-template-columns: repeat(5, 1fr); padding: 22px 18px; }
	.trust-item { padding: 6px 12px; }
	.trust-item + .trust-item { box-shadow: -1px 0 0 var(--line); }
	.trust-item:last-child { grid-column: auto; justify-content: flex-start; }
}

/* ---------- Products (WooCommerce loop) ---------- */
/* The badges row closes this section, so it needs less room than a full .section
   (the next section brings its own top padding). */
.products-section { background: var(--paper); padding: var(--section-y) 0 var(--band-y); }
.products-section .section-head { margin-bottom: 24px; max-width: 820px; }
ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
ul.products::before, ul.products::after { display: none !important; }
/* Prefixed with .woocommerce: WooCommerce's own "li.product { padding: 0 }" is more specific otherwise. */
.woocommerce ul.products li.product, ul.products li.product {
	position: relative; display: flex; flex-direction: column; background: var(--cream);
	border-radius: var(--radius-lg); overflow: hidden;
	transition: transform .2s var(--ease); width: auto !important; margin: 0 !important; float: none !important; padding: 0 0 14px;
}
@media (min-width: 768px) { .woocommerce ul.products li.product { padding-bottom: 18px; } }
.woocommerce ul.products li.product a img { width: calc(100% - 16px); height: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: center top; margin: 8px 8px 14px; border-radius: calc(var(--radius-lg) - 8px); background: var(--ghee-50); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: var(--fs-lg); color: var(--green-900); padding: 0 14px; margin: 0 0 4px; }
ul.products li.product a.woocommerce-LoopProduct-link { text-decoration: none; color: inherit; flex: 1; }
.woocommerce ul.products li.product .price { display: block; padding: 0 14px; color: var(--green-800); font-weight: 700; font-size: var(--fs-lg); }
ul.products li.product .price del { color: var(--muted); font-weight: 400; font-size: .9em; }
.woocommerce ul.products li.product .card-sizes { padding: 0 14px; margin: 0 0 4px; font-size: var(--fs-xs); color: var(--muted); }
/* Two lines at most, so cards in a row stay level. */
.woocommerce ul.products li.product .card-desc { padding: 0 14px; margin: 0 0 6px; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.woocommerce ul.products li.product .card-wa { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; margin: 4px 14px 0; color: var(--wa); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.woocommerce ul.products li.product .card-wa:hover { text-decoration: underline; }
@media (max-width: 480px) { .woocommerce ul.products li.product .card-wa { margin: 4px 6px 0; font-size: var(--fs-xs); white-space: nowrap; gap: 4px; } }
ul.products li.product .star-rating { margin: 0 14px 6px; }
.woocommerce ul.products li.product .button { margin: 12px 14px 0; line-height: 1.2; display: flex; justify-content: center; align-items: center; min-height: 46px; border-radius: 999px; background: var(--green-800); color: #fff; font-weight: 600; text-decoration: none; font-size: var(--fs-md); padding: 0 12px; transition: background-color .2s var(--ease); }
.woocommerce ul.products li.product .button:hover { background: var(--green-900); color: #fff; }
ul.products li.product .added_to_cart { display: block; text-align: center; font-size: var(--fs-sm); margin-top: 6px; }
ul.products li.product .onsale { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--red); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: 999px; min-height: 0; min-width: 0; line-height: 1.4; margin: 0; }
@media (min-width: 768px) {
	ul.products { gap: 24px; }
	ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
	ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--fs-xl); padding: 0 20px; }
	.woocommerce ul.products li.product .price, .woocommerce ul.products li.product .card-sizes, .woocommerce ul.products li.product .card-desc { padding: 0 20px; }
	.woocommerce ul.products li.product .card-wa { margin: 6px 20px 0; }
	.woocommerce ul.products li.product .button { margin: 14px 20px 0; }
	ul.products li.product .star-rating { margin: 0 20px 6px; }
}
.products-section ul.products.columns-2 { max-width: 640px; margin: 0 auto; }
.woocommerce-shop ul.products, .tax-product_cat ul.products, .related.products ul.products { max-width: 980px; margin-left: auto; margin-right: auto; }
.related.products ul.products { margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(200px, 260px)); justify-content: center; }

/* ---------- Farm intro ---------- */
.farm-intro { background: var(--cream); }
.farm-intro__inner { display: grid; gap: 40px; align-items: center; }
.farm-intro__media { position: relative; padding: 0 0 40px 0; }
.farm-intro__main { display: block; overflow: hidden; border-radius: var(--radius-lg); }
.farm-intro__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.farm-intro__small { position: absolute; right: 0; bottom: 0; width: 42%; border: 6px solid var(--cream); border-radius: var(--radius-lg); overflow: hidden; }
.farm-intro__small img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.farm-intro__badge {
	position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255, 255, 255, .9); color: var(--green-900); font-size: var(--fs-xs); font-weight: 600; padding: 7px 12px; border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.farm-intro__herd { font: 700 var(--fs-xl) var(--serif); color: var(--gold-ink); }
.check-list { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 16px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; }
.check-list li > .dg-icon { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--paper); color: var(--green-800); }
.check-list b { display: block; color: var(--green-900); }
.check-list span { color: var(--muted); }
.check-list--compact { gap: 10px; }
.check-list--compact li > .dg-icon { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--green-800); color: #fff; }
.check-list--compact span { color: var(--ink); }
@media (min-width: 900px) {
	.farm-intro__inner { grid-template-columns: 1.05fr 1fr; gap: 72px; }
	.farm-intro__media { padding: 0 60px 60px 0; }
}

/* ---------- Process steps ---------- */
.process { background: var(--green-900); color: rgba(255, 255, 255, .85); position: relative; }
.process::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 10% 0%, rgba(201, 162, 74, .16), transparent 50%); pointer-events: none; }
.process .section-head h2 { color: #fff; }
.process .section-intro { color: rgba(255, 255, 255, .72); }
.process .section-urdu { color: var(--gold-200); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: s; position: relative; }
.step { background: rgba(255, 255, 255, .06); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.step__media { padding: 8px 8px 0; }
.step__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius-lg) - 8px); }
.step__body { position: relative; padding: 34px 22px 24px; }
.step__num {
	position: absolute; top: -24px; left: 22px; width: 48px; height: 48px; border-radius: 50%;
	display: grid; place-items: center; background: var(--ghee); color: var(--green-950);
	font: italic 700 var(--fs-xl) var(--serif); border: 4px solid #1c301e;
}
.step h3 { color: #fff; margin-bottom: .4em; }
.step p { margin: 0; font-size: var(--fs-md); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Promise band ---------- */
.promise { background: var(--paper); padding: var(--band-y) 0; }
.promise__quote { margin: 0; text-align: center; }
.promise__quote > .dg-icon { width: 34px; height: 34px; color: var(--red); margin: 0 auto 12px; }
.promise__quote p { font: italic 600 clamp(1.4rem, 3vw, 2.1rem)/1.4 var(--serif); color: var(--green-900); letter-spacing: -.01em; }
.promise__quote cite { font-style: normal; font-weight: 600; color: var(--gold-ink); letter-spacing: .05em; }

/* ---------- Comparison ---------- */
.compare { background: var(--cream); }
.compare-table { max-width: 900px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; font-size: var(--fs-md); background: var(--paper); }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; }
.compare-row > span { padding: 14px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-start; }
.compare-row > span[role="rowheader"] { grid-column: 1 / -1; background: var(--sand); font-weight: 600; color: var(--green-900); padding: 10px 14px; }
.compare-row--head > span { border-top: 0; font: 700 var(--fs-lg) var(--display); letter-spacing: -.02em; }
.compare-row--head > span:first-child { display: none; }
.compare-us { background: var(--green-100); color: var(--green-900); }
.compare-row--head .compare-us { background: var(--green-800); color: #fff; }
.compare-row--head > span:last-child { background: #f1eee7; color: var(--muted); }
.compare-us .dg-icon { color: var(--green-700); margin-top: 2px; }
.compare-them { color: var(--muted); }
.compare-them .dg-icon { color: var(--red); margin-top: 2px; }
@media (min-width: 700px) {
	.compare-table { font-size: var(--fs-base); }
	.compare-row { grid-template-columns: 1.1fr 1.2fr 1.2fr; }
	.compare-row > span[role="rowheader"] { grid-column: auto; padding: 16px 20px; }
	.compare-row--head > span:first-child { display: block; background: var(--sand); }
	.compare-row > span { padding: 16px 20px; }
}

/* ---------- Gallery ---------- */
.gallery-section { background: var(--paper); }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; grid-auto-flow: dense; }
.gallery__item { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--green-900); aspect-ratio: 1; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.gallery__cap {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; font-size: var(--fs-xs); line-height: 1.35; color: #fff;
	background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent);
}
.gallery__item--herd, .gallery__item--machine { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
	.gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; }
	.gallery__item { aspect-ratio: auto; }
	.gallery__item--herd { grid-column: span 2; grid-row: span 2; }
	.gallery__item--parlour, .gallery__item--shed2 { grid-row: span 2; }
	.gallery__item--machine { grid-column: span 2; }
	.gallery__item--machine, .gallery__item--herd { aspect-ratio: auto; }
	.gallery__cap { font-size: var(--fs-sm); padding: 40px 16px 14px; }
}

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(5, 12, 6, .94); display: grid; place-items: center; padding: 56px 12px 24px; }
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 1100px; text-align: center; }
.lightbox__figure img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: 10px; }
.lightbox__figure figcaption { color: #fff; margin-top: 12px; font-size: var(--fs-md); }
.lightbox__close { position: absolute; top: 10px; right: 10px; color: #fff; background: rgba(255, 255, 255, .1); }

/* ---------- Reviews ---------- */
.reviews { background: var(--paper); }
.review-grid { display: grid; gap: 18px; }
/* Shown while there are no approved reviews yet. */
.review-invite { background: var(--paper); padding: 0 16px var(--band-y); }
.review-invite__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; text-align: center; padding: 28px 24px; border-radius: var(--radius-lg); background: var(--ghee-50); }
.review-invite p { margin: 0; max-width: 560px; }
.review-card { margin: 0; background: var(--cream); border-radius: var(--radius-lg); padding: 28px; }
.review-card blockquote { margin: 10px 0 16px; font-size: var(--fs-base); }
.review-card figcaption b { display: block; color: var(--green-900); }
.review-card small { color: var(--muted); }
.stars { display: flex; gap: 2px; color: var(--gold); }
.stars .dg-icon { width: 18px; height: 18px; }
.verified { display: inline-flex; align-items: center; gap: 4px; color: var(--green-700); font-size: var(--fs-xs); font-weight: 600; margin-right: 8px; }
.verified .dg-icon { width: 14px; height: 14px; }
@media (min-width: 768px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Recipes / posts ---------- */
.post-grid { display: grid; gap: 22px; }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { background: var(--cream); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.post-card__media { padding: 8px 8px 0; }
.post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--radius-lg) - 8px); }
.post-card__body { padding: 20px 22px 24px; }
.post-card__meta { font-size: var(--fs-sm); color: var(--gold-ink); font-weight: 600; margin-bottom: .4em; }
.post-card__title { font-size: var(--fs-xl); letter-spacing: -.02em; }
.post-card__title a { color: var(--green-900); text-decoration: none; }
.post-card__body p:last-child { color: var(--muted); margin: 0; }

/* ---------- FAQ ---------- */
.faq-section { background: var(--paper); }
.faq-list { display: grid; gap: 12px; }
.faq-item { background: var(--cream); border-radius: var(--radius); overflow: hidden; transition: background-color .2s var(--ease); }
.faq-item[open] { background: var(--sand); }
.faq-item summary {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 18px 20px; font-weight: 600; color: var(--green-900); min-height: 56px;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* A heading inside a panel label (product page), set exactly like the label text. */
.faq-item__title { font: inherit; color: inherit; margin: 0; }
.faq-item summary .dg-icon { transition: transform .2s var(--ease); color: var(--green-800); width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--paper); }
.faq-item[open] summary .dg-icon { transform: rotate(180deg); }
.faq-item__body { padding: 0 20px 6px; color: var(--muted); }
/* FAQ page: questions grouped under topic headings. */
.faq-topic { font-size: var(--fs-2xl); margin: 28px 0 4px; }
.faq-list--grouped > .faq-topic:first-child { margin-top: 0; }

/* ---------- CTA band: an inset rounded card ---------- */
.cta-band { padding: 0 8px var(--band-y); background: var(--paper); }
.cta-band > .container { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--green-900); color: rgba(255, 255, 255, .85); padding: 44px 24px; }
.cta-band > .container::after { content: ""; position: absolute; right: -140px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 196, 48, .22), transparent 65%); pointer-events: none; }
.cta-band__inner { position: relative; z-index: 1; display: grid; gap: 28px; align-items: center; }
.cta-band h2 { color: #fff; }
.cta-band .urdu { color: var(--gold-200); font-size: var(--fs-xl); margin: 0 0 .3em; text-align: left; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-band__call { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-200); font-weight: 600; text-decoration: none; padding: 8px 4px; }
@media (min-width: 768px) { .cta-band { padding-left: 16px; padding-right: 16px; } .cta-band > .container { padding: 56px; } }
@media (min-width: 900px) {
	.cta-band__inner { grid-template-columns: 1.2fr 1fr; }
	.cta-band__actions { justify-content: flex-end; }
}

/* ---------- Page heroes ---------- */
.page-hero { background: var(--cream); color: var(--green-900); padding: 48px 0 44px; position: relative; overflow: hidden; }
.page-hero h1 { color: var(--green-900); margin: 0; }
.page-hero .page-hero__meta { color: var(--gold-ink); font-weight: 600; }
.page-hero--slim { padding: 28px 0; }
.page-hero--slim h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.page-hero--photo { background: var(--green-950); color: #fff; padding: 0; }
.page-hero--photo > .container { position: relative; z-index: 1; padding: 80px 24px 72px; }
.page-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 29, 14, .92), rgba(11, 29, 14, .78) 55%, rgba(11, 29, 14, .55)); }
/* On a phone the text runs the full width, so the light end of the overlay sits under it too. */
@media (max-width: 899px) { .page-hero__bg::after { background: linear-gradient(90deg, rgba(11, 29, 14, .92), rgba(11, 29, 14, .78)); } }
.page-hero--photo h1 { color: #fff; }
.page-hero--photo .page-hero__meta { color: var(--gold-200); font-weight: 400; }
.page-hero__sub { font-size: var(--fs-xl); color: var(--gold-ink); margin: .4em 0 0; font-family: var(--serif); font-style: italic; }
.page-hero--photo .page-hero__sub { color: var(--gold-200); }

@media (min-width: 900px) { .page-hero--photo > .container { padding: 140px 64px 120px; } }

/* ---------- Farm page rows ---------- */
.farm-story { font-size: var(--fs-lg); }
.farm-story .lead { font: italic 600 clamp(1.35rem, 2.8vw, 1.75rem)/1.45 var(--serif); color: var(--green-900); }
.farm-rows { background: var(--cream); }
.farm-row { display: grid; gap: 28px; align-items: center; }
.farm-row + .farm-row { margin-top: 64px; }
.farm-row__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.farm-row__media--tall img { aspect-ratio: 4 / 5; }
.farm-row__thumb { display: block; max-width: 360px; margin-top: 8px; }
.farm-row__thumb img { border-radius: var(--radius); }
@media (min-width: 900px) {
	.farm-row { grid-template-columns: 1fr 1fr; gap: 64px; }
	.farm-row + .farm-row { margin-top: 96px; }
	.farm-row--reverse .farm-row__media { order: 2; }
}

/* ---------- Entry content ---------- */
.entry-content { max-width: 760px; margin: 0 auto; }
.entry-content--wide { max-width: none; }
.entry-content > * + h2 { margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .4em; }
.single-post__media img { border-radius: var(--radius-lg); margin-bottom: 28px; width: 100%; }
.inline-cta { margin-top: 48px; background: var(--green-900); color: rgba(255, 255, 255, .85); padding: 32px; border-radius: var(--radius-xl); }
.inline-cta h2 { color: #fff; font-size: var(--fs-2xl); }
.empty-state { text-align: center; max-width: 560px; margin: 0 auto; }
.empty-state .search-form { margin: 20px 0; }
.nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; border-radius: 999px; text-decoration: none; background: var(--cream); }
.page-numbers.current { background: var(--green-800); color: #fff; }

/* ---------- Contact cards (shortcode) ---------- */
.contact-cards { display: grid; gap: 14px; margin: 28px 0; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
.contact-card { display: grid; gap: 4px; padding: 24px; border-radius: var(--radius-lg); background: var(--cream); text-decoration: none; color: var(--ink); }
.contact-card .dg-icon { width: 30px; height: 30px; color: var(--gold-600); margin-bottom: 6px; }
.contact-card b { color: var(--green-900); font-size: var(--fs-lg); }
.contact-card span { color: var(--muted); }
.contact-card--wa { background: var(--wa); border-color: var(--wa); }
.contact-card--wa, .contact-card--wa b, .contact-card--wa span, .contact-card--wa .dg-icon { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-950); color: rgba(255, 255, 255, .72); font-size: var(--fs-md); }
.footer-badges { background: rgba(0, 0, 0, .18); }
.footer-badges__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding-top: 22px; padding-bottom: 22px; color: var(--gold-200); font-weight: 600; font-size: var(--fs-md); }
.footer-badges__inner span { display: inline-flex; align-items: center; gap: 8px; }
.footer-grid { display: grid; gap: 34px; padding-top: 48px; padding-bottom: 40px; }
.footer-col .brand__logo { height: 90px; width: auto; max-width: none; margin-bottom: 14px; border-radius: 8px; }
.footer-col .urdu { color: var(--gold-200); font-size: var(--fs-lg); text-align: left; }
.footer-title { font: 700 var(--fs-base) var(--display); letter-spacing: -.01em; color: #fff; margin-bottom: 16px; }
.footer-links, .footer-contact, .pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: var(--gold-200); }
.footer-contact li, .footer-contact a { display: flex; align-items: center; gap: 10px; }
.footer-contact .dg-icon { color: var(--gold); width: 1.15em; height: 1.15em; }
.pay-list { grid-template-columns: repeat(2, auto); justify-content: start; gap: 8px; }
.pay-list li { background: rgba(255, 255, 255, .08); border-radius: 10px; padding: 7px 12px; font-size: var(--fs-xs); text-align: center; }
.socials { display: flex; gap: 8px; margin-top: 12px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.footer-bottom { background: rgba(0, 0, 0, .18); padding: 18px 0; font-size: var(--fs-sm); text-align: center; }
.footer-bottom p { margin: 0; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 48px; padding-top: 64px; } }

/* ---------- Floating WhatsApp + bottom nav ---------- */
.wa-float {
	position: fixed; right: 16px; bottom: calc(var(--bottom-nav-h) + 16px); z-index: 60;
	width: 58px; height: 58px; border-radius: 50%; display: none; place-items: center;
	background: var(--wa); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
	transition: transform .2s var(--ease);
}
.wa-float .dg-icon { width: 30px; height: 30px; }
.wa-float:hover { color: #fff; }
.wa-float:active { transform: scale(.95); }
.bottom-nav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	display: grid; grid-template-columns: repeat(5, 1fr);
	background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
	box-shadow: 0 -1px 0 var(--line);
	padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-decoration: none; }
.bottom-nav a[aria-current="page"] { color: var(--green-800); }
.bottom-nav .cart-count { top: 6px; right: calc(50% - 22px); }
.bottom-nav__wa { color: var(--wa) !important; }
/* The centre tab is the main action: the shop, as everywhere else "Order" appears. */
.bottom-nav__order { color: var(--green-800) !important; }
.bottom-nav__order .dg-icon { width: 30px; height: 30px; }
@media (max-width: 1023px) { :root { --bottom-nav-h: 60px; } }
@media (min-width: 1024px) {
	.bottom-nav { display: none; }
	.wa-float { display: grid; }
}

/* ==========================================================================
   WooCommerce pages
   ========================================================================== */
.wc-wrap { padding: 32px 0 64px; }
.woocommerce-breadcrumb { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 16px; }
.woocommerce-breadcrumb a { color: var(--muted); }
.wc-wrap nav.woocommerce-breadcrumb, .wc-wrap nav.woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce-products-header__title { margin-bottom: .2em; }
.shop-intro { color: var(--muted); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
.chip { flex: none; padding: 9px 18px; border-radius: 999px; background: var(--cream); text-decoration: none; color: var(--green-900); font-weight: 500; font-size: var(--fs-md); }
.chip.is-active { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.woocommerce-result-count { color: var(--muted); font-size: var(--fs-md); }
.woocommerce-ordering select { min-height: 44px; border-radius: 999px; border: 1px solid var(--line); padding: 0 14px; background: var(--paper); }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 20px; }

/* Single product */
.wc-wrap--product div.product { display: grid; gap: 28px; }
.wc-wrap--product div.product > * { width: auto !important; min-width: 0; float: none !important; margin: 0 !important; grid-column: 1 / -1; }
.wc-wrap--product .woocommerce-product-gallery { background: var(--ghee-50); border-radius: var(--radius-xl); overflow: hidden; position: relative; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { position: absolute; top: 12px; right: 12px; z-index: 5; }
.flex-control-thumbs { display: grid; grid-template-columns: repeat(auto-fill, 72px); gap: 8px; list-style: none; padding: 8px; margin: 0; }
.flex-control-thumbs img { border-radius: 8px; cursor: pointer; opacity: .6; aspect-ratio: 1; object-fit: cover; }
.flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover { opacity: 1; }
.summary .product_title { font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: -.04em; }
.summary .price { font-size: var(--fs-2xl); font-weight: 700; color: var(--green-800); margin-bottom: 12px; }
.summary .woocommerce-product-details__short-description { color: var(--muted); }
.variations { width: 100%; border: 0; margin-bottom: 12px; }
.variations th, .variations td { display: block; text-align: left; padding: 0; border: 0; }
.variations label { font-weight: 600; color: var(--green-900); display: block; margin-bottom: 8px; }
.has-pills { position: relative; }
.has-pills select { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; width: 1px; min-width: 0; height: 1px; overflow: hidden; }
.size-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.size-pill { min-height: 48px; min-width: 80px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--paper); font-weight: 600; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.size-pill[aria-pressed="true"] { border-color: var(--green-800); background: var(--green-800); color: #fff; }
.size-pill:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.reset_variations { display: inline-block; margin-top: 8px; font-size: var(--fs-sm); }
.single_variation_wrap .woocommerce-variation-price { margin: 10px 0; font-size: var(--fs-xl); font-weight: 700; color: var(--green-800); }
form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 16px 0; }
form.variations_form { display: block; }
.woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 10px; }
.quantity { display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); overflow: hidden; }
.quantity input.qty { width: 46px; min-height: 48px; text-align: center; border: 0; background: transparent; font-weight: 600; -moz-appearance: textfield; }
.quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { width: 42px; min-height: 48px; border: 0; background: transparent; font-size: var(--fs-xl); cursor: pointer; color: var(--green-800); }
.single_add_to_cart_button, .woocommerce .button.alt, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .checkout-button, #place_order {
	min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--green-800); color: #fff;
	font-weight: 600; font-size: var(--fs-base); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.single_add_to_cart_button { flex: 1; min-width: 180px; background: var(--gold); color: var(--green-950); }
.single_add_to_cart_button.disabled { opacity: .55; cursor: not-allowed; }
.woocommerce button.button:hover, .woocommerce a.button:hover, #place_order:hover { background: var(--green-900); color: #fff; }
.product-wa { margin: 6px 0 16px; }
.product-facts { margin: -.2em 0 1em; color: var(--muted); font-size: var(--fs-sm); letter-spacing: .01em; }
/* Assurance tiles under Add to cart: two across, icon in a ghee-tinted circle. */
.product-trust { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: var(--fs-sm); line-height: 1.35; }
.product-trust li { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--cream); border-radius: var(--radius); color: var(--green-900); }
.product-trust .dg-icon { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--paper); color: var(--green-800); }
.product-trust li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.product-trust a { color: inherit; font-weight: 600; }
@media (max-width: 479px) { .product-trust li { flex-direction: column; align-items: flex-start; gap: 8px; } .product-trust li:last-child:nth-child(odd) { flex-direction: row; align-items: center; } }
.product_meta { font-size: var(--fs-sm); color: var(--muted); }
.product_meta > span { display: block; }
.product-accordions { display: grid; gap: 10px; }
.product-farm {
	display: grid; gap: 24px; align-items: center; padding: 28px; border-radius: var(--radius-xl);
	background: var(--green-900); color: rgba(255, 255, 255, .82);
}
.product-farm h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); }
.product-farm .btn--outline-dark { border-color: var(--gold); color: var(--gold-200); }
.product-farm .btn--outline-dark:hover { background: var(--gold); color: var(--green-950); }
.product-farm__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.product-farm__photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.related.products > h2, .upsells > h2 { text-align: center; }
@media (min-width: 900px) {
	.wc-wrap--product div.product { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 48px; align-items: start; }
	.wc-wrap--product div.product > .woocommerce-product-gallery { grid-column: 1; }
	.wc-wrap--product div.product > .summary { grid-column: 2; }
	.product-farm { grid-template-columns: 1fr 1.2fr; padding: 40px; }
}
.woocommerce-tabs { display: none; }
.star-rating { color: var(--gold); }

/* Sticky ATC */
.sticky-atc {
	position: fixed; left: 0; right: 0; bottom: var(--bottom-nav-h); z-index: 55;
	display: flex; align-items: center; gap: 10px; padding: 10px 16px;
	background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--line);
	transform: translateY(120%); transition: transform .25s var(--ease);
}
.sticky-atc.is-visible { transform: none; }
.sticky-atc img { border-radius: 8px; width: 44px; height: 44px; object-fit: cover; }
.sticky-atc__info { flex: 1; min-width: 0; display: grid; }
.sticky-atc__name { font-weight: 600; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__price { font-size: var(--fs-sm); color: var(--green-800); font-weight: 700; }
.sticky-atc__btn { min-height: 44px; }
@media (min-width: 1024px) { .sticky-atc { display: none; } }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
	list-style: none; padding: 14px 18px; margin: 0 0 20px; border-radius: var(--radius); background: var(--green-100); border-left: 4px solid var(--green-700);
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
}
.woocommerce-error { background: #fdecea; border-color: var(--red); display: block; }
body .woocommerce-message::before, body .woocommerce-info::before, body .woocommerce-error::before { content: none; }
.woocommerce-message .button, .woocommerce-info .button { min-height: 40px; order: 2; }

/* Cart / checkout */
.section--wc { padding-top: 32px; }
.ship-progress { background: var(--cream); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; }
.ship-progress p { margin: 0 0 8px; }
.ship-progress__bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ship-progress__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--ghee)); }
table.shop_table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
table.shop_table th, table.shop_table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.shop_table img { width: 64px; border-radius: 8px; }
.cart-collaterals { margin-top: 24px; }
.cart_totals h2 { font-size: var(--fs-2xl); }
.wc-proceed-to-checkout .checkout-button { width: 100%; margin-top: 12px; background: var(--gold); color: var(--green-950); }
.coupon { display: flex; gap: 8px; flex-wrap: wrap; }
.coupon input { min-height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; }
@media (max-width: 767px) {
	/* Stacked rows: the table and its body are plain blocks too, or the body keeps a table width
	   of its own (536px on a 390px phone) and the whole page zooms out. */
	table.shop_table_responsive, table.shop_table_responsive tbody { display: block; width: 100%; }
	table.shop_table_responsive thead { display: none; }
	table.shop_table_responsive tbody th { display: none; } /* the cell's own label says it */
	table.shop_table_responsive tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
	table.shop_table_responsive td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 6px 14px; text-align: right; }
	table.shop_table_responsive td::before { content: attr(data-title); font-weight: 600; text-align: left; }
	table.shop_table_responsive td.product-remove::before, table.shop_table_responsive td.product-thumbnail::before, table.shop_table_responsive td.product-name::before, table.shop_table_responsive td.actions::before { display: none; }
	/* Each cart item as one card: photo on the left, name with its remove button, then the figures. */
	.woocommerce-cart-form tr.cart_item { display: grid; grid-template-columns: 64px 1fr auto; column-gap: 12px; padding: 14px; }
	.woocommerce-cart-form tr.cart_item td { padding: 4px 0; }
	.woocommerce-cart-form tr.cart_item td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; align-items: flex-start; }
	.woocommerce-cart-form tr.cart_item td.product-name { grid-column: 2; grid-row: 1; justify-content: flex-start; text-align: left; font-weight: 600; }
	.woocommerce-cart-form tr.cart_item td.product-remove { grid-column: 3; grid-row: 1; }
	.woocommerce-cart-form tr.cart_item td.product-price, .woocommerce-cart-form tr.cart_item td.product-quantity, .woocommerce-cart-form tr.cart_item td.product-subtotal { grid-column: 2 / 4; }
	table.shop_table_responsive td.actions { display: block; padding: 14px; text-align: left; }
	.woocommerce .woocommerce-cart-form tr.cart_item td { border-top: 0; }
	.woocommerce table.cart td.actions .coupon { float: none; margin-bottom: 10px; }
	.woocommerce table.cart td.actions .coupon .input-text, .woocommerce table.cart td.actions .coupon .button, .woocommerce table.cart td.actions > .button { float: none; flex: 1 1 100%; width: 100%; margin: 0; }
	/* The delivery line has three parts (method, destination, change address): stack them. */
	.cart_totals tr.woocommerce-shipping-totals td { display: block; text-align: left; }
	.cart_totals tr.woocommerce-shipping-totals td::before { display: block; margin-bottom: 4px; }
}
/* "Update cart" stays disabled until a quantity changes; keep its label readable meanwhile. */
.woocommerce .woocommerce-cart-form button[name="update_cart"]:disabled { opacity: 1; background: var(--line); color: var(--muted); }
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; margin: 12px 0 0; font-size: var(--fs-lg); line-height: 1.2; }
/* Totals full width until there is room for them beside the items. */
@media (max-width: 999px) {
	.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: none; width: 100%; }
}
.woocommerce-cart-form td.product-remove a.remove { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--red) !important; font-size: var(--fs-xl); text-decoration: none; }
.woocommerce-cart-form td.product-remove a.remove:hover { background: #fdecea; }
.woocommerce form .form-row { margin: 0 0 14px; display: block; }
.woocommerce form .form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: var(--fs-md); }
.woocommerce form .form-row .required { color: var(--red); text-decoration: none; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection--single {
	width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid #d6cfbf; border-radius: 12px; background: var(--paper); font-size: 16px;
}
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 28px; padding: 0; }
.select2-container .select2-selection--single .select2-selection__arrow { height: 48px; }
.woocommerce form .form-row .description { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.woocommerce-checkout #customer_details, .woocommerce-checkout-review-order { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
body .woocommerce .col2-set .col-1, body .woocommerce .col2-set .col-2 { float: none; width: 100%; }
.woocommerce-checkout .col2-set .col-2 { margin-top: 20px; }
.woocommerce-checkout #order_comments { border: 1px solid #d6cfbf; border-radius: 12px; }
/* Payment box in the site's own colours instead of WooCommerce's lilac grey. */
body.woocommerce-checkout #payment { background: var(--cream); border-radius: var(--radius); }
body.woocommerce-checkout #payment div.payment_box { background: var(--paper); color: var(--muted); }
body.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--paper); }
#order_review_heading { margin-top: 28px; }
#payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
#payment ul.payment_methods li { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
#payment .payment_box { font-size: var(--fs-md); color: var(--muted); padding-top: 6px; }
#place_order { width: 100%; min-height: 56px; font-size: var(--fs-lg); background: var(--gold); color: var(--green-950); }
@media (min-width: 1000px) {
	form.checkout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 32px; align-items: start; }
	form.checkout > .woocommerce-NoticeGroup, form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 3; }
	#order_review_heading { grid-column: 2; margin-top: 0; }
	#order_review { grid-column: 2; }
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; background: var(--paper); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--green-800); color: #fff; }

/* Reviews form on product page */
#reviews .comment-form input[type="text"], #reviews .comment-form input[type="email"], #reviews textarea { width: 100%; padding: 10px 14px; border: 1px solid #d6cfbf; border-radius: 12px; }
#reviews .commentlist { list-style: none; padding: 0; }
#reviews .comment_container { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
#reviews .avatar { border-radius: 50%; width: 44px; }

/* Hover movement only for a real mouse: on touch screens a tapped card would stay lifted. */
@media (hover: hover) and (pointer: fine) {
	.btn:hover { transform: translateY(-1px); }
	.btn:active { transform: scale(.97); }
	ul.products li.product:hover { transform: translateY(-4px); }
	.gallery__item:hover img { transform: scale(1.04); opacity: .92; }
	.wa-float:hover { transform: scale(1.06); }
	.gift-card:hover { transform: translateY(-2px); }
}

/* Entrances. Every hidden starting state lives inside no-preference, so with reduced motion
   (or without JavaScript, which sets data-reveal) the page is simply the finished page.
   Hero: four parts rise on load and settle within a second; the farm photo behind them settles slowly.
   Below the fold, main.js marks each section's parts as they scroll in (once). */
@media (prefers-reduced-motion: no-preference) {
	.hero__title, .hero__urdu, .hero__text { animation: dg-rise 700ms var(--ease) backwards; }
	.hero__urdu { animation-delay: 90ms; }
	.hero__text { animation-delay: 180ms; }
	.hero__product { animation: dg-jar 900ms var(--ease-expo) 260ms backwards; }
	.hero__bg img { animation: dg-settle 2400ms var(--ease-soft) backwards; }

	[data-reveal] {
		opacity: 0;
		transition: opacity 700ms var(--ease), transform 850ms var(--ease-expo);
		transition-delay: calc(var(--i, 0) * var(--stagger, 90ms));
	}
	[data-reveal="line"] { transform: translateY(20px); }
	[data-reveal="row"] { --stagger: 70ms; transform: translateY(28px); }
	[data-reveal="picture"] { --stagger: 70ms; transform: scale(.96); }
	[data-reveal="shutter"] { opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
	[data-reveal="shutter"] img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
	[data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0); }
	[data-reveal="shutter"].is-in img { transform: none; }
}
@keyframes dg-rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes dg-jar { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes dg-settle { from { transform: scale(1.06); } }
@media print { [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } }

/* Reduced motion: fades and colour changes stay, movement goes. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-property: opacity, color, background-color, border-color, visibility !important; }
	.drawer__panel { animation: none; }
	.topbar__msg { transform: none; }
	/* The bar does not rotate, so the other messages are taken out rather than left invisible. */
	.topbar__msg:not(.is-active) { display: none; }
	.btn:hover, .btn:active, ul.products li.product:hover, .gallery__item:hover img, .wa-float:hover, .wa-float:active, .gift-card:hover { transform: none; }
}

/* Beat WooCommerce core colours (its selectors are more specific) */
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--green-800); font-weight: 700; }
.woocommerce div.product form.cart .button.single_add_to_cart_button, .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce #respond input#submit.alt {
	background: var(--gold); color: var(--green-950); border-radius: 999px; min-height: 50px; padding: 0 26px; font-weight: 600;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover { background: var(--gold-600); color: var(--green-950); }
.woocommerce button.button, .woocommerce a.button { background: var(--green-800); color: #fff; border-radius: 999px; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs { padding: 8px; }
.woocommerce div.product div.images .woocommerce-product-gallery__image img { width: auto; max-width: 100%; max-height: min(560px, 62vh); margin: 0 auto; object-fit: contain; aspect-ratio: auto; }
.woocommerce div.product div.images .woocommerce-product-gallery__image { background: var(--ghee-50); }
.gallery__item--glass img { object-position: center 20%; }
.gallery__tag { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; }
.woocommerce div.product div.images .flex-control-thumbs li img { width: 100%; }

/* ==========================================================================
   Pakistani touches: Urdu headings, local sections
   ========================================================================== */
.process > .container, .desi-uses > .container { position: relative; z-index: 1; }
.site-footer { position: relative; background-color: var(--green-950); }

.section-head h2 { margin-bottom: .15em; }
.section-urdu { color: var(--gold-ink); font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 2; margin: 0; }
.section-urdu--start { text-align: left; margin: -.2em 0 .4em; }
.section-head .section-urdu { margin-bottom: .5em; }

/* Hero */
.hero__farm-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-200); font-weight: 600; text-decoration: none; margin: -6px 0 18px; }
.hero__farm-link:hover { color: #fff; }
.hero__farm-link .dg-icon:last-child { width: 1em; height: 1em; }
@media (max-width: 520px) { .hero__actions .btn { flex: 1 1 100%; } }
/* Short screens (a small laptop, or a browser window under ~800px tall): the hero scales with the
   window height so the headline, buttons and jar all fit in the first screen. The farm link is
   left out there; the menu and the next sections link to the farm too. */
@media (min-width: 900px) and (max-height: 820px) {
	.hero__inner { padding: 40px 56px 84px; gap: 40px; }
	.hero__title { font-size: clamp(2.4rem, 7.4svh, 3.8rem); }
	.hero__urdu { font-size: clamp(1.25rem, 3.6svh, 1.7rem); line-height: 1.9; margin-bottom: .2em; }
	.hero__text { font-size: var(--fs-base); max-width: 560px; margin-bottom: 0; }
	.hero__actions { margin: 20px 0 16px; }
	.hero__actions .btn--lg { min-height: 50px; padding: .75em 1.5em; font-size: var(--fs-base); }
	.hero__farm-link { display: none; }
	.hero__product { width: min(360px, calc((100svh - 190px) * .8)); }
	.hero__seal { width: 82px; height: 82px; bottom: 20px; }
	.hero__seal span { font-size: var(--fs-xl); }
}

/* Product promises under the grid */
.products-section .section-urdu { line-height: 1.8; }
.product-promises { list-style: none; padding: 0; margin: 20px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.product-promises li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--cream); font-weight: 600; font-size: var(--fs-md); color: var(--green-900); }
.product-promises .dg-icon { color: var(--green-700); }
@media (max-width: 480px) {
	.product-promises { gap: 6px; }
	.product-promises li { padding: 6px 11px; font-size: var(--fs-xs); gap: 5px; white-space: nowrap; }
	.product-promises .dg-icon { width: 1.05em; height: 1.05em; }
}

/* How to order */
.how-order { background: var(--cream); }
.order-steps { list-style: none; padding: 0; margin: 0 auto; max-width: 980px; display: grid; gap: 18px; position: relative; }
.order-step { text-align: center; padding: 28px 22px; border-radius: var(--radius-lg); background: var(--paper); }
.order-step__icon { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px; background: var(--green-800); color: var(--gold-200); }
.order-step__icon .dg-icon { width: 32px; height: 32px; }
.order-step__icon b { position: absolute; top: -4px; right: -4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--green-950); font: italic 700 var(--fs-md) var(--serif); border: 3px solid var(--paper); }
.order-step h3 { font-size: var(--fs-lg); margin-bottom: .3em; }
.order-step p { color: var(--muted); margin: 0; font-size: var(--fs-md); }
@media (min-width: 768px) {
	.order-steps { grid-template-columns: repeat(3, 1fr); }
	.order-step { position: relative; }
}
.delivery-box { max-width: 980px; margin: 18px auto 0; padding: 28px; border-radius: var(--radius-lg); background: var(--paper); }
.delivery-box__head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.delivery-box__head h3 { margin: 0; font-size: var(--fs-xl); }
.delivery-box__head p { margin: 0; color: var(--muted); }
.delivery-box__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--gold); color: var(--green-950); }
.delivery-box__icon .dg-icon { width: 30px; height: 30px; }
.city-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.city-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--cream); font-size: var(--fs-sm); font-weight: 500; }
.city-chips .dg-icon { width: 14px; height: 14px; color: var(--red); }
.city-chips .city-chips__more { background: var(--green-800); color: #fff; border-color: var(--green-800); }
.open-parcel { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-weight: 600; color: var(--green-800); }

/* Purity tests */
.purity { background: var(--paper); }
.purity-grid { display: grid; gap: 12px; }
.purity-card { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-content: start; padding: 24px; border-radius: var(--radius-lg); background: var(--cream); }
.purity-card > * { grid-column: 2; }
.purity-card__icon { grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--paper); color: var(--red); }
.purity-card__icon .dg-icon { width: 24px; height: 24px; }
.purity-card h3 { margin-bottom: 0; }
.purity-card .urdu { color: var(--gold-ink); font-size: var(--fs-lg); text-align: left; margin: 0 0 .4em; }
.purity-card p:last-child { color: var(--muted); font-size: var(--fs-md); margin: 0; }
.purity-note { color: var(--muted); font-size: var(--fs-sm); margin: 32px 0 0; max-width: 640px; }
@media (min-width: 640px) { .purity-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* Desi uses + gifting: a warm ghee-tinted band */
.desi-uses { position: relative; background: var(--ghee-50); color: var(--ink); padding: var(--band-y) 0; }
.desi-uses__inner { display: grid; gap: 28px; align-items: center; }
.desi-uses h2 { margin-bottom: 0; }
.desi-uses__copy .urdu { color: var(--gold-ink); font-size: var(--fs-2xl); text-align: left; margin: 0; }
.uses-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.uses-list li { display: grid; justify-items: center; padding: 10px 6px 12px; border-radius: var(--radius); background: var(--paper); text-align: center; }
.uses-list .urdu { font-size: var(--fs-xl); line-height: 1.9; color: var(--green-800); }
.uses-list small { font-size: var(--fs-xs); color: var(--muted); }
.gift-card { display: flex; gap: 16px; align-items: center; padding: 12px; border-radius: var(--radius-lg); background: var(--green-900); color: rgba(255, 255, 255, .8); text-decoration: none; transition: transform .2s var(--ease); }
.gift-card__img { width: 92px; height: 120px; object-fit: cover; object-position: center 20%; border-radius: 14px; flex: none; }
.gift-card b { display: block; font: 700 var(--fs-xl)/1.2 var(--display); letter-spacing: -.02em; color: #fff; }
.gift-card small { display: block; color: rgba(255, 255, 255, .75); font-size: var(--fs-sm); margin: 4px 0 8px; }
.gift-card em { font-style: normal; font-weight: 600; color: var(--ghee); display: inline-flex; align-items: center; gap: 6px; }
.gift-card em .dg-icon { width: 1em; height: 1em; }
.gift-card:hover { color: rgba(255, 255, 255, .8); }
@media (min-width: 1024px) {
	.desi-uses__inner { grid-template-columns: 1fr 1.5fr 1.15fr; gap: 40px; }
}

/* Sale badge */
.woocommerce span.onsale { background: var(--red); color: #fff; border-radius: 999px; min-height: 0; min-width: 0; padding: 4px 12px; line-height: 1.4; font-size: var(--fs-xs); font-weight: 700; top: 12px; left: 12px; right: auto; margin: 0; }

/* Licence and lab test proof (only rendered once the client fills it in) */
.proof { background: var(--paper); padding: var(--band-y) 0; }
.proof__inner { display: grid; gap: 28px; align-items: center; }
.proof__copy p { margin: 0; max-width: 520px; color: var(--muted); }
.proof__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.proof__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--cream); }
.proof__list .dg-icon { width: 28px; height: 28px; color: var(--green-700); flex: none; }
.proof__list span { flex: 1; min-width: 160px; }
.proof__list small { display: block; font-size: var(--fs-sm); color: var(--muted); }
.proof__list b { display: block; font: 700 var(--fs-lg)/1.3 var(--display); letter-spacing: -.01em; color: var(--green-900); }
.proof__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
@media (min-width: 900px) { .proof__inner { grid-template-columns: 1fr 1.1fr; gap: 64px; } }

/* Farm visit invitation */
.farm-visit { background: var(--paper); }
.farm-visit__inner { display: grid; gap: 32px; align-items: center; }
.farm-visit__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.farm-visit__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.farm-visit__where { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-md); }
@media (min-width: 900px) { .farm-visit__inner { grid-template-columns: 1fr 1.05fr; gap: 72px; } }

.footer-bottom .footer-licence { margin-top: 4px; opacity: .75; }