/* Cookies, accessibility, WhatsApp (Quiet Shelf "Cookies · accessibility · WhatsApp").
   Markup in inc/utility.php, behaviour in js/utility.js. Loaded on every rebuild view. */

/* CookieYes keeps working underneath; only its own UI is hidden (our buttons press its buttons). */
.cky-consent-container, .cky-modal, .cky-overlay, .cky-btn-revisit-wrapper, .cky-preference-center { display: none !important; }

.shg-lnkb { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.shg-x { display: grid; place-items: center; inline-size: 36px; block-size: 36px; margin: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.shg-x svg { inline-size: 20px; block-size: 20px; }
.shg-x:hover { background: var(--tile); }

/* One accessibility launcher only (audit 9 Nov: two stacked on a phone). Ours is the one with the panel and the statement;
   the usual third-party launchers (a plugin or a GTM widget) are hidden on rebuild views. */
#pojo-a11y-toolbar, .pojo-a11y-toolbar, #userway-widget, .userway_buttons_wrapper, [data-uw-rm-widget], #INDmenu-btn, .INDmenu-btn, .asw-menu-btn, #acsb-trigger, .acsb-trigger, .nagishli-btn, #enable-toolbar-trigger, #accessibly-trigger, #andimenu, #andipath-wrap { display: none !important; } /* #andimenu = the UserA (ANDI) launcher, found 9 Nov */

/* Cookie card: bottom corner, never blocks the page. z-index 58: above the floating buttons (50 to 55) but under the
   phone menu and its scrim (59, 60), so the menu is never covered (audit 9 Nov). */
.shg-ck { position: fixed; inset-inline-start: 24px; inset-block-end: 24px; z-index: 58; display: flex; flex-direction: column; gap: 14px; inline-size: min(520px, calc(100vw - 48px)); padding: 26px 28px; border-radius: var(--r-mid); background: var(--ground); color: var(--ink); box-shadow: 0 0 0 1px var(--ink-14), 0 24px 60px -20px rgb(56 27 32 / .35); }
.shg-ck[hidden], .shg-ckm-wrap[hidden], .shg-axp[hidden], .shg-wa__tip[hidden] { display: none; }
.shg-ck__h { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; }
.shg-ck__h svg { inline-size: 22px; block-size: 22px; flex: none; }
.shg-ck > p:not(.shg-ck__h) { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
.shg-ck__b { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.shg-ck__b .qs-btn { min-block-size: 42px; padding-inline: 18px; font-size: 14px; }
.shg-ck__l { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; }
.shg-ck > p.shg-ck__l { font-size: 13px; }

/* Preferences window */
.shg-ckm-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; }
.shg-dim { position: absolute; inset: 0; background: rgb(56 27 32 / .38); }
.shg-ckm { position: relative; inline-size: min(560px, 100%); max-block-size: calc(100dvh - 32px); overflow: auto; padding: 32px; border-radius: var(--r-mid); background: var(--ground); color: var(--ink); box-shadow: 0 30px 80px -20px rgb(56 27 32 / .5); }
.shg-ckm__t { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-size: 24px; }
.shg-ckr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding-block: 18px; border-block-end: 1px solid var(--ink-14); }
.shg-ckr b { font-size: 16px; font-weight: 400; }
.shg-ckr span { grid-column: 1; font-size: 13.5px; line-height: 1.55; color: var(--ink-70); }
.shg-tgl { position: relative; grid-row: 1 / span 2; grid-column: 2; inline-size: 44px; block-size: 26px; padding: 0; border: 0; border-radius: 13px; background: var(--ink-14); cursor: pointer; transition: background var(--dur-op) var(--ease-op); }
.shg-tgl::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-end: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(56 27 32 / .3); transition: inset var(--dur-op) var(--ease-op); }
.shg-tgl.is-on { background: var(--ink); }
.shg-tgl.is-on::after { inset-inline-end: 23px; }
.shg-tgl.is-lock { opacity: .45; cursor: not-allowed; }
.shg-tgl:focus-visible, .shg-ax button:focus-visible, .shg-wa__b:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.shg-ckm__b { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 22px; }

/* Accessibility: a small Pale Sky circle in the bottom corner (design review, 6 Nov: on the right edge it covered
   product titles, category circles and quick-add in RTL). Alone in the corner; stacked above the WhatsApp
   button or the ask bar when the page has one. The panel opens above it. */
.shg-ax__tab { --ax-x: 24px; --ax-b: 24px; position: fixed; left: var(--ax-x); inset-block-end: var(--ax-b); z-index: 55; display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--pale-sky); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-14); cursor: pointer; transition: inset-block-end 300ms var(--ease-circ, ease); }
[dir="ltr"] .shg-ax__tab { left: auto; right: var(--ax-x); } /* English: the corner floats sit on the right (css/lang-ltr.css). */
.shg-ax__tab svg { inline-size: 22px; block-size: 22px; }
html:is(:has(.shg-wa), :has(.shg-aw)) .shg-ax__tab { --ax-x: 30px; --ax-b: 92px; }
body.hnk-bar-on .shg-ax__tab { --ax-b: 164px; } /* WhatsApp sits above the Hanukkah bar (css/hanukkah.css). */
.shg-axp { position: fixed; left: 24px; inset-block-end: 80px; z-index: 65; inline-size: 360px; max-block-size: calc(100dvh - 32px); overflow: auto; padding: 24px; border-radius: var(--r-mid); background: var(--ground); color: var(--ink); box-shadow: 0 0 0 1px var(--ink-14), 0 30px 70px -20px rgb(56 27 32 / .45); }
html:is(:has(.shg-wa), :has(.shg-aw)) .shg-axp { inset-block-end: 148px; }
[dir="ltr"] .shg-axp { left: auto; right: 24px; }
.shg-axp__t { display: flex; justify-content: space-between; align-items: center; margin: 0 0 16px; font-size: 20px; }
.shg-axsz { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-block-end: 10px; padding: 12px 14px; border-radius: var(--r-tile); background: var(--tile); font-size: 14px; }
.shg-axsz button { display: grid; place-items: center; inline-size: 34px; block-size: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--ground); color: var(--ink); font: inherit; font-size: 18px; cursor: pointer; }
.shg-axsz span { text-align: center; }
.shg-axsz b { font-weight: 500; }
.shg-axg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shg-axg button { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border: 0; border-radius: var(--r-tile); background: none; box-shadow: inset 0 0 0 1px var(--ink-14); color: var(--ink); font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; }
.shg-axg button svg { inline-size: 22px; block-size: 22px; }
.shg-axg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); box-shadow: none; }
.shg-axp__f { display: flex; justify-content: space-between; align-items: center; margin-block-start: 16px; font-size: 13.5px; }
.shg-axp__f button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.shg-axp__f svg { inline-size: 16px; block-size: 16px; }

