/* ═══════════════════════════════════════════════════════════════════════════
   HOREKA QUICK OS — FESTIVE SKIN (Diwali)
   ---------------------------------------------------------------------------
   Loaded by includes/festive-theme.php only while the season is active. Every
   rule is scoped under `body.hq-festive`, so an inactive season cannot leak.

   Layout
   ------
     header        frame artwork, anchored at the image's top   (sticky, green)
     .hqf-band     frame artwork continued, offset by the header height
                     └ search · collection pills · promo strip
     .hqf-hero     full-bleed photograph + scrim + copy          (own component)
     .hqf-wave     curve out of the banner
     cream body    trust · coupon · the rest of the page

   Two earlier attempts failed; both fixes are load-bearing.

   1. The band was an absolutely-positioned ::before with a GUESSED height. The
      frame's empty green centre stretched across it and it painted over the
      search field. It is now a real wrapper whose height follows its content,
      so neither failure is possible.

   2. The hero was the native .hqm-hero re-skinned. That component is a light
      54/46 flex card with its image absolutely positioned in its own column —
      a different thing from a full-bleed photo with copy on a scrim. Forcing
      one into the other clipped the headline and hid the title. The seasonal
      hero is now its own markup (hq_festive_render_hero) and the native
      carousel is skipped entirely while it is on.
   ═══════════════════════════════════════════════════════════════════════════ */

body.hq-festive {
	--hqf-green:      #1B5E24;
	--hqf-green-dp:   #0C3A16;
	--hqf-gold:       #F2B134;
	--hqf-gold-lt:    #FFD98A;
	--hqf-gold-dp:    #A8720C;
	--hqf-cream:      #FDF6E8;
	--hqf-ink:        #16223F;
	--hqf-navy:       #16255A;

	/* Height of the sticky header. The band offsets the frame artwork by this
	   much so the marigold columns run on across the seam. */
	--hqf-head-h:     108px;

	/* Rendered height of the frame artwork.
	   Measured: its decoration occupies the top ~30% and bottom ~20%; the middle
	   40-75% is empty green. At the old `100% auto` the image stood 178vw tall,
	   so the decorated top 30% ran out after 53vw — barely past the header — and
	   the band was left showing the bare green middle. At 220vw the decoration
	   covers ~66vw, i.e. the header AND the whole band. The artwork then runs
	   ~124vw wide and crops at the sides, which is what the design shows. */
	--hqf-art-h:      220vw;

	background: var(--hqf-cream) !important;
}

/* ────────────────────────────────────────────────────────────────── Header ── */

body.hq-festive .hqm-header.hqm-header-default {
	background-color: var(--hqf-green) !important;
	background-image: var(--hqf-frame) !important;
	background-size: auto var(--hqf-art-h) !important;
	background-position: center top !important;
	background-repeat: no-repeat !important;
	box-shadow: none !important;
}

body.hq-festive .hqm-row2 {
	margin: 0 clamp(10px, 3vw, 14px) clamp(8px, 2.4vw, 12px) !important;
	padding: clamp(8px, 2.4vw, 11px) clamp(12px, 3.4vw, 15px) !important;
	border-radius: 14px !important;
	background: #fff !important;
	box-shadow: 0 3px 12px rgba(6, 34, 14, .26) !important;
}

body.hq-festive .hqm-menu-btn,
body.hq-festive .hqm-icon-btn {
	color: var(--hqf-gold-lt) !important;
}

/* "Showing near" above the pincode, rather than one cramped line. */
body.hq-festive .hqm-loc-text {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	font-size: clamp(11px, 3.2vw, 13px) !important;
	line-height: 1.2 !important;
	color: #6B7280 !important;
}

body.hq-festive .hqm-loc-text strong {
	font-size: clamp(14px, 4.2vw, 17px);
	font-weight: 800;
	color: #0F172A;
}

body.hq-festive .hqm-change-btn {
	font-size: clamp(13px, 3.8vw, 15px) !important;
	font-weight: 700 !important;
	color: #1D4ED8 !important;
}

.hqf-badge {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 1;
	min-width: 0;
}

