/*
 * WordPress / WooCommerce layer on top of the Quiet Shelf kit (design-system/quiet-shelf/
 * components/bundle.css). Only what the kit cannot know about: real product photos, Woo AJAX
 * states, plugin CSS leaking in, and the pieces the kit describes but does not style (search).
 * Values come from the kit tokens only.
 */

/* More contrast (Jonas, 31 Oct 2026). The kit's faint text steps sat under 4.5:1 on Seashell and Almond
   (ink at 55% was about 3.6:1) and its hairlines nearly vanished. Raised here, not in qs-tokens.css,
   because that file is generated from the kit. ink-55 = about 5.3:1 on Seashell, 4.8:1 on Almond.
   The high-contrast accessibility mode (html.shg-ax-contrast, utility.css) still wins. */
:root {
	--ink-70: rgba(56, 27, 32, 0.82);
	--ink-55: rgba(56, 27, 32, 0.68);
	--ink-14: rgba(56, 27, 32, 0.22);
}
[data-theme="inverse"] {
	--ink-70: rgba(255, 246, 238, 0.82);
	--ink-55: rgba(255, 246, 238, 0.68);
	--ink-14: rgba(255, 246, 238, 0.22);
}

/* Page background: white instead of the kit's Seashell (Jonas, 18 Oct). Dark sections set their own --ground. */
:root { --ground: #fff; }

/* Headlines bold and tight on every page (Jonas, 18 Oct). Small eyebrow labels and the English
   display "shout" keep the kit's look. */
:root :is(h1, h2):not(.qs-label, .qs-en, .qs-sr-only) { font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; }


/* Flatsome's reset is not loaded on rebuild pages; plugins still bring global button/list/quote styles */
:where(.qs-pg) img { block-size: auto; max-inline-size: 100%; }
.qs-lockup img { max-inline-size: none; }
:where(.qs-pg) a { color: inherit; }
:where(.qs-pg) [hidden] { display: none !important; }
:where(.qs-pg) blockquote { border: 0; padding: 0; margin: 0; font-style: normal; quotes: none; }
:where(.qs-pg) blockquote::before, :where(.qs-pg) blockquote::after { content: none; }
:where(.qs-pg) :is(ul, li) { margin: 0; }
:where(.qs-pg) button { margin: 0; text-transform: none; letter-spacing: normal; }
.qs-rtab, .qs-tab, .qs-announce__arrow, .qs-b2b__logo, .qs-icon-btn, .qs-sheet__list button { min-inline-size: 0; border-radius: 0; box-shadow: none; }
.qs-rtab, .qs-tab { flex: none; min-inline-size: max-content; }
.qs-rtab[aria-selected="true"] { box-shadow: inset 0 -1px 0 var(--ink); }

/* Skip link */
.shg-skip { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--ground); }
.shg-skip:focus { inset-block-start: 12px; }

/* ProductCard on real packshots: the photo fills the 4:5 tile; photo and title are the links */
.qs-tile__link { position: absolute; inset: 0; }
.qs-tile__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.qs-tile .qs-chips, .qs-tile .qs-stamp, .qs-tile .qs-tile__add { z-index: 1; }
.qs-card__title a { color: inherit; text-decoration: none; }
.qs-card:hover .qs-card__title a, .qs-card:focus-within .qs-card__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.qs-add { text-decoration: none; }
.qs-tile__add .added_to_cart { display: none; }
/* Phones have no hover: keep the quick-add visible (label only; the price is under the title) */
@media (hover: none), (max-width: 749px) {
	.qs-tile__add { opacity: 1; }
	.qs-tile__add .qs-add__price { display: none; }
}

/* Rail scrubber thumb follows the scroll position (the kit draws a static one) */
.qs-scrub::after { content: none; }
.shg-scrub__thumb { position: absolute; inset-block-start: -1px; inset-inline-start: 0; block-size: 3px; inline-size: 20%; min-inline-size: 36px; border-radius: 2px; background: var(--ink); will-change: transform; } /* No transition: it follows the finger frame by frame (js/site.js), a transition made it trail and stutter on phones (3 Nov). */

