/* ==========================================================================
   Soloh storefront
   The store keeps the design of the old shop code (ssh-* / spp-*),
   the header and footer are the same bars as before, in plain code.
   ========================================================================== */

:root {
	--c-accent: #9b2335;
	--c-accent-d: #7d1c2a;
	--c-text: #1c1c1c;
	--c-muted: #767676;
	--c-border: #ebebeb;
	--c-surface: #f8f7f5;
	--c-green: #27ae60;
	--c-radius: 14px;
	--c-shadow: 0 2px 16px rgba(0, 0, 0, .07);
	--c-shadow-h: 0 8px 32px rgba(0, 0, 0, .13);
	--sl-maroon: #740000;
	--sl-dark: #202020;
	--sl-footer: #272727;
	--sl-cream: #f0e5d6;
	--sl-font: 'Rubik', 'Heebo', Arial, sans-serif;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body.sl {
	margin: 0;
	font-family: var(--sl-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--c-text);
	background: #fff;
	direction: rtl;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}
/* :where() keeps these base rules at zero weight, so component colors always win. */
:where(.sl) img { max-width: 100%; height: auto; }
:where(.sl) a { color: inherit; }
:where(.sl) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.sl) :focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; border-radius: 4px; }

.sl-wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 20px; }
@media (max-width: 480px) { .sl-wrap { padding-inline: 12px; } }
.sl-main { min-height: 50vh; }

.sl-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sl-skip { position: absolute; top: -60px; right: 16px; z-index: 1000; background: #fff; color: var(--c-text); padding: 10px 16px; border-radius: 8px; }
.sl-skip:focus { top: 12px; }
.sl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) { .sl-hide-sm { display: none !important; } }

/* ---------- Generic buttons (header, footer, drawer) ---------- */

