/*
 * Cart drawer (Cart · C3) and search / gift finder (Search · S4), on every rebuild page.
 * Design: Shooglis Brand Refine/Cart C3 · Search S4 · Checkout K5 · final-html. Kit tokens only.
 */

/* ---------- Cart drawer ---------- */
.shg-drw[hidden] { display: none; }
.shg-drw { position: fixed; inset: 0; z-index: 70; }
.shg-drw__scr { position: absolute; inset: 0; background: rgb(56 27 32 / .3); animation: shgFade 260ms var(--ease-circ); }
.shg-drw__pnl { position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; inline-size: 460px; max-inline-size: 100vw; background: var(--ground); color: var(--ink); font-family: var(--font-body); animation: shgDrawIn 300ms var(--ease-circ); }
.shg-drw__pnl:has(.has-extras) { inline-size: 780px; }
.shg-drw__in { display: flex; inline-size: 100%; block-size: 100%; }
.shg-drw__main { display: flex; flex-direction: column; inline-size: 440px; flex: none; min-block-size: 0; }
.shg-drw__in:not(.has-extras) .shg-drw__main { inline-size: 100%; }
.has-extras .shg-drw__main { border-inline-start: 1px solid var(--ink-14); }
.shg-drw__h { display: flex; justify-content: space-between; align-items: center; flex: none; block-size: 64px; margin: 0; padding-inline: 24px 10px; border-block-end: 1px solid var(--ink-14); font-size: 20px; }
.shg-drw__h small { font-size: 14px; color: var(--ink-55); margin-inline-start: 4px; }
.shg-drw__b { flex: 1; overflow-y: auto; padding: 0 24px 20px; }
.shg-drw__empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 8px; text-align: center; }
.shg-drw__empty img { inline-size: 160px; block-size: auto; }
.shg-drw__empty-t { font-size: 24px; }
.shg-drw__empty-s { color: var(--ink-70); }
.shg-drw__empty .shg-chips { justify-content: center; }
.shg-drw__f { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 16px 24px 24px; border-block-start: 1px solid var(--ink-14); background: var(--ground); }
.shg-drw__extras { flex: 1; overflow-y: auto; padding: 24px; background: var(--tile); }
.shg-drw__extras-phone { display: none; }

.shg-ln { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; padding-block: 18px; border-block-end: 1px solid var(--ink-14); }
.shg-ln__img { position: relative; display: block; inline-size: 88px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--tile); }
.shg-ln__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.shg-ln__n { margin: 0; font-size: 16px; line-height: 1.3; }
.shg-ln__n a { color: inherit; text-decoration: none; }
.shg-ln__n a:hover { text-decoration: underline; text-underline-offset: 3px; }
.shg-ln__d { margin: 4px 0 0; font-size: 13px; color: var(--ink-55); line-height: 1.4; }
.shg-ln__p { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; font-size: 15px; }
.shg-ln__p s { font-size: 13px; color: var(--ink-55); }
.shg-ln--add { grid-template-columns: 56px minmax(0, 1fr) auto; }
.shg-ln--add .shg-ln__img { inline-size: 56px; aspect-ratio: 1; }
.shg-qty-s { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 12px; block-size: 34px; padding-inline: 4px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--ink-14); font-size: 14px; }
.shg-qty-s button { appearance: none; display: grid; place-items: center; inline-size: 26px; block-size: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.shg-qty-s button:hover { background: var(--tile); }
.shg-qty-s svg { inline-size: 14px; block-size: 14px; }
.shg-qty-s b { min-inline-size: 18px; text-align: center; font-weight: 400; }
.shg-rm { appearance: none; margin-inline-start: 12px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-55); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.shg-ln--add .shg-qty-s { display: none; }
.shg-ln--add .shg-rm { display: inline; margin-inline-start: 0; margin-block-start: 6px; }
.shg-drw.is-busy .shg-drw__in { opacity: .6; pointer-events: none; transition: opacity var(--dur-op); }

.shg-prog { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 6px; font-size: 13px; }
.shg-prog i { display: block; block-size: 4px; border-radius: 4px; background: var(--ink-14); overflow: hidden; }
.shg-prog i b { display: block; block-size: 100%; background: var(--ink); transition: inline-size var(--dur-ink) var(--ease-circ); }
.shg-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.shg-row--t { font-size: 18px; }
.shg-row span:first-child { color: var(--ink-70); }
.shg-note { margin: 0; font-size: 13px; color: var(--ink-55); text-align: center; }
.shg-full { inline-size: 100%; }
.shg-full svg { inline-size: 18px; block-size: 18px; }

.shg-lbl { margin: 6px 0 14px; font-size: 13px; font-weight: 500; color: var(--ink-55); }
.shg-xl { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-block-end: 14px; }
.shg-xl .shg-ln__img { inline-size: 72px; aspect-ratio: 1; }
.shg-xl .shg-ln__n b { display: block; font-weight: 400; font-size: 14px; color: var(--ink-70); }
.shg-chip-btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; block-size: 40px; padding-inline: 16px; border: 0; border-radius: var(--r-pill); background: var(--ground); box-shadow: inset 0 0 0 1px var(--ink-14); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: background-color var(--dur-fill) var(--ease-circ), color var(--dur-ink) var(--ease-circ); }
.shg-chip-btn:hover { background: var(--ink); color: var(--ground); box-shadow: none; }
.shg-chip-btn svg { inline-size: 14px; block-size: 14px; }

