/* ==========================================================================
   SHAHAZ Canonical Product Card — assets/css/shahaz-canonical-card.css
   The ONE non-homepage product card. Renderer: inc/shahaz-canonical-card.php
   Behaviour: assets/js/shahaz-canonical-card.js

   Rules for future edits:
   - Geometry lives only here. Pages style their GRID/ROW container, never the
     card internals or control positions.
   - No blue anywhere (focus, tap highlight, outline, shadow, background).
   - Title area follows the owner's reference image (2026-09-27): 2-line title,
     admin feature line, gold lotus divider, 1-line price + gold OFF capsule,
     perks rail, rating/sold row, pink gold-ring cart (green on touch,
     icon always white). Sizes scale with the card width (container units).
   ========================================================================== */

.shz-cc{
	--shz-cc-hot: #f00083;
	--shz-cc-pink: #ffe0ec;
	--shz-cc-green: #0b8a3e;
	--shz-cc-ink: #1d1320;
	--shz-cc-muted: #8a7f8c;
	--shz-cc-radius: 6px;
	--shz-cc-ctl: 34px;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: auto;
	background: #fff;
	border-radius: var(--shz-cc-radius);
	overflow: hidden;
	box-shadow: none;
	font-family: inherit;
	color: var(--shz-cc-ink);
	box-sizing: border-box;
}
.shz-cc *,.shz-cc *::before,.shz-cc *::after{ box-sizing: border-box; }

.shz-cc--rail{
	flex: 0 0 clamp(150px, 42vw, 210px);
	width: clamp(150px, 42vw, 210px);
	scroll-snap-align: start;
}

/* Media ------------------------------------------------------------------ */
.shz-cc__media{
	position: relative;
	display: block;
	background: #faf6f8;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}
.shz-cc__media-link{ display: block; line-height: 0; }
.shz-cc--grid .shz-cc__media{ aspect-ratio: 1 / var(--cc-ratio, 1); }
.shz-cc--grid .shz-cc__media-link{ height: 100%; }
.shz-cc__img{
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	transition: transform .5s ease;
}
@media (hover: hover){
	.shz-cc:hover .shz-cc__img{ transform: scale(1.035); }
}


/* Heart — position and size only. Its look and states (outline / filled, no disc,
 * ring or tap flash) are the shared card-heart contract in shahaz-card-feedback.css (ZIP-323). */
.shz-cc__wish{
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--shz-cc-ctl);
	width: var(--shz-cc-ctl);
	height: var(--shz-cc-ctl);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	text-decoration: none;
}
.shz-cc__wish::after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}
.shz-cc__wish-icon{
	width: 22px;
	height: 22px;
	display: block;
	stroke-width: 1.8;
	stroke-linejoin: round;
	filter: none;
	pointer-events: none;
}
.shz-cc__wish.is-pending{ pointer-events: none; }
.shz-cc__wish.is-bump .shz-cc__wish-icon{ animation: shz-cc-heart .45s ease; }

/* Focus/tap states are explicitly non-blue. */
.shz-cc a:focus,.shz-cc button:focus{ outline: none; box-shadow: none; }


@keyframes shz-cc-heart{
	0% { transform: scale(1); }
	45% { transform: scale(1.22); }
	100% { transform: scale(1); }
}

@media (min-width: 700px){
	.shz-cc{ --shz-cc-ctl: 36px; }
}

@media (prefers-reduced-motion: reduce){
	.shz-cc__img,.shz-cc__wish,.shz-cc__wish-icon{ transition: none !important; animation: none !important; }
}

/* Canonical containers: six-pixel outer inset + six-pixel masonry gaps. */
/* Canonical product-grid geometry: true responsive CSS Grid.
 * The canonical card system defines the device column counts; individual
 * landing pages may style their section wrapper, but they do not redefine
 * card geometry. CSS Multi-column was intentionally removed because tall
 * cards can collapse into a single vertical column when their combined
 * height exceeds the browser's column-balancing constraints. */
