/**
 * Shopping list tray (RFC-002). Scoped to .cosm-sl-*.
 * Tray/FAB tokens live in dossier-design-tokens.css on .cosm-sl-root (Porto-safe).
 */

.cosm-sl-root {
	position: relative;
	z-index: var(--cosm-sl-z);
	box-sizing: border-box;
}

.cosm-sl-root *,
.cosm-sl-root *::before,
.cosm-sl-root *::after {
	box-sizing: border-box;
}

/* ——— FAB: primary control on all breakpoints (no side strip peek) ——— */
/* High specificity + resets: WooCommerce / themes often restyle `button` on single product; match grid (circle) everywhere. */
body .cosm-sl-root button.cosm-sl-fab[type='button'] {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	display: flex;
	position: fixed;
	bottom: 1.5rem;
	right: 1rem;
	width: var(--cosm-sl-fab-size) !important;
	height: var(--cosm-sl-fab-size) !important;
	min-width: var(--cosm-sl-fab-size) !important;
	min-height: var(--cosm-sl-fab-size) !important;
	max-width: var(--cosm-sl-fab-size) !important;
	max-height: var(--cosm-sl-fab-size) !important;
	padding: 0 !important;
	margin: 0;
	border: none !important;
	border-radius: var(--cosm-sl-fab-radius) !important;
	background: var(--cosm-sl-primary) !important;
	color: #fff !important;
	cursor: pointer;
	box-shadow: var(--cosm-sl-fab-shadow);
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	z-index: var(--cosm-sl-z);
	line-height: 1;
	font-family: inherit;
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: none;
	letter-spacing: normal;
	text-align: center;
	transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

body .cosm-sl-root button.cosm-sl-fab[type='button']:hover {
	background: color-mix(in srgb, var(--cosm-sl-primary) 92%, #000) !important;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
	color: #fff !important;
}

body .cosm-sl-root button.cosm-sl-fab[type='button']:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--cosm-sl-primary) 55%, #fff);
	outline-offset: 3px;
}

/*
 * Panel controls: WooCommerce / themes often restyle `button` and `.button` on single
 * product (solid fills, borders). Match dossier grid: ghost close row, green Clear,
 * neutral outline Copy/Email, subtle remove. High specificity + !important on wins.
 */
/* Dismiss strip: themes often set display/width on single-product; lock layout. */
body .cosm-sl-root .cosm-sl-panel .cosm-sl-dismiss-strip,
body .cosm-sl-root .cosm-sl-panel .cosm-sl-header-dismiss,
body .cosm-sl-root .cosm-sl-panel .cosm-sl-mobile-dismiss {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

body .cosm-sl-root .cosm-sl-panel button.cosm-sl-dismiss-btn[type='button'],
body .cosm-sl-root .cosm-sl-panel button.cosm-sl-header-close[type='button'],
body .cosm-sl-root .cosm-sl-panel button.cosm-sl-sheet-close[type='button'] {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.4rem !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 44px !important;
	height: auto !important;
	padding: 0.25rem 0.35rem 0.25rem 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 6px !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--cosm-sl-panel-text) !important;
	font: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.25 !important;
	text-align: left !important;
	vertical-align: unset !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}