.hqf-badge-ico {
	display: inline-flex;
	width: clamp(22px, 6.4vw, 28px);
	height: clamp(22px, 6.4vw, 28px);
	flex-shrink: 0;
	color: var(--hqf-gold);
	filter: drop-shadow(0 0 7px rgba(242, 177, 52, .6));
}

.hqf-badge-ico svg { width: 100%; height: 100%; }

.hqf-badge-txt {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(11px, 3.2vw, 14px);
	font-weight: 700;
	line-height: 1.16;
	color: var(--hqf-gold-lt);
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
	white-space: nowrap;
}

@media (max-width: 340px) {
	.hqf-badge-txt { display: none; }
}

/* ──────────────────────────────────────────────────────────── Festive band ── */
/* A real element: its height is whatever its children need. See note 1 above. */

.hqf-band {
	position: relative;
	z-index: 0;
	padding-bottom: clamp(6px, 2vw, 10px);
	background-color: var(--hqf-green-dp);
	background-image: var(--hqf-frame);
	background-size: auto var(--hqf-art-h);
	background-position: center calc(-1 * var(--hqf-head-h));
	background-repeat: no-repeat;
}

.hqf-band > * { position: relative; z-index: 1; }

/* ────────────────────────────────────────────────────────────────── Search ── */

body.hq-festive .hq-search-wrapper {
	padding: clamp(6px, 2vw, 10px) clamp(10px, 3vw, 14px) clamp(8px, 2.4vw, 12px) !important;
	background: transparent !important;
}

body.hq-festive .hq-search-bar {
	border: none !important;
	border-radius: 999px !important;
	background: #fff !important;
	box-shadow: 0 4px 16px rgba(6, 34, 14, .3) !important;
	padding: clamp(5px, 1.6vw, 7px) clamp(14px, 4vw, 18px) clamp(5px, 1.6vw, 7px) clamp(5px, 1.6vw, 7px) !important;
	gap: clamp(8px, 2.6vw, 12px) !important;
}

body.hq-festive .hq-search-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: clamp(36px, 10.4vw, 46px);
	height: clamp(36px, 10.4vw, 46px);
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--hqf-gold-lt), var(--hqf-gold));
	font-size: clamp(16px, 4.6vw, 20px) !important;
	line-height: 1;
}

body.hq-festive .hq-search-input {
	font-size: clamp(14px, 4.1vw, 16px) !important;
	color: #6B7280 !important;
	background: transparent !important;
}

/* ─────────────────────────────────────────────────────── Collection pills ── */
/* hq_render_custom_quick_filters() writes its colours as INLINE styles, so
   these need !important to land. */

body.hq-festive .hq-filter-section {
	padding: 0 !important;
	background: transparent !important;
}

body.hq-festive .hq-filter-section .hq-brand-scroll {
	gap: clamp(7px, 2.2vw, 11px) !important;
	padding: 0 clamp(10px, 3vw, 14px) clamp(6px, 1.8vw, 9px) !important;
}

body.hq-festive .hq-brand-pill.hq-filter-item {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	min-height: 0 !important;
	padding: clamp(9px, 2.8vw, 13px) clamp(14px, 4.2vw, 20px) !important;
	border: 1.5px solid #FFE1A8 !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--hqf-ink) !important;
	box-shadow: 0 3px 11px rgba(6, 34, 14, .2) !important;
	font-family: 'Outfit', 'Inter', sans-serif !important;
	font-size: clamp(12.5px, 3.7vw, 15px) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	white-space: nowrap;
}

body.hq-festive .hq-brand-pill.hq-filter-item.active {
	border-color: var(--hqf-gold) !important;
	box-shadow: 0 3px 11px rgba(168, 114, 12, .38) !important;
}

body.hq-festive .hqf-band .hqm-promo-strip,
body.hq-festive .hqf-band .hqm-promo-item {
	background: transparent !important;
	color: rgba(255, 244, 218, .9) !important;
}

/* ─────────────────────────────────────────────────────────── Seasonal hero ── */

.hqf-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(392px, 112vw, 520px);
	overflow: hidden;
	/* Warm base, not dark green. The supplied photo is a soft vignette that
	   fades to TRANSPARENT at its edges, so whatever sits behind it shows
	   through; against green that read as a murky olive wash. These amber tones
	   match the photo's own ambient light, so the fade is invisible. */
	background: radial-gradient(132% 104% at 64% 46%, #7A4E1E 0%, #3E2710 46%, #1E1309 100%);
	isolation: isolate;
}