.sl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 18px; border: 0; border-radius: 8px;
	background: var(--c-accent); color: #fff; font-weight: 600; font-size: 15px;
	text-decoration: none; cursor: pointer; transition: background .18s;
}
.sl-btn:hover { background: var(--c-accent-d); color: #fff; }
.sl-btn--cream { background: var(--sl-cream); color: #111; }
.sl-btn--cream:hover { background: #e6d6c0; color: #111; }
.sl-btn--wa { background: #1f7a45; }
.sl-btn--wa:hover { background: #17633a; }

.sl-icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
	background: transparent; color: inherit; cursor: pointer; text-decoration: none;
}
.sl-icon-btn:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Header ---------- */

.sl-topbar { background: var(--sl-maroon); color: #fff; }
.sl-topbar__in { display: flex; justify-content: center; align-items: center; gap: 24px; min-height: 40px; padding-block: 8px; font-size: 16px; text-align: center; }
.sl-topbar a { color: #fff; text-decoration: none; }
.sl-topbar a:hover { text-decoration: underline; }
@media (min-width: 768px) {
	.sl-topbar__in { justify-content: space-between; font-size: 18px; font-weight: 600; }
}

.sl-header { background: #2b2b2b; color: #fff; }
@media (min-width: 768px) { .sl-header { background: var(--sl-dark); } }
.sl-header__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 72px; gap: 8px; }
.sl-header__start { display: flex; align-items: center; gap: 4px; }
.sl-header__end { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.sl-logo { display: block; line-height: 0; padding-block: 6px; }
.sl-logo__img { width: 60px; height: 60px; object-fit: contain; }
@media (min-width: 768px) { .sl-logo__img { width: 96px; height: 96px; } }
.sl-login { display: flex; }
.sl-login button { min-width: 44px; min-height: 44px; justify-content: center; }
.sl-cartbtn { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 6px; border-radius: 10px; color: #fff; text-decoration: none; }
.sl-cartbtn:hover { background: rgba(255, 255, 255, .1); }
.sl-cartbtn__icon { position: relative; display: inline-flex; }
.sl-cartbtn__count {
	position: absolute; top: -6px; left: -8px; min-width: 20px; height: 20px; padding: 0 5px;
	border-radius: 10px; background: #751313; color: #fff;
	font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}

/* Drawer */
.sl-drawer { position: fixed; inset: 0; z-index: 100000; }
.sl-drawer[hidden] { display: none; }
.sl-drawer__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.sl-drawer__panel {
	position: absolute; top: 0; bottom: 0; right: 0; width: min(86vw, 360px); overflow-y: auto;
	background: #fff; color: var(--c-text); display: flex; flex-direction: column; gap: 12px;
	padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
	animation: sl-slide .22s ease-out;
}
@keyframes sl-slide { from { transform: translateX(100%); } to { transform: none; } }
.sl-drawer__head { display: flex; justify-content: space-between; align-items: center; }
.sl-drawer__head .sl-icon-btn:hover { background: var(--c-surface); }
.sl-drawer__title { font-size: 18px; font-weight: 700; }
.sl-drawer__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); }
.sl-drawer__list a { display: block; padding: 13px 4px; border-bottom: 1px solid var(--c-border); font-size: 17px; font-weight: 500; text-decoration: none; }
.sl-drawer__list--small a { font-size: 15px; font-weight: 400; color: var(--c-muted); }

/* ==========================================================================
   SHOP (old ssh-* design)
   ========================================================================== */

.ssh { max-width: 1400px; margin: 0 auto; padding: 0 20px 80px; }

/* Search bar */
.ssh-search-wrap { position: sticky; top: 0; z-index: 90; background: #fff; padding: 16px 0 12px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.ssh-search-box { flex: 1; display: flex; align-items: center; gap: 10px; height: 48px; background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: 100px; padding: 0 16px; transition: border-color .2s, background .2s, box-shadow .2s; }
.ssh-search-box:focus-within { border-color: var(--c-text); background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.ssh-ico-search { width: 17px; height: 17px; color: var(--c-muted); flex-shrink: 0; }
.ssh-search-box:focus-within .ssh-ico-search { color: var(--c-text); }
#ssh-search { flex: 1; min-width: 0; border: none; background: transparent; font-size: 16px; color: var(--c-text); direction: rtl; outline: none; padding: 0; -webkit-appearance: none; appearance: none; }
#ssh-search::-webkit-search-cancel-button { display: none; }
#ssh-search::placeholder { color: #9a9a9a; }
#ssh-search-clear { background: none; border: none; cursor: pointer; color: #999; padding: 6px; border-radius: 50%; line-height: 1; flex-shrink: 0; }
#ssh-search-clear[hidden] { display: none; }
#ssh-search-clear:hover { color: var(--c-text); background: var(--c-border); }

.ssh-cart-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ssh-cart-total-wrap { display: none; flex-direction: column; align-items: flex-end; line-height: 1.25; text-decoration: none; }
.ssh-cart-total-wrap.has-items { display: flex; }
.ssh-cart-total-wrap:hover .ssh-cart-total-val { color: var(--c-accent); }
.ssh-cart-total-lbl { font-size: 11px; font-weight: 500; color: var(--c-muted); white-space: nowrap; }
.ssh-cart-total-val { font-size: 15px; font-weight: 800; color: var(--c-text); white-space: nowrap; }
.ssh-checkout-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 14px; min-height: 48px; background: var(--c-accent); color: #fff !important; border-radius: 12px; text-decoration: none; white-space: nowrap; transition: background .18s; flex-shrink: 0; }
.ssh-checkout-btn:hover { background: var(--c-accent-d); }
.ssh-checkout-label { font-size: 11px; font-weight: 600; line-height: 1; }

/* Category tabs */
.ssh-nav { position: sticky; top: 76px; z-index: 89; background: #fff; margin-bottom: 6px; padding: 4px 0; border-bottom: 1px solid var(--c-border); }
.ssh-nav-scroll { display: flex; gap: 9px; overflow-x: auto; padding: 8px 4px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ssh-nav-scroll::-webkit-scrollbar { display: none; }
.ssh-tab { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 2px solid var(--c-border); border-radius: 100px; background: #fff; font-size: 14px; font-weight: 600; color: #6b6b6b; white-space: nowrap; text-decoration: none; transition: border-color .18s, background .18s, color .18s, box-shadow .18s; line-height: 1; user-select: none; }
.ssh-tab:hover { border-color: #bbb; color: var(--c-text); }
.ssh-tab.active { border-color: var(--c-text); background: var(--c-text); color: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .16); }

/* Meta + grid */
.ssh-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; padding: 0 4px; font-size: 13px; color: var(--c-muted); min-height: 20px; }
#ssh-count { font-weight: 700; color: var(--c-text); }
.ssh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 540px) { .ssh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 768px) { .ssh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .ssh-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } }

/* Card */
.ssh-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--c-radius); background: #fff; box-shadow: var(--c-shadow); border: 1px solid var(--c-border); overflow: hidden; transition: transform .22s cubic-bezier(.34, 1.2, .64, 1), box-shadow .22s; animation: sshCardIn .3s ease both; }
.ssh-card[hidden], .ssh-card.is-more { display: none; }
@keyframes sshCardIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (hover: hover) { .ssh-card:hover { transform: translateY(-4px); box-shadow: var(--c-shadow-h); } }
.ssh-card-img-wrap { position: relative; overflow: hidden; background: var(--c-surface); aspect-ratio: 1 / 1; }
.ssh-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
@media (hover: hover) { .ssh-card:hover .ssh-card-img { transform: scale(1.06); } }
.ssh-badge { position: absolute; top: 8px; right: 8px; background: var(--c-text); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 20px; letter-spacing: .4px; }
.ssh-card-body { padding: 11px 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ssh-card-name { margin: 0; font-size: 13px; font-weight: 700; color: var(--c-text); line-height: 1.35; }
.ssh-card-link { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ssh-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* Whole card opens the product */
.ssh-card-price-row { display: flex; align-items: baseline; gap: 3px; }
.ssh-card-price { font-size: 17px; font-weight: 900; color: var(--c-accent); line-height: 1; }
.ssh-card-price-suffix { font-size: 11px; color: var(--c-muted); font-weight: 500; }
.ssh-card-cta { margin-top: auto; padding-top: 8px; }
.ssh-card-btn { position: relative; z-index: 2; width: 100%; min-height: 40px; padding: 9px 12px; background: var(--c-accent); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .18s; display: flex; align-items: center; justify-content: center; }
.ssh-card-btn:hover { background: var(--c-accent-d); }
.ssh-card-btn.ssh-out-of-stock, .ssh-card-btn[disabled] { background: #f0f0f0; color: #6e6e6e; cursor: not-allowed; font-weight: 500; }

/* Shared states for all add buttons */
.ssh-ok { background: var(--c-green) !important; color: #fff !important; }
.ssh-busy { opacity: .7; cursor: wait; pointer-events: none; }

@media (max-width: 480px) {
	.ssh { padding: 0 12px 60px; }
	.ssh-card-name { font-size: 12.5px; }
	.ssh-card-price { font-size: 15px; }
	.ssh-card-btn { font-size: 12px; padding: 8px 10px; }
	.ssh-card-body { padding: 9px 10px 12px; gap: 4px; }
	.ssh-tab { padding: 8px 14px; font-size: 13px; }
}

/* Empty + more */
.ssh-empty { text-align: center; padding: 64px 20px; color: var(--c-muted); }
.ssh-empty[hidden] { display: none; }
.ssh-empty p { font-size: 16px; font-weight: 600; margin: 0 0 18px; color: var(--c-text); }
.ssh-empty button { padding: 11px 28px; border: 2px solid var(--c-text); border-radius: 100px; background: transparent; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .18s, color .18s; }
.ssh-empty button:hover { background: var(--c-text); color: #fff; }
.ssh-more-wrap { text-align: center; padding: 36px 0 8px; }
#ssh-more { display: inline-flex; align-items: center; gap: 8px; padding: 13px 36px; border: 2px solid var(--c-border); border-radius: 100px; background: #fff; font-size: 14px; font-weight: 700; color: var(--c-text); cursor: pointer; transition: border-color .18s, background .18s, color .18s; box-shadow: var(--c-shadow); }
#ssh-more[hidden] { display: none; }
#ssh-more:hover { border-color: var(--c-text); background: var(--c-text); color: #fff; }

.sl-term-desc { color: #444; line-height: 1.75; padding-bottom: 40px; }

/* ==========================================================================
   WEIGHT POPUP (old ssh-popup design, on a native dialog)
   ========================================================================== */

.ssh-popup-box {
	width: calc(100% - 32px); max-width: 360px; max-height: 90vh; overflow-y: auto;
	padding: 32px 22px 22px; border: 0; border-radius: 12px;
	background: #fff; color: var(--c-text); font-family: var(--sl-font);
	box-shadow: 0 8px 36px rgba(0, 0, 0, .16); direction: rtl; text-align: center;
}
.ssh-popup-box[open] { animation: sshPopIn .2s ease; }
.ssh-popup-box::backdrop { background: rgba(0, 0, 0, .45); }
@keyframes sshPopIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ssh-popup-box form { margin: 0; }
.ssh-popup-close { position: absolute; top: 8px; left: 10px; width: 40px; height: 40px; background: none; border: none; font-size: 26px; line-height: 1; color: #888; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.ssh-popup-close:hover { color: var(--c-text); }
#ssh-popup-img { width: 88px; height: 88px; border-radius: 10px; object-fit: cover; border: 1px solid var(--c-border); display: block; margin: 0 auto 14px; }
.ssh-popup-name { font-size: 16px; font-weight: 700; margin: 0 0 4px; line-height: 1.35; }
.ssh-popup-per-unit { margin: 0 0 18px; font-size: 13px; color: var(--c-muted); font-weight: 500; }
.ssh-weight-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 18px; }
.ssh-wbtn { width: 44px; height: 44px; border: 1.5px solid var(--c-border); border-radius: 8px; background: #fff; font-size: 20px; color: var(--c-text); cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; padding: 0; transition: border-color .15s, background .15s, color .15s; }
.ssh-wbtn:hover:not(:disabled) { border-color: var(--c-text); background: var(--c-text); color: #fff; }
.ssh-wbtn:disabled { opacity: .35; cursor: not-allowed; }
.ssh-winput-wrap { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--c-border); border-radius: 8px; padding: 10px 14px; background: var(--c-surface); flex: 1; max-width: 160px; justify-content: center; }
.ssh-winput { min-width: 0; text-align: center; font-size: 18px; font-weight: 700; }
.ssh-wunit { font-size: 12px; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.ssh-popup-total-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--c-border); padding: 14px 0 16px; font-size: 13px; color: var(--c-muted); font-weight: 500; }
.ssh-popup-total-row strong { font-size: 22px; font-weight: 800; color: var(--c-text); }
.ssh-popup-add-btn { width: 100%; min-height: 48px; padding: 13px; background: var(--c-accent); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .18s; }
.ssh-popup-add-btn:hover { background: var(--c-accent-d); }

/* Toast (bottom right, as before) */
.ssh-toast { position: fixed; bottom: 24px; right: 20px; z-index: 9999999; display: inline-flex; align-items: center; gap: 9px; max-width: calc(100vw - 40px); padding: 12px 18px; border-radius: 14px; background: #1c1c1c; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); opacity: 0; transform: translateY(14px); transition: opacity .28s, transform .28s; pointer-events: none; }
.ssh-toast.ssh-toast-show { opacity: 1; transform: none; }
.ssh-toast.is-err .ssh-toast-check { background: #c0392b; }
.ssh-toast-check { width: 22px; height: 22px; background: var(--c-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
@media (max-width: 576px) { .ssh-toast { bottom: 84px; right: 12px; } } /* Above the accessibility button */

/* ==========================================================================
   PRODUCT PAGE (old spp-* design)
   ========================================================================== */

.spp-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--c-border); height: 64px; display: flex; align-items: center; padding: 0 16px; gap: 12px; }
.spp-back { width: 44px; height: 44px; border: none; background: var(--c-surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c-text); flex-shrink: 0; transition: background .18s; text-decoration: none; }
.spp-back:hover { background: var(--c-border); }
.spp-breadcrumb { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-muted); overflow: hidden; min-width: 0; }
.spp-bc-item { color: var(--c-accent); white-space: nowrap; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.spp-bc-cat { overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.spp-bc-sep { color: #ccc; font-size: 16px; flex-shrink: 0; }
.spp-bc-current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-text); font-weight: 600; flex: 1; min-width: 0; }
@media (max-width: 640px) { .spp-bc-sep2, .spp-bc-current { display: none; } .spp-bc-cat { max-width: 110px; } }

.spp-cart { position: relative; flex-shrink: 0; }
.spp-cart-btn { border: none; background: var(--c-accent); border-radius: 100px; min-height: 44px; padding: 6px 16px; color: #fff; cursor: pointer; white-space: nowrap; transition: background .18s; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25; }
.spp-cart-btn:hover { background: var(--c-accent-d); }
.spp-cart-btn-label { font-size: 14px; font-weight: 600; }
.spp-cart-btn-total { font-size: 11px; font-weight: 500; opacity: .9; }
.spp-cart-btn-total:empty { display: none; }
.spp-cart-popup { position: absolute; top: calc(100% + 10px); left: 0; z-index: 10; min-width: 230px; padding: 20px; border-radius: 14px; background: #fff; box-shadow: 0 8px 32px rgba(0, 0, 0, .16); animation: sppPopupIn .18s ease; }
.spp-cart-popup[hidden] { display: none; }
@keyframes sppPopupIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.spp-cart-popup-title { font-size: 13px; font-weight: 700; color: var(--c-muted); margin-bottom: 6px; text-align: center; }
.spp-cart-popup-total { font-size: 18px; font-weight: 800; text-align: center; margin-bottom: 16px; min-height: 22px; }
.spp-cart-popup-btns { display: flex; flex-direction: column; gap: 10px; }
.spp-cart-popup-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .18s; }
.spp-cart-popup-btn-cart { background: var(--c-surface); color: var(--c-text); border: 1.5px solid var(--c-border); }
.spp-cart-popup-btn-cart:hover { background: var(--c-border); }
.spp-cart-popup-btn-checkout { background: var(--c-accent); color: #fff !important; }
.spp-cart-popup-btn-checkout:hover { background: var(--c-accent-d); }

.spp-content { max-width: 1100px; margin: 0 auto; padding: 0 0 60px; }
.spp-main { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 28px 20px 0; align-items: start; }
@media (max-width: 768px) { .spp-main { grid-template-columns: 1fr; gap: 20px; padding: 16px 14px 0; } }

.spp-gallery { position: sticky; top: 80px; min-width: 0; }
@media (max-width: 768px) { .spp-gallery { position: static; } }
.spp-img-main-wrap { position: relative; border-radius: var(--c-radius); overflow: hidden; background: var(--c-surface); aspect-ratio: 1; }
.spp-img-main { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
@media (hover: hover) { .spp-img-main-wrap:hover .spp-img-main { transform: scale(1.04); } }
.spp-img-badge { position: absolute; top: 12px; right: 12px; background: var(--c-text); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 20px; letter-spacing: .5px; }
.spp-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.spp-thumb { width: 56px; height: 56px; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .18s; background: var(--c-surface); flex-shrink: 0; }
.spp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spp-thumb.active { border-color: var(--c-accent); }

.spp-info { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.spp-name-row { display: flex; flex-direction: column; gap: 6px; }
.spp-name { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 0; }
@media (max-width: 480px) { .spp-name { font-size: 22px; } }
.spp-stock { font-size: 13px; font-weight: 600; }
.spp-stock.in { color: #1e8449; }
.spp-stock.out { color: #c0392b; }
.spp-price-row { font-size: 32px; font-weight: 900; color: var(--c-accent); line-height: 1; display: flex; align-items: baseline; gap: 6px; }
.spp-price-suffix { font-size: 14px; color: var(--c-muted); font-weight: 500; }

.spp-weight-section { background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: 12px; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.spp-weight-label { font-size: 13px; font-weight: 700; color: var(--c-muted); letter-spacing: .5px; }
.spp-weight-controls { display: flex; align-items: center; gap: 10px; }
.spp-wbtn { width: 44px; height: 44px; border: 1.5px solid var(--c-border); border-radius: 10px; background: #fff; font-size: 22px; color: var(--c-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .18s; flex-shrink: 0; line-height: 1; padding: 0; }
.spp-wbtn:hover:not(:disabled) { border-color: var(--c-text); background: var(--c-text); color: #fff; }
.spp-wbtn:disabled { opacity: .35; cursor: not-allowed; }
.spp-winput-wrap { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--c-border); border-radius: 10px; padding: 10px 16px; justify-content: center; }
.spp-winput { font-size: 22px; font-weight: 700; text-align: center; }
.spp-wunit { font-size: 14px; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.spp-weight-total { font-size: 15px; color: var(--c-muted); font-weight: 500; text-align: center; }
.spp-weight-total strong { font-size: 22px; font-weight: 800; color: var(--c-text); }

.spp-add-btn { width: 100%; min-height: 54px; padding: 15px; background: var(--c-accent); color: #fff; border: none; border-radius: 100px; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .18s, transform .15s; }
.spp-add-btn:hover:not(:disabled) { background: var(--c-accent-d); transform: translateY(-1px); }
.spp-add-btn:disabled { background: #ccc; color: #555; cursor: not-allowed; transform: none; }

.spp-desc-section { border-top: 1px solid var(--c-border); padding-top: 20px; }
.spp-desc-title { font-size: 14px; font-weight: 700; color: var(--c-muted); letter-spacing: .5px; margin: 0 0 12px; }
.spp-desc { font-size: 15px; line-height: 1.75; color: #444; }
.spp-desc p { margin: 0 0 10px; }
.spp-desc p:last-child { margin-bottom: 0; }

.spp-related-section { padding: 36px 20px 0; border-top: 1px solid var(--c-border); margin-top: 40px; }
@media (max-width: 768px) { .spp-related-section { padding: 28px 14px 0; margin-top: 28px; } }
.spp-related-header { display: flex; align-items: center; margin-bottom: 20px; }
.spp-related-title { font-size: 20px; font-weight: 800; margin: 0; position: relative; padding-right: 14px; }
.spp-related-title::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 20px; background: var(--c-accent); border-radius: 2px; }
.spp-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 481px) { .spp-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .spp-related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .spp-related-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }
.ssh-card--compact { border-radius: 10px; }
.ssh-card--compact .ssh-card-body { padding: 10px; }
.ssh-card--compact .ssh-card-name { font-size: 12px; }
.ssh-card--compact .ssh-card-price { font-size: 14px; }
.ssh-card--compact .ssh-card-btn { font-size: 12px; min-height: 36px; padding: 7px; border-radius: 6px; }

/* ==========================================================================
   FOOTER (same content as before)
   ========================================================================== */

.sl-footer { background: var(--sl-footer); color: #e3e2e2; font-size: 15px; }
.sl-footer a { color: #fff; }
.sl-footer__grid { display: grid; gap: 28px; padding-block: 40px; }
@media (min-width: 768px) { .sl-footer__grid { grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 32px; } }
.sl-footer__logo { width: 96px; height: 96px; object-fit: contain; margin-bottom: 12px; }
.sl-footer p { margin: 0 0 14px; line-height: 1.65; }
.sl-footer__h { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #fff; }
.sl-footer__links { list-style: none; margin: 0; padding: 0; }
.sl-footer__links a { display: inline-block; padding: 5px 0; color: #ffdede; text-decoration: none; }
.sl-footer__links a:hover, .sl-footer__map:hover, .sl-footer__club:hover { text-decoration: underline; }
.sl-footer__map, .sl-footer__club { display: inline-block; padding: 4px 0; color: var(--sl-cream) !important; }
.sl-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sl-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.sl-social a:hover { background: rgba(255, 255, 255, .2); }
.sl-nl { display: grid; gap: 8px; margin-bottom: 12px; }
.sl-nl input { height: 46px; padding: 0 14px; border: 1px solid #555; border-radius: 8px; background: #1c1c1c; color: #fff; }
.sl-nl input::placeholder { color: #a9a9a9; }
.sl-note { padding: 8px 12px; border-radius: 8px; }
.sl-note--ok { background: rgba(30, 125, 60, .25); }
.sl-note--err { background: rgba(179, 38, 30, .3); }
.sl-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 14px calc(14px + env(safe-area-inset-bottom)); font-size: 13px; color: #b8b8b8; text-align: center; }

/* Cookie notice */
.sl-cookie {
	position: fixed; z-index: 250; inset-inline: 12px; bottom: calc(84px + env(safe-area-inset-bottom));
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	max-width: 720px; margin-inline: auto; padding: 14px 16px; border-radius: 14px;
	background: var(--sl-footer); color: #eee; box-shadow: var(--c-shadow-h); font-size: 14px;
}
.sl-cookie[hidden] { display: none; }
.sl-cookie p { flex: 1 1 260px; margin: 0; line-height: 1.55; }
.sl-cookie a { color: var(--sl-cream); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}