/* ================================================================
   DairyFresh — Design System
   Poppins headings · Inter body · Green / Cream / Gold palette
   ================================================================ */

/* ── Google Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
	--df-primary:      #2E7D32;
	--df-primary-dk:   #1B5E20;
	--df-primary-lt:   #E8F5E9;
	--df-cream:        #FFF8E8;
	--df-accent:       #F4B400;
	--df-accent-dk:    #E09C00;
	--df-dark:         #1F1F1F;
	--df-muted:        #6B7280;
	--df-light:        #F5F5F5;
	--df-white:        #FFFFFF;
	--df-border:       #E5E7EB;
	--df-shadow-sm:    0 2px 8px rgba(0,0,0,.06);
	--df-shadow-md:    0 8px 24px rgba(0,0,0,.10);
	--df-shadow-lg:    0 16px 48px rgba(0,0,0,.14);
	--df-radius-sm:    8px;
	--df-radius-md:    16px;
	--df-radius-lg:    24px;
	--df-radius-xl:    32px;
	--df-font-head:    'Poppins', sans-serif;
	--df-font-body:    'Inter', system-ui, -apple-system, sans-serif;
	--df-transition:   all .25s cubic-bezier(.4,0,.2,1);
	--df-container:    1200px;
	--df-page-padding: 80px;
}

/* ── Reset / base ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { font-family: var(--df-font-body); font-size: 16px; line-height: 1.65; color: var(--df-dark); background: var(--df-cream); -webkit-font-smoothing: antialiased }
img { max-width: 100%; height: auto; display: block }
a { text-decoration: none; color: var(--df-primary); transition: var(--df-transition) }
a:hover { color: var(--df-primary-dk) }
button { font-family: var(--df-font-body); cursor: pointer }
ul, ol { list-style: none }
h1,h2,h3,h4,h5,h6 { font-family: var(--df-font-head); font-weight: 700; line-height: 1.2; color: var(--df-dark) }

/* ── Layout helpers ────────────────────────────────────────────── */
.df-container,
.container { width: 100%; max-width: var(--df-container); margin-inline: auto; padding-inline: 24px }
.df-section { padding: var(--df-page-padding) 0 }
.df-section--light  { background: var(--df-light) }
.df-section--cream  { background: var(--df-cream) }
.df-section--green  { background: var(--df-primary) }
.df-main { min-height: 60vh }

/* ── Section headings ──────────────────────────────────────────── */
.df-section__head { text-align: center; margin-bottom: 52px }
.df-section__head h2 { font-size: clamp(1.8rem,3vw,2.6rem); margin-bottom: 12px }
.df-section__head p { color: var(--df-muted); font-size: 1.05rem; max-width: 560px; margin-inline: auto }
.df-section__head--white h2,
.df-section__head--white p { color: var(--df-white) }
.df-section__label { display: inline-block; background: var(--df-primary-lt); color: var(--df-primary); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 12px }
.df-section__label--light { background: rgba(255,255,255,.15); color: var(--df-white) }
.df-section__cta { text-align: center; margin-top: 40px }

/* ── Buttons ───────────────────────────────────────────────────── */
.df-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-family: var(--df-font-head); font-weight: 600; font-size: .95rem; border: 2px solid transparent; transition: var(--df-transition); cursor: pointer; line-height: 1; white-space: nowrap }
.df-btn--primary { background: var(--df-primary); color: var(--df-white); border-color: var(--df-primary) }
.df-btn--primary:hover { background: var(--df-primary-dk); border-color: var(--df-primary-dk); color: var(--df-white); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(46,125,50,.3) }
.df-btn--accent { background: var(--df-accent); color: var(--df-dark); border-color: var(--df-accent) }
.df-btn--accent:hover { background: var(--df-accent-dk); border-color: var(--df-accent-dk); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(244,180,0,.35) }
.df-btn--outline { background: transparent; color: var(--df-primary); border-color: var(--df-primary) }
.df-btn--outline:hover { background: var(--df-primary); color: var(--df-white) }
.df-btn--outline-white { background: transparent; color: var(--df-white); border-color: var(--df-white) }
.df-btn--outline-white:hover { background: var(--df-white); color: var(--df-primary) }
.df-btn--sm { padding: 9px 18px; font-size: .85rem }
.df-btn--lg { padding: 18px 40px; font-size: 1.05rem }

/* ── Skip link ─────────────────────────────────────────────────── */
.df-skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 12px 20px; background: var(--df-primary); color: var(--df-white); border-radius: 0 0 8px 0 }
.df-skip-link:focus { left: 0; outline: 3px solid var(--df-accent) }

/* ── Header ────────────────────────────────────────────────────── */
.df-header { position: sticky; top: 0; z-index: 200; background: var(--df-white); box-shadow: var(--df-shadow-sm); transition: var(--df-transition) }
.df-header.scrolled { box-shadow: var(--df-shadow-md) }
.df-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 70px }
.df-header__logo a, .df-logo-text { display: flex; align-items: center; font-family: var(--df-font-head); font-weight: 800; font-size: 1.4rem; color: var(--df-primary) }
.df-header__logo img, .df-logo-img img { height: 44px; width: auto; display: block; }
.df-logo-img { display: flex; align-items: center; text-decoration: none; }
@media (max-width: 560px) {
	.df-header__logo img, .df-logo-img img { height: 36px }
}
.df-nav__list { display: flex; align-items: center; gap: 4px }
.df-nav__list li a { padding: 8px 14px; border-radius: 8px; font-weight: 500; font-size: .92rem; color: var(--df-dark); transition: var(--df-transition) }
.df-nav__list li a:hover,
.df-nav__list li.current-menu-item > a { color: var(--df-primary); background: var(--df-primary-lt) }
.df-header__actions { display: flex; align-items: center; gap: 12px }
.df-header__icon,
.df-header__cart { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--df-dark); transition: var(--df-transition) }
.df-header__icon:hover,
.df-header__cart:hover { background: var(--df-primary-lt); color: var(--df-primary) }
.df-cart-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; background: var(--df-accent); color: var(--df-dark); font-size: .65rem; font-weight: 700; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px }
.df-nav-toggle { display: none; flex-direction: column; gap: 5px; width: 36px; height: 36px; align-items: center; justify-content: center; background: transparent; border: 0; padding: 6px }
.df-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--df-dark); border-radius: 2px; transition: var(--df-transition) }
.df-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.df-nav-toggle.is-open span:nth-child(2) { opacity: 0 }
.df-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

/* ── Hero ──────────────────────────────────────────────────────── */
.df-hero { position: relative; min-height: 100svh; display: flex; align-items: center; background: linear-gradient(135deg,var(--df-primary-dk) 0%,var(--df-primary) 55%,#388E3C 100%); overflow: hidden }
.df-hero--has-img { background: linear-gradient(135deg,rgba(27,94,32,.92) 0%,rgba(46,125,50,.80) 60%,rgba(56,142,60,.7) 100%),var(--df-hero-img,none); background-size: cover; background-position: center }
.df-hero__splash { position: absolute; right: -10%; top: -10%; width: 50%; opacity: .6; pointer-events: none }
.df-hero__inner { position: relative; z-index: 2; padding: 80px 24px }
.df-hero__content { max-width: 680px }
.df-hero__eyebrow { display: inline-block; background: rgba(244,180,0,.18); color: var(--df-accent); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(244,180,0,.3); margin-bottom: 20px }
.df-hero__title { font-size: clamp(2.4rem,5vw,4.2rem); color: var(--df-white); line-height: 1.08; margin-bottom: 18px }
.df-hero__title em { font-style: normal; color: var(--df-accent) }
.df-hero__sub { font-size: clamp(1rem,1.5vw,1.2rem); color: rgba(255,255,255,.85); max-width: 520px; margin-bottom: 36px }
.df-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px }
.df-hero__badges { display: flex; gap: 12px; flex-wrap: wrap }
.df-hero__badge { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: var(--df-white); font-size: .82rem; font-weight: 500; padding: 8px 16px; border-radius: 999px; backdrop-filter: blur(4px) }
.df-wave { position: absolute; bottom: 0; left: 0; right: 0; line-height: 0 }
.df-wave svg { width: 100%; height: 60px }

/* ── Categories ────────────────────────────────────────────────── */
.df-categories__grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 20px }
.df-cat-card { display: block; border-radius: var(--df-radius-md); overflow: hidden; background: var(--df-white); box-shadow: var(--df-shadow-sm); transition: var(--df-transition); text-decoration: none }
.df-cat-card:hover { transform: translateY(-6px); box-shadow: var(--df-shadow-lg) }
.df-cat-card__img { aspect-ratio: 1; background: linear-gradient(135deg,var(--df-primary-lt),var(--df-cream)); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center }
.df-cat-card__icon { font-size: 3rem }
.df-cat-card__body { padding: 14px 16px; border-top: 1px solid var(--df-border) }
.df-cat-card__body h3 { font-size: .95rem; font-weight: 600; color: var(--df-dark); margin-bottom: 2px }
.df-cat-card__body span { font-size: .78rem; color: var(--df-muted) }
.df-cat-card:hover .df-cat-card__body h3 { color: var(--df-primary) }

/* ── Products grid (homepage) ──────────────────────────────────── */
.df-products__grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 24px }
.df-product-card { background: var(--df-white); border-radius: var(--df-radius-md); overflow: hidden; box-shadow: var(--df-shadow-sm); transition: var(--df-transition); display: flex; flex-direction: column }
.df-product-card:hover { transform: translateY(-6px); box-shadow: var(--df-shadow-lg) }
.df-product-card__img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; display: block; background: var(--df-light) }
.df-product-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease }
.df-product-card:hover .df-product-card__img-wrap img { transform: scale(1.06) }
.df-product-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; background: linear-gradient(135deg,var(--df-primary-lt),var(--df-cream)) }
.df-badge { position: absolute; top: 12px; left: 12px; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px }
.df-badge--sale { background: var(--df-accent); color: var(--df-dark) }
.df-badge--sold-out { background: var(--df-muted); color: var(--df-white) }
.df-product-card__body { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1 }
.df-product-card__cat { font-size: .72rem; font-weight: 600; color: var(--df-primary); text-transform: uppercase; letter-spacing: .06em }
.df-product-card__name { font-size: .98rem; font-weight: 600; line-height: 1.3 }
.df-product-card__name a { color: var(--df-dark) }
.df-product-card__name a:hover { color: var(--df-primary) }
.df-product-card__price { font-weight: 700; color: var(--df-primary); font-size: 1.05rem; margin-top: 2px }
.df-product-card__price del { color: var(--df-muted); font-weight: 400; font-size: .88rem; margin-right: 4px }
.df-product-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px }
.df-product-card__actions .button { flex: 1; text-align: center; padding: 10px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; background: var(--df-primary); color: var(--df-white); border: 0; transition: var(--df-transition) }
.df-product-card__actions .button:hover { background: var(--df-primary-dk) }

/* ── Why Choose Us ─────────────────────────────────────────────── */
.df-why__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 24px }
.df-why__card { background: var(--df-white); border-radius: var(--df-radius-md); padding: 32px 28px; box-shadow: var(--df-shadow-sm); transition: var(--df-transition); border-bottom: 4px solid transparent }
.df-why__card:hover { transform: translateY(-4px); box-shadow: var(--df-shadow-md); border-color: var(--df-accent) }
.df-why__icon { font-size: 2.6rem; margin-bottom: 16px; display: block }
.df-why__card h3 { font-size: 1.05rem; margin-bottom: 8px }
.df-why__card p { font-size: .9rem; color: var(--df-muted); line-height: 1.6 }

/* ── About ─────────────────────────────────────────────────────── */
.df-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center }
.df-about__img-col { position: relative }
.df-about__img { border-radius: var(--df-radius-lg); box-shadow: var(--df-shadow-lg); width: 100%; aspect-ratio: 4/5; object-fit: cover }
.df-about__img-placeholder { border-radius: var(--df-radius-lg); background: linear-gradient(135deg,var(--df-primary-lt),var(--df-cream)); aspect-ratio: 4/5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 2px dashed var(--df-border) }
.df-about__img-pattern { display: flex; gap: 16px; font-size: 2.5rem }
.df-about__img-placeholder p { color: var(--df-muted); font-size: .85rem; text-align: center; padding: 0 24px }
.df-about__badge-float { position: absolute; bottom: -20px; right: -20px; background: var(--df-accent); color: var(--df-dark); border-radius: var(--df-radius-md); padding: 16px 20px; text-align: center; box-shadow: var(--df-shadow-md) }
.df-about__badge-float strong { display: block; font-family: var(--df-font-head); font-size: 1.8rem; font-weight: 800; line-height: 1 }
.df-about__badge-float span { font-size: .8rem; font-weight: 600 }
.df-about__copy { display: flex; flex-direction: column; gap: 16px }
.df-about__copy h2 { font-size: clamp(1.8rem,2.5vw,2.6rem) }
.df-about__copy p { color: var(--df-muted); line-height: 1.75 }
.df-about__stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; padding: 24px 0; border-top: 1px solid var(--df-border); border-bottom: 1px solid var(--df-border); margin: 8px 0 }
.df-stat strong { display: block; font-family: var(--df-font-head); font-size: 1.6rem; color: var(--df-primary) }
.df-stat span { font-size: .78rem; color: var(--df-muted); font-weight: 500 }

/* ── Testimonials ──────────────────────────────────────────────── */
.df-testimonials.df-section--green .df-section__head h2 { color: var(--df-white) }
.df-testimonials__grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 24px }
.df-review-card { background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); border-radius: var(--df-radius-md); padding: 28px; color: var(--df-white); transition: var(--df-transition) }
.df-review-card:hover { background: rgba(255,255,255,.15); transform: translateY(-4px) }
.df-review-card__stars { color: var(--df-accent); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 14px }
.df-review-card__text { font-size: .92rem; line-height: 1.7; color: rgba(255,255,255,.9); margin-bottom: 20px }
.df-review-card__author { display: flex; align-items: center; gap: 12px }
.df-review-card__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--df-accent); color: var(--df-dark); font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.df-review-card__author strong { display: block; font-size: .9rem }
.df-review-card__author span { font-size: .78rem; opacity: .75 }