/* A background rather than an <img>, so `cover` can crop the photo to the
   banner's aspect without the markup caring about the source's shape.
   The URL arrives as --hqf-photo from the markup: see the note in
   hq_festive_render_hero() about the theme's lazy-loader. */
.hqf-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--hqf-photo);
	background-size: auto 116%;
	background-position: right -8% center;
	background-repeat: no-repeat;
}

/* Scrim: heavy on the left where the copy sits, light at the top so it meets
   the band cleanly. */
.hqf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Heavy only where the copy sits. Past ~58% the photograph is left alone —
	   the previous curve dimmed the whole banner, including the product. */
	background:
		linear-gradient(94deg,
			rgba(20, 12, 4, .93) 0%,
			rgba(20, 12, 4, .90) 30%,
			rgba(20, 12, 4, .62) 46%,
			rgba(20, 12, 4, .20) 58%,
			rgba(20, 12, 4, 0) 70%),
		linear-gradient(180deg,
			rgba(20, 12, 4, .40) 0%,
			rgba(20, 12, 4, 0) 18%);
}

.hqf-hero-body {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 74%;
	padding: clamp(14px, 4.2vw, 20px) clamp(12px, 3.6vw, 18px) clamp(18px, 5vw, 26px);
}

.hqf-hero-eyebrow {
	margin: 0 0 clamp(8px, 2.4vw, 12px);
	font-family: 'Outfit', 'Inter', sans-serif;
	font-size: clamp(10px, 3vw, 12.5px);
	font-weight: 700;
	letter-spacing: .085em;
	line-height: 1.42;
	text-transform: uppercase;
	color: rgba(255, 249, 237, .95);
}

/* The two lines are separate spans, coloured individually. A background-clip
   gradient has to guess where the line break falls; this knows. */
.hqf-hero-title {
	margin: 0 0 clamp(8px, 2.4vw, 12px);
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(40px, 14.2vw, 62px);
	font-weight: 800;
	line-height: .99;
	letter-spacing: -.012em;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

.hqf-tl { display: block; }
.hqf-tl-gold  { color: var(--hqf-gold); }
.hqf-tl-cream { color: #FFF6E5; }

.hqf-hero-text {
	margin: 0 0 clamp(12px, 3.4vw, 17px);
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(15px, 4.8vw, 20px);
	font-weight: 500;
	line-height: 1.28;
	color: #FFF6E8;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.hqf-note {
	position: absolute;
	top: clamp(12px, 3.6vw, 18px);
	right: clamp(10px, 3vw, 16px);
	z-index: 2;
	margin: 0;
	max-width: 30%;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(11px, 3.3vw, 14.5px);
	font-weight: 600;
	line-height: 1.34;
	color: #43280C;
	text-shadow: 0 1px 7px rgba(255, 246, 224, .75), 0 0 16px rgba(255, 246, 224, .55);
}

.hqf-note-rule {
	display: block;
	margin-top: 8px;
	height: 1.5px;
	width: 72%;
	background: linear-gradient(90deg, var(--hqf-gold-dp), rgba(168, 114, 12, 0));
}

.hqf-feats {
	display: flex;
	gap: clamp(5px, 2.2vw, 13px);
	list-style: none;
	margin: 0 0 clamp(12px, 3.6vw, 18px);
	padding: 0;
}

.hqf-feat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	text-align: center;
}

.hqf-feat-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(36px, 10.6vw, 48px);
	height: clamp(36px, 10.6vw, 48px);
	border-radius: 50%;
	border: 1.5px solid rgba(242, 177, 52, .85);
	background: rgba(255, 233, 186, .07);
	color: var(--hqf-gold-lt);
}

.hqf-feat-ico svg { width: 52%; height: 52%; }