/* Recipient row: scrolls when it does not fit (tablet and small laptop) */
.qs-rc__row { max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.qs-rc__row::-webkit-scrollbar { display: none; }
/* Recipient photo: the box photo fills the circle (the kit offsets an icon instead) */
.qs-rc__media--photo { background: var(--almond-cream); }
.qs-rc__media--photo img { position: static; inline-size: 100%; block-size: 100%; object-fit: cover; left: auto; top: auto; }

/* Phone sheet: the kit draws the search as a pill; here it is a real search field */
.qs-sheet__search input { flex: 1; min-inline-size: 0; block-size: 100%; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; }
.qs-sheet__search input::placeholder { color: var(--ink-55); }
.qs-sheet__search input:focus { outline: none; }
.qs-sheet__search:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
html.shg-lock, html.shg-lock body { overflow: hidden; }

/* The kit clips sideways overflow with overflow-x: hidden, which makes .qs-pg a scroll container and
   breaks position: sticky (the collection filter bar). clip gives the same result without that. */
.qs-pg { overflow-x: clip; }

/* Body type for everything inside a rebuild page (kit: Google Sans 14/1.6, weight 400, ink). The page
   does not inherit Flatsome's body font; text outside kit components still gets the brand voice. */
.qs-pg { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ------------------------------------------------------------------
 * Footer · final (Shooglis Brand Refine/Footer · final-html): stripes edge with the JOY UNBOXED
 * pill at the end, then the inverse footer. Replaces the kit footer on every rebuild page.
 * ------------------------------------------------------------------ */
.shg-stp { display: flex; align-items: center; justify-content: flex-end; block-size: 56px; margin-block-start: var(--section-gap); padding-inline: 60px; background: repeating-linear-gradient(90deg, var(--pale-sky) 0 32px, var(--seashell) 32px 64px); }
.shg-slg { padding: 10px 28px; border-radius: var(--r-pill); background: var(--inverse); color: var(--on-inverse); font-family: var(--font-slogan); font-weight: 700; font-size: 22px; line-height: .95; letter-spacing: -0.01em; text-transform: uppercase; direction: ltr; }
.shg-ft { --fg: var(--on-inverse); --mut: rgb(255 246 238 / .65); --line: rgb(255 246 238 / .2); padding: 64px 60px 28px; background: var(--inverse); color: var(--fg); }
.shg-ft a { color: var(--fg); text-decoration: none; }
.shg-ft a:hover { opacity: .7; }
.shg-ft__g { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.shg-ft__lead { display: flex; flex-direction: column; gap: 28px; }
.shg-mark { position: relative; display: block; overflow: hidden; inline-size: 88px; aspect-ratio: 1266 / 1264; direction: ltr; }
.shg-mark img { position: absolute; max-inline-size: none; inline-size: calc(100% * 2000 / 1266); block-size: auto; left: calc(-100% * 367 / 1266); top: calc(-100% * 368 / 1264); }
.shg-ft__col { display: flex; flex-direction: column; gap: 4px; }
.shg-ft__col h3 { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--mut); }
.shg-ft__col a { padding-block: 5px; font-size: 15px; line-height: 1.35; }
.shg-news { display: flex; flex-direction: column; gap: 12px; max-inline-size: 420px; }
.shg-news__l { font-size: 15px; line-height: 1.45; }
.shg-news__f { display: flex; align-items: center; justify-content: space-between; gap: 8px; block-size: 52px; padding-inline: 20px 7px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--dur-ink) var(--ease-circ); }
.shg-news__f:focus-within { box-shadow: inset 0 0 0 1px var(--fg); }
.shg-news__f input { flex: 1; min-inline-size: 0; block-size: 100%; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; font-size: 14px; }
.shg-news__f input::placeholder { color: var(--mut); }
.shg-news__f input:focus { outline: none; }
.shg-news__f button { appearance: none; display: grid; place-items: center; flex: none; inline-size: 38px; block-size: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--fg); color: var(--inverse); cursor: pointer; }
.shg-news__f button svg { inline-size: 16px; block-size: 16px; }
.shg-news__f button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.shg-news.is-busy button { opacity: .6; pointer-events: none; }
.shg-toast { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 14px 20px; border-radius: var(--r-pill); background: var(--on-inverse); color: var(--inverse); font-size: 15px; line-height: 1.4; }
.shg-toast svg { flex: none; inline-size: 18px; block-size: 18px; }
.shg-news__s { font-size: 13px; line-height: 1.5; color: var(--mut); }
.shg-ft__b2b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-block-start: 40px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
.shg-ft__b2b h3 { margin: 0; inline-size: 100%; font-size: 13px; font-weight: 500; color: var(--mut); }
.shg-ft__b2b a { padding-block: 5px; font-size: 14px; color: var(--fg); }
.shg-ft__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-block-start: 48px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
.shg-ft__bottom > :last-child { justify-self: end; }
.shg-soc { display: flex; gap: 6px; }
.shg-soc a { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; }
.shg-soc svg { inline-size: 22px; block-size: 22px; }
.shg-copy { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 0; font-size: 13px; color: var(--mut); }
.shg-legal { display: inline-flex; gap: 16px; }
.shg-legal a, .shg-legal__ck { color: var(--mut); text-decoration: underline; text-underline-offset: 3px; }
.shg-legal__ck { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.shg-pay { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; direction: ltr; }
/* Payment marks: white versions straight on the footer, no badge */
.shg-pay { align-items: center; gap: 18px; }
.shg-pay li { display: grid; place-items: center; block-size: 28px; }
.shg-pay img { display: block; inline-size: auto; opacity: .9; }
/* The product page's sticky bar sits over the footer's end on phones */
@media (max-width: 1100px) and (min-width: 750px) {
	.shg-ft__g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.shg-ft__lead { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
@media (max-width: 749px) {
	.shg-stp { block-size: 48px; padding-inline: 20px; }
	.shg-slg { padding: 8px 20px; font-size: 17px; }
	.shg-ft { padding: 48px 20px 28px; }
	.shg-ft__g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
	.shg-ft__lead { grid-column: 1 / -1; }
	.shg-mark { inline-size: 72px; }
	.shg-ft__bottom { grid-template-columns: 1fr; justify-items: center; gap: 18px; margin-block-start: 40px; }
	.shg-ft__bottom > :last-child { justify-self: center; }
	.shg-pay { justify-content: center; }
	.shg-view-product .shg-ft { padding-block-end: 110px; }
}

/* Hero: <picture> serves one crop per device; the kit's img rules apply to its img */
.qs-hero__media picture { display: contents; }
/* Hero a little shorter on desktop (Jonas, 20 Oct): 600px -> 520px. The other blocks keep --block-h. */
@media (min-width: 750px) { .qs-hero { block-size: 520px; } }
/* Hero sub-line (copy pass A, 29 Oct): carries "מארזי מתנה" and the express promise. Hidden on phones, where the band says it. */
.qs-hero__sub { margin: 0; max-inline-size: 30em; font-size: 17px; line-height: 1.45; color: rgb(56 27 32 / .8); text-wrap: pretty; }

/* Floating WhatsApp button (replaces the WhatsApp Chat plugin's React widget). Sits above the
   accessibility widget, which takes the bottom-left corner. */

/* Occasions: the full list from wp-admin. Smaller type; two columns once the list is long. */
.qs-occ .qs-occ__item { font-size: 30px; }
.qs-occ.shg-occ--many .qs-occ__list { justify-content: flex-start; padding-block: 40px 132px; overflow-y: auto; }
.qs-occ.shg-occ--many .qs-occ__items { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 2px 40px; }
.qs-occ.shg-occ--many .qs-occ__item { font-size: 22px; line-height: 1.35; }
.shg-occ__photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; }
@media (max-width: 749px) {
	.qs-occ .qs-occ__item { font-size: 22px; }
	.qs-occ.shg-occ--many .qs-occ__list { overflow: visible; padding-block: 32px; }
	.qs-occ.shg-occ--many .qs-occ__items { column-gap: 20px; }
	.qs-occ.shg-occ--many .qs-occ__item { font-size: 17px; }
}

/* Header logo: the wordmark only (no icon) */
.qs-hdr .shg-hdr-logo { inline-size: 148px; }
@media (max-width: 749px) { .qs-hdr .shg-hdr-logo { inline-size: 112px; } }
/* Phones (Jonas, 3 Nov): a slimmer announcement line, so the hero gets the room (the kit has 44px). */
@media (max-width: 749px) {
	.qs-announce { min-block-size: 32px; margin-block-start: 6px; border-radius: 10px; font-size: 12.5px; }
	.qs-announce__in { grid-template-columns: 30px minmax(0, 1fr) 30px; }
	.qs-announce__arrow { inline-size: 30px; block-size: 32px; }
	.qs-announce__arrow svg { inline-size: 13px; block-size: 13px; }
}

/* Desktop gifts menu: type / recipient / occasion, each with its "לכל" hub link, then "לכל מארזי המתנה" */
.qs-mega.shg-mega--gifts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; }
.shg-mega__more { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 12px; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.shg-mega__more svg, .shg-sheet__more svg { inline-size: 14px; block-size: 14px; }
.shg-mega__end { grid-column: 1 / -1; display: flex; justify-content: flex-start; padding-block-start: 20px; border-block-start: 1px solid var(--ink-14); }
/* Phone menu: the same three groups */
.shg-sheet__sec { padding-block: 4px 18px; }
.shg-sheet__t { margin: 14px 16px 2px; font-size: 13px; font-weight: 500; color: var(--ink-55); }
.shg-sheet__more { display: inline-flex; align-items: center; gap: 6px; margin: 12px 16px 0; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.shg-sheet__allbtn { display: flex; inline-size: calc(100% - 32px); margin: 8px 16px 0; }

/* "שוגליז לעסקים": a plain button (no submenu) that stands out in the header */
.qs-hdr__nav { align-items: center; }
.qs-hdr__nav a.shg-hdr-biz { display: inline-flex; align-items: center; min-block-size: 36px; padding: 0 16px; border-radius: var(--r-pill); background: var(--inverse); color: var(--on-inverse); font-size: 14px; line-height: 1; transition: opacity var(--dur-op) ease-in-out; }
.qs-hdr__nav a.shg-hdr-biz:hover { opacity: .85; }
.qs-hdr__nav a.shg-hdr-biz:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 749px) { .qs-hdr__nav a.shg-hdr-biz { display: none; } }

/* Header, desktop (Jonas, 18 Oct): shooglis on the left, seven category links in the middle with
   thin dividers and a line under the current one, the business button after them, icons on the right.
   The "מארזי מתנה" mega menu stays for tablet; the phone keeps its own menu sheet. */
.shg-hdr-home { display: block; }
.shg-cart-label { order: -1; margin-inline-end: 6px; font-size: 15px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.qs-hdr__nav a.shg-hdr-cat { display: none; }
@media (min-width: 1280px) {
	.qs-hdr { grid-template-columns: auto 1fr auto; gap: 24px; padding-inline: 40px; border-block-end: 1px solid var(--ink-14); }
	.qs-hdr__tools { grid-column: 1; grid-row: 1; justify-content: flex-start; gap: 4px; }
	.qs-hdr__nav { grid-column: 2; grid-row: 1; justify-content: center; gap: 0; align-self: stretch; font-size: 15px; }
	.qs-hdr .shg-hdr-home { grid-column: 3; grid-row: 1; }
	.qs-hdr__nav a.shg-hdr-gifts { display: none; }
	.qs-hdr__nav a.shg-hdr-cat { display: flex; }
	.qs-hdr__nav .qs-hdr__link { align-items: center; block-size: 100%; padding: 0 14px; white-space: nowrap; }
	.qs-hdr__nav .shg-hdr-cat + .shg-hdr-cat::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; block-size: 16px; inline-size: 1px; transform: translateY(-50%); background: var(--ink-14); }
	.qs-hdr__nav .qs-hdr__link[aria-current]::after { content: ""; position: absolute; inset-inline: 10px; inset-block-end: -1px; block-size: 2px; background: var(--ink); }
	.qs-hdr__nav a.shg-hdr-biz { margin-inline-start: 14px; white-space: nowrap; }
	.qs-hdr .shg-hdr-logo { inline-size: 140px; }
}
@media (min-width: 1280px) and (max-width: 1599px) {
	.qs-hdr { padding-inline: 24px; gap: 16px; }
	.qs-hdr__nav { font-size: 14px; }
	.qs-hdr__nav .qs-hdr__link { padding: 0 10px; }
	.shg-cart-label { display: none; }
}
@media (max-width: 999px) {
	.shg-cart-label { display: none; }
}

/* Breadcrumbs (inc/crumbs.php): a list with "/" between items, the current page in full ink. */
:is(.shg-crumb, .shg-crumbs) ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
:is(.shg-crumb, .shg-crumbs) li + li::before { content: "/"; margin-inline: 8px; color: var(--ink-55); }
:is(.shg-crumb, .shg-crumbs) [aria-current] { color: var(--ink); }
.shg-hub > .shg-crumb, .shg-blog > .shg-crumb, .shg-acc__crumb { margin-block-end: 20px; }
.shg-acc__crumb { font-size: 13px; color: var(--ink-70); }
.shg-acc__crumb a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Category dropdowns (inc/header-menu.php): link columns, then the three best sellers. */
.qs-mega.shg-mega--cat { grid-template-columns: repeat(4, minmax(0, 170px)) minmax(0, 1fr); gap: 28px 40px; }
.shg-mega__best { grid-column: -2; grid-row: 1; }
.shg-mega__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.shg-mega__card { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.shg-mega__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-tile); background: var(--tile); }
.shg-mega__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 400ms var(--ease-out, ease-out); }
.shg-mega__card:hover .shg-mega__img img { transform: scale(1.04); }
.shg-mega__n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shg-mega__card .qs-num { color: var(--ink-70); }
.qs-mega.shg-mega--cat .shg-mega__end { grid-column: 1 / -1; }

