/* The deals pages: the index (/deals/), the category pages and the brand pages,
 * in the homepage's design language (Figma "Final, 17 Oct").
 *
 * Loaded after home.css and home-dark.css on pages whose body is
 * "ls ls-home ls-dl", so the homepage's components (the ticket rows, the
 * tones, the FAQ, the orange sign-up card, the header with its theme button)
 * and its dark tokens apply as they are. This file only adds what these pages
 * have that the homepage does not, scoped to .ls-dl, on the same tokens.
 *
 * Rules: one orange lead per screen (the New poster on the index, the sign-up
 * card on a category page, the offer card on a brand page); every other action
 * is an ink pill. Orange is never a line. Nothing moves on load; reduced
 * motion turns every transition off.
 */

/* ---------- type and frame ---------- */
.ls-dl main#main-content { padding-bottom: clamp(56px, 7vw, 96px); }
.ls-dl .dl-h1 { font-size: clamp(40px, 4.6vw, 66px); font-weight: 800; line-height: .98; letter-spacing: -0.045em; }
.ls-dl .dl-h2 { margin-bottom: 22px; font-size: clamp(30px, 3.1vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
.ls-dl .dl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.ls-dl .dl-head .dl-h2 { margin-bottom: 0; }
.ls-dl .dl-head--stack { display: block; }
.ls-dl .dl-count { color: var(--ls-soft); font-size: 15px; font-weight: 700; }
.ls-dl .dl-head--stack .dl-count { margin-top: 2px; color: var(--ls-ink-2); }

/* ---------- the index head ---------- */
.ls-dl .dl-index-top { padding-top: clamp(32px, 4.4vw, 60px); }
.ls-dl .dl-index-top .dl-h1 { max-width: 14ch; }
.ls-dl .dl-index-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); align-items: end; gap: 20px clamp(32px, 6vw, 80px); margin-top: 22px; }
.ls-dl .dl-lead { max-width: 60ch; color: var(--ls-soft); font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; line-height: 1.6; }
.ls-dl .dl-search { position: relative; }
.ls-dl .dl-search-icon { position: absolute; top: 50%; left: 18px; color: var(--ls-ink-2); transform: translateY(-50%); pointer-events: none; }
.ls-dl .dl-search-input { min-height: var(--ls-control-h, 52px); padding-left: 48px; border-radius: var(--ls-control-radius, 12px); font-size: 16px; }
.ls-dl .dl-search-input::placeholder { color: #6B6660; }
.ls-dl .dl-search-input::-webkit-search-cancel-button { cursor: pointer; }

/* ---------- category chips ---------- */
.ls-dl .dl-chips { margin-top: 32px; }
.ls-dl .dl-chips ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ls-dl .dl-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 8px; border-radius: 999px; color: var(--ls-ink); background: var(--ls-tile, var(--ls-sand)); font-size: 15px; font-weight: 700; text-decoration: none; transition: box-shadow 140ms var(--ls-ease); }
.ls-dl .dl-chip--all { padding: 0 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1.5px var(--ls-line-2); }
.ls-dl .dl-chip-art { display: grid; place-items: center; width: 32px; height: 32px; }
.ls-dl .dl-chip-art img { width: 100%; height: 100%; object-fit: contain; }
@media (hover: hover) { .ls-dl .dl-chip:not([aria-current]):not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink); } }
.ls-dl .dl-chip:is([aria-current], [aria-pressed="true"]) { color: var(--ls-paper); background: var(--ls-ink); box-shadow: none; }
/* The current chip is ink: its doodle swaps to the light-lined twin (and back in dark, where the chip is cream). */
:root:not([data-theme="dark"]) .ls-home.ls-dl .dl-chip:is([aria-current], [aria-pressed="true"]) img.hm-art-light { display: none; }
:root:not([data-theme="dark"]) .ls-home.ls-dl .dl-chip:is([aria-current], [aria-pressed="true"]) img.hm-art-dark { display: block; }
:root[data-theme="dark"] .ls-home.ls-dl .dl-chip:is([aria-current], [aria-pressed="true"]) img.hm-art-dark { display: none; }
:root[data-theme="dark"] .ls-home.ls-dl .dl-chip:is([aria-current], [aria-pressed="true"]) img.hm-art-light { display: block; }