body .cosm-sl-root .cosm-sl-panel .cosm-sl-dismiss-label,
body .cosm-sl-root .cosm-sl-panel .cosm-sl-header-close-label,
body .cosm-sl-root .cosm-sl-panel .cosm-sl-sheet-close-label {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

body .cosm-sl-root .cosm-sl-panel button.cosm-sl-dismiss-btn .cosm-sl-arrow--collapse,
body .cosm-sl-root .cosm-sl-panel button.cosm-sl-header-close .cosm-sl-arrow--collapse,
body .cosm-sl-root .cosm-sl-panel button.cosm-sl-sheet-close .cosm-sl-arrow--collapse {
	display: block !important;
	flex: 0 0 auto !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	min-height: 22px !important;
}

body .cosm-sl-root .cosm-sl-panel button.cosm-sl-dismiss-btn[type='button']:hover,
body .cosm-sl-root .cosm-sl-panel button.cosm-sl-dismiss-btn[type='button']:focus-visible,
body .cosm-sl-root .cosm-sl-panel button.cosm-sl-header-close[type='button']:hover,
body .cosm-sl-root .cosm-sl-panel button.cosm-sl-header-close[type='button']:focus-visible,
body .cosm-sl-root .cosm-sl-panel button.cosm-sl-sheet-close[type='button']:hover,
body .cosm-sl-root .cosm-sl-panel button.cosm-sl-sheet-close[type='button']:focus-visible {
	color: var(--cosm-sl-primary-text, #27500a) !important;
	background: color-mix(in srgb, var(--cosm-sl-primary) 10%, transparent) !important;
	background-color: color-mix(in srgb, var(--cosm-sl-primary) 10%, transparent) !important;
	outline: 2px solid color-mix(in srgb, var(--cosm-sl-primary) 40%, transparent);
	outline-offset: 2px;
	box-shadow: none !important;
}

/* Clear all — Ökonoova `.sl-clear`: muted uppercase text (design §6.16 shopping list) */
body .cosm-sl-root button.cosm-sl-clear[type='button'] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0.25rem 0 !important;
	min-height: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	color: rgba(74, 65, 58, 0.45) !important;
	box-shadow: none !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	line-height: 1.2 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	font-family: var(--cosmetics-dossier-font-body, inherit) !important;
	cursor: pointer;
	text-align: right;
	white-space: nowrap;
}

body .cosm-sl-root button.cosm-sl-clear[type='button']:hover,
body .cosm-sl-root button.cosm-sl-clear[type='button']:focus-visible {
	background: none !important;
	background-color: transparent !important;
	color: var(--cosm-sl-primary) !important;
	outline: none;
	box-shadow: none !important;
}

body .cosm-sl-root .cosm-sl-panel button.button.cosm-sl-copy[type='button'],
body .cosm-sl-root .cosm-sl-panel button.button.cosm-sl-mailto[type='button'] {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin: 0 !important;
	padding: 0.55rem 0.85rem !important;
	min-height: var(--cosm-btn-min-height, 44px) !important;
	height: auto !important;
	line-height: 1.25 !important;
	font-family: var(--cosmetics-dossier-font-body, inherit) !important;
	font-size: 0.83rem !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border-radius: var(--cosm-pill-radius, 9999px) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
}

/* Copy list — `btn-dark`: body text fill; hover → primary (design §6.16) */
body .cosm-sl-root .cosm-sl-panel button.button.cosm-sl-copy[type='button'] {
	border: 1px solid var(--cosm-sl-panel-text) !important;
	background: var(--cosm-sl-panel-text) !important;
	background-color: var(--cosm-sl-panel-text) !important;
	color: #fff !important;
}

body .cosm-sl-root .cosm-sl-panel button.button.cosm-sl-copy[type='button']:hover,
body .cosm-sl-root .cosm-sl-panel button.button.cosm-sl-copy[type='button']:focus-visible {
	border-color: var(--cosm-sl-primary) !important;
	background: var(--cosm-sl-primary) !important;
	background-color: var(--cosm-sl-primary) !important;
	color: #fff !important;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--cosm-sl-primary) 22%, transparent) !important;
}

/* Email — `btn-outline` inside disclosure */
body .cosm-sl-root .cosm-sl-panel button.button.cosm-sl-mailto[type='button'] {
	border: 1px solid var(--cosm-sl-primary) !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--cosm-sl-primary) !important;
	font-size: 0.78rem !important;
}

body .cosm-sl-root .cosm-sl-panel button.button.cosm-sl-mailto[type='button']:hover,
body .cosm-sl-root .cosm-sl-panel button.button.cosm-sl-mailto[type='button']:focus-visible {
	border-color: var(--cosm-sl-primary) !important;
	background: var(--cosm-sl-primary) !important;
	background-color: var(--cosm-sl-primary) !important;
	color: #fff !important;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--cosm-sl-primary) 22%, transparent) !important;
}