div.shz-cc-grid,main.shz-cc-grid,section.shz-cc-grid{
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	column-gap: 6px !important;
	row-gap: 6px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 6px !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
}
div.shz-cc-grid > .shz-cc,main.shz-cc-grid > .shz-cc,section.shz-cc-grid > .shz-cc{
	display: flex !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	height: auto !important;
	break-inside: auto !important;
	-webkit-column-break-inside: auto !important;
}
div.shz-cc-grid,main.shz-cc-grid,section.shz-cc-grid{ --cc-cols: 2; }
@media (min-width: 700px){
	div.shz-cc-grid,main.shz-cc-grid,section.shz-cc-grid{ --cc-cols: 3; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1100px){
	div.shz-cc-grid,main.shz-cc-grid,section.shz-cc-grid{ --cc-cols: 4; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1500px){
	div.shz-cc-grid,main.shz-cc-grid,section.shz-cc-grid{ --cc-cols: 5; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (min-width: 1900px){
	div.shz-cc-grid,main.shz-cc-grid,section.shz-cc-grid{ --cc-cols: 6; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
/* Masonry (assets/js/shahaz-canonical-card.js): each card goes into the
 * currently shortest column, so a shorter card lets the next one move up;
 * every gap stays 6px. */
div.shz-cc-grid.is-masonry,main.shz-cc-grid.is-masonry,section.shz-cc-grid.is-masonry{
	display: flex !important;
	align-items: flex-start !important;
	gap: 6px !important;
}
.shz-cc-grid > .shz-cc-col{
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.shz-cc-col > .shz-cc{ width: 100% !important; min-width: 0 !important; margin: 0 !important; }
.shz-cc-rail{
	display: flex;
	/* Each card is as tall as its own content — never stretched to the
	 * tallest card in the row (ZIP-211). */
	align-items: flex-start;
	gap: 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding: 0 6px 4px;
}
.shz-cc-rail::-webkit-scrollbar{ display: none; }


/* ==========================================================================
   Title area — owner reference (2026-09-27). One design, all canonical pages.
   Every size is a clamp() of the card width (cqi), so the same design shrinks
   for 2-up mobile grids and grows on desktop without a second layout.
   ========================================================================== */
.shz-cc__body{
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 2px;gap: clamp(2px, 1.3cqi, 7px);
	/* ZIP-355: almost no space between the photo and the title (the title keeps its own small room for the marks above Bangla letters) */
	padding: 1px 5px 5px;padding: clamp(1px, .6cqi, 4px) clamp(5px, 3cqi, 18px) clamp(5px, 3cqi, 16px);
	background: linear-gradient(180deg, #fff 0%, #fff6fa 100%);
	-webkit-tap-highlight-color: transparent;
}
.shz-cc__title{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: #14101f;
	font-size: 12px;font-size: clamp(12px, 8.2cqi, 32px);
	font-weight: 800;
	/* ZIP-355: Bangla vowel signs (ি ী ৈ ৌ) rise above the letters — the clamped (overflow hidden) title used to cut
	 * them off. A taller line plus a little top room inside the title keeps every mark whole. */
	line-height: 1.3;
	padding-top: .12em;
	letter-spacing: -.01em;
	text-decoration: none;
	word-break: break-word;
	-webkit-tap-highlight-color: transparent;
}

/* Feature line (admin: WooCommerce → Card Feature Lines). ZIP-268 (owner reference): icon on the
 * left, text on the right, all three on ONE line with thin dividers — never two lines. */
.shz-cc__features{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	overflow: hidden;
	--fit: 1; /* shahaz-canonical-card.js lowers this when the three items would not fit on one line */
}
.shz-cc__feature{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1px;gap: clamp(1px, .8cqi, 5px);
	flex: 0 0 auto;
	padding: 0 2px;padding: 0 calc(var(--fit) * clamp(2px, 1.1cqi, 9px));
	text-align: left;
}
.shz-cc__feature:first-child{ padding-left: 0; }
.shz-cc__feature:last-child{ padding-right: 0; }
.shz-cc__feature + .shz-cc__feature{ border-left: 1px solid #ead3a6; }
.shz-cc__feature-icon{
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 10px;width: calc(var(--fit) * clamp(10px, 5.6cqi, 24px));
	height: 10px;height: calc(var(--fit) * clamp(10px, 5.6cqi, 24px));
	color: #e0126f;
}
.shz-cc__feature-icon svg{ width: 100%; height: 100%; }
.shz-cc__feature-text{
	display: block;
	white-space: nowrap;
	color: #3b3040;
	font-size: 7px;font-size: calc(var(--fit) * clamp(7px, 4.3cqi, 16px));
	font-weight: 500;
	line-height: 1.2;
}

/* Gold lotus divider */
.shz-cc__divider{
	display: flex;
	align-items: center;
	gap: 3px;gap: clamp(3px, 1.6cqi, 8px);
	color: #d3a24a;
}
.shz-cc__divider span{ flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(211,162,74,0), #d3a24a 40%, #d3a24a); }
.shz-cc__divider span:last-child{ background: linear-gradient(90deg, #d3a24a, #d3a24a 60%, rgba(211,162,74,0)); }
.shz-cc__divider svg{ flex: 0 0 auto; width: 13px;width: clamp(13px, 8cqi, 30px); height: auto; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }

/* Price: ONE line always; JS lowers --fit if it would overflow */
.shz-cc__price{
	--fit: 1;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 3px;gap: clamp(3px, 2.4cqi, 12px);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	line-height: 1;
}
.shz-cc__now{
	flex: 0 0 auto;
	color: #e3136f;
	font-size: calc(var(--fit) * 16px);font-size: calc(var(--fit) * clamp(16px, 13.5cqi, 50px));
	font-weight: 900;
	letter-spacing: -.02em;
}
.shz-cc__now--na{ color: #8a7f8c; font-size: 10px;font-size: clamp(10px, 5cqi, 16px); font-weight: 600; }
.shz-cc__was{
	flex: 0 0 auto;
	color: #8e8a98;
	font-size: calc(var(--fit) * 9px);font-size: calc(var(--fit) * clamp(9px, 6.2cqi, 24px));
	font-weight: 700;
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}
.shz-cc__discount{
	flex: 0 0 auto;
	padding: .32em .62em;
	border: 1px solid #e2b15d;
	border-radius: 999px;
	background: linear-gradient(180deg, #fffaf0 0%, #fbe7c2 55%, #f3cf8f 100%);
	box-shadow: none;
	color: #b3172c;
	font-size: calc(var(--fit) * 8px);font-size: calc(var(--fit) * clamp(8px, 5.4cqi, 21px));
	font-weight: 800;
}
.shz-cc__price .woocommerce-Price-amount,
.shz-cc__price .woocommerce-Price-currencySymbol{ color: inherit; font: inherit; }

/* Foot: perks + rating on the left, big cart on the bottom-right */
.shz-cc__foot{
	display: grid;
	/* Left column is as wide as its content (the rating row), so the perks
	 * rail below the price ends exactly where "N Sold" ends. */
	grid-template-columns: minmax(0, max-content) auto;
	grid-template-areas: "perks cart" "meta cart";
	justify-content: space-between;
	align-items: center;
	column-gap: 4px;column-gap: clamp(4px, 2.4cqi, 14px);
	row-gap: 3px;row-gap: clamp(3px, 1.8cqi, 10px);
}
/* Perks rail: slim gold-edged capsule under the price that shows
 * the product's real marketplace facts one at a time. It never pushes the
 * column wider (contain: inline-size), so it ends with the rating row. */
.shz-cc__perks{
	grid-area: perks;
	contain: inline-size;
	justify-self: stretch;
	position: relative;
	display: flex;
	align-items: center;
	gap: .35em;
	min-width: 0;
	height: 1.9em;
	padding: 0 .6em 0 .25em;
	border-radius: 999px;
	background: linear-gradient(90deg, #fff0f7 0%, #fff6fb 55%, #fff7e8 100%);
	box-shadow: inset 0 0 0 1px rgba(232, 174, 47, .6);
	font-size: 7.5px;font-size: clamp(7.5px, 4.6cqi, 18px);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
}
.shz-cc__perks-spark{
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.45em;
	height: 1.45em;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ff7cc0 0%, #e0006e 60%, #a8004f 100%);
	box-shadow: 0 0 0 1px #f6c44f;
}
.shz-cc__perks-spark svg{ width: 66%; height: 66%; fill: #ffe08a; animation: shzCcSpark 2.4s ease-in-out infinite; }
.shz-cc__perks-track{ position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; }
.shz-cc__perk{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: .3em;
	min-width: 0;
	opacity: 0;
	animation-duration: calc(var(--perk-n, 1) * 2.6s);
	animation-delay: calc(var(--perk-i, 0) * 2.6s);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}
.shz-cc__perk span{ overflow: hidden; text-overflow: ellipsis; }
.shz-cc__perk svg{ flex: 0 0 auto; width: 1.3em; height: 1.3em; fill: currentColor; }
.shz-cc__perk svg .shz-cc__perk-tick{ fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.shz-cc__perk--cod svg .shz-cc__perk-tick{ fill: #fff; stroke: none; }
.shz-cc__perk--delivery{ color: #12863a; }
.shz-cc__perk--stock-low{ color: #e2561b; }
.shz-cc__perk--authentic{ color: #c2185b; }
.shz-cc__perk--cod{ color: #7b2fbe; }
.shz-cc__perk--verified{ color: #b07a12; }
.shz-cc__perk--stock{ color: #1f9d55; }
.shz-cc__perks--n1 .shz-cc__perk{ opacity: 1; animation: none; }
.shz-cc__perks--n2{ --perk-n: 2; }
.shz-cc__perks--n3{ --perk-n: 3; }
.shz-cc__perks--n4{ --perk-n: 4; }
.shz-cc__perks--n2 .shz-cc__perk{ animation-name: shzCcPerk2; }
.shz-cc__perks--n3 .shz-cc__perk{ animation-name: shzCcPerk3; }
.shz-cc__perks--n4 .shz-cc__perk{ animation-name: shzCcPerk4; }
@keyframes shzCcPerk2{ 0%{ opacity: 0; transform: translateY(70%); } 6%, 44%{ opacity: 1; transform: none; } 50%, 100%{ opacity: 0; transform: translateY(-70%); } }
@keyframes shzCcPerk3{ 0%{ opacity: 0; transform: translateY(70%); } 4%, 29%{ opacity: 1; transform: none; } 33.3%, 100%{ opacity: 0; transform: translateY(-70%); } }
@keyframes shzCcPerk4{ 0%{ opacity: 0; transform: translateY(70%); } 3%, 22%{ opacity: 1; transform: none; } 25%, 100%{ opacity: 0; transform: translateY(-70%); } }
@keyframes shzCcSpark{ 0%, 100%{ transform: scale(1) rotate(0); } 50%{ transform: scale(.78) rotate(45deg); } }
@media (prefers-reduced-motion: reduce){
	.shz-cc__perk{ animation: none !important; opacity: 0; }
	.shz-cc__perk:first-child{ opacity: 1; }
	.shz-cc__perks-spark svg{ animation: none; }
}

.shz-cc__meta{
	grid-area: meta;
	display: flex;
	align-items: center;
	gap: 2px;gap: clamp(2px, 1.3cqi, 7px);
	min-width: 0;
	color: #4a4252;
	font-size: 7.5px;font-size: clamp(7.5px, 4.6cqi, 18px);
	white-space: nowrap;
	overflow: hidden;
}
.shz-cc__star svg{ display: block; width: 1.45em; height: 1.45em; fill: #f6b400; stroke: #e19a00; stroke-width: .8; }
.shz-cc__rating-value{ color: #15111e; font-size: 1.22em; font-weight: 800; }
.shz-cc__reviews{ overflow: hidden; text-overflow: ellipsis; }
.shz-cc__meta-divider{ flex: 0 0 1px; width: 1px; height: 1.3em; background: #dcc49b; }
.shz-cc__trend svg{ display: block; width: 1.35em; height: 1.35em; fill: none; stroke: #c2185b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.shz-cc__cart{
	grid-area: cart;
	align-self: end;
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;width: clamp(34px, 21cqi, 84px);
	height: 34px;height: clamp(34px, 21cqi, 84px);
	margin: 0;
	padding: 0;
	border: 2px solid #efc46c;border: clamp(2px, 1.1cqi, 4px) solid #efc46c;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #ff6bb3 0%, #ec1a80 48%, #c8005f 100%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background .18s ease, box-shadow .18s ease, transform .15s ease;
}
.shz-cc__cart:active,
.shz-cc__cart.is-pending,
.shz-cc__cart.is-added{
	background: radial-gradient(circle at 34% 28%, #6ff08f 0%, #22b24c 50%, #12863a 100%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
	color: #fff;
}
.shz-cc__cart:active{ transform: scale(.94); }
.shz-cc__cart.is-pending{ pointer-events: none; }
@media (hover: hover){ .shz-cc__cart:hover{ transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce){ .shz-cc__cart{ transition: none; } }
/* ZIP-323: sold out — a grey disabled disc that says "স্টক নেই" (no product-page trip). */
.shz-cc__cart.shz-cc__cart--oos,
.shz-cc__cart.shz-cc__cart--oos:hover,
.shz-cc__cart.shz-cc__cart--oos:focus{
	border-color: #ddd3d8;
	background: #b9aeb4;
	box-shadow: none;
	color: #fff;
	font-size: 8px;font-size: clamp(8px, 4.4cqi, 15px);
	font-weight: 700;
	line-height: 1.05;
	text-align: center;
	white-space: normal;
	cursor: default;
	transform: none;
	opacity: 1;
}

/* WooCommerce "View cart" link is never shown inside canonical cards. */
.shz-cc a.added_to_cart,
.shz-cc .added_to_cart{display:none !important;}
.shz-cc--grid .shz-cc__img{ height: 100% !important; object-fit: cover; }