/* StickDecor Discovery feed — vertical = products, horizontal = that product's images.
 * Native scrolling + CSS Scroll Snap; images are never cropped (object-fit: contain).
 * Mobile first; a two-column layout takes over from 1024px. */

.sdd-root {
	--sdd-ink: #0F0F10;
	--sdd-line: rgba(255, 255, 255, .16);
	--sdd-muted: rgba(255, 255, 255, .78);
	--sdd-blue: #4DAAD5;      /* brand accent (icons, highlights) */
	--sdd-cta: #2878A0;       /* deeper brand blue: white text passes AA (4.9:1) */
	--sdd-cta-2: #1F6587;
	--sdd-like: #ff3b5c;
	--sdd-top-h: 56px;
	--sdd-bottom-h: 118px;
	--sdd-safe-t: env(safe-area-inset-top, 0px);
	--sdd-safe-b: env(safe-area-inset-bottom, 0px);
	--sdd-safe-r: env(safe-area-inset-right, 0px);
	--sdd-safe-l: env(safe-area-inset-left, 0px);
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: var(--sdd-ink);
	color: #fff;
	font-family: 'Noto Sans Hebrew', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	direction: rtl;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	overscroll-behavior: contain;
	touch-action: manipulation; /* no double-tap page zoom anywhere in the feed */
}
.sdd-root[hidden] { display: none; }
.sdd-root *, .sdd-root *::before, .sdd-root *::after { box-sizing: border-box; }
:where(.sdd-root) button { font: inherit; color: inherit; }
.sdd-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sdd-root :focus-visible { outline: 2px solid var(--sdd-blue); outline-offset: 2px; }

/* ── top bar ─────────────────────────────────────────── */
.sdd-top {
	position: absolute; top: 0; left: 0; right: 0; z-index: 5;
	height: calc(var(--sdd-top-h) + var(--sdd-safe-t)); padding: var(--sdd-safe-t) max(8px, var(--sdd-safe-r)) 0 max(8px, var(--sdd-safe-l));
	display: flex; align-items: center; gap: 4px;
	background: linear-gradient(to bottom, rgba(15,15,16,.9), rgba(15,15,16,.55) 70%, rgba(15,15,16,0));
}
.sdd-icon-btn {
	width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; position: relative; text-decoration: none; color: inherit;
}
.sdd-icon-btn svg { width: 24px; height: 24px; }
.sdd-ctx {
	flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
	border: 1px solid var(--sdd-line); border-radius: 999px; background: rgba(255,255,255,.08);
	height: 44px; padding: 0 14px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden;
}
.sdd-ctx span { overflow: hidden; text-overflow: ellipsis; }
.sdd-badge {
	position: absolute; top: 2px; left: 0; min-width: 19px; height: 19px; border-radius: 10px; padding: 0 5px;
	background: var(--sdd-blue); color: var(--sdd-ink); font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; pointer-events: none;
}
.sdd-badge:empty { display: none; }
.sdd-badge.bump { animation: sdd-bump .45s ease; }
@keyframes sdd-bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.45); } }

/* active filters + what was learned — a choice visibly changes the feed */
.sdd-root.sdd-has-chips { --sdd-chips-h: 42px; }
.sdd-chips {
	position: absolute; z-index: 5; top: calc(var(--sdd-top-h) + var(--sdd-safe-t)); left: 0; right: 0;
	display: flex; gap: 6px; padding: 0 12px 6px; overflow-x: auto; scrollbar-width: none; pointer-events: none;
}
.sdd-chips > * { pointer-events: auto; }
.sdd-chips::-webkit-scrollbar { display: none; }
.sdd-chips[hidden] { display: none; }
.sdd-chip {
	flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 12px; border-radius: 999px;
	border: 1px solid var(--sdd-line); background: rgba(15,15,16,.66); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.sdd-chip i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); font-size: 12px; }
