/* ==========================================================================
   SHAHAZ.com — Homepage Category Section (template-parts/home/07-categories.php)
   ZIP-301 — owner reference "categories-reference" (replaces every earlier design of this section):
   header  — magenta bar · title with the last word magenta · subtitle · outlined "View All →" pill
   circles — round category pictures, hot-magenta ring (ZIP-399; was gold) + soft pink inside, name under it (7 per view on phones)
   cards   — white / pink in turn (ZIP-374: the cream card is white): banner picture fading into the card colour, small round picture,
             name, "৮টি পণ্য", "Shop Now →" pill (brown on cream, plum on pink); 2×2 white product tiles
             with the product name only (ZIP-399: no price, no badge); the white card's tiles sit on glassy yellow.
   Cards per view: 2 phone · 3 tablet · 4 desktop (swipe; arrow buttons on desktop when it overflows).
   ========================================================================== */
.shz-catsec {
	--cs-magenta: #ec0f80;
	--cs-magenta-2: #ff3d9e;
	--cs-ink: #1c1219;
	--cs-muted: #6d6168;
	--cs-gold: #e3b866;
	--cs-gap: 8px;
	--cs-per: 2;
	--cs-circles: 7;
	--cs-circle-gap: 6px;
	position: relative;
	font-family: "Hind Siliguri", "Noto Sans Bengali", "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--cs-ink);
}
@media (min-width: 640px) { .shz-catsec { --cs-gap: 12px; --cs-per: 3; --cs-circles: 9; --cs-circle-gap: 10px; } }
@media (min-width: 1024px) { .shz-catsec { --cs-gap: 16px; --cs-per: 4; --cs-circles: 12; --cs-circle-gap: 14px; } }

.shz-catsec a,
.shz-catsec button { -webkit-tap-highlight-color: transparent; }
.shz-catsec a:focus,
.shz-catsec a:focus-visible,
.shz-catsec button:focus,
.shz-catsec button:focus-visible { outline: none; box-shadow: none; }
.shz-catsec img { display: block; max-width: 100%; }

/* ---- Header ---------------------------------------------------------------- */
.shz-catsec__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 12px;
}
.shz-catsec__heading {
	position: relative;
	min-width: 0;
	padding-left: 11px;
}
.shz-catsec__heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 3px;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--cs-magenta-2), var(--cs-magenta));
}
.shz-catsec__title {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: 0;
	color: var(--cs-ink);
}
/* ZIP-334 (owner): no gap between the title and the subtitle. WooCommerce's ".woocommerce-js h2 { margin-bottom: .7em }"
   out-ranked the rule above and pushed the subtitle 14px down on the live site — this stronger selector wins. */