body .cosm-sl-root button.cosm-sl-item-remove[type='button'] {
	appearance: none;
	-webkit-appearance: none;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: rgba(74, 65, 58, 0.35) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	font-family: inherit !important;
	cursor: pointer;
	text-transform: none !important;
	border-radius: 0;
}

body .cosm-sl-root button.cosm-sl-item-remove[type='button']:hover,
body .cosm-sl-root button.cosm-sl-item-remove[type='button']:focus-visible {
	color: var(--cosm-sl-panel-text) !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.cosm-sl-fab-icon {
	display: block;
	width: 20px;
	height: 20px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cosm-sl-fab-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: #c62828;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}

/* ——— Backdrop (tablet) ——— */
.cosm-sl-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.15);
	z-index: calc(var(--cosm-sl-z) - 1);
}

/* ——— Tray shell ——— */
.cosm-sl-tray {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	pointer-events: none;
	z-index: var(--cosm-sl-z);
}

body.admin-bar .cosm-sl-tray {
	top: 32px;
	height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .cosm-sl-tray {
		top: 46px;
		height: calc(100vh - 46px);
	}
}

.cosm-sl-tray * {
	pointer-events: auto;
}

/* Desktop + tablet: hide vertical strip; panel fully off-screen when closed (no sneak peek). */
@media (min-width: 480px) {
	.cosm-sl-tray {
		overflow: hidden;
	}

	.cosm-sl-handle {
		display: none !important;
	}

	.cosm-sl-slide {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		width: var(--cosm-sl-panel-w);
		height: 100%;
		max-height: 100vh;
		transform: translate3d(100%, 0, 0);
		transition: transform 250ms ease;
		backface-visibility: hidden;
	}

	.cosm-sl-root.cosm-sl-expanded .cosm-sl-slide {
		transform: translate3d(0, 0, 0);
	}

	/* Panel is fixed and overlays the page — no body padding (that was shifting the whole layout left). */
}

