/* Floating cosmetic fitting room. */
.ds-fit-button, #ds-fitting-room button, #ds-fitting-room select {
    font: bold 12px Arial, Helvetica, sans-serif; cursor: pointer;
    border: 1px solid #b6d4e6; border-radius: 5px; padding: 7px 10px;
    background: #fff; color: #074e8f;
}
.ds-fit-button:hover, #ds-fitting-room button:hover { background: #eaf7fc; }
.ds-fit-button:focus-visible, #ds-fitting-room :focus-visible,
.ds-card .ds-try-button:focus-visible { outline: 3px solid #d65a00; outline-offset: 3px; }
#ds-fitting-room button:disabled { color: #8b9aa4; cursor: default; background: #f3f6f8; }
.ds-card .ds-try-button {
    margin-top: 6px; background: #eaf7fc; color: #074e8f;
    border: 1px solid #94c8e2; text-shadow: none;
}
.ds-card .ds-try-button:hover { background: #d2f0fa; }
.ds-card .ds-try-button[aria-pressed="true"] { color: #fff; background: #087ba0; border-color: #087ba0; }
.ds-card .ds-try-button:disabled { background: #f0f3f5; color: #85939c; border-color: #d3dfe6; }
.ds-card.ds-in-outfit { border-color: #087ba0; box-shadow: 0 0 0 1px #087ba0; opacity: 1; }
#ds-fit-launcher {
    position: fixed; right: 18px; bottom: 20px; z-index: 4000;
    padding: 12px 16px; border: 2px solid #fff; border-radius: 24px;
    color: #fff; background: #074e8f; box-shadow: 0 3px 14px #074e8f40;
}
#ds-fit-launcher:hover { background: #096aa8; }
#ds-fitting-room {
    position: fixed; right: 18px; bottom: 20px; z-index: 4000;
    width: 304px; max-width: calc(100vw - 24px); max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px); box-sizing: border-box;
    display: flex; flex-direction: column; text-align: left;
    background: #fff; color: #33546a; border: 1px solid #81bbd8;
    border-radius: 12px; box-shadow: 0 8px 32px #05345440; overflow: hidden;
}
#ds-fitting-room[hidden], #ds-fit-launcher[hidden], #ds-fit-open[hidden] { display: none; }
.ds-fit-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 14px; background: #074e8f; color: #fff; flex-shrink: 0;
}
.ds-fit-header h3 { font-size: 15px; line-height: 20px; }
.ds-fit-header p { color: #c5e9fa; font-size: 11px; }
#ds-fitting-room #ds-fit-close { padding: 2px 9px; font-size: 22px; color: #fff; background: transparent; border-color: #ffffff60; }
.ds-fit-content { overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
#ds-fit-stage { border: 1px solid #d3e4ef; border-radius: 8px; overflow: hidden; background: #fff; }
#ds-fit-stage.bg-black { background: #151d27; }
#ds-fit-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ds-fit-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.ds-fit-playback-controls button { flex: 1; white-space: nowrap; }
#ds-fitting-room .ds-fit-playback-controls button[aria-pressed="true"]:not(:disabled) {
    color: #fff; background: #087ba0; border-color: #087ba0;
}
#ds-fitting-room select { padding: 6px 4px; font-weight: normal; max-width: 96px; }
#ds-fitting-room .ds-fit-swatch { padding: 0; width: 23px; height: 23px; border-radius: 50%; }
#ds-fitting-room .ds-fit-swatch[data-bg="white"] { background: #fff; margin-left: auto; }
#ds-fitting-room .ds-fit-swatch[data-bg="black"] { background: #151d27; }
#ds-fitting-room .ds-fit-swatch[aria-pressed="true"] { border: 2px solid #d65a00; box-shadow: 0 0 0 1px #fff inset; }
#ds-fit-status { font-size: 11px; line-height: 16px; margin: 9px 0; min-height: 16px; }
.ds-fit-list-heading { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid #deebf3; }
#ds-fitting-room #ds-fit-clear { padding: 4px 7px; font-size: 11px; }
#ds-fit-selection { margin-top: 5px; max-height: 180px; overflow-y: auto; overscroll-behavior: contain; }
.ds-fit-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #edf3f7; }
.ds-fit-item img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.ds-fit-item-text { min-width: 0; flex: 1; line-height: 15px; }
.ds-fit-item-text strong { display: block; font-size: 11px; color: #074e8f; }
.ds-fit-item-text span { display: block; overflow-wrap: anywhere; font-size: 11px; }
.ds-fit-item-text .ds-fit-error { color: #b23d28; }
.ds-fit-item-text .ds-fit-owned { color: #287149; }
#ds-fitting-room .ds-fit-remove { padding: 4px 8px; font-size: 17px; flex-shrink: 0; }
#ds-fit-total { margin-top: 8px; color: #074e8f; font-size: 11px; }
#ds-fitting-room #ds-fit-buy-all {
    width: 100%; margin-top: 8px; padding: 10px 8px; color: #fff;
    background: linear-gradient(to bottom, #ffb800, #ed8700); border: 1px solid #d47700;
}
#ds-fitting-room #ds-fit-buy-all:hover:not(:disabled) { background: #f99b16; }
#ds-fitting-room #ds-fit-buy-all:disabled { background: #f0f3f5; color: #6a7e8b; border-color: #cbdce6; }
#ds-fit-purchase-status { font-size: 11px; line-height: 16px; margin-top: 7px; overflow-wrap: anywhere; }
#ds-fit-purchase-status:empty { display: none; }
#ds-fit-purchase-status.ds-fit-error { color: #b23d28; }
#ds-fitting-room #ds-fit-retry { margin-top: 5px; font-size: 11px; }
#ds-fit-retry[hidden] { display: none; }
@media (min-width: 801px) and (max-width: 1630px) {
    body.ds-fit-open #ds-grid { margin-right: max(0px, calc(777px - 50vw)); }
}
@media (min-width: 801px) and (max-width: 965px) {
    body.ds-fit-open #ds-grid { margin-right: calc(1260px - 100vw); }
}
@media (max-width: 800px) {
    #ds-fitting-room { right: 12px; bottom: 12px; max-height: 75vh; max-height: 75dvh; }
    #ds-fit-launcher { right: 12px; bottom: 12px; }
    #ds-fit-canvas { max-height: 190px; object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-card { transition: none; }
}