/**
 * Sand Israel — design contract tokens.
 * Source of truth: Bee1-PowerHouse/clients/sandisrael.co.il/bee1-migration/DESIGN-CONTRACT.md
 * (extracted from legacy Elementor Kit 22 on 2026-07-18).
 */

:root {
	/* colors */
	--sand-accent: #E42D7E;
	--sand-primary: #060606;
	--sand-secondary: #010101;
	--sand-text: #343434;
	--sand-text-gray: #585656;
	--sand-panel: #F9F9F9;
	--sand-accent-soft: #FDEEF4;

	/* typography */
	--sand-font-main: 'Noto Sans Hebrew', 'Segoe UI', Arial, sans-serif;
	--sand-font-display: 'Open Sans Hebrew', 'Noto Sans Hebrew', Arial, sans-serif;
	--sand-fs-body: 18px;
	--sand-fs-body-mobile: 16px;
	--sand-fs-h1: 26px;
	--sand-fs-h2: 22px;
	--sand-fs-display: 40px;
	--sand-lh: 1.4;

	/* layout */
	--sand-container: 1460px;
	--sand-radius-pill: 100px;
}

body {
	font-family: var(--sand-font-main);
	font-size: var(--sand-fs-body);
	line-height: var(--sand-lh);
	color: var(--sand-text);
}

h1 { font-size: var(--sand-fs-h1); font-weight: 600; }
h2 { font-size: var(--sand-fs-h2); font-weight: 600; }
h3 { font-size: var(--sand-fs-h2); font-weight: 500; }
h4, h5, h6 { font-size: var(--sand-fs-h2); }

a { color: var(--sand-accent); }

/* buttons — white text on accent, pill shape (legacy contract) */
.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt {
	background-color: var(--sand-accent);
	color: #fff;
	border-radius: var(--sand-radius-pill);
}

.woocommerce-message::before,
.woocommerce div.product .stock {
	color: var(--sand-accent);
}
.woocommerce-message {
	border-top-color: var(--sand-accent);
}

@media (max-width: 767px) {
	body { font-size: var(--sand-fs-body-mobile); }
}

/* --- ported from legacy customizer CSS (still-relevant selectors only) --- */

/* SPP fallback only: active SPE pages own their purchase markup and styling. */
.cart-buttons-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.size-chart-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 20px;
	border-radius: var(--sand-radius-pill);
	border: 1px solid currentColor;
	background: #fff;
	color: inherit;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
a.size-chart-btn img {
	filter: brightness(0) saturate(100%) invert(26%) sepia(86%) saturate(3560%) hue-rotate(318deg) brightness(95%) contrast(87%);
}

h1.product_title { font-size: var(--sand-fs-h1); }

del { margin-inline-end: 10px; }

.woocommerce .woocommerce-breadcrumb { margin: 0; }

.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes td p {
	padding: 10px;
	font-style: normal;
}

/* -------------------------------------------------------------------------
 * Category archive hero (ULG show_category_banner)
 * Uses the product_cat thumbnail: current term first, else parent
 * (category_banner_inherit_parent=1). Crop square Woo thumbs into a banner.
 * ---------------------------------------------------------------------- */
figure.bee1-ulg-category-hero {
	width: 100%;
	max-width: none;
	margin: 0 0 1.25rem;
	overflow: hidden;
	border-radius: 0;
	line-height: 0;
}
/* Beat ULG default `height:auto` (same file loads after tokens on some pages). */
figure.bee1-ulg-category-hero > img.bee1-ulg-category-hero__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: clamp(180px, 28vw, 360px) !important;
	object-fit: cover !important;
	object-position: center;
}

/* -------------------------------------------------------------------------
 * Single product gallery — undo Woo default max-width:50%/float that
 * kicks in under bee1-ultra-theme (was invisible under hello-elementor
 * because Elementor owned the full column). Gallery stays inside its
 * Elementor column; only fills that column 100%.
 * ---------------------------------------------------------------------- */
.single-product .woo-variation-product-gallery,
.single-product .woocommerce-product-gallery,
.single-product .woo-variation-gallery-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}
.single-product .woo-variation-gallery-slider,
.single-product .woo-variation-gallery-slider img,
.single-product .woocommerce-product-gallery__image img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* --- SPP gallery parity fix (2026-07-18) ---
   woo-variation-gallery ships per-theme CSS: on the GeneratePress-based
   bee1-ultra-theme it falls back to the classic Woo layout (width:50% + float),
   but the product page renders via an Elementor template where the gallery
   widget column already bounds the width. Restore the hello-elementor behavior
   (100%, no float) that production has. Remove once bee1-single-product-engine
   owns the SPP. */
