/* ==========================================================================
   SHAHAZ.com — Product offer ribbon · inc/shahaz-product-ribbon.php
   ZIP-380 (owner reference): one white-framed pill above the price — a magenta voucher block with a diagonal edge
   (chip + discount, the countdown inside), then soft colour boxes, each its own link with a › arrow:
   free delivery = mint · easy return = lavender · campaign / SHAHAZ Mall = cream-gold. Flat: no shadow, no blur.
   Replaces the dark slanted boxes and the per-category colours (ZIP-291).
   ========================================================================== */
.shz-ribbon{
	--rb-h:clamp(54px,13vw,74px);
	--rb-cut:clamp(14px,4cqi,26px);
	container-type:inline-size;
	position:relative;
	display:flex;
	align-items:stretch;
	box-sizing:border-box;
	width:auto;
	height:var(--rb-h);
	margin:10px 10px 0;
	padding:4px;
	border:1px solid #f4d2e3;
	border-radius:999px;
	background:#fff;
	overflow:hidden;
}
.shz-ribbon__box{
	--rb-ink:#2f8b6f;--rb-title:#23785d;--rb-sub:#4b7f6e;
	position:relative;
	flex:1 1 0;
	min-width:0;
	display:flex;
	align-items:center;
	gap:clamp(5px,1.6cqi,12px);
	padding:0 clamp(7px,2.2cqi,18px);
	color:var(--rb-title);
	text-decoration:none!important;
	-webkit-tap-highlight-color:transparent;
}
.shz-ribbon__box:focus,.shz-ribbon__box:focus-visible{outline:none}
.shz-ribbon__box:active{filter:brightness(.97)}
.shz-ribbon__box:first-child{border-radius:999px 0 0 999px}
.shz-ribbon__box:last-child{border-radius:0 999px 999px 0}
.shz-ribbon__box:only-child{border-radius:999px}