/* Header search: bigger magnifier everywhere; on desktop a visible search field (Jonas, 19 Oct). */
.qs-hdr .shg-hdr-search svg { inline-size: 24px; block-size: 24px; }
.shg-hdr-search__l { display: none; }
@media (min-width: 1440px) {
	.qs-hdr .shg-hdr-search { display: inline-flex; flex-direction: row; align-items: center; inline-size: auto; block-size: 44px; gap: 10px; padding: 0 14px 0 20px; border-radius: var(--r-pill); background: var(--tile); color: var(--ink); }
	.qs-hdr .shg-hdr-search:hover { box-shadow: inset 0 0 0 1px var(--ink); }
	.qs-hdr .shg-hdr-search svg { inline-size: 22px; block-size: 22px; }
	.shg-hdr-search__l { display: inline; min-inline-size: 104px; font-size: 14.5px; color: var(--ink-70); text-align: start; white-space: nowrap; }
}

/* Business link in the new menu: same type as the categories, set apart by a divider and an icon. */
@media (min-width: 1280px) {
	.qs-hdr__nav a.shg-hdr-biz { position: relative; display: flex; align-items: center; gap: 7px; block-size: 100%; min-block-size: 0; margin-inline-start: 0; padding: 0 14px; border-radius: 0; background: none; color: var(--ink); font-size: inherit; font-weight: 600; line-height: 1.2; }
	.qs-hdr__nav a.shg-hdr-biz::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; block-size: 16px; inline-size: 1px; transform: translateY(-50%); background: var(--ink-14); }
	.qs-hdr__nav a.shg-hdr-biz svg { inline-size: 18px; block-size: 18px; }
	.qs-hdr__nav a.shg-hdr-biz:hover { opacity: .7; }
	.qs-hdr__nav a.shg-hdr-biz[aria-current]::after { content: ""; position: absolute; inset-inline: 14px; inset-block-end: -1px; block-size: 2px; background: var(--ink); }
}
@media (max-width: 1279px) { .qs-hdr__nav a.shg-hdr-biz svg { display: none; } }
@media (min-width: 1280px) and (max-width: 1599px) { .qs-hdr__nav a.shg-hdr-biz { padding: 0 10px; } }
@media (min-width: 1280px) and (max-width: 1799px) { .shg-cart-label { display: none; } }

/* Wishlist hearts (inc/wishlist.php) */
.shg-wl { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 3; display: grid; place-items: center; inline-size: 38px; block-size: 38px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .9); color: var(--ink); cursor: pointer; transition: transform 200ms var(--ease-out, ease-out), background var(--dur-op); }
.shg-wl svg { inline-size: 20px; block-size: 20px; }
.shg-wl:hover { transform: scale(1.06); }
.shg-wl.is-on svg { fill: currentColor; }
.shg-wl.is-pop { animation: shg-wl-pop 360ms var(--ease-out, ease-out); }
.shg-wl:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@keyframes shg-wl-pop { 40% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .shg-wl, .shg-wl.is-pop { transition: none; animation: none; } }
.shg-hdr-wl { position: relative; }
.shg-wl-count { position: absolute; inset-block-start: 5px; inset-inline-start: 3px; min-inline-size: 17px; block-size: 17px; padding-inline: 4px; border-radius: 999px; background: var(--ink); color: var(--ground); font-size: 13px; font-weight: 500; line-height: 17px; text-align: center; }
.shg-wlp__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-inline-size: 520px; margin: 32px 60px 0; padding: 32px; border-radius: var(--r-mid); background: var(--tile); }
.shg-wlp__empty p { margin: 0; font-size: 16px; line-height: 1.6; }
@media (max-width: 749px) {
	.shg-wl { inline-size: 34px; block-size: 34px; inset-block-start: 8px; inset-inline-end: 8px; }
	.shg-wlp__empty { margin: 24px 16px 0; padding: 24px; }
}
@media (min-width: 1280px) and (max-width: 1499px) {
	.qs-hdr__tools { gap: 0; }
	.qs-hdr__tools .qs-icon-btn:not(.shg-hdr-search) { inline-size: 40px; }
	.qs-hdr__nav .qs-hdr__link { padding: 0 9px; }
	.shg-hdr-search__l { min-inline-size: 0; }
	.qs-hdr { gap: 12px; padding-inline: 20px; }
}

/* Secure payment (product page, cart drawer), redesigned 31 Oct 2026: a quiet white card, the lock in a
   Pale Sky circle, and each payment mark on its own small tile so the row reads like a card terminal. */
