/* =========================================================================
 * Sabeny — Single Product page + Quick-look modal styles.
 * Imported from elementor-import/single-product.json. All selectors are
 * `.sbn-sp__*` (single product) and `.sbn-quicklook__*` (modal).
 * ========================================================================= */

:root {
	--sbn-teal:   #0F766E;
	--sbn-ink:    #0F172A;
	--sbn-ink-2:  #334155;
	--sbn-line:   #E5E7EB;
	--sbn-soft:   #F8FAFC;
	--sbn-cream:  #FFF8E6;
	--sbn-amber:  #C68413;
	--sbn-green:  #ECFDF5;
	--sbn-green-2:#047857;
	--sbn-radius: 14px;
}

/* ---------- SABENY PILL ON SINGLE PRODUCT ----------
 * Sits over the top-left of the product image, same look as the loop card.
 * Woo's default round splat is removed in product-shortcodes.php; this is
 * the replacement.
 */
.sbn-sp__pill-wrap {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 5;
}
.woocommerce-product-gallery,
.woocommerce div.product div.images { position: relative; }
/* Belt-and-braces: hide the native splat if any theme re-adds it. */
.woocommerce span.onsale,
.woocommerce-product-gallery .onsale { display: none !important; }

/* The WC product-gallery zoom trigger (small magnifier in the upper-right
 * of the gallery image) ships with a sky-high z-index that floats over
 * the sticky header on mobile. Cap it so the header always wins. */
.woocommerce-product-gallery__trigger {
	z-index: 1 !important;
}

/* ---------- LAYOUT WRAPPER (used by [sabeny_single_product]) ---------- */
.sbn-sp {
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 20px 16px;
}
.sbn-sp__hero {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin: 0 0 28px;
}
.sbn-sp__gallery-col,
.sbn-sp__info-col {
	flex: 1 1 360px;
	min-width: 0;
}
/* Anchor the absolute pill over the gallery image */
.sbn-sp__gallery-col { position: relative; }
.sbn-sp__gallery-col img { max-width: 100%; height: auto; }

/* ---------- HERO: brand / title / rating / price / chips / actions ---- */
/* Row that holds the status badge (Sale / Bestseller / Fresh / etc) +
 * brand-or-category pill, sitting above the title. */
.sbn-sp__pills {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
/* The inline wrapper makes sure the .sbn-pill from sabeny_get_badge_for_product
 * (which is normally positioned absolutely on cards) renders cleanly in flow
 * here. */
.sbn-sp__badge-inline { display: inline-flex; }
.sbn-sp__badge-inline .sbn-pill { position: static !important; }

.sbn-sp__brand {
	display: inline-block;
	background: #E0F2F1;
	color: var(--sbn-teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s ease;
}
/* When the pill IS a category link, give it a faint affordance */
a.sbn-sp__brand--link:hover {
	background: #B2DFDB;
	text-decoration: none;
}

.sbn-sp__title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--sbn-ink);
	margin: 12px 0 8px;
}

/* Small "Under the supervision of …" line that surfaces the product's
 * hechsher beneath the title. Stays compact and quiet — doesn't compete
 * with the title or the price below it. */
.sbn-sp__hechsher {
	font-size: 14px;
	color: var(--sbn-ink-2);
	margin: -4px 0 12px;
	line-height: 1.4;
}
.sbn-sp__hechsher-label { opacity: .75; }
.sbn-sp__hechsher strong { color: var(--sbn-ink); font-weight: 700; }

