/* SHAHAZ.com — card ribbons. Markup: inc/shahaz-card-ribbons.php → shahaz_card_ribbon_html().
   ZIP-404 (owner reference "Xiaomi Official Store" tab): the ribbon is a TAB hanging from the top edge of the card,
   centred, its top shoulders curving smoothly into a thin frame of the same colour round the whole card; rounded
   bottom corners. One solid colour per design (no joined gradients, so no seams), no shadow, no blur.
   Layers: picture < tab (z 4) < frame line (z 5) < add-to-cart / wishlist bar (z 6).
   ZIP-419: the Wishlist / category-archive luxury card carries the tab too (a direct child of the card, so it hangs
   from the card's own top edge over its 4px picture margin). */
.shz-cc__media,.shz-cat-shop-visual{container-type:inline-size}
.shz-crb{
	--crb-h:17px;--crb-sh:8px;--crb-r:7px;
	/* centred with auto margins (not a 50% transform) so the edges land on whole pixels and stay crisp — ZIP-408 */
	position:absolute;top:0;left:0;right:0;z-index:4;
	width:max-content;max-width:64%;margin:0 auto;
	pointer-events:none;
	font-family:"Hind Siliguri","Noto Sans Bengali",-apple-system,"Segoe UI",Arial,sans-serif;
	line-height:1;
}
/* the two shoulders: a solid square with a quarter circle cut out, so the tab flows into the frame line.
   The cut circle ends exactly on the tab's side (its soft edge falls on the 2px tucked under the tab), so the curve
   runs straight into the side with no step. */
