:root {
	--spread-1: 0;
	--spread-2: 0;

	--wipe-y: 100%;
	--bg-wipe-progress: 0;

	--text-color: #ffffff;
	--gallery-scale: 1;
	--gallery-y: 0vh;
	--arrow-op: 0;
	--ui-y: 100%;

	--header-h: 76px;
}

* { box-sizing: border-box; }

body, html {
	margin: 0; padding: 0;
	font-family: 'Inter', 'Inter Fallback', sans-serif;
	background-color: #ffffff;
	color: #111;
}
/* Stop page-level sideways scroll WITHOUT turning html/body into scroll containers: `overflow-x:hidden` on both
   (what this used to be) makes body a scroll container, which breaks sticky/fixed behaviour on iOS Safari. */
body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

a { color: inherit; }

/* ================= HERO ================= */
.bg-wipe {
	position: absolute;
	bottom: 0; left: 0;
	width: 100vw; height: 100%;
	background-color: #ffffff;
	transform: translateY(var(--wipe-y));
	z-index: 15;
	will-change: transform;
}

.hero-section {
	height: 100vh; width: 100vw;
	display: flex; flex-direction: column;
	position: relative; overflow: hidden;
	background-color: #0d0d0d;
	color: var(--text-color);
	transition: color 0.2s;
}