.shg-secure { display: grid; gap: 12px; margin-block-start: 16px; padding: 14px 16px 16px; border-radius: var(--r-tile); background: #fff; box-shadow: inset 0 0 0 1px var(--ink-14); }
.shg-secure__t { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.shg-secure__t svg { box-sizing: content-box; inline-size: 16px; block-size: 16px; padding: 7px; border-radius: 50%; background: var(--pale-sky); }
.shg-pay--ink { display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 6px; } /* one even row of tiles, phone included */
.shg-pay--ink li { display: grid; place-items: center; block-size: 32px; min-inline-size: 0; padding-inline: 4px; box-sizing: border-box; border-radius: 7px; background: var(--seashell); box-shadow: inset 0 0 0 1px var(--ink-14); }
.shg-pay--ink img { max-block-size: 15px; max-inline-size: 100%; inline-size: auto; filter: brightness(0) saturate(100%); opacity: .78; }
.shg-drw__f .shg-secure { margin-block-start: 2px; padding: 10px 12px 12px; gap: 10px; }
.shg-drw__f .shg-secure__t { font-size: 13px; }
.shg-drw__f .shg-pay--ink li { block-size: 28px; }
.shg-co-pay { margin-block-start: 12px; }

/* Homepage hero: the photo is a link to all gifts. */
.shg-hero-link { display: block; inline-size: 100%; block-size: 100%; cursor: pointer; }
.qs-hdr [data-shg-search-open] svg { inline-size: 24px; block-size: 24px; }

/* Homepage section 2: top categories. Desktop 12 in two rows of 6; phone two rows that scroll sideways. "למי המתנה?" circles. */
.shg-tc.qs-gap { margin-block-start: 56px; }
.shg-tc__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 28px; inline-size: 100%; max-inline-size: 1200px; margin: 40px 0 0; padding: 0 var(--pair-gutter); list-style: none; }
.shg-tc .qs-rc__item { inline-size: 100%; gap: 16px; }
.shg-tc .qs-rc__media { inline-size: 100%; block-size: auto; aspect-ratio: 1; max-inline-size: 170px; background: var(--tile); }
.shg-tc .qs-rc__media img { position: static; inline-size: 100%; block-size: 100%; object-fit: cover; left: auto; top: auto; }
.shg-tc .qs-rc__name { font-size: 17px; font-weight: 500; text-wrap: balance; }
.shg-tc__scrub { display: none; } /* Phone only: the grid scrolls there. */
.shg-tc__scrub.is-idle { visibility: hidden; }
@media (max-width: 1099px) {
	.shg-tc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 749px) {
	.shg-tc.qs-gap { margin-block-start: 36px; }
	.shg-tc__grid { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 100px; gap: 20px 12px; margin-block-start: 24px; padding-inline: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none; }
	.shg-tc__grid::-webkit-scrollbar { display: none; }
	.shg-tc__scrub { display: block; margin-block-start: 24px; }
	.shg-tc__grid li { scroll-snap-align: start; }
	.shg-tc .qs-rc__media { max-inline-size: none; }
	.shg-tc .qs-rc__item { gap: 10px; }
	.shg-tc .qs-rc__name { font-size: 14px; white-space: normal; }
}

/* Occasions as "למי המתנה?" circles: photos fill the circle (the recipients use the icon crop). */
.shg-rc--photo { background: var(--tile); }
.shg-rc--photo img { position: static; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; left: auto; top: auto; }
.shg-occ2__all { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.shg-occ2 .qs-rc__row { gap: 32px; }
@media (max-width: 749px) { .shg-occ2 .qs-rc__row { gap: 16px; } .shg-occ2 .shg-tc__scrub, #recipients .shg-tc__scrub { margin-block-start: 20px; } }
.shg-occ2 .shg-tc__scrub, #recipients .shg-tc__scrub { display: block; margin-block-start: 28px; } /* Any width: hidden by JS when the row fits. */

/* FAQ accordion (business page, homepage). Moved from business.css so any view can use it. */
.shg-faqA { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 80px; padding-inline: 60px; }
.shg-faqA__help { margin-block-start: 16px; }
.shg-faq__i { border-block-end: 1px solid var(--ink-14); }
.shg-faq__q { appearance: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; inline-size: 100%; min-block-size: 64px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 18px; text-align: start; cursor: pointer; }
.shg-faq__q svg { flex: none; inline-size: 18px; block-size: 18px; transition: transform var(--dur-op); }
.shg-faq__i.is-open .shg-faq__q svg { transform: rotate(180deg); }
.shg-faq__a { margin: 0; padding-block-end: 22px; font-size: 15px; line-height: 1.7; color: var(--ink-70); max-inline-size: 60ch; }
.shg-faq__a p { margin: 0 0 8px; }
.shg-faq__a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .shg-faqA { gap: 40px; padding-inline: 32px; } }
@media (max-width: 749px) {
	.shg-faqA { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-inline: 20px; }
	.shg-faq__q { font-size: 16px; }
}
.shg-hfaq { max-inline-size: 1400px; margin-inline: auto; }
.shg-hfaq .shg-faqA__help a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.shg-hfaq .shg-h2t { margin: 0; font-size: 44px; font-weight: 700; line-height: 1.05; }
.shg-hfaq .shg-lede { margin: 12px 0 24px; font-size: 17px; line-height: 1.6; color: var(--ink-70); }
@media (max-width: 749px) {
	.shg-hfaq .shg-h2t { font-size: 30px; }
	.shg-hfaq .shg-lede { margin-block-end: 16px; font-size: 15px; }
}
/* Desktop: title and ask box on one side, questions on the other. Phone: title, questions, then the ask box. */
.shg-hfaq { grid-template-areas: "t q" "a q"; grid-template-rows: auto 1fr; row-gap: 0; }
.shg-hfaq__t { grid-area: t; }
.shg-hfaq__ask { grid-area: a; }
.shg-hfaq .shg-faq { grid-area: q; }
@media (max-width: 749px) {
	.shg-hfaq { grid-template-areas: "t" "q" "a"; grid-template-rows: auto; row-gap: 24px; }
}

/* Phone hero (Jonas, 20 Oct): a square card, text on the photo. The photo fills the square,
   the headline and both buttons sit on its lower part over a soft fade to the tile colour. */
@media (max-width: 749px) {
	.qs-hero { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--r-hero); overflow: hidden; background: var(--tile); }
	.qs-hero__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
	.qs-hero__media img { object-position: center 30%; }
	.qs-hero__copy {
		position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; gap: 10px;
		padding: 48px 16px 16px;
		background: linear-gradient(to bottom, rgb(238 222 207 / 0), rgb(238 222 207 / .85) 45%, var(--tile) 75%);
		pointer-events: none;
	}
	.qs-hero__copy > * { pointer-events: auto; }
	.qs-hero__en { display: none; }
	.qs-hero__title { font-size: clamp(24px, 8vw, 32px); line-height: 1; white-space: normal; text-wrap: balance; }
	.qs-hero__sub { display: none; }
	.qs-hero__actions { inline-size: 100%; margin-block-start: 2px; flex-wrap: nowrap; gap: 8px; }
	.qs-hero .qs-btn.qs-btn--commit { flex: 0 0 auto; padding-inline-start: 16px; font-size: 14px; }
	.qs-hero .qs-btn.shg-btn-2 { flex: 1 1 0; min-inline-size: 0; padding-inline: 12px; font-size: 14px; background: rgb(255 246 238 / .6); }
}

/* "Feeling way better now" (Jonas, 20 Oct): the text sits on top of the striped graphic.
   One wide striped card, the bear on one side, the text in a seashell panel over the stripes. */
.qs-chapter { position: relative; display: block; padding-inline: var(--pair-gutter); }
.qs-chapter .qs-media--stripes { block-size: 500px; border-radius: var(--r-hero); overflow: hidden; justify-items: end; padding-inline-end: 9%; }
.qs-chapter .qs-media--stripes .qs-mascot { block-size: 520px; inline-size: 520px; max-inline-size: 48%; object-fit: contain; transform: translateY(-3%); }
.qs-chapter .qs-chapter__text {
	position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--pair-gutter) + 7%); translate: 0 -50%;
	inline-size: min(460px, 44%); padding: 44px 40px; gap: 18px;
	border-radius: 28px; background: var(--seashell); box-shadow: 0 24px 50px -30px rgb(56 27 32 / .35);
}
@media (max-width: 749px) {
	.qs-chapter { padding-inline: 20px; }
	.qs-chapter .qs-media--stripes { block-size: 580px; aspect-ratio: auto; justify-items: center; align-items: start; padding: 18px 0 0; }
	.qs-chapter .qs-media--stripes .qs-mascot { inline-size: 82%; max-inline-size: 300px; block-size: auto; transform: none; }
	.qs-chapter .qs-chapter__text {
		inset-block-start: auto; inset-block-end: 14px; inset-inline: 34px; translate: none;
		inline-size: auto; padding: 22px 18px; gap: 12px; border-radius: 20px;
	}
	.qs-chapter .qs-chapter__line { font-size: 16px; }
}

