/*
 * Business page, Quiet Shelf "For Business · final" (design: Shooglis Brand Refine/For Business · final-html).
 * The design is desktop only; the phone layout follows the kit grammar (16 to 20px gutters,
 * stacked columns, large type stepped down). Kit tokens only.
 */

.shg-biz { padding-block-end: 0; }
.shg-gapL { margin-block-start: var(--section-gap); }
.shg-eyebrow { margin: 0; font-family: var(--font-slogan); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; direction: ltr; color: var(--ink-70); }
.shg-lede { font-size: 19px; line-height: 1.6; color: var(--ink-70); max-inline-size: 52ch; text-wrap: pretty; }
.shg-lede a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.shg-h2t { margin: 0; font-size: 48px; font-weight: 400; line-height: 1.12; text-wrap: balance; }
.shg-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.shg-ctas svg { inline-size: 16px; block-size: 16px; }
.shg-sec-h { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-inline: 60px; margin-block-end: 48px; }

/* Hero scene: Almond field, Pale Oak floor, the four mascots */
.shg-bhero { position: relative; overflow: hidden; block-size: 760px; margin: 0 var(--hero-inset); border-radius: var(--r-hero); background: var(--almond-cream); }
.shg-bhero__floor { position: absolute; inset-inline: -5%; inset-block-end: -120px; block-size: 300px; border-radius: 50%; background: var(--pale-oak); }
.shg-bhero__m { position: absolute; z-index: 1; }
.shg-bhero__m img { display: block; inline-size: 100%; block-size: auto; }
.shg-bhero__m--1 { inline-size: 210px; inset-inline-start: 70px; inset-block-end: 90px; }
.shg-bhero__m--2 { inline-size: 240px; inset-inline-end: 80px; inset-block-end: 70px; }
.shg-bhero__m--3 { inline-size: 150px; inset-inline-start: 330px; inset-block-end: 20px; }
.shg-bhero__m--4 { inline-size: 170px; inset-inline-end: 360px; inset-block-end: 14px; }
.shg-bhero__c { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding-block-start: 88px; padding-inline: 20px; }
.shg-bhero__t { margin: 0; font-size: 76px; font-weight: 400; line-height: 1.04; max-inline-size: 13ch; text-wrap: balance; }
.shg-bhero .shg-lede { margin: 0 auto; max-inline-size: 46ch; font-size: 17px; }

/* The kit's quotes block sits one section-gap under the hero */
.shg-biz .qs-b2b { margin-block-start: var(--section-gap); }

/* Bento */

/* FAQ */

/* Dark client wall */
.shg-dark { padding: 80px 0 96px; background: var(--inverse); color: var(--on-inverse); }
.shg-dark .shg-h2t { color: var(--on-inverse); }
.shg-dark .shg-eyebrow { color: rgb(255 246 238 / .6); }
.shg-lwall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding-inline: 60px; }
.shg-lwall > div { position: relative; display: grid; place-items: center; block-size: 140px; font-size: 13px; color: rgb(255 246 238 / .45); }
.shg-lwall > div img { block-size: 26px; inline-size: auto; max-inline-size: 140px; filter: brightness(0) invert(1); opacity: .9; }
.shg-lwall > div:not(:nth-child(6n))::after { content: ""; position: absolute; inset-inline-end: -8px; inset-block-end: -8px; inline-size: 16px; block-size: 16px; background: linear-gradient(currentColor, currentColor) center/1px 100% no-repeat, linear-gradient(currentColor, currentColor) center/100% 1px no-repeat; opacity: .5; }
.shg-lwall__plus { font-size: 32px; color: var(--on-inverse) !important; }
/* Light wall (business page, design review 6 Nov 2026: the quote form is the page's one dark block).
   Same grid; the logos turn into ink silhouettes and the plus marks follow the ink. */
.shg-lwsec--light { padding: 80px 0 96px; }
.shg-lwsec--light .shg-lwall > div { color: var(--ink-30, rgb(56 27 32 / .3)); }
.shg-lwsec--light .shg-lwall > div img { filter: brightness(0); opacity: .72; }