/* ================= HEADER (single row) + DRAWER ================= */
.site-header {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	height: var(--header-h); padding: 0 4rem;
	position: fixed; top: calc(var(--sx-bar, 0px) + var(--promo-h, 0px)); left: 0; right: 0; width: 100%; z-index: 900;
	color: #fff; background: transparent;
	transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.site-header.is-light { background: #fff; color: #111; box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
/* Logged-in admins: --sx-bar = how much of the WP admin bar is still on screen (set by nav.js). The bar is fixed
   above 600px but scrolls away below it, so a hard-coded 32px/46px left a gap above the header on phones. */
body.admin-bar { --sx-bar: 32px; }
@media (max-width: 782px) { body.admin-bar { --sx-bar: 46px; } }
/* non-front pages: header is fixed, so reserve its height */
body:not(.home) { padding-top: calc(var(--header-h) + var(--promo-h, 0px)); }
/* Where sticky blocks stop under the fixed header: admin bar + announcement bar + header + a gap. Use this instead of hard-coding offsets. */
body { --sticky-top: calc(var(--sx-bar, 0px) + var(--promo-h, 0px) + var(--header-h) + 1.25rem); }
.site-header__actions { display: flex; align-items: center; gap: 6px; /* same as the gap between the cart icon and its number */ flex-shrink: 0; }

.contact-btn {
	background: transparent; color: inherit;
	border: 1px solid currentColor;
	padding: 8px 22px; border-radius: 30px; cursor: pointer;
	font: inherit; font-size: 0.9rem; text-decoration: none; line-height: 1.2;
	transition: opacity 0.2s;
}
.contact-btn:hover { opacity: 0.7; }

.shynx-cart { position: relative; display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; font-size: 0.85rem; }
.shynx-cart__count {
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.7rem; line-height: 1;
}

/* logo: both rendered, one shown depending on background */
/*
 * Logo: both files are normalized to the same 1520x830 canvas (artwork cropped to its bounds, same
 * wordmark width, same baseline; see assets/images/source/). They are stacked in one fixed-size box,
 * so swapping only changes opacity: no size, position or layout change.
 */
.site-logo { --logo-h: 56px; position: relative; display: block; flex: 0 0 auto; height: var(--logo-h); aspect-ratio: 1520 / 830; line-height: 0; }
.site-logo__img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; object-fit: fill; transition: opacity 0.25s ease; }
.site-logo__img--white { opacity: 1; }
.site-logo__img--black { opacity: 0; }
.site-header.is-light .site-logo__img--white { opacity: 0; }
.site-header.is-light .site-logo__img--black { opacity: 1; }

.menu-toggle {
	display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
	width: 44px; height: 44px; padding: 0; background: transparent; color: inherit;
	border: 0; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.menu-toggle__bar { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: opacity 0.2s; }
.menu-toggle:hover .menu-toggle__bar { opacity: 0.7; }
.menu-toggle:focus-visible, .nav-drawer a:focus-visible, .nav-drawer__close:focus-visible, .contact-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

html.drawer-open, html.drawer-open body { overflow: hidden; }

.nav-backdrop {
	position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.55);
	opacity: 0; transition: opacity 0.3s ease;
}
.nav-backdrop.is-open { opacity: 1; }

.nav-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001;
	width: min(380px, 86vw); background: #fff; color: #111;
	display: flex; flex-direction: column;
	overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	transform: translateX(100%); visibility: hidden;
	transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.35s;
	box-shadow: -10px 0 40px rgba(0,0,0,0.2);
}
.nav-drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.75rem; flex-shrink: 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.nav-drawer__logo { display: block; position: relative; height: 56px; aspect-ratio: 1520 / 830; flex: 0 0 auto; line-height: 0; }
.nav-drawer__logo-img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.nav-drawer__logo-img--white { display: none; }
.nav-drawer.is-dark { background: #0d0d0d; color: #fff; }
.nav-drawer.is-dark .nav-drawer__logo-img--black { display: none; }
.nav-drawer.is-dark .nav-drawer__logo-img--white { display: block; }
.nav-drawer__lang { margin-top: auto; display: flex; gap: 0.75rem; padding: 1.25rem 1.75rem calc(1.5rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(0,0,0,0.08); }
.lang-switch {
	flex: 1; text-align: center; padding: 0.7rem 0.5rem; min-height: 44px;
	border: 1px solid #111; border-radius: 30px; text-decoration: none; color: #111; font-size: 0.9rem;
}
.lang-switch.is-active { background: #111; color: #fff; }
.nav-drawer__close { width: 44px; height: 44px; background: transparent; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: inherit; }
.nav-drawer__nav { padding: 1rem 1.75rem 2rem; flex-shrink: 0; }
/* the WP admin bar (32px / 46px) is fixed above everything; keep the drawer fully below it */
body.admin-bar .nav-drawer { top: var(--sx-bar, 32px); }

.main-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.main-nav li { border-bottom: 1px solid rgba(0,0,0,0.08); }
.main-nav a {
	display: block; padding: 1.1rem 0; text-decoration: none; color: inherit;
	font-size: 1rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
	transition: opacity 0.2s, padding-left 0.2s;
}
.main-nav a:hover { opacity: 0.6; padding-left: 6px; }

.intro-text-left, .intro-text-right {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
}
.intro-text-left { left: 4rem; max-width: 250px; font-size: 0.9rem; line-height: 1.6; opacity: 0.7; }
.intro-text-right { right: 4rem; text-align: right; }
.intro-text-right h1 { font-family: 'Playfair Display', serif; font-size: 2.8rem; margin: 0; }

/* ================= GALLERY 3D ================= */
.gallery-wrapper {
	position: absolute; top: 50%; left: 50%;
	width: 100%; height: 100%;
	transform: translate(-50%, -50%);
	perspective: 1100px;
	z-index: 20;
	pointer-events: none;
}

.gallery-container {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	transform-style: preserve-3d;
	transform: translateY(var(--gallery-y)) scale(var(--gallery-scale));
}

.card {
	position: absolute; top: 50%; left: 50%;
	width: 260px; height: 380px;
	margin-top: -190px; margin-left: -130px;
	border-radius: 20px;
	pointer-events: auto;

	--x1: 0vw; --x2: 0vw;
	--r1: 0deg; --r2: 0deg;
	--ds1: 0; --ds2: 0;
	--tz1: 0px; --tz2: 0px;
	--z-base: 0px;
	--z: 1; --op: 1;

	transform:
		translateX(calc(var(--x1) * var(--spread-1) + var(--x2) * var(--spread-2)))
		translateZ(calc(var(--z-base) + var(--tz1) * var(--spread-1) + var(--tz2) * var(--spread-2)))
		rotateY(calc(var(--r1) * var(--spread-1) + var(--r2) * var(--spread-2)))
		scale(calc(1 + var(--ds1) * var(--spread-1) + var(--ds2) * var(--spread-2)));

	z-index: var(--z);
	opacity: var(--op);

	transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
	will-change: transform;
}

.pos-0  { --x1: 0vw;   --x2: 0vw;   --r1: 0deg;   --r2: 0deg;   --ds1: 0;     --ds2: 0;     --tz1: 0px;     --tz2: 0px;   --z-base: 0px;  --z: 5; --op: 1; }
.pos-m1 { --x1: -20vw; --x2: 0vw;   --r1: 25deg;  --r2: 0deg;   --ds1: -0.15; --ds2: 0;     --tz1: -150px;  --tz2: 0px;   --z-base: -1px; --z: 4; --op: 1; }
.pos-p1 { --x1: 20vw;  --x2: 0vw;   --r1: -25deg; --r2: 0deg;   --ds1: -0.15; --ds2: 0;     --tz1: -150px;  --tz2: 0px;   --z-base: -1px; --z: 4; --op: 1; }
.pos-m2 { --x1: -20vw; --x2: -18vw; --r1: 25deg;  --r2: 15deg;  --ds1: -0.15; --ds2: -0.15; --tz1: -150px;  --tz2: -50px; --z-base: -2px; --z: 3; --op: 1; }
.pos-p2 { --x1: 20vw;  --x2: 18vw;  --r1: -25deg; --r2: -15deg; --ds1: -0.15; --ds2: -0.15; --tz1: -150px;  --tz2: -50px; --z-base: -2px; --z: 3; --op: 1; }
.pos-hide-left  { --x1: -20vw; --x2: -35vw; --r1: 25deg;  --r2: 30deg;  --ds1: -0.15; --ds2: -0.35; --tz1: -150px; --tz2: -100px; --z-base: -3px; --z: 1; --op: 0; pointer-events: none; }
.pos-hide-right { --x1: 20vw;  --x2: 35vw;  --r1: -25deg; --r2: -30deg; --ds1: -0.15; --ds2: -0.35; --tz1: -150px; --tz2: -100px; --z-base: -3px; --z: 1; --op: 0; pointer-events: none; }

.card-bg {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background-color: #ffffff;
	border-radius: 20px;
}

.card img {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	object-fit: contain; z-index: 2; transform: scale(1);
	filter: drop-shadow(0 15px 25px rgba(0,0,0, calc(0.4 * var(--bg-wipe-progress))));
}

.card-cta {
	position: absolute; z-index: 6; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap;
	background: #111; color: #fff; font-size: 0.78rem; font-weight: 500; text-decoration: none;
	padding: 8px 16px; border-radius: 30px; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.card.pos-0 .card-cta { opacity: 1; pointer-events: auto; }
.card-cta:focus-visible { outline: 2px solid #4d9bff; outline-offset: 2px; }

/* ================= UI ELEMENTS ================= */
.nav-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: #000; color: #fff; border: 1px solid rgba(255,255,255,0.2);
	width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem;
	cursor: pointer; z-index: 50; display: flex; align-items: center; justify-content: center;
	opacity: var(--arrow-op);
	transition: background 0.3s;
}
.nav-arrow:hover { background: #333; }
.left-arrow { left: 4rem; }
.right-arrow { right: 4rem; }

.bottom-strip {
	position: absolute; bottom: 0; left: 0; width: 100vw; height: 180px;
	overflow: hidden; z-index: 40; background: #fff; color: #000;
	box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
	transform: translateY(var(--ui-y));
}

.strip-item {
	position: absolute;
	top: 0; left: 50%;
	margin-left: -80px; width: 160px; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 15px; box-sizing: border-box; cursor: pointer;
	opacity: 0;
}

.strip-item.active { transform: scale(1.05); }
a.strip-item { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; user-select: none; }
a.strip-item:hover span { text-decoration: underline; }
a.strip-item:hover img { transform: scale(1.04); }
a.strip-item img { transition: transform 0.25s; }
.strip-item:focus-visible { outline: 2px solid #000; outline-offset: -4px; border-radius: 14px; }
/* contain: show the full product, never crop */
.strip-item img { width: 100%; height: 90px; object-fit: contain; margin-bottom: 10px; border-radius: 8px; }
.strip-item span { color: #000; font-size: 0.8rem; font-weight: 500; text-align: center; line-height: 1.2; }

/* ================= SHOP BY CATEGORY ================= */
.shop-categories {
	position: relative; z-index: 1;
	background: #fff; color: #111;
	padding: 5rem 4rem 6rem;
}
.shop-categories__title {
	font-family: 'Playfair Display', serif; font-weight: 700;
	font-size: 2.4rem; text-align: center; margin: 0 0 3rem;
}
.shop-categories__grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem; max-width: 1200px; margin: 0 auto;
}
.category-card {
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	background: #f4f1ec; border-radius: 28px; overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s;
}
.category-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,0.12); }
.category-card__media {
	--pad: 1.5rem;
	display: block; position: relative; aspect-ratio: 4 / 3.4;
}
.category-card__media img {
	position: absolute; inset: var(--pad);
	width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad));
	object-fit: contain; display: block;
	transition: transform 0.4s;
}
.category-card:hover .category-card__media img { transform: scale(1.05); }
.category-card__label {
	padding: 1rem 1.25rem 1.5rem; text-align: center;
	font-size: 1rem; font-weight: 500; letter-spacing: 0.02em;
}

.site-main { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
	.site-header { padding: 0 2rem; }
	.intro-text-left { display: none; }
	.intro-text-right { right: 2rem; }
	.nav-arrow.left-arrow { left: 1.5rem; }
	.nav-arrow.right-arrow { right: 1.5rem; }
	.shop-categories { padding: 4rem 2rem 5rem; }
}

@media (max-width: 768px) {
	:root { --header-h: 64px; }
	.site-header { padding: 0 1rem; gap: 0.5rem; }
	.site-header__actions { gap: 6px; }
	.contact-btn { padding: 6px 14px; font-size: 0.8rem; }
	.site-logo { --logo-h: 44px; }

	.intro-text-right { right: 50%; top: 24%; transform: translate(50%, -50%); width: 90%; text-align: center; }
	.intro-text-right h1 { font-size: 1.8rem; }

	.gallery-wrapper { top: 60%; }
	.card { width: 160px; height: 240px; margin-top: -120px; margin-left: -80px; }

	.bottom-strip { height: 140px; }
	.strip-item { width: 120px; margin-left: -60px; padding: 10px; }
	.strip-item img { height: 70px; }
	.strip-item span { font-size: 0.7rem; }

	.nav-arrow { width: 40px; height: 40px; font-size: 1.2rem; }
	.nav-arrow.left-arrow { left: 0.5rem; }
	.nav-arrow.right-arrow { right: 0.5rem; }

	.pos-m1 { --x1: -30vw; --x2: 0vw; } .pos-p1 { --x1: 30vw; --x2: 0vw; }
	.pos-m2 { --x1: -30vw; --x2: -25vw; } .pos-p2 { --x1: 30vw; --x2: 25vw; }
	.pos-hide-left { --x1: -30vw; --x2: -45vw; } .pos-hide-right { --x1: 30vw; --x2: 45vw; }

	.shop-categories { padding: 3rem 1rem 4rem; }
	.shop-categories__title { font-size: 1.8rem; margin-bottom: 2rem; }
	.shop-categories__grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
	.category-card { border-radius: 20px; }
	.category-card__media { --pad: 0.9rem; }
	.category-card__label { font-size: 0.85rem; padding: 0.75rem 0.5rem 1.1rem; }
}

@media (max-width: 400px) {
	.site-logo { --logo-h: 38px; }
	.contact-btn { padding: 5px 10px; font-size: 0.72rem; }
	.shynx-cart { font-size: 0.72rem; gap: 3px; }
	.menu-toggle { width: 40px; }
}

/* ================= NAVBAR ACCOUNT ICON / AVATAR ================= */
.account-link {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; flex: 0 0 32px; aspect-ratio: 1; border-radius: 50%; color: inherit; text-decoration: none;
}
.account-link__avatar { width: 32px; height: 32px; min-width: 32px; aspect-ratio: 1; flex: none; border-radius: 50%; object-fit: cover; object-position: center; display: block; box-shadow: 0 0 0 1px rgba(128,128,128,0.35); }
.account-link__icon { display: block; }
.account-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* hover tooltip (mouse only); touch users just tap through to the account page */
@media (hover: hover) and (pointer: fine) {
	.account-link::after {
		content: attr(data-tooltip); position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 1200;
		background: #111; color: #fff; font-size: 0.78rem; line-height: 1.2; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
		max-width: 240px; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 0.15s, transform 0.15s;
	}
	.account-link:hover::after, .account-link:focus-visible::after { opacity: 1; transform: none; }
}

@media (max-width: 400px) { .site-header__actions { gap: 3px; } .account-link { width: 28px; height: 28px; flex-basis: 28px; } .account-link__avatar { width: 28px; height: 28px; min-width: 28px; } .account-link__icon { width: 22px; height: 22px; } }

/* ================= FIXED LANGUAGE SWITCHER ================= */
.sx-dock { position: sticky; bottom: 0; height: 0; z-index: 950; pointer-events: none; }
.sx-dock > * { pointer-events: auto; }
.lang-switcher { position: absolute; bottom: 14px; inset-inline-start: 14px; font-size: 0.8rem; line-height: 1; }
.lang-switcher__btn {
	display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 0.85rem;
	background: #fff; color: #111; border: 1px solid rgba(0,0,0,0.18); border-radius: 10px; cursor: pointer; font: inherit; font-weight: 500;
	box-shadow: 0 6px 20px rgba(0,0,0,0.14); white-space: nowrap;
}
.lang-switcher__btn:hover { border-color: #111; }
.lang-switcher__btn:focus-visible, .lang-switcher__opt:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
.lang-switcher__btn strong { font-weight: 700; letter-spacing: 0.04em; }
.lang-switcher__chev { transition: transform 0.2s; margin-inline-start: 0.15rem; }
.lang-switcher.is-open .lang-switcher__chev { transform: rotate(180deg); }
.lang-switcher__menu {
	position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; min-width: 100%; margin: 0; padding: 6px; list-style: none;
	background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,0.2);
}
.lang-switcher__menu[hidden] { display: none; }
.lang-switcher__opt {
	display: flex; align-items: center; gap: 0.65rem; min-height: 44px; padding: 0 0.8rem; border-radius: 8px;
	color: #111; text-decoration: none; font-size: 0.9rem; white-space: nowrap;
}
.lang-switcher__opt:hover { background: #f4f1ec; }
.lang-switcher__opt.is-active { background: #111; color: #fff; font-weight: 600; }
.lang-switcher__radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; flex: 0 0 16px; position: relative; }
.lang-switcher__opt.is-active .lang-switcher__radio::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: currentColor; }
[dir="rtl"] .lang-switcher__opt { direction: rtl; }
@media (max-width: 600px) {
	.lang-switcher { bottom: 10px; inset-inline-start: 10px; font-size: 0.74rem; transition: transform 0.25s ease, opacity 0.2s ease; }
	/* Compact on phones: globe + code + chevron (~70px) instead of a ~195px bar across the product titles; the full name stays for screen readers (title + aria). */
	.lang-switcher__btn { min-height: 36px; padding: 0 0.6rem; gap: 0.35rem; }
	.lang-switcher__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	/* While the visitor scrolls down through products the control slides out of the way; it returns on scroll up, when scrolling pauses, or when it is open/focused. */
	.lang-switcher.is-tucked:not(.is-open):not(:focus-within) { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
}
/* keep the last page content clear of the floating control */
body { padding-bottom: 0; }
.site-main { padding-bottom: max(4rem, 4.5rem); }

/* Hero image placement set in the dashboard (only applied to images that were adjusted). */
.card--placed { overflow: hidden; }
.strip-thumb { width: 100%; height: 90px; margin-bottom: 10px; border-radius: 8px; overflow: hidden; }
.strip-thumb img { height: 100%; margin-bottom: 0; }
@media (max-width: 768px) { .strip-thumb { height: 70px; } }

/* ================= HERO: swipe + editor mode chips ================= */
.hero-section { touch-action: pan-y; }
.sx-crop-chip {
	position: absolute; z-index: 8; inset-inline: 0; margin-inline: auto; top: -16px; width: max-content; display: none; align-items: center; gap: 6px;
	padding: 6px 12px; border: 0; border-radius: 999px; background: #111; color: #fff; font: 600 12px/1 'Inter', 'Inter Fallback', sans-serif; cursor: pointer;
	box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.sx-crop-chip:hover { background: #333; } .sx-crop-chip:focus-visible { outline: 2px solid #4d9bff; outline-offset: 2px; }
.card.pos-0 .sx-crop-chip { display: inline-flex; }
.strip-item .sx-crop-chip { top: 2px; z-index: 3; padding: 4px 9px; font-size: 11px; }
.strip-item[data-diff="0"] .sx-crop-chip { display: inline-flex; }
.sx-crop-chip span { color: #fff; font: inherit; }
.strip-item .sx-crop-chip { top: 6px; }
.card--placed .sx-crop-chip { top: 10px; }

/* ================= password eye ================= */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-inline-end: 48px; }
.pw-eye { position: absolute; inset-block: 0; inset-inline-end: 4px; width: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: #555; border-radius: 12px; }
.pw-eye:hover { color: #111; }
.pw-eye:focus-visible { outline: 2px solid #0b57d0; outline-offset: -2px; }
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; } /* hide the browser's own eye so only ours shows */
/* WooCommerce adds its own show-password button to every password field; ours (.pw-eye) is the only one, so a field never shows two eyes. */
.password-input > .show-password-input, .pw-wrap > .show-password-input { display: none !important; }

/* Owner-uploaded logos can have any aspect ratio: keep them undistorted (the default logos keep the fixed box above). */
.site-logo.is-custom { display: grid; aspect-ratio: auto; width: auto; max-width: min(300px, 46vw); }
.site-logo.is-custom .site-logo__img { position: static; grid-area: 1 / 1; width: auto; height: var(--logo-h); max-width: 100%; object-fit: contain; object-position: left center; }
[dir="rtl"] .site-logo.is-custom .site-logo__img, [dir="rtl"] .nav-drawer__logo.is-custom .nav-drawer__logo-img { object-position: right center; }
.nav-drawer__logo.is-custom { display: grid; aspect-ratio: auto; width: auto; max-width: 200px; }
.nav-drawer__logo.is-custom .nav-drawer__logo-img { position: static; grid-area: 1 / 1; width: auto; height: 56px; max-width: 100%; object-fit: contain; object-position: left center; }

/* Logged in without a photo: a black circle with the customer's initials (first + last name), same 32px box as the photo */
.account-link__initials {
	width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: #111; color: #fff; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase;
	box-shadow: 0 0 0 1px rgba(128,128,128,0.35); user-select: none;
}
@media (max-width: 400px) { .account-link__initials { width: 28px; height: 28px; font-size: 0.72rem; } }

/* ================= ORDER UPDATE COUNTER (navbar avatar, menu, account menu) ================= */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 0.5rem; border-radius: 9px; background: #c8102e; color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 1; letter-spacing: 0; vertical-align: middle; }
.nav-badge[hidden] { display: none; }
.nav-badge--avatar { position: absolute; top: -3px; inset-inline-end: -3px; margin: 0; min-width: 17px; height: 17px; font-size: 0.62rem; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.site-header:not(.is-light) .nav-badge--avatar { box-shadow: 0 0 0 2px #111; }

.menu-toggle { margin-inline-start: 0.5rem; }

/* header actions: one equal visible gap (cart icon | number | photo | menu icon) */
.site-header__actions { gap: 10px; }
.shynx-cart { gap: 10px; }
.menu-toggle { margin-inline-start: 0; width: 28px; }
@media (max-width: 400px) { .site-header__actions, .shynx-cart { gap: 8px; } }