/* Commerce Client - Agentforce Widget Styles */

/* ── Header button ── */
.cc-header-entry {
    vertical-align: top;
    display: inline-block;
    margin: 1.1em 0 0 0.75em;
}

/* Client-side injection appends the trigger to the configured header wrapper.
   Place it before the wrapper's existing icons (account/bag), matching the
   Figma nav order, and neutralize the legacy margin so it aligns with the
   surrounding header controls. */
.cc-header-entry--injected {
    display: flex;
    align-items: center;
    order: -1;
    margin: 0;
}

/* cc_headerInjectPosition: "end" — the trigger is appended (last child) and
   should sit AFTER the container's existing icons. Beat the default order:-1
   above (and any order:0 the storefront assigns its own icons) so it renders
   last regardless of source order. */
.cc-header-entry--injected.cc-header-entry--end {
    order: 999;
}

/* Breakpoint-scoped triggers — only present when cc_headerMobileInjectSelector
   is set, in which case a desktop trigger and a mobile trigger are injected
   into (possibly different) containers. Each is hidden on the breakpoint it is
   not meant for. A single trigger (no breakpoint class) shows on every size. */
@media (max-width: 767.98px) {
    .cc-header-entry--desktop { display: none !important; }
}
@media (min-width: 768px) {
    .cc-header-entry--mobile { display: none !important; }
}