/* ── Blog (homepage) ───────────────────────────────────────────── */
.df-blog__grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 28px }
.df-blog-card { background: var(--df-white); border-radius: var(--df-radius-md); overflow: hidden; box-shadow: var(--df-shadow-sm); transition: var(--df-transition) }
.df-blog-card:hover { transform: translateY(-4px); box-shadow: var(--df-shadow-md) }
.df-blog-card__img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; display: block; background: var(--df-primary-lt) }
.df-blog-card__img,
.df-blog-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease }
.df-blog-card:hover .df-blog-card__img,
.df-blog-card:hover .df-blog-card__img-wrap img { transform: scale(1.05) }
.df-blog-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem }
.df-blog-card__cat { position: absolute; top: 14px; left: 14px; background: var(--df-accent); color: var(--df-dark); font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px }
.df-blog-card__body { padding: 22px }
.df-blog-card__date { font-size: .78rem; color: var(--df-muted); margin-bottom: 8px; display: block }
.df-blog-card__body h3 { font-size: 1rem; margin-bottom: 10px; line-height: 1.4 }
.df-blog-card__body h3 a { color: var(--df-dark) }
.df-blog-card__body h3 a:hover { color: var(--df-primary) }
.df-blog-card__body p { font-size: .88rem; color: var(--df-muted); margin-bottom: 14px; line-height: 1.6 }
.df-link { font-size: .88rem; font-weight: 600; color: var(--df-primary) }

/* ── Newsletter ────────────────────────────────────────────────── */
.df-newsletter { background: linear-gradient(135deg,var(--df-primary-dk),var(--df-primary)); padding: 60px 0 }
.df-newsletter__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap }
.df-newsletter__copy h2 { color: var(--df-white); font-size: clamp(1.4rem,2.5vw,2rem); margin-bottom: 8px }
.df-newsletter__copy p { color: rgba(255,255,255,.8); font-size: .95rem }
.df-newsletter__form { display: flex; gap: 10px; flex-wrap: wrap; min-width: 300px }
.df-newsletter__form input { flex: 1; min-width: 200px; padding: 14px 20px; border-radius: 999px; border: 0; font-family: var(--df-font-body); font-size: .92rem; outline: none }
.df-newsletter__form input:focus { box-shadow: 0 0 0 3px var(--df-accent) }
.df-newsletter__form button { padding: 14px 28px; background: var(--df-accent); color: var(--df-dark); border: 0; border-radius: 999px; font-weight: 700; font-family: var(--df-font-head); cursor: pointer; transition: var(--df-transition) }
.df-newsletter__form button:hover { background: var(--df-accent-dk) }

/* ── Footer ────────────────────────────────────────────────────── */
.df-footer { background: #1A2E1B; color: rgba(255,255,255,.8) }
.df-footer__main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; padding: 60px 24px 48px }
.df-footer__col h3 { color: var(--df-white); font-size: .95rem; font-weight: 700; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--df-primary) }
.df-footer__col ul li { margin-bottom: 10px }
.df-footer__col ul li a { color: rgba(255,255,255,.7); font-size: .88rem; transition: var(--df-transition) }
.df-footer__col ul li a:hover { color: var(--df-accent); padding-left: 4px }
.df-footer__brand p { font-size: .88rem; line-height: 1.65; margin: 12px 0; color: rgba(255,255,255,.7) }
.df-footer__fssai { font-size: .8rem; color: rgba(255,255,255,.55) }
.df-footer__social { display: flex; gap: 12px; margin-top: 16px }
.df-footer__social a { width: 36px; height: 36px; background: rgba(255,255,255,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.8); transition: var(--df-transition) }
.df-footer__social a:hover { background: var(--df-accent); color: var(--df-dark) }
.df-logo-text--white { color: var(--df-white) }
.df-footer__contact li { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; margin-bottom: 10px; color: rgba(255,255,255,.7) }
.df-footer__contact a { color: rgba(255,255,255,.8) }
.df-footer__contact a:hover { color: var(--df-accent) }
.df-footer__contact svg { flex-shrink: 0; margin-top: 3px; color: var(--df-accent) }
.df-wa-link { color: var(--df-accent) !important; font-weight: 600 }
.df-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0 }
.df-footer__bottom .df-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.df-footer__bottom p { font-size: .82rem; color: rgba(255,255,255,.5) }
.df-footer__payments { display: flex; gap: 8px; flex-wrap: wrap }
.df-pay-badge { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 4px; letter-spacing: .04em }

/* ── WhatsApp float ────────────────────────────────────────────── */
.df-wa-float { position: fixed; bottom: 28px; right: 28px; width: 58px; height: 58px; background: #25D366; color: var(--df-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(37,211,102,.45); z-index: 150; transition: var(--df-transition) }
.df-wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(37,211,102,.55) }

/* ── Mobile sticky cart bar ────────────────────────────────────── */
.df-mobile-cart-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--df-white); box-shadow: 0 -4px 20px rgba(0,0,0,.1); padding: 10px 16px; z-index: 140; align-items: center; gap: 12px }
.df-mobile-cart-bar__price { font-weight: 700; font-size: 1rem; color: var(--df-primary); flex: 1 }
.df-mobile-cart-bar .single_add_to_cart_button { flex: 2 }

/* ══════════════════════════════════════════════════════════════════
   PAGE TEMPLATES  — consistent structure across every non-home page
   ══════════════════════════════════════════════════════════════════ */

/* Page hero banner (same green gradient on every inner page) */
.df-page__hero {
	background: linear-gradient(135deg,var(--df-primary-dk),var(--df-primary));
	padding: 56px 0 48px;
	text-align: center;
}
.df-page__title {
	font-size: clamp(1.8rem,3vw,2.8rem);
	color: var(--df-white);
	margin-bottom: 10px;
}
.df-page__subtitle {
	color: rgba(255,255,255,.8);
	max-width: 580px;
	margin-inline: auto;
	font-size: 1rem;
	line-height: 1.65;
}

/* Breadcrumb (inside the hero) */
.df-breadcrumb {
	font-size: .8rem;
	color: rgba(255,255,255,.6);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
}
.df-breadcrumb a { color: rgba(255,255,255,.8) }
.df-breadcrumb a:hover { color: var(--df-accent) }
.df-breadcrumb span[aria-hidden] { opacity: .5 }

/* Page body — white card on cream background */
.df-page__body {
	padding: 52px 0 80px;
}
.df-page__content {
	background: var(--df-white);
	border-radius: var(--df-radius-lg);
	padding: 48px 52px;
	box-shadow: var(--df-shadow-sm);
	max-width: 840px;
	margin-inline: auto;
}
.df-page__content h2 { font-size: 1.35rem; margin: 28px 0 10px; color: var(--df-primary) }
.df-page__content h3 { font-size: 1.05rem; margin: 22px 0 8px }
.df-page__content p  { margin-bottom: 14px; color: var(--df-muted); line-height: 1.8 }
.df-page__content ul,
.df-page__content ol { margin: 0 0 16px 24px; color: var(--df-muted) }
.df-page__content ul  { list-style: disc }
.df-page__content ol  { list-style: decimal }
.df-page__content li  { margin-bottom: 6px; line-height: 1.7 }
.df-page__content a   { color: var(--df-primary); text-decoration: underline }
.df-page__content table { width: 100%; border-collapse: collapse; margin-bottom: 20px }
.df-page__content th,
.df-page__content td  { padding: 10px 14px; border: 1px solid var(--df-border); text-align: left }
.df-page__content th  { background: var(--df-primary-lt); font-weight: 600 }
.df-page__content blockquote { border-left: 4px solid var(--df-primary); padding: 14px 20px; background: var(--df-primary-lt); border-radius: 0 var(--df-radius-sm) var(--df-radius-sm) 0; margin: 20px 0; font-style: italic; color: var(--df-primary-dk) }

/* ── FAQ ───────────────────────────────────────────────────────── */
.df-faq-grid { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start }
.df-faq-list { display: flex; flex-direction: column; gap: 10px }
.df-faq-item { background: var(--df-white); border-radius: var(--df-radius-md); box-shadow: var(--df-shadow-sm); overflow: hidden; border: 1px solid var(--df-border) }
.df-faq-question { width: 100%; text-align: left; padding: 20px 24px; background: none; border: 0; font-family: var(--df-font-head); font-size: .96rem; font-weight: 600; color: var(--df-dark); display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 16px }
.df-faq-question:hover { background: var(--df-primary-lt); color: var(--df-primary) }
.df-faq-item.is-open .df-faq-question { color: var(--df-primary); background: var(--df-primary-lt) }
.df-faq-icon { font-size: 1.3rem; font-weight: 400; transition: var(--df-transition); flex-shrink: 0; color: var(--df-primary) }
.df-faq-item.is-open .df-faq-icon { transform: rotate(45deg) }
.df-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; padding: 0 24px }
.df-faq-answer p { padding: 4px 0 20px; color: var(--df-muted); line-height: 1.8 }
.df-faq-item.is-open .df-faq-answer { max-height: 500px }
.df-faq-cta__card { background: var(--df-white); border-radius: var(--df-radius-md); padding: 28px; box-shadow: var(--df-shadow-sm); text-align: center; border-top: 3px solid var(--df-primary) }
.df-faq-cta__icon { font-size: 2.2rem; margin-bottom: 10px }
.df-faq-cta__card h3 { font-size: 1rem; margin-bottom: 8px }
.df-faq-cta__card p { font-size: .88rem; color: var(--df-muted); margin-bottom: 16px }
.df-faq-cta__card .df-btn { display: block; text-align: center }

/* ── Contact ───────────────────────────────────────────────────── */
.df-contact-grid { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start }
.df-contact-info { display: flex; flex-direction: column; gap: 16px }
.df-contact-info__card { background: var(--df-white); border-radius: var(--df-radius-md); padding: 20px 22px; box-shadow: var(--df-shadow-sm); display: flex; gap: 14px; align-items: flex-start }
.df-contact-info__icon { font-size: 1.6rem; flex-shrink: 0 }
.df-contact-info__body h3 { font-size: .9rem; font-weight: 700; margin-bottom: 4px }
.df-contact-info__body p,
.df-contact-info__body a { font-size: .88rem; color: var(--df-muted) }
.df-contact-info__hours { background: var(--df-primary-lt); border-radius: var(--df-radius-md); padding: 18px 22px }
.df-contact-info__hours h3 { font-size: .9rem; font-weight: 700; margin-bottom: 12px; color: var(--df-primary) }
.df-contact-info__hours ul { display: flex; flex-direction: column; gap: 8px }
.df-contact-info__hours li { display: flex; justify-content: space-between; font-size: .85rem; color: var(--df-muted) }
/* Contact form card wrapper */
.df-contact-form-wrap { background: var(--df-white); border-radius: var(--df-radius-md); padding: 36px; box-shadow: var(--df-shadow-sm) }
.df-contact-form-wrap h2 { font-size: 1.3rem; margin-bottom: 24px }

/* ── Fallback native form ───────────────────────────────────────── */
.df-contact-form { display: flex; flex-direction: column; gap: 16px }

/* ── Contact Form 7 ────────────────────────────────────────────── */
.wpcf7 { width: 100% }
.wpcf7-form { display: flex; flex-direction: column; gap: 16px }

/* CF7 wraps each field in a <p> — reset its spacing */
.wpcf7-form p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* CF7 labels */
.wpcf7-form label {
	font-size: .84rem;
	font-weight: 600;
	color: var(--df-dark);
	display: block;
}
/* CF7 control wrap — full width */
.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
/* All text inputs, email, tel, select, textarea */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-url,
.wpcf7-form-control.wpcf7-number,
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--df-border);
	border-radius: var(--df-radius-sm);
	font-family: var(--df-font-body);
	font-size: .95rem;
	color: var(--df-dark);
	background: var(--df-white);
	transition: var(--df-transition);
	outline: none;
	display: block;
}
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-url:focus,
.wpcf7-form-control.wpcf7-number:focus,
.wpcf7-form-control.wpcf7-select:focus,
.wpcf7-form-control.wpcf7-textarea:focus {
	border-color: var(--df-primary);
	box-shadow: 0 0 0 3px rgba(46,125,50,.1);
}
.wpcf7-form-control.wpcf7-textarea {
	resize: vertical;
	min-height: 140px;
}
/* Submit button */
.wpcf7-form-control.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 36px;
	background: var(--df-primary);
	color: var(--df-white);
	font-family: var(--df-font-head);
	font-weight: 700;
	font-size: .95rem;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: var(--df-transition);
	width: 100%;
	letter-spacing: .02em;
}
.wpcf7-form-control.wpcf7-submit:hover {
	background: var(--df-primary-dk);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(46,125,50,.3);
}
.wpcf7-form-control.wpcf7-submit:disabled {
	opacity: .7;
	cursor: not-allowed;
	transform: none;
}
/* CF7 spinner */
.wpcf7-spinner {
	margin-left: 10px;
	vertical-align: middle;
}
/* Validation error tip */
.wpcf7-not-valid-tip {
	font-size: .78rem;
	color: #C62828;
	margin-top: 4px;
	display: block;
}
.wpcf7-form-control.wpcf7-not-valid {
	border-color: #C62828 !important;
	box-shadow: 0 0 0 3px rgba(198,40,40,.1) !important;
}
/* Response output (success / error message) */
.wpcf7-response-output {
	border-radius: var(--df-radius-sm);
	padding: 14px 18px;
	font-size: .9rem;
	font-weight: 600;
	margin-top: 8px;
	border: 0 !important;
}
.wpcf7-mail-sent-ok {
	background: #E8F5E9;
	color: #2E7D32;
	border-left: 4px solid var(--df-primary) !important;
}
.wpcf7-mail-sent-ng,
.wpcf7-aborted,
.wpcf7-validation-errors,
.wpcf7-spam-blocked {
	background: #FFEBEE;
	color: #C62828;
	border-left: 4px solid #C62828 !important;
}
/* Two-column first name / last name row (CF7 default template) */
.wpcf7-form .df-form-row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.df-form-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.df-form-group { display: flex; flex-direction: column; gap: 6px }
.df-form-group label { font-size: .84rem; font-weight: 600; color: var(--df-dark) }
.df-form-group input,
.df-form-group textarea,
.df-form-group select { padding: 12px 16px; border: 1.5px solid var(--df-border); border-radius: var(--df-radius-sm); font-family: var(--df-font-body); font-size: .95rem; color: var(--df-dark); background: var(--df-white); transition: var(--df-transition) }
.df-form-group input:focus,
.df-form-group textarea:focus { outline: none; border-color: var(--df-primary); box-shadow: 0 0 0 3px rgba(46,125,50,.1) }
.df-form-group textarea { resize: vertical; min-height: 130px }