/* Legacy handle (hidden on desktop; kept for DOM / future). */
.cosm-sl-handle {
	flex: 0 0 var(--cosm-sl-handle-w);
	width: var(--cosm-sl-handle-w);
	height: auto;
	align-self: center;
	margin: 0;
	padding: 0.5rem 0.35rem;
	border: none;
	border-radius: 6px 0 0 6px;
	border-left: 1px solid var(--cosm-sl-border);
	background: var(--cosm-sl-panel-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	cursor: pointer;
	color: var(--cosm-sl-primary-text);
	transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.cosm-sl-handle:hover,
.cosm-sl-handle:focus-visible {
	border-color: color-mix(in srgb, var(--cosm-sl-primary) 35%, var(--cosm-sl-border));
	background: color-mix(in srgb, var(--cosm-sl-primary-light) 40%, var(--cosm-sl-panel-bg));
	outline: none;
	box-shadow: none;
}

.cosm-sl-handle-badge {
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--cosm-sl-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}

.cosm-sl-handle-label {
	font-size: 9px;
	color: var(--color-text-tertiary, #666);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	letter-spacing: 0.06em;
}

.cosm-sl-handle-chevron {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 6px solid var(--cosm-sl-primary);
	transition: transform 250ms ease;
}

.cosm-sl-root.cosm-sl-expanded .cosm-sl-handle-chevron {
	transform: rotate(180deg);
}

/* Panel — accent + card shadow (Ökonoova tray) */
.cosm-sl-panel {
	flex: 0 0 var(--cosm-sl-panel-w);
	width: var(--cosm-sl-panel-w);
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--cosm-sl-panel-bg);
	color: var(--cosm-sl-panel-text);
	border-left: 1px solid var(--cosm-sl-border);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
	max-height: 100%;
	overflow: hidden;
}

/* Headings: block theme/Woo h2 rules (font size, margins); display font from dossier tokens */
.cosm-sl-root .cosm-sl-panel h2.cosm-sl-title,
.cosm-sl-root .cosm-sl-panel h2.cosm-sl-mobile-title {
	margin: 0;
	padding: 0;
	font-family: var(--cosmetics-dossier-font-display, inherit);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cosm-sl-panel-text);
}

.cosm-sl-mobile-bar {
	display: none;
}

.cosm-sl-header {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	background: color-mix(in srgb, var(--cosmetics-dossier-surface-fog, #f4f4f4) 38%, var(--cosm-sl-panel-bg));
	border-bottom: 1px solid var(--cosm-sl-border);
	flex-shrink: 0;
}

/*
 * Dismiss strip: mobile + desktop use separate DOM (breakpoint switching). Shared layout
 * class keeps the strip full-width flex column so themes don’t treat the wrapper as inline.
 */
.cosm-sl-dismiss-strip {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	min-width: 0;
}

/* Top strip: hide / collapse */
.cosm-sl-header-dismiss {
	padding: 0.4rem 0.65rem 0.45rem;
	background: transparent;
	border-bottom: 1px solid var(--cosm-sl-border);
	min-width: 0;
}

.cosm-sl-dismiss-btn,
.cosm-sl-header-close,
.cosm-sl-sheet-close {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 0.25rem 0.35rem 0.25rem 0;
	margin: 0;
	border: none;
	background: none;
	color: var(--cosm-sl-panel-text);
	cursor: pointer;
	border-radius: var(--cosm-btn-radius, 4px);
	font: inherit;
	text-align: left;
}

.cosm-sl-dismiss-label,
.cosm-sl-header-close-label,
.cosm-sl-sheet-close-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: clamp(0.8125rem, 0.35vw + 0.78rem, 0.9375rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.25;
}

/* Right-edge panel: chevron points toward the edge = “collapse away” (filled path for mask) */
.cosm-sl-arrow--collapse {
	display: block;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cosm-sl-dismiss-btn:hover,
.cosm-sl-dismiss-btn:focus-visible,
.cosm-sl-header-close:hover,
.cosm-sl-header-close:focus-visible,
.cosm-sl-sheet-close:hover,
.cosm-sl-sheet-close:focus-visible {
	color: var(--cosm-sl-primary-text, #27500a);
	background: color-mix(in srgb, var(--cosm-sl-primary) 10%, transparent);
	outline: 2px solid color-mix(in srgb, var(--cosm-sl-primary) 40%, transparent);
	outline-offset: 2px;
}

/* My account + Products — Ökonoova `.sl-header-nav` horizontal strip */
.cosm-sl-header-nav {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	border-bottom: 1px solid var(--cosm-sl-border);
}

.cosm-sl-header-nav__row {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	margin: 0;
	border: none;
}

.cosm-sl-header-nav__row + .cosm-sl-header-nav__row {
	border-left: 1px solid var(--cosm-sl-border);
}

.cosm-sl-header-nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-width: 0;
	width: 100%;
	height: 100%;
	padding: 10px 8px;
	text-decoration: none;
	color: rgba(74, 65, 58, 0.55);
	border: none;
	border-radius: 0;
	background: transparent;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.cosm-sl-header-nav-link .cosm-sl-title {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	line-height: 1.2;
}

.cosm-sl-header-nav-link:hover,
.cosm-sl-header-nav-link:focus-visible {
	color: var(--cosm-sl-primary);
	background: transparent;
	text-decoration: none;
}

.cosm-sl-header-nav-link:hover .cosm-sl-header-nav-text,
.cosm-sl-header-nav-link:focus-visible .cosm-sl-header-nav-text {
	text-decoration: none;
}

.cosm-sl-header-nav-link:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--cosm-sl-primary) 40%, transparent);
	outline-offset: 2px;
}


/* Second row: list title + Clear all (padded, actions separated) */
.cosm-sl-header-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1rem 1rem;
	background: var(--cosm-sl-panel-bg);
}

.cosm-sl-header-main {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
	min-width: 0;
}

.cosm-sl-header-icon {
	width: 18px;
	height: 18px;
	opacity: 0.7;
	background: var(--cosm-sl-primary);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cosm-sl-header-icon.cosm-sl-header-icon--account {
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cosm-sl-header-icon.cosm-sl-header-icon--products {
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cosm-sl-title {
	flex: 1;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	min-width: 0;
}

.cosm-sl-clear {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.25rem 0;
	min-height: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: rgba(74, 65, 58, 0.45);
	text-decoration: none;
	cursor: pointer;
	font-family: var(--cosmetics-dossier-font-body, inherit);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: right;
	white-space: nowrap;
}

.cosm-sl-clear:hover,
.cosm-sl-clear:focus-visible {
	background: none;
	color: var(--cosm-sl-primary);
	outline: none;
	box-shadow: none;
}

.cosm-sl-clear--hidden {
	visibility: hidden;
}

.cosm-sl-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 4px 0;
	min-height: 120px;
	background: var(--cosm-sl-panel-bg);
}

.cosm-sl-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2rem 1rem;
	gap: 0.5rem;
}

.cosm-sl-empty-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(70, 93, 82, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	color: var(--cosm-sl-primary, #465D52);
	margin-bottom: 0.25rem;
}

.cosm-sl-empty-title {
	font-family: var(--cosmetics-dossier-font-display, 'Playfair Display', Georgia, serif);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cosm-sl-panel-text, #4A413A);
	line-height: 1.3;
}

.cosm-sl-empty-body {
	font-size: 0.8125rem;
	color: rgba(74, 65, 58, 0.55);
	line-height: 1.5;
	max-width: 180px;
}

.cosm-sl-item {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 10px 12px;
	align-items: start;
	padding: 10px 16px;
	border-bottom: 1px solid var(--cosmetics-dossier-surface-fog, #f4f4f4);
}

.cosm-sl-item-thumb {
	width: 52px;
	height: 52px;
	border-radius: 6px;
	border: 1px solid var(--cosm-sl-border);
	overflow: hidden;
	background: color-mix(in srgb, var(--cosm-sl-primary-light) 55%, var(--cosm-sl-panel-bg));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.cosm-sl-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cosm-sl-item-meta {
	flex: 1;
	min-width: 0;
}

.cosm-sl-item-brand {
	display: block;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cosm-sl-primary, #465D52);
}

.cosm-sl-item-name {
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--cosm-sl-panel-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cosm-sl-item-price {
	font-size: 12px;
	font-weight: 600;
	color: var(--cosm-sl-panel-text);
	margin-top: 2px;
}

.cosm-sl-item-fit {
	display: block;
	font-size: 9px;
	color: var(--cosm-sl-primary-text, #27500a);
	margin-top: 3px;
	line-height: 1.35;
}

.cosm-sl-item-fit__label {
	font-weight: 600;
	margin-right: 0.2em;
}

.cosm-sl-item-note {
	width: 100%;
	margin-top: 4px;
	padding: 3px 6px;
	border: 1px solid var(--cosm-sl-border);
	border-radius: 4px;
	font-size: 12px;
	color: var(--cosm-sl-panel-text);
	background: var(--cosm-sl-panel-bg);
	resize: none;
	min-height: 28px;
	box-sizing: border-box;
}

.cosm-sl-item-note:focus {
	outline: none;
	border-color: var(--cosm-sl-primary);
}

.cosm-sl-item-remove {
	align-self: start;
	padding: 0;
	margin-top: 2px;
	border: none;
	background: none;
	color: rgba(74, 65, 58, 0.35);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.cosm-sl-item-remove:hover,
.cosm-sl-item-remove:focus-visible {
	color: var(--cosm-sl-panel-text);
}

.cosm-sl-footer {
	padding: 14px 16px;
	border-top: 1px solid var(--cosm-sl-border);
	background: var(--cosm-sl-panel-bg);
	flex-shrink: 0;
}

.cosm-sl-footer--hidden {
	display: none;
}

.cosm-sl-estimate {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 12px;
}

.cosm-sl-estimate-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(74, 65, 58, 0.45);
}

.cosm-sl-estimate-val {
	font-family: var(--cosmetics-dossier-font-display, 'Playfair Display', Georgia, serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--cosm-sl-panel-text, #4A413A);
}

.cosm-sl-actions {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* Copy / Email: base layout; chrome enforced above (body .cosm-sl-root …) for Woo single product */
.cosm-sl-copy.button,
.cosm-sl-mailto.button {
	width: 100%;
	text-align: center;
}

.cosm-sl-manual-copy {
	margin-bottom: 0.75rem;
	padding: 0.5rem;
	border: 1px solid var(--cosm-sl-border);
	border-radius: var(--cosm-btn-radius, 4px);
	background: color-mix(in srgb, var(--cosm-sl-primary-light) 35%, var(--cosm-sl-panel-bg));
}

.cosm-sl-manual-copy-intro {
	margin: 0 0 0.35rem;
	font-size: 11px;
	color: var(--color-text-secondary, #555);
}

.cosm-sl-manual-copy-ta {
	width: 100%;
	min-height: 120px;
	box-sizing: border-box;
	font-size: 11px;
	line-height: 1.4;
	font-family: inherit;
	color: var(--cosm-sl-panel-text);
	background: var(--cosm-sl-panel-bg);
	border-color: var(--cosm-sl-border);
}

.cosm-sl-details {
	margin: 8px 0 0;
}

.cosm-sl-details summary.cosm-sl-summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	font-family: var(--cosmetics-dossier-font-body, inherit);
	font-size: 12px;
	font-weight: 500;
	color: rgba(74, 65, 58, 0.55);
	text-align: left;
	transition: color 0.15s ease;
}

.cosm-sl-details summary.cosm-sl-summary::-webkit-details-marker {
	display: none;
}

.cosm-sl-details summary.cosm-sl-summary::after {
	content: '';
	display: block;
	width: 0.3rem;
	height: 0.3rem;
	margin-left: 0.1rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.cosm-sl-details[open] summary.cosm-sl-summary::after {
	transform: rotate(-135deg);
}

.cosm-sl-details summary.cosm-sl-summary:hover,
.cosm-sl-details summary.cosm-sl-summary:focus-visible {
	color: var(--cosm-sl-primary);
	outline: none;
	box-shadow: none;
}

.cosm-sl-export-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 0 0;
}

.cosm-sl-export-inner .button-link {
	text-align: left;
	padding: 0;
}

.cosm-sl-link-msg {
	font-size: 11px;
	color: #c62828;
	margin: 0;
}

.cosm-sl-link-field {
	width: 100%;
	font-size: 11px;
}

/* ——— Grid card + add buttons ——— */
.cosm-dg-card {
	transition: border-color 150ms ease;
}

.cosm-dg-card--in-list {
	border-color: var(--cosm-sl-in-list-card) !important;
}

.cosm-sl-card-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--cosm-sl-in-list-card);
	color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cosm-dg-card-thumb {
	position: relative;
}

.cosm-dg-card-price {
	display: block;
	font-size: 11px;
	margin-top: 4px;
	color: var(--color-text-secondary, #555);
}

.cosm-sl-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 8px;
	padding: 8px 10px;
	border: 1px solid var(--cosm-sl-border);
	border-radius: var(--cosm-btn-radius, 4px);
	background: #fff;
	color: var(--color-text-secondary, #555);
	font-size: 12px;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.cosm-sl-add-btn--grid .cosm-sl-add-btn__icon--check,
.cosm-sl-add-btn--grid .cosm-sl-add-btn__label--in {
	display: none;
}

.cosm-sl-add-btn--in-list.cosm-sl-add-btn--grid .cosm-sl-add-btn__icon--plus,
.cosm-sl-add-btn--in-list.cosm-sl-add-btn--grid .cosm-sl-add-btn__label--add {
	display: none;
}

.cosm-sl-add-btn--in-list.cosm-sl-add-btn--grid .cosm-sl-add-btn__icon--check,
.cosm-sl-add-btn--in-list.cosm-sl-add-btn--grid .cosm-sl-add-btn__label--in {
	display: inline;
}

.cosm-sl-add-btn:hover,
.cosm-sl-add-btn:focus-visible {
	border-color: var(--cosm-sl-primary);
	color: var(--cosm-sl-primary);
	outline: none;
}

.cosm-sl-add-btn--in-list {
	background: var(--cosm-sl-primary-light);
	border-color: var(--cosm-sl-primary-border);
	color: var(--cosm-sl-primary-text);
}

.cosm-sl-add-btn--detail {
	width: auto;
	margin-top: 0;
	border-radius: 4px;
	padding: 0.6rem 1.5rem;
	font-size: 0.9375rem;
	border-color: #E2DDDA;
	color: #4A413A;
	background: #fff;
	white-space: nowrap;
}

.cosm-sl-add-btn--detail .cosm-sl-add-btn__label--in {
	display: none;
}

.cosm-sl-add-btn--detail.cosm-sl-add-btn--in-list .cosm-sl-add-btn__label--add {
	display: none;
}

.cosm-sl-add-btn--detail.cosm-sl-add-btn--in-list .cosm-sl-add-btn__label--in {
	display: inline;
}

.cosmetics-dossier-primary-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* ——— Tablet: dim page behind tray (same push layout as desktop; see margin rule above) ——— */
@media (min-width: 480px) and (max-width: 782px) {
	.cosm-sl-root.cosm-sl-expanded .cosm-sl-backdrop {
		display: block;
	}
}

/* ——— Mobile bottom sheet ——— */
@media (max-width: 479px) {
	.cosm-sl-handle {
		display: none !important;
	}

	.cosm-sl-tray {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		height: auto;
		pointer-events: none;
	}

	body.admin-bar .cosm-sl-tray {
		top: auto;
	}

	.cosm-sl-slide {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 60vh;
		max-height: 85vh;
		transform: translate3d(0, 100%, 0);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: var(--cosm-sl-panel-bg);
		color: var(--cosm-sl-panel-text);
		border-radius: 12px 12px 0 0;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
		transition: transform 250ms ease;
		backface-visibility: hidden;
		width: 100%;
	}

	.cosm-sl-root.cosm-sl-expanded .cosm-sl-slide {
		transform: translate3d(0, 0, 0);
	}

	.cosm-sl-panel {
		width: 100%;
		flex: 1;
		border-left: none;
		max-height: 60vh;
		min-height: 0;
	}

	.cosm-sl-mobile-bar {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 0;
		border-bottom: 1px solid var(--cosm-sl-border);
		position: relative;
	}

	.cosm-sl-mobile-dismiss {
		min-width: 0;
		padding: 0.4rem 0.75rem 0.45rem;
		background: transparent;
		border-bottom: 1px solid var(--cosm-sl-border);
	}

	/* .cosm-sl-dismiss-btn / .cosm-sl-sheet-close: shared with desktop (see main rules) */

	.cosm-sl-mobile-title-row {
		position: relative;
		padding: 0.75rem 0.75rem 0.55rem;
		text-align: center;
	}

	.cosm-sl-sheet-drag {
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 32px;
		height: 4px;
		border-radius: 2px;
		background: var(--cosm-sl-border);
	}

	.cosm-sl-mobile-title {
		margin: 0.35rem 0 0;
		padding: 0;
		text-align: center;
		font-size: 13px;
		font-weight: 500;
	}

	.cosm-sl-header {
		display: none;
	}

	.cosm-sl-root.cosm-sl-expanded .cosm-sl-backdrop {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cosm-sl-slide,
	.cosm-sl-handle-chevron,
	.cosm-sl-fab,
	.cosm-sl-add-btn,
	.cosm-dg-card {
		transition-duration: 0ms !important;
	}
}