/* WooSync shared strips: the category tile scroller and the brand logo
   marquee used by BOTH the public store (/store/) and client portals.
   Tokens carry literal fallbacks because the portal does not load shop.css. */
.ws-strips {
	--ws-red: #FF2E3E;
	--ws-ink: #0C0D0C;
	--ws-paper: #FBF9F6;
	--ws-line: #E4E0D9;
	--ws-mut: #6B665D;
}
.ws-strips button.wshop-cat,
.ws-strips button.wshop-brandmark {
	font: inherit;
	cursor: pointer;
	padding: 0;
	text-align: left;
	background: #fff;
	color: inherit;
}
.ws-strips button.wshop-brandmark { background: none; border: 0; }
.ws-strips .wshop-brandmark { display: inline-flex; align-items: center; gap: 8px; }
.ws-strips .wshop-brandmark img { height: 30px; max-width: 110px; width: auto; object-fit: contain; }

/* ==================== category strip ====================
   One horizontally scrolling row of large cards -- snap scrolling, bold
   left-aligned names, gradient scrim for legibility on any photo. */
.wshop-cats-wrap {
	position: relative;
	margin: 0 0 26px;
}
.wshop-cats {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 2px 14px 10px 22px;
	scrollbar-width: none;
}
.wshop-cats::-webkit-scrollbar {
	display: none;
}
.wshop-scroll {
	position: absolute;
	top: 50%;
	transform: translateY(-60%);
	z-index: 3;
	width: 42px;
	height: 42px;
	border: 0 !important;
	border-radius: 50%;
	background: var(--ws-ink, #0C0D0C) !important;
	color: #fff !important;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(12, 13, 12, .25);
	transition: background .2s ease, transform .2s ease;
}
.wshop-scroll:hover {
	background: #2A2B2A !important;
	transform: translateY(-60%) scale(1.06);
}
.wshop-scroll.-prev { left: -8px; }
.wshop-scroll.-next { right: -8px; }
.wshop-cat {
	position: relative;
	flex: 0 0 250px;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ws-line, #E4E0D9);
	text-decoration: none !important;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.wshop-cat:hover {
	border-color: var(--ws-ink, #0C0D0C);
	box-shadow: 0 10px 24px rgba(12, 13, 12, .1);
}
.wshop-cat-img {
	position: absolute;
	inset: 0 0 34px 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-origin: content-box;
	padding: 10px;
	transition: transform 1.2s ease;
}
.wshop-cat:hover .wshop-cat-img {
	transform: scale(1.06);
}
.wshop-cat-name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: var(--ws-ink, #0C0D0C);
	color: #fff !important;
	font-weight: 800;
	font-size: .98rem;
	line-height: 34px;
	height: 34px;
	padding: 0 14px;
	letter-spacing: -.01em;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wshop-cat-count {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	background: var(--ws-accent2, var(--ws-red, #FF2E3E));
	color: var(--ws-accent2-ink, #fff);
	font-size: .72rem;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 100px;
}
.wshop-cat.-active {
	outline: 3px solid var(--ws-red, #FF2E3E);
	outline-offset: -3px;
}
@media (max-width: 900px) {
	.wshop-cat { flex-basis: 200px; }
}

/* ==================== brand marquee ====================
   Every brand as a black wordmark chip, endless slow scroll, paused on
   hover; each mark toggles the brand filter. Content is doubled in the
   markup so the -50% keyframe loops seamlessly. */
.wshop-brands {
	background: #fff;
	overflow: hidden;
	margin: 0 0 22px;
	padding: 10px 0;
	border-top: 1px solid var(--ws-line, #E4E0D9);
	border-bottom: 1px solid var(--ws-line, #E4E0D9);
}
.wshop-brands-track {
	display: inline-flex;
	align-items: center;
	gap: 34px;
	white-space: nowrap;
	animation: wshopBrands 160s linear infinite;
	will-change: transform;
}
.wshop-brands:hover .wshop-brands-track,
.wshop-brands:focus-within .wshop-brands-track {
	animation-play-state: paused;
}
@keyframes wshopBrands {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.wshop-brandmark {
	font-family: 'Sora', ui-sans-serif, sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ws-ink, #0C0D0C) !important;
	text-decoration: none !important;
	opacity: .82;
	transition: opacity .2s ease;
}
.wshop-brandmark:nth-child(3n) { font-weight: 600; letter-spacing: .12em; }
.wshop-brandmark:nth-child(4n) { font-style: italic; }
.wshop-brandmark:hover { opacity: 1; }
.wshop-brandmark.-on {
	color: var(--ws-red, #FF2E3E) !important;
	opacity: 1;
	border-bottom: 3px solid var(--ws-red, #FF2E3E);
}
@media (prefers-reduced-motion: reduce) {
	.wshop-brands { overflow-x: auto; }
	.wshop-brands-track { animation: none; }
}


.wshop-brandmark img {
	height: 30px;
	width: auto;
	max-width: 110px;
	object-fit: contain;
	opacity: .95;
}
.wshop-brandmark.-on img { opacity: 1; }
.wshop-brandmark small {
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ws-mut, #6B665D);
	line-height: 1;
}

/* ==================== menu band (store + client portal) ====================
   Headings from one supplier-neutral map, in the brand colour: --client on a
   portal, the store colour (or Signal Red) on /store/. */
.ws-band { position: relative; display: flex; align-items: stretch; height: 46px; padding: 0 14px; margin: 0 0 18px; background: var(--client, var(--ws-red, #FF2E3E)); color: var(--client-ink, #fff); font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; border-radius: 8px; }
.woosync-portal .ws-band { border-radius: 0; margin: 0; }
/* WooCommerce pages: full-bleed strip flush under the site header. */
.ws-band-wrap { padding: 0; margin: 0 0 28px; }
.ws-band-wrap .ws-band { margin: 0; border-radius: 0; padding: 0 22px; }
.ws-band-wrap .ws-mega { border-radius: 0; border-left: 0; border-right: 0; }
.ws-band-scroll { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ws-band-scroll::-webkit-scrollbar { display: none; }
.ws-band.is-tight .ws-band-scroll .n { display: none; }
.ws-band.is-tight .ws-band-item { padding: 0 11px; font-size: 13px; }
.ws-band.is-scroll .ws-band-pin .n { display: none; }
.ws-band.is-scroll .ws-band-scroll { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent); }
.ws-band-pin { display: flex; flex: none; }
.ws-band .ws-band-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; background: none; color: inherit !important; font: inherit; font-weight: 700; font-size: 13.5px; letter-spacing: .01em; white-space: nowrap; cursor: pointer; opacity: .92; text-decoration: none !important; background-image: none !important; }
.ws-band .ws-band-item:hover, .ws-band .ws-band-item:focus-visible, .ws-band .ws-band-item.is-open, .ws-band .ws-band-item.is-on { opacity: 1; background: rgba(0,0,0,.14); }
.ws-band .ws-band-item:focus-visible { outline: 2px solid var(--client-ink, #fff); outline-offset: -4px; }
.ws-band-item .n { font-size: 11px; font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; }
.ws-band-item .caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
.ws-band-item.is-sale::before, .ws-band-item.is-clearance::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--client-ink, #fff); opacity: .9; }
.ws-mega { position: absolute; left: 0; right: 0; top: 46px; z-index: 60; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 22px; padding: 20px 26px 22px; background: #fff; color: #0C0D0C; border: 1px solid var(--ws-line, #E4E0D9); border-top: 0; border-radius: 0 0 8px 8px; box-shadow: 0 24px 40px rgba(12,13,12,.14); text-align: left; }
.woosync-portal .ws-mega { border-radius: 0; border-left: 0; border-right: 0; }
.ws-mega[hidden] { display: none; }
.ws-mega h3, .ws-mega h4 { margin: 0 0 8px; font-family: 'Sora', ui-sans-serif, sans-serif; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.ws-mega h3 { font-size: 16px; display: flex; gap: 10px; align-items: baseline; }
.ws-mega h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ws-mut, #6B665D); }
.ws-mega .n { font-size: 11px; color: var(--ws-mut, #6B665D); font-weight: 600; font-variant-numeric: tabular-nums; }
.ws-mega-lead { display: flex; flex-direction: column; gap: 10px; padding-right: 22px; border-right: 1px solid var(--ws-line, #E4E0D9); }
.ws-mega-lead p { margin: 0; font-size: 13px; color: var(--ws-mut, #6B665D); line-height: 1.5; }
.ws-mega .ws-mega-cta { align-self: flex-start; background: var(--client, var(--ws-red, #FF2E3E)) !important; color: var(--client-ink, #fff) !important; border: 0; border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none !important; background-image: none !important; }
.ws-mega .ws-mega-cta:hover { background: var(--client-hover, #D91F2D) !important; }
.ws-mega ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ws-mega .ws-mega-link { display: inline-flex; gap: 8px; align-items: baseline; border: 0; background: none !important; padding: 2px 0; font: inherit; font-size: 13.5px; color: #2A2B2A !important; cursor: pointer; text-align: left; text-decoration: none !important; }
.ws-mega .ws-mega-link:hover, .ws-mega .ws-mega-link:focus-visible, .ws-mega .ws-mega-link.is-on { color: var(--client, var(--ws-red, #FF2E3E)) !important; outline: none; text-decoration: underline !important; }
@media (max-width: 860px) { .ws-mega { grid-template-columns: 1fr 1fr; padding: 16px; } .ws-mega-lead { grid-column: 1 / -1; border-right: 0; padding-right: 0; } }
@media (max-width: 560px) { .ws-mega { grid-template-columns: 1fr; } .ws-band .ws-band-item { padding: 0 10px; font-size: 13px; } }