.shg-giftc { margin-block-start: 16px; padding: 14px 16px; border-radius: var(--r-tile); background: var(--tile); font-size: 14px; }
.shg-giftc__row { display: flex; gap: 12px; align-items: center; }
.shg-giftc__row > svg { flex: none; inline-size: 22px; block-size: 22px; }
.shg-giftc small { display: block; color: var(--ink-70); font-size: 13px; }
.shg-lnk { appearance: none; margin-inline-start: auto; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
.shg-giftc textarea { display: none; inline-size: 100%; min-block-size: 84px; margin-block-start: 12px; padding: 10px 12px; border: 0; border-radius: var(--r-tile); background: var(--ground); color: var(--ink); font: inherit; font-size: 14px; resize: vertical; }
.shg-giftc textarea:focus { outline: 1px solid var(--ink); }
.shg-giftc.is-open textarea { display: block; }

@keyframes shgDrawIn { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shgFade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 749px) {
	.shg-drw__pnl, .shg-drw__pnl:has(.has-extras) { inset: 0; inline-size: 100vw; }
	.shg-drw__main, .has-extras .shg-drw__main { inline-size: 100%; border: 0; }
	.shg-drw__extras { display: none; }
	.shg-drw__extras-phone { display: block; }
	.shg-drw__h { block-size: 60px; padding-inline: 16px 6px; font-size: 18px; }
	.shg-drw__b { padding: 0 16px 16px; }
	.shg-drw__f { padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); }
	.shg-ln { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; padding-block: 14px; }
	.shg-ln__img { inline-size: 72px; }
	.shg-ln__n { font-size: 15px; }
	.shg-lbl { margin-block-start: 16px; }
	.shg-hrow { display: flex; gap: 10px; margin-inline: -16px; padding-inline: 16px; overflow-x: auto; scrollbar-width: none; }
	.shg-hrow::-webkit-scrollbar { display: none; }
	.shg-hcard { appearance: none; flex: none; display: flex; flex-direction: column; gap: 6px; inline-size: 132px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.3; text-align: start; cursor: pointer; }
	.shg-hcard .shg-ln__img { inline-size: 132px; aspect-ratio: 1; }
	.shg-hcard b { font-weight: 400; color: var(--ink-70); }
	.shg-mini__add { position: absolute; z-index: 1; inset-inline-end: 6px; inset-block-end: 6px; display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--ground); }
	.shg-mini__add svg { inline-size: 14px; block-size: 14px; }
	.shg-giftc { padding: 12px; font-size: 13px; }
}