.hqf-feat-lbl {
	font-family: 'Outfit', 'Inter', sans-serif;
	font-size: clamp(9.5px, 2.85vw, 12px);
	font-weight: 600;
	line-height: 1.24;
	color: #FFF4E2;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.hqf-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3.6vw, 16px) clamp(20px, 5.6vw, 28px);
	border-radius: 14px;
	background: linear-gradient(145deg, var(--hqf-gold-lt), var(--hqf-gold));
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	font-family: 'Outfit', 'Inter', sans-serif;
	font-size: clamp(14px, 4.3vw, 18px);
	font-weight: 800;
	line-height: 1.1;
	color: #1B2440;
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease;
}

.hqf-cta:active {
	transform: translateY(1px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}

/* ────────────────────────────────────────────────────── Curved band close ── */

.hqf-wave {
	position: relative;
	z-index: 2;
	display: block;
	line-height: 0;
	margin-top: -1px;
	color: var(--hqf-cream);
}

.hqf-wave svg {
	display: block;
	width: 100%;
	height: clamp(28px, 9vw, 44px);
}

/* ───────────────────────────────────────────────────────── Trust · coupon ── */

body.hq-festive .hqm-trust {
	position: relative;
	border: none !important;
	border-radius: 0 !important;
	padding: clamp(10px, 3vw, 16px) clamp(6px, 2vw, 10px) clamp(14px, 4vw, 20px) !important;
	background: var(--hqf-cream) !important;
}

/* Mandala watermarks at the cream edges. Drawn as an inline SVG rather than
   reusing the frame artwork: that art is gold-on-green, which reads as a dirty
   smudge over cream. */
body.hq-festive .hqm-trust::before,
body.hq-festive .hqm-trust::after {
	content: "";
	position: absolute;
	bottom: -16%;
	width: clamp(88px, 26vw, 130px);
	aspect-ratio: 1;
	z-index: 0;
	opacity: .5;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23A8720C' stroke-width='1.4' opacity='0.5'%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3Ccircle cx='60' cy='60' r='27'/%3E%3Ccircle cx='60' cy='60' r='41'/%3E%3Ccircle cx='60' cy='60' r='54'/%3E%3Cpath d='M60 60 L112.0 60.0'/%3E%3Cpath d='M60 60 L110.2 73.5'/%3E%3Cpath d='M60 60 L105.0 86.0'/%3E%3Cpath d='M60 60 L96.8 96.8'/%3E%3Cpath d='M60 60 L86.0 105.0'/%3E%3Cpath d='M60 60 L73.5 110.2'/%3E%3Cpath d='M60 60 L60.0 112.0'/%3E%3Cpath d='M60 60 L46.5 110.2'/%3E%3Cpath d='M60 60 L34.0 105.0'/%3E%3Cpath d='M60 60 L23.2 96.8'/%3E%3Cpath d='M60 60 L15.0 86.0'/%3E%3Cpath d='M60 60 L9.8 73.5'/%3E%3Cpath d='M60 60 L8.0 60.0'/%3E%3Cpath d='M60 60 L9.8 46.5'/%3E%3Cpath d='M60 60 L15.0 34.0'/%3E%3Cpath d='M60 60 L23.2 23.2'/%3E%3Cpath d='M60 60 L34.0 15.0'/%3E%3Cpath d='M60 60 L46.5 9.8'/%3E%3Cpath d='M60 60 L60.0 8.0'/%3E%3Cpath d='M60 60 L73.5 9.8'/%3E%3Cpath d='M60 60 L86.0 15.0'/%3E%3Cpath d='M60 60 L96.8 23.2'/%3E%3Cpath d='M60 60 L105.0 34.0'/%3E%3Cpath d='M60 60 L110.2 46.5'/%3E%3Ccircle cx='94.0' cy='60.0' r='5'/%3E%3Ccircle cx='89.4' cy='77.0' r='5'/%3E%3Ccircle cx='77.0' cy='89.4' r='5'/%3E%3Ccircle cx='60.0' cy='94.0' r='5'/%3E%3Ccircle cx='43.0' cy='89.4' r='5'/%3E%3Ccircle cx='30.6' cy='77.0' r='5'/%3E%3Ccircle cx='26.0' cy='60.0' r='5'/%3E%3Ccircle cx='30.6' cy='43.0' r='5'/%3E%3Ccircle cx='43.0' cy='30.6' r='5'/%3E%3Ccircle cx='60.0' cy='26.0' r='5'/%3E%3Ccircle cx='77.0' cy='30.6' r='5'/%3E%3Ccircle cx='89.4' cy='43.0' r='5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

body.hq-festive .hqm-trust::before { left:  -9%; }
body.hq-festive .hqm-trust::after  { right: -9%; }

body.hq-festive .hqm-trust-item {
	position: relative;
	z-index: 1;
}

body.hq-festive .hqm-trust-ico {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: clamp(38px, 11vw, 48px) !important;
	height: clamp(38px, 11vw, 48px) !important;
	border-radius: 50% !important;
	background: #E9EFFA !important;
	color: #1B2A4A !important;
	margin-bottom: clamp(6px, 1.8vw, 9px) !important;
}

body.hq-festive .hqm-trust-ico svg { width: 46% !important; height: 46% !important; }

body.hq-festive .hqm-trust-t {
	font-family: 'Outfit', 'Inter', sans-serif !important;
	font-weight: 800 !important;
	color: var(--hqf-ink) !important;
}

body.hq-festive .hqm-trust-s { color: #7A8394 !important; }

body.hq-festive .hqm-coupon {
	margin: clamp(2px, 1vw, 6px) clamp(10px, 3vw, 14px) clamp(14px, 4vw, 20px) !important;
	padding: clamp(12px, 3.6vw, 17px) clamp(12px, 3.4vw, 16px) !important;
	border: 1.5px dashed var(--hqf-gold) !important;
	border-radius: 18px !important;
	background: linear-gradient(180deg, #FFFCF4, var(--hqf-cream)) !important;
	box-shadow: none !important;
}

body.hq-festive .hqm-coupon-ico {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: clamp(44px, 12.6vw, 56px) !important;
	height: clamp(44px, 12.6vw, 56px) !important;
	border-radius: 14px !important;
	background: linear-gradient(145deg, var(--hqf-gold-lt), var(--hqf-gold)) !important;
	color: #2A1B06 !important;
	flex-shrink: 0;
}

body.hq-festive .hqm-coupon-ico svg { width: 46% !important; height: 46% !important; }

body.hq-festive .hqm-coupon-head {
	font-family: 'Outfit', 'Inter', sans-serif !important;
	font-size: clamp(16px, 4.9vw, 21px) !important;
	font-weight: 800 !important;
	color: var(--hqf-ink) !important;
}

body.hq-festive .hqm-coupon-sub {
	font-size: clamp(11.5px, 3.4vw, 14px) !important;
	color: #7A8394 !important;
}

body.hq-festive .hqm-coupon-code {
	padding: clamp(12px, 3.6vw, 17px) clamp(16px, 4.6vw, 24px) !important;
	border-radius: 13px !important;
	background: var(--hqf-navy) !important;
	color: #fff !important;
	font-family: 'Outfit', 'Inter', sans-serif !important;
	font-size: clamp(15px, 4.5vw, 20px) !important;
	font-weight: 800 !important;
}

body.hq-festive .hqm-sec-title::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 12px;
	margin-right: 7px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--hqf-gold), var(--hqf-gold-dp));
	vertical-align: -1px;
}

/* ───────────────────────────────────────────────────────────── Breakpoints ── */

@media (max-width: 360px) {
	body.hq-festive { --hqf-head-h: 100px; }
	.hqf-hero-body  { max-width: 82%; }
	.hqf-note       { display: none; }
}

@media (min-width: 481px) {
	body.hq-festive { --hqf-head-h: 116px; }
}

/* Mobile-only skin: desktop keeps its existing layout untouched. */
@media (min-width: 1024px) {
	.hqf-badge,
	.hqf-hero,
	.hqf-wave { display: none !important; }

	.hqf-band { background: none !important; padding-bottom: 0; }

	body.hq-festive .hqm-header.hqm-header-default {
		background-image: none !important;
		background-color: #2c8515 !important;
	}
}

/* ──────────────────────────────────────────────────────────── Preferences ── */

@media (prefers-reduced-motion: reduce) {
	.hqf-cta { transition: none; }
}

@media (forced-colors: active) {
	.hqf-band,
	body.hq-festive .hqm-header.hqm-header-default { background-image: none !important; }
	.hqf-hero::after { background: none; }
}