/* EXPLORATION ONLY (throwaway branch explore/brand-f): the shop product page in brand page F's language,
   off theunideals.com only (lib/explore-product.js). Light is the design; dark falls back to F's dark tokens
   until light is approved. Loaded after shop.css and deals-pages.css, so every rule here is scoped to .xp. */

/* The colours: our orange by default, the brand's own when it saved a design or set a shop style. */
.ls-dl .xp-story { --xa: #FF5C26; --xai: #1A1613; --xt: var(--ls-tint); --xp-price: #C93F12; }
.ls-dl .xp[data-brand-design="brand"] .xp-story { --xa: var(--brand-accent); --xai: var(--brand-accent-ink); --xt: var(--brand-tone); }
.ls-dl .xp-story.xp-own { --xp-price: var(--xa); }

/* =========================================================
   The poster: the brand's colour, the photo as a print, the title, the ticket.
   ========================================================= */
.ls-dl .xp-hero { padding: clamp(14px, 2vw, 24px) 0 clamp(56px, 5.6vw, 84px); overflow-x: clip; color: var(--xai); background: var(--xa); }
/* A brand with no pattern: the band is the poster's own scalloped edge in the poster's colour, never a strip of ink. */
.ls-dl .xp-story > .dl-bband--dots { --dl-band: var(--xa); }
.ls-dl .xp-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 432px); grid-template-rows: auto auto auto 1fr; grid-template-areas: "crumbs crumbs" "art head" "art deal" "art ."; column-gap: clamp(48px, 6vw, 96px); }
.ls-dl .xp-crumbs { grid-area: crumbs; }
.ls-dl .xp-hero .ls-crumbs :is(li, a, [aria-current="page"]) { color: var(--xai); }
.ls-dl .xp-hero .ls-crumbs a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.ls-dl .xp-hero .ls-crumbs a:hover { text-decoration-color: currentColor; }
.ls-dl .xp-hero .ls-crumbs li + li::before { border-color: currentColor; opacity: .7; }
.ls-dl .xp-hero :focus-visible { outline: 2px solid var(--xai); outline-offset: 3px; }

/* The print: the photo in a white instant-print margin, deeper at the foot, on a stage that holds the prints
   behind it, the brand's round logo stuck on its corner, and the arrows. Without the script the print holds the
   swipe track over one blank print; with it, one photo at a time on a small stack of the next photos' prints. */
.ls-dl .xp-art { grid-area: art; min-width: 0; margin-top: 30px; isolation: isolate; }
.ls-dl .xp .xp-art .pdp-gallery { width: min(100%, 520px); margin-inline: auto; isolation: isolate; }
.ls-dl .xp-stage { position: relative; display: block; }
.ls-dl .xp-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: #F3EEE6; box-shadow: var(--tud-shadow-paper); transform: translate(18px, 10px) rotate(3.5deg); }
.ls-dl .xp-frame { position: relative; display: block; padding: 10px 10px 36px; border-radius: 6px; background: #FFFFFF; box-shadow: var(--tud-shadow-paper); }
.ls-dl .xp-stage--one::before { display: none; }
.ls-dl .xp-frame--model::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: #F3EEE6; box-shadow: var(--tud-shadow-paper); transform: translate(18px, 10px) rotate(3.5deg); }
.ls-dl .xp .xp-art .pdp-photos { flex-direction: row; gap: 0; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; border-radius: 3px; scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain; }
.ls-dl .xp .xp-art .pdp-photo { flex: 0 0 100%; aspect-ratio: 4 / 5; border-radius: 3px; background: var(--ls-line); scroll-snap-align: start; }
.ls-dl .xp .xp-art .pdp-photo[data-shape="fill"] img { object-position: 50% 40%; }
.ls-dl .xp .xp-art .pdp-zoom:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: -3px; border-radius: 3px; }
/* With the script: every photo's own item is a print (the paper moves from the frame onto each item), all in
   one grid cell, placed by public/assets/explore-product.js: the front print on show, the next one or two behind
   it, the one before under it. Only transform and opacity move; each print's drop shadow is its own layer
   (.xp-lift) so a print coming forward grows its shadow by opacity alone, and layers are promoted only while a
   print moves. The frame never moves: it holds the zoom badge in the front print's corner. */
.ls-dl .xp .xp-gal--js .xp-stage::before { display: none; }
.ls-dl .xp .xp-gal--js .xp-frame { padding: 0; background: none; box-shadow: none; touch-action: pan-y; }
.ls-dl .xp .xp-gal--js .pdp-photos { display: grid; overflow: visible; border-radius: 0; scroll-snap-type: none; }
.ls-dl .xp .xp-gal--js .pdp-photo { display: none; grid-area: 1 / 1; aspect-ratio: auto; padding: 10px 10px 36px; overflow: visible; border-radius: 6px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(20, 20, 18, .16); transform-origin: 50% 50%; backface-visibility: hidden; }
.ls-dl .xp .xp-gal--js .pdp-photo.is-stacked { display: block; }
.ls-dl .xp .xp-gal--js .pdp-photo.is-stacked { will-change: transform; }
.ls-dl .xp .xp-gal--js .pdp-photo .pdp-zoom { height: auto; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border-radius: 3px; background: var(--ls-line); }
.ls-dl .xp .xp-gal--js .pdp-photo .pdp-zoom-hint { display: none; }
.ls-dl .xp .xp-gal--js .pdp-photo[data-shape="wide"]::before, .ls-dl .xp .xp-gal--js .pdp-photo[data-shape="wide"]::after { display: none; }
.ls-dl .xp .xp-gal--js .pdp-photo[data-shape="wide"] .pdp-zoom::before, .ls-dl .xp .xp-gal--js .pdp-photo[data-shape="wide"] .pdp-zoom::after { content: ""; position: absolute; top: -8%; bottom: -8%; z-index: -1; background-image: var(--shop-photo); background-repeat: no-repeat; background-size: 2500% 100%; filter: blur(14px); }
.ls-dl .xp .xp-gal--js .pdp-photo[data-shape="wide"] .pdp-zoom::before { left: -8%; right: 50%; background-position: left center; }
.ls-dl .xp .xp-gal--js .pdp-photo[data-shape="wide"] .pdp-zoom::after { left: 50%; right: -8%; background-position: right center; }
.ls-dl .xp .xp-gal--js .xp-lift { position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--tud-shadow-paper); pointer-events: none; }
.ls-dl .xp .xp-gal--js .is-stacked .xp-lift { will-change: opacity; }
.ls-dl .xp .xp-gal--js .xp-pin-zoom { position: absolute; z-index: 20; right: 22px; bottom: 48px; pointer-events: none; }
/* A print sliding clear of the stack passes over the title and the ticket, on the same table. Set at rest too:
   changing it at the start of a move would repaint the whole poster. */