/* ---------- Search · S4: field on top, gift finder below ---------- */
.shg-search[open] { display: block; }
.shg-search { position: fixed; inset: 0; z-index: 70; inline-size: 100vw; max-inline-size: none; block-size: 100dvh; max-block-size: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font-family: var(--font-body); }
.shg-search::backdrop { background: rgb(56 27 32 / .3); }
.shg-gf { position: absolute; inset-inline: var(--hero-inset); inset-block-start: 140px; max-block-size: calc(100dvh - 160px); overflow-y: auto; padding: 40px 48px; border-radius: var(--r-hero); background: var(--ground); animation: shgPanel 260ms var(--ease-circ); }
.shg-gf__top { display: flex; justify-content: space-between; align-items: center; margin-block-end: 0; }
.shg-gf__top h2 { display: none; }
.shg-sin { display: flex; align-items: center; gap: 14px; block-size: 64px; padding-inline: 24px 10px; border-radius: var(--r-pill); background: var(--tile); font-size: 20px; }
.shg-sin > svg { flex: none; inline-size: 22px; block-size: 22px; }
.shg-sin input { flex: 1; min-inline-size: 0; block-size: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; }
.shg-sin input::placeholder { color: var(--ink-55); }
.shg-sin input:focus { outline: none; }
.shg-sin:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
.shg-sin__x { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-70); font: inherit; font-size: 14px; cursor: pointer; }
.shg-sin__x svg { inline-size: 16px; block-size: 16px; }
.shg-gf__or { margin: 28px 0 4px; font-size: 22px; }
.shg-gf__q { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; padding-block: 16px; border-block-end: 1px solid var(--ink-14); }
.shg-gf__q:last-of-type { border-block-end: 0; }
.shg-gf__q > span { font-size: 15px; color: var(--ink-70); }
.shg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shg-chip { appearance: none; display: inline-flex; align-items: center; block-size: 40px; padding-inline: 16px; border: 0; border-radius: var(--r-pill); background: none; box-shadow: inset 0 0 0 1px var(--ink-14); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: background-color var(--dur-fill) var(--ease-circ), color var(--dur-ink) var(--ease-circ); }
.shg-chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.shg-chip.is-on { background: var(--ink); color: var(--ground); box-shadow: none; }
.shg-gf__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-block-start: 20px; }
.shg-gf__count { font-size: 14px; color: var(--ink-70); }
@keyframes shgPanel { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 749px) {
	.shg-gf { inset: 0; max-block-size: none; display: flex; flex-direction: column; padding: 0; border-radius: 0; overflow: hidden; }
	.shg-gf__top { flex: none; block-size: 60px; padding-inline: 16px 6px; border-block-end: 1px solid var(--ink-14); }
	.shg-gf__top h2 { display: block; margin: 0; font-size: 18px; font-weight: 400; }
	.shg-gf__body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; }
	.shg-sin { block-size: 52px; padding-inline: 16px 6px; font-size: 16px; }
	.shg-sin__x { display: none; }
	.shg-gf__or { margin-block-start: 22px; font-size: 20px; }
	.shg-gf__q { display: block; padding-block: 14px; }
	.shg-gf__q > span { display: block; margin-block-end: 10px; font-size: 14px; }
	.shg-chip { block-size: 36px; padding-inline: 13px; font-size: 13px; }
	.shg-gf__foot { flex: none; margin: 0; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--ink-14); background: var(--ground); }
	.shg-gf__count { display: none; }
	.shg-gf__foot .qs-btn { inline-size: 100%; }
}
@media (min-width: 750px) {
	.shg-gf__close-phone { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.shg-drw__pnl, .shg-drw__scr, .shg-gf { animation: none; }
}

/* Live suggestions + popular searches (inc/search.php, js/site.js). While suggestions show, the gift finder steps aside. */
.shg-pop-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 16px; }
.shg-pop-q > span { margin-inline-end: 4px; font-size: 13px; color: var(--ink-55); }
.shg-sug { margin-block-start: 18px; }
.shg-sug__t { margin: 14px 0 8px; font-size: 13px; font-weight: 500; color: var(--ink-55); }
.shg-sug__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.shg-sug__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.shg-sug__list a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-block: 8px; border-block-end: 1px solid var(--ink-14); color: var(--ink); text-decoration: none; font-size: 15px; }
.shg-sug__list a:hover .shg-sug__n { text-decoration: underline; text-underline-offset: 3px; }
.shg-sug__img { display: block; inline-size: 52px; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--tile); }
.shg-sug__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.shg-sug__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shg-sug__list .qs-num { font-size: 14px; color: var(--ink-70); }
.shg-sug__all { margin-block-start: 16px; }
.shg-sug__none { margin: 12px 0 0; font-size: 14px; color: var(--ink-70); }
.shg-gf.is-typing :is(.shg-gf__or, .shg-gf__q, .shg-gf__foot, .shg-pop-q) { display: none; }

