.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;
}  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;
}  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;
} 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;
} 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;
} 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;
} .cosm-sl-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.15);
z-index: calc(var(--cosm-sl-z) - 1);
} .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;
} @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);
} } .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);
} .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;
} .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;
} .cosm-sl-dismiss-strip {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
min-width: 0;
} .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;
} .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;
} .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;
} .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;
} .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;
} .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;
} @media (min-width: 480px) and (max-width: 782px) {
.cosm-sl-root.cosm-sl-expanded .cosm-sl-backdrop {
display: block;
}
} @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-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;
}
}