/* ── Blog archive & single ─────────────────────────────────────── */
.df-blog-archive__container,
.df-blog-single__container { display: grid; grid-template-columns: 1fr 280px; gap: 48px; align-items: start }
.df-blog-archive__main,
.df-blog-single__main { min-width: 0 }
.df-blog-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 24px }
.df-blog-grid--3 { grid-template-columns: repeat(3,1fr) }
.df-blog-card__thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--df-primary-lt) }
.df-blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease }
.df-blog-card:hover .df-blog-card__thumb img { transform: scale(1.05) }
.df-blog-card__title { font-size: 1rem; margin: 10px 0 6px }
.df-blog-card__title a { color: var(--df-dark) }
.df-blog-card__title a:hover { color: var(--df-primary) }
.df-blog-card__meta { font-size: .78rem; color: var(--df-muted); display: flex; gap: 6px; align-items: center; margin-bottom: 8px }
.df-blog-card__excerpt { font-size: .88rem; color: var(--df-muted); line-height: 1.6; margin-bottom: 12px }
.df-blog-card__link { font-size: .85rem; font-weight: 600; color: var(--df-primary) }
.df-blog-card__link:hover { color: var(--df-primary-dk) }
.df-tag { display: inline-block; background: var(--df-accent); color: var(--df-dark); font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em }

/* ── Article ───────────────────────────────────────────────────── */
.df-article__cats { margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap }
.df-article__title { font-size: clamp(1.6rem,3vw,2.4rem); line-height: 1.2; margin-bottom: 16px }
.df-article__meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: .82rem; color: var(--df-muted); margin-bottom: 28px }
.df-article__thumb { margin-bottom: 32px; border-radius: var(--df-radius-md); overflow: hidden }
.df-article__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover }
.df-article__body h2 { font-size: 1.35rem; color: var(--df-primary); margin: 32px 0 12px }
.df-article__body h3 { font-size: 1.05rem; margin: 24px 0 10px }
.df-article__body p { margin-bottom: 18px; color: var(--df-muted); line-height: 1.85 }
.df-article__body ul,
.df-article__body ol { margin: 0 0 18px 24px; color: var(--df-muted) }
.df-article__body ul  { list-style: disc }
.df-article__body ol  { list-style: decimal }
.df-article__body li  { margin-bottom: 6px; line-height: 1.7 }
.df-article__body img { border-radius: var(--df-radius-sm); margin: 20px 0 }
.df-article__body blockquote { border-left: 4px solid var(--df-primary); padding: 16px 20px; background: var(--df-primary-lt); border-radius: 0 var(--df-radius-sm) var(--df-radius-sm) 0; margin: 24px 0; font-style: italic; color: var(--df-primary-dk) }
.df-article__footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--df-border) }
.df-article__tags a { color: var(--df-muted); font-size: .85rem }
.df-share-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 28px 0; padding: 18px 20px; background: var(--df-light); border-radius: var(--df-radius-md) }
.df-share-row > span { font-size: .85rem; font-weight: 600; color: var(--df-muted) }
.df-share-btn { padding: 7px 16px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--df-white) !important }
.df-share-btn--fb { background: #1877F2 }
.df-share-btn--tw { background: #1DA1F2 }
.df-share-btn--wa { background: #25D366 }
.df-share-btn:hover { opacity: .85 }
.df-author-box { display: flex; gap: 20px; padding: 24px; background: var(--df-white); border-radius: var(--df-radius-md); box-shadow: var(--df-shadow-sm); margin: 28px 0; border-left: 4px solid var(--df-primary) }
.df-author-box__avatar { border-radius: 50%; flex-shrink: 0; width: 80px; height: 80px; object-fit: cover }
.df-author-box__name { font-size: 1rem; font-weight: 700; margin-bottom: 6px }
.df-author-box__bio { font-size: .88rem; color: var(--df-muted); line-height: 1.6 }
.df-related-posts { margin-top: 40px }
.df-related-posts h3 { font-size: 1.2rem; margin-bottom: 20px }

/* ── Pagination ────────────────────────────────────────────────── */
.df-pagination { margin-top: 40px }
.df-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center }
.df-pagination .page-numbers { padding: 8px 16px; border-radius: var(--df-radius-sm); border: 1.5px solid var(--df-border); font-size: .88rem; color: var(--df-dark); transition: var(--df-transition) }
.df-pagination .page-numbers:hover,
.df-pagination .page-numbers.current { background: var(--df-primary); color: var(--df-white); border-color: var(--df-primary) }

/* ── Comments ──────────────────────────────────────────────────── */
.df-comments { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--df-border) }
.df-comments .comment-respond { background: var(--df-white); padding: 28px; border-radius: var(--df-radius-md); box-shadow: var(--df-shadow-sm) }
.df-comments .comment-form-comment textarea { width: 100%; padding: 12px; border: 1.5px solid var(--df-border); border-radius: var(--df-radius-sm); font-family: var(--df-font-body) }
.df-comments input[type=submit] { background: var(--df-primary); color: var(--df-white); border: 0; padding: 12px 28px; border-radius: 999px; font-weight: 600; cursor: pointer }

/* ── Sidebar ───────────────────────────────────────────────────── */
.df-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 90px }
.df-sidebar__widget { background: var(--df-white); border-radius: var(--df-radius-md); padding: 22px; box-shadow: var(--df-shadow-sm) }
.df-sidebar__heading { font-size: .95rem; font-weight: 700; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--df-primary) }
.df-sidebar__recent { display: flex; flex-direction: column; gap: 12px }
.df-sidebar__recent li { display: flex; gap: 12px; align-items: flex-start }
.df-sidebar__recent-thumb { flex-shrink: 0; width: 60px; height: 60px; border-radius: var(--df-radius-sm); overflow: hidden; display: block }
.df-sidebar__recent-thumb img { width: 100%; height: 100%; object-fit: cover }
.df-sidebar__recent a { font-size: .88rem; font-weight: 600; color: var(--df-dark); line-height: 1.4; display: block }
.df-sidebar__recent a:hover { color: var(--df-primary) }
.df-sidebar__recent time { font-size: .75rem; color: var(--df-muted) }
.df-sidebar__cats { display: flex; flex-direction: column; gap: 2px }
.df-sidebar__cats a { display: flex; justify-content: space-between; font-size: .88rem; padding: 7px 0; color: var(--df-muted); border-bottom: 1px solid var(--df-light) }
.df-sidebar__cats a:hover { color: var(--df-primary) }
.df-sidebar__tags { display: flex; flex-wrap: wrap; gap: 8px }
.df-sidebar__shop-cta .df-sidebar__widget { background: linear-gradient(135deg,var(--df-primary),var(--df-primary-dk)); text-align: center }
.df-sidebar__shop-cta .df-sidebar__widget h4 { color: var(--df-white); margin: 8px 0 }
.df-sidebar__shop-cta .df-sidebar__widget p { color: rgba(255,255,255,.8); font-size: .88rem }

/* ── Search form ───────────────────────────────────────────────── */
.df-search-form { display: flex; border-radius: var(--df-radius-sm); overflow: hidden; border: 1.5px solid var(--df-border) }
.df-search-form__input { flex: 1; padding: 10px 14px; border: 0; font-family: var(--df-font-body); font-size: .9rem; color: var(--df-dark); background: var(--df-white) }
.df-search-form__input:focus { outline: none }
.df-search-form__btn { padding: 10px 14px; background: var(--df-primary); border: 0; cursor: pointer; font-size: 1rem; color: var(--df-white) }

/* ── 404 ───────────────────────────────────────────────────────── */
.df-404-page .container { display: flex; justify-content: center; padding: 80px 24px }
.df-404-inner { text-align: center; max-width: 560px }
.df-404-art { position: relative; display: inline-block; margin-bottom: 24px }
.df-404-milk { font-size: 5rem; display: block; animation: wobble 2.5s ease-in-out infinite }
.df-404-number { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--df-font-head); font-size: 3rem; font-weight: 800; color: var(--df-primary); opacity: .12 }
@keyframes wobble { 0%,100% { transform: rotate(-5deg) } 50% { transform: rotate(5deg) } }
.df-404-title { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 12px }
.df-404-text { color: var(--df-muted); margin-bottom: 28px; line-height: 1.7 }
.df-404-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px }
.df-404-search p { font-size: .88rem; color: var(--df-muted); margin-bottom: 10px }
.df-404-search .df-search-form { max-width: 380px; margin-inline: auto; margin-bottom: 28px }
.df-404-popular h3 { font-size: 1rem; margin-bottom: 12px }
.df-404-popular li a { font-size: .9rem; color: var(--df-primary) }

/* ── Notices ───────────────────────────────────────────────────── */
.df-notice { padding: 14px 20px; border-radius: var(--df-radius-sm); margin-bottom: 20px; font-weight: 600; font-size: .9rem }
.df-notice--success { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7 }
.df-notice--error   { background: #FFEBEE; color: #C62828; border: 1px solid #FFCDD2 }

/* ── Utility ───────────────────────────────────────────────────── */
.df-empty-state { text-align: center; padding: 60px 24px }
.df-empty-state p { color: var(--df-muted); margin-bottom: 20px }
.df-widget { margin-bottom: 24px }
.df-widget__title { font-size: 1rem; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--df-primary) }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.df-about__grid       { grid-template-columns: 1fr }
	.df-about__img-col    { max-width: 480px }
	.df-about__badge-float { bottom: 16px; right: 16px }
	.df-footer__main      { grid-template-columns: 1fr 1fr; gap: 32px }
	.df-about__stats      { grid-template-columns: repeat(2,1fr) }
	.df-blog-archive__container,
	.df-blog-single__container { grid-template-columns: 1fr }
	.df-blog-archive__sidebar,
	.df-blog-single__sidebar { display: none }
	.df-faq-grid          { grid-template-columns: 1fr }
	.df-faq-cta           { display: none }
	.df-blog-grid--3      { grid-template-columns: repeat(2,1fr) }
	.df-contact-grid      { grid-template-columns: 1fr }
}
@media (max-width: 768px) {
	:root { --df-page-padding: 52px }
	.df-nav { display: none; position: fixed; inset: 0; top: 70px; background: var(--df-white); z-index: 199; padding: 24px; flex-direction: column }
	.df-nav.is-open { display: flex }
	.df-nav__list { flex-direction: column; gap: 8px; width: 100% }
	.df-nav__list li a { padding: 14px 18px; font-size: 1rem; border-radius: 12px; display: block }
	.df-nav-toggle { display: flex }
	.df-hero { min-height: 80vh }
	.df-hero__ctas { flex-direction: column }
	.df-hero__ctas .df-btn { text-align: center; justify-content: center }
	.df-categories__grid  { grid-template-columns: repeat(2,1fr) }
	.df-products__grid    { grid-template-columns: repeat(2,1fr) }
	.df-about__grid       { grid-template-columns: 1fr }
	.df-footer__main      { grid-template-columns: 1fr }
	.df-newsletter__inner { flex-direction: column; text-align: center }
	.df-newsletter__form  { width: 100%; justify-content: center }
	.df-footer__bottom .df-container { flex-direction: column; text-align: center }
	.df-testimonials__grid { grid-template-columns: 1fr }
	.df-blog__grid        { grid-template-columns: 1fr }
	.df-blog-grid         { grid-template-columns: 1fr }
	.df-blog-grid--3      { grid-template-columns: 1fr }
	.df-mobile-cart-bar   { display: flex }
	body.single-product .df-footer { padding-bottom: 70px }
	.df-wa-float          { bottom: 80px }
	.df-form-row--2col    { grid-template-columns: 1fr }
	.df-author-box        { flex-direction: column; align-items: center; text-align: center }
	.df-404-actions       { flex-direction: column; align-items: center }
	.df-page__content     { padding: 28px 20px }
}
@media (max-width: 480px) {
	.df-products__grid  { grid-template-columns: 1fr }
	.df-about__stats    { grid-template-columns: repeat(2,1fr) }
	.df-hero__badges    { display: none }
}

/* ══════════════════════════════════════════════════════════════════
   HELLO INDIA DAIRY — Homepage
   ══════════════════════════════════════════════════════════════════ */

/* ── Shared buttons ─────────────────────────────────────────────── */
.hid-btn-solid {
	display: inline-block;
	background: var(--df-primary);
	color: var(--df-white) !important;
	font-family: var(--df-font-head);
	font-weight: 700;
	font-size: .95rem;
	padding: 14px 32px;
	border-radius: 999px;
	border: 2px solid var(--df-primary);
	transition: var(--df-transition);
	text-decoration: none;
}
.hid-btn-solid:hover { background: var(--df-primary-dk); border-color: var(--df-primary-dk); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(46,125,50,.25) }
.hid-btn-solid--sm { padding: 10px 20px; font-size: .85rem }