/* iPhone zooms the page into any field under 16px when it is tapped (audit, 20 Oct).
   Every typing field is 16px on phones. !important on purpose: some field rules carry an id
   (checkout) and this guard must win everywhere, including plugin fields. */
@media (max-width: 749px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), select, textarea { font-size: 16px !important; }
}

/* Bigger tap areas, same look (audit, 20 Oct): an invisible hit area around small links and icons,
   so each one is at least about 44px to a finger. */
:is(.shg-crumbs a, .shg-legal a, .shg-legal__ck, .shg-pc__n, .shg-rv__more, .shg-lnk, .shg-chdr__back, .shg-soc a, .qs-announce__arrow, .shg-share, .shg-pacts .shg-wl--pdp) { position: relative; } /* not the card heart: it is already absolute in its corner */
.shg-crumbs a::after { content: ""; position: absolute; inset: -14px 0; }
.shg-legal a::after, .shg-legal__ck::after, .shg-rv__more::after, .shg-lnk::after { content: ""; position: absolute; inset: -12px -4px; }
.shg-pc__n::after { content: ""; position: absolute; inset: -10px 0; }
.shg-chdr__back::after { content: ""; position: absolute; inset: -12px; }
.shg-soc a::after, .qs-announce__arrow::after { content: ""; position: absolute; inset: -4px; }
.shg-wl::after, .shg-share::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.shg-pc__plus::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }

/* Desktop header with מארזים לעובדים added (20 Oct): below 1800px the repeated "מתנות" drops from the category
   labels (לגבר | לאישה | ליולדת ...), so all nine items and the logo fit from 1280px up. */
@media (min-width: 1280px) and (max-width: 1799px) { .shg-hdr-pre { display: none; } }

/* Sticky header (Jonas, 20 Oct): the announcement bar scrolls away, the header stays on top.
   Everything else that sticks starts just under it, and jump links land below it. */
.qs-hdrw { position: sticky; inset-block-start: 0; z-index: 40; background: var(--ground); }
.qs-hdrw.is-stuck { box-shadow: 0 1px 0 var(--ink-14), 0 8px 24px -18px rgb(56 27 32 / .35); }
html { scroll-padding-block-start: calc(var(--header-h) + 12px); }

/* ============================================================
   Header and menu after Parcelle (Jonas, 20 Oct): the north star.
   Desktop (1024px up): logo centred on top, a short centred row of items under it ending in a quote
   button, and big panels (link columns with small headings, a photo on the side).
   Phone and tablet: the logo bar, and a side drawer whose sections open in place (accordions).
   ============================================================ */
.shg-nh { --nh-bar: 64px; }
.shg-nh__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; block-size: var(--nh-bar); padding-inline: 12px; }
.shg-nh__start, .shg-nh__end { display: flex; align-items: center; gap: 2px; }
.shg-nh__end { justify-content: flex-end; }
.shg-nh__logo { display: block; inline-size: 128px; }
.shg-nh__logo .qs-lockup { inline-size: 100%; }
.shg-nh__search, .shg-nh__nav { display: none; }
.shg-nh .qs-icon-btn svg { inline-size: 24px; block-size: 24px; }

@media (min-width: 1024px) {
	:root { --header-h: 129px; }
	.shg-nh { --nh-bar: 76px; }
	.shg-nh__bar { padding-inline: 40px; }
	.shg-nh__phone { display: none; }
	.shg-nh__logo { inline-size: 158px; }
	.shg-nh__end { gap: 6px; }
	.shg-nh__search { display: inline-flex; align-items: center; gap: 10px; block-size: 42px; padding: 0 16px 0 22px; border: 0; border-radius: 999px; background: var(--tile); color: var(--ink-70); font: inherit; font-size: 14.5px; cursor: pointer; transition: box-shadow .2s ease; }
	.shg-nh__search svg { inline-size: 20px; block-size: 20px; color: var(--ink); }
	.shg-nh__search:hover { box-shadow: inset 0 0 0 1px var(--ink); }
	.shg-nh__nav { display: flex; justify-content: center; align-items: stretch; gap: 4px; block-size: 52px; border-block-end: 1px solid var(--ink-14); }
	.shg-nh__nav .qs-hdr__link { position: relative; display: flex; align-items: center; padding: 0 16px; color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
	.shg-nh__nav .qs-hdr__link::after { content: ""; position: absolute; inset-inline: 16px; inset-block-end: 12px; block-size: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform .3s var(--m-out, ease); }
	.shg-nh__nav .qs-hdr__link:is(:hover, .is-open, [aria-current])::after { transform: scaleX(1); }
	.shg-nh__cta { align-self: center; margin-inline-start: 14px; padding: 10px 20px; border-radius: 999px; background: var(--night-bordeaux); color: var(--seashell); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .25s ease, color .25s ease; }
	.shg-nh__cta:hover { background: var(--pale-sky); color: var(--rich-mahogany); }

	/* Panels */
	.qs-mega.shg-nh__panel { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 32px 40px; padding: 36px 60px 44px; background: var(--ground); border-block: 1px solid var(--ink-14); }
	.qs-mega.shg-nh__panel--emp { grid-template-columns: repeat(2, minmax(0, 1fr)) repeat(2, minmax(0, 1.25fr)); }
	.qs-mega.shg-nh__panel--cat > .shg-nh__pic { grid-column: -2; } /* לאישה, לגבר, אלכוהול: lists on the start side, the photo in the same last slot as מארזים. */
	.shg-nh__t { margin: 0 0 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-55); }
	.shg-nh__col ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
	.shg-nh__col li a { display: inline-block; padding-block: 5px; color: var(--ink); font-size: 16px; line-height: 1.35; text-decoration: none; }
	.shg-nh__col li a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
	.shg-nh__more { display: inline-block; margin-block-start: 14px; color: var(--ink); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; text-decoration: underline; text-underline-offset: 4px; }
	.shg-nh__pic { display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none; }
	.shg-nh__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-tile); background: var(--tile); }
	.shg-nh__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 900ms var(--m-out, ease); }
	.shg-nh__pic:hover .shg-nh__img img { transform: scale(1.04); }
	.shg-nh__cap { font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-align: center; }

}
@media (min-width: 1024px) and (max-width: 1279px) {
	.shg-nh__nav .qs-hdr__link { padding: 0 11px; font-size: 14.5px; }
	.shg-nh__nav .qs-hdr__link::after { inset-inline: 11px; }
	.qs-mega.shg-nh__panel { padding-inline: 32px; gap: 28px 28px; }
	.shg-nh__search span { display: none; }
	.shg-nh__search { padding: 0 12px; }
}

