/**
 * Kosher Category template — scoped styles.
 * Brand tokens: #604136 / #4c312f / #eee6da, Heebo / Tubic-Sans.
 */

.gaya-kosher-category {
	--gk-brown: #604136;
	--gk-brown-dark: #4c312f;
	--gk-cream: #eee6da;
	--gk-cream-soft: #f7f1e8;
	--gk-text: #2b1f1c;
	--gk-radius: 14px;
	--gk-shadow: 0 4px 18px rgba(76, 49, 47, 0.08);
	--gk-gap: clamp(20px, 4vw, 48px);
	color: var(--gk-text);
	font-family: "Heebo", "Tubic-Sans", system-ui, sans-serif;
	width: 100%;
	max-width: 1200px;
	/* This <main> is the flex child of Astra's `.ast-container`. Without an
	 * explicit min-width it keeps the default `min-width: auto`, so the
	 * max-width acts like a hard 1200px width and the column overflows the
	 * viewport on screens narrower than ~1280px (collapsing the product grid
	 * to two clipped columns). `min-width: 0` lets it shrink to the available
	 * width like the standard archive's content column does. */
	min-width: 0;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

/* Astra renders this template's `.ast-container` with `max-width: fit-content`
 * (no-sidebar layout), which sizes to the 1200px <main> and lets it overflow
 * narrow viewports. Match the standard archive's container cap so the content
 * column tracks the viewport instead. Scoped to the kosher term body class. */
body.term-265 #content > .ast-container {
	max-width: 1480px;
	width: 100%;
}

.gaya-kosher-category section + section { margin-block-start: clamp(48px, 7vw, 96px); }

/* Headings */
.gaya-kosher-category .gk-h1 {
	font-family: "Tubic-Sans", "Heebo", sans-serif;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	color: var(--gk-brown-dark);
	line-height: 1.2;
	margin: 0 0 12px;
	text-align: center;
}
.gaya-kosher-category .gk-h2 {
	font-family: "Tubic-Sans", "Heebo", sans-serif;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 700;
	color: var(--gk-brown-dark);
	text-align: center;
	margin: 0 0 24px;
}

/* Buttons — production-matched (Elementor button parity) */
.gaya-kosher-category .gk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 16px 60px;
	border-radius: 30px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border: 1px solid #423627;
	transition: background-color .2s ease, color .2s ease, fill .2s ease;
}
.gaya-kosher-category .gk-btn--primary {
	background: #604524;
	color: #fff;
	fill: #fff;
}
.gaya-kosher-category .gk-btn--primary:hover,
.gaya-kosher-category .gk-btn--primary:focus {
	background: #fff;
	color: #604524;
	fill: #604524;
}
.gaya-kosher-category .gk-btn--secondary {
	background: #fff;
	color: #423627;
	fill: #423627;
	padding: 14px 36px 10px;
}
.gaya-kosher-category .gk-btn--secondary:hover,
.gaya-kosher-category .gk-btn--secondary:focus {
	background: #423627;
	color: #fff;
	fill: #fff;
}
.gaya-kosher-category .gk-btn__icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
	line-height: 0;
}
.gaya-kosher-category .gk-btn__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
@media (max-width: 767px) {
	.gaya-kosher-category .gk-btn { font-size: 18px; }
}

/* ============ PAGE TITLE (H1 only) ============ */
.gk-page-title {
	margin-block-start: 24px;
	margin-block-end: clamp(24px, 4vw, 40px);
	text-align: center;
}
.gk-page-title .gk-h1 { margin: 0; }

/* ============ HERO (production-matched, Elementor parity) ============ */
.gk-hero {
	background: #fff;
	padding: clamp(50px, 8vw, 100px) 10px;
	border-radius: 0;
}
.gk-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 5vw, 60px);
	align-items: center;
	max-width: 1200px;
	margin-inline: auto;
}
.gk-hero__copy { text-align: center; }
.gk-hero__lede {
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: clamp(30px, 3vw, 40px);
	font-weight: 400;
	color: var(--gk-text);
	margin: 0 0 28px;
}
.gk-hero__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}
.gk-hero__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}
@media (max-width: 767px) {
	.gk-hero { padding: 50px 10px; }
	.gk-hero__inner { grid-template-columns: 1fr; }
	.gk-hero__media { order: -1; }
	.gk-hero__lede { font-size: 20px; line-height: 30px; }
}