.single-product .elementor-widget-woo_variation_gallery .woo-variation-product-gallery,
.single-product div.product .woo-variation-product-gallery {
	width: 100% !important;
	max-width: 100% !important; /* plugin inline CSS injects max-width:50% */
	float: none !important;
}

/* 0.1.4 — ULG card brand row (legacy card parity: pink brand above title) */
.bee1-ulg-card__brand {
    margin: 0 0 2px;
    line-height: 1.2;
}

.bee1-ulg-card__brand a {
    color: var(--sand-accent, #E42D7E);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.bee1-ulg-card__brand a:hover {
    text-decoration: underline;
}

/* 0.1.5 — bee1-filters: the parent theme paints bare <button> with the accent bg,
   which made the pink-text "+N more" collapse toggles pink-on-pink (invisible).
   0.1.26 — this reset was too wide: it also stripped the background off the
   ACTIVE-FILTER chips, which keep `color:#fff !important` from the plugin, so
   every applied filter rendered white-on-pale-pink and could not be read.
   The chips are excluded here; the plugin owns their colour. */
.bee1-filters button:not(.button):not(.bee1-active-filter) {
    background: transparent;
    color: var(--sand-accent, #E42D7E);
    border: 0;
    padding: 0;
    font-weight: 600;
}

/* 0.1.24 — category header band: quiet brand tint, without a legacy image request. */
.sand-cat-band {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block: 0 18px;
    padding: 30px 16px 22px;
    text-align: center;
    background: var(--sand-accent-soft, #FDEEF4);
}

/* ULG Full owns the viewport canvas; avoid 100vw scrollbar overflow there. */
body.bee1-ulg-page.bee1-ulg-layout-full .sand-cat-band {
    width: 100%;
    margin-inline: 0;
}

.sand-cat-band__title {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 800;
    color: #111;
}

.sand-cat-band .woocommerce-breadcrumb {
    margin: 0;
    font-size: 14px;
    color: #767676;
}

.sand-cat-band .woocommerce-breadcrumb a {
    color: #767676;
    text-decoration: none;
}

@media (max-width: 767px) {
    .sand-cat-band__title {
        font-size: 24px;
    }
}

/* 0.1.7 — header smart-search fills its column like the legacy jet search did */
.elementor-widget-shortcode .bee1-smart-search,
.elementor-widget-shortcode .bee1-search {
    width: 100%;
    margin-inline: auto;
}

.bee1-smart-search .bee1-smart-search__box {
    border-radius: 999px;
}

/* 0.1.8 — the swapped shortcode widget lost the old jet widget's custom width;
   size the wrapper itself so the search fills the header middle column */
.elementor-widget-shortcode:has(.bee1-smart-search),
.elementor-widget-shortcode:has(.bee1-search) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
}

.bee1-search .bee1-search__field,
.bee1-search .bee1-search__input {
    width: 100%;
}

/* 0.1.12 — the legacy pojo-a11y off-canvas toolbar (left:-180px) inflates scrollWidth
   on RTL and shows a phantom horizontal scrollbar; clip it without creating a scroll trap */
body {
    overflow-x: clip;
}

/* 0.1.13 — BUAI recommendations section on product pages: same grid language as the archive
   (4 columns desktop / 2 mobile, clean rows) instead of the broken stacked list */
.buai-recommendations ul.products::before,
.buai-recommendations ul.products::after {
    content: none !important; /* Woo clearfix pseudo becomes a phantom grid item */
}

.buai-recommendations ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.buai-recommendations ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 10px 14px;
    text-align: center;
}

.buai-recommendations ul.products li.product img {
    width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    .buai-recommendations ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .buai-recommendations ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* 0.1.14 — kill the duplicate plain woo-variation-swatches set on recommendation cards;
   the SPE/ULG set (diagonal strike on unavailable sizes) is the kept design */
.buai-recommendations .variable-items-wrapper,
.buai-recommendations .wvs-archive-variation-wrapper {
    display: none !important;
}

/* 0.1.16 — single product brand row above the title */
.sand-product-brand {
    order: 18; /* SPE yn summary is a flex column: badges 15 < brand 18 < title 20 */
    margin: 0 0 2px;
    line-height: 1.2;
}

.sand-product-brand a {
    color: var(--sand-accent, #E42D7E);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.sand-product-brand a:hover {
    text-decoration: underline;
}

/* bee1-cart-checkout drawer — Sand brand tokens */
.bee1cc-minicart {
    --bee1cc-accent: #E42D7E;
    --bee1cc-button-bg: #E42D7E;
    --bee1cc-button-hover: #B21760;
    --bee1cc-button-text: #fff;
    --bee1cc-font: "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
    --bee1cc-font-heading: "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
}


/* 0.1.18 — homepage design language on the product page: trust band + reviews carousel */
.trust--product { padding-block: 28px; border-block: 1px solid rgba(0,0,0,.08); margin-block: 34px 8px; }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px; width: min(1460px, calc(100% - 32px)); margin-inline: auto; }
@media (min-width: 800px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }
.trust__item { display: grid; justify-items: center; text-align: center; gap: 3px; }
.trust__ico { width: 46px; height: 46px; border-radius: 50%; background: #F8D6E6; color: #B21760; display: grid; place-items: center; margin-bottom: 6px; }
.trust__item strong { color: #121212; font-size: .95rem; }
.trust__item span:last-child { color: #6a6a6a; font-size: .84rem; }

.section--reviews { padding-block: 40px 26px; }
.section--reviews .section__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.section--reviews .label { display: inline-block; margin-bottom: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: var(--sand-accent, #E42D7E); text-transform: uppercase; }
.section--reviews .h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 800; color: #121212; }
.cnav { display: flex; gap: 8px; }
.cnav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); background: #fff; color: #121212; cursor: pointer; display: grid; place-items: center; transition: all .2s ease; }
.cnav button:hover { border-color: var(--sand-accent, #E42D7E); color: var(--sand-accent, #E42D7E); background: #F8D6E6; }
.rtrack { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rtrack::-webkit-scrollbar { display: none; }
.rcard { flex: 0 0 min(85vw, 340px); scroll-snap-align: start; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.rcard__stars { color: #E8A317; letter-spacing: 2px; font-size: .95rem; }
.rcard p { margin: 0; color: #333; font-size: .95rem; line-height: 1.6; flex: 1; }
.rcard__author { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.rcard__avatar { width: 40px; height: 40px; border-radius: 50%; background: #F8D6E6; color: #B21760; display: grid; place-items: center; font-weight: 800; }
.rcard__author strong { color: #121212; }

/* 0.1.20 — search results title */
.sand-search-title {
    width: min(1460px, calc(100% - 32px));
    margin: 26px auto 6px;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 800;
    color: #121212;
    text-align: center;
}

/* 0.1.27 — the sticky filter sidebar had no scroll of its own.
   ULG 0.2.103 sets `position:sticky; top:92px` on `.bee1-ulg-filters-panel`
   with no max-height and no overflow, so as soon as the open facets are taller
   than the viewport the only way to reach the bottom of the filters is to
   scroll the whole archive down to the pagination. Bounding the sticky panel to
   the free viewport height and giving it its own scroller fixes that without
   touching ULG — the plugin here is 48 versions behind canonical and must not
   be upgraded as a side effect of a layout fix.
   `overscroll-behavior: contain` stops the page from scrolling on when the
   filter list reaches its end. */
.bee1-ulg-shell[data-filters-desktop="sidebar"][data-filters-sticky="1"] .bee1-ulg-filters-panel {
    max-height: calc(100vh - 92px - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-inline-end: 4px;
}

/* Thin, on-brand scrollbar so the extra scroller does not read as a browser artefact. */
.bee1-ulg-shell[data-filters-desktop="sidebar"][data-filters-sticky="1"] .bee1-ulg-filters-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--sand-accent, #E42D7E) transparent;
}
.bee1-ulg-shell[data-filters-desktop="sidebar"][data-filters-sticky="1"] .bee1-ulg-filters-panel::-webkit-scrollbar {
    width: 8px;
}
.bee1-ulg-shell[data-filters-desktop="sidebar"][data-filters-sticky="1"] .bee1-ulg-filters-panel::-webkit-scrollbar-thumb {
    background: var(--sand-accent, #E42D7E);
    border-radius: 999px;
}