/* Phone and tablet drawer (under 1024px): slides in from the side, the page dims behind it. */
@media (max-width: 1023px) {
	.qs-sheet.shg-nd { position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; z-index: 60; display: flex; flex-direction: column; inline-size: min(88vw, 420px); background: var(--ground); box-shadow: 0 0 60px -20px rgb(56 27 32 / .45); animation: none; transform: none; transition: transform 520ms var(--m-drawer, ease), visibility 0s; }
	.qs-sheet.shg-nd.is-closed { visibility: hidden; transform: translateX(100%); transition: transform 260ms var(--m-drawer, ease), visibility 0s 260ms; }
	[dir="ltr"] .qs-sheet.shg-nd.is-closed { transform: translateX(-100%); }
	.shg-nd-scrim { position: fixed; inset: 0; z-index: 59; background: rgb(56 27 32 / .32); opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 0s 260ms; }
	.qs-sheet.shg-nd:not(.is-closed) + .shg-nd-scrim { opacity: 1; visibility: visible; transition: opacity 420ms ease, visibility 0s; }
}
@media (min-width: 1024px) { .qs-sheet.shg-nd, .shg-nd-scrim { display: none !important; } }
/* Phone menu, two tabs (after Contrast's ראשי / עסקים): gifts and business, one tap apart. */
.shg-nd__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 10px 12px 0 22px; border-block-end: 1px solid var(--ink-14); }
[dir="rtl"] .shg-nd__top { padding: 10px 22px 0 12px; }
.shg-nd__tabs { display: flex; gap: 26px; }
.shg-nd__tab { position: relative; appearance: none; padding: 12px 0 14px; border: 0; background: none; color: var(--ink-55); font: inherit; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: color 180ms ease; }
.shg-nd__tab::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transition: transform 260ms var(--m-out, cubic-bezier(.23,1,.32,1)); }
.shg-nd__tab[aria-selected="true"] { color: var(--ink); }
.shg-nd__tab[aria-selected="true"]::after { transform: scaleX(1); }
.shg-nd__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.shg-nd__top .qs-icon-btn { margin-block-end: 6px; }
.shg-nd__body { flex: 1; min-block-size: 0; overflow-y: auto; padding: 18px 22px 24px; overscroll-behavior: contain; }
.shg-nd__panel { display: flex; flex-direction: column; gap: 16px; animation: m-acc-in .32s var(--m-soft, ease); }
.shg-nd__panel[hidden] { display: none; }
.shg-nd__search { display: flex; align-items: center; gap: 10px; block-size: 48px; padding: 0 16px; border-radius: 999px; background: var(--tile); }
.shg-nd__search svg { flex: none; inline-size: 20px; block-size: 20px; }
.shg-nd__search input { flex: 1; min-inline-size: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; }
.shg-nd__search input:focus { outline: none; }
.shg-nd__go { flex: none; inline-size: 18px; block-size: 18px; color: var(--ink-55); }
[dir="ltr"] .shg-nd__go { transform: scaleX(-1); }

/* "מגיע היום": the one row that sells, on the Pale Sky of the announcement bar. */
.shg-nd__today { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-mid, 16px); background: var(--pale-sky); color: var(--ink); text-decoration: none; transition: transform 160ms ease-out; }
.shg-nd__today:active { transform: scale(.98); }
.shg-nd__today-i { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--ground); }
.shg-nd__today-i svg { inline-size: 22px; block-size: 22px; }
.shg-nd__today-t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-inline-size: 0; }
.shg-nd__today-t b { font-size: 17px; font-weight: 600; }
.shg-nd__today-t small { color: var(--ink-70); font-size: 13.5px; }
.shg-nd__today .shg-nd__go { color: var(--ink); }

/* Top categories as photo circles, scrolling sideways (the homepage's language). */
.shg-nd__cats { display: grid; grid-auto-flow: column; grid-auto-columns: 74px; gap: 12px; margin: 0 -22px; padding: 2px 22px 4px; overflow-x: auto; list-style: none; scrollbar-width: none; scroll-snap-type: x proximity; }
.shg-nd__cats::-webkit-scrollbar { display: none; }
.shg-nd__cats li { scroll-snap-align: start; }
.shg-nd__cats a { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; }
.shg-nd__cat-m { display: block; inline-size: 74px; block-size: 74px; overflow: hidden; border-radius: 50%; background: var(--tile); }
.shg-nd__cat-m img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.shg-nd__cat-n { font-size: 13px; line-height: 1.25; text-align: center; }

.shg-nd__list { display: flex; flex-direction: column; }
.shg-nd__acc, .shg-nd__item { border-block-end: 1px solid var(--ink-14); }
.shg-nd__acc > summary, .shg-nd__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-block-size: 58px; color: var(--ink); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; list-style: none; }
.shg-nd__acc > summary::-webkit-details-marker { display: none; }
.shg-nd__acc > summary svg { flex: none; inline-size: 20px; block-size: 20px; transition: transform .35s var(--m-out, ease); }
.shg-nd__acc[open] > summary svg { transform: rotate(180deg); }
.shg-nd__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: -4px 0 12px; padding: 0; list-style: none; animation: m-acc-in .36s var(--m-soft, ease); }
.shg-nd__links a { display: block; padding-block: 9px; color: var(--ink-70); font-size: 15.5px; text-decoration: none; }
.shg-nd__links a.shg-nd__more { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Business tab: the pitch on a tile, the lists, the quote button. */

/* Foot: WhatsApp as the full-width way to get help, then the small links. */
.shg-nd__foot { display: flex; flex-direction: column; gap: 12px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--ink-14); }
.shg-nd__wa { display: flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 50px; border-radius: var(--r-pill, 999px); box-shadow: inset 0 0 0 1px var(--ink-14); color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; transition: transform 160ms ease-out; }
.shg-nd__wa:active { transform: scale(.98); }
.shg-nd__wa svg { inline-size: 20px; block-size: 20px; }
.shg-nd__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.shg-nd__meta a, .shg-nd__meta .shg-langsw { color: var(--ink-70); font-size: 14px; text-decoration: none; }
@media (max-width: 1023px) { :root { --header-h: 64px; } } /* tablet uses the phone bar, so sticky offsets match it */