.sdd-chip.is-learned { border-color: rgba(255,59,92,.6); }
.sdd-chip.is-learned::before { content: '♥'; color: var(--sdd-like); font-size: 12px; }

/* ── feed (vertical) ─────────────────────────────────── */
.sdd-feed {
	position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
	scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.sdd-feed::-webkit-scrollbar { display: none; }
.sdd-item {
	position: relative; height: 100%; width: 100%;
	scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden;
	background: #141416;
}
.sdd-item::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(130% 75% at 50% 42%, var(--sdd-tint, rgba(255,255,255,.05)), rgba(15,15,16,0) 72%);
}

/* the image stage */
.sdd-stage { position: absolute; left: 0; right: 0; top: calc(var(--sdd-top-h) + var(--sdd-safe-t) + var(--sdd-chips-h, 0px) + 40px); bottom: calc(var(--sdd-bottom-h) + var(--sdd-safe-b)); }
.sdd-rail {
	position: absolute; inset: 0;
	display: flex; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
	touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
}
.sdd-rail::-webkit-scrollbar { display: none; }
.sdd-slide {
	flex: 0 0 100%; width: 100%; height: 100%; margin: 0; padding: 4px 10px;
	scroll-snap-align: center; scroll-snap-stop: always;
	display: flex; align-items: center; justify-content: center;
}
.sdd-slide img {
	display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
	object-fit: contain; border-radius: 8px; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
	transition: opacity .25s ease; box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.sdd-slide img[data-loading] { opacity: 0; }
/* cut-out stickers (transparent black shapes) sit on a light wall; light colours on a dark one */
.sdd-slide.is-light img { background: #F4F2EE; padding: 4%; }
.sdd-slide.is-light.is-dark img { background: #2B2B30; }

/* colour stickers: "choose a colour" right on the picture (left of the action rail) */
.sdd-colorbar {
	position: absolute; z-index: 4; left: 10px; right: 76px; bottom: 8px; margin-inline: auto; width: fit-content; max-width: calc(100% - 86px);
	display: flex; align-items: center; gap: 7px; padding: 6px 8px 6px 10px; border-radius: 999px;
	background: rgba(15,15,16,.82); box-shadow: 0 6px 18px rgba(0,0,0,.35); overflow-x: auto; scrollbar-width: none;
}
.sdd-colorbar::-webkit-scrollbar { display: none; }
.sdd-colorbar-l { font-size: 12.5px; font-weight: 800; white-space: nowrap; padding-inline-end: 2px; }
.sdd-sw { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); padding: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.sdd-sw[aria-pressed="true"], .sdd-sw[aria-checked="true"] { outline: 3px solid var(--sdd-blue); outline-offset: 2px; }
/* phones: four quick colours + "עוד"; desktop: six + "all colours" */
.sdd-colorbar .sdd-sw:nth-of-type(n+5), .sdd-m-l { display: none; }
@media (min-width: 1024px) { .sdd-colorbar .sdd-sw:nth-of-type(n+5), .sdd-m-l { display: inline; } .sdd-colorbar .sdd-sw:nth-of-type(n+5) { display: block; } .sdd-m-s { display: none; } }
.sdd-sw-more { flex: none; border: 0; border-radius: 999px; min-height: 30px; padding: 0 10px; background: #fff; color: var(--sdd-ink); font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }

/* desktop: like / save on the picture (shown on hover, stays when on) */
.sdd-hov { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
	.sdd-hov { display: flex; position: absolute; z-index: 4; top: 14px; left: 14px; gap: 10px; opacity: 0; transition: opacity .18s; }
	.sdd-stage:hover .sdd-hov, .sdd-hov:focus-within, .sdd-hov.has-on { opacity: 1; }
	.sdd-hov-b { width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(15,15,16,.72); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.3); transition: transform .12s, background .15s; }
	.sdd-hov-b:hover { transform: scale(1.08); background: rgba(15,15,16,.9); }
	.sdd-hov-b svg { width: 24px; height: 24px; }
	.sdd-hov-like[aria-pressed="true"] { color: var(--sdd-like); background: #fff; }
	.sdd-hov-save[aria-pressed="true"] { color: #fff; background: var(--sdd-cta); }
	.sdd-hov-save[aria-pressed="true"] svg path { fill: currentColor; }
	.sdd-colorbar { right: 0; left: 0; bottom: 14px; max-width: calc(100% - 28px); }
}
.sdd-single .sdd-rail { overflow-x: hidden; }

/* which image is this: one clear toggle, centred above the image */
.sdd-views {
	position: absolute; z-index: 3; left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: calc(100% - 24px);
	top: calc(var(--sdd-top-h) + var(--sdd-safe-t) + var(--sdd-chips-h, 0px) + 2px);
	display: flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(15,15,16,.7); border: 1px solid var(--sdd-line);
}
.sdd-view {
	border: 0; background: transparent; color: var(--sdd-muted); height: 32px; min-width: 48px; padding: 0 13px; border-radius: 999px;
	font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.sdd-view[aria-selected="true"] { background: #fff; color: var(--sdd-ink); }
.sdd-view-one {
	position: absolute; z-index: 3; left: 0; right: 0; margin-inline: auto; width: fit-content; top: calc(var(--sdd-top-h) + var(--sdd-safe-t) + var(--sdd-chips-h, 0px) + 6px);
	font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(15,15,16,.6); color: var(--sdd-muted); pointer-events: none;
}

/* mouse users get arrows for the gallery (hidden on touch phones) */
.sdd-garrow {
	position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
	border: 0; background: rgba(15,15,16,.62); color: #fff; display: none; place-items: center; cursor: pointer;
}
.sdd-garrow svg { width: 22px; height: 22px; }
.sdd-garrow[disabled] { opacity: .25; cursor: default; }
.sdd-garrow.prev { right: 12px; }
.sdd-garrow.next { left: 12px; }
@media (hover: hover) and (pointer: fine) { .sdd-item:not(.sdd-single) .sdd-garrow { display: grid; } }

/* ── action rail: on the image, bottom-right, thumb zone (physical right on purpose) ── */
.sdd-acts { /* phones: a thumb rail just above the info block, on the image's right edge */
	position: absolute; z-index: 4; right: max(6px, var(--sdd-safe-r));
	bottom: calc(100% + 8px);
	display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.sdd-act {
	display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 0; cursor: pointer; color: #fff; min-width: 54px;
}
.sdd-act b {
	width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(15,15,16,.52); box-shadow: 0 2px 12px rgba(0,0,0,.35);
	transition: transform .12s ease, background .2s, color .2s;
}
.sdd-act b svg { width: 26px; height: 26px; }
.sdd-act span { font-size: 11.5px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.sdd-act:active b { transform: scale(.9); }
.sdd-act[aria-pressed="true"].sdd-like b { color: var(--sdd-like); background: rgba(255,255,255,.94); }
.sdd-act[aria-pressed="true"].sdd-like svg path { fill: currentColor; }
.sdd-act[aria-pressed="true"].sdd-save b { color: var(--sdd-cta); background: rgba(255,255,255,.94); }
.sdd-act[aria-pressed="true"].sdd-save svg path { fill: currentColor; }
.sdd-act.sdd-less b { width: 42px; height: 42px; }
.sdd-act.sdd-less b svg { width: 22px; height: 22px; }
.sdd-act[aria-pressed="true"].sdd-less b { background: rgba(255,255,255,.32); }

/* ── bottom: title, price, why, CTA ─────────────────── */
.sdd-bottom {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
	height: calc(var(--sdd-bottom-h) + var(--sdd-safe-b));
	padding: 8px max(14px, var(--sdd-safe-r)) calc(10px + var(--sdd-safe-b)) max(14px, var(--sdd-safe-l));
	display: flex; flex-direction: column; gap: 3px;
	background: linear-gradient(to top, rgba(15,15,16,.98) 55%, rgba(15,15,16,.82) 85%, rgba(15,15,16,0));
}
.sdd-title-row { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sdd-title { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; }
.sdd-title-btn { all: unset; cursor: pointer; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sdd-title-btn:focus-visible { outline: 2px solid var(--sdd-blue); outline-offset: 2px; }
.sdd-price { flex: none; font-size: 13px; color: var(--sdd-muted); white-space: nowrap; }
.sdd-price strong { color: #fff; font-size: 15px; }
.sdd-why { font-size: 12.5px; color: var(--sdd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 17px; }
.sdd-why b { color: #ffb3c1; font-weight: 800; }
.sdd-cta {
	margin-top: auto; width: 100%; height: 48px; border-radius: 14px; border: 0; cursor: pointer;
	background: var(--sdd-cta); color: #fff; font-size: 15.5px; font-weight: 800; padding: 0 12px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sdd-cta:active { background: var(--sdd-cta-2); }
.sdd-item.is-less .sdd-rail { opacity: .4; filter: grayscale(.5); transition: opacity .3s, filter .3s; }
.sdd-incart { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(77,170,213,.25); color: #cdeefb; margin-inline-start: 6px; vertical-align: 2px; }

/* like burst */
.sdd-burst { position: absolute; z-index: 6; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; color: var(--sdd-like); animation: sdd-burst .7s ease-out forwards; }
.sdd-burst svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
@keyframes sdd-burst { 0% { transform: scale(.4); opacity: 0; } 20% { transform: scale(1.1); opacity: 1; } 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.25) translateY(-18px); opacity: 0; } }

/* notices + toasts: centred, full width minus gutters */
.sdd-notice, .sdd-toast {
	position: absolute; z-index: 8; left: 12px; right: 12px; margin-inline: auto; width: fit-content; max-width: min(calc(100% - 24px), 520px);
	border-radius: 14px; font-size: 14px; line-height: 1.45;
}
.sdd-notice { top: calc(var(--sdd-top-h) + var(--sdd-safe-t) + var(--sdd-chips-h, 0px) + 44px); padding: 10px 14px; background: rgba(28,28,31,.97); border: 1px solid var(--sdd-line); text-align: center; }
.sdd-notice[hidden], .sdd-toast[hidden] { display: none; }
.sdd-toast {
	right: 72px; /* keep clear of the action rail on the right */
	bottom: calc(var(--sdd-bottom-h) + var(--sdd-safe-b) + 12px);
	display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px;
	background: #fff; color: var(--sdd-ink); box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.sdd-root.sdd-sheet-open .sdd-toast { z-index: 25; top: calc(12px + var(--sdd-safe-t)); bottom: auto; left: 12px; right: 12px; } /* above an open sheet, clear of its buttons */
.sdd-toast > button { border: 0; background: transparent; color: var(--sdd-cta); font-weight: 800; cursor: pointer; min-height: 44px; padding: 0 8px; flex: none; }
.sdd-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sdd-reasons button { border: 1px solid #d6d6db; border-radius: 999px; min-height: 40px; padding: 0 12px; color: var(--sdd-ink); font-weight: 700; font-size: 13px; background: #fff; cursor: pointer; }
.sdd-reasons button[aria-pressed="true"] { background: var(--sdd-ink); color: #fff; border-color: var(--sdd-ink); }
.sdd-learn em { font-style: normal; font-weight: 800; color: #d81b44; }
.sdd-link { border: 0; background: none; padding: 0; font: inherit; color: #8fd0ee; font-weight: 800; cursor: pointer; text-decoration: underline; }
.sdd-end { height: 100%; display: grid; place-items: center; text-align: center; padding: 24px; scroll-snap-align: start; }
.sdd-end p { color: var(--sdd-muted); margin: 8px 0 16px; }
.sdd-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff; animation: sdd-spin .8s linear infinite; }
@keyframes sdd-spin { to { transform: rotate(360deg); } }

/* contextual first-time hints: one at a time, at the moment they matter */
.sdd-coach {
	position: absolute; z-index: 7; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 10px;
	left: 0; right: 0; top: 44%; text-align: center;
}
.sdd-coach[hidden] { display: none; }
.sdd-coach span { padding: 9px 15px; border-radius: 999px; background: rgba(15,15,16,.86); font-size: 14.5px; font-weight: 800; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.sdd-coach i { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 4px 18px rgba(0,0,0,.45); }
.sdd-coach.up i { animation: sdd-swipe-up 1.5s ease-in-out infinite; }
.sdd-coach.side i { animation: sdd-swipe-side 1.5s ease-in-out infinite; }
@keyframes sdd-swipe-up { 0% { transform: translateY(40px); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(-50px); opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
@keyframes sdd-swipe-side { 0% { transform: translateX(-50px); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateX(50px); opacity: 1; } 100% { transform: translateX(60px); opacity: 0; } }

/* ── sheets ───────────────────────────────────────────── */
.sdd-sheet-wrap { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); }
.sdd-sheet-wrap[hidden] { display: none; }
.sdd-sheet {
	width: 100%; max-width: 560px; max-height: 92%; overflow: auto; overscroll-behavior: contain;
	background: #fff; color: var(--sdd-ink); border-radius: 22px 22px 0 0; padding: 8px 18px calc(18px + var(--sdd-safe-b));
	box-shadow: 0 -10px 40px rgba(0,0,0,.35); animation: sdd-up .22s ease-out; outline: none;
}
@keyframes sdd-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.sdd-grab { width: 40px; height: 4px; border-radius: 2px; background: #d6d6db; margin: 4px auto 10px; }
/* WhatsApp: send the saves to the business */
.sdd-btn.sdd-btn-wa { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; background: #25D366; color: #fff; text-decoration: none; }
.sdd-btn.sdd-btn-wa:hover { background: #1EBE5A; }
.sdd-btn-wa svg { width: 22px; height: 22px; flex: none; }
.sdd-wa-link { color: #128C4A; font-weight: 800; text-decoration: underline; white-space: nowrap; }
.sdd-colors { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 6px; }
.sdd-colprev { flex: none; width: 96px; height: 96px; border-radius: 14px; background: #F4F2EE; display: grid; place-items: center; overflow: hidden; border: 1px solid #E5E7EB; }
.sdd-colprev.is-dark { background: #2B2B30; }
.sdd-colprev img { max-width: 88%; max-height: 88%; }
.sdd-colpick { flex: 1; min-width: 0; }
.sdd-colpick h3 { margin-top: 0; }
.sdd-swname { font-weight: 600; color: #4B5563; }
.sdd-swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.sdd-swatches .sdd-sw { width: 30px; height: 30px; border-color: #fff; box-shadow: 0 0 0 1px #D1D5DB; }
.sdd-sheet h2 { font-size: 20px; font-weight: 800; margin: 4px 0 4px; outline: none; }
.sdd-root .sdd-sheet h2:focus, .sdd-root .sdd-sheet h2:focus-visible { outline: none; } /* focused for screen readers, not a control */
.sdd-sheet h3 { font-size: 15px; margin: 6px 0 8px; }
.sdd-sheet .sdd-sub { color: #4B5563; font-size: 13.5px; margin: 0 0 14px; }
.sdd-sheet-head { display: flex; align-items: center; gap: 8px; }
.sdd-sheet-head h2 { flex: 1; }
.sdd-sheet-head .sdd-icon-btn { color: var(--sdd-ink); }
.sdd-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.sdd-opts.sdd-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sdd-opt {
	position: relative; border: 1.5px solid #E5E7EB; border-radius: 14px; background: #fff; color: var(--sdd-ink);
	padding: 12px 10px; text-align: center; cursor: pointer; font-weight: 800; font-size: 15px; min-height: 58px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform .1s ease;
}
.sdd-opt small { color: #4B5563; font-weight: 500; font-size: 12px; }
.sdd-opt:active { transform: scale(.97); }
.sdd-opt[aria-pressed="true"], .sdd-opt[aria-checked="true"] { border-color: var(--sdd-ink); background: #F3F4F6; box-shadow: inset 0 0 0 1px var(--sdd-ink); }
.sdd-opt.sdd-tile { padding: 0; overflow: hidden; min-height: 0; aspect-ratio: 1 / 1.08; justify-content: flex-end; }
.sdd-opt.sdd-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sdd-opt.sdd-tile span { position: relative; width: 100%; padding: 24px 6px 8px; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); color: #fff; font-size: 13.5px; }
.sdd-opt.sdd-tile[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--sdd-cta); border-color: var(--sdd-cta); }
.sdd-opt.sdd-tile[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--sdd-cta); color: #fff; font-size: 15px; line-height: 26px; }
.sdd-steps { display: flex; gap: 4px; margin: 0 0 12px; }
.sdd-steps i { flex: 1; height: 4px; border-radius: 2px; background: #E5E7EB; }
.sdd-steps i.on { background: var(--sdd-ink); }
.sdd-sheet-actions { display: flex; gap: 8px; position: sticky; bottom: calc(-18px - var(--sdd-safe-b)); background: #fff; padding: 12px 0 6px; margin-top: 6px; }
.sdd-btn { flex: 1; min-height: 50px; border-radius: 14px; border: 0; background: var(--sdd-ink); color: #fff; font-weight: 800; font-size: 15.5px; cursor: pointer; display: grid; place-items: center; text-decoration: none; padding: 0 14px; text-align: center; }
.sdd-btn.sdd-btn-ghost { background: #F3F4F6; color: var(--sdd-ink); }
.sdd-btn.sdd-btn-blue { background: var(--sdd-cta); }
.sdd-btn[disabled] { opacity: .45; cursor: default; }
.sdd-search { display: flex; gap: 8px; margin: 4px 0 14px; }
.sdd-search input { flex: 1; min-width: 0; height: 48px; border-radius: 12px; border: 1.5px solid #E5E7EB; padding: 0 14px; font: inherit; font-size: 16px; }
.sdd-search .sdd-btn { flex: 0 0 auto; }
.sdd-field { display: grid; gap: 6px; }
.sdd-field label { font-size: 13.5px; font-weight: 800; }
.sdd-field input { height: 52px; border-radius: 12px; border: 1.5px solid #D1D5DB; padding: 0 12px; font: inherit; font-size: 20px; font-weight: 700; text-align: center; width: 100%; color: var(--sdd-ink); }
.sdd-field input::placeholder { color: #B0B4BB; font-weight: 400; font-size: 15px; }
.sdd-dims { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; margin-bottom: 14px; }
.sdd-dims .sdd-x { padding-bottom: 15px; color: #6B7280; font-size: 18px; }
.sdd-pricebox { border-radius: 16px; background: #F3F4F6; padding: 14px 16px; margin: 6px 0 12px; text-align: center; }
.sdd-pricebox .sdd-big { font-size: 30px; font-weight: 900; line-height: 1.15; }
.sdd-pricebox .sdd-hintline { font-size: 14px; color: #4B5563; }
.sdd-pricebox ul { margin: 10px 0 0; padding: 0 18px 0 0; font-size: 12.5px; color: #4B5563; line-height: 1.6; text-align: right; }
.sdd-err { color: #B91C1C; font-size: 13.5px; min-height: 18px; margin: 0 0 8px; text-align: center; }
.sdd-sizes { display: grid; gap: 8px; margin-bottom: 12px; }
.sdd-size { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1.5px solid #E5E7EB; border-radius: 12px; min-height: 52px; padding: 10px 14px; cursor: pointer; background: #fff; text-align: right; font-weight: 700; color: var(--sdd-ink); }
.sdd-size[aria-checked="true"] { border-color: var(--sdd-ink); box-shadow: inset 0 0 0 1px var(--sdd-ink); background: #F3F4F6; }
.sdd-size b { white-space: nowrap; }
.sdd-size small { color: #4B5563; font-weight: 500; }
.sdd-saved-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sdd-saved-list a { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #F3F4F6; }
.sdd-saved-list img { width: 100%; height: 100%; object-fit: cover; }
.sdd-saved-list button { position: absolute; top: 4px; left: 4px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(15,15,16,.78); color: #fff; cursor: pointer; font-size: 18px; }
.sdd-rooms { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; scrollbar-width: thin; }
.sdd-rooms.wrap { flex-wrap: wrap; overflow: visible; }
.sdd-rooms .sdd-opt { flex: none; min-height: 44px; padding: 6px 14px; flex-direction: row; gap: 6px; font-size: 14px; }
.sdd-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); display: inline-block; }
.sdd-a { color: var(--sdd-cta); font-weight: 800; text-decoration: none; }
.sdd-added { display: flex; gap: 14px; align-items: center; text-align: right; margin: 6px 0 4px; }
.sdd-added img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; flex: none; }
.sdd-added div { font-size: 14px; line-height: 1.5; }

/* crop editor */
.sdd-crop { position: relative; width: 100%; background: #1c1c1f; border-radius: 12px; overflow: hidden; touch-action: none; user-select: none; margin-bottom: 10px; }
.sdd-crop img { display: block; width: 100%; height: auto; pointer-events: none; }
.sdd-crop-frame { position: absolute; box-shadow: 0 0 0 9999px rgba(15,15,16,.58); border: 2px solid #fff; border-radius: 2px; cursor: move; touch-action: none; }
.sdd-crop-frame::before { content: ''; position: absolute; inset: -14px -2px; } /* a very wide/short frame stays easy to grab */
.sdd-crop-frame::after { content: ''; position: absolute; inset: 33.33% 0; border-top: 1px dashed rgba(255,255,255,.5); border-bottom: 1px dashed rgba(255,255,255,.5); pointer-events: none; }
.sdd-crop-handle { position: absolute; left: -15px; bottom: -15px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--sdd-cta); box-shadow: 0 2px 8px rgba(0,0,0,.4); touch-action: none; cursor: nesw-resize; }
.sdd-img-btn { width: 100%; margin: 0 0 14px; }
.sdd-range { width: 100%; margin: 6px 0 12px; accent-color: var(--sdd-cta); height: 28px; }

/* zoom viewer: pan a larger copy; +/- buttons (no page pinch) */
.sdd-zoom { position: absolute; inset: 0; z-index: 30; background: #000; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.sdd-zoom[hidden] { display: none; }
.sdd-zoom img { display: block; max-width: none; margin: auto; }
.sdd-zoom-bar { position: absolute; z-index: 31; top: calc(10px + var(--sdd-safe-t)); right: max(10px, var(--sdd-safe-r)); display: flex; gap: 8px; }
.sdd-zoom-bar button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(15,15,16,.8); color: #fff; font-size: 22px; font-weight: 800; cursor: pointer; display: grid; place-items: center; }
.sdd-zoom-bar svg { width: 22px; height: 22px; }

/* desktop up/down buttons (hidden on phones) */
.sdd-nav-v { display: none; position: absolute; z-index: 6; flex-direction: column; gap: 10px; }
.sdd-nav-v button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--sdd-line); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.sdd-nav-v button[disabled] { opacity: .3; cursor: default; }
.sdd-nav-v svg { width: 22px; height: 22px; }

/* ── desktop (≥1024px): big image + side panel; phones untouched ── */
/* mouse users on a narrower window still get the up/down buttons */
@media (hover: hover) and (pointer: fine) and (min-width: 600px) and (max-width: 1023px) {
	.sdd-nav-v { display: flex; left: 16px; top: 50%; transform: translateY(-50%); }
}
@media (min-width: 1024px) {
	.sdd-root { --sdd-top-h: 64px; --sdd-panel: 380px; }
	.sdd-top { left: 0; right: 0; margin-inline: auto; width: min(100%, 1240px); padding-inline: 16px; }
	.sdd-chips { left: 0; right: 0; margin-inline: auto; width: min(100%, 1240px); padding-inline: 20px; }
	.sdd-feed { left: 0; right: 0; margin-inline: auto; width: min(100%, 1240px); }
	/* RTL: the panel (title, price, CTA) on the right, the image on the left */
	.sdd-stage { top: calc(var(--sdd-top-h) + var(--sdd-chips-h, 0px) + 52px); bottom: 28px; right: calc(var(--sdd-panel) + 40px); left: 92px; }
	.sdd-views, .sdd-view-one { top: calc(var(--sdd-top-h) + var(--sdd-chips-h, 0px) + 8px); right: calc(var(--sdd-panel) + 40px); left: 92px; }
	/* desktop: the actions sit with the product they act on — a labelled row under the CTA in the panel
	   (reading starts on the right in Hebrew; proximity to title/price; Pinterest/IKEA keep save in the panel) */
	.sdd-acts { position: static; flex-direction: row; align-items: stretch; gap: 8px; margin-top: 12px; }
	.sdd-act { flex: 1 1 0; flex-direction: row; justify-content: center; gap: 8px; min-height: 46px; padding: 0 10px; border: 1.5px solid var(--sdd-line); border-radius: 12px; transition: border-color .15s, background .15s; }
	.sdd-act:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); }
	.sdd-act b, .sdd-act.sdd-less b { width: auto; height: auto; background: none; box-shadow: none; }
	.sdd-act b svg, .sdd-act.sdd-less b svg { width: 22px; height: 22px; }
	.sdd-act span { font-size: 14.5px; text-shadow: none; }
	.sdd-act:active b { transform: none; }
	.sdd-act[aria-pressed="true"].sdd-like { border-color: var(--sdd-like); background: rgba(255,59,92,.12); }
	.sdd-act[aria-pressed="true"].sdd-like b { background: none; color: var(--sdd-like); }
	.sdd-act[aria-pressed="true"].sdd-save { border-color: var(--sdd-blue); background: rgba(77,170,213,.14); }
	.sdd-act[aria-pressed="true"].sdd-save b { background: none; color: var(--sdd-blue); }
	.sdd-act.sdd-less { flex: 0 0 auto; border-color: transparent; color: var(--sdd-muted); margin-inline-start: 4px; }
	.sdd-act[aria-pressed="true"].sdd-less { border-color: var(--sdd-line); background: rgba(255,255,255,.08); }
	.sdd-bottom {
		top: calc(var(--sdd-top-h) + 52px); bottom: 28px; left: auto; right: 16px; width: var(--sdd-panel); height: auto;
		background: rgba(255,255,255,.04); border: 1px solid var(--sdd-line); border-radius: 22px;
		padding: 28px 26px; justify-content: center; gap: 12px;
	}
	.sdd-title-row { flex-direction: column; align-items: flex-start; gap: 10px; }
	.sdd-title { font-size: 24px; }
	.sdd-title-btn { white-space: normal; }
	.sdd-price { font-size: 15px; } .sdd-price strong { font-size: 24px; }
	.sdd-why { white-space: normal; font-size: 14px; }
	.sdd-cta { margin-top: 14px; height: 56px; font-size: 16.5px; flex: none; }
	.sdd-nav-v { display: flex; left: 24px; top: 50%; transform: translateY(-50%); }
	.sdd-toast { bottom: 36px; right: calc(var(--sdd-panel) + 126px); left: 110px; }
	.sdd-sheet { border-radius: 22px; margin-bottom: 24px; max-height: calc(100% - 48px); }
	.sdd-sheet-wrap { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
	.sdd-root *, .sdd-root *::before, .sdd-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}