/* ============ HALACHA (production-matched) ============ */
.gk-halacha {
	background: #fff;
	padding: clamp(40px, 6vw, 60px) 10px;
}
.gk-halacha__heading {
	text-align: center;
	margin-bottom: clamp(32px, 5vw, 56px);
	max-width: 900px;
	margin-inline: auto;
}
.gaya-kosher-category .gk-halacha .gk-h2 {
	font-weight: 600;
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.25;
	margin: 0 0 18px;
}
.gk-halacha__sub {
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: clamp(30px, 3vw, 40px);
	font-weight: 400;
	color: var(--gk-text);
	margin: 0;
}
.gk-halacha__sub strong { color: var(--gk-brown-dark); }
.gk-halacha__grid {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 1200px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 4vw, 48px);
}
.gk-halacha__item {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	text-align: center;
}
.gk-halacha__icon {
	width: 80px;
	height: auto;
	object-fit: contain;
	margin: 0 auto 10px;
	display: block;
	transition: transform .3s ease;
}
.gk-halacha__title {
	margin: 0 0 8px;
	font-family: "Tubic-Sans", "Heebo", sans-serif;
	font-size: clamp(20px, 1.9vw, 24px);
	line-height: clamp(28px, 2.4vw, 32px);
	font-weight: 600;
	color: #604524;
}
.gk-halacha__item p {
	margin: 0;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: clamp(24px, 2vw, 26px);
	font-weight: 400;
	color: #604524;
}
@media (max-width: 767px) {
	.gk-halacha__grid {
		grid-template-columns: 1fr;
		max-width: 420px;
	}
}

/* ============ PRODUCTS ============ */
.gk-products { scroll-margin-top: 100px; }
.gk-products__head { text-align: center; margin-bottom: 28px; }

/* Product grid — match the "איפור מינרלי" archive exactly.
 *
 * The custom kosher template renders the WooCommerce loop outside Astra's
 * `.ast-container` wrapper, so the theme's responsive column rules
 * (`.ast-container .woocommerce ul.products` → 3 cols ≤999px, 2 cols ≤768px)
 * never reach this grid. Left alone, the grid keeps WooCommerce's default
 * `repeat(4, 1fr)` where `1fr` = `minmax(auto, 1fr)`; the 300px product
 * images then force a ~1200px minimum that overflows narrow viewports and
 * collapses the visible grid to 2 columns. Re-declaring the columns with
 * `minmax(0, 1fr)` (so cells may shrink below the image width) and the same
 * 4 → 3 → 2 breakpoints restores parity with the mineral-makeup page. */
.gaya-kosher-category ul.products { margin-top: 0; }
/* Selector matches WooCommerce's own `.woocommerce ul.products:not(.elementor-grid)`
 * (specificity 0,3,1) and adds `.gaya-kosher-category` (0,4,1) so the
 * shrinkable `minmax(0, 1fr)` tracks win over WooCommerce's `repeat(4, 1fr)`
 * (whose implicit `minmax(auto, 1fr)` lets the 300px product image set a
 * hard 1200px minimum and overflow the column). 4 → 3 → 2 breakpoints mirror
 * the mineral-makeup archive. */