.hid-btn-outline {
	display: inline-block;
	background: transparent;
	color: var(--df-primary) !important;
	font-family: var(--df-font-head);
	font-weight: 700;
	font-size: .95rem;
	padding: 12px 30px;
	border-radius: 999px;
	border: 2px solid var(--df-primary);
	transition: var(--df-transition);
	text-decoration: none;
}
.hid-btn-outline:hover { background: var(--df-primary); color: var(--df-white) !important }
.hid-btn-outline--sm { padding: 9px 18px; font-size: .85rem }

/* ── Section label pill ─────────────────────────────────────────── */
.hid-section-label {
	display: inline-block;
	background: var(--df-accent);
	color: var(--df-dark);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

/* ── HERO ───────────────────────────────────────────────────────── */
.hid-hero {
	background: var(--df-cream);
	padding: 72px 0 60px;
	overflow: hidden;
}
.hid-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.hid-hero__eyebrow {
	display: inline-block;
	background: var(--df-primary-lt);
	color: var(--df-primary-dk);
	font-size: .8rem;
	font-weight: 600;
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 20px;
	letter-spacing: .04em;
}
.hid-hero__title {
	font-family: var(--df-font-head);
	font-size: clamp(2.4rem, 4.5vw, 3.8rem);
	line-height: 1.1;
	color: var(--df-dark);
	margin-bottom: 20px;
}
.hid-hero__title span {
	color: var(--df-primary);
}
.hid-hero__sub {
	font-size: 1.05rem;
	color: var(--df-muted);
	line-height: 1.75;
	margin-bottom: 32px;
}
.hid-hero__btn {
	display: inline-block;
	background: var(--df-primary);
	color: var(--df-white) !important;
	font-family: var(--df-font-head);
	font-weight: 700;
	font-size: 1.05rem;
	padding: 16px 40px;
	border-radius: 999px;
	text-decoration: none;
	transition: var(--df-transition);
	margin-bottom: 28px;
}
.hid-hero__btn:hover { background: var(--df-primary-dk); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(46,125,50,.3) }
.hid-hero__trust {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.hid-hero__trust span {
	font-size: .8rem;
	font-weight: 600;
	color: var(--df-primary-dk);
	background: var(--df-primary-lt);
	padding: 5px 12px;
	border-radius: 999px;
}
.hid-hero__img-wrap {
	position: relative;
}
.hid-hero__img-wrap img {
	width: 100%;
	height: auto;
	border-radius: var(--df-radius-lg);
	box-shadow: var(--df-shadow-lg);
	display: block;
}

/* ── PRODUCTS ───────────────────────────────────────────────────── */
.hid-shop__head {
	text-align: center;
	margin-bottom: 44px;
}
.hid-shop__head h2 {
	font-size: clamp(1.8rem, 2.5vw, 2.4rem);
	margin-bottom: 8px;
}
.hid-shop__head p {
	color: var(--df-muted);
	font-size: 1rem;
}
.hid-products__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.hid-product-card {
	background: var(--df-white);
	border-radius: var(--df-radius-md);
	overflow: hidden;
	box-shadow: var(--df-shadow-sm);
	transition: var(--df-transition);
	display: flex;
	flex-direction: column;
}
.hid-product-card:hover { transform: translateY(-5px); box-shadow: var(--df-shadow-md) }
.hid-product-card__img-link {
	display: block;
	position: relative;
	aspect-ratio: 1/1;
	overflow: hidden;
	background: var(--df-cream);
}
.hid-product-card__img-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
	display: block;
}
.hid-product-card:hover .hid-product-card__img-link img { transform: scale(1.05) }
.hid-product-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--df-accent);
	color: var(--df-dark);
	font-size: .7rem;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
}
.hid-product-card__body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.hid-product-card__body h3 {
	font-size: .96rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.hid-product-card__body h3 a { color: var(--df-dark) }
.hid-product-card__body h3 a:hover { color: var(--df-primary) }
.hid-product-card__price {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--df-primary);
	margin: 0;
}
.hid-product-card__price del { color: var(--df-muted); font-weight: 400; font-size: .88rem; margin-right: 4px }
.hid-product-card__actions {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}
.hid-product-card__actions a { flex: 1; text-align: center }

/* ── BENEFITS ───────────────────────────────────────────────────── */
.hid-benefits__head {
	text-align: center;
	margin-bottom: 44px;
}
.hid-benefits__head h2 { font-size: clamp(1.8rem, 2.5vw, 2.4rem); margin-bottom: 8px }
.hid-benefits__head p  { color: var(--df-muted) }
.hid-benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.hid-benefits__card {
	background: var(--df-white);
	border-radius: var(--df-radius-md);
	padding: 28px 24px;
	box-shadow: var(--df-shadow-sm);
	transition: var(--df-transition);
	border-bottom: 3px solid transparent;
}
.hid-benefits__card:hover { transform: translateY(-4px); box-shadow: var(--df-shadow-md); border-color: var(--df-accent) }
.hid-benefits__icon { font-size: 2.2rem; display: block; margin-bottom: 14px }
.hid-benefits__card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--df-dark) }
.hid-benefits__card p  { font-size: .88rem; color: var(--df-muted); line-height: 1.65; margin: 0 }

/* ── THE CRAFT ──────────────────────────────────────────────────── */
.hid-craft__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.hid-craft__img img {
	width: 100%;
	height: auto;
	border-radius: var(--df-radius-lg);
	box-shadow: var(--df-shadow-md);
	display: block;
}
.hid-craft__copy { display: flex; flex-direction: column; gap: 16px }
.hid-craft__copy h2 { font-size: clamp(1.8rem, 2.5vw, 2.6rem); line-height: 1.2; margin: 0 }
.hid-craft__copy p  { color: var(--df-muted); line-height: 1.8; margin: 0 }

/* ── TRUST ──────────────────────────────────────────────────────── */
.hid-trust__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.hid-trust__img img {
	width: 100%;
	height: auto;
	border-radius: var(--df-radius-lg);
	box-shadow: var(--df-shadow-md);
	display: block;
}
.hid-trust__copy { display: flex; flex-direction: column; gap: 16px }
.hid-trust__copy h2 { font-size: clamp(1.8rem, 2.5vw, 2.6rem); line-height: 1.15; margin: 0 }
.hid-trust__copy p  { color: var(--df-muted); line-height: 1.8; margin: 0 }
.hid-trust__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hid-trust__list li {
	font-size: .94rem;
	font-weight: 600;
	color: var(--df-primary-dk);
	background: var(--df-primary-lt);
	padding: 10px 16px;
	border-radius: var(--df-radius-sm);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.hid-products__grid { grid-template-columns: repeat(2, 1fr) }
	.hid-benefits__grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 768px) {
	.hid-hero { padding: 48px 0 40px }
	.hid-hero__inner { grid-template-columns: 1fr; gap: 32px }
	.hid-hero__img-wrap { order: -1; max-width: 380px; margin-inline: auto }
	.hid-hero__copy { text-align: center }
	.hid-hero__trust { justify-content: center }
	.hid-craft__inner,
	.hid-trust__inner { grid-template-columns: 1fr; gap: 36px }
	.hid-trust__img   { order: -1 }
	.hid-benefits__grid { grid-template-columns: 1fr }
}
@media (max-width: 560px) {
	.hid-products__grid { grid-template-columns: repeat(2, 1fr); gap: 16px }
	.hid-hero__title    { font-size: 2.2rem }
}

/* ════════════════════════════════════════════════════════════════════
   PREMIUM UPGRADES — Hello India Dairy
   Serif accents · Gold detailing · Floating badges · Image frames
   ════════════════════════════════════════════════════════════════════ */

/* ── Premium serif "em" headings ──────────────────────────────────── */
.hid-hero__title em,
.hid-craft__copy h2 em,
.hid-trust__copy h2 em,
.hid-health__copy h2 em,
.hid-promise__copy h2 em,
.hid-benefits__head h2 em {
	font-style: italic;
	font-family: 'Georgia', 'Playfair Display', 'Times New Roman', serif;
	font-weight: 500;
	color: var(--df-primary);
	position: relative;
	letter-spacing: -.01em;
}
.hid-promise__copy h2 em { color: var(--df-accent) }

/* Shared lead paragraph */
.hid-lead,
.hid-health__lead,
.hid-promise__lead {
	font-size: 1.08rem;
	line-height: 1.85;
	color: #374151;
	margin: 0 0 4px;
}

/* Gold label variant */
.hid-section-label--gold {
	background: rgba(244,180,0,.18);
	color: #8a6300;
	border: 1px solid rgba(244,180,0,.4);
}

/* Gold-outlined button variant */
.hid-btn-outline--gold {
	border-color: var(--df-accent) !important;
	color: var(--df-accent-dk) !important;
}
.hid-btn-outline--gold:hover { background: var(--df-accent) !important; color: var(--df-dark) !important }

/* Custom check bullet (replaces ✓) */
.hid-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--df-primary);
	margin-right: 10px;
	flex-shrink: 0;
	position: relative;
}
.hid-check::after {
	content: '';
	width: 10px; height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
}
.hid-trust__list li {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--df-border);
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

/* ── Image frame (gold corner accent) ─────────────────────────────── */
.hid-img-frame {
	position: relative;
	border-radius: var(--df-radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.25), 0 12px 24px -10px rgba(0,0,0,.12);
}
.hid-img-frame::before,
.hid-img-frame::after {
	content: '';
	position: absolute;
	width: 56px; height: 56px;
	border: 3px solid var(--df-accent);
	pointer-events: none;
	z-index: 2;
}
.hid-img-frame::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0 }
.hid-img-frame::after  { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0 }
.hid-img-frame img { display: block; width: 100%; height: auto }

/* ════════════════════════════════════════════════════════════════════
   HERO — premium overrides
   ════════════════════════════════════════════════════════════════════ */
.hid-hero {
	background:
		radial-gradient(ellipse at top right, rgba(244,180,0,.10), transparent 55%),
		radial-gradient(ellipse at bottom left, rgba(46,125,50,.08), transparent 55%),
		var(--df-cream);
	padding: 90px 0 80px;
	position: relative;
}
.hid-hero__leaf {
	position: absolute;
	width: 140px; height: 140px;
	z-index: 0;
	pointer-events: none;
}
.hid-hero__leaf--tl { top: -30px; left: -30px; transform: rotate(15deg) }
.hid-hero__leaf--br { bottom: -30px; right: -30px; transform: rotate(195deg); width: 180px; height: 180px }

.hid-hero__inner { position: relative; z-index: 1 }

.hid-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--df-border);
	box-shadow: 0 2px 12px rgba(0,0,0,.05);
	padding: 7px 16px 7px 12px;
}

.hid-hero__title {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 22px;
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	line-height: 1.05;
}
.hid-hero__title-en {
	font-family: var(--df-font-head);
	font-weight: 800;
	color: var(--df-dark);
	letter-spacing: -.01em;
	font-size: .65em;
}
.hid-hero__title-hi {
	font-family: 'Georgia', 'Times New Roman', serif;
	font-weight: 700;
	color: var(--df-primary);
	font-size: 1.1em;
	line-height: 1.1;
	position: relative;
	display: inline-block;
	width: max-content;
	max-width: 100%;
}
.hid-hero__title-hi::after {
	content: '';
	position: absolute;
	left: 0; right: 30%;
	bottom: -6px;
	height: 4px;
	background: linear-gradient(90deg, var(--df-accent), transparent);
	border-radius: 4px;
}
.hid-hero__title-tag {
	font-family: 'Georgia', serif;
	font-style: italic;
	font-weight: 500;
	color: var(--df-muted);
	font-size: .42em;
	margin-top: 16px;
	letter-spacing: .02em;
}

.hid-hero__sub {
	font-size: 1.08rem;
	color: #4b5563;
	line-height: 1.8;
	margin-bottom: 28px;
	max-width: 520px;
}

.hid-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.hid-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 30px;
	border-radius: 999px;
	font-family: var(--df-font-head);
	font-weight: 700;
	font-size: 1rem;
	transition: var(--df-transition);
	border: 2px solid transparent;
	cursor: pointer;
	margin-bottom: 0;
}
.hid-hero__btn--solid {
	background: var(--df-primary);
	color: #fff !important;
	border-color: var(--df-primary);
	box-shadow: 0 10px 24px -8px rgba(46,125,50,.45);
}
.hid-hero__btn--solid:hover {
	background: var(--df-primary-dk);
	border-color: var(--df-primary-dk);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -8px rgba(46,125,50,.55);
}
.hid-hero__btn--ghost {
	background: transparent;
	color: var(--df-dark) !important;
	border-color: rgba(31,31,31,.18);
}
.hid-hero__btn--ghost:hover {
	border-color: var(--df-dark);
	background: rgba(0,0,0,.04);
}

.hid-hero__rating {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	font-size: .92rem;
	color: #4b5563;
}
.hid-hero__stars { display: inline-flex; gap: 2px }
.hid-hero__rating strong { color: var(--df-dark); font-weight: 700 }

.hid-hero__trust {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.hid-hero__trust span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	color: var(--df-primary-dk);
	border: 1px solid rgba(46,125,50,.18);
	font-weight: 600;
	font-size: .8rem;
	padding: 6px 12px;
	border-radius: 999px;
}
.hid-hero__trust span::before {
	content: '';
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--df-primary);
	display: inline-block;
}