.cc-header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    box-sizing: border-box;
    background: var(--cc-trigger-surface, #000);
    color: var(--cc-trigger-text, #fff);
    border: none;
    box-shadow: inset 0 0 0 2px var(--cc-trigger-accent, transparent);
    border-radius: var(--cc-trigger-radius, 4px);
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 20px;
    white-space: nowrap;
    transition: opacity 0.15s ease;
    text-decoration: none;
}

.cc-header-button:hover  { opacity: 0.88; }
.cc-header-button:active { opacity: 0.72; }

.cc-header-button:focus-visible,
.cc-plp-chip:focus-visible {
    outline: 2px solid var(--cc-trigger-accent, #000);
    outline-offset: 2px;
}

.cc-sparkle-icon,
.cim-widget-minimized-button::before {
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1.5l2 5.5 5.5 2-5.5 2L9 16.5 7 11 1.5 9 7 7zM19 12l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1.5l2 5.5 5.5 2-5.5 2L9 16.5 7 11 1.5 9 7 7zM19 12l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Ann Taylor/LOFT three-sparkle artwork — the exact Figma glyph (one big star
   lower-left + two small stars stacked on the right), viewBox 0 0 18 18. The
   selector is activated by validated cc_triggerIcon configuration.
   This is the single-mask fallback (all three stars in one path) — used as-is
   by the SDK-owned FAB overlay below, since a ::before pseudo-element can't
   host the child spans the header/PLP-chip twinkle needs. The glyph keeps the
   solid icon color (currentColor, from the base rule) — on the overlay box
   that is the light --cc-fab-icon-color (white), matching the Figma overlay
   export. Do NOT paint it with the violet->dark gradient here: on the dark box
   that makes it near-invisible. */
html.cc-trigger-icon-three-sparkle .cc-sparkle-icon,
html.cc-trigger-icon-three-sparkle .cim-widget-minimized-button::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5137 2.99531C11.3555 3.05508 11.25 3.20625 11.25 3.375C11.25 3.54375 11.3555 3.69492 11.5137 3.75469L13.5 4.5L14.2453 6.48633C14.3051 6.64453 14.4562 6.75 14.625 6.75C14.7938 6.75 14.9449 6.64453 15.0047 6.48633L15.75 4.5L17.7363 3.75469C17.8945 3.69492 18 3.54375 18 3.375C18 3.20625 17.8945 3.05508 17.7363 2.99531L15.75 2.25L15.0047 0.263672C14.9449 0.105469 14.7938 0 14.625 0C14.4562 0 14.3051 0.105469 14.2453 0.263672L13.5 2.25L11.5137 2.99531ZM7.21055 2.57695C7.11914 2.37656 6.91875 2.25 6.70078 2.25C6.48281 2.25 6.28242 2.37656 6.19102 2.57695L4.33477 6.58477L0.326953 8.4375C0.126563 8.52891 0 8.7293 0 8.95078C0 9.17227 0.126563 9.36914 0.326953 9.46055L4.33828 11.3133L6.1875 15.3211C6.27891 15.5215 6.4793 15.648 6.69727 15.648C6.91523 15.648 7.11563 15.5215 7.20703 15.3211L9.05977 11.3098L13.0711 9.45703C13.2715 9.36563 13.398 9.16523 13.398 8.94727C13.398 8.7293 13.2715 8.52891 13.0711 8.4375L9.06328 6.58828L7.21055 2.57695ZM13.5 13.5L11.5137 14.2453C11.3555 14.3051 11.25 14.4562 11.25 14.625C11.25 14.7938 11.3555 14.9449 11.5137 15.0047L13.5 15.75L14.2453 17.7363C14.3051 17.8945 14.4562 18 14.625 18C14.7938 18 14.9449 17.8945 15.0047 17.7363L15.75 15.75L17.7363 15.0047C17.8945 14.9449 18 14.7938 18 14.625C18 14.4562 17.8945 14.3051 17.7363 14.2453L15.75 13.5L15.0047 11.5137C14.9449 11.3555 14.7938 11.25 14.625 11.25C14.4562 11.25 14.3051 11.3555 14.2453 11.5137L13.5 13.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5137 2.99531C11.3555 3.05508 11.25 3.20625 11.25 3.375C11.25 3.54375 11.3555 3.69492 11.5137 3.75469L13.5 4.5L14.2453 6.48633C14.3051 6.64453 14.4562 6.75 14.625 6.75C14.7938 6.75 14.9449 6.64453 15.0047 6.48633L15.75 4.5L17.7363 3.75469C17.8945 3.69492 18 3.54375 18 3.375C18 3.20625 17.8945 3.05508 17.7363 2.99531L15.75 2.25L15.0047 0.263672C14.9449 0.105469 14.7938 0 14.625 0C14.4562 0 14.3051 0.105469 14.2453 0.263672L13.5 2.25L11.5137 2.99531ZM7.21055 2.57695C7.11914 2.37656 6.91875 2.25 6.70078 2.25C6.48281 2.25 6.28242 2.37656 6.19102 2.57695L4.33477 6.58477L0.326953 8.4375C0.126563 8.52891 0 8.7293 0 8.95078C0 9.17227 0.126563 9.36914 0.326953 9.46055L4.33828 11.3133L6.1875 15.3211C6.27891 15.5215 6.4793 15.648 6.69727 15.648C6.91523 15.648 7.11563 15.5215 7.20703 15.3211L9.05977 11.3098L13.0711 9.45703C13.2715 9.36563 13.398 9.16523 13.398 8.94727C13.398 8.7293 13.2715 8.52891 13.0711 8.4375L9.06328 6.58828L7.21055 2.57695ZM13.5 13.5L11.5137 14.2453C11.3555 14.3051 11.25 14.4562 11.25 14.625C11.25 14.7938 11.3555 14.9449 11.5137 15.0047L13.5 15.75L14.2453 17.7363C14.3051 17.8945 14.4562 18 14.625 18C14.7938 18 14.9449 17.8945 15.0047 17.7363L15.75 15.75L17.7363 15.0047C17.8945 14.9449 18 14.7938 18 14.625C18 14.4562 17.8945 14.3051 17.7363 14.2453L15.75 13.5L15.0047 11.5137C14.9449 11.3555 14.7938 11.25 14.625 11.25C14.4562 11.25 14.3051 11.3555 14.2453 11.5137L13.5 13.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Header button and PLP chip render their own markup (createSparkleIcon() /
   headerButton.isml), so instead of the single combined-mask fallback above
   they paint each of the three stars as its own child span. The parent is a
   bare positioned container with NO mask of its own — a mask on the parent
   would clip the small-star children that sit outside the big star's
   silhouette. The big star is a static violet->dark gradient; the two small
   stars crossfade between a lit and dark state on opposite phases, matching
   the reference video where the big star never changes and the small stars
   alternate which one is lit. */
html.cc-trigger-icon-three-sparkle .cc-header-button .cc-sparkle-icon,
html.cc-trigger-icon-three-sparkle .cc-plp-chip .cc-sparkle-icon {
    position: relative;
    background: none;
    -webkit-mask: none;
    mask: none;
}

/* Each star is its own absolutely-positioned masked span. The three masks are
   the exact Figma sub-paths (viewBox 0 0 18 18) so the composite lines up with
   the single-mask glyph above. The big star is static; the two small stars
   twinkle by OPACITY on opposite phases — an opacity pulse (not a colour swap)
   so the blink works identically whatever the fill is (black on the pill,
   gradient on the chip/mobile mark, white on the overlay box). */
.cc-sparkle-icon__star {
    position: absolute;
    inset: 0;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    /* Default fill: the Figma violet->dark gradient (PLP chip + mobile header).
       Per-surface overrides below repaint it black (desktop pill) or white
       (overlay box). */
    background-image: linear-gradient(135deg, #998EFF 0%, #1A1919 100%);
}

.cc-sparkle-icon__star--big {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.21055 2.57695C7.11914 2.37656 6.91875 2.25 6.70078 2.25C6.48281 2.25 6.28242 2.37656 6.19102 2.57695L4.33477 6.58477L0.326953 8.4375C0.126563 8.52891 0 8.7293 0 8.95078C0 9.17227 0.126563 9.36914 0.326953 9.46055L4.33828 11.3133L6.1875 15.3211C6.27891 15.5215 6.4793 15.648 6.69727 15.648C6.91523 15.648 7.11563 15.5215 7.20703 15.3211L9.05977 11.3098L13.0711 9.45703C13.2715 9.36563 13.398 9.16523 13.398 8.94727C13.398 8.7293 13.2715 8.52891 13.0711 8.4375L9.06328 6.58828L7.21055 2.57695Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.21055 2.57695C7.11914 2.37656 6.91875 2.25 6.70078 2.25C6.48281 2.25 6.28242 2.37656 6.19102 2.57695L4.33477 6.58477L0.326953 8.4375C0.126563 8.52891 0 8.7293 0 8.95078C0 9.17227 0.126563 9.36914 0.326953 9.46055L4.33828 11.3133L6.1875 15.3211C6.27891 15.5215 6.4793 15.648 6.69727 15.648C6.91523 15.648 7.11563 15.5215 7.20703 15.3211L9.05977 11.3098L13.0711 9.45703C13.2715 9.36563 13.398 9.16523 13.398 8.94727C13.398 8.7293 13.2715 8.52891 13.0711 8.4375L9.06328 6.58828L7.21055 2.57695Z'/%3E%3C/svg%3E");
}

.cc-sparkle-icon__star--top,
.cc-sparkle-icon__star--bottom {
    animation: cc-star-twinkle 3s ease-in-out infinite;
}

.cc-sparkle-icon__star--top {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5137 2.99531C11.3555 3.05508 11.25 3.20625 11.25 3.375C11.25 3.54375 11.3555 3.69492 11.5137 3.75469L13.5 4.5L14.2453 6.48633C14.3051 6.64453 14.4562 6.75 14.625 6.75C14.7938 6.75 14.9449 6.64453 15.0047 6.48633L15.75 4.5L17.7363 3.75469C17.8945 3.69492 18 3.54375 18 3.375C18 3.20625 17.8945 3.05508 17.7363 2.99531L15.75 2.25L15.0047 0.263672C14.9449 0.105469 14.7938 0 14.625 0C14.4562 0 14.3051 0.105469 14.2453 0.263672L13.5 2.25L11.5137 2.99531Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5137 2.99531C11.3555 3.05508 11.25 3.20625 11.25 3.375C11.25 3.54375 11.3555 3.69492 11.5137 3.75469L13.5 4.5L14.2453 6.48633C14.3051 6.64453 14.4562 6.75 14.625 6.75C14.7938 6.75 14.9449 6.64453 15.0047 6.48633L15.75 4.5L17.7363 3.75469C17.8945 3.69492 18 3.54375 18 3.375C18 3.20625 17.8945 3.05508 17.7363 2.99531L15.75 2.25L15.0047 0.263672C14.9449 0.105469 14.7938 0 14.625 0C14.4562 0 14.3051 0.105469 14.2453 0.263672L13.5 2.25L11.5137 2.99531Z'/%3E%3C/svg%3E");
}

.cc-sparkle-icon__star--bottom {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 13.5L11.5137 14.2453C11.3555 14.3051 11.25 14.4562 11.25 14.625C11.25 14.7938 11.3555 14.9449 11.5137 15.0047L13.5 15.75L14.2453 17.7363C14.3051 17.8945 14.4562 18 14.625 18C14.7938 18 14.9449 17.8945 15.0047 17.7363L15.75 15.75L17.7363 15.0047C17.8945 14.9449 18 14.7938 18 14.625C18 14.4562 17.8945 14.3051 17.7363 14.2453L15.75 13.5L15.0047 11.5137C14.9449 11.3555 14.7938 11.25 14.625 11.25C14.4562 11.25 14.3051 11.3555 14.2453 11.5137L13.5 13.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 13.5L11.5137 14.2453C11.3555 14.3051 11.25 14.4562 11.25 14.625C11.25 14.7938 11.3555 14.9449 11.5137 15.0047L13.5 15.75L14.2453 17.7363C14.3051 17.8945 14.4562 18 14.625 18C14.7938 18 14.9449 17.8945 15.0047 17.7363L15.75 15.75L17.7363 15.0047C17.8945 14.9449 18 14.7938 18 14.625C18 14.4562 17.8945 14.3051 17.7363 14.2453L15.75 13.5L15.0047 11.5137C14.9449 11.3555 14.7938 11.25 14.625 11.25C14.4562 11.25 14.3051 11.3555 14.2453 11.5137L13.5 13.5Z'/%3E%3C/svg%3E");
    /* Opposite phase of --top: half the 3s cycle offset so exactly one small
       star is lit at a time, matching the reference video's alternating swap. */
    animation-delay: 1.5s;
}

@keyframes cc-star-twinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* ── Per-surface sparkle fill ──
   Desktop "Ask" header pill: solid near-black glyph next to the label, exactly
   as the Figma D_Header export. (Overridden back to gradient on mobile below,
   where the mark is a bare borderless sparkle per the Figma M_Header export.) */
html.cc-trigger-icon-three-sparkle .cc-header-button .cc-sparkle-icon__star {
    background-image: none;
    background-color: #1A1919;
}

/* Overlay/PDP box or any child-star surface flagged --on-dark: white glyph on
   the gradient-filled box (matches the Figma overlay export). */
html.cc-trigger-icon-three-sparkle .cc-sparkle-icon--on-dark .cc-sparkle-icon__star {
    background-image: none;
    background-color: var(--cc-fab-icon-color, #fff);
}

html.cc-trigger-icon-three-sparkle .cc-header-button,
html.cc-trigger-icon-three-sparkle .cc-plp-chip {
    background:
        linear-gradient(var(--cc-trigger-surface, #fff), var(--cc-trigger-surface, #fff)) padding-box,
        linear-gradient(135deg, var(--cc-trigger-accent, #998EFF), #1A1919) border-box !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
}

.cc-header-button .cc-sparkle-icon {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--cc-header-icon-color, #fff);
}

.cc-header-button-label { letter-spacing: 0.01em; }

@media (max-width: 767.98px) {
    .cc-header-button-label { display: none; }
    .cc-header-button        { min-width: 36px; padding: 8px; }
    .cc-header-entry:not(.cc-header-entry--injected) { margin: 1.1em 0 0 0.5em; }

    /* The mobile design uses a free-standing animated mark, not the boxed
       desktop trigger. Its 36px button remains a full keyboard/pointer target. */
    html.cc-trigger-icon-three-sparkle .cc-header-button {
        width: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 7px;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    html.cc-trigger-icon-three-sparkle .cc-header-button .cc-sparkle-icon {
        width: 22px;
        height: 22px;
    }

    /* The mobile header mark is a bare gradient sparkle (Figma M_Header), not
       the desktop pill's black glyph — repaint the stars back to the gradient. */
    html.cc-trigger-icon-three-sparkle .cc-header-button .cc-sparkle-icon__star {
        background-image: linear-gradient(135deg, #998EFF 0%, #1A1919 100%);
        background-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-header-button,
    .cc-plp-chip {
        transition: none;
    }

    .cc-sparkle-icon__star {
        animation: none;
        opacity: 1;
    }
}

/* ── PLP AI-filter chip ── */
/* !important: injected into an arbitrary storefront filter-bar container,
   whose own generic "button" selectors (e.g. width/background/border resets
   for its own filter tabs) can otherwise out-specificity a plain class
   selector — this is the narrowest specificity bump that still wins. */
.cc-plp-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    width: 32px !important;
    height: 32px !important;
    box-sizing: border-box !important;
    margin: 0 10px 0 0 !important;
    background: var(--cc-trigger-surface, #000) !important;
    color: var(--cc-trigger-accent, #fff) !important;
    border: none !important;
    box-shadow: inset 0 0 0 2px var(--cc-trigger-accent, transparent) !important;
    border-radius: var(--cc-trigger-radius, 999px) !important;
    padding: 0 !important;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.cc-plp-chip:hover  { opacity: 0.85 !important; }
.cc-plp-chip:active { opacity: 0.7 !important; }

.cc-plp-chip .cc-sparkle-icon {
    display: block;
    width: 15px;
    height: 15px;
}

/* ── Full-height side panel ── */
/* z-index: keep the open panel above the site's fixed third-party overlays
   (e.g. an influencer/shoppable-video player, an accessibility toolbar) that
   dock at high z-index and would otherwise land on top of the panel. The panel
   is an opaque surface — full-screen on mobile, a right rail on desktop — and
   these overlays sit within its footprint on both, so winning the stacking
   order makes them paint behind it. They stay in the DOM and return the moment
   the panel closes (nothing hidden → no accessibility-widget concern). Applied
   at both breakpoints; desktop needs it too since the video docks bottom-right,
   inside the rail. We use the max z-index; anything below it is covered
   outright. A widget also pinned at the max value can tie on DOM order and may
   still need a targeted per-widget fallback. */
.cim-widget-dialog.full-height.bottom-left,
.cim-widget-dialog.full-height.bottom-right {
    top: var(--cc-panel-top, 0) !important;
    bottom: 0 !important;
    height: var(--cc-panel-height, 100dvh) !important;
    border-radius: 0 !important;
    width: min(var(--cc-panel-width, 480px), 100vw) !important;
    box-shadow:
        -10px 0 12px #00000014,
        10px 0 12px #00000014 !important;
    z-index: 2147483647 !important;
}

/* ── FAB ── */
body.cc-hide-fab .cim-widget-minimized-container { display: none !important; }

/* cc_widgetPosition "center-right": pin the floating box to the right edge
   (used on the PDP). The SDK owns the container, so this overrides its inline
   bottom/left placement. The vertical anchor sits BELOW dead-center by
   default (between center-right and bottom-right, per the PDP design); tune it
   per site with --cc-fab-top (0% = top, 50% = centered, higher = lower). */
html.cc-fab-center-right .cim-widget-minimized-container {
    position: fixed !important;
    top: var(--cc-fab-top, 72%) !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%) !important;
}

/* Hide every icon the SDK itself may render (img or inline svg) so our own
   ::before icon below is always the only one visible — a single, reliable
   icon regardless of which markup the SDK uses internally. */
.cim-widget-minimized-icon-img,
.cim-widget-minimized-button > svg {
    display: none !important;
}

html.cc-trigger-themed .cim-widget-minimized-button {
    background: linear-gradient(
        135deg,
        var(--cc-fab-gradient-start, var(--cc-trigger-accent, #998EFF)),
        var(--cc-fab-gradient-end, #1A1919)
    ) !important;
    border-radius: var(--cc-trigger-radius, 4px) !important;
    /* Box sized to the desktop Figma export (D_Sparkle Overlay Button.svg):
       a 50x50 gradient square. The SDK sets its own box size, so we win with
       !important and center our glyph. The mobile M_ export (34x34) is applied
       in the max-width rule below. */
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Drop shadow matching the export's filter (stdDeviation 2, black 25%). */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25) !important;
}

.cim-widget-minimized-button::before {
    content: '';
    display: block;
    /* Glyph is 22x22 within the 50x50 box, per the Figma export's 22x22 clip
       region centered in the square (44% of the box). */
    width: 22px;
    height: 22px;
    color: var(--cc-fab-icon-color, #fff);
}

/* Mobile FAB — the Figma M_Sparkle Overlay Button.svg export is a 34x34 box
   with a proportional ~15x15 glyph (same 44% ratio). */
@media (max-width: 767.98px) {
    html.cc-trigger-themed .cim-widget-minimized-button {
        width: 34px !important;
        height: 34px !important;
    }

    .cim-widget-minimized-button::before {
        width: 15px;
        height: 15px;
    }
}

html.cc-trigger-themed .cim-widget-minimized-button:focus-visible {
    outline: 2px solid var(--cc-trigger-accent, #000);
    outline-offset: 2px;
}

/* ── Page-push (cc_pagePush = true only) ── */
@media (min-width: 768px) {
    body.cc-panel-left,
    body.cc-panel-right {
        transition: margin-left 0.25s ease-out, margin-right 0.25s ease-out;
    }
    body.cc-panel-open.cc-panel-left  { margin-left:  min(var(--cc-panel-width, 480px), 50vw); }
    body.cc-panel-open.cc-panel-right { margin-right: min(var(--cc-panel-width, 480px), 50vw); }
}