/*
 * RC3 — the client's gap list of 23.10 (wave 1), CSS part.
 *
 * One file, loaded last (inc/enqueue.php, priority 10000, after touch-hover),
 * so every rule here is a deliberate override of an earlier layer and the whole
 * wave can be reviewed or rolled back in one place. Item numbers are the
 * client's own list.
 *
 * @package sorkx-glass
 */

/* ── Item 1: a distinctive, bolder heading face for the homepage ──────────
   Secular One (SIL OFL 1.1, assets/fonts/OFL-secular-one.txt), self-hosted,
   split by unicode-range like the other faces in fonts.css. One weight: it is
   a display face, heavy by design. The body font is unchanged. */
@font-face {
	font-family: 'Secular One';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/secular-one-hebrew.woff2') format('woff2');
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
	font-family: 'Secular One';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/secular-one-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root { --sg-font-heading: 'Secular One', 'Rubik', 'Rubik Fallback', system-ui, sans-serif; }

/* Section headings: the new face, centred. */
/* !important: the theme's CSS bundle prints AFTER this file and sets the
   heading family with selectors of its own (measured: Heebo 800 won). */
body.home .sg-section__title,
body.home .sg-tc__title,
body.home .sg-hb__heading,
body.home .sg-pcircles__title,
body.home .sg-lead__title,
body.home .sg-nl__title,
body.home .sg-about .sg-section__title {
	font-family: var(--sg-font-heading) !important;
	font-weight: 400 !important;   /* the face is already heavy; 700 would be faux-bold */
	letter-spacing: 0 !important;
	text-align: center !important;
	margin-inline: auto;
}
/* The two-column sections centre their heading inside their own column. */
body.home .sg-about__copy,
body.home .sg-lead__intro,
body.home .sg-nl__intro { text-align: center; }

/* Banner cards: same face for the title, the card copy centred under it. */
body.home .sg-hb__title { font-family: var(--sg-font-heading) !important; font-weight: 400 !important; letter-spacing: 0; }
body.home .sg-hb__copy { text-align: center; align-items: center; }
body.home .sg-hb__cta { align-self: center; }

/* ── Items 15 + 27: product images show WHOLE, never cropped ──────────────
   A cover crop cut the edges off portrait and panoramic prints. contain keeps
   the whole picture; the free space is filled with the page's warm neutral so
   the card or frame keeps its size. */
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img.wp-post-image,
.single-product .woocommerce-product-gallery img,
.single-product img.wp-post-image {
	object-fit: contain !important;
	background: #f6f3ee;
}
/* Homepage banners: the photograph shows whole, on the same neutral. */
body.home .sg-hb__media { background: #f6f3ee; }
body.home .sg-hb__img { object-fit: contain !important; object-position: center !important; }

/* ── Item 21: the sort dropdown's arrow sat on top of the text ────────────
   s62-shop.css padded with physical sides (40px RIGHT, 16px left) while the
   arrow is drawn on the LEFT. Logical sides: in RTL the arrow side is the
   inline END. */
.woocommerce-ordering select,
.woocommerce .woocommerce-ordering select {
	padding-inline-start: 16px;
	padding-inline-end: 40px;
	background-position: left 14px center;
}

/* ── Item 22: accessibility button smaller, cookie notice lighter ─────────
   The a11y toggle keeps a 44px target (WCAG 2.5.5); it was 56px. The cookie
   notice stays (consent gating) but is a compact card, not a slab. */
html #sg-a11y.sg-a11y { --sga-size: 44px !important; }
html #sg-a11y .sg-a11y__toggle svg { inline-size: 22px; block-size: 22px; }

#sg-cookies.sg-cookies--card .sg-cookies__card {
	max-inline-size: 340px;
	padding: 14px 16px 12px;
	font-size: 13px;
	line-height: 1.45;
}
#sg-cookies .sg-cookies__card p { font-size: 13px; line-height: 1.45; margin-block: 0 8px; }
#sg-cookies .sg-cookies__title { font-size: 15px; margin-block: 0 4px; }
#sg-cookies .sg-cookies__card button,
#sg-cookies .sg-cookies__card .sg-cookies__btn {
	min-block-size: 36px;
	padding: 6px 12px;
	font-size: 13px;
}
@media (max-width: 639.98px) {
	#sg-cookies.sg-cookies--card .sg-cookies__card {
		max-inline-size: none;
		padding: 12px 14px 10px;
	}
}
/* Below 900px the fixed bottom bar (and, on a product, the sticky add-to-cart,
   same height) owns the last 64px of the screen: the card sits ABOVE it instead
   of covering it. The a11y toggle already steps clear of the card. */
@media (max-width: 899.98px) {
	#sg-cookies.sg-cookies--card { inset-block-end: calc(66px + env(safe-area-inset-bottom)) !important; }
}