/* Hero image — premium framing */
.hid-hero__img-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 480px;
}
.hid-hero__img-ring {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background:
		radial-gradient(circle, #fff 0%, rgba(255,255,255,.6) 60%, transparent 75%),
		conic-gradient(from 210deg, rgba(244,180,0,.35), rgba(46,125,50,.25), rgba(244,180,0,.35));
	filter: blur(2px);
	z-index: 0;
}
.hid-hero__img-shadow {
	position: absolute;
	bottom: 6%;
	left: 12%; right: 12%;
	height: 30px;
	background: radial-gradient(ellipse, rgba(0,0,0,.22), transparent 70%);
	filter: blur(8px);
	z-index: 0;
}
.hid-hero__img-wrap img {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	height: auto;
	border-radius: 50%;
	box-shadow:
		0 30px 60px -20px rgba(46,125,50,.35),
		0 12px 24px -8px rgba(0,0,0,.18),
		inset 0 0 0 8px rgba(255,255,255,.6);
	border: 1px solid rgba(244,180,0,.25);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.hid-hero__floating-badge {
	position: absolute;
	z-index: 3;
	background: #fff;
	border-radius: 50%;
	width: 96px; height: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 14px 32px -10px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.6);
	border: 2px solid var(--df-accent);
	font-family: var(--df-font-head);
	text-align: center;
	top: 8%;
	right: 4%;
}
.hid-hero__floating-badge strong {
	display: block;
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--df-primary-dk);
	line-height: 1;
}
.hid-hero__floating-badge span {
	font-size: .68rem;
	font-weight: 600;
	color: var(--df-muted);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-top: 4px;
}
.hid-hero__floating-badge--bottom {
	top: auto;
	right: auto;
	bottom: 6%;
	left: 0;
	border-color: var(--df-primary);
}
.hid-hero__floating-badge--bottom span {
	color: var(--df-primary-dk);
	font-size: .65rem;
	line-height: 1.2;
	margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   HEALTH BENEFITS SHOWCASE
   ════════════════════════════════════════════════════════════════════ */
.hid-health {
	background:
		linear-gradient(180deg, var(--df-cream) 0%, #fffaee 100%);
	position: relative;
	overflow: hidden;
}
.hid-health__inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 64px;
	align-items: center;
}
.hid-health__img {
	position: relative;
}
.hid-health__img img {
	width: 100%;
	height: auto;
	border-radius: var(--df-radius-lg);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.25);
	display: block;
}
.hid-health__deco {
	position: absolute;
	top: -32px; left: -32px;
	width: 110px; height: 110px;
	z-index: -1;
	opacity: .8;
}
.hid-health__copy {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.hid-health__copy h2 {
	font-size: clamp(1.9rem, 2.8vw, 2.6rem);
	line-height: 1.15;
	margin: 0;
}
.hid-health__list {
	list-style: none;
	padding: 0;
	margin: 8px 0 12px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.hid-health__list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.hid-health__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	background: #fff;
	border: 1px solid var(--df-border);
	border-radius: 12px;
	font-size: 1.25rem;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.hid-health__list h3 {
	font-size: .98rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--df-dark);
}
.hid-health__list p {
	font-size: .85rem;
	color: var(--df-muted);
	line-height: 1.6;
	margin: 0;
}

/* ════════════════════════════════════════════════════════════════════
   FOUNDER'S PROMISE
   ════════════════════════════════════════════════════════════════════ */
.hid-promise {
	position: relative;
	padding: 100px 0;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}
.hid-promise__bg {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(20,40,22,.96) 0%, rgba(46,125,50,.92) 100%),
		radial-gradient(ellipse at top right, rgba(244,180,0,.35), transparent 50%);
	z-index: -1;
}
.hid-promise::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0%, transparent 35%),
		radial-gradient(circle at 80% 70%, rgba(244,180,0,.15) 0%, transparent 40%);
	z-index: -1;
	pointer-events: none;
}
.hid-promise__inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 60px;
	align-items: center;
}
.hid-promise__img {
	position: relative;
}
.hid-promise__img img {
	width: 100%;
	height: auto;
	border-radius: var(--df-radius-lg);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
	border: 4px solid rgba(255,255,255,.08);
	display: block;
}
.hid-promise__seal {
	position: absolute;
	bottom: -22px; right: -22px;
	background: var(--df-accent);
	color: var(--df-dark);
	width: 110px; height: 110px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--df-font-head);
	font-weight: 700;
	text-align: center;
	font-size: .85rem;
	box-shadow: 0 14px 32px -8px rgba(0,0,0,.45);
	border: 4px solid #fff;
	transform: rotate(-8deg);
}
.hid-promise__seal svg { margin-bottom: 4px }
.hid-promise__seal span { line-height: 1.15 }
.hid-promise__copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.hid-promise__copy h2 {
	color: #fff;
	font-size: clamp(1.9rem, 3vw, 2.8rem);
	font-weight: 700;
	line-height: 1.25;
	font-family: 'Georgia', serif;
	font-style: italic;
	font-weight: 500;
	margin: 0;
}
.hid-promise__copy h2 em { color: var(--df-accent); font-style: italic }
.hid-promise__lead {
	color: rgba(255,255,255,.85);
	font-size: 1.05rem;
	line-height: 1.8;
}
.hid-promise__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 12px 0 20px;
	padding: 22px 0;
	border-top: 1px solid rgba(255,255,255,.18);
	border-bottom: 1px solid rgba(255,255,255,.18);
}
.hid-promise__stats > div { text-align: center }
.hid-promise__stats strong {
	display: block;
	font-family: var(--df-font-head);
	font-size: clamp(1.6rem, 2vw, 2rem);
	font-weight: 800;
	color: var(--df-accent);
	line-height: 1;
}
.hid-promise__stats span {
	display: block;
	font-size: .8rem;
	color: rgba(255,255,255,.7);
	margin-top: 6px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════
   BENEFITS — premium numbered cards
   ════════════════════════════════════════════════════════════════════ */
.hid-benefits {
	background: var(--df-white);
}
.hid-benefits__head {
	margin-bottom: 56px;
	text-align: center;
}
.hid-benefits__head h2 {
	font-size: clamp(2rem, 2.8vw, 2.6rem);
	margin-bottom: 10px;
	line-height: 1.2;
}
.hid-benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: benefit;
}
.hid-benefits__card {
	background: #fff;
	border-radius: var(--df-radius-md);
	padding: 36px 28px 32px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	border: 1px solid var(--df-border);
	transition: var(--df-transition);
	position: relative;
	overflow: hidden;
}
.hid-benefits__card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--df-primary), var(--df-accent));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.hid-benefits__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.18);
	border-color: transparent;
}
.hid-benefits__card:hover::before { transform: scaleX(1) }
.hid-benefits__num {
	display: inline-block;
	font-family: 'Georgia', serif;
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--df-accent);
	line-height: 1;
	margin-bottom: 14px;
	letter-spacing: -.02em;
	font-style: italic;
}
.hid-benefits__card h3 {
	font-size: 1.12rem;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--df-dark);
}
.hid-benefits__card p {
	font-size: .92rem;
	color: var(--df-muted);
	line-height: 1.7;
	margin: 0 0 18px;
}
.hid-benefits__rule {
	display: block;
	width: 40px;
	height: 2px;
	background: var(--df-primary);
	opacity: .25;
}

/* ════════════════════════════════════════════════════════════════════
   CRAFT + TRUST — premium polish
   ════════════════════════════════════════════════════════════════════ */
.hid-craft__copy h2,
.hid-trust__copy h2 {
	font-size: clamp(2rem, 3vw, 2.8rem);
	line-height: 1.15;
	font-weight: 700;
}
.hid-craft__copy p,
.hid-trust__copy p {
	font-size: 1rem;
	line-height: 1.8;
	color: #4b5563;
}
.hid-craft__img,
.hid-trust__img { position: relative }

.hid-craft__caption {
	position: absolute;
	bottom: 18px; left: 18px;
	background: #fff;
	color: var(--df-dark);
	font-family: var(--df-font-head);
	font-weight: 600;
	font-size: .85rem;
	padding: 8px 16px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 8px 18px -4px rgba(0,0,0,.2);
	z-index: 3;
}

.hid-craft__signature {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0;
}
.hid-craft__signature svg { width: 140px; height: 22px }
.hid-craft__signature small {
	font-style: italic;
	font-family: 'Georgia', serif;
	color: var(--df-muted);
	font-size: .92rem;
}

.hid-trust__badge {
	position: absolute;
	top: -18px; right: -18px;
	background: var(--df-primary);
	color: #fff;
	border-radius: 50%;
	width: 100px; height: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--df-font-head);
	font-weight: 800;
	text-align: center;
	box-shadow: 0 14px 28px -8px rgba(46,125,50,.45);
	border: 4px solid #fff;
	transform: rotate(8deg);
	z-index: 3;
}
.hid-trust__badge strong { font-size: 1.1rem; letter-spacing: .04em }
.hid-trust__badge span { font-size: .7rem; opacity: .9; margin-top: 2px; letter-spacing: .04em }

/* ── Section spacing harmonisation ────────────────────────────────── */
.hid-health,
.hid-benefits,
.hid-craft,
.hid-trust { padding: 96px 0 }
.hid-craft { padding-top: 80px }

/* ════════════════════════════════════════════════════════════════════
   PREMIUM RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.hid-health__inner,
	.hid-promise__inner { grid-template-columns: 1fr; gap: 48px }
	.hid-health__list { grid-template-columns: 1fr 1fr }
	.hid-benefits__grid { grid-template-columns: repeat(2, 1fr) }
	.hid-hero__img-wrap { min-height: 420px }
}
@media (max-width: 768px) {
	.hid-hero { padding: 64px 0 56px }
	.hid-hero__inner { grid-template-columns: 1fr; gap: 36px; text-align: center }
	.hid-hero__sub { margin-inline: auto }
	.hid-hero__actions,
	.hid-hero__rating,
	.hid-hero__trust { justify-content: center }
	.hid-hero__img-wrap { order: -1; max-width: 360px; margin-inline: auto; min-height: 360px }
	.hid-hero__title-hi { width: auto }
	.hid-hero__leaf--tl,
	.hid-hero__leaf--br { width: 90px; height: 90px }
	.hid-hero__floating-badge { width: 78px; height: 78px }
	.hid-hero__floating-badge strong { font-size: 1.05rem }
	.hid-hero__floating-badge span { font-size: .6rem }
	.hid-health__list { grid-template-columns: 1fr }
	.hid-promise { padding: 72px 0 }
	.hid-promise__stats { grid-template-columns: repeat(3, 1fr); gap: 8px }
	.hid-promise__stats strong { font-size: 1.4rem }
	.hid-promise__stats span { font-size: .68rem }
	.hid-benefits__grid { grid-template-columns: 1fr }
	.hid-craft__inner,
	.hid-trust__inner { grid-template-columns: 1fr; gap: 40px }
	.hid-trust__img { order: -1 }
	.hid-trust__badge { width: 76px; height: 76px; top: -14px; right: -14px }
	.hid-trust__badge strong { font-size: .85rem }
	.hid-trust__badge span { font-size: .58rem }
	.hid-promise__seal { width: 84px; height: 84px; bottom: -16px; right: -16px }
	.hid-img-frame::before,
	.hid-img-frame::after { width: 36px; height: 36px }
}
@media (max-width: 560px) {
	.hid-hero__title { font-size: 1.9rem }
	.hid-hero__title-hi { font-size: 1.15em }
	.hid-hero__btn { padding: 13px 22px; font-size: .92rem }
	.hid-promise__copy h2 { font-size: 1.55rem }
	.hid-health__copy h2,
	.hid-craft__copy h2,
	.hid-trust__copy h2 { font-size: 1.7rem }
}

/* ════════════════════════════════════════════════════════════════════
   PREMIUM PRODUCT CARDS — homepage shop strip
   ════════════════════════════════════════════════════════════════════ */
.hid-shop {
	background: linear-gradient(180deg, #fff 0%, #fffaee 100%) !important;
}
.hid-shop__head {
	margin-bottom: 52px;
}
.hid-shop__head h2 {
	font-size: clamp(2rem, 2.8vw, 2.6rem);
	font-weight: 700;
}
.hid-shop__head h2::after {
	content: '';
	display: block;
	width: 56px; height: 3px;
	background: linear-gradient(90deg, var(--df-primary), var(--df-accent));
	border-radius: 4px;
	margin: 14px auto 0;
}
.hid-shop__head p {
	font-family: 'Georgia', serif;
	font-style: italic;
	font-size: 1.05rem;
	color: var(--df-muted);
}

.hid-product-card {
	background: #fff;
	border: 1px solid var(--df-border);
	border-radius: var(--df-radius-md);
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	position: relative;
}
.hid-product-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--df-primary), var(--df-accent));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s cubic-bezier(.4,0,.2,1);
	z-index: 2;
}
.hid-product-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.18);
	border-color: transparent;
}
.hid-product-card:hover::before { transform: scaleX(1) }

.hid-product-card__img-link {
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, #fffaee 0%, #fff 100%);
}
.hid-product-card__badge {
	background: var(--df-accent);
	color: var(--df-dark);
	font-weight: 800;
	font-size: .72rem;
	padding: 4px 12px;
	box-shadow: 0 4px 10px -2px rgba(244,180,0,.5);
	letter-spacing: .04em;
}
.hid-product-card__body {
	padding: 20px 20px 22px;
	gap: 10px;
}
.hid-product-card__body h3 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}
.hid-product-card__price {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--df-primary-dk);
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.hid-product-card__actions {
	margin-top: 12px;
	gap: 10px;
}
.hid-product-card__actions a {
	border-radius: 999px !important;
	font-size: .82rem !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
	padding: 11px 14px !important;
	transition: var(--df-transition);
}
.hid-product-card__actions a.hid-btn-solid--sm {
	background: var(--df-primary) !important;
	border-color: var(--df-primary) !important;
	box-shadow: 0 6px 14px -4px rgba(46,125,50,.4);
}
.hid-product-card__actions a.hid-btn-solid--sm:hover {
	background: var(--df-primary-dk) !important;
	box-shadow: 0 10px 20px -4px rgba(46,125,50,.55);
}
.hid-product-card__actions a.hid-btn-outline--sm {
	border-color: var(--df-border) !important;
	color: var(--df-dark) !important;
	background: #fff !important;
}
.hid-product-card__actions a.hid-btn-outline--sm:hover {
	border-color: var(--df-primary) !important;
	color: var(--df-primary) !important;
	background: var(--df-primary-lt) !important;
}

/* ════════════════════════════════════════════════════════════════════
   MODERN KEYFRAMES — float, zoom, breathe, shine
   ════════════════════════════════════════════════════════════════════ */
