/*!
 * SOULSHORE Luxe - design-system layer (2026-11 launch pass).
 * Loaded after theme.css. Plain CSS, no build step: this file is both the source and the deployed asset.
 *   1. Global tokens  - defaults are the accepted palette; Customizer > SOULSHORE - Global Style > Global Colors overrides them inline.
 *   2. Shared parts   - focus ring, buttons, sheets (dialog) used by the new components.
 *   3. Contact        - support panel used by the Contact page and the contact sheet.
 *   4. Care and legal - one calm reading layout for every care / policy page.
 */

/* 1. Global tokens */
:root {
	--sl-g-canvas: #FAFAF8;
	--sl-g-surface: #FFFFFF;
	--sl-g-surface-2: #F4F1EE;
	--sl-g-text: #211E1A;
	--sl-g-text-2: #756D67;
	--sl-g-border: #E4DCD2;
	--sl-g-action: #211E1A;
	--sl-g-action-text: #FFFDF9;
	--sl-g-accent: #2F6F68;
	--sl-g-link: #2B241F;
	--sl-g-focus: #2F6F68;
	--sl-g-action-hover: #3A342E;
	--sl-g-accent-soft: #EDF3F2;
	--sl-r-sm: 6px;
	--sl-r-md: 10px;
	--sl-r-lg: 14px;
	--sl-shadow-pop: 0 18px 48px rgba(33, 30, 26, 0.16), 0 2px 8px rgba(33, 30, 26, 0.06);
	--sl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--sl-safe-bottom: env(safe-area-inset-bottom, 0px);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--sl-g-action-hover: color-mix(in srgb, var(--sl-g-action) 84%, #FFFFFF);
		--sl-g-accent-soft: color-mix(in srgb, var(--sl-g-accent) 9%, var(--sl-g-surface));
	}
}

/* 2. Shared parts */
.sl-sheet, .sl-sheet *, .sl-support, .sl-support *, .sl-ov, .sl-ov *, .sl-track, .sl-track *, .sl-credit, .sl-credit * { box-sizing: border-box; }
.sl-sheet a:focus-visible,
.sl-sheet button:focus-visible,
.sl-sheet input:focus-visible,
.sl-support a:focus-visible,
.sl-btn:focus-visible {
	outline: 2px solid var(--sl-g-focus);
	outline-offset: 2px;
}
.sl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 20px;
	border: 1px solid var(--sl-g-action);
	border-radius: var(--sl-r-sm);
	background: var(--sl-g-action);
	color: var(--sl-g-action-text);
	font: 600 12px/1.2 var(--sl-font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
	-webkit-tap-highlight-color: transparent;
}
.sl-btn:hover { background: var(--sl-g-action-hover); border-color: var(--sl-g-action-hover); color: var(--sl-g-action-text); }
.sl-btn--ghost { background: transparent; color: var(--sl-g-action); }
.sl-btn--ghost:hover { background: var(--sl-g-surface-2); color: var(--sl-g-action); border-color: var(--sl-g-action); }
.sl-btn[disabled], .sl-btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }

/* Sheets: one accessible dialog pattern (contact card, sign-in card). They are compact FLOATING cards on every device,
   centred on the VISUAL viewport: sl-system.js keeps --sl-vvh / --sl-vvt current as the browser bars slide away, the
   keyboard opens or the phone rotates, so a card never sits on the screen edge and no strip of page shows beneath it. */