/* Social / reviews rail (homepage only since RC3). RC3 fix 23.10: the first
   attempt painted full-colour discs and filled every glyph, which broke the
   outline-drawn Instagram icon. Now: one size (40px), white circles, each
   glyph in its own brand colour, a subtle shadow, 20px clear of the edge.
   WhatsApp is not in the rail (the floating button on the right owns it). */
.sg-srail { inset-inline-end: 20px; z-index: 60; }
.sg-srail__list { gap: 10px; }
.sg-srail__link {
	inline-size: 40px; block-size: 40px;
	background: #fff; border: 1px solid rgba(34, 37, 43, .08);
	box-shadow: 0 3px 10px rgba(34, 37, 43, .14);
}
/* !important: a later accent layer recoloured the glyphs teal. */
.sg-srail__link svg { inline-size: 20px; block-size: 20px; stroke: currentColor !important; fill: none !important; }
.sg-srail__link--instagram, .sg-srail__link--instagram svg { color: #c13584 !important; }
.sg-srail__link--instagram svg circle[fill] { fill: currentColor !important; }
.sg-srail__link--facebook,  .sg-srail__link--facebook svg  { color: #1877f2 !important; }
.sg-srail__link--tiktok,    .sg-srail__link--tiktok svg    { color: #111 !important; }
.sg-srail__link--google,    .sg-srail__link--google svg    { color: #1a73e8 !important; }
.sg-srail__cap { max-inline-size: none; white-space: nowrap; font-size: .62rem; }

/* ── Item 26: the line that introduces the category circles ───────────── */
.sg-stories__lead {
	margin: 0 0 10px;
	text-align: center;
	font-weight: 700;
	font-size: 16px;
	color: var(--sg-ink, #1f2937);
}

/* ── Item 17: the product info tab as tidy cards, sizes as LTR chips ──────
   Layout only; the strings are unchanged (inc/product-info-tabs.php). */
.sg-pinfo-tab__grid { display: grid; gap: 12px; }
@media (min-width: 768px) {
	.sg-pinfo-tab__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
.sg-pinfo-tab__sec { padding: 14px 16px; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; }
.sg-pinfo-tab .sg-pinfo-tab__sec h3 { margin: 0 0 8px; }
.sg-pinfo-tab__sec .sg-pinfo-tab__list { list-style: none; margin: 0; padding: 0; }
.sg-pinfo-tab__sec .sg-pinfo-tab__list li { position: relative; margin-block: 6px; padding-inline-start: 16px; line-height: 1.55; }
.sg-pinfo-tab__sec .sg-pinfo-tab__list li::before {
	content: ""; position: absolute; inset-inline-start: 0; top: .62em;
	width: 6px; height: 6px; border-radius: 50%; background: #8C6B26;
}
.sg-pinfo-tab__sec .sg-pinfo-tab__list li.sg-pinfo-tab__row { padding-inline-start: 0; }
.sg-pinfo-tab__sec .sg-pinfo-tab__list li.sg-pinfo-tab__row::before { display: none; }
.sg-pinfo-tab__k { display: block; margin-block-end: 6px; font-weight: 600; }
.sg-pinfo-tab__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sg-pinfo-tab__chip {
	direction: ltr; unicode-bidi: isolate; padding: 2px 10px;
	border: 1px solid #d9dee5; border-radius: 999px; background: #f7f9fb;
	font-size: .9rem; font-variant-numeric: tabular-nums;
}

/* ── Item 33: entrance signs - the size chooser leads the category ────────
   The three size circles live at the end of the category description; on the
   signs category archive-product.php lifts them out and prints them above
   the products. */
.sg-signs-picker { margin: 0 auto 22px; max-inline-size: 760px; }
.sg-signs-picker > div { margin-top: 0 !important; }

/* ── Item 13: the client's original LIGHT silver logo (owner, 23.10) ──────
   2022/11/Untitled-design-6.png - the logo of the live desktop header, 500px,
   served whole (top_band.php / brand/logo.php ask for 'full' with real sizes:
   no subsize upscaling). It is light, drawn for a dark ground, so:
   - homepage band: a very light, wide radial vignette behind it, the warm
     band photo still reads as warm (no box, plate or halo);
   - header, sticky header and mobile drawer are dark already;
   - the footer logo card turns charcoal (it was white, where a light logo
     would vanish). The band's separate text line stays screen-reader only:
     the artwork carries the tagline. */
.sg-topband .sg-topband__logo {
	inline-size: 220px !important; block-size: auto !important;
	max-inline-size: none !important; max-block-size: none !important;
}
@media (max-width: 699px) {
	.sg-topband .sg-topband__logo { inline-size: 170px !important; }
}
.sg-topband::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(ellipse 58% 82% at 50% 46%, rgba(34, 28, 22, .26) 0%, rgba(34, 28, 22, .13) 45%, rgba(34, 28, 22, 0) 78%);
}
.sg-topband .sg-topband__in { position: relative; z-index: 1; }
.sg-topband .sg-topband__tag {
	position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}
.sg-header__main .sg-logo .sg-brand-logo--img,
.sg-header__main .sg-logo__link img { max-block-size: 64px !important; block-size: 64px !important; inline-size: auto !important; }
@media (max-width: 899px) {
	.sg-header__main .sg-logo .sg-brand-logo--img,
	.sg-header__main .sg-logo__link img { max-block-size: 52px !important; block-size: 52px !important; }
}
.sg-footer__logo { background: #26262A !important; }
.sg-footer__logo .sg-brand-logo--img { max-block-size: 120px !important; block-size: 120px !important; inline-size: auto !important; max-inline-size: none !important; }

/* ── Checkout validation you can SEE (dress rehearsal, RC2 finding) ───────
   WooCommerce already marks failed rows (.woocommerce-invalid) and prints an
   inline message per field (.checkout-inline-error-message); the theme simply
   never styled them, so a failed submit changed nothing on the form. Styling
   only: no field, payment or gateway behaviour changes. */
.woocommerce-checkout { --sg-err: #c62828; --sg-err-bg: #fdecea; --sg-err-ink: #7f1d1d; }

/* 1. Required asterisks in red, the terms label included. */
.woocommerce-checkout .form-row .required,
.woocommerce-checkout abbr.required,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required {
	color: var(--sg-err) !important;
	font-weight: 700;
	text-decoration: none !important;
	border: 0;
	cursor: default;
}

/* 2. A failed row: red border on the control, red label, red inline message. */
.woocommerce-checkout .form-row.woocommerce-invalid label { color: var(--sg-err-ink); }
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid textarea,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--sg-err) !important;
	box-shadow: 0 0 0 3px rgba(198, 40, 40, .14) !important;
	background-color: #fff;
}
.woocommerce-checkout .checkout-inline-error-message {
	display: block;
	margin: 6px 0 0;
	color: var(--sg-err);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}
/* A row that is valid again drops the message (WooCommerce removes the class). */
.woocommerce-checkout .form-row.woocommerce-validated .checkout-inline-error-message { display: none; }

/* The terms row: a red outline around the whole checkbox line. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row.woocommerce-invalid {
	outline: 2px solid var(--sg-err);
	outline-offset: 4px;
	border-radius: 8px;
	background: var(--sg-err-bg);
	padding: 8px 10px;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row.woocommerce-invalid .woocommerce-terms-and-conditions-checkbox-text { color: var(--sg-err-ink); font-weight: 600; }

/* 3. The notice: a clear red panel, readable size, and it never lands under
   the sticky header when WooCommerce scrolls to it. */
.woocommerce-checkout .woocommerce-NoticeGroup-checkout,
.woocommerce-checkout .woocommerce-error { scroll-margin-top: 110px; }
.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error,
.woocommerce-checkout ul.woocommerce-error {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid rgba(198, 40, 40, .35);
	border-inline-start: 5px solid var(--sg-err);
	border-radius: 10px;
	background: var(--sg-err-bg);
	color: var(--sg-err-ink);
	font-size: 15px;
	line-height: 1.6;
}
.woocommerce-checkout ul.woocommerce-error li { margin: 2px 0; padding: 0; color: var(--sg-err-ink); }
.woocommerce-checkout ul.woocommerce-error li::before { content: none; }
.woocommerce-checkout ul.woocommerce-error a { color: var(--sg-err-ink); font-weight: 700; text-decoration: underline; }
@media (max-width: 599.98px) {
	.woocommerce-checkout ul.woocommerce-error { font-size: 14px; padding: 12px 14px; }
}
html:has(body.woocommerce-checkout) { scroll-padding-top: 110px; }

/* Cart count in the homepage band's pill: a small badge on the icon's corner
   (RC3 fix 23.10). It inherited a 40px-wide pill and sat over the icon. */
.sg-topband .sg-topband__btn.sg-cart-link { position: relative; }
.sg-topband .sg-topband__btn .sg-cart-count {
	position: absolute !important;
	inset-block-start: -2px !important;
	inset-inline-end: -4px !important;
	inset-inline-start: auto !important;
	inline-size: auto !important;
	min-inline-size: 18px;
	block-size: 18px !important;
	padding: 0 5px !important;
	margin: 0 !important;
	border-radius: 9px;
	font-size: 11px !important;
	line-height: 18px !important;
	text-align: center;
	transform: none !important;
	box-shadow: 0 0 0 2px #fff;
}
.sg-topband .sg-topband__btn .sg-cart-count[data-count="0"] { display: none; }

/* ── One palette: gold + charcoal instead of teal (owner, 23.10) ─────────
   Theme CSS was converted value by value (accent text #8C6B26, surfaces gold
   #C9A24B, deep accents charcoal #26262A). The plugins below take their
   colours from variables or their own defaults, so they are steered here
   rather than edited. WCAG AA: #231A0B on gold 7:1, white on charcoal 15:1,
   #8C6B26 on white 4.8:1. */
:root { --sg-accent: #C9A24B; }

/* sg-a11y: the toggle and its panel accents in charcoal. */
#sg-a11y { --sga-custom: #26262A; }
html #sg-a11y .sg-a11y__toggle { background: #26262A !important; color: #fff !important; border-color: #fff !important; }

/* The floating "+" (more contact options) in charcoal, like the a11y toggle. */
.sg-ta .sg-ta__toggle { background: #26262A !important; color: #fff !important; }
.sg-ta .sg-ta__toggle-bar { background: #fff !important; }

/* sg-cookies: "קבל הכל" gold with dark text, "רק הכרחיות" charcoal, links and
   switches dark gold. */
#sg-cookies, #sg-cookies-reopen { --sgc-custom: #8C6B26; }
#sg-cookies .sg-cookies__btn--brand { background: #C9A24B !important; border-color: #C9A24B !important; color: #231A0B !important; }
#sg-cookies .sg-cookies__btn--brand:hover, #sg-cookies .sg-cookies__btn--brand:focus-visible { background: #B58E3A !important; border-color: #B58E3A !important; }
#sg-cookies .sg-cookies__btn--ink { background: #26262A !important; border-color: #26262A !important; color: #fff !important; }
#sg-cookies .sg-cookies__card a, #sg-cookies .sg-cookies__settings { color: #8C6B26 !important; }
#sg-cookies-reopen { background: #26262A !important; color: #fff !important; }

/* Palette contrast pass (RC3, measured): every text colour >= 4.5:1. */
/* Mobile bottom bar is dark: its labels and icons take a LIGHT gold. */
.sg-botbar .sg-botbar__item,
.sg-botbar .sg-botbar__label,
.sg-botbar .sg-botbar__item svg { color: #E2C77E !important; }          /* 10.9:1 on #15171C */
.sg-botbar .sg-botbar__item:active,
.sg-botbar .sg-botbar__item[aria-current="page"] { color: #F3DFA6 !important; }
/* Checkout error panel: its links read in the panel's dark-red ink. */
.woocommerce-checkout ul.woocommerce-error a,
.woocommerce-checkout ul.woocommerce-error strong { color: var(--sg-err-ink, #7f1d1d) !important; }
/* Cart coupon toggle: the dark gold text colour. */
.sg-coupon__toggle { color: #8C6B26 !important; }
/* sg-dedications accordion: its own --gold (#b8912f, 2.95:1 with white text)
   steered to the text-safe dark gold from the theme; no plugin change. */
.sg-ded-acc { --gold: #8C6B26; }
/* Footer bottom strip (dark): links in light gold, the small print lifted to a
   light grey. The footer columns sit on white and keep the dark gold. */
.sg-footer__bottom a, .sg-footer__credit a { color: #E2C77E !important; }   /* 10.9:1 on #15171C */
.sg-footer__bottom small, .sg-footer__credit, .sg-footer__copy { color: #B4BCC8 !important; }   /* 9:1 */
/* Dedication accordion on its cream panel (#F6F2EA): a step darker. */
.single-product .summary .price,
.single-product .summary .price *:not(del):not(del *),
.single-product .summary .from-label,
.sg-pinfo__price, .sg-pinfo__price *:not(del),
.sg-prev-next__price, .sg-prev-next__price *:not(del) { color: #7A5C1F !important; }   /* 5.4:1 on the cream panel, 6:1 on white */
.sg-ded-sublabel { color: #6F6455 !important; }
/* Price-filter "סנן": gold surface, dark text (was dark text on dark gold). */
.sg-filter .button, .widget_price_filter .button, .sg-filter--price .button { background: #C9A24B !important; border-color: #C9A24B !important; color: #231A0B !important; }
/* Terms link inside the red invalid row. */
.woocommerce-checkout .form-row.woocommerce-invalid .woocommerce-terms-and-conditions-link { color: var(--sg-err-ink, #7f1d1d) !important; }
/* Dedication accordion: the struck-through old price readable (was 3.2:1). */
.sg-ded-acc .sg-ded-acc__opt-was { color: #6F6455 !important; }
/* Promo badges are gold surfaces: dark ink on them (7:1), wherever they sit. */
.sg-promo-badge, .sg-pinfo__price .sg-promo-badge, .onsale { color: #231A0B !important; }