@keyframes hid-float {
	0%, 100% { transform: translateY(0) }
	50%      { transform: translateY(-14px) }
}
@keyframes hid-float-soft {
	0%, 100% { transform: translateY(0) rotate(0deg) }
	50%      { transform: translateY(-8px) rotate(.5deg) }
}
@keyframes hid-breathe {
	0%, 100% { transform: scale(1) }
	50%      { transform: scale(1.04) }
}
@keyframes hid-spin-slow {
	from { transform: rotate(0deg) }
	to   { transform: rotate(360deg) }
}
@keyframes hid-shine {
	0%   { transform: translateX(-120%) skewX(-22deg) }
	100% { transform: translateX(220%)  skewX(-22deg) }
}
@keyframes hid-pulse-ring {
	0%   { transform: scale(.92); opacity: .55 }
	70%  { transform: scale(1.18); opacity: 0 }
	100% { transform: scale(1.18); opacity: 0 }
}
@keyframes hid-fade-up {
	from { opacity: 0; transform: translateY(30px) }
	to   { opacity: 1; transform: translateY(0) }
}
@media (prefers-reduced-motion: reduce) {
	.hid-hero__img-wrap img,
	.hid-hero__img-ring,
	.hid-hero__floating-badge,
	.hid-two__img,
	.hid-two__halo { animation: none !important }
}

/* ── Hero image now floats + rings pulse ──────────────────────────── */
.hid-hero__img-wrap img {
	animation: hid-float 6s ease-in-out infinite;
	will-change: transform;
}
.hid-hero__img-ring {
	animation: hid-spin-slow 28s linear infinite;
}
.hid-hero__floating-badge {
	animation: hid-float-soft 5s ease-in-out infinite;
}
.hid-hero__floating-badge--bottom {
	animation-delay: -2.5s;
}

/* ════════════════════════════════════════════════════════════════════
   TWO GHEES SHOWCASE — Cow + Buffalo · modern interactive cards
   ════════════════════════════════════════════════════════════════════ */
.hid-two {
	background:
		radial-gradient(ellipse at top right, rgba(244,180,0,.10), transparent 55%),
		radial-gradient(ellipse at bottom left, rgba(46,125,50,.08), transparent 55%),
		var(--df-cream);
	overflow: hidden;
	position: relative;
}
.hid-two__head {
	text-align: center;
	margin-bottom: 56px;
}
.hid-two__head h2 {
	font-size: clamp(2rem, 3vw, 2.8rem);
	line-height: 1.15;
	margin: 6px 0 14px;
}
.hid-two__head p {
	color: var(--df-muted);
	font-family: 'Georgia', serif;
	font-style: italic;
	font-size: 1.08rem;
}

.hid-two__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	perspective: 1400px;
}

.hid-two__card {
	--rx: 0deg;
	--ry: 0deg;
	--mx: 0px;
	--my: 0px;
	position: relative;
	background: #fff;
	border-radius: 28px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(0,0,0,.04),
		0 20px 40px -20px rgba(0,0,0,.15);
	transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
	transform-style: preserve-3d;
	transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
	will-change: transform;
	animation: hid-fade-up .8s cubic-bezier(.2,.7,.2,1) both;
	animation-delay: calc(var(--hid-i, 0) * .15s);
}
.hid-two__card:hover {
	box-shadow:
		0 1px 2px rgba(0,0,0,.04),
		0 50px 100px -30px rgba(0,0,0,.35);
}

/* ── Media area ───────────────────────────────────────────────────── */
.hid-two__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 28px 28px 0 0;
	background: linear-gradient(135deg, #fffaee 0%, #fff 60%, #f6fbf5 100%);
}
.hid-two__card--green .hid-two__media {
	background: linear-gradient(135deg, #f0f8f2 0%, #fff 60%, #fffaee 100%);
}

/* The product image — breathing + parallax shift on mouse */
.hid-two__img {
	position: absolute;
	inset: 6%;
	width: 88%;
	height: 88%;
	object-fit: contain;
	transform: translate(var(--mx), var(--my)) scale(1);
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
	z-index: 2;
	filter: drop-shadow(0 30px 30px rgba(0,0,0,.18));
	animation: hid-breathe 5s ease-in-out infinite;
}
.hid-two__card:hover .hid-two__img {
	transform: translate(var(--mx), var(--my)) scale(1.08);
}

/* Halo behind the jar (the "playing" backdrop) */
.hid-two__halo {
	position: absolute;
	width: 75%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	left: 50%; top: 50%;
	translate: -50% -50%;
	background: radial-gradient(circle,
		rgba(244,180,0,.45) 0%,
		rgba(244,180,0,.18) 40%,
		transparent 70%);
	filter: blur(20px);
	z-index: 1;
	animation: hid-pulse-ring 4s ease-out infinite;
}
.hid-two__card--green .hid-two__halo {
	background: radial-gradient(circle,
		rgba(46,125,50,.35) 0%,
		rgba(46,125,50,.15) 40%,
		transparent 70%);
}

/* Diagonal shine sweep on hover */
.hid-two__shine {
	position: absolute;
	top: 0; left: 0;
	width: 50%; height: 100%;
	background: linear-gradient(110deg,
		transparent 0%,
		rgba(255,255,255,.55) 50%,
		transparent 100%);
	transform: translateX(-120%) skewX(-22deg);
	z-index: 3;
	pointer-events: none;
}
.hid-two__card:hover .hid-two__shine {
	animation: hid-shine 1.2s cubic-bezier(.4,0,.2,1) forwards;
}

.hid-two__pill {
	position: absolute;
	top: 18px; left: 18px;
	background: var(--df-accent);
	color: var(--df-dark);
	font-family: var(--df-font-head);
	font-weight: 800;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	z-index: 4;
	box-shadow: 0 4px 12px -2px rgba(244,180,0,.5);
}
.hid-two__card--green .hid-two__pill {
	background: var(--df-primary);
	color: #fff;
	box-shadow: 0 4px 12px -2px rgba(46,125,50,.5);
}

.hid-two__img-link {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ── Body ─────────────────────────────────────────────────────────── */
.hid-two__body {
	padding: 28px 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hid-two__tag {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--df-primary-dk);
	background: var(--df-primary-lt);
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	align-self: flex-start;
}
.hid-two__card--gold .hid-two__tag {
	color: #8a6300;
	background: rgba(244,180,0,.18);
}
.hid-two__title {
	font-size: clamp(1.35rem, 1.8vw, 1.7rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	color: var(--df-dark);
}
.hid-two__title em {
	font-family: 'Georgia', serif;
	font-style: italic;
	font-weight: 500;
	color: var(--df-primary);
}
.hid-two__card--gold .hid-two__title em { color: #b87f00 }
.hid-two__sub-hi {
	font-family: 'Georgia', serif;
	font-size: 1rem;
	color: var(--df-muted);
	margin: -4px 0 0;
}
.hid-two__sub {
	color: #4b5563;
	font-size: .94rem;
	line-height: 1.6;
	margin: 0;
}
.hid-two__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 6px;
}
.hid-two__badges span {
	background: #fff;
	border: 1px solid var(--df-border);
	color: #4b5563;
	font-size: .72rem;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 999px;
}
.hid-two__buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 10px;
	padding-top: 16px;
	border-top: 1px dashed var(--df-border);
	flex-wrap: wrap;
}
.hid-two__price {
	font-family: var(--df-font-head);
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--df-primary-dk);
	line-height: 1;
}
.hid-two__price del {
	color: var(--df-muted);
	font-weight: 400;
	font-size: .9rem;
	margin-right: 6px;
}
.hid-two__price ins { text-decoration: none }
.hid-two__from {
	font-size: .75rem;
	color: var(--df-muted);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-right: 4px;
}
.hid-two__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.hid-two__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 999px;
	font-family: var(--df-font-head);
	font-weight: 700;
	font-size: .85rem;
	transition: var(--df-transition);
	border: 2px solid transparent;
	white-space: nowrap;
}
.hid-two__btn--solid {
	background: var(--df-primary);
	color: #fff !important;
	border-color: var(--df-primary);
	box-shadow: 0 6px 16px -4px rgba(46,125,50,.45);
}
.hid-two__btn--solid:hover {
	background: var(--df-primary-dk);
	border-color: var(--df-primary-dk);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -4px rgba(46,125,50,.55);
}
.hid-two__card--gold .hid-two__btn--solid {
	background: var(--df-accent);
	color: var(--df-dark) !important;
	border-color: var(--df-accent);
	box-shadow: 0 6px 16px -4px rgba(244,180,0,.55);
}
.hid-two__card--gold .hid-two__btn--solid:hover {
	background: var(--df-accent-dk);
	border-color: var(--df-accent-dk);
	box-shadow: 0 10px 20px -4px rgba(244,180,0,.65);
}
.hid-two__btn--ghost {
	background: transparent;
	color: var(--df-dark) !important;
	border-color: var(--df-border);
}
.hid-two__btn--ghost:hover {
	border-color: var(--df-dark);
	background: rgba(0,0,0,.04);
}
.hid-two__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--df-muted);
	font-size: .9rem;
	margin-top: 40px;
	flex-wrap: wrap;
}
.hid-two__foot svg { color: var(--df-primary); flex-shrink: 0 }

/* ── Hide the old hid-shop section if both products.php variants run ── */
.hid-shop { display: none }

/* ── Product card gentle zoom on hover for the home strip too ───── */
.hid-product-card__img-link img { transition: transform .5s cubic-bezier(.2,.7,.2,1) }
.hid-product-card:hover .hid-product-card__img-link img { transform: scale(1.08) }

/* ── Modern hover for craft + trust images ──────────────────────── */
.hid-craft__img img,
.hid-trust__img img,
.hid-health__img img,
.hid-promise__img img,
.hid-img-frame img {
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.hid-craft__img:hover img,
.hid-trust__img:hover img,
.hid-health__img:hover img,
.hid-promise__img:hover img {
	transform: scale(1.04);
}

/* ── Two Ghees responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
	.hid-two__grid { grid-template-columns: 1fr; gap: 28px }
}
@media (max-width: 560px) {
	.hid-two__media { aspect-ratio: 1 / 1 }
	.hid-two__body { padding: 22px 20px 24px }
	.hid-two__title { font-size: 1.3rem }
	.hid-two__buy { justify-content: center; text-align: center }
	.hid-two__actions { width: 100% }
	.hid-two__actions a { flex: 1; justify-content: center }
}

/* ════════════════════════════════════════════════════════════════════
   BRAND STORY VIDEO — Phone mockup, autoplay loop
   ════════════════════════════════════════════════════════════════════ */
@keyframes hid-story-glow {
	0%, 100% { opacity: .55; transform: scale(1) }
	50%      { opacity: .9;  transform: scale(1.06) }
}
@keyframes hid-story-orb {
	0%, 100% { transform: translate3d(0,0,0) }
	33%      { transform: translate3d(20px,-30px,0) }
	66%      { transform: translate3d(-20px,20px,0) }
}
@keyframes hid-live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(229,68,68,.7) }
	70%  { box-shadow: 0 0 0 8px rgba(229,68,68,0) }
	100% { box-shadow: 0 0 0 0 rgba(229,68,68,0) }
}
@keyframes hid-swipe {
	0%   { transform: translateY(0); opacity: 0 }
	30%  { opacity: 1 }
	100% { transform: translateY(-22px); opacity: 0 }
}
@keyframes hid-chip-float {
	0%, 100% { transform: translateY(0) }
	50%      { transform: translateY(-10px) }
}

.hid-story {
	position: relative;
	background:
		radial-gradient(ellipse at 80% 20%, rgba(244,180,0,.10), transparent 50%),
		linear-gradient(180deg, #0e1f10 0%, #14281a 50%, #0c1b0e 100%);
	color: #fff;
	padding: 110px 0;
	overflow: hidden;
	isolation: isolate;
}
.hid-story::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 25% 30%, rgba(255,255,255,.04) 0%, transparent 35%),
		radial-gradient(circle at 75% 75%, rgba(244,180,0,.10) 0%, transparent 40%);
	pointer-events: none;
	z-index: -1;
}
.hid-story__orb {
	position: absolute;
	width: 320px; height: 320px;
	border-radius: 50%;
	filter: blur(60px);
	z-index: -1;
	pointer-events: none;
	animation: hid-story-orb 14s ease-in-out infinite;
}
.hid-story__orb--a { background: rgba(244,180,0,.22); top: -80px; right: -60px }
.hid-story__orb--b { background: rgba(46,200,80,.20); bottom: -120px; left: -80px; animation-delay: -7s }

.hid-story__inner {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 60px;
	align-items: center;
}

/* ── Copy ─────────────────────────────────────────────────────────── */
.hid-story__copy h2 {
	color: #fff;
	font-size: clamp(2.2rem, 3.4vw, 3.4rem);
	line-height: 1.1;
	margin: 16px 0 22px;
}
.hid-story__copy h2 em {
	font-family: 'Georgia', serif;
	font-style: italic;
	font-weight: 500;
	color: var(--df-accent);
}
.hid-story__lead {
	color: rgba(255,255,255,.82);
	font-size: 1.08rem;
	line-height: 1.85;
	margin: 0 0 28px;
	max-width: 540px;
}
.hid-story__lead strong { color: #fff; font-weight: 700 }

.hid-story__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 18px;
}
.hid-story__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.hid-story__dot {
	width: 10px; height: 10px;
	background: var(--df-accent);
	border-radius: 50%;
	margin-top: 7px;
	flex-shrink: 0;
	box-shadow: 0 0 0 4px rgba(244,180,0,.15);
}
.hid-story__bullets strong {
	display: block;
	font-family: var(--df-font-head);
	font-size: 1rem;
	color: var(--df-accent);
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
}
.hid-story__bullets span {
	display: block;
	font-size: .9rem;
	color: rgba(255,255,255,.7);
	margin-top: 3px;
}

