/* SHAHAZ Grocery Market — fresh, warm, everyday marketplace identity. */
.shz-grocery-world{--gm-green:#169447;--gm-lime:#74bd38;--gm-orange:#f58a18;--gm-red:#e84b4b;--gm-yellow:#f3c94b;--gm-plum:#8d286d;--gm-ink:#27302a;--gm-muted:#727b73;--gm-paper:#fffefa;--gm-line:#e5e7df;background:linear-gradient(180deg,#fffdf6 0%,#f8fff6 48%,#fffaf2 100%);color:var(--gm-ink);min-height:100vh;overflow:hidden}
.shz-grocery-world *{box-sizing:border-box}.shz-grocery-world a{text-decoration:none;color:inherit}
@media(prefers-reduced-motion:no-preference){@keyframes groceryIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}}
/* ZIP-521: the old product panel / grid rules were removed — the part under the categories is
 * assets/css/shahaz-grocery-landing.css now. */
.shz-grocery-world{min-height:0}

/* ZIP-216 — Product-card mobile overflow safety. Keep the existing world colors/design. */

.shz-grocery-banner__bg{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
	object-position:center top; /* the headline of a wide banner sits at the top: a very wide desktop banner trims the bottom */
	display:block;
	z-index:0;
}

.shz-grocery-banner__text{
	position:relative;
	z-index:2;
	width:100%;
	max-width:100%;
	padding:0 18px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	overflow:hidden;
}
.shz-grocery-banner__line{
	display:block;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/* --- Base typography presets (admin-selectable "Default Font / Style" —
 * used as the fallback for any text that has no per-selection font
 * override; see the shz-gb-f-* span presets further below for the actual
 * per-word/per-phrase override system). All 8 are built from the 3 font
 * families already loaded site-wide (Inter, Playfair Display, Dancing
 * Script) — no new/unreliable font dependency added. --- */
.shz-grocery-banner__text{
	font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
	font-weight:800;
	font-size:clamp(18px,4.2vw,30px);
	line-height:1.15;
	letter-spacing:-.01em;
}
.shz-grocery-banner--luxury_sans .shz-grocery-banner__text{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:500;letter-spacing:0}
.shz-grocery-banner--bold_modern .shz-grocery-banner__text{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:800;letter-spacing:-.01em}
.shz-grocery-banner--elegant_script .shz-grocery-banner__text{font-family:'Dancing Script',cursive;font-weight:700;font-size:clamp(22px,5vw,38px)}
.shz-grocery-banner--luxury_serif .shz-grocery-banner__text,
.shz-grocery-banner--classic_luxury .shz-grocery-banner__text{font-family:'Playfair Display',Georgia,serif;font-weight:700;letter-spacing:0}
.shz-grocery-banner--fashion_editorial .shz-grocery-banner__text{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-style:italic;letter-spacing:.03em}
.shz-grocery-banner--handwritten .shz-grocery-banner__text{font-family:'Dancing Script',cursive;font-weight:600;font-size:clamp(22px,5vw,38px)}
.shz-grocery-banner--premium_display .shz-grocery-banner__text{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:clamp(15px,3.6vw,25px)}

/* --- Per-selection rich-text overrides (span-level; see
 * shahaz_grocery_banner_richtext_allowed_classes() — this is the exact,
 * complete, matching list the sanitizer permits, nothing more). Sizes are
 * relative (em) so they scale safely off whichever base font-size above
 * is active, on every breakpoint, without a fixed px value. --- */
.shz-gb-c-magenta{color:#f50087}
.shz-gb-c-gold{color:#c99725}
.shz-gb-c-white{color:#ffffff}
.shz-gb-c-red{color:#c8102e}
.shz-gb-c-cream{color:#fff3df}
.shz-gb-c-ink{color:#241922}

.shz-gb-s-sm{font-size:.7em}
.shz-gb-s-md{font-size:1em}
.shz-gb-s-lg{font-size:1.32em}
.shz-gb-s-xl{font-size:1.65em}

/* Per-selection font-weight controls. These are independent of color/size/font,
 * so each selected word or phrase can be thin, regular, semibold, bold or extra-bold. */
.shz-gb-w-light{font-weight:300}
.shz-gb-w-regular{font-weight:400}
.shz-gb-w-semibold{font-weight:600}
.shz-gb-w-bold{font-weight:700}
.shz-gb-w-extrabold{font-weight:800}

.shz-gb-f-luxury_sans{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:500;letter-spacing:0;font-style:normal}
.shz-gb-f-bold_modern{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:800;letter-spacing:-.01em;font-style:normal}
.shz-gb-f-elegant_script{font-family:'Dancing Script',cursive;font-weight:700;font-style:normal}
.shz-gb-f-luxury_serif{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-style:normal;letter-spacing:0}
.shz-gb-f-fashion_editorial{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-style:italic;letter-spacing:.03em}
.shz-gb-f-handwritten{font-family:'Dancing Script',cursive;font-weight:600;font-style:normal}
.shz-gb-f-premium_display{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-style:normal}
.shz-gb-f-classic_luxury{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-style:normal;letter-spacing:0}

.shz-gb-w-bold{font-weight:800}
.shz-gb-i{font-style:italic}

/* --- Per-selection geometry controls. These intentionally use relative
 * transforms/letter-spacing so the same admin content remains responsive
 * across mobile, tablet and desktop without hard-coded pixel typography. */
.shz-grocery-banner__text span[class*='shz-gb-']{display:inline-block;transform:scale(var(--shz-gb-scale-x,1),var(--shz-gb-scale-y,1));transform-origin:left center}
.shz-gb-x-narrow{--shz-gb-scale-x:.84}
.shz-gb-x-normal{--shz-gb-scale-x:1}
.shz-gb-x-wide{--shz-gb-scale-x:1.12}
.shz-gb-y-short{--shz-gb-scale-y:.86}
.shz-gb-y-normal{--shz-gb-scale-y:1}
.shz-gb-y-tall{--shz-gb-scale-y:1.16}
.shz-gb-k-tight{letter-spacing:-.035em}
.shz-gb-k-normal{letter-spacing:0}
.shz-gb-k-loose{letter-spacing:.035em}

/* Each rendered line owns its line box. This prevents a selected large/bold
 * span from changing the editor's inherited line-height and visually adding
 * an uncontrolled gap before the next line. The actual inter-line distance is
 * supplied only by the admin's .shz-grocery-banner__line margin-top value. */
.shz-grocery-banner__text{line-height:1!important}
.shz-grocery-banner__line{line-height:1!important;margin-bottom:0!important}

/* --- Text readability treatments (banner-level — how the whole text block sits on the image).
 * ZIP-291: bright, never black — soft plum / white light instead of dark halos. --- */
.shz-grocery-banner--treat-soft_shadow .shz-grocery-banner__text{text-shadow:none}
.shz-grocery-banner--treat-strong_shadow .shz-grocery-banner__text{text-shadow:none}
.shz-grocery-banner--treat-subtle_outline .shz-grocery-banner__text{text-shadow:none}
.shz-grocery-banner--treat-soft_glow .shz-grocery-banner__text{text-shadow:none}
.shz-grocery-banner--treat-premium_contrast .shz-grocery-banner__text{text-shadow:none}
.shz-grocery-banner--treat-auto_readability .shz-grocery-banner__text{text-shadow:none}
/* Bright glass card: the words sit on a light frosted card with a thin magenta-gold edge. */
.shz-grocery-banner.shz-grocery-banner--treat-bright_glass .shz-grocery-banner__text{
	padding:clamp(6px,1.4vw,14px) clamp(9px,2vw,20px)!important;
	border-radius:clamp(10px,1.6vw,16px);
	background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,240,248,.78));
	-webkit-backdrop-filter:none;backdrop-filter:none;
	border:1.5px solid rgba(255,255,255,.95);
	box-shadow:inset 0 0 0 1px rgba(225,0,126,.18);
	max-width:min(56%,520px)!important;
}
/* On the light card, white / cream words would vanish — they take the deep plum ink instead; gold gets a little deeper. */
.shz-grocery-banner--treat-bright_glass .shz-gb-c-white,.shz-grocery-banner--treat-bright_glass .shz-gb-c-cream{color:#5a1240}
.shz-grocery-banner--treat-bright_glass .shz-gb-c-gold{color:#b07d12}
/* --treat-none: intentionally no extra rule — the base color/font alone. */
/* ZIP-328 — REMOVED: a pre-unification rule `.shz-grocery-world .shz-grocery-banner{height:202px}`
 * used to live here. Confirmed via inspection (not guessed) that it was the
 * real cause of Grocery's desktop banner rendering shorter than Mobile's and
 * Electronics' — both of those markets have no equivalent fixed-height
 * override, so they simply fill the shared `.shz-market-header__canvas`
 * (min-height clamp(180px,26vw,340px)) via the unified engine's own
 * `height:100%` rule (assets/css/shahaz-marketplace-header-banner.css).
 * This leftover 202px value predates the v2 banner-engine unification
 * documented at the top of inc/shahaz-marketplace-header-banner-engine.php,
 * when Grocery still had its own bespoke banner sizing. Removing it (rather
 * than editing it) lets Grocery fall back to the exact same height rule the
 * other two markets already use — no new CSS, no guessed pixel value. */
/* ZIP-351 — Landing-page interaction hardening: suppress browser blue tap/active artifacts without removing keyboard focus-visible. */
body.shahaz-grocery-market-world-page a,
body.shahaz-grocery-market-world-page button,
body.shahaz-grocery-market-world-page [role="button"]{
  -webkit-tap-highlight-color:transparent;
}
body.shahaz-grocery-market-world-page a:focus:not(:focus-visible),
body.shahaz-grocery-market-world-page button:focus:not(:focus-visible),
body.shahaz-grocery-market-world-page [role="button"]:focus:not(:focus-visible){
  outline:none!important;
  box-shadow:none!important;
}


/* ZIP-215 — link connect: when the owner/staff sets a Banner Link the whole banner is one
 * tap target (above the text, below the marketplace-header product cards). */
.shz-grocery-banner__link{position:absolute;inset:0;z-index:3;display:block;border-radius:inherit;-webkit-tap-highlight-color:transparent}
.shz-grocery-banner__link:focus{outline:none}
.shz-grocery-banner__link:focus-visible{outline:2px solid rgba(240,20,122,.6);outline-offset:-4px}

/* Keyboard focus was removed by an older `outline:none!important` on the card; the old yellow
 * ring would also be faint on the new light band. Restore an accessible SHAHAZ-pink ring for
 * keyboard users only (taps/clicks still show no browser-blue flash). */


/* ==========================================================================
   ZIP-338 — code-drawn banner (Mobile / Electronics / Grocery): luxury dark maroon, hot-magenta glow,
   gold ribbons, gold + magenta dots, thin gold frame. Drawn by code, so it is on screen with the page;
   an uploaded banner image fades in over it once fully loaded (inc/shahaz-grocery-banner-engine.php).
   ========================================================================== */
.shz-grocery-banner{background:#24071a}
.shz-mbd{position:absolute;inset:0;z-index:0;isolation:isolate;overflow:hidden;display:flex;align-items:center;color:#fff;
	background:radial-gradient(60% 120% at 100% 0%,rgba(255,20,147,.38),transparent 62%),radial-gradient(45% 110% at 0% 100%,rgba(212,160,60,.16),transparent 70%),linear-gradient(135deg,#3a0b22 0%,#24071a 45%,#120509 100%);
	font-family:"Hind Siliguri","Noto Sans Bengali","Segoe UI",Arial,sans-serif}
.shz-mbd::before,.shz-mbd::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.shz-mbd::before{background:radial-gradient(circle,rgba(255,214,120,.6) 0 1.2px,transparent 1.7px) 0 0/9px 9px;-webkit-mask-image:radial-gradient(38% 110% at 6% 18%,#000,transparent 72%);mask-image:radial-gradient(38% 110% at 6% 18%,#000,transparent 72%)}
.shz-mbd::after{background:radial-gradient(circle,rgba(255,236,190,.5) 0 1.2px,transparent 1.7px) 0 0/9px 9px,radial-gradient(circle,rgba(255,20,147,.45) 0 1px,transparent 1.5px) 4.5px 4.5px/9px 9px;-webkit-mask-image:radial-gradient(34% 100% at 96% 85%,#000,transparent 72%);mask-image:radial-gradient(34% 100% at 96% 85%,#000,transparent 72%)}
.shz-mbd__ribs{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.shz-mbd__frame{position:absolute;inset:5px;z-index:-1;border:1px solid rgba(233,178,60,.45);border-radius:12px;pointer-events:none}
.shz-mbd__copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:44%;padding:0 0 0 16px;box-sizing:border-box}
.shz-mbd__kick{display:inline-block;padding:1px 8px;border-radius:999px;background:#fff8ec;font-size:10px;font-weight:800;line-height:1.35;letter-spacing:.04em}
.shz-mbd__kick b{color:#e0157a;font-weight:800}
.shz-mbd__kick i{color:#8a5f00;font-style:normal}
.shz-mbd__title{display:block;margin:1px 0 0;color:#fff;font-family:"Playfair Display",Georgia,serif;font-size:clamp(19px,5.4vw,46px);font-weight:800;line-height:1.05;white-space:nowrap}
.shz-mbd__title span{color:#ffd77a}
.shz-mbd__sub{display:block;color:#ffe9f3;font-size:clamp(10.5px,2.9vw,17px);font-weight:500;line-height:1.3}
.shz-mbd__btn{display:inline-block;margin-top:4px;padding:2px 11px;border:1px solid #e9b23c;border-radius:999px;color:#ffe08a!important;font-size:clamp(10.5px,2.8vw,14px);font-weight:700;line-height:1.5;text-decoration:none!important;-webkit-tap-highlight-color:transparent}
.shz-mbd__btn:focus,.shz-mbd__btn:focus-visible{outline:none;box-shadow:none}
.shz-grocery-banner__bg.is-fading{z-index:1;opacity:0;transition:opacity .45s ease}
.shz-grocery-banner__bg.is-fading.is-in{opacity:1}
.shz-mh-after{display:block;height:0;scroll-margin-top:72px}
@media (min-width:768px){
	.shz-mbd__copy{max-width:46%;padding-left:clamp(22px,4vw,56px);gap:6px}
	.shz-mbd__frame{inset:8px;border-radius:16px}
	.shz-mbd__kick{font-size:12px;padding:2px 10px}
}
@media (prefers-reduced-motion:reduce){.shz-grocery-banner__bg.is-fading{transition:none}}