/* the voucher / offer block */
.shz-ribbon__box.is-offer{
	flex:0 0 auto;
	z-index:2;
	padding-right:calc(var(--rb-cut) + clamp(6px,2cqi,14px));
	background:linear-gradient(135deg,#f660a4 0%,#e9307f 55%,#e2287a 100%);
	color:#fff;
	clip-path:polygon(0 0,calc(100% - var(--rb-cut)) 0,100% 100%,0 100%);
}
.shz-ribbon__box.is-offer:only-child,.shz-ribbon__box.is-offer:last-child{clip-path:none;padding-right:clamp(10px,3cqi,22px)}
.shz-ribbon__box.is-offer + .shz-ribbon__box{margin-left:calc(var(--rb-cut) * -1);padding-left:calc(var(--rb-cut) + clamp(6px,2cqi,14px))}
.shz-ribbon__chip{
	display:inline-block;
	align-self:flex-start;
	padding:2px 8px;
	border-radius:999px;
	background:#fff;
	color:#e2287a;
	font-size:clamp(8.5px,2.3cqi,13px);
	font-weight:800;
	line-height:1.25;
	letter-spacing:.02em;
	white-space:nowrap;
}

/* the soft boxes */
.shz-ribbon__box.is-delivery{--rb-ink:#2f8b6f;--rb-title:#23785d;--rb-sub:#4b7f6e;background:linear-gradient(90deg,#e7f6ef 0%,#f2faf6 100%)}
.shz-ribbon__box.is-return{--rb-ink:#a3309c;--rb-title:#8b1e86;--rb-sub:#8c4f88;background:linear-gradient(90deg,#f6ebf7 0%,#fbf4fb 100%)}
.shz-ribbon__box.is-campaign{--rb-ink:#b07d2a;--rb-title:#76501b;--rb-sub:#7d6243;background:linear-gradient(90deg,#fbf1e2 0%,#fdf7ee 100%)}
.shz-ribbon__box:not(.is-offer) + .shz-ribbon__box:not(.is-offer)::before{
	content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(120,90,110,.22);
}

.shz-ribbon__icon{
	flex:0 0 auto;
	width:clamp(18px,4.4cqi,34px);
	height:clamp(18px,4.4cqi,34px);
	fill:none;
	stroke:var(--rb-ink);
	stroke-width:1.7;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.shz-ribbon__box.is-offer .shz-ribbon__icon{stroke:#fff}
.shz-ribbon__text{
	min-width:0;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:clamp(1px,.5cqi,4px);
}
.shz-ribbon__title{
	display:block;
	max-width:100%;
	color:var(--rb-title);
	font-size:clamp(11px,2.6cqi,18px);
	font-weight:800;
	line-height:1.1;
	letter-spacing:.01em;
	overflow:hidden;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
}
.shz-ribbon__box.is-offer .shz-ribbon__title{color:#fff;font-size:clamp(14px,3.6cqi,24px);white-space:nowrap}
.shz-ribbon__sub{
	display:block;
	max-width:100%;
	color:var(--rb-sub);
	font-size:clamp(8.5px,2.3cqi,13px);
	font-weight:600;
	line-height:1.15;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.shz-ribbon__box.is-offer .shz-ribbon__sub{color:rgba(255,255,255,.92)}
.shz-ribbon__time span{font-variant-numeric:tabular-nums;font-weight:800}
.shz-ribbon__go{
	flex:0 0 auto;
	width:clamp(10px,2.6cqi,16px);
	height:clamp(10px,2.6cqi,16px);
	margin-left:auto;
	fill:none;
	stroke:var(--rb-title);
	stroke-width:2.6;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.shz-ribbon__box.is-offer .shz-ribbon__go{stroke:#fff}

/* narrow screens with 3–4 boxes: titles may break onto two lines, the small lines and arrows of the soft boxes go */
@container (max-width:520px){
	.shz-ribbon.is-4 .shz-ribbon__box:not(.is-offer) .shz-ribbon__sub,
	.shz-ribbon.is-4 .shz-ribbon__box:not(.is-offer) .shz-ribbon__go,
	.shz-ribbon.is-3 .shz-ribbon__box:not(.is-offer) .shz-ribbon__go{display:none}
	.shz-ribbon.is-4 .shz-ribbon__box:not(.is-offer) .shz-ribbon__title,
	.shz-ribbon.is-3 .shz-ribbon__box:not(.is-offer) .shz-ribbon__title{font-size:clamp(10.5px,2.9cqi,13px);line-height:1.12}
	.shz-ribbon.is-4 .shz-ribbon__box{gap:4px;padding-left:6px;padding-right:5px}
	.shz-ribbon.is-4 .shz-ribbon__box.is-offer + .shz-ribbon__box{padding-left:calc(var(--rb-cut) + 4px)}
	.shz-ribbon.is-4 .shz-ribbon__icon{width:18px;height:18px}
}
/* medium width (the computer's right column, tablets) with 4 boxes: no arrows on the soft boxes, so the words fit */
@container (min-width:521px) and (max-width:820px){
	.shz-ribbon.is-4 .shz-ribbon__box:not(.is-offer) .shz-ribbon__go{display:none}
	.shz-ribbon.is-4 .shz-ribbon__box{gap:7px;padding-left:10px;padding-right:8px}
	.shz-ribbon.is-4 .shz-ribbon__box.is-offer + .shz-ribbon__box{padding-left:calc(var(--rb-cut) + 8px)}
}
@media (min-width:801px){
	.shz-ribbon{margin:10px 0 0}
}

/* Tags on the gallery picture ("FAST & FREE SHIPPING" style).
   ZIP-379 (owner): the discount badge no longer sits to the right of FREE DELIVERY (the zoom pill covered it) — it is a
   tab stacked on the top-left of the green tag, joined to it: yellow-orange, slanted end, the % big. */
.shz-ribbon-tags{
	position:absolute;left:10px;bottom:10px;z-index:7;
	display:flex;flex-direction:column;align-items:flex-start;
	pointer-events:none;
}
.shz-global-hero-media .shz-ribbon-tags{height:auto!important}
.shz-ribbon-tags__tag{
	display:flex;align-items:center;gap:5px;
	height:var(--shz-ov-h,26px);box-sizing:border-box;
	padding:0 8px;border-radius:4px;
	font-style:normal;font-size:11px;font-weight:900;letter-spacing:.03em;line-height:1;
	white-space:nowrap;
}
.shz-ribbon-tags__tag.is-delivery{order:2;background:linear-gradient(135deg,#19d3b6,#00a08a);color:#fff}
.shz-ribbon-tags__tag.is-off{
	order:1;height:auto;padding:4px 16px 3px 8px;border-radius:7px 0 0 0;
	clip-path:polygon(0 0,calc(100% - 9px) 0,100% 100%,0 100%);
	background:linear-gradient(180deg,#ffe066 0%,#ffb300 100%);color:#5a1d00;
	font-size:13px;letter-spacing:0;
}
.shz-ribbon-tags__tag.is-off:only-child{border-radius:4px;clip-path:none;padding:0 9px;height:var(--shz-ov-h,26px)}
.shz-ribbon-tags__tag.is-off + .shz-ribbon-tags__tag.is-delivery,
.shz-ribbon-tags__tag.is-delivery:not(:only-child){border-radius:0 4px 4px 4px}
.shz-ribbon-tags__tag svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.shz-ribbon-tags__tag svg circle{fill:currentColor}
@media (max-width:520px){.shz-ribbon-tags{left:8px;bottom:8px}.shz-ribbon-tags__tag{padding:0 7px;font-size:10px}.shz-ribbon-tags__tag.is-off{padding:3px 14px 2px 7px;font-size:12px}.shz-ribbon-tags__tag svg{width:14px;height:14px}}

@media (prefers-reduced-motion:reduce){.shz-ribbon__box::after{animation:none;display:none}}