/* WhatsApp: one quiet button, bottom left */
.shg-wa { position: fixed; left: 24px; inset-block-end: 24px; z-index: 50; display: flex; align-items: flex-end; gap: 10px; transition: inset-block-end 300ms var(--ease-circ, ease); }
.shg-wa__b { display: grid; place-items: center; flex: none; inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--ink); color: var(--ground); box-shadow: 0 10px 24px -8px rgb(56 27 32 / .5); transition: transform 200ms var(--ease-out, ease-out); }
.shg-wa__b:hover { transform: scale(1.06); }
.shg-wa__b svg { inline-size: 26px; block-size: 26px; }
.shg-wa__tip { position: relative; max-inline-size: 230px; padding: 12px 34px 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--ground); color: var(--ink); box-shadow: 0 0 0 1px var(--ink-14), 0 10px 30px -12px rgb(56 27 32 / .35); font-size: 14px; line-height: 1.45; animation: shg-tip-in 300ms var(--ease-out, ease-out); }
.shg-wa__tip small { display: block; font-size: 12px; color: var(--ink-55); }
.shg-wa__tip .shg-x { position: absolute; inset-block-start: 6px; left: 6px; inline-size: 24px; block-size: 24px; margin: 0; }
.shg-wa__tip .shg-x svg { inline-size: 14px; block-size: 14px; }
@keyframes shg-tip-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 749px) {
	/* Compact card on a phone: a title line, two short lines of text, the two choices side by side, one row of small links. */
	.shg-ck { inset-inline: 10px; inset-block-end: 10px; inline-size: auto; gap: 8px; padding: 14px 16px 12px; }
	.shg-ck__h { gap: 8px; font-size: 16px; }
	.shg-ck__h svg { inline-size: 18px; block-size: 18px; }
	.shg-ck > p:not(.shg-ck__h):not(.shg-ck__l) { font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.shg-ck__b { flex-wrap: nowrap; gap: 8px; }
	.shg-ck__b .qs-btn { flex: 1; padding-inline: 8px; font-size: 13px; white-space: nowrap; }
	.shg-ck > p.shg-ck__l { font-size: 12px; }
	.shg-ck__l .shg-lnkb { font-size: 12px; }
	html:has(.shg-ck:not([hidden])) .shg-wa { visibility: hidden; } /* the card sits where the WhatsApp button would be */
	.shg-ckm-wrap { place-items: end center; padding: 0; }
	.shg-ckm { inline-size: 100%; padding: 24px 20px 28px; border-radius: var(--r-mid) var(--r-mid) 0 0; }
	.shg-ckm__b .qs-btn { flex: 1; }
	.shg-axp, html:is(:has(.shg-wa), :has(.shg-aw)) .shg-axp, [dir="ltr"] .shg-axp { inset: auto 0 0 0; inline-size: auto; border-radius: var(--r-mid) var(--r-mid) 0 0; } /* a bottom sheet */
	/* A slim tab on the left edge (the end of each line in RTL), so it hides only the page margin. 30px to the eye,
	   44px to a finger. Above the 52px WhatsApp button or ask bar; WhatsApp waits for a scroll, so until then the corner is free. */
	.shg-ax__tab { --ax-x: 0px; --ax-b: 16px; inline-size: 30px; border-radius: 0 12px 12px 0; }
	.shg-ax__tab::after { content: ""; position: absolute; inset: 0 -14px 0 0; }
	[dir="ltr"] .shg-ax__tab { border-radius: 12px 0 0 12px; }
	[dir="ltr"] .shg-ax__tab::after { inset: 0 0 0 -14px; }
	.shg-ax__tab svg { inline-size: 20px; block-size: 20px; }
	html:is(:has(.shg-wa), :has(.shg-aw)) .shg-ax__tab { --ax-x: 0px; --ax-b: 78px; }
	html:has(.shg-wa):not(:has(.shg-aw)):not(.shg-wa-on) .shg-ax__tab, html:not(:has(.shg-aw)) body.shg-view-checkout .shg-ax__tab { --ax-b: 16px; }
	html:has(.shg-sbar.is-on) .shg-ax__tab { --ax-b: 88px; } /* above the sticky buy bar, and above WhatsApp on it (css/product.css) */
	html:has(.shg-sbar.is-on):is(:has(.shg-wa), :has(.shg-aw)) .shg-ax__tab { --ax-b: 150px; }
	body.hnk-bar-on .shg-ax__tab { --ax-b: 154px; }
	.shg-wa { left: 14px; inset-block-end: 16px; }
	.shg-wa__b { inline-size: 52px; block-size: 52px; }
}
@media (prefers-reduced-motion: reduce) { .shg-wa, .shg-wa__b, .shg-ax__tab, .shg-tgl, .shg-tgl::after, .shg-wa__tip { transition: none; animation: none; } }

/* ---------- Accessibility modes (classes on <html>, set by js/utility.js) ---------- */
html.shg-ax-contrast { --ground: #fff; --seashell: #fff; --tile: #fff; --ink: #000; --ink-70: #000; --ink-55: #1a1a1a; --ink-14: #000; --pale-sky: #fff; --pale-oak: #fff; --inverse: #000; --on-inverse: #fff; --on-inverse-70: #fff; }
html.shg-ax-contrast body { background: #fff; color: #000; }
html.shg-ax-contrast :is(a, button) { text-decoration-thickness: 2px; }
html.shg-ax-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px solid currentColor; outline-offset: 2px; }
html.shg-ax-font, html.shg-ax-font body, html.shg-ax-font :is(h1, h2, h3, h4, p, a, button, input, select, textarea, span, li, label) { font-family: Arial, "Helvetica Neue", sans-serif !important; letter-spacing: normal !important; }
html.shg-ax-still *, html.shg-ax-still *::before, html.shg-ax-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.shg-ax-cursor, html.shg-ax-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l14 8.2-6.4 1.7L9.6 19z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; }
html.shg-ax-spacing body :is(p, li, a, span, label, h1, h2, h3, h4, button) { letter-spacing: .12em !important; word-spacing: .16em !important; line-height: 1.8 !important; }

/* Floating WhatsApp: out of the way while the menu, search or cart is open, and on the phone checkout
   (it covered the menu's quote button and the checkout form; audit, 20 Oct). The accessibility tab stays. */
html.shg-lock .shg-wa { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 749px) { body.shg-view-checkout .shg-wa { display: none; } }

/* Phones (Jonas, 3 Nov): the WhatsApp button shows once the visitor scrolls (js/utility.js adds .shg-wa-on). */
@media (max-width: 749px) {
	.shg-wa { transition: inset-block-end 300ms var(--ease-circ, ease), opacity 240ms var(--ease-out, ease-out), transform 240ms var(--ease-out, ease-out), visibility 0s; }
	html:not(.shg-wa-on) .shg-wa { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; transition: opacity 240ms, transform 240ms, visibility 0s 240ms; }
}