.shz-crb::before,.shz-crb::after{
	content:"";position:absolute;top:0;width:calc(var(--crb-sh) + 2px);height:var(--crb-sh);pointer-events:none;
	/* 2px wider than the curve and tucked under the tab, so the two meet without any hairline */
}
.shz-crb::before{left:calc(-1 * var(--crb-sh));background:radial-gradient(circle at 0 100%,transparent var(--crb-sh),var(--crb-c) calc(var(--crb-sh) + .7px))}
.shz-crb::after{right:calc(-1 * var(--crb-sh));background:radial-gradient(circle at 100% 100%,transparent var(--crb-sh),var(--crb-c) calc(var(--crb-sh) + .7px))}
.shz-crb__band{
	position:relative;
	display:flex;align-items:center;justify-content:center;gap:4px;
	height:var(--crb-h);
	padding:0 10px 1px;
	box-sizing:border-box;
	color:var(--crb-fg,#fff);
	background:var(--crb-c);
	border-radius:0 0 var(--crb-r) var(--crb-r);
	white-space:nowrap;overflow:hidden;
}
.shz-crb__ic{display:inline-grid;place-items:center;flex:0 0 14px;width:14px;height:14px;font-style:normal}
.shz-crb__ic svg{width:14px;height:14px;display:block}
.shz-crb__txt{display:flex;align-items:baseline;gap:5px;min-width:0;white-space:nowrap;overflow:hidden}
.shz-crb__t{font-family:"Poppins","Montserrat",-apple-system,"Segoe UI",Arial,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis}
.shz-crb__s{position:relative;padding-left:6px;font-size:10px;font-weight:600;color:var(--crb-sub,rgba(255,255,255,.9));overflow:hidden;text-overflow:ellipsis}
.shz-crb__s::before{content:"";position:absolute;left:0;top:50%;width:1px;height:9px;margin-top:-4.5px;background:currentColor;opacity:.55}
.shz-crb__chip{
	flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;
	height:13px;padding:0 5px;border-radius:999px;line-height:13px;
	background:rgba(255,255,255,.95);color:var(--crb-c);
	font-size:9.5px;font-weight:700;white-space:nowrap;
}
.shz-crb__clock b{font-family:"Poppins",-apple-system,"Segoe UI",Arial,sans-serif;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.shz-crb__clock svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.shz-crb__stars{flex:0 0 auto;font-size:10px;letter-spacing:.5px;color:#ffd23f}
.shz-crb__stars i{font-style:normal;color:rgba(255,255,255,.4)}
.shz-crb__deco{display:none}

/* the thin frame round the whole card, in the tab colour (drawn over the card, so nothing moves) */
.shz-cc:has(.shz-crb)::after,.shz-cat-shop-card:has(.shz-crb)::after,.shz-lux-card:has(> .shz-crb)::after{
	content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
	border:1.5px solid var(--crb-frame,#dc0f5a);border-radius:inherit;
}

/* ---- the eight designs: one colour each (tab, shoulders and frame) ---- */
/* a11y (ZIP-533): each tab colour is a shade deeper so the white 10–12px text reads (≥4.5:1, WCAG 1.4.3). */
.shz-crb--flash{--crb-c:#dc0f5a}
.shz-crb--delivery{--crb-c:#08776d}
.shz-crb--hot{--crb-c:#c2410c}
.shz-crb--top{--crb-c:#7a37dc}
.shz-crb--best{--crb-c:#1b1719;--crb-fg:#f3c34a}
.shz-crb--new{--crb-c:#e0136f}
.shz-crb--original{--crb-c:#1f63d6}
.shz-crb--eco{--crb-c:#2f8124}
:is(.shz-cc,.shz-cat-shop-card,.shz-lux-card):has(.shz-crb--flash){--crb-frame:#dc0f5a}
:is(.shz-cc,.shz-cat-shop-card,.shz-lux-card):has(.shz-crb--delivery){--crb-frame:#08776d}
:is(.shz-cc,.shz-cat-shop-card,.shz-lux-card):has(.shz-crb--hot){--crb-frame:#c2410c}
:is(.shz-cc,.shz-cat-shop-card,.shz-lux-card):has(.shz-crb--top){--crb-frame:#7a37dc}
:is(.shz-cc,.shz-cat-shop-card,.shz-lux-card):has(.shz-crb--best){--crb-frame:#1b1719}
:is(.shz-cc,.shz-cat-shop-card,.shz-lux-card):has(.shz-crb--new){--crb-frame:#e0136f}
:is(.shz-cc,.shz-cat-shop-card,.shz-lux-card):has(.shz-crb--original){--crb-frame:#1f63d6}
:is(.shz-cc,.shz-cat-shop-card,.shz-lux-card):has(.shz-crb--eco){--crb-frame:#2f8124}

/* ---- fit the card width (the picture is the container) ---- */
@container (max-width:200px){
	.shz-crb__s,.shz-crb__stars,.shz-crb__chip:not(.shz-crb__clock){display:none}
	.shz-crb__band{padding:0 8px 1px;gap:3px}
	.shz-crb__t{font-size:9.5px}
	.shz-crb__ic,.shz-crb__ic svg{flex-basis:12px;width:12px;height:12px}
}
@container (max-width:150px){ .shz-crb__clock{display:none} }
@container (min-width:280px){
	.shz-crb{--crb-h:20px;--crb-sh:10px;--crb-r:8px}
	.shz-crb__t{font-size:12px}
	.shz-crb__s{font-size:11px}
	.shz-crb__ic,.shz-crb__ic svg{flex-basis:16px;width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){.shz-crb *{transition:none}}

/* ---- Seller Center › product › Card Ribbon picker (template-parts/seller-products/editor.php) ---- */
.shz-pe-crb{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:8px}
.shz-pe-crb__opt{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid #eedde6;border-radius:10px;background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.shz-pe-crb__opt:has(input:checked){border-color:#e9007c;background:#fff6fa}
.shz-pe-crb__opt input{position:absolute;opacity:0;pointer-events:none}
.shz-pe-crb__opt small{font-size:12px;font-weight:600;color:#6b5a63}
.shz-pe-crb__pic{position:relative;display:block;height:40px;border-radius:7px;background:linear-gradient(135deg,#f6eef2,#ece4ea);overflow:hidden}
.shz-pe-crb__none{display:grid;place-items:center;height:40px;border-radius:7px;background:#f7f3f5;color:#6b5a63;font-size:13px;font-weight:700}
.shz-pe-crb__status{margin:6px 0 0;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:600}
.shz-pe-crb__status.is-pending{background:#fff6e5;color:#8a5a00}
.shz-pe-crb__status.is-approved{background:#e7f6ef;color:#1a7a4c}
.shz-pe-crb__status.is-rejected{background:#fdecef;color:#b42318}
.shz-pe-crb__texts{margin-top:10px}