.gaya-kosher-category.woocommerce ul.products:not(.elementor-grid) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 999px) {
	.gaya-kosher-category.woocommerce ul.products:not(.elementor-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.gaya-kosher-category.woocommerce ul.products:not(.elementor-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Product thumbnail — square box with the full image, like the mineral archive.
 *
 * The mineral page is rendered by the Elementor product-archive template, whose
 * thumbnail + hover-swap CSS keeps the photo scaled to a square cell. This
 * custom template uses the raw WooCommerce loop, so those archive-scoped rules
 * never match: the <img> keeps its native 300px while a global Elementor rule
 * (post-101823.css) pins the product link to a fixed `height` on mobile — the
 * `overflow:hidden` link then clips the oversized photo (obvious on full-frame
 * images such as "ערכת מראה לשבת"). We rebuild the thumbnail self-contained:
 * a 1:1 link box with both images absolutely filling it via object-fit:contain
 * (square source ⇒ no letterboxing, no crop), and the secondary image faded in
 * on hover. Specificity 0,4,x beats the theme (0,3,1) and Elementor (0,2,1)
 * link-height rules. */
.gaya-kosher-category ul.products li.product .astra-shop-thumbnail-wrap > a {
	display: block;
	position: relative;
	width: 100%;
	/* Leftover Elementor CSS for the old kosher page (post-101823.css) sets
	 * `a.woocommerce-LoopProduct-link { height: 250px !important; object-fit:
	 * cover !important }` at ≤767px — an `!important` that no plain selector can
	 * beat, forcing a 250px-tall box that crops the photo. Override with
	 * `!important` so the link becomes a clean 1:1 square. */
	height: auto !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.gaya-kosher-category ul.products li.product .astra-shop-thumbnail-wrap > a img {
	position: absolute;
	inset: 0;
	/* The same leftover Elementor stylesheet sets `.astra-shop-thumbnail-wrap img
	 * { min-width:300px !important; min-height:300px !important }`. That floor
	 * keeps the image at its native 300px even when the cell is smaller, so it
	 * overflows the square link box and gets clipped to a corner. Releasing the
	 * min-* floor lets width/height:100% size the image to the box. */
	min-width: 0 !important;
	min-height: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
}
.gaya-kosher-category ul.products li.product .astra-shop-thumbnail-wrap > a img.show-on-hover {
	opacity: 0;
	transition: opacity .3s ease;
}
.gaya-kosher-category ul.products li.product:hover .astra-shop-thumbnail-wrap > a img.show-on-hover {
	opacity: 1;
}

/* ============ ARCHIVE REVIEWS (Elfsight, injected after shop loop) ============ */
.gaya-kosher-category .gaya-archive-reviews { margin-block-start: clamp(48px, 7vw, 96px); }
.gaya-kosher-category .gaya-archive-reviews .container {
	width: 100%;
	max-width: 100%;
	display: block;
}

/* ============ KASHRUT ============ */
.gk-kashrut { text-align: center; }
.gk-kashrut__sub {
	margin: 0 0 28px;
	color: var(--gk-brown);
	font-size: 16px;
}
.gk-kashrut__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gk-gap);
}
.gk-kashrut__item {
	display: block;
	background: #fff;
	border: 1px solid var(--gk-cream);
	border-radius: var(--gk-radius);
	overflow: hidden;
	box-shadow: var(--gk-shadow);
	transition: transform .15s ease;
}
.gk-kashrut__item:hover { transform: translateY(-2px); }
.gk-kashrut__item img { width: 100%; height: auto; display: block; }
@media (max-width: 768px) {
	.gk-kashrut__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* ============ CONTACT ============ */
.gk-contact {
	background: var(--gk-brown-dark);
	color: #fff;
	border-radius: var(--gk-radius);
	padding: clamp(32px, 5vw, 64px);
	text-align: center;
}
.gk-contact .gk-h2 { color: #fff; margin-bottom: 12px; }
.gk-contact p { margin: 0 0 24px; font-size: 17px; line-height: 1.6; }
.gk-contact__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.gk-contact .gk-btn--secondary { color: #fff; border-color: #fff; }
.gk-contact .gk-btn--secondary:hover { background: #fff; color: var(--gk-brown-dark); }
.gk-contact .gk-btn--primary { background: #fff; color: var(--gk-brown-dark); }
.gk-contact .gk-btn--primary:hover { background: var(--gk-cream); }

/* ============ ARTICLE / GUIDE ============ */
.gk-article__inner {
	width: 100%;
}
.gk-article__hero {
	margin-bottom: 28px;
}
.gk-article__title {
	margin: 0 0 12px;
	font-size: clamp(26px, 3.2vw, 36px);
	text-align: start;
}
.gk-article__intro {
	font-size: clamp(17px, 1.4vw, 19px);
	line-height: 1.75;
	color: var(--gk-brown-dark);
	margin: 0;
}

/* Body typography — modular scale */
.gk-article__body { font-size: 17px; line-height: 1.8; color: var(--gk-text); }
.gk-article__body h3 {
	font-family: "Tubic-Sans", "Heebo", sans-serif;
	font-size: clamp(21px, 1.8vw, 26px);
	color: var(--gk-brown-dark);
	margin: 2em 0 .5em;
	line-height: 1.3;
}
.gk-article__body h3:first-child { margin-top: 0; }
.gk-article__body h4 {
	font-family: "Heebo", sans-serif;
	font-size: clamp(17px, 1.3vw, 19px);
	font-weight: 700;
	color: var(--gk-brown);
	margin: 1.5em 0 .4em;
	line-height: 1.4;
}
.gk-article__body p { margin: 0 0 16px; }
.gk-article__body strong { color: var(--gk-brown-dark); }
.gk-article__body a {
	color: var(--gk-brown);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.gk-article__body a:hover { color: var(--gk-brown-dark); }

/* Lists */
.gk-article__list {
	margin: 0 0 20px;
	padding-inline-start: 24px;
}
.gk-article__list li { margin-bottom: 6px; }

/* Do/Don't list */
.gk-article__dodont {
	list-style: none;
	padding: 0;
	margin: 16px 0 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
}
.gk-article__dodont li {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 15px;
	position: relative;
	padding-inline-start: 36px;
	background: var(--gk-cream-soft);
}
.gk-article__dodont li::before {
	position: absolute;
	inset-inline-start: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
	font-size: 16px;
}
.gk-article__dodont li.gk-do { border-inline-start: 3px solid #5a8d4f; }
.gk-article__dodont li.gk-do::before { content: "✓"; color: #5a8d4f; }
.gk-article__dodont li.gk-dont { border-inline-start: 3px solid #b85a4c; }
.gk-article__dodont li.gk-dont::before { content: "✗"; color: #b85a4c; }
@media (max-width: 600px) {
	.gk-article__dodont { grid-template-columns: 1fr; }
}

/* Product trio */
.gk-article__trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 24px 0 32px;
}
.gk-article__trio-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--gk-brown-dark);
	border-radius: var(--gk-radius);
	padding: 16px 12px;
	transition: transform .15s ease, background-color .15s ease;
}
.gk-article__trio-item:hover { background: var(--gk-cream); }
.gk-article__trio-item:hover { transform: translateY(-2px); text-decoration: none; }
.gk-article__trio-item img {
	width: 100%;
	max-width: 160px;
	height: auto;
	border-radius: 10px;
	margin-bottom: 10px;
}
.gk-article__trio-item span { font-size: 14px; font-weight: 600; }
@media (max-width: 600px) {
	.gk-article__trio { grid-template-columns: 1fr 1fr; }
	.gk-article__trio-item:nth-child(3) { grid-column: 1 / -1; max-width: 50%; margin-inline: auto; }
}

/* Full face kit highlight card */
.gk-article__kit {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	margin: 24px 0 32px;
	background: var(--gk-cream-soft);
	color: var(--gk-brown-dark);
	border-radius: var(--gk-radius);
	text-decoration: none;
	transition: transform .15s ease, background-color .15s ease;
}
.gk-article__kit:hover { transform: translateY(-2px); background: var(--gk-cream); color: var(--gk-brown-dark); text-decoration: none; }
.gk-article__kit img {
	width: 140px;
	height: 140px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
}
.gk-article__kit-text { display: flex; flex-direction: column; gap: 4px; }
.gk-article__kit-text strong { font-size: 20px; font-family: "Tubic-Sans", "Heebo", sans-serif; color: var(--gk-brown-dark); }
.gk-article__kit-text span { font-size: 15px; color: var(--gk-text); }
.gk-article__kit-text em { font-style: normal; font-weight: 600; font-size: 14px; margin-top: 8px; color: var(--gk-brown); }
@media (max-width: 600px) {
	.gk-article__kit { flex-direction: column; text-align: center; }
	.gk-article__kit img { width: 120px; height: 120px; }
}