.sbn-sp__rating { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.sbn-sp__rating .star-rating { color: #f5b50a; }
.sbn-sp__rating-num   { font-weight: 600; color: var(--sbn-ink); }
.sbn-sp__rating-count { color: var(--sbn-ink-2); }

.sbn-sp__price {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	color: var(--sbn-ink);
	margin: 0 0 16px;
}
.sbn-sp__price del   { color: #94A3B8; font-weight: 500; margin-right: 8px; }
/* Sale price red per client request (FF0000). Override !important because
 * WC also colours .price ins from its own stylesheet. */
.sbn-sp__price ins,
.sbn-sp__price ins .amount {
	text-decoration: none;
	color: #FF0000 !important;
}

/* Chips row */
.sbn-sp__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.sbn-sp__chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid transparent;
}
.sbn-sp__chip--delivery { background: var(--sbn-green); color: var(--sbn-green-2); border-color: #A7F3D0; }
.sbn-sp__chip--sold     { background: var(--sbn-cream); color: var(--sbn-amber);   border-color: #FDE68A; }
.sbn-sp__chip-icon { font-size: 14px; }
.sbn-sp__chip--standalone { margin: 0; }

/* Actions: qty + big add button (large variant) */
.sbn-sp__actions { gap: 14px; margin: 0 0 18px; }
.sbn-sp__actions--lg .sbn-qty {
	height: 56px;
	border-radius: 12px;
	border: 1px solid var(--sbn-line);
	padding: 0 4px;
}
.sbn-sp__actions--lg .sbn-qty__btn {
	width: 40px; height: 40px;
	font-size: 22px;
}
.sbn-sp__actions--lg .sbn-qty__input {
	width: 56px; font-size: 18px; font-weight: 600;
}
.sbn-sp__actions--lg .sbn-add,
.sbn-sp__add {
	flex: 1 1 auto;
	min-width: 220px;
	height: 56px;
	background: var(--sbn-teal);
	color: #fff;
	border: 0;
	border-radius: 12px;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
}
.sbn-sp__add:hover    { background: #0d635c; }
.sbn-sp__add:active   { transform: translateY(1px); }
.sbn-sp__add[disabled],
.sbn-sp__actions.is-oos .sbn-sp__add {
	background: #94A3B8; cursor: not-allowed;
}
.sbn-sp__actions.is-only-one .sbn-qty,
.sbn-sp__actions.is-only-one .sbn-qty__input { opacity: .55; }
.sbn-sp__only-one {
	flex-basis: 100%;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--sbn-amber);
	font-weight: 600;
}

/* ---------- TRUST GRID (compact) ---------- */
.sbn-sp__trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	padding: 16px;
	background: var(--sbn-soft);
	border: 1px solid var(--sbn-line);
	border-radius: var(--sbn-radius);
	margin: 0 0 24px;
}
.sbn-sp__trust-item {
	display: flex; align-items: center; gap: 10px;
	font-size: 14px; color: var(--sbn-ink-2); font-weight: 500;
}
.sbn-sp__trust-icon { width: 22px; height: 22px; color: var(--sbn-teal); flex-shrink: 0; }
.sbn-sp__trust-icon svg { width: 100%; height: 100%; }

/* ---------- TABS ---------- */
.sbn-sp__tabs { margin: 32px 0; }
.sbn-sp__tabs-nav {
	display: flex; gap: 0;
	flex-wrap: wrap;
	border-bottom: 2px solid var(--sbn-line);
	/* No overflow-x:auto — was causing the whole section to be a
	 * horizontal scroll container. With only 2-3 tabs they fit at every
	 * breakpoint; if there's ever more, let them wrap to a second line. */
}
.sbn-sp__panel { max-height: none; overflow: visible; }
.sbn-sp__tab {
	background: none; border: 0; border-bottom: 3px solid transparent;
	padding: 14px 24px;
	font-size: 16px; color: var(--sbn-ink-2); font-weight: 500;
	cursor: pointer; white-space: nowrap;
	margin-bottom: -2px;
}
.sbn-sp__tab.is-active {
	color: var(--sbn-teal);
	border-bottom-color: var(--sbn-teal);
	font-weight: 700;
}
.sbn-sp__panel { display: none; padding: 24px 0; line-height: 1.7; color: var(--sbn-ink-2); }
.sbn-sp__panel.is-active { display: block; }
.sbn-sp__panel p { margin: 0 0 12px; }

/* ---------- REVIEW CAROUSEL ---------- */
.sbn-sp__carousel {
	position: relative;
	background: var(--sbn-cream);
	border-radius: var(--sbn-radius);
	padding: 28px 24px 32px;
	margin: 32px 0;
}
.sbn-sp__carousel-head { text-align: center; margin: 0 0 18px; }
.sbn-sp__carousel-title {
	font-family: "Caveat", "Brush Script MT", cursive;
	font-size: 30px;
	color: var(--sbn-teal);
	margin: 0;
	font-weight: 600;
}
.sbn-sp__carousel-sub  { color: var(--sbn-ink-2); font-size: 14px; margin: 4px 0 0; }
.sbn-sp__carousel-stars { color: #f5b50a; margin-right: 6px; }

.sbn-sp__carousel-track {
	display: flex; gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 4px 8px;
	-webkit-overflow-scrolling: touch;
}
.sbn-sp__carousel-track::-webkit-scrollbar { display: none; }
.sbn-sp__carousel-card {
	flex: 0 0 240px;
	background: #fff;
	border: 1px solid var(--sbn-line);
	border-radius: 12px;
	padding: 14px;
	scroll-snap-align: start;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.sbn-sp__carousel-rating { color: #f5b50a; margin: 0 0 6px; font-size: 14px; }
.sbn-sp__carousel-text   { font-size: 13px; color: var(--sbn-ink); margin: 0 0 10px; line-height: 1.5; }
.sbn-sp__carousel-byline { font-size: 12px; color: var(--sbn-ink-2); display: flex; gap: 4px; }
.sbn-sp__carousel-name   { font-weight: 600; color: var(--sbn-ink); }

.sbn-sp__carousel-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 36px; height: 36px; border-radius: 50%;
	background: #fff; border: 1px solid var(--sbn-line);
	font-size: 22px; color: var(--sbn-ink); cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,.08);
	display: flex; align-items: center; justify-content: center;
	z-index: 2;
}
.sbn-sp__carousel-arrow--prev { left: 6px; }
.sbn-sp__carousel-arrow--next { right: 6px; }
@media (max-width: 600px) { .sbn-sp__carousel-arrow { display: none; } }

/* ---------- LEAVE A REVIEW ---------- */
.sbn-sp__leave {
	background: var(--sbn-teal);
	color: #fff;
	text-align: center;
	border-radius: var(--sbn-radius);
	padding: 32px 24px;
	margin: 32px 0;
}
.sbn-sp__leave-title {
	font-family: "Caveat", "Brush Script MT", cursive;
	font-size: 32px; margin: 0 0 6px; font-weight: 600;
}
.sbn-sp__leave-copy { font-size: 14px; opacity: .9; margin: 0 0 18px; }
.sbn-sp__leave-btn {
	display: inline-block;
	background: #fff; color: var(--sbn-teal);
	font-weight: 700;
	padding: 12px 28px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .1s ease;
}
.sbn-sp__leave-btn:hover { transform: translateY(-1px); }

/* ---------- RELATED PRODUCTS ----------
 * Just a section header + a top divider. The grid itself comes from the
 * standard Woo [products] shortcode, which is already styled by the loop
 * card template (custom.css). No duplicate card styles here.
 */
.sbn-sp__related {
	border-top: 6px solid var(--sbn-soft);
	padding-top: 32px;
	margin: 40px 0 0;
}
.sbn-sp__related-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 26px; color: var(--sbn-ink);
	margin: 0 0 18px;
}
/* Strip the default Woo wrapper margin so the loop sits flush in our section. */
.sbn-sp__related-loop .woocommerce { margin: 0; }
.sbn-sp__related-loop ul.products { margin: 0; }

/* On mobile force the related products grid to a 2-column layout,
 * regardless of the columns="4" attribute Woo respects on desktop. */
@media (max-width: 600px) {
	.sbn-sp__related-loop ul.products,
	.sbn-sp__related-loop ul.products.columns-3,
	.sbn-sp__related-loop ul.products.columns-4,
	.sbn-sp__related-loop ul.products.columns-5 {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
	.sbn-sp__related-loop ul.products li.product {
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
		clear: none !important;
	}
}

/* ---------- NEWSLETTER ---------- */
.sbn-sp__news {
	background: var(--sbn-ink);
	color: #fff;
	border-radius: var(--sbn-radius);
	padding: 36px 24px;
	margin: 40px 0 0;
	text-align: center;
}
.sbn-sp__news-title {
	font-family: Georgia, serif;
	font-size: 26px; margin: 0 0 8px;
}
.sbn-sp__news-copy { opacity: .8; margin: 0 0 18px; max-width: 480px; margin-inline: auto; }
.sbn-sp__news-form {
	display: flex; gap: 8px; max-width: 460px; margin: 0 auto;
	flex-wrap: wrap;
}
.sbn-sp__news-form input {
	flex: 1 1 220px;
	padding: 12px 16px;
	border-radius: 8px; border: 0;
	font-size: 15px;
}
.sbn-sp__news-form button {
	background: var(--sbn-teal); color: #fff;
	border: 0; padding: 12px 22px;
	border-radius: 8px; font-weight: 700; cursor: pointer;
}
.sbn-sp__news-form button:hover { background: #0d635c; }

/* =========================================================================
 * QUICK-LOOK MODAL — match the second client screenshot.
 * Two-column on desktop: media | body. Single column on mobile.
 * ========================================================================= */
.sbn-modal__panel { max-width: 980px; border-radius: 18px; overflow: hidden; }

.sbn-quicklook {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	min-height: 480px;
}
@media (max-width: 800px) {
	.sbn-quicklook { grid-template-columns: 1fr; }
}

.sbn-quicklook__media {
	position: relative;
	background: #fff;
	display: flex; align-items: center; justify-content: center;
	padding: 32px;
}
.sbn-quicklook__media img { max-width: 100%; height: auto; max-height: 380px; object-fit: contain; }

/* Fresh / Bestseller / etc badge — pinned to upper-left of media.
 * Background colours are intentionally NOT redefined here so the badge
 * inherits the same .sbn-pill--{slug} colours used on the category cards
 * (see custom.css). Position/size only. */
.sbn-quicklook__media .sbn-pill {
	position: absolute; top: 16px; left: 16px;
	z-index: 2;
}

.sbn-quicklook__body {
	padding: 36px 36px 32px;
	display: flex; flex-direction: column;
	gap: 10px;
	background: #fff;
}

.sbn-quicklook__brand {
	color: var(--sbn-teal);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sbn-quicklook__title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	color: var(--sbn-ink);
	margin: 4px 0 0;
	line-height: 1.15;
}

.sbn-quicklook__rating { display: flex; align-items: center; gap: 6px; }
.sbn-quicklook__rating .star-rating { color: #f5b50a; }
.sbn-quicklook__rating-num   { font-weight: 600; color: var(--sbn-ink); }
.sbn-quicklook__rating-count { color: var(--sbn-ink-2); font-size: 14px; }

.sbn-quicklook__price {
	font-size: 30px;
	font-weight: 700;
	color: var(--sbn-ink);
	margin: 6px 0 4px;
}

.sbn-quicklook__desc {
	color: var(--sbn-ink-2);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}
.sbn-quicklook__desc p { margin: 0 0 8px; }

.sbn-quicklook__delivery {
	display: flex; align-items: center; gap: 10px;
	background: var(--sbn-green);
	color: var(--sbn-green-2);
	border: 1px solid #A7F3D0;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 600;
	margin: 6px 0 4px;
}
.sbn-quicklook__delivery svg { width: 22px; height: 22px; flex-shrink: 0; }

.sbn-quicklook__actions { margin-top: 8px; }
.sbn-quicklook__actions .sbn-qty {
	height: 56px;
	border-radius: 12px;
	border: 1px solid var(--sbn-line);
	padding: 0 4px;
}
.sbn-quicklook__actions .sbn-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	font-size: 22px;
	font-weight: 600;
	background: transparent !important;
	color: var(--sbn-ink, #0F172A) !important;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.sbn-quicklook__actions .sbn-qty__btn:hover,
.sbn-quicklook__actions .sbn-qty__btn:focus,
.sbn-quicklook__actions .sbn-qty__btn:focus-visible,
.sbn-quicklook__actions .sbn-qty__btn:active {
	background: var(--sbn-soft, #F8FAFC) !important;
	color: var(--sbn-ink, #0F172A) !important;
	outline: 0;
	box-shadow: none;
}
.sbn-quicklook__actions .sbn-qty__input {
	width: 56px; font-size: 18px; font-weight: 700;
	text-align: center; border: 0; background: none;
	-moz-appearance: textfield;
}
.sbn-quicklook__actions .sbn-qty__input::-webkit-outer-spin-button,
.sbn-quicklook__actions .sbn-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}
.sbn-quicklook__actions .sbn-add {
	flex: 1 1 auto;
	min-width: 200px;
	height: 56px;
	background: var(--sbn-teal);
	color: #fff;
	border: 0;
	border-radius: 12px;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}
.sbn-quicklook__actions .sbn-add:hover { background: #0d635c; }

.sbn-quicklook__more {
	display: block;
	text-align: center;
	color: var(--sbn-teal);
	font-weight: 700;
	text-decoration: none;
	margin-top: 14px;
	font-size: 15px;
}
.sbn-quicklook__more:hover { text-decoration: underline; }

/* The shared modal close button — bigger circular target */
.sbn-modal__close {
	position: absolute; top: 14px; right: 14px;
	width: 36px; height: 36px;
	background: #F1F5F9; color: var(--sbn-ink);
	border: 0; border-radius: 50%;
	font-size: 20px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	z-index: 5;
}
.sbn-modal__close:hover { background: var(--sbn-line); }

/* =========================================================================
 * "Only 1 left" alert modal — small confirmation popover.
 * ========================================================================= */
.sbn-stock-modal { display: none; }
.sbn-stock-modal[aria-hidden="false"] {
	display: flex;
	position: fixed; inset: 0;
	background: rgba(15,23,42,.55);
	z-index: 9999;
	align-items: center; justify-content: center;
	padding: 20px;
}
.sbn-stock-modal__panel {
	background: #fff; border-radius: 14px;
	padding: 28px 24px;
	max-width: 380px; width: 100%;
	text-align: center;
	box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.sbn-stock-modal__icon { font-size: 32px; margin: 0 0 6px; }
.sbn-stock-modal__title { font-size: 18px; font-weight: 700; color: var(--sbn-ink); margin: 0 0 6px; }
.sbn-stock-modal__copy  { font-size: 14px; color: var(--sbn-ink-2); margin: 0 0 18px; }
.sbn-stock-modal__btn {
	background: var(--sbn-teal); color: #fff;
	border: 0; border-radius: 999px;
	padding: 10px 26px;
	font-weight: 700; cursor: pointer;
}