/* ---------- budget cards: business page and homepage ("מארזים לפי תקציב") ---------- */
.shg-b2bp { display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 60px; }
.shg-b2bp__line { margin: 10px 0 0; font-size: 16px; color: var(--ink-70); }
.shg-b2bp__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; inline-size: 100%; max-inline-size: 1100px; margin: 36px 0 0; padding: 0; list-style: none; }
.shg-b2bp__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-block-size: 150px; padding: 26px 24px; border-radius: var(--r-tile); background: var(--tile); color: var(--ink); text-align: start; text-decoration: none; transition: background-color .25s ease, transform .4s var(--m-soft, ease); }
.shg-b2bp__t { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.shg-b2bp__n { font-size: 15px; color: var(--ink-70); }
.shg-b2bp__card svg { position: absolute; inset-block-end: 22px; inset-inline-end: 22px; inline-size: 22px; block-size: 22px; transition: transform .35s var(--m-out, ease); }
@media (hover: hover) and (pointer: fine) {
	.shg-b2bp__card:hover { background: var(--pale-sky); transform: translateY(-3px); }
	.shg-b2bp__card:hover svg { transform: translateX(-4px); }
}
@media (max-width: 749px) {
	.shg-b2bp { padding-inline: 20px; }
	.shg-b2bp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-start: 24px; }
	.shg-b2bp__card { min-block-size: 118px; padding: 18px 16px; }
	.shg-b2bp__t { font-size: 20px; }
	.shg-b2bp__n { font-size: 14px; }
	.shg-b2bp__card svg { inset-block-end: 16px; inset-inline-end: 16px; inline-size: 18px; block-size: 18px; }
}


/* ---------- a titled rail ("מארזים לפי תקציב"): heading and note above the tabs ---------- */
.shg-rail__h { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-block-end: 18px; text-align: center; }
.shg-rail__h .qs-label { margin: 0; }
.shg-rail__note { margin: 0; font-size: 14px; color: var(--ink-55); }

/* ---------- language switch (English site, 22 Oct 2026) ---------- */
.shg-langsw { display: inline-flex; align-items: center; block-size: 34px; padding-inline: 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--ink-14); color: var(--ink); font-size: 13px; text-decoration: none; white-space: nowrap; transition: box-shadow var(--dur-op); }
.shg-langsw:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.shg-langsw:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Phones and tablets use the compact bar: the switch moves into the menu drawer so the logo and the bag keep their room. */
@media (max-width: 1023px) { .shg-nh__end > .shg-langsw { display: none; } }
/* Small phones (360px): five icons and the logo don't fit at full size, so the bag fell off the edge. */
@media (max-width: 380px) {
	.shg-nh__bar { padding-inline: 6px; }
	.shg-nh .qs-icon-btn { inline-size: 38px; min-inline-size: 38px; }
	.shg-nh__logo { inline-size: 112px; }
}
.shg-nd__foot .shg-langsw { block-size: auto; padding: 0; box-shadow: none; background: none; font-size: 14px; }


