/* 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:linear-gradient(110deg,#fff7fb,#ffe7f3 48%,#fff5dc);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:0 7px 0 rgba(112,0,70,.20),0 12px 22px rgba(70,0,45,.25),inset 0 2px 0 rgba(255,255,255,1);
  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%;
  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:0 9px 0 rgba(112,0,70,.20),0 18px 30px rgba(70,0,45,.30),inset 0 2px 0 rgba(255,255,255,1);
}
.shz-market-header__product-card--center:hover{
  z-index:10;
  transform:translateY(-11px) scale(1.34);
  box-shadow:0 9px 0 rgba(112,0,70,.20),0 18px 30px rgba(70,0,45,.30),inset 0 2px 0 rgba(255,255,255,1);
}
.shz-market-header__product-card--right:hover{
  z-index:10;
  transform:translateY(2px) rotate(8deg) scale(1.06);
  box-shadow:0 9px 0 rgba(112,0,70,.20),0 18px 30px rgba(70,0,45,.30),inset 0 2px 0 rgba(255,255,255,1);
}
.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}
}