/* ---------- Brands on board: the logo wall ---------- */
.ls-dl .dl-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ls-dl .dl-wall > li { display: grid; }
.ls-dl .dl-wall-tile { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 16px; border-radius: 18px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); text-decoration: none; transition: box-shadow 160ms var(--ls-ease); }
.ls-dl .dl-wall-tile .tud-logo { --logo-size: 56px; flex: none; border-radius: 12px; }
.ls-dl .dl-wall-text { display: grid; gap: 2px; min-width: 0; }
.ls-dl .dl-wall-name { font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ls-dl .dl-wall-meta { color: var(--ls-soft); font-size: 14px; font-weight: 600; }
@media (hover: hover) { .ls-dl a.dl-wall-tile:hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink); } .ls-dl a.dl-wall-tile:hover .dl-wall-name { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- New on The Uni Deals: the orange poster ---------- */
.ls-dl .dl-poster { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 380px; overflow: hidden; border-radius: 22px; color: #141412; background: #FF5C26; }
.ls-dl .dl-poster-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.6vw, 48px); }
.ls-dl .dl-poster-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.ls-dl .dl-poster-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; color: #FFF8F0; background: #1A1613; font-size: 13px; font-weight: 700; }
.ls-dl .dl-poster-saving { margin-top: 8px; color: #141412; font-family: var(--tud-font-secondary); font-size: clamp(64px, 7.4vw, 104px); font-weight: 700; line-height: .95; letter-spacing: -0.055em; }
.ls-dl .dl-poster-line { max-width: 44ch; margin-top: 16px; font-size: 17px; font-weight: 600; line-height: 1.5; }
.ls-dl .dl-poster .ls-btn { margin-top: 22px; color: #FFF8F0; background: #1A1613; border-color: #1A1613; }
.ls-dl .dl-poster .ls-btn:hover { background: #33302B; border-color: #33302B; }
.ls-dl .dl-poster :focus-visible { outline-color: #141412; }
/* The picture beyond the poster's scalloped edge: the orange bumps into it. */
.ls-dl .dl-poster-visual { position: relative; background: var(--ls-tone, var(--ls-sand)); }
.ls-dl .dl-poster-visual::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 6px; background: radial-gradient(circle at 0 50%, #FF5C26 5.5px, #0000 6px) 0 0 / 100% 24px round; }
.ls-dl .dl-poster-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ls-dl .dl-poster-badge { position: absolute; bottom: 24px; left: -12px; z-index: 3; display: grid; padding: 4px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 2px 4px rgba(20, 20, 18, .12), 0 10px 20px rgba(20, 20, 18, .16); }
.ls-dl .dl-poster-badge .tud-logo { --logo-size: 60px; border-radius: 12px; }
.ls-dl .dl-poster--logo .dl-poster-badge { top: 50%; bottom: auto; left: 50%; padding: 8px; border-radius: 26px; transform: translate(-50%, -50%); }
.ls-dl .dl-poster--logo .dl-poster-badge .tud-logo { --logo-size: 132px; border-radius: 20px; }

/* ---------- Every deal: the ticket rows (home.css) and the invite ---------- */
.ls-dl .dl-rows > li { display: grid; }
.ls-dl .dl-invite { display: flex; align-items: center; gap: 16px; height: 100%; min-height: 120px; padding: 16px 20px; border: 1.5px dashed var(--ls-control); border-radius: 18px; color: var(--ls-ink); text-decoration: none; }
.ls-dl .dl-invite-mark { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-dl .dl-invite-text { display: grid; gap: 2px; }
.ls-dl .dl-invite-q { font-size: 17px; font-weight: 700; }
.ls-dl .dl-invite-go { color: var(--ls-accent-text); font-size: 16px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (hover: hover) { .ls-dl .dl-invite:hover { border-color: var(--ls-ink); } .ls-dl .dl-invite:hover .dl-invite-go { text-decoration-thickness: 2.5px; } }

/* ---------- category tiles ---------- */
.ls-dl .dl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ls-dl .dl-tiles > li { display: grid; }
.ls-dl .dl-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 186px; padding: 20px; border-radius: 18px; color: var(--ls-ink); background: var(--ls-tile, var(--ls-sand)); text-decoration: none; transition: box-shadow 160ms var(--ls-ease); }
.ls-dl .dl-tile-art { position: absolute; top: 18px; left: 18px; width: 84px; height: 84px; }
.ls-dl .dl-tile-art img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.ls-dl .dl-tile--soon .dl-tile-art { opacity: .55; }
.ls-dl .dl-tile-name { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.ls-dl .dl-tile-count { margin-top: 4px; color: var(--ls-ink-2); font-size: 14px; font-weight: 600; }
@media (hover: hover) { .ls-dl .dl-tile:hover { box-shadow: inset 0 0 0 1.5px var(--hm-under, var(--ls-ink)); } .ls-dl .dl-tile:hover .dl-tile-name { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- full-bleed paper band (How it works, How to use it) ---------- */
.ls-dl .dl-band-paper { position: relative; margin-top: var(--ls-section); padding-block: clamp(52px, 6vw, 80px); background: var(--ls-paper); }
.ls-dl .dl-band-paper--edge::before { content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px; background: radial-gradient(circle at 50% 100%, var(--ls-paper) 5.5px, #0000 6px) 0 0 / 24px 100% round; }
.ls-dl .dl-steps { gap: 32px; }
.ls-dl .dl-steps.dl-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls-dl .dl-band-paper + .dl-faq-wrap, .ls-dl .dl-band-paper + .dl-about-faq { margin-top: clamp(56px, 7vw, 88px); }

/* ---------- questions ---------- */
.ls-dl .dl-faq-wrap .ls-faq { max-width: 760px; }
.ls-dl .ls-faq summary { min-height: 103px; }
.ls-dl .dl-about-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.ls-dl .dl-about p { max-width: 60ch; color: var(--ls-soft); font-size: 16px; line-height: 1.65; }
.ls-dl .dl-about p + p { margin-top: 14px; }
.ls-dl .dl-about .dl-about-lead { color: var(--ls-ink); font-weight: 700; }

/* ---------- empty states ---------- */
.ls-dl .dl-empty { display: grid; justify-items: center; gap: 10px; max-width: 520px; margin: 0 auto; padding: 24px 16px; text-align: center; }
.ls-dl .dl-empty--cat { margin: 0; justify-self: start; max-width: 520px; }
.ls-dl .dl-empty h2, .ls-dl .dl-empty h3 { margin-bottom: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
.ls-dl .dl-empty p { color: var(--ls-soft); font-size: 16px; line-height: 1.55; }
.ls-dl .dl-empty-art { width: 120px; }
.ls-dl .dl-empty-art img { width: 100%; height: auto; }
.ls-dl .dl-empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 10px; }
.ls-dl .dl-empty .ls-btn { margin-top: 6px; }
.ls-dl .dl-empty-actions .ls-btn { margin-top: 0; }

/* ---------- category hero ---------- */
.ls-dl .dl-cat-hero { position: relative; padding: clamp(32px, 4.4vw, 64px) 0 clamp(56px, 6vw, 80px); background: var(--ls-tile, var(--ls-sand)); -webkit-mask: radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 0 / 24px 100% round; mask: radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 0 / 24px 100% round; }
.ls-dl .dl-cat-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 320px); align-items: center; gap: 24px 48px; }
.ls-dl .dl-cat-copy .ls-crumbs { margin-bottom: 8px; }
.ls-dl .dl-cat-hero .ls-crumbs a, .ls-dl .dl-cat-hero .ls-crumbs li { color: var(--ls-ink-2); }
.ls-dl .dl-cat-hero .ls-crumbs a { text-decoration-color: currentColor; }
.ls-dl .dl-cat-hero .ls-crumbs li + li::before { border-color: var(--ls-ink-2); }
.ls-dl .dl-cat-hero .dl-h1 { max-width: 13ch; }
.ls-dl .dl-cat-lead { max-width: 52ch; margin-top: 22px; color: var(--ls-ink-2); font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; line-height: 1.6; }
.ls-dl .dl-cat-art { justify-self: end; width: min(100%, 320px); aspect-ratio: 1; }
.ls-dl .dl-cat-art.dl-line--wide { aspect-ratio: 960 / 649; }
.ls-dl .dl-cat-art img { width: 100%; height: 100%; object-fit: contain; }
.ls-dl .dl-cat-chips .dl-chips { margin-top: clamp(32px, 4vw, 48px); }
.ls-dl .dl-cat-deals { margin-top: clamp(40px, 5vw, 56px); }
.ls-dl .dl-cat-chips + .ls-section { margin-top: clamp(40px, 5vw, 64px); }
.ls-dl .dl-signup-row { display: grid; justify-items: center; }
.ls-dl .dl-signup-row .ls-signup { max-width: 520px; padding: 22px 24px 20px; }
.ls-dl .dl-signup-row .ls-signup-title { margin-bottom: 14px; font-size: 21px; }
.ls-dl .dl-signup-row .ls-signup-note { margin-top: 12px; }

/* ---------- brand page: the hero ---------- */
.ls-dl .dl-bhero { position: relative; padding: clamp(14px, 2vw, 24px) 0 clamp(28px, 3vw, 40px); }
.ls-dl .dl-bhero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-areas: "copy side"; align-items: center; gap: 0 clamp(32px, 4vw, 56px); }
/* The words centre on the art beside them (the pass check change); the brand's links close the words. */
.ls-dl .dl-bhero-copy { grid-area: copy; min-width: 0; }
.ls-dl .dl-bhero-side { position: relative; grid-area: side; min-width: 0; padding-top: 84px; }
/* The logo belongs to the title: it sits on the title's line, centred on its first line when the title wraps. */
.ls-dl .dl-btitle { display: flex; align-items: flex-start; gap: 18px; margin-top: 22px; }
.ls-dl .dl-bid-plate { display: grid; flex: none; padding: 3px; border-radius: 16px; background: #FFFFFF; box-shadow: var(--ls-shadow); }
.ls-dl .dl-bid-plate .tud-logo.brand-identity-logo { --logo-size: 56px; display: inline-grid; width: var(--logo-size); height: var(--logo-size); margin: 0; padding: 0; border-radius: 13px; background: var(--logo, none) 0 0 / 40000% 40000% no-repeat, var(--ls-paper); box-shadow: none; }
.ls-dl .dl-bid-plate .tud-logo.brand-identity-logo:not(:has(> img)) { background: var(--tud-logo-tone, var(--ls-sand)); }
.ls-dl .dl-bhero .dl-h1 { min-width: 0; max-width: none; margin-top: 0; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.02; }
.ls-dl .dl-btitle .dl-bid-plate { margin-top: calc((clamp(36px, 4.2vw, 60px) * 1.02 - 62px) / 2); }
.ls-dl .dl-answer { max-width: 40em; margin-top: 10px; color: var(--ls-ink); font-size: clamp(16px, 1.3vw, 18px); font-weight: 600; line-height: 1.6; }
.ls-dl .dl-desc { max-width: 40em; margin-top: 10px; color: var(--ls-soft); font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; line-height: 1.6; }
.ls-dl .dl-bchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.ls-dl .dl-bchip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.ls-dl a.dl-bchip, .ls-dl .dl-bchip--tone { background: var(--ls-tile, var(--ls-sand)); box-shadow: none; }
.ls-dl a.dl-bchip { position: relative; }
/* The 30px pill keeps a 44px tap target. */
.ls-dl a.dl-bchip::after { content: ""; position: absolute; inset: -7px 0; }
.ls-dl a.dl-bchip:hover { text-decoration: underline; text-underline-offset: 3px; }
.ls-dl .dl-bchip--status { color: var(--ls-accent-text); box-shadow: inset 0 0 0 1.5px var(--ls-accent-text); }
.ls-dl .dl-bchip--status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ls-dl .dl-blinks { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 12px; }
.ls-dl .dl-blinks a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--ls-accent-text); font-size: 16px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.ls-dl .dl-blinks a:hover { text-decoration-thickness: 2.5px; }
/* Each link's line icon (lib/brand-links.js): the link's own colour, never underlined, never shrunk by a long row. */
.ls-dl .dl-blink-ic { flex: none; width: 18px; height: 18px; }

/* The brand's real photos as cards behind the offer card: whole, never mirrored, cover centred a little above the middle. */
.ls-dl .dl-photos { position: absolute; inset: 0; pointer-events: none; }
.ls-dl .dl-photo { position: absolute; width: 196px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: var(--ls-paper); box-shadow: var(--tud-shadow-paper); }
.ls-dl .dl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ls-dl .dl-photo--0 { top: 0; right: -24px; transform: rotate(-4deg); }
.ls-dl .dl-photo--1 { top: 300px; right: -10px; transform: rotate(3deg); }
/* The whole fan stays inside the hero (founder, 20 Oct: the lower card ran past the hero's foot into the band).
   On a wide screen the lower card hangs from the foot of the column, a little below the offer card, and
   neither card runs past the page's right edge. */
@media (min-width: 961px) {
  .ls-dl .dl-bhero-side:has(> .dl-photos) { --dl-room: max(var(--ls-gutter, 24px), (100vw - var(--ls-max, 1120px)) / 2); }
  .ls-dl .dl-bhero-side:has(> .dl-photos > .dl-photo--1) { padding-bottom: 48px; }
  .ls-dl .dl-brand[data-brand-design="brand"] .dl-bhero .dl-photo { width: 208px; }
  .ls-dl .dl-bhero .dl-photo--0 { right: max(-24px, calc(22px - var(--dl-room))); }
  .ls-dl .dl-bhero .dl-photo--1, .ls-dl .dl-brand[data-brand-design="brand"] .dl-bhero .dl-photo--1 { top: auto; bottom: 12px; right: max(-10px, calc(22px - var(--dl-room))); }
  .ls-dl .dl-brand.brand-layout-spotlight .dl-bhero .dl-photo--0 { right: max(-40px, calc(26px - var(--dl-room))); }
  .ls-dl .dl-brand[data-brand-frame="rounded"] .dl-bhero .dl-photo--1 { right: 40px; }
}

/* The offer card: the page's one orange lead, a light island in both themes. */
.ls-dl .dl-offer { --ticket-surface: #FF5C26; position: relative; z-index: 1; width: min(100%, 440px); padding: 28px 28px 24px; border-radius: 20px; color: #1A1613; background: #FF5C26; box-shadow: var(--tud-shadow-card-raised); }
.ls-dl .dl-offer :focus-visible { outline: 2px solid #1A1613; outline-offset: 2px; }
.ls-dl .dl-offer ::selection { color: #FFF8F0; background: #1A1613; }
.ls-dl .dl-offer-saving { font-family: var(--tud-font-secondary); font-size: clamp(56px, 6vw, 84px); font-weight: 700; line-height: .95; letter-spacing: -0.05em; overflow-wrap: anywhere; }
.ls-dl .dl-offer-title { margin-top: 18px; color: #1A1613; font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
.ls-dl .dl-offer-line { margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.6; }
.ls-dl .dl-terms { margin-top: 6px; }
.ls-dl .dl-terms > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; list-style: none; }
.ls-dl .dl-terms > summary::-webkit-details-marker { display: none; }
.ls-dl .dl-terms > summary::after { content: ""; width: 7px; height: 7px; margin: -4px 0 0 2px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg); transition: transform 200ms var(--ls-ease); }
.ls-dl .dl-terms[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.ls-dl .dl-terms ul { display: grid; gap: 6px; margin: 6px 0 4px; padding-left: 18px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.ls-dl .dl-offer-where { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 15px; font-weight: 700; }
.ls-dl .dl-offer-where svg { flex: none; }
.ls-dl .dl-offer .brand-offer-action { display: grid; gap: 10px; margin-top: 20px; }
.ls-dl .dl-offer .brand-offer-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px 24px; border: 1.5px solid #1A1613; border-radius: 999px; color: #FFF8F0; background: #1A1613; font-size: 16px; font-weight: 700; text-decoration: none; }
.ls-dl .dl-offer .brand-offer-cta:hover { background: #33302B; border-color: #33302B; }
.ls-dl .dl-offer .brand-offer-cta:disabled, .ls-dl .dl-offer .brand-offer-cta[aria-disabled="true"] { opacity: 1; color: #1A1613; background: transparent; border-color: #1A1613; cursor: not-allowed; transform: none; }
.ls-dl .dl-offer-note { margin-top: 12px; font-size: 13px; font-weight: 600; line-height: 1.45; }
.ls-dl .dl-offer-note:empty { display: none; }
/* The revealed code: the apps' ink panel, "Your Amals code", copy. */
.ls-dl .dl-offer .deal-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 18px; border-radius: 16px; color: #FFF8F0; background: #1A1613; }
.ls-dl .dl-offer .deal-code-body { display: grid; gap: 2px; min-width: 0; }
.ls-dl .dl-offer .deal-code-label { font-size: 13px; font-weight: 600; opacity: .85; }
.ls-dl .dl-offer .deal-code-value { font-family: var(--tud-font-secondary); font-size: 24px; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; color: #FFF8F0; background: none; }
.ls-dl .dl-offer .deal-code-copy { min-height: 40px; padding: 6px 16px; border-color: #FFF8F0; color: #FFF8F0; background: transparent; }
.ls-dl .dl-offer .deal-code-use, .ls-dl .dl-offer .deal-code-note, .ls-dl .dl-offer .deal-code-expiry { color: #1A1613; font-size: 14px; font-weight: 700; }
.ls-dl .dl-offer .lang-toggle { margin-top: 12px; }
.ls-dl .dl-offer .brand-offer-ur { margin-top: 10px; }

/* No live offers: a paper card in the offer card's place. */
.ls-dl .dl-offer--none { color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-dl .dl-offer--none ::selection { color: inherit; background: var(--ls-tint); }
.ls-dl .dl-offer--none :focus-visible { outline-color: var(--ls-ink); }
.ls-dl .dl-offer-none-title { color: var(--ls-ink); font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.03em; }
.ls-dl .dl-offer--none p { margin-top: 12px; color: var(--ls-soft); font-size: 16px; line-height: 1.6; }
.ls-dl .dl-offer--none .ls-btn { margin-top: 16px; }

/* The brand zone's band under the hero: the brand's own palette and pattern
   (brand-page.css), the scallop row when the palette has no pattern, or the
   colour the brand set in its shop or bookings (style attribute). */
.ls-dl .dl-bband { position: relative; display: block; height: 14px; background: var(--dl-band, var(--brand-band, var(--ls-ink))); }
/* No pattern: a row of scallops bites up from the bottom edge, in the colour of the section below. */
.ls-dl .dl-bband--dots { background: radial-gradient(circle at 50% 100%, var(--ls-paper) 5px, #0000 5.5px) 0 0 / 24px 100% repeat-x, var(--dl-band, var(--brand-band, var(--ls-ink))); }
.ls-dl .brand-custom[data-brand-pattern]:not([data-brand-pattern="none"]) .dl-bband.brand-band { display: block; height: 28px; }
/* The first section after the band sits straight on it, on white. */
.ls-dl .dl-bband + .dl-band-paper { margin-top: 0; }
.ls-dl .dl-bband + .dl-band-paper.dl-band-paper--edge::before { content: none; }
.ls-dl .dl-bband + .dl-brand-sec, .ls-dl .dl-bband + .dl-shop-wrap { margin-top: 0; padding-block: clamp(52px, 6vw, 80px); background: var(--ls-paper); box-shadow: 0 0 0 100vmax var(--ls-paper); clip-path: inset(0 -100vmax); }
.ls-dl .dl-bband + .dl-shop-wrap > :first-child { margin-top: 0; }

/* ---------- brand page: sections ---------- */
.ls-dl .dl-brand-sec { margin-top: var(--ls-section); }
.ls-dl .dl-brand-sec .dl-sub { max-width: 64ch; margin: -10px 0 22px; color: var(--ls-soft); font-size: 17px; line-height: 1.55; }
/* The shop: the homepage's shop cards, name and price on the photo; the first eight show until "See all". */
.ls-dl .shop { margin-top: var(--ls-section); }
.ls-dl .shop .shop-stall:not(:has(.shop-reel:not(.shop-reel--profile))) { display: none; }
.ls-dl .shop .brand-section-title { margin-bottom: 14px; font-size: clamp(30px, 3.1vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
.ls-dl .shop .shop-terms { max-width: 64ch; color: var(--ls-soft); font-size: 17px; line-height: 1.55; }
.ls-dl .shop .shop-host { display: none; }
.ls-dl .shop .shop-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.ls-dl .shop .shop-filter { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1.5px var(--ls-line-2); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ls-dl .shop .shop-filter[aria-pressed="true"] { color: var(--ls-paper); background: var(--ls-ink); box-shadow: none; }
.ls-dl .shop .shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ls-dl .shop .shop-card { position: relative; margin: 0; }
.ls-dl .shop .shop-card-link { position: relative; display: block; overflow: hidden; border-radius: 12px; color: #FAF7F2; text-decoration: none; }
.ls-dl .shop .shop-card-photo { display: block; aspect-ratio: 3 / 4; background: var(--ls-line); }
.ls-dl .shop .shop-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ls-dl .shop .shop-card-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 20, 18, .8) 0, rgba(20, 20, 18, .75) 10%, rgba(20, 20, 18, .66) 20%, rgba(20, 20, 18, .46) 30%, rgba(20, 20, 18, .22) 38%, rgba(20, 20, 18, .06) 43%, rgba(20, 20, 18, 0) 46%); pointer-events: none; }
.ls-dl .shop .shop-card-title { position: absolute; left: 16px; right: 16px; bottom: 44px; z-index: 1; color: #FAF7F2; font-size: 16px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 2px rgba(20, 20, 18, .35); }
.ls-dl .shop .shop-card-price { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; align-items: baseline; gap: 8px; margin: 0; color: #FAF7F2; text-shadow: 0 1px 2px rgba(20, 20, 18, .35); pointer-events: none; }
.ls-dl .shop .shop-card-price :is(.shop-price-student, strong) { color: #FAF7F2; font-family: var(--tud-font-secondary); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.ls-dl .shop .shop-card-price :is(s, .shop-price-list) { color: rgba(250, 247, 242, .8); font-size: 13px; }
.ls-dl .shop .shop-card-price * { color: #FAF7F2; }
.ls-dl .shop .shop-card-hint { display: none; }
.ls-dl .shop .shop-badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.ls-dl .shop .shop-card-link:hover .shop-card-title { text-decoration: underline; text-underline-offset: 3px; }
html[data-js="on"] .ls-dl .shop:not(.is-all) .shop-grid > .shop-card:nth-child(n + 9) { display: none; }
.ls-dl .dl-shop-more { margin-top: 24px; }
html:not([data-js="on"]) .ls-dl .dl-shop-more, .ls-dl .shop.is-all .dl-shop-more { display: none; }

/* Book a time: the offering as a ticket, the photo, the facts, and the next slots on the tone stub. */
.ls-dl .dl-slots { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .95fr); overflow: hidden; border-radius: 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-dl .dl-slots-photo { position: relative; min-height: 260px; background: var(--ls-line); }
.ls-dl .dl-slots-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ls-dl .dl-slots-photo::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 6px; background: radial-gradient(circle at 100% 50%, var(--ls-paper) 5.5px, #0000 6px) 0 0 / 100% 24px round; }
.ls-dl .dl-slots-body { padding: 28px 32px; }
.ls-dl .dl-slots-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.ls-dl .dl-slots-facts { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; line-height: 1.45; }
.ls-dl .dl-slots-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.ls-dl .dl-slots-facts svg { margin-top: 1px; }
.ls-dl .dl-slots-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 18px; }
.ls-dl .dl-slots-price strong { font-family: var(--tud-font-secondary); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
.ls-dl .dl-slots-price s { color: var(--ls-muted); font-size: 14px; font-weight: 600; }
.ls-dl .dl-slots-price span { color: var(--ls-soft); font-size: 14px; font-weight: 600; }
.ls-dl .dl-slots-stub { position: relative; padding: 28px 28px 24px; background: var(--ls-tone, var(--ls-sand)); }
.ls-dl .dl-slots-stub::before { content: ""; position: absolute; top: 0; bottom: 0; left: -6px; width: 6px; background: radial-gradient(circle at 100% 50%, var(--ls-tone, var(--ls-sand)) 5.5px, #0000 6px) 0 0 / 100% 24px round; }
.ls-dl .dl-slots-day { margin-top: 10px; font-size: 20px; font-weight: 700; }
.ls-dl .dl-slots-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.ls-dl .dl-slot { display: grid; gap: 2px; min-width: 104px; min-height: 56px; padding: 8px 16px; border-radius: 12px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); text-decoration: none; }
.ls-dl .dl-slot strong { font-size: 18px; font-weight: 700; white-space: nowrap; }
.ls-dl .dl-slot span { color: var(--ls-soft); font-size: 12px; font-weight: 600; }
.ls-dl a.dl-slot:hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink); }
.ls-dl .dl-slots-stub .brand-offer-action { margin-top: 18px; }
.ls-dl .dl-slots-stub .brand-offer-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; border-radius: 999px; }
/* The card is step one of booking: a day strip, every free time of the picked day, each a link into the booking page with that day and time chosen. */
.ls-dl .dl-pick { margin-top: 4px; }
.ls-dl .dl-days { margin: 0 -4px; padding: 4px 4px 8px; }
.ls-dl .dl-day { display: grid; align-content: center; justify-items: center; border-radius: 12px; color: var(--ls-ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-dl .dl-day span { color: var(--ls-soft); font-size: 12px; font-weight: 700; }
.ls-dl .dl-day strong { font-family: var(--tud-font-secondary); font-size: 20px; font-weight: 700; line-height: 1.15; }
.ls-dl .dl-day em { color: var(--ls-soft); font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.2; }
.ls-dl a.dl-day:hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink); }
.ls-dl .dl-day[aria-current] { color: var(--ls-paper); background: var(--ls-ink); box-shadow: none; }
.ls-dl .dl-day[aria-current] :is(span, em) { color: inherit; opacity: .8; }
.ls-dl .dl-day-panels { display: grid; }
.ls-dl .dl-day-panel { grid-area: 1 / 1; min-width: 0; }
.ls-dl .dl-day-panel[data-off] { visibility: hidden; }
.ls-dl .dl-slots-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ls-dl .dl-slots-more { display: inline-block; margin-top: 12px; color: var(--ls-ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ls-dl .dl-slots-more:hover { text-decoration-thickness: 2px; }
.ls-dl :is(.dl-slot, .dl-day, .dl-slots-more):focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 2px; }
/* The stub keeps its width: the seven days sit in one even row; times are compact pills (the price is stated once, in the body) that scroll after three rows. */
.ls-dl .dl-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; overflow: visible; }
.ls-dl .dl-day { min-width: 0; min-height: 58px; padding: 6px 2px; }
.ls-dl .dl-pick .dl-slots-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 168px; padding: 2px 6px 2px 2px; margin-left: -2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ls-dl .dl-pick .dl-slot { min-width: 0; min-height: 44px; padding: 6px 4px; place-content: center; text-align: center; }
.ls-dl .dl-pick .dl-slot strong { font-size: 14px; }
@media (max-width: 600px) {
  .ls-dl .dl-pick .dl-slots-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
}

/* More offers from the brand, when it has more than one. */
.ls-dl .dl-more-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ls-dl .dl-more-offer { display: grid; align-content: start; gap: 6px; padding: 22px; border-radius: 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-dl .dl-more-offer .dl-more-saving { font-family: var(--tud-font-secondary); font-size: 30px; font-weight: 700; letter-spacing: -0.035em; }
.ls-dl .dl-more-offer h3 { font-size: 18px; font-weight: 700; }
.ls-dl .dl-more-offer p { color: var(--ls-soft); font-size: 15px; line-height: 1.55; }
.ls-dl .dl-more-offer .brand-offer-action { margin-top: 10px; }

/* Highlights and gallery keep their markup (brand-page.css); headings in the page's type. */
.ls-dl .brand-section-title { font-size: clamp(30px, 3.1vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }

/* ---------- dark: what the tokens do not cover ---------- */
:root[data-theme="dark"] .ls-dl .dl-poster-badge, :root[data-theme="dark"] .ls-dl .dl-bid-plate { box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 10px 20px rgba(0, 0, 0, .28); }
:root[data-theme="dark"] .ls-dl .dl-photo { box-shadow: var(--tud-shadow-paper); }
:root[data-theme="dark"] .ls-dl .dl-offer { box-shadow: none; }
:root[data-theme="dark"] .ls-dl .dl-offer--none { box-shadow: inset 0 0 0 1px var(--ls-line-2); }
:root[data-theme="dark"] .ls-dl .dl-search-input::placeholder { color: #A39787; }
:root[data-theme="dark"] .ls-dl .dl-chip--all:not([aria-current]):not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1.5px var(--ls-line-2); }
:root[data-theme="dark"] .ls-dl .dl-wall-tile .tud-logo:has(> img)::after { content: none; }
:root[data-theme="dark"] .ls-dl .dl-bband--dots { background: radial-gradient(circle at 50% 100%, var(--ls-paper) 5px, #0000 5.5px) 0 0 / 24px 100% repeat-x, var(--dl-band-dark, var(--dl-band, var(--brand-band, #0F0C0A))); }
:root[data-theme="dark"] .ls-dl .shop .shop-card-photo { box-shadow: inset 0 0 0 1px #352E27; }

/* ---------- layout steps ---------- */
@media (max-width: 1100px) {
  .ls-dl .dl-photo--0 { right: -8px; width: 168px; }
  .ls-dl .dl-photo--1 { top: 290px; right: 0; width: 160px; }
}
@media (max-width: 960px) {
  .ls-dl .dl-index-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ls-dl .dl-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ls-dl .dl-poster { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .dl-poster-visual { order: -1; aspect-ratio: 16 / 9; }
  .ls-dl .dl-poster-visual::before { top: auto; right: 0; bottom: 0; width: auto; height: 6px; background: radial-gradient(circle at 50% 100%, #FF5C26 5.5px, #0000 6px) 0 0 / 24px 100% round; }
  .ls-dl .dl-poster-badge { bottom: -30px; left: 20px; }
  .ls-dl .dl-poster--logo .dl-poster-badge { bottom: auto; left: 50%; }
  .ls-dl .dl-poster-copy { padding-top: 44px; }
  .ls-dl .dl-poster--logo .dl-poster-copy { padding-top: 28px; }
  .ls-dl .dl-bhero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "side"; }
  .ls-dl .dl-bhero-side { display: grid; justify-items: center; padding-top: 24px; }
  .ls-dl .dl-photos { position: relative; inset: auto; display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
  .ls-dl .dl-photo { position: relative; top: auto; right: auto; width: 150px; }
  .ls-dl .dl-photo--0 { right: auto; width: 150px; transform: rotate(-4deg); }
  .ls-dl .dl-photo--1 { top: 12px; right: auto; width: 150px; transform: rotate(3deg); }
  .ls-dl .dl-offer { width: 100%; max-width: 560px; }
  .ls-dl .dl-bhero-links { padding-top: 12px; }
  .ls-dl .dl-slots { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .dl-slots-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .ls-dl .dl-slots-photo::after { top: auto; left: 0; width: auto; height: 6px; background: radial-gradient(circle at 50% 100%, var(--ls-paper) 5.5px, #0000 6px) 0 0 / 24px 100% round; }
  .ls-dl .dl-slots-stub::before { top: -6px; left: 0; right: 0; bottom: auto; width: auto; height: 6px; background: radial-gradient(circle at 50% 0, var(--ls-tone, var(--ls-sand)) 5.5px, #0000 6px) 0 0 / 24px 100% round; }
  .ls-dl .shop .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ls-dl .dl-steps.dl-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) { .ls-dl .dl-about-faq { grid-template-columns: minmax(0, 1fr); } }
/* Two columns: the short About column rides down beside the questions. */
@media (min-width: 861px) { .ls-dl .dl-about-faq > .dl-about { position: sticky; top: calc(var(--site-header-h, 76px) + 24px); } }
@media (max-width: 760px) {
  .ls-dl .dl-cat-hero-in { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .dl-cat-art { width: 150px; margin-top: -8px; }
  .ls-dl .dl-cat-art.dl-line--wide { width: 190px; }
  .ls-dl .dl-steps.dl-steps--4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ls-dl .dl-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ls-dl .dl-wall-tile { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 14px; }
  .ls-dl .dl-wall-tile .tud-logo { --logo-size: 48px; }
  .ls-dl .dl-wall-name { font-size: 15px; }
  .ls-dl .dl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ls-dl .dl-tile { min-height: 156px; padding: 16px; }
  .ls-dl .dl-tile-art { top: 14px; left: 14px; width: 64px; height: 64px; }
  .ls-dl .dl-tile-name { font-size: 17px; }
  .ls-dl .shop .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ls-dl .shop .shop-card-title { left: 12px; right: 12px; bottom: 38px; font-size: 14px; }
  .ls-dl .shop .shop-card-price { left: 12px; right: 12px; bottom: 12px; }
  .ls-dl .shop .shop-card-price :is(.shop-price-student, strong) { font-size: 16px; }
  .ls-dl .dl-invite { min-height: 100px; }
}
@media (max-width: 600px) {
  .ls-dl .dl-head { align-items: baseline; }
  .ls-dl .dl-chips { margin-top: 24px; }
  .ls-dl .dl-chip { min-height: 44px; font-size: 14px; }
  .ls-dl .ls-faq summary { min-height: 68px; }
  .ls-dl .dl-offer { padding: 24px 24px 20px; }
  .ls-dl .dl-offer-saving { font-size: clamp(52px, 15vw, 64px); }
  .ls-dl .dl-signup-row .ls-signup { padding: 20px 18px 18px; }
  .ls-dl .dl-slots-body, .ls-dl .dl-slots-stub { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-dl .dl-chip, .ls-dl .dl-wall-tile, .ls-dl .dl-tile, .ls-dl .dl-terms > summary::after { transition: none; }
}
@media (forced-colors: active) {
  .ls-dl .dl-chip:is([aria-current], [aria-pressed="true"]) { outline: 2px solid CanvasText; }
  .ls-dl .dl-offer, .ls-dl .dl-poster { border: 1px solid CanvasText; }
}

/* "Get my code" is the longest action on these pages, so the stub and its pill grow to fit it. */
.ls-dl .hm-row { grid-template-columns: 104px minmax(0, 1fr) 128px; }
.ls-dl .hm-row-foil-act { width: 104px; }
@media (max-width: 720px) {
  .ls-dl .hm-row { grid-template-columns: 84px minmax(0, 1fr) 112px; --row-stub: 84px; }
  .ls-dl .hm-row-foil-act { width: 96px; padding: 0 6px; font-size: 12.5px; }
}
/* A long saving (Rs 1,000 off) steps down a size so it stays on one line. */
.ls-dl .dl-offer-saving--long { font-size: clamp(44px, 4.4vw, 64px); }
@media (max-width: 600px) { .ls-dl .dl-offer-saving--long { font-size: clamp(40px, 12vw, 52px); } }
.ls-dl .dl-slots-title a { color: inherit; text-decoration: none; }
.ls-dl .dl-slots-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ls-dl .shop .shop-filters { padding: 0; }
@media (max-width: 600px) {
  html[data-js="on"] .ls-dl .shop:not(.is-all) .shop-grid > .shop-card:nth-child(n + 5) { display: none; }
  .ls-dl .shop .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ls-dl .shop .shop-filters { flex-wrap: nowrap; margin-inline: -16px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; }
  .ls-dl .shop .shop-filter { flex: none; }
  .ls-dl .dl-shop-more { width: 100%; }
}
@media (min-width: 601px) { .ls-dl .dl-shop-more--phone { display: none; } }
/* The finals sit their sections closer than the homepage does. */
.ls-dl.ls-home { --ls-section: clamp(48px, 5vw, 72px); }
@media (max-width: 600px) {
  .ls-dl .dl-cat-hero { padding-top: 24px; padding-bottom: 40px; }
  .ls-dl .dl-cat-art { width: 128px; margin-top: -20px; }
  .ls-dl .dl-cat-art.dl-line--wide { width: 170px; }
  .ls-dl .dl-cat-lead { margin-top: 14px; }
  .ls-dl .dl-bhero .dl-h1, .ls-dl .dl-cat-hero .dl-h1 { font-size: 40px; }
}

/* ---------- index round 2: search clear, the category link, the empty state's partner link, the split FAQ ---------- */
.ls-dl .dl-search-input { padding-right: 52px; }
.ls-dl .dl-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.ls-dl .dl-search-clear { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; color: var(--ls-ink-2); background: transparent; cursor: pointer; transform: translateY(-50%); }
.ls-dl .dl-search-clear[hidden] { display: none; }
.ls-dl .dl-search-clear:hover { color: var(--ls-ink); background: var(--ls-line); }
.ls-dl .dl-count { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 16px; }
.ls-dl .dl-cat-link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--ls-accent-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ls-dl .dl-cat-link[hidden], .ls-dl .dl-empty-partner[hidden] { display: none; }
.ls-dl .dl-empty-partner { display: inline-flex; align-items: center; min-height: 44px; color: var(--ls-accent-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ls-dl .dl-empty--filter .dl-empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; margin-top: 18px; }
.ls-dl .dl-empty--filter .dl-empty-actions .ls-btn { margin-top: 0; }
.ls-dl .dl-faq-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 24px clamp(32px, 6vw, 96px); }
.ls-dl .dl-faq-split .ls-faq { max-width: none; }
.ls-dl .dl-faq-side { position: sticky; top: 96px; }
.ls-dl .dl-faq-side p { max-width: 34ch; margin: 14px 0 24px; color: var(--ls-ink-2); font-size: 17px; line-height: 1.55; }
.ls-dl .dl-faq-side p a { color: var(--ls-accent-text); font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .ls-dl .dl-faq-split { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .dl-faq-side { position: static; }
}
@media (prefers-reduced-motion: reduce) { .ls-dl .dl-faq-side { position: static; } }

/* ---------- index hero, round 2 ---------- */
.ls-dl .dl-hero .dl-lead { color: var(--ls-ink-2); }
.ls-dl .dl-hero .dl-search { margin-top: 28px; }
.ls-dl .dl-hero + .ls-wrap > #deals-feed > .dl-deals:first-child { margin-top: clamp(40px, 4.4vw, 56px); }
.ls-dl .dl-chip-n { margin-left: 2px; color: var(--ls-ink-2); font-weight: 700; }
.ls-dl .dl-chip:is([aria-current], [aria-pressed="true"]) .dl-chip-n { color: inherit; opacity: .8; }

/* a: a full-width sand band, the heading centred, the big search, the category tiles as the chips */
.ls-dl .dl-hero--a { position: relative; padding: clamp(40px, 4.6vw, 64px) 0 clamp(48px, 4.6vw, 64px); text-align: center; background: var(--ls-sand);
  -webkit-mask: radial-gradient(circle at 50% 100%, #0000 7.5px, #000 8px) 0 0 / 24px 100% round; mask: radial-gradient(circle at 50% 100%, #0000 7.5px, #000 8px) 0 0 / 24px 100% round; }
.ls-dl .dl-hero--a .dl-h1 { font-size: clamp(40px, 5vw, 72px); }
.ls-dl .dl-hero--a .dl-lead { max-width: 760px; margin: 18px auto 0; color: var(--ls-ink); font-size: clamp(16px, 1.35vw, 19px); }
.ls-dl .dl-hero--a .dl-search { max-width: 760px; margin: 30px auto 0; text-align: left; }
.ls-dl .dl-hero--a .dl-search-input { font-size: 17px; }
.ls-dl .dl-tchips ul { display: grid; grid-template-columns: repeat(6, minmax(0, 168px)); justify-content: center; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.ls-dl .dl-tchip { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 150px; padding: 16px 10px; border-radius: 16px; color: var(--ls-ink); background: var(--ls-tile, var(--ls-paper)); text-decoration: none; transition: transform 160ms var(--ls-ease), box-shadow 160ms var(--ls-ease); }
.ls-dl .dl-tchip-art, .ls-dl .dl-tchip-all { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; }
.ls-dl .dl-tchip-art.dl-line--wide { width: 72px; }
.ls-dl .dl-tchip-art img { width: 100%; height: 100%; object-fit: contain; }
.ls-dl .dl-tchip-all { color: var(--ls-orange-deep); }
.ls-dl .dl-tchip-name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.ls-dl .dl-tchip-n { color: var(--ls-ink-2); font-size: 14px; font-weight: 600; }
.ls-dl .dl-tchip--all { background: var(--ls-paper); }
.ls-dl .dl-tchip:is([aria-current], [aria-pressed="true"]) { color: var(--ls-canvas); background: var(--ls-ink); }
.ls-dl .dl-tchip:is([aria-current], [aria-pressed="true"]) .dl-tchip-n { color: inherit; opacity: .85; }
.ls-dl .dl-tchip:is([aria-current], [aria-pressed="true"]) .dl-tchip-all { color: var(--ls-orange); }
:root:not([data-theme="dark"]) .ls-home.ls-dl .dl-tchip:is([aria-current], [aria-pressed="true"]) img.hm-art-light { display: none; }
:root:not([data-theme="dark"]) .ls-home.ls-dl .dl-tchip:is([aria-current], [aria-pressed="true"]) img.hm-art-dark { display: block; }
:root[data-theme="dark"] .ls-home.ls-dl .dl-tchip:is([aria-current], [aria-pressed="true"]) img.hm-art-dark { display: none; }
:root[data-theme="dark"] .ls-home.ls-dl .dl-tchip:is([aria-current], [aria-pressed="true"]) img.hm-art-light { display: block; }
@media (hover: hover) { .ls-dl .dl-tchip:not([aria-pressed="true"]):not([aria-current]):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--ls-ink); } }

/* b and c: the copy on the left, the photos or the poster on the right */
.ls-dl :is(.dl-hero--b, .dl-hero--c) { padding: clamp(32px, 4.4vw, 60px) 0 0; }
.ls-dl :is(.dl-hero--b, .dl-hero--c) .dl-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 32px clamp(32px, 5vw, 72px); }
.ls-dl :is(.dl-hero--b, .dl-hero--c) .dl-h1 { max-width: none; font-size: clamp(40px, 4.8vw, 70px); }
.ls-dl :is(.dl-hero--b, .dl-hero--c) .dl-lead { max-width: 52ch; margin-top: 18px; font-size: clamp(16px, 1.35vw, 19px); }
.ls-dl :is(.dl-hero--b, .dl-hero--c) .dl-search { max-width: 560px; }
.ls-dl :is(.dl-hero--b, .dl-hero--c) .dl-chips { margin-top: 18px; }
.ls-dl .dl-fan { position: relative; height: clamp(420px, 38vw, 540px); }
.ls-dl .dl-fan-card { position: absolute; display: block; width: 42%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; color: #FAF7F2; box-shadow: var(--tud-shadow-card-raised); text-decoration: none; transition: transform 200ms var(--ls-ease); }
.ls-dl .dl-fan-card img { width: 100%; height: 100%; object-fit: cover; }
.ls-dl .dl-fan-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 20, 18, .7), rgba(20, 20, 18, 0) 45%); }
.ls-dl .dl-fan-text { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: grid; text-shadow: 0 1px 2px rgba(20, 20, 18, .35); }
.ls-dl .dl-fan-saving { font-family: var(--tud-font-secondary); font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -0.03em; }
.ls-dl .dl-fan-brand { font-size: 15px; font-weight: 700; }
.ls-dl .dl-fan-card--0 { top: 0; left: 4%; transform: rotate(-6deg); z-index: 1; }
.ls-dl .dl-fan-card--1 { top: 12%; right: 2%; transform: rotate(4deg); }
.ls-dl .dl-fan-card--2 { bottom: 0; left: 26%; transform: rotate(-3deg); z-index: 2; }
@media (hover: hover) { .ls-dl .dl-fan-card:hover { transform: rotate(0) translateY(-4px); z-index: 3; } }
.ls-dl .dl-new--hero .dl-poster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "visual" "copy"; min-height: 0; box-shadow: var(--tud-shadow-card-raised); }
.ls-dl .dl-new--hero .dl-poster-visual { grid-area: visual; aspect-ratio: 16 / 7; }
.ls-dl .dl-new--hero .dl-poster-visual::before { top: auto; right: 0; bottom: 0; width: auto; height: 6px; background: radial-gradient(circle at 50% 100%, #FF5C26 5.5px, #0000 6px) 0 0 / 24px 100% round; }
.ls-dl .dl-new--hero .dl-poster-badge { top: auto; bottom: -28px; left: auto; right: 24px; transform: none; padding: 4px; border-radius: 16px; }
.ls-dl .dl-new--hero .dl-poster-badge .tud-logo { --logo-size: 60px; border-radius: 12px; }
.ls-dl .dl-new--hero .dl-poster-copy { grid-area: copy; padding: 24px 28px 28px; }
.ls-dl .dl-new--hero .dl-poster-saving { font-size: clamp(56px, 5.4vw, 80px); }
.ls-dl .dl-new--hero .dl-poster-line { margin-top: 10px; font-size: 16px; }
.ls-dl .dl-new--hero .dl-poster .ls-btn { margin-top: 16px; }
.ls-dl .dl-tchips li { display: grid; }
.ls-dl .dl-strip { margin-top: clamp(28px, 3vw, 40px); }
.ls-dl .dl-strip-list { display: flex; gap: 12px; margin: 0 auto; padding-block: 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ls-dl .dl-strip-tile { display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 18px 8px 8px; border-radius: 14px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); font-size: 16px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.ls-dl .dl-strip-tile .tud-logo { --logo-size: 48px; border-radius: 10px; }
.ls-dl .dl-strip-tile:hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink); }

@media (max-width: 1100px) {
  .ls-dl .dl-tchips ul { grid-template-columns: repeat(3, minmax(0, 168px)); }
}
@media (max-width: 860px) {
  .ls-dl :is(.dl-hero--b, .dl-hero--c) .dl-hero-in { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .dl-fan { height: 220px; max-width: 420px; }
  .ls-dl .dl-fan-card { width: 31%; }
  .ls-dl .dl-fan-card--0 { top: 10px; left: 0; }
  .ls-dl .dl-fan-card--1 { top: 0; left: 34%; right: auto; }
  .ls-dl .dl-fan-card--2 { top: 10px; bottom: auto; left: auto; right: 0; }
  .ls-dl .dl-fan-saving { font-size: 16px; }
  .ls-dl .dl-fan-brand { font-size: 12px; }
}
@media (max-width: 600px) {
  .ls-dl .dl-hero--a { padding: 28px 0 40px; }
  .ls-dl .dl-hero--a .dl-h1 { font-size: 40px; }
  .ls-dl .dl-hero--a .dl-lead { font-size: 16px; }
  .ls-dl .dl-hero--a .dl-search { margin-top: 22px; }
  .ls-dl .dl-tchips ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
  .ls-dl .dl-tchip { min-height: 100px; padding: 10px 6px; border-radius: 14px; gap: 2px; }
  .ls-dl .dl-tchip-art, .ls-dl .dl-tchip-all { width: 40px; height: 40px; margin-bottom: 4px; }
  .ls-dl .dl-tchip-art.dl-line--wide { width: 48px; }
  .ls-dl .dl-tchip-name { font-size: 13.5px; }
  .ls-dl .dl-tchip-n { font-size: 12.5px; }
  .ls-dl :is(.dl-hero--b, .dl-hero--c) .dl-h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) { .ls-dl .dl-tchip, .ls-dl .dl-fan-card { transition: none; } .ls-dl .dl-tchip:hover, .ls-dl .dl-fan-card:hover { transform: none; } }

/* ---------- a brand's own identity (founder, round 2 addendum) ----------
   A brand with a saved design (or a preview default, lib/brand-identity-preview.js) dresses its
   hero in its palette: the tone as the hero wash, its accent as the offer card, a ring in its
   accent round the logo and the photos, its band below. Our orange stays on our own action. */
.ls-dl .dl-brand[data-brand-design="brand"] .dl-bhero { background: var(--brand-tone); }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-bid-plate { background: var(--brand-accent); box-shadow: 0 1px 2px rgba(20, 20, 18, .12), 0 10px 22px -10px rgba(20, 20, 18, .35); }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-photo { width: 232px; box-shadow: 0 0 0 5px var(--brand-accent), var(--tud-shadow-paper); }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-photo--1 { top: 320px; }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer { --ticket-surface: var(--brand-accent); color: var(--brand-accent-ink); background: var(--brand-accent); box-shadow: var(--tud-shadow-card-raised); }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer-title,
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer .deal-code-use,
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer .deal-code-note,
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer .deal-code-expiry { color: var(--brand-accent-ink); }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer :focus-visible { outline-color: var(--brand-accent-ink); }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer ::selection { color: var(--brand-accent); background: var(--brand-accent-ink); }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer .brand-offer-cta { color: #141412; background: #FF5C26; border-color: #FF5C26; }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer .brand-offer-cta:hover { background: #FF7A4D; border-color: #FF7A4D; }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer .brand-offer-cta:disabled,
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer .brand-offer-cta[aria-disabled="true"] { color: var(--brand-accent-ink); background: transparent; border-color: var(--brand-accent-ink); }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer .deal-code { color: var(--brand-accent); background: var(--brand-accent-ink); }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer .deal-code-value { color: var(--brand-accent); }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-offer .deal-code-copy { color: var(--brand-accent); border-color: var(--brand-accent); }
.ls-dl .dl-brand[data-brand-design="brand"] .dl-bchip:not(a):not(.dl-bchip--status) { background: color-mix(in srgb, var(--brand-tone) 40%, var(--ls-paper)); }
@media (max-width: 860px) {
  .ls-dl .dl-brand[data-brand-design="brand"] .dl-photo { width: 168px; }
}
@media (max-width: 600px) {
  .ls-dl .dl-brand[data-brand-design="brand"] .dl-photo { width: 150px; box-shadow: 0 0 0 4px var(--brand-accent), var(--tud-shadow-paper); }
}
@media (forced-colors: active) { .ls-dl .dl-brand[data-brand-design="brand"] .dl-photo { box-shadow: none; } }
/* The back two cards carry their words at the top, so the front card never covers them. */
@media (min-width: 861px) {
  .ls-dl :is(.dl-fan-card--0, .dl-fan-card--1) .dl-fan-text { top: 14px; bottom: auto; }
  .ls-dl :is(.dl-fan-card--0, .dl-fan-card--1)::after { background: linear-gradient(to bottom, rgba(20, 20, 18, .7), rgba(20, 20, 18, 0) 45%); }
}

/* ---------- the brand's choices: photo frame, offer card, hero layout (round 2, addendum 2) ---------- */
.ls-dl .dl-bband.brand-band::before, .ls-dl .dl-bband.brand-band::after { -webkit-mask-position: 0 50%; mask-position: 0 50%; }

/* Photo frame: tilted (the default above), rounded, polaroid. */
.ls-dl .dl-brand[data-brand-frame="rounded"] .dl-photo { border-radius: 22px; transform: none; box-shadow: var(--tud-shadow-paper); }
.ls-dl .dl-brand[data-brand-frame="rounded"] .dl-photo--1 { right: 40px; }
.ls-dl .dl-brand[data-brand-frame="polaroid"] .dl-photo { padding: 10px 10px 36px; border-radius: 4px; background: #FFFFFF; box-shadow: var(--tud-shadow-paper); aspect-ratio: auto; }
.ls-dl .dl-brand[data-brand-frame="polaroid"] .dl-photo img { aspect-ratio: 3 / 4; height: auto; border-radius: 2px; }
.ls-dl .dl-brand[data-brand-frame="polaroid"] .dl-photo--0 { transform: rotate(-5deg); }
.ls-dl .dl-brand[data-brand-frame="polaroid"] .dl-photo--1 { transform: rotate(4deg); }

/* Offer card: solid (the default above), outlined, ticket. Our orange stays on the action in all three. */
.ls-dl .dl-brand[data-brand-card="outlined"] .dl-offer { color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 3px var(--brand-accent), var(--tud-shadow-card-raised); }
.ls-dl .dl-brand[data-brand-card="outlined"] .dl-offer-saving { color: var(--brand-accent); }
.ls-dl .dl-brand[data-brand-card="outlined"] :is(.dl-offer-title, .dl-offer .deal-code-use, .dl-offer .deal-code-note, .dl-offer .deal-code-expiry) { color: var(--ls-ink); }
.ls-dl .dl-brand[data-brand-card="outlined"] .dl-offer :focus-visible { outline-color: var(--ls-ink); }
.ls-dl .dl-brand[data-brand-card="outlined"] .dl-offer ::selection { color: var(--ls-paper); background: var(--ls-ink); }
.ls-dl .dl-brand[data-brand-card="outlined"] .dl-offer .brand-offer-cta:is(:disabled, [aria-disabled="true"]) { color: var(--ls-ink); border-color: var(--ls-ink); }
.ls-dl .dl-brand[data-brand-card="outlined"] .dl-offer .deal-code { color: var(--brand-accent-ink); background: var(--brand-accent); }
.ls-dl .dl-brand[data-brand-card="outlined"] .dl-offer :is(.deal-code-value, .deal-code-copy) { color: var(--brand-accent-ink); border-color: var(--brand-accent-ink); }
.ls-dl .dl-brand[data-brand-card="ticket"] .dl-offer { border-radius: 14px;
  -webkit-mask: radial-gradient(circle at 0 62%, #0000 15px, #000 15.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 62%, #0000 15px, #000 15.5px) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 62%, #0000 15px, #000 15.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 62%, #0000 15px, #000 15.5px) 100% 0 / 51% 100% no-repeat; }
.ls-dl .dl-brand[data-brand-card="ticket"] .dl-offer .brand-offer-action { position: relative; padding-top: 22px; }
.ls-dl .dl-brand[data-brand-card="ticket"] .dl-offer .brand-offer-action::before { content: ""; position: absolute; top: 0; left: 4px; right: 4px; border-top: 2px dashed currentColor; opacity: .55; }
/* The ticket's seam (founder, 24 Oct 2026): the tear line and the two notches sit on ONE seam, the top of the action
   row, however the words above wrap and at any text size or zoom. The card is a grid whose action row is a fixed
   late row (--ticket-seam-row), so everything above it stacks as before; the paper is two pieces, a ::before ending
   at the seam and an ::after starting at it, each cutting its half of the notch at that edge. --ticket-seam is the
   only number: how far the seam sits below the last row above it (the action's top margin, the pieces' overlap). */
.ls-dl .dl-brand[data-brand-card="ticket"] :is(.xf-deal, .dl-bhero-side) .dl-offer:has(> .brand-offer-action) {
  --ticket-seam: 20px; --ticket-seam-row: 20; --ticket-notch: 15px;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; isolation: isolate;
  background: none !important; box-shadow: none !important; -webkit-mask: none; mask: none; }
.ls-dl .dl-brand[data-brand-card="ticket"] :is(.xf-deal, .dl-bhero-side) .dl-offer:has(> .brand-offer-action) > .brand-offer-action { grid-row: var(--ticket-seam-row); margin-top: var(--ticket-seam); }
.ls-dl .dl-brand[data-brand-card="ticket"] :is(.xf-deal, .dl-bhero-side) .dl-offer:has(> .brand-offer-action) > .dl-offer-note { grid-row: calc(var(--ticket-seam-row) + 1); }
.ls-dl .dl-brand[data-brand-card="ticket"] :is(.xf-deal, .dl-bhero-side) .dl-offer:has(> .brand-offer-action) > .brand-offer-action::before { top: -1px; }
.ls-dl .dl-brand[data-brand-card="ticket"] :is(.xf-deal, .dl-bhero-side) .dl-offer:has(> .brand-offer-action)::before,
.ls-dl .dl-brand[data-brand-card="ticket"] :is(.xf-deal, .dl-bhero-side) .dl-offer:has(> .brand-offer-action)::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; pointer-events: none; border: 1.5px solid var(--xfd-edge, transparent); border-radius: inherit; background: var(--ticket-surface, #FF5C26); background-origin: border-box; }
.ls-dl .dl-brand[data-brand-card="ticket"] :is(.xf-deal, .dl-bhero-side) .dl-offer:has(> .brand-offer-action)::before {
  grid-row: auto / var(--ticket-seam-row); top: 0; bottom: calc(var(--ticket-seam) * -1); border-bottom-width: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  -webkit-mask: radial-gradient(circle at 0 100%, #0000 var(--ticket-notch), #000 calc(var(--ticket-notch) + .5px)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--ticket-notch), #000 calc(var(--ticket-notch) + .5px)) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 100%, #0000 var(--ticket-notch), #000 calc(var(--ticket-notch) + .5px)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--ticket-notch), #000 calc(var(--ticket-notch) + .5px)) 100% 0 / 51% 100% no-repeat; }
.ls-dl .dl-brand[data-brand-card="ticket"] :is(.xf-deal, .dl-bhero-side) .dl-offer:has(> .brand-offer-action)::after {
  grid-row: var(--ticket-seam-row) / auto; top: var(--ticket-seam); bottom: 0; border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0;
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--ticket-notch), #000 calc(var(--ticket-notch) + .5px)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--ticket-notch), #000 calc(var(--ticket-notch) + .5px)) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 0, #0000 var(--ticket-notch), #000 calc(var(--ticket-notch) + .5px)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--ticket-notch), #000 calc(var(--ticket-notch) + .5px)) 100% 0 / 51% 100% no-repeat; }

/* Hero layout: classic (photos beside the card), spotlight (one big photo), compact (no photos, the deal first). */
.ls-dl .dl-brand.brand-layout-spotlight .dl-photo--1 { display: none; }
.ls-dl .dl-brand.brand-layout-spotlight .dl-photo--0 { width: 300px; top: -8px; right: -40px; }
.ls-dl .dl-brand.brand-layout-spotlight .dl-bhero-side { padding-top: 150px; }
.ls-dl .dl-brand.brand-layout-compact .dl-photos { display: none; }
.ls-dl .dl-brand.brand-layout-compact .dl-bhero-side { padding-top: 40px; }
@media (max-width: 860px) {
  .ls-dl .dl-brand.brand-layout-spotlight .dl-photo--0 { width: 220px; top: auto; right: auto; }
  .ls-dl .dl-brand.brand-layout-spotlight .dl-bhero-side, .ls-dl .dl-brand.brand-layout-compact .dl-bhero-side { padding-top: 0; }
  .ls-dl .dl-brand[data-brand-frame="rounded"] .dl-photo--1 { right: auto; }
}
@media (forced-colors: active) { .ls-dl .dl-brand[data-brand-card="ticket"] .dl-offer { -webkit-mask: none; mask: none; } .ls-dl .dl-brand[data-brand-card="ticket"] .dl-offer::before, .ls-dl .dl-brand[data-brand-card="ticket"] .dl-offer::after { display: none; } }

/* ---------- consistency with the approved pages (founder, 20 Oct) ----------
   Fields are the app's 12px rounded rectangles, 52px tall (the search above). Doodles in a row read the same size
   and stand optically centred (ink measured with PIL: the sneaker's ink is half its canvas tall, the sports ball
   pulls the dumbbell's weight 7% left), never tilted at rest, and lean on hover like every other doodle. The
   category hero's title starts at the site's title y with its doodle centred on the title block, no panel. Under
   900 every hero leads with its art, centred, then the title, the lead, and the actions last, full width. */

/* Equal visual size and optical centre in the rows: the wrapper takes the correction, the picture the hover.
   Measured with PIL (22 Oct 2026): each doodle's optical centre is the mean of its ink box centre and its ink's mass
   centre, and its size the square root of its ink box area, set to 0.86 of the box. So the laptop (its bulb is light
   ink, the laptop heavy and low) rises 7%, the pizza bike 5%, the sneaker (half its canvas tall) grows a tenth. */
.ls-dl .dl-line { --dl-dx: 0%; --dl-dy: 0%; --dl-k: 1; }
.ls-dl .dl-line--sneaker { --dl-dx: 1.5%; --dl-dy: -1.8%; --dl-k: 1.1; }
.ls-dl .dl-line--sports-fitness { --dl-dx: 4%; --dl-dy: -1%; --dl-k: 1.08; }
.ls-dl .dl-line--pizza-bike { --dl-dx: -.4%; --dl-dy: -5%; --dl-k: .96; }
.ls-dl .dl-line--rickshaw { --dl-dx: -.4%; --dl-k: .88; }
.ls-dl .dl-line--study-tools { --dl-dx: -.4%; --dl-dy: -7.3%; --dl-k: .91; }
/* In the small chip row the laptop still read low (founder, 25 Oct on a phone): about 2px more lift there. */
.ls-dl .dl-chip-art.dl-line--study-tools { --dl-dy: -13%; }
.ls-dl .dl-line--beauty-care { --dl-dx: 5.3%; --dl-dy: -5.2%; --dl-k: .97; }
.ls-dl :is(.dl-tchip-art, .dl-chip-art) { transform-origin: 50% 50%; transform: translate(var(--dl-dx), var(--dl-dy)) scale(var(--dl-k)); }
/* Tiles keep their doodle on the left edge, so only the height and the size apply there. */
.ls-dl .dl-tile-art { transform-origin: 0 50%; transform: translateY(var(--dl-dy)) scale(var(--dl-k)); }
.ls-dl li:nth-child(odd) .dl-line { --dh-r: -3deg; }
.ls-dl li:nth-child(even) .dl-line { --dh-r: 3deg; }
.ls-dl .dl-cat-art { --dh-r: -3deg; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ls-dl .dl-line img { transition: transform var(--tud-duration-base, 200ms) var(--tud-ease-standard, ease); }
  .ls-dl :is(.dl-tchip, .dl-tile, .dl-chip):is(:hover, :focus-visible) .dl-line img,
  .ls-dl .dl-cat-art:hover img { transform: rotate(var(--dh-r)) scale(1.04); }
}

/* The title at the site's title y, 148px at 1440 (76px header + 72px; the category's breadcrumb takes 52px of it), the category doodle centred on the title block. */
@media (min-width: 901px) {
  .ls-dl .dl-cat-hero { padding-top: 20px; }
  .ls-dl .dl-hero--a { padding-top: 72px; }
  .ls-dl .dl-cat-hero-in { align-items: start; }
  .ls-dl .dl-cat-art { align-self: center; width: min(100%, 300px); height: 264px; margin-block: -12px; aspect-ratio: auto; }
  .ls-dl .dl-cat-art.dl-line--wide { aspect-ratio: auto; }
}

/* No live offers: no card, the words and one ink action in the title block, the empty box beside them. */
.ls-dl .dl-none { margin-top: 28px; }
.ls-dl .dl-none-title { color: var(--ls-ink); font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; }
.ls-dl .dl-none p { max-width: 46ch; margin-top: 10px; color: var(--ls-soft); font-size: 17px; line-height: 1.55; }
.ls-dl .dl-none .ls-btn { margin-top: 22px; }
.ls-dl .dl-bhero-side--none { display: grid; place-items: center; padding-top: 0; }
.ls-dl .dl-none-art { display: block; width: min(100%, 300px); }
.ls-dl .dl-none-art img { display: block; width: 100%; height: auto; }
.ls-dl .dl-bhero-links { margin-top: 14px; }

/* Under 900: art first, centred; then the title, the lead and the actions, full width and stacked. */
@media (max-width: 960px) {
  .ls-dl .dl-bhero-in { display: flex; flex-direction: column; align-items: stretch; }
  .ls-dl .dl-bhero-copy, .ls-dl .dl-bhero-side { display: contents; }
  .ls-dl .dl-bhero-copy > * { order: 2; }
  .ls-dl .dl-bhero-copy > .ls-crumbs, .ls-dl .dl-bhero-copy > nav:first-child { order: 0; }
  .ls-dl .dl-bhero-side > :is(.dl-photos, .dl-none-art) { order: 1; align-self: center; }
  .ls-dl .dl-bhero-side > .dl-photos { margin: 22px 0 0; }
  .ls-dl .dl-brand .dl-bhero-side .dl-photo { top: auto; right: auto; }
  .ls-dl .dl-brand .dl-bhero-side .dl-photo--1 { top: 12px; }
  .ls-dl .dl-bhero-side > .dl-none-art { width: 200px; margin-top: 24px; }
  .ls-dl .dl-bhero-side > .dl-offer { order: 3; align-self: center; margin-top: 28px; }
  .ls-dl .dl-bhero-copy > .dl-bhero-links { order: 4; padding-top: 0; margin-top: 16px; }
}
@media (max-width: 900px) {
  .ls-dl .dl-cat-hero-in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .ls-dl .dl-cat-copy { display: contents; }
  .ls-dl .dl-cat-copy > .ls-crumbs, .ls-dl .dl-cat-copy > nav:first-child { order: 0; margin-bottom: 0; }
  .ls-dl .dl-cat-art { order: 1; align-self: center; justify-self: auto; width: 170px; height: 150px; margin: 20px 0 0; aspect-ratio: auto; }
  .ls-dl .dl-cat-art.dl-line--wide { width: 200px; }
  .ls-dl .dl-cat-hero .dl-h1 { order: 2; margin-top: 20px; }
  .ls-dl .dl-cat-lead { order: 3; }
  .ls-dl :is(.dl-faq-side, .dl-poster-copy, .dl-none, .dl-empty) .ls-btn,
  .ls-dl .dl-shop-more { display: flex; justify-content: center; width: 100%; min-height: 52px; }
  .ls-dl .dl-poster-copy { align-items: stretch; }
  .ls-dl .dl-empty { justify-items: stretch; }
  .ls-dl .dl-empty-art { justify-self: center; }
  .ls-dl .dl-empty-actions, .ls-dl .dl-empty--filter .dl-empty-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .ls-dl .dl-empty-actions > a:not(.ls-btn) { align-self: center; }
  .ls-dl .dl-empty--cat { justify-self: stretch; max-width: none; padding-inline: 0; }
}
@media (max-width: 600px) {
  .ls-dl .dl-btitle { gap: 12px; margin-top: 18px; }
  .ls-dl .dl-bid-plate { padding: 2px; border-radius: 11px; }
  .ls-dl .dl-bid-plate .tud-logo.brand-identity-logo { --logo-size: 36px; border-radius: 9px; }
  .ls-dl .dl-btitle .dl-bid-plate { margin-top: 0; }
  .ls-dl .dl-cat-art { width: 150px; height: 132px; }
  .ls-dl .dl-cat-art.dl-line--wide { width: 180px; }
}
@media (prefers-reduced-motion: reduce) { .ls-dl .dl-line img { transition: none; } }

/* A round profile-picture logo (lib/round-logos.js): a full circle, the photo centred to fill it, a thin brand-accent ring.
   The same class and look as the shop and product pages (shop.css). In the hero the plate turns round with it. */
.ls-dl .tud-logo.tud-logo--round { border-radius: 50%; box-shadow: 0 0 0 1.5px var(--brand-accent, #8E2A1F); }
.ls-dl .tud-logo.tud-logo--round > img { object-fit: cover; object-position: 50% 50%; border-radius: 50%; }
.ls-dl .dl-brand .dl-bid-plate:has(> .tud-logo--round) { padding: 0; border-radius: 50%; background: transparent; }
.ls-dl .dl-brand .dl-bid-plate .tud-logo.brand-identity-logo.tud-logo--round { border-radius: 50%; box-shadow: 0 0 0 1.5px var(--brand-accent, #8E2A1F); }

/* One dark mode for the deals pages and the brand pages (founder, 22 Oct 2026).
   The theme's shared pieces wear the deals F treatment on brand F's hero and
   product stage too: channel and status pills outlined, never filled (1.5px
   ring, no fill; on a brand's own ground the ring is the ink at 55%, the same
   ring brand F's product chip already uses); breadcrumbs and the lead in ink-2
   with the current page in ink; a link chip's focus ring 3px, as on the deals
   chips. Dark only: light is the approved light. A brand's own palette (hero
   ground, title colour, band), photos and sticker are the brand's and stay. */
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-hero .xf-more .dl-bchip:not(a):not(.dl-bchip--status) { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ls-ink) 55%, transparent); }
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-hero .xf-more .dl-bchip--status { background: transparent; }
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-hero .xf-more a.dl-bchip:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 3px; }
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-hero .xf-crumbs .ls-crumbs :is(li, a),
:root[data-theme="dark"] .ls-dl .xp .xp-crumbs .ls-crumbs :is(li, a) { color: var(--ls-ink-2); }
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-hero .xf-crumbs .ls-crumbs a,
:root[data-theme="dark"] .ls-dl .xp .xp-crumbs .ls-crumbs a { text-decoration-color: currentColor; }
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-hero .xf-crumbs .ls-crumbs [aria-current="page"],
:root[data-theme="dark"] .ls-dl .xp .xp-crumbs .ls-crumbs [aria-current="page"] { color: var(--ls-ink); }
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-hero.dl-bhero .dl-desc { color: var(--ls-ink-2); }