.shg-fld { display: flex; flex: 1; border-radius: var(--r-tile); background: var(--ground); }
.shg-fld textarea { inline-size: 100%; min-block-size: 96px; padding: 16px 18px; border: 0; border-radius: var(--r-tile); background: none; color: var(--ink); font: inherit; font-size: 14px; resize: vertical; }
.shg-fld textarea::placeholder { color: var(--ink-55); }
.shg-fld:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
.shg-fchk { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.shg-fchk input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.shg-fchk i { flex: none; inline-size: 18px; block-size: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--ink-55); display: grid; place-items: center; }
.shg-fchk input:checked + i { background: var(--ink); box-shadow: none; }
.shg-fchk input:checked + i::after { content: ""; inline-size: 9px; block-size: 5px; border-left: 2px solid var(--ground); border-bottom: 2px solid var(--ground); transform: translateY(-1px) rotate(-45deg); }
.shg-fchk input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.shg-fnote { margin: 16px 0 0; font-size: 13px; color: var(--ink-55); }
.shg-fnote.is-error { color: var(--ink); font-weight: 500; }
.shg-hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; opacity: 0; }

@media (max-width: 1100px) and (min-width: 750px) {
	.shg-bhero__t { font-size: 60px; }
	.shg-bhero__m--3, .shg-bhero__m--4 { display: none; }
	.shg-lwall { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: 32px; }
	.shg-lwall > div::after { display: none; }
}

@media (max-width: 749px) {
	.shg-eyebrow { font-size: 13px; letter-spacing: .1em; }
	.shg-lede { font-size: 16px; }
	.shg-h2t { font-size: 30px; }
	.shg-sec-h { padding-inline: 20px; margin-block-end: 28px; }

	.shg-bhero { block-size: auto; padding-block-end: 220px; }
	.shg-bhero__c { padding-block-start: 48px; gap: 18px; }
	.shg-bhero__t { font-size: 40px; }
	.shg-bhero .shg-lede { font-size: 15px; }
	.shg-bhero__floor { block-size: 180px; inset-block-end: -80px; }
	.shg-bhero__m--1 { inline-size: 120px; inset-inline-start: 12px; inset-block-end: 40px; }
	.shg-bhero__m--2 { inline-size: 130px; inset-inline-end: 12px; inset-block-end: 30px; }
	.shg-bhero__m--3, .shg-bhero__m--4 { display: none; }
	.shg-ctas { flex-direction: column; align-self: stretch; }
	.shg-ctas .qs-btn { inline-size: 100%; }



	.shg-dark { padding: 56px 0 64px; }
	.shg-lwsec--light { padding: 56px 0 64px; }
	.shg-lwall { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 20px; }
	.shg-lwall > div { block-size: 96px; }
	.shg-lwall > div img { block-size: 18px; max-inline-size: 90px; }
	.shg-lwall > div::after { display: none; }

}

/* Logo wall: each logo's height comes from its shape (--lh, set in the template) */
.shg-lwall > div img { block-size: var(--lh, 26px); max-inline-size: 170px; object-fit: contain; }
.shg-lwall > .shg-lwall__plus { font-size: 32px; }
@media (max-width: 749px) {
	.shg-lwall > div img { block-size: calc(var(--lh, 26px) * .7); max-inline-size: 96px; }
	.shg-lwall > .shg-lwall__plus { font-size: 24px; }
}




/* "מארז שנבנה בדיוק סביבכם": gift tags (Claude Design "Features · gift tags"). A generated photo of
   six hanging tags; the words are live text placed on the tags (positions in % of the photo,
   sizes in container units so they scale with the section). Phones get the list only, no photo. */