.ls-dl .xp-art { position: relative; z-index: 3; }

/* The arrows: paper buttons pinned to the print's sides, half on the photo, half on the poster. */
.ls-dl .xp-arrow { position: absolute; z-index: 22; top: calc(50% - 13px); display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%; color: var(--ls-ink); background: #FFFFFF; box-shadow: 0 1px 2px rgba(20, 20, 18, .2), 0 12px 22px -10px rgba(20, 20, 18, .55); cursor: pointer; transition: transform 160ms var(--ls-ease), background-color 160ms var(--ls-ease), color 160ms var(--ls-ease); }
.ls-dl .xp-arrow[hidden] { display: none; }
.ls-dl .xp-arrow--prev { left: -26px; }
.ls-dl .xp-arrow--next { right: -26px; }
@media (hover: hover) { .ls-dl .xp-arrow:hover { color: var(--xai); background: var(--xa); } }
.ls-dl .xp-arrow:active { transform: scale(.94); }
.ls-dl .xp-hero .xp-arrow:focus-visible { outline: 3px solid var(--xai); outline-offset: 3px; }
.ls-dl .xp-arrow svg { display: block; }

/* The number, written on each print's foot: which photo of how many. It is part of the print, so it travels
   with it as the prints shuffle. */
.ls-dl .xp-num { position: absolute; right: 14px; bottom: 0; height: 36px; line-height: 36px; margin: 0; color: #5A534B; font-size: 14px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; pointer-events: none; }
.ls-dl .xp-num b { color: #141412; font-weight: 800; }
.ls-dl .xp-num:empty { display: none; }

.ls-dl .xp-sticker { position: absolute; z-index: 21; top: -30px; left: -34px; pointer-events: none; }
.ls-dl .xp-sticker .dl-bid-plate { box-shadow: 0 2px 4px rgba(20, 20, 18, .2), 0 14px 26px -12px rgba(20, 20, 18, .5); }
.ls-dl .xp-sticker .dl-bid-plate:has(> .tud-logo--round) { padding: 0; border-radius: 50%; background: transparent; }
.ls-dl .xp-sticker .tud-logo.brand-identity-logo { --logo-size: 104px; }
.ls-dl .xp-sticker .tud-logo.brand-identity-logo.tud-logo--round { border-radius: 50%; box-shadow: 0 0 0 1.5px var(--brand-accent, #8E2A1F); }
/* No photo: the storefront model on the print, upright and centred. */
.ls-dl .xp .xp-noart { aspect-ratio: auto; background: none; }
.ls-dl .xp-frame--model { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 24px 24px 48px; }
.ls-dl .xp-frame--model .hm-model { display: block; width: 78%; height: auto; }

/* The other photos: one row of small prints under the big one, centred when they fit, scrolled sideways when
   they do not. The one on the print lifts, at full strength, over a tab in the poster's ink. */
.ls-dl .xp .xp-art .pdp-thumbs:not([hidden]) { position: relative; display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 22px; padding: 8px 4px 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 24px; overscroll-behavior-x: contain; scrollbar-width: none; }
.ls-dl .xp .xp-art .pdp-thumbs::-webkit-scrollbar { display: none; }
.ls-dl .xp .xp-art .pdp-thumbs::before, .ls-dl .xp .xp-art .pdp-thumbs::after { content: ""; flex: 1 0 0; }
.ls-dl .xp .xp-art .pdp-thumb { position: relative; flex: none; width: 52px; height: 66px; padding: 3px 3px 9px; overflow: visible; border: 0; border-radius: 3px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(20, 20, 18, .2); opacity: .66; scroll-snap-align: center; transition: transform 180ms var(--ls-ease), opacity 180ms var(--ls-ease); will-change: transform, opacity; }
.ls-dl .xp .xp-art .pdp-thumb[hidden] { display: none; }
.ls-dl .xp .xp-art .pdp-thumb img { border-radius: 2px; will-change: transform; }
@media (hover: hover) { .ls-dl .xp .xp-art .pdp-thumb:hover { opacity: 1; } }
.ls-dl .xp .xp-art .pdp-thumb::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 22px; height: 4px; margin-left: -11px; border-radius: 2px; background: var(--xai); opacity: 0; transform: scaleX(.3); transition: transform 180ms var(--ls-ease), opacity 180ms var(--ls-ease); will-change: transform, opacity; }
/* Each thumb is its own layer and its lifted shadow a layer of its own, so marking the current one only moves and
   fades layers: the thumbs are never repainted (each repaint resamples a full-size photo, slow in Safari). */
.ls-dl .xp .xp-art .pdp-thumb::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 10px 16px -8px rgba(20, 20, 18, .55); opacity: 0; transition: opacity 180ms var(--ls-ease); will-change: opacity; pointer-events: none; }
.ls-dl .xp .xp-art .pdp-thumb[aria-current="true"]::before { opacity: 1; }
.ls-dl .xp .xp-art .pdp-thumb[aria-current="true"] { opacity: 1; transform: translateY(-4px); }
.ls-dl .xp .xp-art .pdp-thumb[aria-current="true"]::after { opacity: 1; transform: none; }
.ls-dl .xp .xp-art .pdp-thumb:focus-visible { outline: 2px solid var(--xai); outline-offset: 4px; }

/* The words: the brand back to its page, then the title, big, in Outfit. */
.ls-dl .xp-head { grid-area: head; min-width: 0; margin-top: 24px; }
.ls-dl .xp-title { margin: 6px 0 0; color: inherit; font-size: clamp(44px, 4.4vw, 64px); font-weight: 800; line-height: .98; letter-spacing: -0.045em; text-wrap: balance; overflow-wrap: anywhere; }

/* =========================================================
   The ticket: paper on the poster. The price and the choices above a perforation with a notch at each end,
   the one action and the delivery line below it. The notches are cut by masks, so the shadow is a filter;
   the ticket keeps its own layer, so a change next to it (a thumb, a moving print) never repaints that filter.
   ========================================================= */
.ls-dl .xp-deal { grid-area: deal; position: relative; z-index: 2; min-width: 0; margin-top: 26px; }
.ls-dl .xp .xp-ticket { display: grid; gap: 0; color: var(--ls-ink); filter: var(--tud-shadow-drop); will-change: transform; }
.ls-dl .xp-tk-body, .ls-dl .xp-tk-stub { display: grid; gap: 22px; min-width: 0; background: var(--ls-paper); }
.ls-dl .xp-tk-body { padding: 26px 28px 26px; border-radius: 20px 20px 0 0;
  -webkit-mask: radial-gradient(circle at 0 100%, #0000 15px, #000 15.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 15px, #000 15.5px) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 100%, #0000 15px, #000 15.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 15px, #000 15.5px) 100% 0 / 51% 100% no-repeat; }
.ls-dl .xp-tk-stub { position: relative; gap: 12px; padding: 24px 28px 24px; border-radius: 0 0 20px 20px;
  -webkit-mask: radial-gradient(circle at 0 0, #0000 15px, #000 15.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 15px, #000 15.5px) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 0, #0000 15px, #000 15.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 15px, #000 15.5px) 100% 0 / 51% 100% no-repeat; }
.ls-dl .xp-tk-stub::before { content: ""; position: absolute; top: -1px; left: 26px; right: 26px; border-top: 2px dashed color-mix(in srgb, var(--ls-ink) 30%, transparent); }
.ls-dl .xp-tk-stub > .form-msg:empty { display: none; }
/* Nothing to press below the perforation: the ticket ends above it, whole, with no dashed rule and no notches. */
.ls-dl .xp-ticket--whole .xp-tk-body { border-radius: 20px; -webkit-mask: none; mask: none; }
/* The pill options moved down into the lower half sit like the ones above it. */
.ls-dl .xp-tk-stub > .pdp-sizes, .ls-dl .xp-tk-stub > .pdp-options { margin: 0; }
.ls-dl .xp-tk-stub > .form-msg { margin: 0; }

/* The price is the hero number, set like F's saving, in the brand's colour. */
.ls-dl .xp .xp-ticket .pdp-price { gap: 6px; padding: 0; border: 0; }
.ls-dl .xp .xp-ticket .pdp-price-student { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.ls-dl .xp .xp-ticket .pdp-price-label { flex: 1 0 100%; color: var(--ls-ink-2); font-size: 15px; font-weight: 700; }
.ls-dl .xp .xp-ticket .pdp-price-student strong { color: var(--xp-price); font-family: var(--tud-font-secondary); font-size: clamp(52px, 4.6vw, 68px); font-weight: 700; line-height: .95; letter-spacing: -0.05em; }
.ls-dl .xp .xp-ticket [data-price-hidden] .pdp-price-student strong { font-size: clamp(40px, 3.4vw, 50px); }
.ls-dl .xp .xp-ticket .shp-was { color: var(--ls-soft); font-size: 20px; font-weight: 600; }
.ls-dl .xp .xp-ticket .pdp-price-normal { color: var(--ls-ink-2); font-size: 15px; font-weight: 600; }
.ls-dl .xp .xp-ticket .pdp-price-note { color: var(--ls-soft); }

/* The choices: the option name and the one chosen, swatches with a ring in the brand's colour, 48 px sizes. */
.ls-dl .xp .xp-ticket .field-label { color: var(--ls-ink); font-size: 15px; font-weight: 700; }
.ls-dl .xp .xp-ticket .pdp-option-chosen { color: var(--ls-soft); font-weight: 600; }
.ls-dl .xp .xp-ticket .pdp-options { gap: 20px; }
.ls-dl .xp .xp-ticket .pdp-swatches { gap: 12px; }
.ls-dl .xp .xp-ticket .pdp-swatch-chip { box-shadow: inset 0 0 0 1px rgba(20, 20, 18, .16), 0 0 0 3px var(--ls-paper), 0 0 0 4px var(--ls-line-2); will-change: transform; }
.ls-dl .xp .xp-ticket .pdp-swatch input:checked + .pdp-swatch-chip { box-shadow: inset 0 0 0 1px rgba(20, 20, 18, .16), 0 0 0 3px var(--ls-paper), 0 0 0 5.5px var(--xp-price); }
.ls-dl .xp .xp-ticket .pdp-swatch input:focus-visible + .pdp-swatch-chip, .ls-dl .xp .xp-ticket .pdp-size input:focus-visible + span { outline: 2px solid var(--ls-ink); outline-offset: 7px; }
.ls-dl .xp .xp-ticket .pdp-size span:not(.sr-only) { min-height: 48px; border-color: var(--ls-line-2); border-radius: 999px; color: var(--ls-ink); background: var(--ls-paper); }
.ls-dl .xp .xp-ticket .pdp-size input:checked + span { border-color: var(--ls-ink); color: var(--ls-paper); background: var(--ls-ink); }
.ls-dl .xp .xp-ticket .pdp-size.is-out span:not(.sr-only) { color: var(--ls-soft); background: transparent; }
.ls-dl .xp .xp-ticket .pdp-option-value { box-shadow: inset 0 0 0 1.5px var(--ls-line-2); }
.ls-dl .xp .xp-ticket .pdp-qty { padding-top: 2px; }
.ls-dl .xp .xp-ticket .qty-stepper { border: 1.5px solid var(--ls-line-2); background: var(--ls-paper); }
.ls-dl .xp .xp-ticket .qty-btn { color: var(--ls-ink); }
.ls-dl .xp .xp-ticket .qty-btn:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 2px; }
.ls-dl .xp .xp-ticket .pdp-chart-btn svg { color: var(--xp-price); }

/* The action: our orange, full width. Before launch it is a stamp on the stub, legible, plainly not a button to press. */
.ls-dl .xp .xp-ticket .shp-go { width: 100%; min-height: 56px; color: #141412; background: #FF5C26; border-color: #FF5C26; font-size: 17px; }
.ls-dl .xp .xp-ticket .shp-go:hover { background: #FF7A4D; border-color: #FF7A4D; }
.ls-dl .xp .xp-ticket .shp-go:focus-visible, .ls-dl .xp .xp-ticket .pdp-get-btn:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 3px; }
.ls-dl .xp .xp-ticket .shp-go:disabled, .ls-dl .xp-dock .xp-dock-go:disabled { opacity: 1; color: var(--ls-ink); background: transparent; border: 2px dashed color-mix(in srgb, var(--ls-ink) 55%, transparent); cursor: default; }
.ls-dl .xp .xp-ticket .shp-pay-line { margin: 0; text-align: left; color: var(--ls-ink-2); font-size: 14px; font-weight: 500; line-height: 1.5; }
.ls-dl .xp .xp-ticket .shp-added { margin: 0; }
.ls-dl .xp .xp-ticket .pdp-soldout { margin: 0; padding: 14px 18px; border: 2px dashed color-mix(in srgb, var(--ls-ink) 55%, transparent); border-radius: 12px; background: transparent; font-size: 17px; font-weight: 700; text-align: center; }
.ls-dl .xp .xp-ticket .xp-sold-next { width: 100%; min-height: 52px; }
.ls-dl .xp .xp-ticket .pdp-get-note { color: var(--ls-ink-2); }

/* =========================================================
   Below the poster: the band, the piece's words, more pieces, the dock.
   ========================================================= */
/* About this piece: the store's words on a paper sheet cut like the ticket above it, its own headings, lists and
   details read back from the text (lib/product-description.js). A long one shows its first part; the rest waits
   behind Read more on the sheet's stub, past a perforation with a notch at each end. Beside it, how buying works
   is a stub in the brand's tone, torn along its left edge, that stays in view while the sheet scrolls past. */
.ls-dl .xp-words { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); align-items: start; gap: clamp(32px, 5vw, 72px); padding-block: clamp(52px, 6vw, 84px) 0; }
.ls-dl .xp-words--one { grid-template-columns: minmax(0, 1fr); }
.ls-dl .xp .xp-words .pdp-description { max-width: none; color: var(--ls-ink-2); font-size: 17px; line-height: 1.6; }
.ls-dl .xp .xp-words .pdp-subhead { margin: 0 0 22px; color: var(--ls-ink); font-size: clamp(30px, 3.1vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
.ls-dl .xp .xp-words .pdp-description b, .ls-dl .xp .xp-d strong { color: var(--ls-ink); font-weight: 700; }

/* The sheet: paper with the ticket's radius and drop shadow; with a stub, the notches are cut where they meet. */
.ls-dl .xp .xp-d { display: grid; filter: var(--tud-shadow-drop); }
.ls-dl .xp .xp-d-sheet { padding: clamp(26px, 3vw, 38px) clamp(24px, 3.2vw, 42px) clamp(28px, 3vw, 36px); border-radius: 20px; background: var(--ls-paper); }
.ls-dl .xp .xp-d-stub:not([hidden]) { position: relative; display: flex; padding: 18px clamp(24px, 3.2vw, 42px) 20px; border-radius: 0 0 20px 20px; background: var(--ls-paper);
  -webkit-mask: radial-gradient(circle at 0 0, #0000 13px, #000 13.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 0, #0000 13px, #000 13.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat; }
.ls-dl .xp .xp-d-stub:not([hidden])::before { content: ""; position: absolute; top: -1px; left: 24px; right: 24px; border-top: 2px dashed color-mix(in srgb, var(--ls-ink) 26%, transparent); }
.ls-dl .xp .xp-d:has(> .xp-d-stub:not([hidden])) .xp-d-sheet { border-radius: 20px 20px 0 0;
  -webkit-mask: radial-gradient(circle at 0 100%, #0000 13px, #000 13.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 100%, #0000 13px, #000 13.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat; }
/* Folded, the last lines fade into the perforation, so the sheet plainly goes on. */
.ls-dl .xp .xp-d.is-folded .xp-d-body { -webkit-mask: linear-gradient(#000 calc(100% - 64px), rgba(0, 0, 0, .18)); mask: linear-gradient(#000 calc(100% - 64px), rgba(0, 0, 0, .18)); }
.ls-dl .xp .xp-d-more { gap: 8px; min-height: 48px; padding-inline: 22px 18px; font-size: 16px; }
.ls-dl .xp .xp-d-more svg { transition: transform 220ms var(--ls-ease); }
.ls-dl .xp .xp-d-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.ls-dl .xp .xp-d-more:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 3px; }

/* The words: the store's opening line in ink, then a reading measure, tight paragraphs, room above each heading. */
.ls-dl .xp .xp-d-body, .ls-dl .xp .xp-d-rest { max-width: 66ch; }
/* A mask clips at its box, and the folded body fades under one: room above and beside it, taken back by the same
   negative margin, so a tilted sticker at the top (its right end lifts about 20px) is whole folded or open. */
.ls-dl .xp .xp-d-body { max-width: calc(66ch + 32px); margin: -28px -16px 0; padding: 28px 16px 0; }
.ls-dl .xp .xp-d p { margin: 0; }
.ls-dl .xp .xp-d :is(p, .xp-d-list, .xp-d-specs, .xp-d-fold) + :is(p, .xp-d-list, .xp-d-specs, .xp-d-fold) { margin-top: 12px; }
.ls-dl .xp .xp-d-body > p:first-child { color: var(--ls-ink); font-size: 18.5px; line-height: 1.55; }
.ls-dl .xp .xp-d-h { margin: 0; color: var(--ls-ink); font-family: var(--tud-font-primary); line-height: 1.25; text-wrap: balance; }
.ls-dl .xp .xp-d-h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
/* The store's section headings are our stickers on the sheet: the brand's tone, an ink edge, a small tilt. */
.ls-dl .xp .xp-d-h3 { display: table; padding: 5px 12px 6px; border: 1.5px solid var(--ls-ink); border-radius: 10px; background: var(--xt); font-size: 16px; font-weight: 700; letter-spacing: 0; transform: rotate(-2.5deg); transform-origin: 0 100%; box-shadow: var(--ls-shadow); }
.ls-dl .xp .xp-d-h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.ls-dl .xp .xp-d * + .xp-d-h3 { margin-top: 36px; }
.ls-dl .xp .xp-d * + .xp-d-h4 { margin-top: 20px; }
.ls-dl .xp .xp-d .xp-d-h + * { margin-top: 8px; }
/* The tilt lifts the sticker's right end and drops its left corner: clear room below so it never crowds the next line. */
.ls-dl .xp .xp-d .xp-d-h3 + * { margin-top: 18px; }
.ls-dl .xp .xp-d-rest > :first-child { margin-top: 12px; }
.ls-dl .xp .xp-d-rest > .xp-d-h3:first-child { margin-top: 36px; }
.ls-dl .xp .xp-d-rest > .xp-d-h4:first-child { margin-top: 20px; }

/* Lists: the store's typed dashes become our short bars in the brand's colour; numbers sit in ink. Short items
   (a run of features) pack into two columns. */
.ls-dl .xp .xp-d-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ls-dl .xp .xp-d-list > li { position: relative; padding-left: 24px; }
.ls-dl .xp ul.xp-d-list > li::before { content: ""; position: absolute; top: .78em; left: 2px; width: 12px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--xa); }
.ls-dl .xp ol.xp-d-list { counter-reset: xp-d; }
.ls-dl .xp ol.xp-d-list > li { padding-left: 32px; counter-increment: xp-d; }
.ls-dl .xp ol.xp-d-list > li::before { content: counter(xp-d); position: absolute; top: .12em; left: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--ls-paper); background: var(--ls-ink); font-family: var(--tud-font-secondary); font-size: 12.5px; font-weight: 700; line-height: 1; }
.ls-dl .xp .xp-d-list--short { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }

/* Details ("Material: Brass"): a row each, the label quiet, the rows divided like the ticket's perforation. */
.ls-dl .xp .xp-d-specs { display: grid; margin-inline: 0; margin-bottom: 0; }
.ls-dl .xp .xp-d-specs > div { display: grid; grid-template-columns: minmax(104px, 30%) minmax(0, 1fr); gap: 16px; padding: 8px 0; border-top: 1.5px dashed color-mix(in srgb, var(--ls-ink) 16%, transparent); }
.ls-dl .xp .xp-d-specs > div:last-child { border-bottom: 1.5px dashed color-mix(in srgb, var(--ls-ink) 16%, transparent); }
.ls-dl .xp .xp-d-specs dt { color: var(--ls-soft); font-size: 15px; font-weight: 600; line-height: 1.5; }
.ls-dl .xp .xp-d-specs dd { margin: 0; color: var(--ls-ink); font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }

/* An ingredients list folds into one quiet row: the store's own heading, our plus in the brand's colour. */
.ls-dl .xp .xp-d-fold { border-block: 1.5px dashed color-mix(in srgb, var(--ls-ink) 16%, transparent); }
.ls-dl .xp .xp-d :is(p, .xp-d-list, .xp-d-specs, .xp-d-fold) + .xp-d-fold { margin-top: 18px; }
.ls-dl .xp .xp-d-fold + :is(p, .xp-d-list, .xp-d-specs) { margin-top: 18px; }
.ls-dl .xp .xp-d-fold summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; color: var(--ls-ink); font-size: 17px; font-weight: 700; list-style: none; cursor: pointer; }
.ls-dl .xp .xp-d-fold summary::-webkit-details-marker { display: none; }
.ls-dl .xp .xp-d-fold summary:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 4px; border-radius: 4px; }
.ls-dl .xp .xp-d-fold-icon { flex: none; color: var(--xa); transition: transform 200ms var(--ls-ease); }
.ls-dl .xp .xp-d-fold[open] .xp-d-fold-icon { transform: rotate(45deg); }
.ls-dl .xp .xp-d-fold-body { padding: 0 0 16px; color: var(--ls-soft); font-size: 15px; line-height: 1.6; }
.ls-dl .xp .xp-d-fold-body p + p { margin-top: 4px; }

/* How buying works: a ticket in the brand's colour with a notch at each side, level with the sheet's top and in
   view while the sheet beside it scrolls. */
.ls-dl .xp .xp-aside { position: sticky; top: calc(var(--site-header-h, 76px) + 24px); filter: var(--tud-shadow-drop); }
.ls-dl .xp .xp-about + .xp-aside { margin-top: calc(clamp(30px, 3.1vw, 44px) * 1.12 + 22px); }
.ls-dl .xp .xp-aside .pdp-description { padding: 30px 34px 32px; border-radius: 20px; color: var(--xai); background: var(--xa); font-size: 16px;
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 14px, #000 14.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 14px, #000 14.5px) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, #0000 14px, #000 14.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 14px, #000 14.5px) 100% 0 / 51% 100% no-repeat; }
/* The card's own words, its bold labels too ("Returns."): the card's text colour in every palette. This has to
   outrank the sheet's ink rule above (.xp-words .pdp-description b), or a dark card gets near-black labels. */
.ls-dl .xp .xp-words .xp-aside :is(.pdp-subhead, b, strong) { color: inherit; }
.ls-dl .xp .xp-aside .pdp-description + .pdp-description { margin-top: 16px; }
.ls-dl .xp .xp-aside .pdp-subhead { margin-bottom: 12px; font-size: clamp(22px, 2vw, 27px); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.ls-dl .xp .xp-aside p + p { margin-top: 10px; }
.ls-dl .xp-words--one .xp-aside { position: static; max-width: 640px; }
.ls-dl .xp-more-wrap { padding-bottom: 8px; }
.ls-dl .xp .xp-more { margin-top: clamp(56px, 6vw, 88px); }
.ls-dl .xp .xp-more .brand-section-title { margin-bottom: 22px; }
.ls-dl .xp .xp-more .shop-grid > .shop-card { display: block; }
.ls-dl .xp-more-all { margin-top: 26px; }
.ls-dl .xp-more .shop-card-link:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 3px; }

/* F's dock: the price and the same action, risen once the ticket's own action has scrolled above the screen.
   It is sticky at the end of the page, so at the foot it rests in the flow and never covers the footer. */
.ls-dl .xp-dock { position: sticky; bottom: 16px; z-index: 20; display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); padding-inline: 16px; pointer-events: none; }
.ls-dl .xp-dock-in { display: flex; align-items: center; gap: 14px; width: min(100%, 680px); padding: 8px 8px 8px 10px; border-radius: 999px; color: #FFF8F0; background: #141412; box-shadow: 0 20px 40px -16px rgba(20, 20, 18, .6); pointer-events: auto; }
.ls-dl .xp-dock-photo { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF; }
.ls-dl .xp-dock-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-dl .xp-dock-text { display: grid; flex: 1; min-width: 0; margin: 0; line-height: 1.2; }
.ls-dl .xp-dock-text strong { font-family: var(--tud-font-secondary); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ls-dl .xp-dock-text span { overflow: hidden; color: #D9D1C4; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ls-dl .xp-dock .xp-dock-go { flex: none; min-height: 52px; padding: 0 28px; color: #141412; background: #FF5C26; border-color: #FF5C26; font-size: 16px; }
.ls-dl .xp-dock .xp-dock-go:hover { background: #FF7A4D; border-color: #FF7A4D; }
.ls-dl .xp-dock .xp-dock-go:disabled { color: #FFF8F0; border-color: rgba(255, 248, 240, .55); }
.ls-dl .xp-dock :focus-visible { outline: 2px solid #FFF8F0; outline-offset: 2px; }
/* Its motion is the brand page offer bar's (explore-brand.css, .xf-dock--js), one motion played both ways
   (founder, 24 Oct 2026, 3 am): the bar rises 24px and fades in, falls 24px and fades out, on the same soft ease
   and durations, transform and opacity only, switched on once the script has parked it (is-ready). */
.ls-dl .xp-dock { --xdock-ease: cubic-bezier(.4, 0, .2, 1); --xdock-rise: 24px; --xdock-move: 280ms; --xdock-fade: 220ms; }
.ls-dl .xp-dock--js .xp-dock-in { opacity: 1; transform: translate3d(0, 0, 0); visibility: visible; }
.ls-dl .xp-dock--js:not(.is-on) .xp-dock-in { opacity: 0; transform: translate3d(0, var(--xdock-rise), 0); visibility: hidden; pointer-events: none; }
.ls-dl .xp-dock--js.is-ready .xp-dock-in { transition: opacity var(--xdock-fade) var(--xdock-ease), transform var(--xdock-move) var(--xdock-ease), visibility 0s linear 0s; }
.ls-dl .xp-dock--js.is-ready:not(.is-on) .xp-dock-in { transition: opacity var(--xdock-fade) var(--xdock-ease), transform var(--xdock-move) var(--xdock-ease), visibility 0s linear var(--xdock-move); }
.ls-dl .xp-dock--js.is-rising .xp-dock-in { will-change: transform, opacity; }

/* =========================================================
   Narrower screens.
   ========================================================= */
@media (max-width: 1100px) {
  .ls-dl .xp-in { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: 40px; }
  .ls-dl .xp-sticker { left: -18px; }
  .ls-dl .xp-sticker .tud-logo.brand-identity-logo { --logo-size: 88px; }
}
/* Phones and small tablets: the photo first, then the title and the price, the ticket full width. */
@media (max-width: 760px) {
  .ls-dl .xp-hero { padding-bottom: 40px; }
  .ls-dl .xp-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "crumbs" "art" "head" "deal"; }
  .ls-dl .xp-hero .ls-crumbs [aria-current="page"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the current page's crumb is the last one; :last-child, not :has(+ li [aria-current]), which makes WebKit
     restyle the whole page whenever any aria-current changes (every photo switch marks a thumb) */
  .ls-dl .xp-hero .ls-crumbs li:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ls-dl .xp-art { margin-top: 18px; }
  .ls-dl .xp .xp-art .pdp-gallery { width: min(100% - 40px, 264px); }
  .ls-dl .xp-frame { padding: 7px 7px 26px; }
  .ls-dl .xp .xp-gal--js .pdp-photo { padding: 7px 7px 26px; }
  .ls-dl .xp .xp-gal--js .xp-pin-zoom { right: 19px; bottom: 38px; }
  .ls-dl .xp-stage::before, .ls-dl .xp-frame--model::before { transform: translate(12px, 8px) rotate(3.5deg); }
  .ls-dl .xp-arrow { top: calc(50% - 9.5px); width: 46px; height: 46px; margin-top: -23px; }
  .ls-dl .xp-arrow svg { width: 20px; height: 20px; }
  .ls-dl .xp-arrow--prev { left: -23px; }
  .ls-dl .xp-arrow--next { right: -23px; }
  .ls-dl .xp-num { right: 10px; height: 26px; line-height: 26px; font-size: 12px; }
  .ls-dl .xp-sticker { top: -18px; left: -22px; }
  .ls-dl .xp-sticker .tud-logo.brand-identity-logo { --logo-size: 60px; }
  .ls-dl .xp .xp-art .pdp-thumbs:not([hidden]) { gap: 10px; margin: 14px calc(50% - 50vw) 0; padding: 8px 16px 16px; scroll-padding-inline: 16px; }
  .ls-dl .xp .xp-art .pdp-thumb { width: 44px; height: 56px; }
  .ls-dl .xp-head { margin-top: 12px; }
  .ls-dl .xp-title { margin-top: 2px; font-size: clamp(34px, 9.8vw, 42px); }
  .ls-dl .xp .xp-ticket .pdp-swatches { gap: 10px; }
  .ls-dl .xp .xp-ticket .pdp-swatch-chip { width: 44px; height: 44px; }
  .ls-dl .xp-deal { margin-top: 20px; }
  .ls-dl .xp-tk-body { padding: 22px 20px 24px; }
  .ls-dl .xp-tk-stub { padding: 22px 20px 20px; }
  .ls-dl .xp-tk-stub::before { left: 20px; right: 20px; }
  .ls-dl .xp .xp-ticket .pdp-price-student strong { font-size: clamp(48px, 13vw, 58px); }
  .ls-dl .xp-words { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 44px; }
  .ls-dl .xp .xp-words .pdp-subhead { margin-bottom: 18px; }
  .ls-dl .xp .xp-d-sheet { padding: 24px 20px 26px; }
  .ls-dl .xp .xp-d-stub:not([hidden]) { padding: 16px 20px 18px; }
  .ls-dl .xp .xp-d-stub:not([hidden])::before { left: 18px; right: 18px; }
  .ls-dl .xp .xp-d-body > p:first-child { font-size: 18px; }
  .ls-dl .xp .xp-d-list--short { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .xp .xp-d-specs > div { grid-template-columns: minmax(88px, 38%) minmax(0, 1fr); gap: 12px; }
  .ls-dl .xp .xp-aside { position: static; }
  .ls-dl .xp .xp-about + .xp-aside { margin-top: 0; }
  .ls-dl .xp .xp-aside .pdp-description { padding: 26px 28px 28px; }
  /* The phone dock: one row, the price over the title and the action beside it, clear of the home indicator. */
  .ls-dl .xp-dock { bottom: max(10px, env(safe-area-inset-bottom, 0px)); padding: 0 10px; }
  .ls-dl .xp-dock-in { gap: 12px; padding: 10px 10px 10px 16px; border-radius: 22px; }
  .ls-dl .xp-dock-photo { display: none; }
  .ls-dl .xp-dock-text strong { font-size: 19px; }
  .ls-dl .xp-dock-text span { font-size: 13px; }
  .ls-dl .xp-dock .xp-dock-go { min-height: 48px; padding: 0 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ls-dl .xp .xp-art .pdp-gallery { animation: xp-print 620ms var(--ls-ease) both; }
}
@keyframes xp-print { from { opacity: 0; transform: translateY(14px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  /* Reduced motion: no rise, a short plain fade in and out. */
  .ls-dl .xp-dock--js .xp-dock-in, .ls-dl .xp-dock--js:not(.is-on) .xp-dock-in { transform: none; }
  .ls-dl .xp-dock--js.is-ready .xp-dock-in { transition: opacity 160ms linear, visibility 0s linear 0s; }
  .ls-dl .xp-dock--js.is-ready:not(.is-on) .xp-dock-in { transition: opacity 160ms linear, visibility 0s linear 160ms; }
  .ls-dl .xp-dock--js.is-rising .xp-dock-in { will-change: opacity; }
  .ls-dl .xp .xp-art .pdp-thumb, .ls-dl .xp .xp-art .pdp-thumb::after, .ls-dl .xp .xp-art .pdp-thumb::before, .ls-dl .xp-arrow { transition: none; }
  .ls-dl .xp .xp-art .pdp-thumb[aria-current="true"] { transform: none; }
  .ls-dl .xp .xp-d-more svg, .ls-dl .xp .xp-d-fold-icon { transition: none; }
  .ls-dl .xp-arrow:active { transform: none; }
}
@media (forced-colors: active) {
  .ls-dl .xp-frame, .ls-dl .xp .xp-gal--js .pdp-photo, .ls-dl .xp-dock-in, .ls-dl .xp-tk-body, .ls-dl .xp-tk-stub { border: 1px solid CanvasText; }
  .ls-dl .xp-tk-body, .ls-dl .xp-tk-stub { -webkit-mask: none; mask: none; }
  .ls-dl .xp .xp-d-sheet, .ls-dl .xp .xp-d-stub:not([hidden]), .ls-dl .xp .xp-aside .pdp-description { border: 1px solid CanvasText; -webkit-mask: none !important; mask: none !important; }
  .ls-dl .xp ul.xp-d-list > li::before { background: CanvasText; }
  .ls-dl .xp .xp-gal--js .xp-frame { border: 0; }
}

/* =========================================================
   Dark, for now: F's deepened poster and its page-cut ticket, so nothing glares or breaks. Not yet designed;
   light comes first.
   ========================================================= */
:root[data-theme="dark"] .ls-dl .xp-story { --xpd-a: #FF8A5C; --xpd-deep: #8C3210; }
:root[data-theme="dark"] .ls-dl .xp[data-brand-design="brand"] .xp-story { --xpd-a: var(--brand-accent); --xpd-deep: var(--brand-band); }
:root[data-theme="dark"] .ls-dl .xp-story[style*="--xad"] { --xpd-a: var(--xad); --xpd-deep: var(--xbandd); }
:root[data-theme="dark"] .ls-dl .xp-story { --xp-price: var(--xpd-a); --xpd-ground: color-mix(in oklab, var(--xpd-a) 12%, color-mix(in oklab, var(--xpd-deep) 80%, #1A1613)); }
:root[data-theme="dark"] .ls-dl .xp-hero { color: var(--ls-ink); background: var(--xpd-ground); }
:root[data-theme="dark"] .ls-dl .xp-story > .dl-bband--dots { --dl-band-dark: var(--xpd-ground); }
:root[data-theme="dark"] .ls-dl .xp-hero .ls-crumbs :is(li, a, [aria-current="page"]) { color: var(--ls-ink); }
:root[data-theme="dark"] .ls-dl .xp-hero :focus-visible { outline-color: var(--ls-ink); }
:root[data-theme="dark"] .ls-dl .xp-title { color: var(--xpd-a); }
:root[data-theme="dark"] .ls-dl .xp-frame { background: #ECE5DA; box-shadow: var(--tud-shadow-paper); }
:root[data-theme="dark"] .ls-dl .xp .xp-gal--js .xp-frame { background: none; box-shadow: none; }
:root[data-theme="dark"] .ls-dl .xp .xp-gal--js .pdp-photo { background: #ECE5DA; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .ls-dl .xp .xp-gal--js .xp-lift { box-shadow: var(--tud-shadow-paper); }
:root[data-theme="dark"] .ls-dl :is(.xp-stage, .xp-frame--model)::before { background: #CFC6B8; box-shadow: var(--tud-shadow-paper); }
:root[data-theme="dark"] .ls-dl .xp .xp-art .pdp-thumb { background: #ECE5DA; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .ls-dl .xp .xp-art .pdp-thumb::before { box-shadow: 0 12px 18px -8px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .ls-dl .xp .xp-art .pdp-thumb::after { background: var(--xpd-a); }
:root[data-theme="dark"] .ls-dl .xp .xp-art .pdp-thumb:focus-visible { outline-color: var(--ls-ink); }
:root[data-theme="dark"] .ls-dl .xp-arrow { color: #1A1613; background: #ECE5DA; box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 22px -10px rgba(0, 0, 0, .85); }
@media (hover: hover) { :root[data-theme="dark"] .ls-dl .xp-arrow:hover { color: #1A1613; background: var(--xpd-a); } }
:root[data-theme="dark"] .ls-dl .xp-hero .xp-arrow:focus-visible { outline-color: var(--ls-ink); }
:root[data-theme="dark"] .ls-dl .xp-num { color: #5A534B; }
:root[data-theme="dark"] .ls-dl .xp .xp-ticket { filter: var(--tud-shadow-drop); }
:root[data-theme="dark"] .ls-dl .xp-tk-body, :root[data-theme="dark"] .ls-dl .xp-tk-stub { background: var(--ls-paper); }
:root[data-theme="dark"] .ls-dl .xp .xp-ticket .pdp-swatch-chip { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 3px var(--ls-paper), 0 0 0 4px var(--ls-line-2); }
:root[data-theme="dark"] .ls-dl .xp .xp-ticket .pdp-swatch input:checked + .pdp-swatch-chip { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 3px var(--ls-paper), 0 0 0 5.5px var(--xp-price); }
:root[data-theme="dark"] .ls-dl .xp-dock-in { background: var(--ls-raised); box-shadow: inset 0 0 0 1px var(--ls-line-2), 0 24px 44px -16px rgba(0, 0, 0, .85); }
:root[data-theme="dark"] .ls-dl .xp-dock-text strong { color: var(--xpd-a); }
:root[data-theme="dark"] .ls-dl .xp-dock-text span { color: var(--ls-soft); }
:root[data-theme="dark"] .ls-dl .xp-dock :focus-visible { outline-color: var(--ls-ink); }
:root[data-theme="dark"] .ls-dl .xp .xp-d { filter: var(--tud-shadow-drop); }
:root[data-theme="dark"] .ls-dl .xp ul.xp-d-list > li::before, :root[data-theme="dark"] .ls-dl .xp .xp-d-fold-icon { background: var(--xpd-a); color: var(--xpd-a); }
:root[data-theme="dark"] .ls-dl .xp .xp-d-fold-icon { background: none; }
:root[data-theme="dark"] .ls-dl .xp .xp-aside { filter: var(--tud-shadow-drop); }
:root[data-theme="dark"] .ls-dl .xp .xp-aside .pdp-description { color: var(--ls-ink); background: color-mix(in oklab, var(--xpd-a) 12%, color-mix(in oklab, var(--xpd-deep) 80%, #1A1613)); }
:root[data-theme="dark"] .ls-dl .xp .xp-aside .pdp-subhead { color: var(--xpd-a); }
:root[data-theme="dark"] .ls-dl .xp .xp-d-h3 { border-color: color-mix(in srgb, var(--ls-ink) 70%, transparent); background: color-mix(in oklab, var(--xpd-a) 22%, var(--ls-paper)); }