.hid-story__cta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.hid-story__mute {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: rgba(255,255,255,.85);
	border: 1.5px solid rgba(255,255,255,.18);
	border-radius: 999px;
	padding: 12px 18px;
	font-family: var(--df-font-head);
	font-weight: 600;
	font-size: .88rem;
	cursor: pointer;
	transition: var(--df-transition);
}
.hid-story__mute:hover {
	border-color: rgba(255,255,255,.5);
	color: #fff;
}
.hid-story__mute .hid-story__mute-off { display: none }
.hid-story__mute.is-on .hid-story__mute-on  { display: none }
.hid-story__mute.is-on .hid-story__mute-off { display: inline-block }
.hid-story__mute.is-on { border-color: var(--df-accent); color: var(--df-accent) }

/* ── Phone mockup ─────────────────────────────────────────────────── */
.hid-story__phone-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 0;
}
.hid-story__glow {
	position: absolute;
	width: 360px; height: 460px;
	background: radial-gradient(ellipse, rgba(244,180,0,.5) 0%, transparent 70%);
	filter: blur(60px);
	z-index: -1;
	animation: hid-story-glow 4s ease-in-out infinite;
}
.hid-story__phone {
	--rx: 0deg;
	--ry: 0deg;
	position: relative;
	width: 280px;
	aspect-ratio: 9 / 19;
	background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #0f0f0f 100%);
	border-radius: 42px;
	padding: 12px;
	box-shadow:
		inset 0 0 0 2px rgba(255,255,255,.08),
		0 0 0 2px #0a0a0a,
		0 40px 80px -20px rgba(0,0,0,.7),
		0 20px 40px -10px rgba(244,180,0,.18);
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
	transform-style: preserve-3d;
}

/* Side buttons */
.hid-story__btn {
	position: absolute;
	background: #0a0a0a;
	border-radius: 2px;
}
.hid-story__btn--silent  { left: -2px; top: 90px; width: 4px; height: 26px; border-radius: 2px 0 0 2px }
.hid-story__btn--vol-up  { left: -2px; top: 130px; width: 4px; height: 46px; border-radius: 2px 0 0 2px }
.hid-story__btn--vol-dn  { left: -2px; top: 190px; width: 4px; height: 46px; border-radius: 2px 0 0 2px }
.hid-story__btn--power   { right: -2px; top: 130px; width: 4px; height: 70px; border-radius: 0 2px 2px 0 }

/* Screen */
.hid-story__screen {
	position: relative;
	width: 100%;
	height: 100%;
	background: #000;
	border-radius: 32px;
	overflow: hidden;
}

/* Notch */
.hid-story__notch {
	position: absolute;
	top: 8px; left: 50%;
	transform: translateX(-50%);
	width: 96px; height: 26px;
	background: #000;
	border-radius: 14px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 0 18px;
}
.hid-story__notch-cam,
.hid-story__notch-sensor {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #1c1c1c;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.hid-story__notch-cam {
	background: radial-gradient(circle, #2a2a3a 0%, #050505 70%);
	box-shadow: inset 0 0 2px rgba(80,150,255,.3);
}

/* Video */
.hid-story__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #000;
}

/* Live badge */
.hid-story__live {
	position: absolute;
	top: 50px; left: 50%;
	transform: translateX(-50%);
	background: rgba(0,0,0,.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	font-family: var(--df-font-head);
	font-weight: 700;
	font-size: .65rem;
	letter-spacing: .12em;
	padding: 5px 11px 5px 22px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.1);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	z-index: 3;
}
.hid-story__live-pulse {
	position: absolute;
	left: 10px; top: 50%;
	transform: translateY(-50%);
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #e54444;
	animation: hid-live-pulse 1.6s ease-out infinite;
}

/* Caption strip */
.hid-story__caption {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	font-size: .7rem;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	z-index: 3;
}

/* Swipe hint */
.hid-story__swipe {
	position: absolute;
	bottom: -28px;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 30px;
	pointer-events: none;
}
.hid-story__swipe span {
	display: block;
	width: 100%;
	height: 100%;
	border-right: 2px solid var(--df-accent);
	border-bottom: 2px solid var(--df-accent);
	transform: rotate(45deg);
	animation: hid-swipe 1.8s ease-in-out infinite;
}

/* Floating chips around phone */
.hid-story__chip {
	position: absolute;
	background: #fff;
	color: var(--df-dark);
	font-family: var(--df-font-head);
	font-weight: 700;
	font-size: .8rem;
	padding: 8px 14px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	box-shadow: 0 14px 30px -10px rgba(0,0,0,.45);
	animation: hid-chip-float 4s ease-in-out infinite;
}
.hid-story__chip--a {
	top: 8%;
	left: -10px;
	color: var(--df-primary-dk);
}
.hid-story__chip--b {
	top: 38%;
	right: -22px;
	animation-delay: -1.5s;
}
.hid-story__chip--c {
	bottom: 8%;
	left: 6px;
	background: var(--df-accent);
	animation-delay: -3s;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.hid-story { padding: 80px 0 }
	.hid-story__inner { grid-template-columns: 1fr; gap: 60px }
	.hid-story__copy { text-align: center }
	.hid-story__copy h2 br { display: none }
	.hid-story__lead { margin-inline: auto }
	.hid-story__bullets {
		grid-template-columns: 1fr;
		max-width: 360px;
		margin: 0 auto 32px;
		text-align: left;
	}
	.hid-story__cta { justify-content: center }
	.hid-story__phone { width: 260px }
}
@media (max-width: 560px) {
	.hid-story__phone { width: 230px }
	.hid-story__bullets { grid-template-columns: 1fr; gap: 12px }
	.hid-story__chip--a { left: -4px; top: 4% }
	.hid-story__chip--b { right: -8px; top: 36% }
	.hid-story__chip--c { left: 4px; bottom: 4% }
	.hid-story__chip { font-size: .72rem; padding: 6px 11px }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE POLISH — comprehensive fixes for small screens
   Prevents horizontal overflow, tightens spacing, kills tilt on touch
   ════════════════════════════════════════════════════════════════════ */

/* ── Global overflow guards ──────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100% }
.df-home, main { overflow-x: clip }

/* Disable 3D tilt entirely on touch devices (looks broken without hover) */
@media (hover: none), (pointer: coarse) {
	.hid-two__card,
	.hid-story__phone {
		--rx: 0deg !important;
		--ry: 0deg !important;
		--mx: 0px !important;
		--my: 0px !important;
		transform: none !important;
	}
	.hid-two__card:hover,
	.hid-two__card:hover .hid-two__img,
	.hid-two__card:hover .hid-two__shine,
	.hid-craft__img:hover img,
	.hid-trust__img:hover img,
	.hid-health__img:hover img,
	.hid-promise__img:hover img,
	.hid-product-card:hover .hid-product-card__img-link img {
		transform: none !important;
		animation: none !important;
	}
}

/* ── 1024px / Tablet polish ──────────────────────────────────────── */
@media (max-width: 1024px) {
	:root { --df-page-padding: 64px }
	.df-container { padding-inline: 20px }
	.hid-hero { padding: 72px 0 60px }
	.hid-hero__title { font-size: clamp(1.9rem, 4.5vw, 2.8rem) }
}

/* ── 768px / Mobile breakpoint ───────────────────────────────────── */
@media (max-width: 768px) {
	:root { --df-page-padding: 48px }
	.df-container { padding-inline: 18px }

	/* Header */
	.df-header__inner { gap: 12px; height: 64px }
	.df-header__actions { gap: 6px }
	.df-header__icon,
	.df-header__cart { width: 38px; height: 38px }
	.df-nav { top: 64px }

	/* Hero */
	.hid-hero { padding: 48px 0 56px }
	.hid-hero__leaf--tl,
	.hid-hero__leaf--br { width: 80px; height: 80px; opacity: .5 }
	.hid-hero__title { font-size: clamp(1.7rem, 7vw, 2.4rem) }
	.hid-hero__title-hi { width: auto; max-width: 100%; word-break: keep-all }
	.hid-hero__title-hi::after { right: 0; left: 30%; margin-inline: auto }
	.hid-hero__sub { font-size: .98rem; line-height: 1.7 }
	.hid-hero__actions { gap: 8px }
	.hid-hero__btn { padding: 12px 22px; font-size: .9rem }
	.hid-hero__rating { gap: 8px; font-size: .85rem }
	.hid-hero__rating span { display: inline-block }
	.hid-hero__trust { gap: 6px }
	.hid-hero__trust span { font-size: .72rem; padding: 5px 10px }
	.hid-hero__floating-badge { width: 68px; height: 68px; top: 4%; right: 0 }
	.hid-hero__floating-badge strong { font-size: .95rem }
	.hid-hero__floating-badge span { font-size: .55rem }
	.hid-hero__floating-badge--bottom { bottom: 4%; left: 2% }
	.hid-hero__img-wrap { min-height: 320px; max-width: 340px }
	.hid-hero__img-wrap img { max-width: 320px }

	/* Story video */
	.hid-story { padding: 64px 0 }
	.hid-story__copy h2 { font-size: clamp(1.8rem, 6vw, 2.4rem); margin: 10px 0 16px }
	.hid-story__lead { font-size: .98rem; margin-bottom: 24px }
	.hid-story__bullets { margin-bottom: 24px }
	.hid-story__phone { width: 240px; border-radius: 38px; padding: 10px }
	.hid-story__screen { border-radius: 30px }
	.hid-story__notch { width: 82px; height: 22px }
	.hid-story__live { font-size: .58rem; padding: 4px 9px 4px 20px; top: 42px }
	.hid-story__caption { font-size: .62rem; padding: 5px 10px; bottom: 14px }
	.hid-story__cta { justify-content: center; gap: 10px }
	.hid-story__mute { padding: 11px 16px; font-size: .82rem }

	/* Two Ghees */
	.hid-two { padding: 64px 0 }
	.hid-two__head { margin-bottom: 36px }
	.hid-two__head h2 { font-size: 1.85rem }
	.hid-two__head p { font-size: .95rem }
	.hid-two__grid { gap: 24px }
	.hid-two__card { border-radius: 22px }
	.hid-two__media { border-radius: 22px 22px 0 0 }
	.hid-two__pill { top: 14px; left: 14px; font-size: .65rem; padding: 4px 11px }
	.hid-two__title { font-size: 1.25rem }
	.hid-two__sub-hi { font-size: .92rem }
	.hid-two__sub { font-size: .88rem }
	.hid-two__badges span { font-size: .68rem; padding: 4px 9px }
	.hid-two__price { font-size: 1.2rem }
	.hid-two__btn { padding: 10px 14px; font-size: .78rem }
	.hid-two__foot { font-size: .82rem; gap: 8px; margin-top: 28px }

	/* Health */
	.hid-health { padding: 64px 0 }
	.hid-health__copy h2 { font-size: 1.75rem }
	.hid-health__lead { font-size: .98rem }
	.hid-health__list { gap: 14px }
	.hid-health__icon { width: 38px; height: 38px; font-size: 1.1rem }
	.hid-health__list h3 { font-size: .92rem }
	.hid-health__list p { font-size: .82rem }
	.hid-health__deco { width: 80px; height: 80px; top: -20px; left: -20px }

	/* Benefits */
	.hid-benefits { padding: 64px 0 }
	.hid-benefits__head { margin-bottom: 36px }
	.hid-benefits__head h2 { font-size: 1.75rem }
	.hid-benefits__card { padding: 26px 22px 24px }
	.hid-benefits__num { font-size: 2.1rem }
	.hid-benefits__card h3 { font-size: 1rem }
	.hid-benefits__card p { font-size: .88rem }

	/* Craft + Trust */
	.hid-craft { padding: 60px 0 }
	.hid-trust { padding: 64px 0 }
	.hid-craft__copy h2,
	.hid-trust__copy h2 { font-size: 1.8rem }
	.hid-craft__copy p,
	.hid-trust__copy p { font-size: .98rem }
	.hid-craft__caption { font-size: .75rem; padding: 6px 13px; bottom: 12px; left: 12px }
	.hid-craft__signature svg { width: 110px }
	.hid-trust__list li { font-size: .9rem; padding: 9px 14px }
	.hid-trust__badge { width: 72px; height: 72px; top: -12px; right: -10px }
	.hid-trust__badge strong { font-size: .82rem }
	.hid-trust__badge span { font-size: .56rem }

	/* Promise */
	.hid-promise { padding: 64px 0 }
	.hid-promise__copy h2 { font-size: 1.5rem; line-height: 1.3 }
	.hid-promise__lead { font-size: .98rem }
	.hid-promise__stats { padding: 18px 0; gap: 8px }
	.hid-promise__stats strong { font-size: 1.35rem }
	.hid-promise__stats span { font-size: .65rem }
	.hid-promise__seal { width: 80px; height: 80px; bottom: -14px; right: -10px; font-size: .72rem; border-width: 3px }
	.hid-promise__seal svg { width: 28px; height: 28px }

	/* Img frame corners — smaller on mobile */
	.hid-img-frame::before,
	.hid-img-frame::after { width: 30px; height: 30px }

	/* Section labels */
	.hid-section-label { font-size: .68rem; padding: 4px 11px }
}

/* ── 560px / Phone breakpoint ────────────────────────────────────── */
@media (max-width: 560px) {
	:root { --df-page-padding: 40px }
	.df-container { padding-inline: 16px }

	/* Hero */
	.hid-hero { padding: 36px 0 48px }
	.hid-hero__title { font-size: 1.6rem }
	.hid-hero__title-en { font-size: .62em }
	.hid-hero__title-hi { font-size: 1.05em }
	.hid-hero__title-tag { font-size: .4em; margin-top: 12px }
	.hid-hero__eyebrow { font-size: .72rem; padding: 5px 12px 5px 10px }
	.hid-hero__sub { font-size: .92rem; margin-bottom: 22px }
	.hid-hero__btn { padding: 11px 18px; font-size: .85rem }
	.hid-hero__btn svg { width: 14px; height: 14px }
	.hid-hero__rating { flex-direction: column; gap: 4px; align-items: center; text-align: center }
	.hid-hero__trust span { font-size: .68rem; padding: 4px 9px; gap: 4px }
	.hid-hero__trust span::before { width: 5px; height: 5px }
	.hid-hero__img-wrap { min-height: 280px; max-width: 280px }
	.hid-hero__img-wrap img { max-width: 260px }
	.hid-hero__floating-badge { width: 58px; height: 58px; border-width: 2px }
	.hid-hero__floating-badge strong { font-size: .82rem }
	.hid-hero__floating-badge span { font-size: .5rem; letter-spacing: .04em }
	.hid-hero__floating-badge svg { width: 16px; height: 16px }
	.hid-hero__leaf--tl,
	.hid-hero__leaf--br { width: 60px; height: 60px }

	/* Story video */
	.hid-story { padding: 48px 0 }
	.hid-story__copy h2 { font-size: 1.6rem; margin: 8px 0 14px }
	.hid-story__lead { font-size: .92rem; margin-bottom: 20px }
	.hid-story__bullets strong { font-size: .9rem }
	.hid-story__bullets span { font-size: .82rem }
	.hid-story__phone { width: 220px; border-radius: 36px; padding: 9px }
	.hid-story__screen { border-radius: 28px }
	.hid-story__notch { width: 76px; height: 20px; top: 7px }
	.hid-story__notch-cam,
	.hid-story__notch-sensor { width: 6px; height: 6px }
	.hid-story__live { top: 36px; font-size: .54rem; padding: 3px 8px 3px 18px }
	.hid-story__live-pulse { width: 6px; height: 6px; left: 8px }
	.hid-story__caption { font-size: .58rem; bottom: 10px }
	.hid-story__btn--vol-up { top: 100px; height: 34px }
	.hid-story__btn--vol-dn { top: 144px; height: 34px }
	.hid-story__btn--silent { top: 70px; height: 20px }
	.hid-story__btn--power  { top: 104px; height: 52px }
	.hid-story__chip { font-size: .68rem; padding: 5px 10px }
	.hid-story__chip svg { width: 12px; height: 12px }
	.hid-story__chip--a { top: 2%; left: -2px }
	.hid-story__chip--b { right: -6px; top: 30% }
	.hid-story__chip--c { bottom: 2%; left: 0 }
	.hid-story__mute { padding: 10px 14px; font-size: .78rem }
	.hid-story__cta { gap: 8px }
	.hid-story__glow { width: 280px; height: 360px }

	/* Two Ghees */
	.hid-two { padding: 48px 0 }
	.hid-two__head h2 { font-size: 1.6rem }
	.hid-two__head p { font-size: .88rem }
	.hid-two__body { padding: 20px 18px 22px; gap: 10px }
	.hid-two__title { font-size: 1.2rem }
	.hid-two__pill { font-size: .6rem; padding: 4px 10px }
	.hid-two__badges { gap: 5px }
	.hid-two__badges span { font-size: .65rem; padding: 4px 8px }
	.hid-two__price { font-size: 1.1rem }
	.hid-two__btn { padding: 9px 12px; font-size: .74rem; gap: 6px }
	.hid-two__btn svg { width: 13px; height: 13px }
	.hid-two__foot { font-size: .78rem; flex-direction: column; gap: 6px; padding: 0 8px }

	/* Health */
	.hid-health { padding: 48px 0 }
	.hid-health__copy h2 { font-size: 1.55rem }
	.hid-health__lead { font-size: .92rem }
	.hid-health__deco { width: 60px; height: 60px; top: -14px; left: -14px }

	/* Benefits */
	.hid-benefits { padding: 48px 0 }
	.hid-benefits__head h2 { font-size: 1.55rem }
	.hid-benefits__card { padding: 22px 20px 22px }
	.hid-benefits__num { font-size: 1.9rem }
	.hid-benefits__card h3 { font-size: .96rem }
	.hid-benefits__card p { font-size: .85rem }

	/* Craft + Trust */
	.hid-craft { padding: 48px 0 }
	.hid-trust { padding: 48px 0 }
	.hid-craft__copy h2,
	.hid-trust__copy h2 { font-size: 1.55rem }
	.hid-craft__copy p,
	.hid-trust__copy p { font-size: .92rem }
	.hid-trust__list li { font-size: .85rem; padding: 8px 12px }
	.hid-trust__badge { width: 64px; height: 64px; top: -10px; right: -8px; border-width: 3px }
	.hid-trust__badge strong { font-size: .74rem }
	.hid-trust__badge span { font-size: .5rem }
	.hid-craft__caption { font-size: .7rem; padding: 5px 11px }

	/* Promise */
	.hid-promise { padding: 48px 0 }
	.hid-promise__copy h2 { font-size: 1.35rem }
	.hid-promise__lead { font-size: .92rem }
	.hid-promise__stats { padding: 14px 0 }
	.hid-promise__stats strong { font-size: 1.2rem }
	.hid-promise__stats span { font-size: .58rem; margin-top: 4px }
	.hid-promise__seal { width: 68px; height: 68px; bottom: -10px; right: -8px; font-size: .65rem; border-width: 3px }
	.hid-promise__seal svg { width: 22px; height: 22px }

	/* Image frame corners */
	.hid-img-frame::before,
	.hid-img-frame::after { width: 24px; height: 24px; border-width: 2px }
	.hid-img-frame::before { top: 10px; left: 10px }
	.hid-img-frame::after  { bottom: 10px; right: 10px }

	/* Section labels */
	.hid-section-label { font-size: .64rem; padding: 3px 10px; margin-bottom: 10px }
}

/* ── 400px / Very narrow phones ──────────────────────────────────── */
@media (max-width: 400px) {
	.df-container { padding-inline: 14px }
	.hid-hero__title { font-size: 1.45rem }
	.hid-hero__floating-badge { width: 52px; height: 52px }
	.hid-hero__floating-badge strong { font-size: .72rem }
	.hid-hero__img-wrap { min-height: 240px; max-width: 240px }
	.hid-hero__img-wrap img { max-width: 220px }
	.hid-two__buy { flex-direction: column; align-items: stretch; text-align: center }
	.hid-two__actions { width: 100% }
	.hid-two__actions a { flex: 1; justify-content: center }
	.hid-story__phone { width: 200px }
	.hid-story__bullets { gap: 10px }
	.hid-story__chip--a,
	.hid-story__chip--b,
	.hid-story__chip--c { font-size: .62rem; padding: 4px 8px }
}

/* ════════════════════════════════════════════════════════════════════
   HERO STAGE — Morphing organic blob + sparkles + rotating text ring
   Replaces the circular crop with a modern asymmetric showcase
   ════════════════════════════════════════════════════════════════════ */
@keyframes hid-blob-morph {
	0%, 100% { border-radius: 58% 42% 55% 45% / 50% 60% 40% 50% }
	25%      { border-radius: 45% 55% 62% 38% / 60% 45% 55% 40% }
	50%      { border-radius: 60% 40% 38% 62% / 45% 50% 50% 55% }
	75%      { border-radius: 42% 58% 50% 50% / 55% 38% 62% 45% }
}
@keyframes hid-blob-tilt {
	0%, 100% { transform: rotate(-2deg) translateY(0) }
	50%      { transform: rotate(2deg)  translateY(-10px) }
}
@keyframes hid-spark-twinkle {
	0%, 100% { transform: scale(.7) rotate(0deg); opacity: .4 }
	50%      { transform: scale(1.1) rotate(90deg); opacity: 1 }
}
@keyframes hid-ring-spin {
	from { transform: rotate(0deg) }
	to   { transform: rotate(360deg) }
}
@keyframes hid-sticker-wobble {
	0%, 100% { transform: rotate(-12deg) scale(1) }
	50%      { transform: rotate(-8deg)  scale(1.04) }
}
@keyframes hid-tag-pop {
	0%, 100% { transform: rotate(8deg) translateY(0) }
	50%      { transform: rotate(8deg) translateY(-6px) }
}

/* Hide the OLD circular image presentation — we replaced .hid-hero__img-wrap with .hid-hero__stage */
.hid-hero__img-wrap { display: none }

/* ── Stage container ─────────────────────────────────────────────── */
.hid-hero__stage {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 560px;
	width: 100%;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}

/* ── Soft gradient backdrop circle ───────────────────────────────── */
.hid-hero__backdrop {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 30%, #fff 0%, rgba(255,250,238,.8) 40%, transparent 75%),
		conic-gradient(from 210deg, rgba(244,180,0,.28), rgba(46,125,50,.18), rgba(244,180,0,.28));
	filter: blur(8px);
	z-index: 0;
}

/* ── Rotating dotted text ring ───────────────────────────────────── */
.hid-hero__dots {
	position: absolute;
	inset: -2%;
	width: 104%;
	height: 104%;
	z-index: 1;
	animation: hid-ring-spin 38s linear infinite;
}
.hid-hero__dots text {
	font-weight: 600;
	text-transform: uppercase;
}

/* ── Organic morphing blob with image ────────────────────────────── */
.hid-hero__blob {
	position: relative;
	z-index: 2;
	width: 78%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--df-cream);
	box-shadow:
		0 30px 60px -20px rgba(46,125,50,.4),
		0 12px 24px -8px rgba(0,0,0,.2),
		inset 0 0 0 6px rgba(255,255,255,.7),
		inset 0 0 0 8px rgba(244,180,0,.5);
	border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%;
	animation:
		hid-blob-morph 12s ease-in-out infinite,
		hid-blob-tilt 8s ease-in-out infinite;
	will-change: border-radius, transform;
}
.hid-hero__blob img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transform: scale(1.08);
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.hid-hero__blob:hover img { transform: scale(1.14) }