/* Home B2B block (sections/corp.php, Ofer 29 Oct): examples (every employee-gift category) and a plain link to the business page. */
.shg-corp__eg { margin-block-start: 28px; }
.shg-corp__egt { margin: 0 0 10px; font-size: 13px; color: var(--on-inverse-70); }
.shg-corp__eg ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.shg-corp__eg a { display: inline-flex; align-items: center; block-size: 34px; padding-inline: 14px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--on-inverse-30); color: var(--on-inverse); font-size: 14px; text-decoration: none; transition: box-shadow var(--dur-op); }
.shg-corp__eg a:hover { box-shadow: inset 0 0 0 1px var(--on-inverse); }
.shg-corp__eg a:focus-visible, .shg-corp__more:focus-visible { outline: 2px solid var(--on-inverse); outline-offset: 2px; }
.shg-corp__more { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 20px; color: var(--on-inverse); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.shg-corp__more svg { inline-size: 16px; block-size: 16px; }
.qs-corp__media .shg-corp__img { inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 66% 55%; } /* the photo fills the half, the box and pastries stay in view */
@media (max-width: 749px) {
	.shg-corp__eg a { block-size: 32px; padding-inline: 12px; font-size: 13px; }
}

/* Home hero H1 (Jonas, 29 Oct): the search-term line in small type above the big emotional line, which is a styled <p>. */
.qs-hero__h1 { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 17px; line-height: 1.35; letter-spacing: 0; color: rgb(56 27 32 / 0.85); text-wrap: balance; }
@media (max-width: 767px) { .qs-hero__h1 { font-size: 14px; } }
h1.qs-hero__title { margin: 0; letter-spacing: 0; text-transform: none; } /* the headline is the H1 since 29 Oct; keep the old theme's h1 margins off it */

/* Two-step quote (employee mega panel + phone drawer business tab). In the panel it is a Pale Sky square beside the tag photo and grows if the panel is narrow. */
.shg-mq__box { display: flex; border-radius: var(--r-tile); flex-direction: column; justify-content: center; margin: 0; padding: 22px 24px; overflow: visible; background: var(--pale-sky); color: var(--rich-mahogany); }
.shg-mq__step { display: flex; flex-direction: column; gap: 8px; }
.shg-mq__step[hidden] { display: none; }
.shg-mq__k { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: rgba(56, 27, 32, .7); }
.shg-mq__q { margin: 0 0 6px; font-size: 19px; line-height: 1.3; font-weight: 500; text-wrap: balance; }
.shg-mq__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shg-mq__chip { padding: 9px 14px; border: 1px solid rgba(56, 27, 32, .22); border-radius: 999px; background: var(--seashell); color: var(--rich-mahogany); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.shg-mq__chip:hover, .shg-mq__chip:focus-visible { border-color: var(--rich-mahogany); outline: none; }
.shg-mq__chip:active { transform: scale(.97); }
.shg-mq__chip.is-on { background: var(--rich-mahogany); border-color: var(--rich-mahogany); color: var(--seashell); }
.shg-mq__back { margin-inline-start: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.shg-mq__f input { box-sizing: border-box; display: block; inline-size: 100%; text-align: start; direction: rtl; block-size: 38px; margin: 0; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: var(--seashell); color: var(--rich-mahogany); font: inherit; font-size: 16px; box-shadow: none; }
.shg-mq__f input::placeholder { color: rgba(56, 27, 32, .55); }
.shg-mq__f input:focus { border-color: var(--rich-mahogany); outline: none; }
.shg-mq__f.is-invalid input { border-color: #a3343a; }
.shg-mq__chk { position: relative; display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4; cursor: pointer; }
.shg-mq__chk input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.shg-mq__chk i { flex: none; inline-size: 16px; block-size: 16px; margin-block-start: 1px; border-radius: 4px; background: var(--seashell); box-shadow: inset 0 0 0 1px rgb(56 27 32 / .35); display: grid; place-items: center; }
.shg-mq__chk input:checked + i { background: var(--rich-mahogany); box-shadow: none; }
.shg-mq__chk input:checked + i::after { content: ""; inline-size: 8px; block-size: 4px; border-left: 2px solid var(--seashell); border-bottom: 2px solid var(--seashell); transform: translateY(-1px) rotate(-45deg); }
.shg-mq__chk input:focus-visible + i { outline: 2px solid var(--rich-mahogany); outline-offset: 2px; }
.shg-mq__send { inline-size: 100%; margin-block-start: 4px; min-block-size: 42px; background: var(--rich-mahogany); border-color: var(--rich-mahogany); color: var(--seashell); }
/* The shared button hover (roll.css) fills Pale Sky, the same as this box: here it fills cream. */
.shg-mq__box .shg-mq__send { --ab-hover-bg: var(--seashell); }
.shg-mq__msg { margin: 0; min-block-size: 1em; font-size: 12.5px; line-height: 1.4; }
.shg-mq__msg.is-error { color: #8a2a2f; font-weight: 600; }
.shg-mq__ok:focus { outline: none; }
.shg-mq > .shg-nh__cap { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.shg-nd__mq { display: flex; flex-direction: column; gap: 10px; margin-block-start: 24px; }

/* "כבר לקוחות? כניסה לאזור החברה" (B2B Portal door, ticket 16): one quiet line, no pill. */
.shg-nh__co, .shg-nd__co { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-70); text-align: center; }
.shg-nh__co a, .shg-nd__co a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.shg-nh__co { margin-block-start: 6px; }

/* Sideways rows on phones (Jonas, 3 Nov): rail tabs, circle rows, chip rows keep their design. While items are
   hidden past the row's end (js/site.js wraps the row and sets .is-more), the end fades into the page and a
   small round arrow sits on the fade, so the cut item reads as "more", not as a glitch. A one-time nudge too. */
.shg-xs { position: relative; }
.shg-xs__more { display: none; }
@media (max-width: 749px) {
	/* Solid at the row's end edge, clear toward the items (fixed 3 Nov: it ran the other way in RTL and drew a white block on an item). */
	.shg-xs::after { content: ""; position: absolute; z-index: 1; inset-block: 0; inset-inline-end: 0; inline-size: 64px; background: linear-gradient(to right, var(--ground, #fff), rgb(255 255 255 / .85) 30%, rgb(255 255 255 / 0)); pointer-events: none; opacity: 0; transition: opacity 200ms; }
	[dir="ltr"] .shg-xs::after { background: linear-gradient(to left, var(--ground, #fff), rgb(255 255 255 / .85) 30%, rgb(255 255 255 / 0)); }
	.shg-xs.is-more::after { opacity: 1; }
	.shg-xs__more { position: absolute; z-index: 2; inset-block-start: 50%; inset-inline-end: 8px; display: grid; place-items: center; inline-size: 30px; block-size: 30px; margin: -15px 0 0; padding: 0; border: 1px solid var(--ink-14, rgb(56 27 32 / .14)); border-radius: 50%; background: var(--ground, #fff); color: var(--ink, #381b20); box-shadow: 0 2px 8px -2px rgb(56 27 32 / .18); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 200ms, transform 120ms; }
	.shg-xs__more:active { transform: scale(.94); }
	.shg-xs__more svg { inline-size: 16px; block-size: 16px; }
	.shg-xs.is-more .shg-xs__more { opacity: 1; pointer-events: auto; }
}

/* The "trusted by" logo loop (shg_trust_loop_html): the business form and the homepage business block. White
   logos, so it sits on a dark ground. Placement (margins, border) belongs to each block. */
.shg-trust__lab { white-space: nowrap; }
.shg-trust__win { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.shg-trust__t { flex: none; display: flex; align-items: center; gap: 72px; inline-size: max-content; margin: 0; padding: 0 0 0 72px; list-style: none; animation: shg-trust-run 48s linear infinite; }
.shg-trust__t li { flex: none; display: flex; align-items: center; block-size: 36px; margin: 0; }
.shg-trust__t img { block-size: var(--lh, 28px); inline-size: auto; max-inline-size: none; filter: brightness(0) invert(1); opacity: .85; }
.shg-trust:hover .shg-trust__t, .shg-trust:focus-within .shg-trust__t { animation-play-state: paused; }
@keyframes shg-trust-run { to { transform: translateX(100%); } }
@media (max-width: 900px) {
	.shg-trust__t { gap: 48px; padding-inline-start: 48px; animation-duration: 36s; }
	.shg-trust__t img { block-size: calc(var(--lh, 28px) * .8); }
}
@media (prefers-reduced-motion: reduce) {
	.shg-trust__t { animation: none; }
	.shg-trust__win { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.shg-trust__t[aria-hidden="true"] { display: none; }
}

/* Homepage business block (Jonas, 3 Nov): the employee-gift categories slide in one row with a scroll bar,
   and the logo loop runs along the bottom of the block, across both halves. */
.shg-corp__eg { inline-size: 100%; min-inline-size: 0; }
.qs-corp__body { min-inline-size: 0; }
.shg-corp__eg ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.shg-corp__eg ul::-webkit-scrollbar { display: none; }
.shg-corp__eg li { flex: none; }
.qs-scrub.shg-corp__scrub { inline-size: 100%; margin: 14px 0 0; background: var(--on-inverse-30, rgb(255 246 238 / .3)); }
.shg-corp__scrub .shg-scrub__thumb { background: var(--on-inverse, #fff6ee); }
.shg-corp__scrub.is-idle { visibility: hidden; }
.shg-corp__trust { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; padding: 28px 80px 32px; border-block-start: 1px solid var(--on-inverse-30, rgb(255 246 238 / .3)); }
.shg-corp__trust .shg-qeb { margin: 0; font-family: var(--font-slogan); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; direction: ltr; color: var(--on-inverse-70, rgb(255 246 238 / .7)); }
.shg-corp__trust .shg-qeb--he { font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; direction: rtl; }
@media (max-width: 749px) {
	.shg-corp__eg ul { margin-inline: -24px; padding-inline: 24px; }
	.shg-corp__trust { grid-template-columns: 1fr; gap: 14px; padding: 24px 0 28px; }
	.shg-corp__trust .shg-qeb { text-align: center; }
}

/* Wishlist in the phone menu (Jonas, 3 Nov): the count sits after the words, not on an icon. */
.shg-nd__wl .shg-wl-count { position: static; display: inline-block; vertical-align: 2px; margin-inline-start: 6px; }
.shg-nd__wl .shg-wl-count[hidden] { display: none; }

/* Sideways rows settle on a whole item (Jonas's iPhone video, 3 Nov): without snapping, a down-swipe that
   starts on a row also nudged it sideways in Safari and left a card cut in half. Product rows snap hard
   to each card; circle, chip and tab rows snap gently. No row hands a sideways swipe on to the page. */
.qs-rail__track { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-padding-inline: 0; }
.qs-rail__track > * { scroll-snap-align: start; }
.qs-rc__row, .shg-cc-row, .shg-hrow, .shg-ask__sugg, .shg-corp__eg ul, .qs-rtabs, .shg-hub .shg-chips { scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.qs-rc__row > *, .shg-cc-row > *, .shg-hrow > *, .shg-ask__sugg > *, .shg-corp__eg li, .qs-rtabs > *, .shg-hub .shg-chips > * { scroll-snap-align: start; }
@media (max-width: 749px) {
	.qs-rc__row, .qs-rtabs { scroll-padding-inline: 20px; }
	.shg-cc-row, .shg-hrow, .shg-ask__sugg { scroll-padding-inline: 16px; }
	.shg-corp__eg ul { scroll-padding-inline: 24px; }
}

/* Phone menu foot (Jonas, 3 Nov): only the company area door, a full-width Bordeaux button. */
.shg-nd__cobtn { inline-size: 100%; justify-content: center; }
.shg-nd__foot:not(:has(a, button)) { display: none; }

/* The sold-out stamp sits in the middle of the card photo, clear of the heart (Jonas, 3 Nov). All cards, every page. */
.shg-pc .qs-stamp, .qs-tile .qs-stamp { inset-block-start: 50%; inset-inline-end: auto; left: 50%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 2; }

/* Keyboard focus is visible on every control (audit 9 Nov: the search button, the logo and the announcement link had none).
   The :where() base has no weight of its own, so every component rule above still wins; the named lines are for
   controls whose own rules or Flatsome reset the outline. */
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.shg-nh__search:focus-visible, .shg-nh__logo:focus-visible, .qs-announce__msg a:focus-visible, .qs-hdr__link:focus-visible, .shg-nh__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.shg-nh__logo:focus-visible { border-radius: 12px; }
.shg-ft :is(a, button):focus-visible, .shg-mark:focus-visible { outline-color: var(--on-inverse); }