/* Search window v2: understood chips, corrections, business card, add to cart, same-day tag, recent searches. */
.shg-pop-q { flex-direction: column; align-items: stretch; gap: 12px; }
.shg-pop-q__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shg-pop-q__row[hidden] { display: none; }
.shg-pop-q__row > span:first-child { min-inline-size: 110px; font-size: 13px; color: var(--ink-55); }
.shg-pop-q__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shg-pop-q__clr { margin-inline-start: auto; font-size: 13px; color: var(--ink-55); }
.shg-sug__fix, .shg-sug__got { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: var(--ink-70); }
.shg-sug__got .shg-chip { pointer-events: none; }
.shg-sug__biz { display: block; margin-block-start: 12px; padding: 12px 14px; border-radius: var(--r-tile); box-shadow: inset 0 0 0 1px var(--ink-14); font-size: 14px; color: var(--ink-70); text-decoration: none; }
.shg-sug__biz b { color: var(--ink); }
.shg-sug__list li { display: flex; align-items: center; gap: 10px; border-block-end: 1px solid var(--ink-14); }
.shg-sug__list li > .shg-sug__row { flex: 1; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-block: 8px; border: 0; color: var(--ink); text-decoration: none; font-size: 15px; min-inline-size: 0; }
.shg-sug__row:focus-visible, .shg-sug__all:focus-visible, .shg-sug__cats a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.shg-sug__row:hover .shg-sug__n { text-decoration: underline; text-underline-offset: 3px; }
.shg-sug__n { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.shg-sug__n { white-space: nowrap; text-overflow: ellipsis; }
.shg-sug__today { align-self: flex-start; padding: 1px 8px; border-radius: var(--r-pill); background: var(--pale-sky); font-size: 11.5px; color: var(--ink); }
.shg-sug__p { font-size: 14px; color: var(--ink-70); }
.shg-sug .shg-sug__add { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--pale-sky); color: var(--rich-mahogany); font-size: 22px; font-weight: 400; line-height: 1; text-decoration: none; } /* Pale Sky circle with an ink plus, like the card quick add (audit: the plus was ink on ink) */
.shg-sug__add:hover { opacity: .85; }
.shg-sug__add.loading { opacity: .5; }
.shg-sug .shg-sug__add.added { background: var(--night-bordeaux); color: var(--seashell); }
.shg-sug__add + .added_to_cart { display: none; }

/* The browser's own clear button (a blue x) inside search fields: hidden, ours is used instead. */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* Cart drawer on phones (Jonas, 3 Nov): the product name only, no delivery note, no secure-payment box, and the
   total says "סה״כ (לא כולל משלוח)". Desktop keeps the full drawer. */
.shg-mob { display: none; }
@media (max-width: 749px) {
	.shg-dsk { display: none; }
	.shg-mob { display: inline; }
	.shg-drw .shg-ln__d, .shg-drw__f > .shg-note, .shg-drw__f > .shg-secure { display: none; }
}