/* ── Sparkles ────────────────────────────────────────────────────── */
.hid-spark {
	position: absolute;
	z-index: 3;
	pointer-events: none;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
	animation: hid-spark-twinkle 3s ease-in-out infinite;
}
.hid-spark--1 { top: 4%;  left: 10%; width: 26px; height: 26px; animation-delay: 0s }
.hid-spark--2 { top: 18%; right: 4%; width: 18px; height: 18px; animation-delay: -.8s }
.hid-spark--3 { bottom: 24%; left: 2%; width: 22px; height: 22px; animation-delay: -1.6s }
.hid-spark--4 { bottom: 10%; right: 12%; width: 16px; height: 16px; animation-delay: -2.4s }

/* ── Sticker badge (top-right, tilted, with rotating text ring) ──── */
.hid-hero__sticker {
	position: absolute;
	top: 2%;
	right: -2%;
	width: 130px;
	height: 130px;
	z-index: 4;
	animation: hid-sticker-wobble 5s ease-in-out infinite;
	filter: drop-shadow(0 10px 22px rgba(0,0,0,.25));
}
.hid-hero__sticker svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: hid-ring-spin 18s linear infinite;
}
.hid-hero__sticker-core {
	position: absolute;
	inset: 22%;
	background: var(--df-accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-shadow:
		inset 0 0 0 3px #fff,
		0 6px 14px -2px rgba(244,180,0,.5);
}
.hid-hero__sticker-core strong {
	font-family: var(--df-font-head);
	font-weight: 800;
	font-size: .9rem;
	line-height: 1.1;
	color: var(--df-dark);
}

/* ── Price tag (bottom-left, tilted) ─────────────────────────────── */
.hid-hero__tag {
	position: absolute;
	bottom: 4%;
	left: -2%;
	z-index: 4;
	background: #fff;
	border-radius: 16px;
	padding: 10px 16px 11px;
	text-align: center;
	box-shadow:
		0 14px 30px -8px rgba(0,0,0,.22),
		inset 0 0 0 1.5px var(--df-primary-lt);
	border: 2px solid var(--df-primary);
	transform: rotate(8deg);
	animation: hid-tag-pop 4s ease-in-out infinite;
	min-width: 96px;
}
.hid-hero__tag small {
	display: block;
	font-size: .62rem;
	color: var(--df-muted);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 2px;
}
.hid-hero__tag strong {
	display: block;
	font-family: var(--df-font-head);
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--df-primary-dk);
	line-height: 1;
}
.hid-hero__tag span {
	display: block;
	font-size: .62rem;
	color: var(--df-muted);
	font-weight: 600;
	margin-top: 4px;
	letter-spacing: .02em;
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.hid-hero__blob,
	.hid-hero__dots,
	.hid-spark,
	.hid-hero__sticker,
	.hid-hero__sticker svg,
	.hid-hero__tag { animation: none !important }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.hid-hero__inner { grid-template-columns: 1fr; gap: 28px }
	.hid-hero__stage { order: -1; max-width: 360px; aspect-ratio: 1 / 1; margin-bottom: 4px }
	.hid-hero__copy { text-align: center }
	.hid-hero__sticker { width: 90px; height: 90px; top: 0; right: 0 }
	.hid-hero__sticker-core strong { font-size: .7rem }
	.hid-hero__sticker svg text { font-size: 10px; letter-spacing: 2px }
	.hid-hero__tag { padding: 8px 13px 9px; min-width: 84px; left: 0; bottom: 2% }
	.hid-hero__tag strong { font-size: 1.2rem }
	.hid-hero__tag small,
	.hid-hero__tag span { font-size: .56rem }
	.hid-spark--1 { width: 20px; height: 20px }
	.hid-spark--2 { width: 14px; height: 14px }
	.hid-spark--3 { width: 18px; height: 18px }
	.hid-spark--4 { width: 12px; height: 12px }
	.hid-hero__dots text { font-size: 8px; letter-spacing: 4px }
}
@media (max-width: 560px) {
	.hid-hero__stage { max-width: 300px }
	.hid-hero__sticker { width: 78px; height: 78px }
	.hid-hero__sticker-core strong { font-size: .62rem }
	.hid-hero__sticker svg text { font-size: 9px; letter-spacing: 1.6px }
	.hid-hero__tag { min-width: 74px; padding: 7px 11px 8px; left: -2% }
	.hid-hero__tag strong { font-size: 1.05rem }
	.hid-hero__tag small,
	.hid-hero__tag span { font-size: .5rem }
}
@media (max-width: 400px) {
	.hid-hero__stage { max-width: 260px }
}