.shg-tg { position: relative; container-type: inline-size; margin-inline: var(--hero-inset); border-radius: var(--r-hero); overflow: hidden; aspect-ratio: 3168 / 1990; background: #f4e9e2 top center / 100% auto no-repeat; }
.shg-tg__h { position: absolute; inset-inline: 0; inset-block-start: 7.5%; text-align: center; }
.shg-tg__h h2 { margin: 0; font-size: 3.9cqw; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.shg-tg__h p { margin: 1.1cqw 0 0; font-size: 1.25cqw; color: rgb(56 27 32 / .72); }
.shg-tg__list { margin: 0; padding: 0; list-style: none; }
.shg-tl { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .5cqw; padding-inline: .6cqw; text-align: center; color: var(--ink); mix-blend-mode: multiply; opacity: .9; }
.shg-tl i { display: block; inline-size: 1.25cqw; block-size: 1.25cqw; }
.shg-tl i svg { display: block; inline-size: 100%; block-size: 100%; }
.shg-tl b { font-size: 1.2cqw; font-weight: 500; line-height: 1.2; text-wrap: balance; }
.shg-tl--d { color: var(--on-inverse); mix-blend-mode: normal; opacity: .92; }
.shg-td { position: absolute; margin: 0; text-align: center; font-size: .98cqw; line-height: 1.5; color: rgb(56 27 32 / .78); text-wrap: balance; }
.shg-tg__cta { position: absolute; inset-inline: 0; inset-block-end: 5.5%; display: flex; justify-content: center; }
.shg-tg__cta .qs-btn { font-size: max(14px, 1cqw); min-block-size: max(40px, 3.2cqw); padding-inline: max(24px, 2.2cqw); }
.shg-tgp { display: none; }

@media (max-width: 999px) {
	.shg-tg { display: none; }
	.shg-tgp { display: block; }
	.shg-tgp__h { padding: 0 20px 20px; text-align: center; }
	.shg-tgp__h .shg-tgp__t { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.02; color: var(--ink); } /* Was an h2: same look, no tracking on Hebrew. */
	.shg-tgp__h p { margin: 10px 0 0; font-size: 15px; color: var(--ink-70); }
	.shg-tgp__list { max-inline-size: 560px; margin: 0 auto; padding: 4px 20px 0; list-style: none; border-block-start: 1px solid var(--ink-14); }
	.shg-tgp__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding-block: 14px; border-block-end: 1px solid var(--ink-14); }
	.shg-tgp .shg-sw { inline-size: 22px; block-size: 30px; margin-block-start: 2px; clip-path: polygon(25% 0, 75% 0, 100% 18%, 100% 100%, 0 100%, 0 18%); }
	.shg-tgp__list b { display: block; font-size: 17px; font-weight: 400; }
	.shg-tgp__list span:not(.shg-sw) { display: block; margin-block-start: 2px; font-size: 13.5px; line-height: 1.5; color: var(--ink-70); }
	.shg-tgp__cta { max-inline-size: 560px; margin: 0 auto; padding: 22px 20px 0; }
	.shg-tgp__cta .qs-btn { inline-size: 100%; }
}

/* Desktop gift tags, shorter (Jonas, 18 Oct): the window crops the empty wall above the ribbon.
   .shg-tg keeps the photo's own frame (so every % position still lands on its tag) and moves up
   by 20% of its height (20% x 1990/3168 of the width = 12.56%); the title moves down by the same. */
.shg-tgw { position: relative; margin-inline: var(--hero-inset); border-radius: var(--r-hero); overflow: hidden; aspect-ratio: 3168 / 1592; }
.shg-tgw .shg-tg { margin: -12.56% 0 0; border-radius: 0; overflow: visible; }
.shg-tgw .shg-tg__h { inset-block-start: 23.5%; }
@media (max-width: 999px) { .shg-tgw { display: none; } }

/* Links to #quote land with the form clear of the sticky header */
.shg-quote { scroll-margin-top: calc(var(--header-h) + 22px); }
@media (max-width: 749px) { .shg-quote { scroll-margin-top: calc(var(--header-h) + 16px); } }


/* Quote form, clearer (Jonas, 19 Oct 2026): the blanks are white boxes you can see are fields,
   a filled one turns Pale Sky, an instruction under the title and a "still missing" line by the button. */
	min-block-size: 1.45em; margin-block: 4px; padding: 0 14px;
	border: 1.5px solid rgb(56 27 32 / .22); border-radius: 12px;
	background: #fff; line-height: 1.35;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
/* Text boxes get a pencil, dropdowns keep their arrow. */
	content: ""; flex: none; inline-size: .55em; block-size: .55em; min-inline-size: 14px; min-block-size: 14px;
	background: var(--ink-55);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.shg-fld--area { flex-direction: column; gap: 8px; background: none; }
.shg-fld--area:focus-within { box-shadow: none; }
.shg-fld__l { font-size: 15px; font-weight: 500; color: var(--ink); }
.shg-fld__l span { font-weight: 400; color: var(--ink-55); }
.shg-fld--area textarea { border: 1.5px solid rgb(56 27 32 / .22); background: #fff; }
.shg-fld--area textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(198 218 230 / .9); }

/* Employee gifts by occasion (round cards) and by budget (Adi, 19 Oct). */
.shg-tc--4 .shg-tc__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); max-inline-size: 1240px; }
.shg-tc--4 .shg-h2t { text-align: center; }
@media (max-width: 1099px) { .shg-tc--4 .shg-tc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Budget cards (.shg-b2bp) moved to qs-woo.css: the homepage uses them too. */

/* Business hero on phone (Jonas, 20 Oct): shorter, and the two buttons side by side. */
@media (max-width: 749px) {
	.shg-bhero { padding-block-end: 132px; }
	.shg-bhero__c { padding-block-start: 30px; gap: 12px; }
	.shg-bhero__t { font-size: 34px; }
	.shg-bhero .shg-lede { font-size: 14.5px; line-height: 1.55; }
	.shg-bhero__floor { block-size: 120px; inset-block-end: -60px; }
	.shg-bhero__m--1 { inline-size: 86px; inset-block-end: 22px; }
	.shg-bhero__m--2 { inline-size: 94px; inset-block-end: 16px; }
	.shg-bhero .shg-ctas { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; inline-size: 100%; margin-block-start: 4px; }
	.shg-bhero .shg-ctas .qs-btn { inline-size: auto; }
	.shg-bhero .shg-ctas .qs-btn.qs-btn--commit { flex: 0 0 auto; padding-inline-start: 16px; font-size: 14px; }
	.shg-bhero .shg-ctas .qs-btn:not(.qs-btn--commit) { flex: 1 1 0; min-inline-size: 0; min-block-size: 50px; padding-inline: 10px; font-size: 14px; gap: 6px; }
	.shg-bhero .shg-ctas .qs-btn:not(.qs-btn--commit) svg { flex: none; inline-size: 16px; block-size: 16px; }
}
@media (max-width: 389px) { .shg-xs-hide { display: none; } } /* narrow phones: "וואטסאפ" alone fits beside the primary */

/* Copy pass deck C (29 Oct 2026): the quote link and the proof line under the hero CTAs. */
.shg-bhero__proof { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-70); }
.shg-bhero__proof a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* B2B Portal door (ticket 16): same quiet voice as the proof line under it. */
.shg-bhero__co { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-70); }
.shg-bhero__co a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Hero photo, "box edges" (Jonas, 1 Nov 2026; was "ribbon light"): a full-bleed photo, the text centred on its dark middle ---------- */
.shg-bhero--ribbon { background: #3a1416; color: var(--seashell); }
.shg-bhero--ribbon .shg-bhero__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; object-position: 50% 50%; animation: shg-bhero-settle 9s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes shg-bhero-settle { from { transform: scale(1.07); } to { transform: none; } }
.shg-bhero--ribbon .shg-bhero__c { position: absolute; inset: 0; justify-content: center; gap: 18px; padding: 24px; }
.shg-bhero--ribbon .shg-eyebrow { color: rgb(255 246 238 / .78); }
.shg-bhero--ribbon .shg-bhero__t { color: var(--seashell); font-size: 62px; max-inline-size: 16ch; text-shadow: 0 2px 30px rgb(30 8 10 / .4); }
.shg-bhero--ribbon .shg-lede { color: rgb(255 246 238 / .88); max-inline-size: 42ch; font-size: 18px; }
.shg-bhero--ribbon .shg-bhero__proof { position: absolute; z-index: 2; inset-inline: 16px; inset-block-end: 26px; text-align: center; color: rgb(255 246 238 / .8); }
.shg-bhero--ribbon .shg-bhero__proof a { color: var(--seashell); }
.shg-bhero--ribbon .shg-bhero__co { color: rgb(255 246 238 / .8); }
.shg-bhero--ribbon .shg-bhero__co a { color: var(--seashell); }
@media (max-width: 1100px) and (min-width: 750px) {
	.shg-bhero--ribbon .shg-bhero__t { font-size: 50px; }
}
@media (max-width: 749px) {
	.shg-bhero--ribbon { block-size: 640px; padding-block-end: 0; }
	.shg-bhero--ribbon .shg-bhero__c { padding: 20px 16px; gap: 14px; }
	.shg-bhero--ribbon .shg-bhero__img { object-position: 72% 50%; } /* the stack at the edge, dark behind the text */
	.shg-bhero--ribbon .shg-bhero__c { background: radial-gradient(80% 50% at 50% 50%, rgb(42 12 14 / .55), rgb(42 12 14 / 0) 100%); }
	.shg-bhero--ribbon .shg-bhero__t { font-size: 34px; }
	.shg-bhero--ribbon .shg-lede { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .shg-bhero--ribbon .shg-bhero__img { animation: none; } }

/* Quote form on Night Bordeaux + "trusted by" loop ("10, the mix", Claude Design handoff, 2 Nov 2026). */
.shg-quote { --l: 255 246 238; position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; margin: 120px var(--hero-inset, 20px) 0; padding: 88px 80px 0; border-radius: 28px; background: var(--night-bordeaux); color: rgb(var(--l)); }
.shg-quote:not(:has(.shg-trust)) { padding-block-end: 80px; }
.shg-qeb { margin: 0; font-family: var(--font-slogan); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; direction: ltr; text-align: end; color: rgb(var(--l) / .55); }
.shg-qeb--he { font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; direction: rtl; text-align: start; } /* Hebrew label (design review, 6 Nov 2026): no caps or tracking, 13px floor. */
.shg-quote__h { margin: 14px 0 0; font-size: 42px; font-weight: 400; line-height: 1.1; text-wrap: balance; color: rgb(var(--l)); }
.shg-quote__sub { margin: 16px 0 0; max-inline-size: 44ch; font-size: 17px; line-height: 1.6; color: rgb(var(--l) / .7); text-wrap: pretty; }
.shg-quote__sub a { color: rgb(var(--l)); text-decoration: underline; text-underline-offset: 3px; }
.shg-quote__alt { margin-block-start: 28px; }
.shg-ghost--light { display: inline-flex; align-items: center; gap: 10px; block-size: 48px; padding-inline: 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(var(--l) / .6); color: rgb(var(--l)); font-size: 15px; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.shg-ghost--light:hover { background: rgb(var(--l)); color: var(--night-bordeaux); }
.shg-ghost--light svg { inline-size: 18px; block-size: 18px; }
.shg-quote__ph { margin: 14px 0 0; font-size: 14px; color: rgb(var(--l) / .7); }
.shg-quote__ph a { color: rgb(var(--l)); text-decoration: underline; text-underline-offset: 3px; }

/* hairline table */
.shg-qf__t { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block-start: 1px solid rgb(var(--l) / .25); border-inline-start: 1px solid rgb(var(--l) / .25); }
.shg-qf__cell { position: relative; display: grid; align-content: end; gap: 4px; min-block-size: 92px; margin: 0; padding: 18px 20px 14px; border-block-end: 1px solid rgb(var(--l) / .25); border-inline-end: 1px solid rgb(var(--l) / .25); cursor: text; }
.shg-qf__l { font-size: 12px; letter-spacing: .02em; color: rgb(var(--l) / .6); transition: color var(--m-fast, 120ms) linear; }
.shg-quote .shg-qf__in { inline-size: 100%; min-block-size: 28px; block-size: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: inherit; font-size: 16px; line-height: 1.4; color: rgb(var(--l)); outline: 0; appearance: none; -webkit-appearance: none; }
.shg-qf__in::placeholder { color: transparent; }
.shg-qf__in:-webkit-autofill { -webkit-text-fill-color: rgb(var(--l)); box-shadow: 0 0 0 1000px var(--night-bordeaux) inset !important; }
.shg-qf__cell--sel { cursor: pointer; }
.shg-qf__cell--sel::after { content: ""; position: absolute; inset-inline-end: 20px; inset-block-end: 22px; inline-size: 8px; block-size: 8px; border-right: 1.5px solid rgb(var(--l) / .7); border-bottom: 1.5px solid rgb(var(--l) / .7); transform: rotate(45deg); pointer-events: none; } /* physical sides: the chevron points down in RTL too */
.shg-quote .shg-qf__cell--sel select { padding-inline-end: 24px; cursor: pointer; }
.shg-qf__cell--sel option { color: var(--rich-mahogany); background: var(--seashell); }
.shg-qf__cell:focus-within { box-shadow: inset 0 -2px 0 rgb(var(--l)); }
.shg-qf__cell:focus-within .shg-qf__l { color: rgb(var(--l)); }
.shg-qf__cell:has(.shg-qf__in:user-invalid), .shg-qf__cell.is-invalid, .shg-qf__cell:has([aria-invalid="true"]) { box-shadow: inset 0 -2px 0 var(--pale-sky); }
.shg-qf__cell:has(.shg-qf__in:user-invalid) .shg-qf__l::after, .shg-qf__cell.is-invalid .shg-qf__l::after, .shg-qf__cell:has([aria-invalid="true"]) .shg-qf__l::after { content: " · שדה חובה"; color: var(--pale-sky); }

/* foot */
.shg-qf__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-block-start: 20px; }
.shg-qf__chks { display: flex; flex-direction: column; gap: 10px; }
.shg-qchk { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: rgb(var(--l) / .8); cursor: pointer; }
.shg-qchk input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.shg-qchk i { flex: none; display: grid; place-items: center; inline-size: 18px; block-size: 18px; margin-block-start: 2px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(var(--l) / .5); }
.shg-qchk input:checked + i { background: rgb(var(--l)); }
.shg-qchk input:checked + i::after { /* physical sides: a tick, not a mirrored one, in RTL */ content: ""; inline-size: 9px; block-size: 5px; border-left: 2px solid var(--night-bordeaux); border-bottom: 2px solid var(--night-bordeaux); transform: translateY(-1px) rotate(-45deg); }
.shg-qchk input:focus-visible + i { outline: 2px solid rgb(var(--l)); outline-offset: 2px; }
.shg-qf__fn { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: rgb(var(--l) / .5); }
.shg-qf__fn.is-error { color: var(--pale-sky); font-weight: 500; font-size: 13px; }
.shg-qf__ok { padding-block: 24px; }
.shg-qf__ok .shg-fnote { color: rgb(var(--l) / .5); }
/* A3 button, light: Seashell pill, Bordeaux label, the Pale Sky circle as is (buttons.css geometry and hover roll) */
.shg-quote .qs-btn.qs-btn--commit { flex: none; background: var(--seashell); color: var(--rich-mahogany); }
.shg-quote .qs-btn.qs-btn--commit:focus-visible { outline-color: rgb(var(--l)); }

/* The Hanukkah closing form: a two-column table for five fields, the last one full width. */
.shg-qf__t--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shg-qf__cell--wide { grid-column: 1 / -1; }
.shg-qf__fn a { color: rgb(var(--l)); text-decoration: underline; text-underline-offset: 3px; }
.shg-quote input[type="number"] { -moz-appearance: textfield; }
.shg-quote input[type="number"]::-webkit-inner-spin-button, .shg-quote input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.shg-quote .hnk-ok { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; font-size: 16px; color: rgb(var(--l) / .75); outline: 0; }
.shg-quote .hnk-ok strong { font-size: 26px; font-weight: 400; color: rgb(var(--l)); }

/* trusted by: the loop itself is in qs-woo.css (shared with the homepage business block) */
.shg-quote .shg-trust { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; margin: 64px -80px 0; padding: 36px 80px 44px; border-block-start: 1px solid rgb(var(--l) / .2); }

/* B2B categories: the form opens inside the contact block, so no outer margin */
.shg-b2bc__form .shg-quote { margin: 24px 0 0; }

@media (max-width: 1100px) {
	.shg-quote { grid-template-columns: 1fr; gap: 40px; padding-inline: 48px; }
	.shg-quote .shg-trust { margin-inline: -48px; padding-inline: 48px; }
}
@media (max-width: 900px) {
	.shg-quote { gap: 36px; margin: 80px 0 0; padding: 56px 20px 0; border-radius: 0; }
	.shg-quote:not(:has(.shg-trust)) { padding-block-end: 48px; }
	.shg-quote__h { font-size: 32px; }
	.shg-qf__t { grid-template-columns: 1fr 1fr; }
	.shg-qf__cell { min-block-size: 84px; padding: 14px 14px 12px; }
	.shg-qf__t:not(.shg-qf__t--2) .shg-qf__cell:nth-last-child(-n+2) { grid-column: 1 / -1; } /* quantity and note full width: eight cells in two columns, no lone half cell */
	.shg-qf__foot { flex-direction: column; align-items: stretch; gap: 16px; }
	.shg-quote .qs-btn.qs-btn--commit { inline-size: 100%; }
	.shg-quote .shg-trust { grid-template-columns: 1fr; gap: 14px; margin: 44px -20px 0; padding: 28px 20px 36px; }
}