/* SHAHAZ.com — Marketplace Header — compact right-side 3-card product showcase. */
.shz-market-header{width:100%;box-sizing:border-box;padding:0;overflow:hidden;isolation:isolate}
.shz-market-header__canvas{position:relative;width:100%;overflow:hidden;border-radius:0;background:#24071a;min-height:clamp(180px,26vw,340px)}
.shz-market-header__banner-layer{position:absolute;inset:0;z-index:1;overflow:hidden}
.shz-market-header__banner-layer>.shz-grocery-banner{position:absolute;inset:0;width:100%;height:100%;margin:0;max-width:none}

/* Compact reference-matched stack: image-only cards, right aligned, overlapping. */
.shz-market-header__product-visuals{
  position:absolute;
  z-index:5;
  right:3px;
  top:0;
  bottom:0;
  width:min(48%,340px);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:10px 8px 10px 20px;
  overflow:visible;
  pointer-events:none;
}
.shz-market-header__product-card{
  position:relative;
  flex:0 0 auto;
  width:clamp(82px,10vw,128px);
  aspect-ratio:105/128;
  height:auto;
  margin-left:clamp(-28px,-2.3vw,-20px);
  padding:5px;
  box-sizing:border-box;
  border-radius:19px;
  background:linear-gradient(145deg,#ffffff,#f8f1f7);
  border:2px solid rgba(255,255,255,.95);
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
  pointer-events:auto;
  text-decoration:none;
  transition:transform .3s ease,box-shadow .3s ease;
}

/* Thin luxury inner frame. */
.shz-market-header__product-inner-frame{
  position:absolute;
  z-index:3;
  inset:4px;
  border:1.5px solid rgba(221,174,39,.85);
  border-radius:15px;
  pointer-events:none;
  box-sizing:border-box;
}

/* Full-card real WooCommerce image. */
.shz-market-header__product-image-wrap{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
}
.shz-market-header__product-image{
  display:block;
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
}

/* 3-card overlapping composition: side cards behind, center card in front.
 * ZIP-328 — real small→large→small hierarchy: left/right keep the shared
 * card's base size, center is scaled up via transform (no layout/DOM width
 * change, so the overlap math above is untouched) to be clearly dominant,
 * per spec. This also fills more of the banner's available vertical area
 * without changing the banner canvas itself. */
.shz-market-header__product-card--left{
  z-index:1;
  transform:translateY(9px) rotate(-8deg);
}
.shz-market-header__product-card--center{
  z-index:3;
  transform:translateY(-8px) scale(1.28);
}
.shz-market-header__product-card--right{
  z-index:2;
  transform:translateY(9px) rotate(8deg);
}

/* ZIP-328 — hover lift must be role-aware now that center has a much larger
 * base scale: a shared flat "scale(1.06)" would have shrunk the enlarged
 * center card on hover. Each role lifts slightly from its own base transform
 * instead of replacing it. */
.shz-market-header__product-card--left:hover{
  z-index:10;
  transform:translateY(2px) rotate(-8deg) scale(1.06);
  box-shadow:none;
}
.shz-market-header__product-card--center:hover{
  z-index:10;
  transform:translateY(-11px) scale(1.34);
  box-shadow:none;
}
.shz-market-header__product-card--right:hover{
  z-index:10;
  transform:translateY(2px) rotate(8deg) scale(1.06);
  box-shadow:none;
}
.shz-market-header__product-card:focus-visible{outline:2px solid #ffd84d;outline-offset:2px}

@media(max-width:767px){
  .shz-market-header__canvas{min-height:clamp(150px,34vw,245px)}
  .shz-market-header__product-visuals{
    right:2px;
    width:min(51%,390px);
    padding:8px 3px 8px 18px;
  }
  .shz-market-header__product-card{
    width:clamp(76px,13.5vw,102px);
    margin-left:clamp(-22px,-3vw,-15px);
    padding:4px;
    border-radius:16px;
  }
  .shz-market-header__product-inner-frame{inset:3px;border-radius:13px}
  .shz-market-header__product-image-wrap{border-radius:12px}
  .shz-market-header__product-card--left{transform:translateY(8px) rotate(-9deg)}
  .shz-market-header__product-card--center{transform:translateY(-7px) scale(1.25)}
  .shz-market-header__product-card--right{transform:translateY(8px) rotate(9deg)}
  .shz-market-header__product-card--left:hover{transform:translateY(1px) rotate(-9deg) scale(1.06)}
  .shz-market-header__product-card--center:hover{transform:translateY(-10px) scale(1.31)}
  .shz-market-header__product-card--right:hover{transform:translateY(1px) rotate(9deg) scale(1.06)}
}

@media(max-width:430px){
  .shz-market-header__canvas{min-height:132px}
  .shz-market-header__product-visuals{
    right:0;
    width:54%;
    padding:7px 0 7px 17px;
  }
  .shz-market-header__product-card{
    width:clamp(68px,20vw,90px);
    margin-left:clamp(-19px,-4.5vw,-13px);
    padding:3px;
    border-radius:14px;
  }
  .shz-market-header__product-inner-frame{inset:3px;border-radius:11px}
  .shz-market-header__product-image-wrap{border-radius:10px}
}

@media(prefers-reduced-motion:reduce){
  .shz-market-header__product-card{transition:none}
}

/* Banner text (Grocery / Mobile / Electronics): placed from admin anywhere
 * inside the banner (X / Y %), never cut, never outside the banner. No dark
 * overlay over the banner image. */
.shz-market-header{margin-top:0 !important;}

.shz-grocery-banner .shz-grocery-banner__text{
	position:absolute !important;
	z-index:4;
	width:max-content !important;
	max-width:100% !important;
	margin:0 !important;
	padding:0 !important;
	overflow:visible !important;
	line-height:1.15 !important;
	pointer-events:none;
}
.shz-grocery-banner .shz-grocery-banner__line{
	white-space:normal !important;
	overflow:visible !important;
	text-overflow:clip !important;
	line-height:1.15 !important;
}

/* ZIP-576 (owner): Electronics + Mobile Market — the three banner cards stand straight in one row (no tilt, no
 * overlap), the centre one bigger, the two side ones a little smaller, all on the same middle line. Each card is a
 * clean showcase frame: white, rounded, 1px green border, the product picture filling it. Grocery is unchanged. */
.shz-market-header--electronics .shz-market-header__product-visuals,
.shz-market-header--mobile .shz-market-header__product-visuals{--mh-w:clamp(70px,10vw,150px);right:clamp(4px,1.2vw,18px);width:auto;max-width:52%;padding:0;gap:clamp(5px,.7vw,10px);align-items:center;justify-content:flex-end}
.shz-market-header--electronics .shz-market-header__product-card,
.shz-market-header--mobile .shz-market-header__product-card{width:calc(var(--mh-w) * .8);aspect-ratio:3/4;margin:0;padding:3px;border:1px solid #1fa35c;border-radius:16px;background:#fff;transform:none;transition:transform .25s ease}
.shz-market-header--electronics .shz-market-header__product-card--center,
.shz-market-header--mobile .shz-market-header__product-card--center{width:var(--mh-w);z-index:3}
.shz-market-header--electronics .shz-market-header__product-card:hover,
.shz-market-header--mobile .shz-market-header__product-card:hover{transform:translateY(-3px);z-index:5}
.shz-market-header--electronics .shz-market-header__product-inner-frame,
.shz-market-header--mobile .shz-market-header__product-inner-frame{display:none}
.shz-market-header--electronics .shz-market-header__product-image-wrap,
.shz-market-header--mobile .shz-market-header__product-image-wrap{border-radius:13px}
@media(max-width:767px){
  .shz-market-header--electronics .shz-market-header__product-visuals,
  .shz-market-header--mobile .shz-market-header__product-visuals{--mh-w:clamp(66px,18vw,108px);right:4px;max-width:51%}
  .shz-market-header--electronics .shz-market-header__product-card,
  .shz-market-header--mobile .shz-market-header__product-card{border-radius:14px}
  .shz-market-header--electronics .shz-market-header__product-image-wrap,
  .shz-market-header--mobile .shz-market-header__product-image-wrap{border-radius:11px}
}
@media(min-width:768px){
  .shz-market-header--electronics .shz-market-header__product-visuals,
  .shz-market-header--mobile .shz-market-header__product-visuals{--mh-w:clamp(110px,13vw,200px)}
}
@media(prefers-reduced-motion:reduce){.shz-market-header--electronics .shz-market-header__product-card,.shz-market-header--mobile .shz-market-header__product-card{transition:none}}