html.sl-overlay-lock, html.sl-sheet-open { overflow: hidden; overscroll-behavior: none; }
html.sl-overlay-lock body { overflow: hidden; }
@supports not (height: 100dvh) { :root { --sl-vvh: 100vh; } }
.sl-sheet {
	position: fixed;
	inset: auto;
	left: 50%;
	top: calc(var(--sl-vvt, 0px) + (var(--sl-vvh, 100dvh) / 2));
	margin: 0;
	width: min(420px, calc(100% - 32px));
	max-width: none;
	height: auto;
	max-height: calc(var(--sl-vvh, 100dvh) - 32px);
	padding: 0;
	border: 1px solid var(--sl-g-border);
	border-radius: var(--sl-r-lg);
	background: var(--sl-g-surface);
	color: var(--sl-g-text);
	box-shadow: var(--sl-shadow-pop);
	overflow: auto;
	overscroll-behavior: contain;
	transform: translate(-50%, -50%);
}
.sl-contact-sheet { width: min(380px, calc(100% - 32px)); }
.sl-sheet::backdrop { background: rgba(33, 30, 26, 0.38); }
@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
	.sl-sheet::backdrop {
		background: rgba(33, 30, 26, 0.24);
		-webkit-backdrop-filter: blur(6px) saturate(105%);
		backdrop-filter: blur(6px) saturate(105%);
	}
}
.sl-sheet[open] { animation: sl-sheet-in 200ms var(--sl-ease-out); }
@keyframes sl-sheet-in { from { opacity: 0; transform: translate(-50%, -48%) scale(0.985); } to { opacity: 1; transform: translate(-50%, -50%); } }
.sl-sheet__panel { padding: 22px 22px 20px; }
.sl-sheet__head { position: relative; padding-right: 44px; margin-bottom: 16px; }
.sl-sheet__eyebrow { margin: 0 0 6px; color: var(--sl-g-text-2); font: 500 11px/1.3 var(--sl-font-sans); letter-spacing: 0.2em; text-transform: uppercase; }
.sl-sheet__title { margin: 0; color: var(--sl-g-text); font: 400 clamp(24px, 6vw, 28px)/1.1 var(--sl-font-serif); letter-spacing: -0.01em; }
.sl-sheet__sub { margin: 8px 0 0; color: var(--sl-g-text-2); font-size: 14px; line-height: 1.5; }
.sl-sheet__close {
	position: absolute; top: -6px; right: -6px;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: transparent; color: var(--sl-g-text);
	cursor: pointer;
}
.sl-sheet__close:hover { background: var(--sl-g-surface-2); }
.sl-sheet__foot { margin: 16px 0 0; font-size: 13px; color: var(--sl-g-text-2); }
.sl-sheet__foot a { color: var(--sl-g-link); text-underline-offset: 3px; }
@media (max-width: 600px) {
	.sl-sheet__panel { padding: 18px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { .sl-sheet[open] { animation: none; } }
/* 3. Contact: one support panel for the Contact page and the contact sheet */
.sl-support { display: grid; gap: 18px; }
.sl-support__channels { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sl-support__link {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	padding: 12px 14px 12px 12px;
	border: 1px solid var(--sl-g-border);
	border-radius: var(--sl-r-md);
	background: var(--sl-g-surface);
	color: var(--sl-g-text);
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease;
	-webkit-tap-highlight-color: transparent;
}
.sl-support__link:hover { border-color: var(--sl-g-accent); }
.sl-support__link:active { background: var(--sl-g-surface-2); }
.sl-support__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sl-g-accent-soft); color: var(--sl-g-accent); }
.sl-support__icon svg { width: 20px; height: 20px; }
.sl-support__text { min-width: 0; }
.sl-support__label { display: block; margin-bottom: 2px; color: var(--sl-g-text-2); font: 500 11px/1.3 var(--sl-font-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.sl-support__value { display: block; color: var(--sl-g-text); font: 500 15px/1.35 var(--sl-font-sans); overflow-wrap: anywhere; }
.sl-support__action {
	padding: 9px 12px;
	border-radius: var(--sl-r-sm);
	background: var(--sl-g-action);
	color: var(--sl-g-action-text);
	font: 600 11px/1.2 var(--sl-font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.sl-support__link:hover .sl-support__action { background: var(--sl-g-action-hover); }
.sl-support__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 24px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--sl-g-border); }
.sl-support__meta dt { color: var(--sl-g-text-2); font: 500 11px/1.3 var(--sl-font-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.sl-support__meta dd { margin: 4px 0 0; color: var(--sl-g-text); font-size: 15px; line-height: 1.45; }
.sl-support__follow { margin: 0; color: var(--sl-g-text-2); font-size: 14px; }
.sl-support__follow a { color: var(--sl-g-link); text-underline-offset: 3px; }
.sl-support__empty { margin: 0; padding: 16px; border: 1px dashed var(--sl-g-border); border-radius: var(--sl-r-md); color: var(--sl-g-text-2); font-size: 15px; line-height: 1.55; }
@media (max-width: 340px) {
	.sl-support__link { grid-template-columns: 36px minmax(0, 1fr); row-gap: 10px; }
	.sl-support__icon { width: 36px; height: 36px; }
	.sl-support__action { grid-column: 1 / -1; text-align: center; padding: 11px 12px; }
}
.sl-sheet .sl-support__meta { grid-template-columns: 1fr 1fr; }

/* Contact page: intro beside the details on wide screens, stacked on phones */
.sl-contact-page { display: grid; gap: clamp(22px, 4vw, 48px); }
@media (min-width: 900px) {
	.sl-contact-page { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
}
.sl-contact-page__intro { max-width: 46ch; }
.sl-contact-page__intro > :first-child { margin-top: 0; }
/* 4. Care and legal pages: one calm reading column, no side menu, no floating card */
.sl-content-section--prose .sl-ip-layout--solo { grid-template-columns: minmax(0, 760px); justify-content: start; }
.sl-content-section--prose .sl-ip-layout--solo.sl-ip-layout--wide { grid-template-columns: minmax(0, 1120px); }
.sl-content-section--prose .sl-ip-layout--solo .sl-ip-main { max-width: none; margin-inline: 0; }
.sl-content-section--prose:not(.sl-type-tracking) .sl-ip-main.sl-ip-card {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.sl-content-section--prose .sl-prose { max-width: 68ch; color: var(--sl-pg-text, #4A423C); font-size: clamp(16px, 0.96rem + 0.18vw, 17px); line-height: 1.75; }
.sl-content-section--prose .sl-prose > :first-child { margin-top: 0; }
.sl-content-section--prose .sl-prose h2 { margin: 2em 0 0.55em; color: var(--sl-g-text); font: 400 clamp(22px, 1.1rem + 1vw, 28px)/1.2 var(--sl-font-serif); letter-spacing: -0.01em; }
.sl-content-section--prose .sl-prose h3 { margin: 1.6em 0 0.4em; color: var(--sl-g-text); font: 600 clamp(16px, 0.98rem + 0.2vw, 18px)/1.35 var(--sl-font-sans); }
.sl-content-section--prose .sl-prose p { margin: 0 0 1em; }
.sl-content-section--prose .sl-prose ul,
.sl-content-section--prose .sl-prose ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.sl-content-section--prose .sl-prose li { margin: 0.35em 0; }
.sl-content-section--prose .sl-prose a { color: var(--sl-g-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sl-content-section--prose .sl-prose a:hover { color: var(--sl-g-accent); }
.sl-content-section--prose .sl-prose strong { color: var(--sl-g-text); font-weight: 600; }
.sl-content-section--prose .sl-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.sl-content-section--prose .sl-prose th,
.sl-content-section--prose .sl-prose td { padding: 10px 12px; border-bottom: 1px solid var(--sl-g-border); text-align: left; vertical-align: top; }
.sl-content-section--prose .sl-prose details { border-bottom: 1px solid var(--sl-g-border); }
.sl-content-section--prose .sl-prose details:first-of-type { border-top: 1px solid var(--sl-g-border); }
.sl-content-section--prose .sl-prose summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: 52px; padding: 12px 0;
	color: var(--sl-g-text); font-weight: 500; line-height: 1.4;
	cursor: pointer; list-style: none;
}
.sl-content-section--prose .sl-prose summary::-webkit-details-marker { display: none; }
.sl-content-section--prose .sl-prose summary::after { content: '+'; flex: none; color: var(--sl-g-text-2); font-size: 20px; line-height: 1; transition: transform 160ms ease; }
.sl-content-section--prose .sl-prose details[open] > summary::after { transform: rotate(45deg); }
.sl-content-section--prose .sl-prose details > :not(summary) { margin-top: 0; }
.sl-content-section--prose .sl-prose details[open] { padding-bottom: 8px; }
@media (max-width: 640px) {
	.sl-content-section--prose .sl-prose { font-size: 16px; line-height: 1.7; }
	.sl-content-section--prose .sl-prose h2 { margin-top: 1.7em; }
}
/* 5. Product page purchase (items 7 and 13; refined in the finish pass)
   Ink and buy controls draw from the Global Colors (text and action), so one change in Brand Settings recolours them.
   The page default used to be #1F2530, a blue-grey: that is the blue tint. A colour saved under Customizer > Product
   Page still wins. The main Add to Bag / Buy Now buttons are the theme's own again: two full-width rows, stacked. */
.sl-pdp {
	--pdp-text: var(--sl-pdp-ink, var(--sl-g-text, #211E1A));
	--sb-out-text: var(--sl-pdp-sb-outline-text, var(--sl-g-action, #211E1A));
	--sb-out-border: var(--sl-pdp-sb-outline-border, var(--sl-g-action, #211E1A));
	--sb-fill-bg: var(--sl-pdp-sb-filled-bg, var(--sl-g-action, #211E1A));
	--sb-fill-text: var(--sl-pdp-sb-filled-text, var(--sl-g-action-text, #FFFDF9));
	--sb-fill-border: var(--sl-pdp-sb-filled-border, var(--sl-pdp-sb-filled-bg, var(--sl-g-action, #211E1A)));
}
.sl-pdp-actions .sl-pdp-btn:focus-visible { outline: 2px solid var(--sl-g-focus, #2F6F68); outline-offset: 3px; }

.sl-pdp-sticky {
	--stk-text: var(--sl-pdp-sb-stk-text, var(--sl-g-text, #211E1A));
	--stk-border: var(--sl-pdp-sb-stk-border, var(--sl-g-border, #E4DCD2));
	--stk-add-bg: var(--sl-pdp-sb-stk-add-bg, var(--sl-g-action, #211E1A));
	--stk-add-text: var(--sl-pdp-sb-stk-add-text, var(--sl-g-action-text, #FFFDF9));
	--stk-buy-text: var(--sl-pdp-sb-stk-buy-text, var(--sl-g-action, #211E1A));
}
.sl-pdp-sticky__btn:focus-visible { outline: 2px solid var(--sl-g-focus, #2F6F68); outline-offset: 2px; }
@media (hover: hover) {
	.sl-pdp-sticky__btn--add:hover:not([disabled]) { background: color-mix(in srgb, var(--stk-add-bg) 86%, #FFFFFF); }
	.sl-pdp-sticky__btn--buy:hover:not([disabled]) { background: color-mix(in srgb, var(--stk-buy-text) 7%, var(--stk-buy-bg)); }
}

/* Sticky purchase unit, phones and tablets: attached to the bottom edge and the safe area, rising from below.
   One column carries the thumbnail, name, chosen options and price; the other carries Add to Bag above Buy Now. */
@media (max-width: 1023px) {
	.sl-pdp-sticky {
		right: 0;
		bottom: 0;
		left: 0;
		max-width: none;
		margin: 0;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 10px;
		padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
		border-width: 1px 0 0;
		border-radius: 0;
		box-shadow: 0 -8px 24px rgba(33, 30, 26, 0.08);
		transition: transform 300ms var(--sl-ease-out), opacity 160ms linear;
	}
	.sl-pdp-sticky.is-leaving { transform: translateY(calc(100% + 10px)); opacity: 1; }
	.sl-pdp-sticky--flat { box-shadow: none; }
	.sl-pdp-sticky__thumb { display: block; flex: none; width: 42px; height: 42px; border-radius: 6px; object-fit: cover; }
	.sl-pdp-sticky__info { flex: 1 1 0; min-width: 0; }
	.sl-pdp-sticky__name { font-size: 14px; }
	.sl-pdp-sticky__opts { display: block; font-size: 11.5px; }
	.sl-pdp-sticky__opts[hidden] { display: none; }
	.sl-pdp-sticky__price { font-size: 13.5px; }
	.sl-pdp-sticky__actions { flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
	.sl-pdp-sticky__btn { flex: none; width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--sl-pdp-sb-btn-radius, 6px); font-size: 12px; letter-spacing: 0.1em; }
	.sl-pdp-sticky__btn .sl-pdp-icon { display: none; }
	/* Both buttons keep their words: the Add button no longer folds into a bare icon once the options are chosen. */
	.sl-pdp-sticky--both:not(.is-choosing) .sl-pdp-sticky__btn--add { width: 100%; padding: 0 10px; }
	.sl-pdp-sticky--both:not(.is-choosing) .sl-pdp-sticky__btn--add .sl-pdp-btn__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (max-width: 420px) {
	.sl-pdp-sticky__thumb { width: 38px; height: 38px; }
	.sl-pdp-sticky__was:not([hidden]), .sl-pdp-sticky__off:not([hidden]) { display: none; }
}
@media (max-width: 340px) {
	.sl-pdp-sticky { gap: 8px; padding-left: 10px; padding-right: 10px; }
	.sl-pdp-sticky__btn { padding: 0 8px; font-size: 10.5px; letter-spacing: 0.03em; }
}
/* Desktop: the floating card, thumbnail and name on top, the two buttons stacked beneath. */
@media (min-width: 1024px) {
	.sl-pdp-sticky { border-radius: 8px; transition: transform 280ms var(--sl-ease-out), opacity 200ms ease; }
	.sl-pdp-sticky__thumb { width: 58px; height: 58px; border-radius: 6px; }
	.sl-pdp-sticky__actions { flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 8px; }
	.sl-pdp-sticky__btn { flex: none; width: 100%; min-height: 52px; border-radius: var(--sl-pdp-sb-btn-radius, 6px); }
	.sl-pdp-actions .sl-pdp-btn { min-height: var(--sl-pdp-sb-btn-h, 56px); }
}
/* 6. Swipe areas (items 3, 5, 6, 10) */
/* A gesture that starts on a picture behaves like one on the card: no native image drag or long-press callout. */
.sl-pdp-reviews__photo img,
.sl-pdp-pair__slide img,
.sl-customer-reels__item img,
.sl-written-testimonials__deck img,
.sl-wt-gallery__slide img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }
.sl-pdp-reviews__photo img,
.sl-pdp-pair__slide img,
.sl-customer-reels__item img { pointer-events: none; }
/* Android: once a review's photo strip reaches its end, the swipe hands over to the review cards. */
.sl-pdp-reviews__photos { overscroll-behavior-x: auto; }
/* Android: a vertical swipe that starts on a testimonial photo scrolls the page (pan-y was missing; iOS ignored it). */
.sl-wt-gallery__viewport { touch-action: pan-x pan-y pinch-zoom; }
/* Bundle & Save: the front card follows the finger; the cards behind settle on transform and opacity only. */
@media (max-width: 1023px) {
	.sl-pdp-pair__slide { transition: transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease; }
	.sl-pdp-pair__viewport.is-dragging .sl-pdp-pair__slide.is-active { transition: none; }
}
/* What People Are Saying (customer stories): no 3D tilt on phones, one story per swipe. */
@media (max-width: 767px) {
	.sl-customer-reels__item { transform: none; transform-style: flat; will-change: auto; scroll-snap-stop: always; }
	.sl-customer-reels.is-settling .sl-customer-reels__item,
	.sl-customer-reels__media { transition: none; }
}
/* 7. Product video (item 8): progress line and a play / pause control that fades but stays reachable */
.sl-pdp-vid__progress { position: absolute; z-index: 6; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(255, 253, 249, 0.26); opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
.sl-pdp-vid.is-playing .sl-pdp-vid__progress,
.sl-pdp-vid.is-paused .sl-pdp-vid__progress { opacity: 1; }
.sl-pdp-vid__progress-fill { display: block; width: 100%; height: 100%; background: rgba(255, 253, 249, 0.95); transform: scaleX(0); transform-origin: 0 50%; }
.sl-pdp-vid.is-playing .sl-pdp-vid__play { display: grid; opacity: 0; pointer-events: none; transition: opacity 320ms ease; }
.sl-pdp-vid.is-playing.sl-vid-hint .sl-pdp-vid__play,
.sl-pdp-vid.is-playing .sl-pdp-vid__play:focus-visible { opacity: 1; pointer-events: auto; }
.sl-pdp-vid__play:focus-visible { outline: none; }
.sl-pdp-vid__play:focus-visible .sl-pdp-vid__ring { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.sl-pdp-vid__pause-glyph { display: none; width: 14px; height: 16px; border-right: 4px solid currentColor; border-left: 4px solid currentColor; }
.sl-pdp-vid.is-playing .sl-pdp-vid__ring .sl-pdp-icon { display: none; }
.sl-pdp-vid.is-playing .sl-pdp-vid__pause-glyph { display: block; }
@media (prefers-reduced-motion: reduce) { .sl-pdp-vid__play, .sl-pdp-vid__progress { transition: none; } }
/* 8. My Account (item 15): overview, delivery tracking, store credit, personal information */
.sl-ov { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
@media (min-width: 900px) { .sl-ov__card--order { grid-column: span 2; } }
.sl-ov__card { display: grid; align-content: start; gap: 6px; padding: 18px 20px; border: 1px solid var(--sl-g-border); border-radius: 12px; background: var(--sl-g-surface); }
.sl-ov__label { margin: 0; color: var(--sl-g-text-2); font: 500 11px/1.3 var(--sl-font-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.sl-ov__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 2px 0 0; color: var(--sl-g-text); font: 400 clamp(19px, 1.1rem + 0.4vw, 22px)/1.25 var(--sl-font-serif); }
.sl-ov__meta, .sl-ov__line { margin: 0; color: var(--sl-g-text-2); font-size: 14px; line-height: 1.5; }
.sl-ov__line:empty { display: none; }
.sl-ov__link { justify-self: start; margin-top: 6px; color: var(--sl-g-link); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.sl-ov__dl { display: grid; gap: 8px; margin: 2px 0 0; }
.sl-ov__dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: 14px; }
.sl-ov__dl dt { color: var(--sl-g-text-2); }
.sl-ov__dl dd { margin: 0; color: var(--sl-g-text); overflow-wrap: anywhere; }
.sl-ov__signout { grid-column: 1 / -1; margin: 4px 0 0; color: var(--sl-g-text-2); font-size: 13px; }
.sl-ov__signout a { color: var(--sl-g-link); }
.sl-pg-acct .sl-account-form { border-radius: 14px; }

/* Delivery: parcels, a four-step progress line and the courier's events */
.sl-track { display: grid; gap: 14px; }
.sl-track__parcel { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--sl-g-border); border-radius: 12px; background: var(--sl-g-surface); }
.sl-track__head { display: grid; gap: 6px; }
.sl-track__count { margin: 0; color: var(--sl-g-text-2); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.sl-track__status { margin: 0; color: var(--sl-g-text); font: 400 20px/1.25 var(--sl-font-serif); }
.sl-track__parcel--warn .sl-track__status { color: #8A5A14; }
.sl-track__ids { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 14px; }
.sl-track__ids dt { color: var(--sl-g-text-2); font-size: 12px; }
.sl-track__ids dd { margin: 0; color: var(--sl-g-text); }
.sl-track__awb { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.sl-track__copy { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--sl-g-border); border-radius: 6px; background: transparent; color: var(--sl-g-text-2); font-size: 12px; cursor: pointer; }
.sl-track__copy.is-copied { border-color: var(--sl-g-accent); color: var(--sl-g-accent); }
.sl-track__link { justify-self: start; color: var(--sl-g-link); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.sl-track__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 0; padding: 0; list-style: none; counter-reset: none; }
.sl-track__step { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.sl-track__step::before { content: ''; position: absolute; top: 6px; left: calc(-50% + 8px); right: calc(50% + 8px); height: 2px; background: var(--sl-g-border); }
.sl-track__step:first-child::before { display: none; }
.sl-track__step.is-done::before, .sl-track__step.is-current::before { background: var(--sl-g-accent); }
.sl-track__dot { position: relative; width: 14px; height: 14px; border: 2px solid var(--sl-g-border); border-radius: 50%; background: var(--sl-g-surface); }
.sl-track__step.is-done .sl-track__dot { border-color: var(--sl-g-accent); background: var(--sl-g-accent); }
.sl-track__step.is-current .sl-track__dot { border-color: var(--sl-g-accent); box-shadow: 0 0 0 4px var(--sl-g-accent-soft); }
.sl-track__step-label { color: var(--sl-g-text-2); font-size: 12px; line-height: 1.3; }
.sl-track__step.is-current .sl-track__step-label, .sl-track__step.is-done .sl-track__step-label { color: var(--sl-g-text); }
.sl-track__events { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sl-g-border); }
.sl-track__event { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--sl-g-border); font-size: 14px; line-height: 1.45; }
.sl-track__event time { color: var(--sl-g-text-2); font-size: 13px; }
.sl-track__event-text { color: var(--sl-g-text); }
.sl-track__event-place { grid-column: 2; color: var(--sl-g-text-2); font-size: 13px; }
@media (max-width: 560px) {
	.sl-track__event { grid-template-columns: minmax(0, 1fr); }
	.sl-track__event-place { grid-column: 1; }
}
.sl-track__state, .sl-track__meta { margin: 0; color: var(--sl-g-text-2); font-size: 14px; line-height: 1.55; }
.sl-track__meta { font-size: 12.5px; }

/* Store credit page */
.sl-credit { display: grid; gap: 16px; }
.sl-credit__balance { padding: 18px 20px; border: 1px solid var(--sl-g-border); border-radius: 12px; background: var(--sl-g-surface); }
.sl-credit__label { margin: 0; color: var(--sl-g-text-2); font: 500 11px/1.3 var(--sl-font-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.sl-credit__amount { margin: 6px 0 0; color: var(--sl-g-text); font: 400 30px/1.1 var(--sl-font-serif); }
.sl-credit__hint, .sl-credit__empty { margin: 8px 0 0; color: var(--sl-g-text-2); font-size: 14px; line-height: 1.55; }
.sl-credit__title { margin: 6px 0 0; font: 400 20px/1.2 var(--sl-font-serif); color: var(--sl-g-text); }
.sl-credit__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sl-g-border); }
.sl-credit__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--sl-g-border); font-size: 14px; }
.sl-credit__when, .sl-credit__after { color: var(--sl-g-text-2); font-size: 13px; }
.sl-credit__delta { text-align: right; font-variant-numeric: tabular-nums; color: var(--sl-g-text); }
.sl-credit__row.is-in .sl-credit__delta { color: #2F6B45; }
.sl-credit__after { text-align: right; }
.sl-credit__what a { color: var(--sl-g-link); }

/* Personal information: two columns on wide screens, one on phones */
.sl-phone-input { display: flex; align-items: stretch; }
.sl-phone-input__cc { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--sl-g-border); border-right: 0; border-radius: 10px 0 0 10px; background: var(--sl-g-surface-2); color: var(--sl-g-text-2); font-size: 15px; }
.sl-phone-input input { flex: 1 1 auto; min-width: 0; border-radius: 0 10px 10px 0 !important; }
.sl-account-form__field--mobile { display: grid; gap: 6px; }
@media (min-width: 900px) {
	.woocommerce-MyAccount-content .sl-account-form { max-width: 960px; }
	.woocommerce-EditAccountForm .sl-account-form__section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; align-items: start; }
	.woocommerce-EditAccountForm .sl-account-form__section > .sl-account-form__section-title,
	.woocommerce-EditAccountForm .sl-account-form__section > .sl-account-form__row,
	.woocommerce-EditAccountForm .sl-account-form__section > .sl-account-form__hint { grid-column: 1 / -1; }
	.woocommerce-EditAccountForm .sl-account-form__section > .form-row { margin: 0; }
}
/* 9. Sign-in card (item 12): a compact floating card with a brand photograph, a restrained overlay, then the form.
   Phones: photograph band on top. Desktop: photograph on the left, form on the right. */
.sl-login-sheet { width: min(400px, calc(100% - 32px)); }
.sl-login { position: relative; display: grid; }
.sl-login > .sl-sheet__close { z-index: 3; top: 10px; right: 10px; width: 40px; height: 40px; background: rgba(255, 253, 249, 0.92); box-shadow: 0 1px 5px rgba(33, 30, 26, 0.2); }
.sl-login > .sl-sheet__close:hover { background: var(--sl-g-surface); }
.sl-login__visual { position: relative; display: block; height: 104px; overflow: hidden; background: var(--sl-g-surface-2); }
.sl-login__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: saturate(0.9) contrast(1.02); }
.sl-login__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33, 30, 26, 0.08) 0%, rgba(33, 30, 26, 0.42) 100%); }
.sl-login__brand { position: absolute; z-index: 2; left: 20px; bottom: 12px; margin: 0; color: #FFFDF9; font: 500 11px/1 var(--sl-font-sans); letter-spacing: 0.26em; text-transform: uppercase; }
@media (min-width: 720px) {
	.sl-login-sheet:has(.sl-login__visual) { width: min(760px, calc(100% - 48px)); }
	.sl-login-sheet:has(.sl-login__visual) .sl-login { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
	.sl-login__visual { height: auto; min-height: 100%; }
	.sl-login__visual::after { background: linear-gradient(180deg, rgba(33, 30, 26, 0.06) 0%, rgba(33, 30, 26, 0.5) 100%); }
	.sl-login__brand { left: 24px; bottom: 22px; font-size: 12px; }
}
.sl-login__label { display: block; margin: 14px 0 6px; color: var(--sl-g-text); font-size: 13px; font-weight: 500; }
.sl-login input[type='text'],
.sl-login input[type='password'],
.sl-login input[type='tel'] { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--sl-g-border); border-radius: 10px; background: var(--sl-g-surface); color: var(--sl-g-text); font: 400 16px/1.3 var(--sl-font-sans); }
.sl-login input:focus-visible { outline: 2px solid var(--sl-g-focus); outline-offset: 1px; }
.sl-login .sl-phone-input input { border-radius: 0 10px 10px 0; }
.sl-login__submit { width: 100%; margin-top: 16px; min-height: 48px; }
.sl-login__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 0; font-size: 13px; }
.sl-login__row--split { justify-content: space-between; }
.sl-login__row a, .sl-login__check a, .sl-login__note a { color: var(--sl-g-link); text-underline-offset: 3px; }
.sl-login__check { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; color: var(--sl-g-text-2); font-size: 13px; line-height: 1.5; cursor: pointer; }
.sl-login__check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--sl-g-action); }
.sl-login__check--inline { align-items: center; margin: 0; }
.sl-login__trust { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--sl-g-text-2); font-size: 12.5px; }
.sl-login__trust svg { flex: none; color: var(--sl-g-accent); }
.sl-login__note { margin: 8px 0 0; color: var(--sl-g-text-2); font-size: 12.5px; line-height: 1.5; }
.sl-login__or { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; color: var(--sl-g-text-2); font-size: 12px; }
.sl-login__or::before, .sl-login__or::after { content: ''; flex: 1; height: 1px; background: var(--sl-g-border); }
.sl-login__msg { min-height: 1.3em; margin: 10px 0 0; color: var(--sl-g-text-2); font-size: 13px; }
.sl-login__msg.is-error { color: #A33A2B; }
.sl-login__sent { margin: 0 0 4px; color: var(--sl-g-text); font-size: 14px; }
.sl-login__text-btn { padding: 6px 0; border: 0; background: none; color: var(--sl-g-link); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sl-login__text-btn[disabled] { color: var(--sl-g-text-2); text-decoration: none; cursor: default; }
.sl-sheet:focus { outline: none; }
@media (max-width: 600px) {
	.sl-login__visual { height: 84px; }
	.sl-login .sl-sheet__sub { display: none; }
	.sl-login .sl-sheet__head { margin-bottom: 4px; }
	.sl-login__label { margin: 10px 0 4px; }
	.sl-login input[type='text'], .sl-login input[type='password'], .sl-login input[type='tel'] { min-height: 46px; }
	.sl-login__submit { margin-top: 12px; min-height: 46px; }
	.sl-login__row { margin-top: 10px; }
	.sl-login__trust { margin-top: 12px; font-size: 12px; }
	.sl-login__note { margin-top: 6px; font-size: 12px; line-height: 1.45; }
}
/* 10. Phone scale (item 1): the same design, sized for a phone. The Customizer values still apply up to these caps. */
@media (max-width: 900px) {
	.sl-home-hero.sl-hero { min-height: min(var(--sl-hero-height-mobile), 82vh); min-height: min(var(--sl-hero-height-mobile), 82svh); }
}
@media (max-width: 767px) {
	input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='search'], input[type='password'], input[type='url'], select, textarea { font-size: max(16px, 1em); }
}
@supports (overflow: clip) { body { overflow-x: clip; } }
@media (max-width: 520px) {
	.sl-bs__heading { font-size: min(var(--bs-heading-m, 38px), 26px); }
	.sl-customer-reels__heading { font-size: min(var(--cr-heading-m), 26px); }
	.sl-written-testimonials__heading { font-size: min(var(--wt-heading-m), 27px); }
	.sl-instagram-feed__heading { font-size: min(var(--ig-heading-m), 26px); }
	.sl-cmcard__heading { font-size: min(var(--mc-heading-m, 30px), 26px); }
	.sl-featured-products .sl-section-header__title { font-size: min(var(--sl-featured-heading-size-mobile, 32px), 26px); }
	.sl-image-story__story-title, .sl-image-story__title { font-size: min(var(--is-title-m), 25px); }
	.sl-countdown__banner--layout-story .sl-countdown__heading { font-size: min(var(--sl-countdown-story-heading-mobile, 36px), 30px); }
	.sl-sbanner__headline, .sl-sbanner__word { font-size: min(var(--sb-headline-m), 32px); }
	.sl-sbanner__sep { font-size: calc(min(var(--sb-headline-m), 32px) * .5); }
	.sl-sbanner__lead { transform: translate3d(0, calc(min(var(--sb-headline-lift-m), 24px) * -1), 0); }
	.sl-home-hero.sl-hero--content-plain .sl-hero__title { font-size: min(var(--sl-hero-plain-heading-size-mobile, 32px), 8.3vw, 30px); }
	.sl-bs { padding-top: min(var(--bs-pad-top-m, 48px), 44px); }
	.sl-customer-reels { padding-block: min(var(--cr-pad-top-m), 44px) min(var(--cr-pad-bottom-m), 40px); }
	.sl-written-testimonials { padding: min(var(--wt-pad-top-m), 44px) var(--wt-side-m) min(var(--wt-pad-bottom-m), 48px); }
	.sl-instagram-feed { padding: min(var(--ig-pad-top-m), 44px) var(--ig-side-m) min(var(--ig-pad-bottom-m), 48px); }
	.sl-image-story__media, .sl-image-story__card { height: min(var(--is-image-h-m), 72vh); height: min(var(--is-image-h-m), 72svh); }
}
@media (max-width: 360px) {
	.sl-bs__heading, .sl-customer-reels__heading, .sl-instagram-feed__heading, .sl-cmcard__heading, .sl-featured-products .sl-section-header__title { font-size: 24px; }
	.sl-written-testimonials__heading { font-size: min(var(--wt-heading-m), 25px); }
	.sl-sbanner__headline, .sl-sbanner__word { font-size: min(var(--sb-headline-m), 29px); }
}

/* 11. Glass (item 2): blur stays on overlays, sheets and small static controls; on phones and touch screens it is
   removed from layers that move while scrolling or swiping (their surfaces are 88-97% opaque, so they look the same). */
@media (max-width: 1023px), (pointer: coarse) {
	.sl-site-header,
	body.home.sl-hero-transparent-header-enabled .sl-site-header.sl-header--scrolled,
	body.front-page.sl-hero-transparent-header-enabled .sl-site-header.sl-header--scrolled,
	body.sl-catalogue-hero-transparent .sl-site-header.sl-header--scrolled,
	.sl-customer-reels__card,
	.sl-customer-reels__story-label,
	.sl-customer-reels__person-icon,
	.sl-pdp-reviews--card-glass .sl-pdp-reviews__item,
	.sl-featured-products--floating .sl-section-header,
	.sl-featured-products--floating:not(.sl-featured-products--catalogue-cards) .sl-pcard,
	.sl-pg-bag .wc-block-cart__submit-container--sticky { -webkit-backdrop-filter: none; backdrop-filter: none; }
	.sl-pdp-reviews--card-glass .sl-pdp-reviews__item { background: rgba(252, 248, 241, 0.94); }
}

/* 12. Magazine product card on phones (earlier loose end): price and saving keep their own column, the bag button its
   own; nothing can slide under the button and the button stays inside the card. */
@media (max-width: 767px) {
	.sl-pcard--v2.sl-product-card--layered .sl-mag-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 2px; }
	.sl-pcard--v2.sl-product-card--layered .sl-mag-foot__info { min-width: 0; }
	.sl-pcard--v2.sl-product-card--layered .sl-mag-foot__info .sl-pcard__savepill,
	.sl-pcard--v2.sl-product-card--layered .sl-mag-foot__info .sl-pcard__offer { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
	.sl-pcard--v2.sl-product-card--layered .sl-mag-foot__cart { margin-left: 0; align-self: center; }
	.sl-pcard--v2.sl-product-card--layered .sl-mag-foot .sl-pcard__bag { transform: none; }
	.sl-pcard--v2.sl-product-card--layered .sl-mag-foot .sl-pcard__bag-circle { box-shadow: 0 2px 5px color-mix(in srgb, #211E1A 22%, transparent); }
}

/* 13. Bundle & Save picture, desktop only: a modestly larger faded image area (was 46% wide, 10px bleed).
   Its right edge stays inside the faded zone under the deck, so the cards keep the same calm background. */
@media (min-width: 1024px) {
	.sl-pdp-pair__visual { inset: -22px auto -22px 0; width: 52%; }
}

@media (prefers-reduced-motion: no-preference) {
	.sl-pdp-pair__visual { transition: opacity .4s ease; }
}
/* 14. Closed drawers leave the tab order. The bag and wishlist drawers slide off-screen when closed but stayed
   focusable, so keyboard and screen-reader users reached invisible Close / Explore controls. Visibility now
   switches off after the slide-out ends and on at once when opening; the slide itself is unchanged. */
.sl-mini-cart:not(.is-open) { visibility: hidden; transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s linear .38s; }
.sl-mini-cart.is-open { visibility: visible; transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s; }
.sl-wishlist-drawer:not(.is-open) { visibility: hidden; transition: transform .38s cubic-bezier(.4,0,.2,1), box-shadow .38s ease, visibility 0s linear .38s; }
.sl-wishlist-drawer.is-open { visibility: visible; transition: transform .38s cubic-bezier(.4,0,.2,1), box-shadow .38s ease, visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) {
	.sl-mini-cart:not(.is-open), .sl-mini-cart.is-open, .sl-wishlist-drawer:not(.is-open), .sl-wishlist-drawer.is-open { transition: none; }
}
/* 16. The theme's own sheets, drawers and viewer: no strip of page beneath them (3.B).
   While a mobile browser's bars slide away the visible area can briefly be taller than the layout viewport the fixed
   boxes were measured against, which left a gap under a sheet and the page showing through. Each overlay is extended
   a little past the bottom edge (backgrounds only; nothing moves), and the size guide gets a dvh height. */
.sl-pdp-sheet__scrim, .sl-pdp-lb__scrim, .sl-cfilter__scrim, .sl-drawer-backdrop, .sl-wishlist-backdrop, .sl-menu-drawer__backdrop { bottom: -120px; }
.sl-pdp-lb::after { content: ''; position: absolute; top: 100%; right: 0; left: 0; height: 120px; background: var(--sl-pdp-sb-viewer-bg, #14110E); pointer-events: none; }
.sl-mini-cart::after, .sl-wishlist-drawer::after, .sl-menu-drawer__surface::after { content: ''; position: absolute; top: 100%; right: 0; left: 0; height: 120px; background: inherit; pointer-events: none; }
@media (max-width: 767px) {
	.sl-pdp-sheet__panel { max-height: min(86vh, 640px); max-height: min(86dvh, 640px); }
	.sl-pdp-sheet__panel::after { content: ''; position: absolute; top: 100%; right: 0; left: 0; height: 120px; background: inherit; pointer-events: none; }
}
@media (max-width: 1023px) {
	.sl-cfilter__panel::after { content: ''; position: absolute; top: 100%; right: 0; left: 0; height: 120px; background: inherit; pointer-events: none; }
}
/* The page behind any open overlay does not scroll or bounce on touch screens. */
html.sl-overlay-lock .sl-drawer-backdrop, html.sl-overlay-lock .sl-wishlist-backdrop, html.sl-overlay-lock .sl-menu-drawer__backdrop, html.sl-overlay-lock .sl-cfilter__scrim, html.sl-overlay-lock .sl-pdp-sheet__scrim { touch-action: none; }
/* 17. Swipes settle on one complete card (3.G, items 3/5/6/10). Review cards used proximity snapping, so a slow drag
   could rest between two cards on iPhone; they now snap to exactly one card and a quick flick moves one card, not
   several. Vertical scrolling that starts on a card still belongs to the page (touch-action keeps pan-y). */
.sl-pdp-reviews__rail { scroll-snap-type: x mandatory; touch-action: pan-x pan-y pinch-zoom; }
.sl-pdp-reviews__rail > .sl-pdp-reviews__item,
.sl-customer-reels__viewport > * > *, .sl-customer-reels__card { scroll-snap-stop: always; }
.sl-pdp-reviews__item img, .sl-pdp-pair__viewport img, .sl-customer-reels__viewport img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
@media (prefers-reduced-motion: reduce) { .sl-pdp-reviews__rail, .sl-customer-reels__viewport, .sl-wt-gallery__viewport { scroll-behavior: auto; } }
.sl-sample-badge { display: inline-block; padding: 3px 7px; border-radius: 4px; background: #9A5B00; color: #FFFFFF; font: 700 9px/1 var(--sl-font-sans); letter-spacing: 0.14em; vertical-align: middle; }
.sl-preview-flag { position: fixed; left: 12px; bottom: 12px; z-index: 9990; max-width: min(320px, calc(100% - 24px)); padding: 8px 12px; border-radius: 8px; background: #211E1A; color: #FFFDF9; font: 500 12px/1.4 var(--sl-font-sans); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
/* 19. Honest states for sections that wait for real content (reviews, store information ticker). */
.sl-honest { padding: clamp(32px, 8vw, 64px) 16px; background: var(--sl-g-canvas); }
.sl-honest__inner { max-width: 640px; margin: 0 auto; padding: clamp(24px, 6vw, 40px) clamp(18px, 5vw, 36px); border: 1px solid var(--sl-g-border); border-radius: 18px; background: var(--sl-g-surface); box-shadow: 0 10px 30px rgba(33, 30, 26, 0.06); text-align: center; }
.sl-honest__eyebrow { margin: 0 0 10px; color: var(--sl-g-accent); font: 600 11px/1.3 var(--sl-font-sans); letter-spacing: 0.22em; text-transform: uppercase; }
.sl-honest__title { margin: 0; color: var(--sl-g-text); font: 400 clamp(26px, 6.5vw, 34px)/1.12 var(--sl-font-serif); }
.sl-honest__text { max-width: 46ch; margin: 12px auto 20px; color: var(--sl-g-text-2); font-size: 15px; line-height: 1.6; }
.sl-review-ticker__label { margin: 0 0 8px; text-align: center; color: var(--sl-g-text-2); font: 500 11px/1.3 var(--sl-font-sans); letter-spacing: 0.18em; text-transform: uppercase; }

/* 20. Homepage polish after the section restore ------------------------- */
.sl-countdown__banner--layout-story .sl-countdown__offer{white-space:normal;overflow:visible;text-overflow:clip;max-width:34ch;margin-inline:auto;text-align:center;text-wrap:balance;line-height:1.5}
.sl-countdown__banner--layout-story .sl-countdown__actions{margin-top:18px}

/* 22. Informational pages: image header, layered floating cards, details-led Contact, FAQ (3.E, 3.F) ---- */
.sl-ip-hero--image + .sl-content-section{position:relative;z-index:3;margin-top:calc(-1 * clamp(36px,5vw,68px));padding-top:0}
.sl-content-page .sl-ip-main.sl-ip-card{background:var(--sl-g-surface,#FFFDF9);border:1px solid var(--sl-g-border,#E4DCD2);border-radius:22px;box-shadow:0 22px 54px rgba(43,36,31,.09),0 2px 8px rgba(43,36,31,.04)}
.sl-type-contact .sl-ip-main.sl-ip-card,.sl-type-faq .sl-ip-main.sl-ip-card{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.sl-type-faq .sl-ip-layout--solo{grid-template-columns:minmax(0,1180px)}
.sl-type-faq .sl-ip-layout--solo .sl-ip-main{max-width:1180px}

/* Contact: details first, as floating cards */
.sl-contact-page{gap:16px}
.sl-contact-page__details{order:-1;display:grid;gap:16px}
.sl-contact-page__intro{padding:clamp(22px,3vw,34px);background:var(--sl-g-surface,#FFFDF9);border:1px solid var(--sl-g-border,#E4DCD2);border-radius:22px;box-shadow:0 18px 46px rgba(43,36,31,.08),0 2px 6px rgba(43,36,31,.04)}
.sl-support--page .sl-support__channels{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.sl-support--page .sl-support__link{grid-template-columns:44px minmax(0,1fr);row-gap:14px;padding:20px;border-radius:20px;box-shadow:0 16px 40px rgba(43,36,31,.08),0 2px 6px rgba(43,36,31,.04)}
.sl-support--page .sl-support__icon{width:44px;height:44px}
.sl-support--page .sl-support__action{grid-column:1 / -1;text-align:center}
.sl-support--page .sl-support__meta{padding:20px;background:var(--sl-g-surface,#FFFDF9);border:1px solid var(--sl-g-border,#E4DCD2);border-radius:20px;box-shadow:0 16px 40px rgba(43,36,31,.07)}
.sl-contact-page .sl-support__empty,.sl-contact-page .sl-support__follow{padding:18px 20px;background:var(--sl-g-surface,#FFFDF9);border:1px solid var(--sl-g-border,#E4DCD2);border-radius:20px}

/* FAQ: topic rail + one floating card per topic; one column on phones */
.sl-faq{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.sl-faq__rail{position:sticky;top:112px;padding:22px;background:var(--sl-g-surface,#FFFDF9);border:1px solid var(--sl-g-border,#E4DCD2);border-radius:20px;box-shadow:0 14px 36px rgba(43,36,31,.07)}
.sl-faq__rail-title{margin:0 0 12px;color:var(--sl-g-text-2,#6B6259);font:500 11px/1.3 var(--sl-font-sans);letter-spacing:.16em;text-transform:uppercase}
.sl-faq__nav{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.sl-faq__nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 12px;border-radius:12px;color:var(--sl-g-text,#2B241F);font:500 15px/1.3 var(--sl-font-sans);text-decoration:none}
.sl-faq__nav a:hover,.sl-faq__nav a:focus-visible{background:var(--sl-g-surface-2,#F4EFE7)}
.sl-faq__count{color:var(--sl-g-text-2,#6B6259);font-size:12px}
.sl-faq__main{display:grid;gap:16px;min-width:0}
.sl-faq__group{scroll-margin-top:112px;padding:clamp(18px,2.6vw,30px);background:var(--sl-g-surface,#FFFDF9);border:1px solid var(--sl-g-border,#E4DCD2);border-radius:22px;box-shadow:0 18px 46px rgba(43,36,31,.08),0 2px 6px rgba(43,36,31,.04)}
.sl-faq__title{margin:0 0 6px;color:var(--sl-g-text,#2B241F);font-family:var(--sl-font-serif);font-size:clamp(22px,2.4vw,28px);font-weight:400;line-height:1.15}
.sl-faq__tail,.sl-faq__intro{padding:2px 6px;color:var(--sl-g-text-2,#6B6259)}
@media (max-width:899px){
	.sl-faq{grid-template-columns:minmax(0,1fr);gap:14px}
	.sl-faq__rail{position:static;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
	.sl-faq__rail-title{display:none}
	.sl-faq__nav{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none}
	.sl-faq__nav::-webkit-scrollbar{display:none}
	.sl-faq__nav a{flex:none;min-height:40px;padding:8px 14px;border:1px solid var(--sl-g-border,#E4DCD2);border-radius:999px;background:var(--sl-g-surface,#FFFDF9);scroll-snap-align:start;white-space:nowrap}
	.sl-faq__count{display:none}
	.sl-faq__group{scroll-margin-top:92px}
}

/* 23. Care and legal pages return to a floating card, centred under the image header (3.E). Supersedes the flat column of section 4. */
.sl-content-section--prose:not(.sl-type-tracking):not(.sl-type-contact):not(.sl-type-faq) .sl-ip-main.sl-ip-card{padding:clamp(22px,3.4vw,52px);border:1px solid var(--sl-g-border,#E4DCD2);border-radius:22px;background:var(--sl-g-surface,#FFFDF9);box-shadow:0 22px 54px rgba(43,36,31,.09),0 2px 8px rgba(43,36,31,.04)}
.sl-content-section--prose:not(.sl-type-contact):not(.sl-type-faq) .sl-ip-layout--solo{grid-template-columns:minmax(0,880px);justify-content:center}
.sl-type-tracking .sl-ip-main.sl-ip-card{border-radius:22px;background:var(--sl-g-surface,#FFFDF9)}
.sl-content-empty{padding:clamp(24px,4vw,48px);background:var(--sl-g-surface,#FFFDF9);border:1px solid var(--sl-g-border,#E4DCD2);border-radius:22px;box-shadow:0 18px 46px rgba(43,36,31,.08)}
.sl-faq__title{margin-bottom:12px}

/* 24. Sample contact details (administrator preview only) */
button.sl-support__link{width:100%;margin:0;font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.sl-support__sample-msg{margin:12px 0 0;padding:10px 14px;border:1px solid var(--sl-g-border,#E4DCD2);border-radius:14px;color:var(--sl-g-text-2,#6B6259);font-size:13px;line-height:1.5}
.sl-support__sample-msg[hidden]{display:none}
.sl-support__sample-note{margin:0 0 12px;padding:10px 14px;border:1px dashed var(--sl-g-border,#E4DCD2);border-radius:14px;color:var(--sl-g-text-2,#6B6259);font-size:13px;line-height:1.5}

/* 25. Contact: one column of cards on wide screens so a value is never squeezed (supersedes the two-column grid of section 3) */
@media (min-width:900px){.sl-contact-page{grid-template-columns:minmax(0,1fr)}.sl-contact-page__intro{max-width:none}}
.sl-support--page .sl-support__channels{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.sl-support__value{overflow-wrap:break-word;word-break:normal}

/* 26. Header glass controller: Customizer > SOULSHORE Brand Settings > Header Glass (values printed by inc/system/header-glass.php).
   !important is deliberate: this one section owns the header's tint, blur, border and shadow while it is switched on. */
body.sl-hgl .sl-site-header{background-color:color-mix(in srgb,var(--sl-hgl-tint,#F7F2EA) var(--sl-hgl-op-top,96%),transparent) !important;border-bottom-color:var(--sl-hgl-border,#DED6CA) !important}
body.sl-hgl.sl-hgl-noborder .sl-site-header{border-bottom-color:transparent !important}
body.sl-hgl .sl-site-header:is(.sl-header--scrolled,.sl-hgl-scrolled){background-color:color-mix(in srgb,var(--sl-hgl-tint,#F7F2EA) var(--sl-hgl-op-scrolled,84%),transparent) !important;box-shadow:var(--sl-hgl-shadow,0 10px 30px rgba(43,36,31,.08)) !important}
body.sl-hgl.sl-hgl-clear.home.sl-hero-transparent-header-enabled .sl-site-header:not(.sl-header--scrolled):not(.sl-hgl-scrolled),body.sl-hgl.sl-hgl-clear.sl-catalogue-hero-transparent .sl-site-header:not(.sl-header--scrolled):not(.sl-hgl-scrolled){background-color:transparent !important;border-bottom-color:transparent !important;box-shadow:none !important}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
	body.sl-hgl .sl-site-header:is(.sl-header--scrolled,.sl-hgl-scrolled){-webkit-backdrop-filter:blur(var(--sl-hgl-blur,12px)) saturate(var(--sl-hgl-sat,115%)) !important;backdrop-filter:blur(var(--sl-hgl-blur,12px)) saturate(var(--sl-hgl-sat,115%)) !important}
	@media (max-width:767px){body.sl-hgl .sl-site-header:is(.sl-header--scrolled,.sl-hgl-scrolled){-webkit-backdrop-filter:blur(var(--sl-hgl-blur-m,8px)) saturate(var(--sl-hgl-sat,115%)) !important;backdrop-filter:blur(var(--sl-hgl-blur-m,8px)) saturate(var(--sl-hgl-sat,115%)) !important}}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
	body.sl-hgl .sl-site-header:is(.sl-header--scrolled,.sl-hgl-scrolled){background-color:color-mix(in srgb,var(--sl-hgl-tint,#F7F2EA) var(--sl-hgl-op-fallback,97%),transparent) !important}
}
@media (max-width:767px){body.sl-hgl.sl-hgl-solid-m .sl-site-header,body.sl-hgl.sl-hgl-solid-m .sl-site-header:is(.sl-header--scrolled,.sl-hgl-scrolled){background-color:var(--sl-hgl-tint,#F7F2EA) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}}

body.sl-hgl .sl-site-header:not(.sl-header--scrolled):not(.sl-hgl-scrolled){-webkit-backdrop-filter:none !important;backdrop-filter:none !important}

/* 27. Testimonial cards a little lighter on phones (328x430 -> smaller): tighter padding and a slightly smaller quote */
@media (max-width:767px){
	.sl-written-testimonials__card-content{padding:22px}
	.sl-written-testimonials__quote{font-size:19.5px;line-height:1.3}
}

/* 28. Brand fonts, self-hosted (SIL OFL, see assets/fonts/LICENSE-*.txt): latin variable subsets. The theme already names these families; until now none was ever loaded, so every device fell back to Georgia / system-ui. The rupee sign is not in the latin subset and keeps using the device font. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-display-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/montserrat-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant-garamond-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 29. Hero film: a calm dark base while it is not (yet) playing, so the headline keeps its contrast on Save-Data, slow connections and before the film starts. */
.sl-home-hero .sl-hero__slide--video{background-color:var(--sl-g-action,#211E1A)}

/* 29. WhatsApp Join banner: the button keeps full presence when no URL is set */
button.sl-sbanner__whatsapp { border: 0; margin: 0; font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sl-sbanner__whatsapp-missing[hidden] { display: none; }
.sl-sbanner__whatsapp.is-pending:focus-visible { outline: 2px solid var(--sb-email-btn-text); outline-offset: -4px; }

/* 30. Hero: a soft top scrim keeps the transparent header legible over bright film frames (windows, curtains) */
body.sl-hero-transparent-header-tone-light .sl-home-hero .sl-hero__overlay::before { content: ""; position: absolute; inset: 0 0 auto 0; height: clamp(110px, 24%, 220px); background: linear-gradient(to bottom, rgb(23 20 18 / .34), rgb(23 20 18 / 0)); pointer-events: none; }

/* 31. Administrators only: markers on sections that still show temporary sample content */
.sl-temp-tag { position: absolute; top: 10px; left: 10px; z-index: 45; max-width: calc(100% - 20px); padding: 5px 9px; border-radius: 3px; background: rgb(23 20 18 / .86); color: #fff; font: 600 10px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
@media print { .sl-temp-tag { display: none; } }

/* 32. iPhone and iPad: the page behind an open overlay is pinned (sl-system.js sets the top offset), so a drawer stays on the real bottom edge. */
html.sl-page-pinned body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* 33. Review cards on phones: visibly more compact and balanced (written notes; the video reels are sized by their Customizer values) */
@media (max-width: 767px) {
	.sl-written-testimonials[data-written-testimonials] { --wt-card-height-m: 330px; }
	.sl-written-testimonials__card-content { padding: 18px; }
	.sl-written-testimonials__avatar { width: 38px; height: 38px; }
	.sl-written-testimonials__quote { margin-top: 12px; font-size: 18px; line-height: 1.3; }
	.sl-written-testimonials__review-images { margin-top: 10px; gap: 8px; }
	.sl-written-testimonials__review-image, .sl-written-testimonials__review-image img { width: 56px; height: 56px; }
	.sl-written-testimonials__product-review { margin-top: 10px; padding: 6px 12px 6px 6px; }
	.sl-written-testimonials__product-image { width: 44px; height: 44px; }
	.sl-written-testimonials__product-image img { width: 42px; height: 42px; }
	.sl-written-testimonials__product { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.25; }
}

/* 34. The contact card on phones: the same rows, tighter, so the card stays compact */
@media (max-width: 600px) {
	.sl-contact-sheet .sl-sheet__panel { padding: 18px 18px 16px; }
	.sl-contact-sheet .sl-support__channels { gap: 8px; }
	.sl-contact-sheet .sl-support__link { padding: 8px 10px; row-gap: 0; }
	.sl-contact-sheet .sl-support__action { padding: 8px 12px; }
	.sl-contact-sheet .sl-support__meta { gap: 10px 14px; padding-top: 12px; margin-top: 12px; }
	.sl-contact-sheet .sl-support__meta dt { font-size: 10.5px; }
	.sl-contact-sheet .sl-support__meta dd { margin-top: 2px; font-size: 13.5px; line-height: 1.35; }
	.sl-contact-sheet .sl-sheet__foot { margin-top: 12px; }
}