.shz-catsec .shz-catsec__title { margin: 0; padding-bottom: .2em; } /* ZIP-335: just enough room for the vowel signs under the line (ু ূ) — measured on the live site */
.shz-catsec__title span { color: var(--cs-magenta); }
.shz-catsec__sub {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.25;
	color: var(--cs-muted);
}
.shz-catsec__all {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 32px;
	padding: 0 13px;
	border: 1.5px solid var(--cs-magenta);
	border-radius: 999px;
	background: #fff;
	color: var(--cs-magenta);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color .18s ease, color .18s ease;
}
.shz-catsec__all svg,
.shz-catsec__shop svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.shz-catsec__all:hover { background: var(--cs-magenta); color: #fff; }

/* ---- Round category row ------------------------------------------------- */
.shz-catsec__circles {
	display: flex;
	gap: var(--cs-circle-gap);
	margin: 0 calc(var(--cs-circle-gap) / -2) 14px;
	padding: 2px calc(var(--cs-circle-gap) / 2);
	scroll-padding-inline: calc(var(--cs-circle-gap) / 2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.shz-catsec__circles::-webkit-scrollbar { display: none; }
.shz-catsec__circle {
	flex: 0 0 calc((100% - (var(--cs-circles) - 1) * var(--cs-circle-gap)) / var(--cs-circles));
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	color: var(--cs-ink);
	text-decoration: none;
	scroll-snap-align: start;
}
.shz-catsec__ring {
	box-sizing: border-box;
	width: 100%;
	max-width: 92px;
	aspect-ratio: 1;
	padding: 2px;
	border: 1.5px solid var(--cs-magenta); /* ZIP-399 (owner): hot-magenta ring (was gold) */
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	overflow: hidden;
}
.shz-catsec__ring img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: #fde6f1;
}
.shz-catsec__label {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	box-sizing: border-box;
	width: calc(100% + var(--cs-circle-gap));
	margin: 0 calc(var(--cs-circle-gap) / -2);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	letter-spacing: -.1px;
	overflow-wrap: normal;
	word-break: normal;
}

/* ---- Card rail ------------------------------------------------------------ */
.shz-catsec__viewport { position: relative; }
.shz-catsec__rail {
	display: flex;
	gap: var(--cs-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.shz-catsec__rail::-webkit-scrollbar { display: none; }

.shz-catsec__card {
	--card-bg: #fff; /* ZIP-374 (owner): clean white, no cream */
	--card-line: #f3e1cb;
	--card-fade: 255, 255, 255;
	--shop-bg: linear-gradient(135deg, #7d4322 0%, #5b2b13 100%);
	box-sizing: border-box;
	flex: 0 0 calc((100% - (var(--cs-per) - 1) * var(--cs-gap)) / var(--cs-per));
	min-width: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--card-line);
	border-radius: 16px;
	background: var(--card-bg);
	overflow: hidden;
	scroll-snap-align: start;
	box-shadow: none;
}
.shz-catsec__card.is-pink {
	--card-bg: linear-gradient(180deg, #ffeef6 0%, #fde0ee 100%);
	--card-line: #f8cfe2;
	--card-fade: 253, 231, 242;
	--shop-bg: linear-gradient(135deg, #a3125f 0%, #6d0a42 100%);
}

/* Banner: the picture sits on the right and fades into the card colour on the left, under the text. */
/* ZIP-420 (owner, like the app): every card in the row is as tall as the tallest one. A category with fewer products
 * (one row of tiles instead of two) does not leave an empty space under its tiles: its banner grows taller instead
 * (20:19 is only the minimum), so the tiles always sit at the bottom of the card. */
.shz-catsec__hero {
	position: relative;
	display: block;
	flex: 1 0 auto;
	min-height: 0;
	aspect-ratio: 20 / 19;
	overflow: hidden;
	color: var(--cs-ink);
	text-decoration: none;
}
.shz-catsec__banner {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 50%;
	transition: transform .35s ease;
}
.shz-catsec__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		/* ZIP-311 (owner): a softer, shorter fade — rich on the left behind the text, gone by the middle so the right of the picture stays clear */
		linear-gradient(90deg, rgba(var(--card-fade), .92) 0%, rgba(var(--card-fade), .7) 22%, rgba(var(--card-fade), .26) 40%, rgba(var(--card-fade), 0) 56%),
		linear-gradient(0deg, rgba(var(--card-fade), .22) 0%, rgba(var(--card-fade), 0) 22%);
}
.shz-catsec__hero:hover .shz-catsec__banner { transform: scale(1.04); }
.shz-catsec__info {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 10px 10px 12px;
}
.shz-catsec__avatar {
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 2px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1.5px var(--cs-magenta); /* ZIP-399: magenta ring like the circles */
	overflow: hidden;
}
.shz-catsec__card.is-pink .shz-catsec__avatar { box-shadow: 0 0 0 1.5px var(--cs-magenta); }
.shz-catsec__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.shz-catsec__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	max-width: 88%;
	margin-top: 12px;
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.15;
	color: #1a0f16;
	overflow-wrap: anywhere;
}
.shz-catsec__count {
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
	color: #5d4f57;
}
.shz-catsec__shop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	margin-top: auto;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--shop-bg);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	box-shadow: none;
}
.shz-catsec__shop svg { width: 14px; height: 14px; }

/* 2×2 product tiles */
.shz-catsec__grid {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	padding: 6px;
}
.shz-catsec__tile {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 4px;
	border-radius: 12px;
	background: #fff;
	color: var(--cs-magenta);
	text-decoration: none;
	box-shadow: none;
}
.shz-catsec__pic {
	position: relative;
	display: block;
	aspect-ratio: 1 / .92;
	border-radius: 9px;
	overflow: hidden;
	background: #f7f1f4;
}
/* ZIP-317 (owner): small pictures stay fully sharp — no zoom, no fade, no transform layer. */
.shz-catsec__pic img { width: 100%; height: 100%; object-fit: cover; }
.shz-catsec__pname { /* ZIP-399: product name (no price on the homepage) */
	padding: 5px 2px 3px;
	color: #1d1520;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Arrow buttons (shown by JS only when the rail overflows; hidden on touch-size screens) ---- */
.shz-catsec__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid #f3d3e3;
	border-radius: 50%;
	background: #fff;
	color: var(--cs-magenta);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	box-shadow: none;
}
.shz-catsec__nav--prev { left: -12px; }
.shz-catsec__nav--next { right: -12px; }
.shz-catsec__nav[hidden] { display: none; }
.shz-catsec__nav:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 1023px) { .shz-catsec__nav { display: none !important; } }

/* ---- Larger screens ----------------------------------------------------- */
@media (min-width: 640px) {
	.shz-catsec__title { font-size: 24px; }
	.shz-catsec__sub { font-size: 14px; }
	.shz-catsec__all { height: 36px; padding: 0 16px; font-size: 14.5px; }
	.shz-catsec__label { font-size: 12.5px; }
	.shz-catsec__avatar { width: 48px; height: 48px; }
	.shz-catsec__info { padding: 12px 12px 14px; }
	.shz-catsec__name { font-size: 19px; }
	.shz-catsec__count { font-size: 13px; }
	.shz-catsec__shop { height: 32px; padding: 0 15px; font-size: 13.5px; }
	.shz-catsec__grid { gap: 8px; padding: 8px; }
	.shz-catsec__pname { font-size: 14px; }
}
@media (min-width: 1024px) {
	.shz-catsec__head { margin-bottom: 16px; }
	.shz-catsec__title { font-size: 27px; }
	.shz-catsec__sub { font-size: 15px; }
	.shz-catsec__circles { margin-bottom: 18px; }
	.shz-catsec__label { font-size: 13.5px; }
	.shz-catsec__card { border-radius: 18px; }
	.shz-catsec__avatar { width: 54px; height: 54px; }
	.shz-catsec__name { font-size: 21px; }
	.shz-catsec__count { font-size: 14px; }
}
@media (max-width: 420px) {
	.shz-catsec__label { font-size: 10px; letter-spacing: -.2px; }
}
@media (max-width: 360px) {
	.shz-catsec__title { font-size: 18px; }
	.shz-catsec__sub { font-size: 11.5px; }
	.shz-catsec__all { height: 30px; padding: 0 10px; font-size: 12.5px; }
	.shz-catsec__name { font-size: 15px; }
	.shz-catsec__shop { padding: 0 10px; font-size: 12px; }
	.shz-catsec__pname { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.shz-catsec__banner { transition: none; }
}

/* ZIP-399 (owner, every screen): the white category card's product area sits on a light, clear glassy yellow so the
 * white product tiles stand out (no blur, no shadow); the banner on top is unchanged, the pink card stays pink. */
.shz-catsec__card:not(.is-pink) .shz-catsec__grid {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 38%),
		linear-gradient(180deg, #fff6d2 0%, #ffedb0 100%);
}