/* D-ECOMM stylesheet.
 *
 * The palette is not chosen here. It is read from dengage.com by tools/extract-palette.mjs and
 * recorded in CLAUDE.md section 3, and tools/check-contract.mjs holds this file, the image
 * generator and the Android theme to the same values. The reference build shipped an off brand
 * palette for a week because every check read the source as text and none compared it to anything.
 */
:root {
  --blue: #125CFA;
  --blue-deep: #022878;
  --blue-mid: #167DE4;
  --blue-light: #739EFC;
  --blue-tint: #D7E4FE;
  --purple: #B813FD;
  --cyan: #37C3DF;
  --cyan-bright: #2FC8E6;
  --ink: #000226;
  --slate: #405672;
  --muted: #A1C0E4;
  --surface: #FFFFFF;
  --page: #F8FAFB;
  --surface-2: #EEF2F5;
  --surface-3: #ECF0F3;
  --line: #DDE6EB;

  --grad-band: linear-gradient(90deg, #125CFA 0%, #2FC8E6 100%);
  --grad-brand: linear-gradient(269.43deg, #37C3DF 9.19%, #B813FD 92.8%);

  /* NeueHaasGroteskText Pro is the brand face and is licensed, self hosted and not ours to
     redistribute, and non negotiable 8 forbids a third party host at runtime. This stack resolves
     to the closest available relative on every platform. */
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial,
          "Liberation Sans", sans-serif;
  --radius: 12px;

  /* Published by js/slots.js after it measures the header, so a pinned campaign bar can be given
     the clearance it needs without either of them knowing the other's height. */
  --dn-header-clearance: 0px;
  --dn-banner-height: 0px;
}

[data-theme="dark"] {
  --ink: #EEF2F5;
  --slate: #A1C0E4;
  --surface: #0B1020;
  --page: #070B16;
  --surface-2: #121A2E;
  --surface-3: #16203A;
  --line: #1E2A44;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
  background: var(--page);
  padding-top: var(--dn-banner-height);
}

h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 34px; letter-spacing: -0.02em; }
h2 { font-size: 24px; letter-spacing: -0.01em; }
h3 { font-size: 17px; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-mid); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* The site's own chrome is namespaced dps-, the way its storage keys are. js/slots.js decides
   whether a bar or an overlay on the page belongs to Dengage by asking whether it is ours, and
   that test is this prefix. */
.dps-utility {
  background: var(--ink);
  color: var(--surface-2);
  font-size: 13px;
}
.dps-utility .wrap { display: flex; justify-content: space-between; align-items: center;
                     min-height: 38px; gap: 16px; }
.dps-utility a { color: var(--surface-2); opacity: 0.86; }
.dps-utility a:hover { opacity: 1; color: var(--surface); }
.dps-utility-nav { display: flex; gap: 18px; }
.dps-utility-right { display: flex; gap: 12px; align-items: center; }
.dps-utility-note { opacity: 0.72; }
.dps-theme {
  background: none; border: 1px solid rgba(255,255,255,0.28); color: inherit;
  border-radius: 999px; padding: 3px 12px; font: inherit; cursor: pointer;
}
.dps-theme[aria-pressed="true"] { background: rgba(255,255,255,0.16); }

.dps-mainbar {
  position: sticky; top: var(--dn-banner-height); z-index: 40;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.dps-mainbar-inner { display: flex; align-items: center; gap: 22px; min-height: 64px;
                     flex-wrap: nowrap; }
/* The demonstration mark, the same on every D- build: D and a round dot in the brand colour, the
   word in ink. The dot carries the hyphen as text, at no size, so the mark still copies and reads
   as D-ECOMM. tools/brand_mark.py draws the icons from the same rules. */
.dps-mark {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--ink);
  white-space: nowrap;
}
.dps-mark:hover { text-decoration: none; }
.dps-mark:hover .dps-mark-word { color: var(--blue); }
.dps-mark-d { color: var(--blue); }
.dps-mark-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); font-size: 0; line-height: 0; overflow: hidden; flex: none;
}
.dps-nav { display: flex; gap: 18px; flex: 1; min-width: 0; flex-wrap: nowrap;
           overflow: hidden; }
.dps-nav a { color: var(--ink); font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; }
.dps-nav a:hover, .dps-nav a[aria-current="page"] {
  text-decoration: none; border-bottom-color: var(--blue); color: var(--blue);
}
.dps-nav-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.dps-icon {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
  white-space: nowrap;
}
.dps-icon:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
/* The round actions: one drawn glyph each, 40px of target, no border until hover, so the row
   reads as a retailer's header rather than a row of form buttons. */
.dps-icon-round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-color: transparent; position: relative;
}
.dps-icon-round svg { width: 21px; height: 21px; display: block; }
.dps-icon-round:hover { background: var(--surface-2); border-color: transparent; }
#cart-count {
  position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; line-height: 17px;
  padding: 0 4px; background: var(--blue); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-align: center;
}

/* ------------------------------------------------------------------ the menu drawer */
/* The phone's whole map, one press away: departments, shopping, the account and help, each a
   48px target. Drawn by this page under its own namespace, so the served-overlay detector never
   mistakes it for a campaign, and the platform's own popup can still land over it. */
.dps-menuoverlay {
  position: fixed; inset: 0; background: rgba(0, 2, 38, 0.5); z-index: 80;
}
.dps-menudrawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;
  width: min(86vw, 360px); background: var(--surface);
  overflow-y: auto; padding: 10px 18px 28px;
  box-shadow: -12px 0 40px rgba(0, 2, 38, 0.18);
}
.dps-menudrawer-head { display: flex; align-items: center; justify-content: space-between;
                       min-height: 54px; margin-bottom: 4px; }
.dps-menudrawer-label {
  margin: 18px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--slate);
}
.dps-menudrawer > a {
  display: flex; align-items: center; min-height: 46px; color: var(--ink);
  font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--surface-2);
}
.dps-menudrawer > a:hover { color: var(--blue); text-decoration: none; }
/* The notifications row in the drawer: a button dressed as the drawer's own links, because at
   phone width the header bell folds in here with the text pills. */
.dps-menudrawer > .dps-menudrawer-push { display: block; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--surface-2); min-height: 46px;
  padding: 0; font: inherit; font-size: 16px; color: var(--blue); font-weight: 600;
  cursor: pointer; }
.dps-menudrawer > .dps-menudrawer-push[hidden] { display: none; }
.dps-menudrawer-theme { display: flex; align-items: center; gap: 10px; margin-top: 20px;
                        color: var(--slate); font-size: 14px; }
.dps-menudrawer-theme .dps-theme { color: var(--ink); border-color: var(--line); }
.dps-menudrawer-theme .dps-theme[aria-pressed="true"] { background: var(--blue-tint);
                                                        border-color: var(--blue); }
body.dps-menulock { overflow: hidden; }

/* The context rails. Each block is one named answer with its rule chip beside the heading,
   because a rail without its mechanism named is just a carousel. A rail is ONE ROW THAT SCROLLS
   at every width, never a stack: eight answers standing in a column between the shopper and the
   page is a wall, and the row with more off the edge is what invites the swipe. */
.dps-grid.dps-rail {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding-bottom: 8px;
  scrollbar-width: thin; scroll-snap-type: x proximity;
}
.dps-grid.dps-rail > * { flex: 0 0 210px; scroll-snap-align: start; }
.dps-railblock { margin: 26px 0 6px; }
.dps-railblock .dps-section-head { margin: 0 0 12px; display: flex; align-items: baseline;
                                   gap: 10px; }
.dps-railblock h2 { font-size: 19px; margin: 0; }

/* The creatives' own furniture. Nothing explanatory is drawn on a creative: the engine carries
   its placement, trigger and cap as data-dps-why on the root instead. */
.dps-progress { height: 5px; background: rgba(255,255,255,0.28); border-radius: 3px;
                margin: 7px auto 0; max-width: 460px; overflow: hidden; }
.dps-progress span { display: block; height: 100%; background: #fff; border-radius: 3px;
                     transition: width 0.4s; }
.dps-focuscard { max-width: 460px; display: flex; gap: 14px; align-items: flex-start; }
.dps-focuscard img { width: 132px; border-radius: 10px; flex: 0 0 auto; }
.dps-focuscard h2 { margin: 2px 0 6px; font-size: 19px; }
.dps-inlinecard { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
                  border: 1px solid var(--line); border-left: 3px solid var(--blue);
                  background: var(--surface); border-radius: 10px; padding: 12px 14px;
                  margin: 12px 0; }
.dps-inlinecard.is-alert { border-left-color: var(--purple); }
.dps-inlinecard span { color: var(--slate); }
.dps-offer-badge { display: inline-block; background: var(--grad-brand); color: #fff;
                   font-weight: 700; border-radius: 999px; padding: 6px 16px; font-size: 14px;
                   margin-bottom: 6px; }

/* The filter toggle exists on every width and only matters under 720: the facets live in a
   sidebar on a desk and behind this button on a phone, where a column of checkboxes before the
   first product is a wall. */
.dps-filter-toggle { display: none; }

/* Every inline slot ships empty and stays in the page even when the page is empty, because an
   empty basket and a signed out account are states a campaign has good reason to target. */
.dn-inline-target:empty { display: block; min-height: 0; }
/* A slot outside the page's column keeps the column, so whatever is drawn in it, the site's own
   creative or a served one, lines up with the hero and the rails at any window width instead of
   running to the window's edges. A slot already inside the column takes the column's width. */
.dn-inline-target { max-width: 1240px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.wrap .dn-inline-target { max-width: none; padding: 0; }

.dps-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 56px;
              padding: 40px 0 28px; }
.dps-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
                   gap: 28px; }
.dps-footer-cols a { display: block; color: var(--slate); padding: 3px 0; font-size: 14px; }
.dps-demo-notice { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
                   font-size: 13px; color: var(--muted); }

@media (max-width: 820px) {
  h1 { font-size: 26px; }
}

/* ============================================================================================
 * Page level. Everything below is drawn by this demonstration, so every class is namespaced
 * dps- and every id the panel targets is dn_inline_target_*. Inline creatives are not sandboxed:
 * the engine puts their style in document.head, so an unnamespaced rule here would restyle a
 * creative and an unnamespaced rule there would restyle this page.
 * ========================================================================================== */

.dps-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 32px 0 16px;
}
.dps-section-head h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.dps-more { font-size: 14px; font-weight: 600; white-space: nowrap;
            display: inline-flex; align-items: center; min-height: 40px; }

/* Hero */
.dps-hero-wrap { padding-top: 20px; }
.dps-hero { display: block; border-radius: var(--radius); overflow: hidden; line-height: 0; }
.dps-hero img { width: 100%; height: auto; display: block; }
/* The hero's slides sit in one row, one in view, snapped as they are swiped or scrolled. The row
   is an inline slot, so a creative added at its end is the next slide. */
.dps-hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: var(--radius); scrollbar-width: none; overscroll-behavior-x: contain; }
.dps-hero-track::-webkit-scrollbar { display: none; }
.dps-hero-track > * { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; }
.dps-twin-heroslide { position: relative; height: 100%; line-height: 0; border-radius: var(--radius);
  overflow: hidden; }
.dps-twin-heroslide img { display: block; width: 100%; height: auto; }
/* The button sits in the open ground under the headline. On a narrow screen the slide is too small
   to carry one without covering the products, so there the whole slide is the link, as the season
   slide is. */
.dps-twin-heroslide .dps-btn { position: absolute; left: 5%; bottom: 17%; line-height: 1.2; }
@media (max-width: 759px) { .dps-twin-heroslide .dps-btn { display: none; } }
.dps-hero-dots { display: flex; gap: 8px; justify-content: center; padding: 12px 0 0; }
.dps-hero-dots[hidden] { display: none; }
.dps-hero-dots button {
  width: 30px; height: 4px; border: 0; padding: 0; border-radius: 2px;
  background: var(--line); cursor: pointer;
}
.dps-hero-dots button[aria-selected="true"] { background: var(--blue); }

/* Department tiles */
.dps-departments {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.dps-dept {
  display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line); text-align: center;
}
.dps-dept img { width: 100%; height: auto; display: block; }
.dps-dept span { display: block; padding: 10px 8px; font-weight: 600; font-size: 14px; }

/* Product grid and card */
.dps-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.dps-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  position: relative;
}
.dps-card-img { display: block; line-height: 0; background: var(--surface-2); }
.dps-card-img img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3;
                    object-fit: cover; }
.dps-card-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.dps-card-brand { font-size: 12px; color: var(--slate); text-transform: uppercase;
                  letter-spacing: 0.04em; }
.dps-card-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.dps-card-title a { color: inherit; }
.dps-card-price { margin-top: auto; padding-top: 6px; font-weight: 700; }
.dps-was { color: var(--slate); font-weight: 400; text-decoration: line-through;
           margin-left: 6px; font-size: 13px; }
.dps-flag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; letter-spacing: 0.03em;
}
.dps-flag.is-sale { background: var(--purple); }
.dps-flag.is-out { background: var(--slate); }
/* The actions wrap rather than run past the card's clipped edge: two buttons side by side do not
   fit a two column phone grid, and the second one could not be pressed. */
.dps-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.dps-card-actions .dps-btn { flex: 1 1 auto; max-width: 100%; }

/* Buttons */
.dps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; font-size: 14px; line-height: 1;
  padding: 11px 16px; border-radius: 999px; border: 1px solid transparent;
  background: var(--blue); color: #fff; cursor: pointer; text-align: center;
  min-height: 44px;
}
/* The button's own colour on hover, so an anchor drawn as a button does not take the link hover
   colour, which is this same blue and left the label invisible. */
.dps-btn:hover { background: var(--blue-mid); color: #fff; text-decoration: none; }
.dps-btn:active { background: var(--blue-deep); }
.dps-btn[disabled] { background: var(--surface-3); color: var(--slate); cursor: not-allowed; }
.dps-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.dps-btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.dps-btn-small { padding: 8px 12px; min-height: 36px; font-size: 13px; }

/* Filters and facets */
.dps-listing { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.dps-facets { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
              background: var(--surface); position: sticky; top: 16px; }
.dps-facet { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.dps-facet:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.dps-facet h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase;
                letter-spacing: 0.05em; color: var(--slate); }
.dps-facet label { display: flex; align-items: center; gap: 8px; font-size: 14px;
                   padding: 3px 0; cursor: pointer; }
.dps-facet-count { margin-left: auto; color: var(--slate); font-size: 12px; }
.dps-listing-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                    margin-bottom: 16px; }
.dps-result-count { color: var(--slate); font-size: 14px; }

/* Forms */
.dps-field { display: block; margin-bottom: 14px; }
.dps-field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.dps-field input, .dps-field select, .dps-field textarea {
  width: 100%; font: inherit; padding: 11px 12px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
}
.dps-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.dps-chip {
  font: inherit; font-size: 14px; padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink); cursor: pointer;
}
.dps-chip[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-tint);
                                 color: var(--blue-deep); font-weight: 600; }
.dps-chip[disabled] { color: var(--muted); text-decoration: line-through; cursor: not-allowed; }
/* A receipt the profile's record cannot back: still pressable, still records, and the chip says
   before the press what the message function would refuse after it. */
.dps-chip-grey { opacity: 0.5; border-style: dashed; }

/* Panels, cards and notes */
.dps-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
}
.dps-panel h2 { margin-top: 0; font-size: 18px; }
.dps-note { background: var(--surface-2); border-radius: 10px; padding: 12px 14px;
            font-size: 14px; color: var(--slate); }
.dps-two { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.dps-rows { display: flex; flex-direction: column; gap: 12px; }
/* Smart Search: the overlay the search button opens, in the panel Search Widget's shape. */
.dps-search { position: fixed; inset: 0; z-index: 75; }
.dps-search[hidden] { display: none; }
.dps-search-backdrop { position: absolute; inset: 0; background: rgba(0, 2, 38, 0.38); }
.dps-search-panel { position: relative; margin: 12px auto 0; width: min(920px, calc(100% - 24px));
                    max-height: calc(100vh - 24px); overflow-y: auto; background: var(--surface);
                    border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 18px;
                    box-shadow: 0 18px 48px rgba(0, 2, 38, 0.18); }
.dps-search-bar { display: flex; align-items: center; justify-content: space-between;
                  margin-bottom: 8px; }
.dps-search-label { font-size: 13px; font-weight: 600; color: var(--slate); }
.dps-search-close { font-size: 16px; line-height: 1; }
#dps-search-input { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px;
                    border: 1px solid var(--line); border-radius: 10px; background: var(--page);
                    color: var(--ink); }
#dps-search-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.dps-search-head { font-size: 15px; margin: 16px 0 10px; color: var(--ink); }
.dps-search-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dps-search-card { display: flex; flex-direction: column; gap: 4px; padding: 10px;
                   border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
                   color: var(--ink); text-decoration: none; }
.dps-search-card:hover { border-color: var(--blue-light); }
.dps-search-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px;
                       background: var(--surface-2); }
.dps-search-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.dps-search-price { font-size: 14px; }
.dps-search-price s { color: var(--muted); font-size: 12.5px; }
.dps-search-cta { margin-top: auto; align-self: flex-start; }
.dps-search-empty, .dps-search-more { margin: 14px 0 0; color: var(--slate); font-size: 14px; }
.dps-search-suggest { font: inherit; color: var(--blue); background: none; border: 0; padding: 0;
                      text-decoration: underline; cursor: pointer; font-weight: 600; }
@media (max-width: 860px) {
  .dps-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dps-search-panel { margin-top: 8px; width: calc(100% - 16px); padding: 14px; }
}
.dps-row { display: flex; gap: 12px; align-items: center; padding: 12px 0;
           border-top: 1px solid var(--line); }
.dps-row:first-child { border-top: 0; }
.dps-row img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px;
               background: var(--surface-2); }
.dps-row-main { flex: 1; min-width: 0; }
.dps-row-main strong { display: block; font-size: 14px; }
.dps-row-meta { font-size: 13px; color: var(--slate); }
.dps-total { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.dps-total.is-sum { font-weight: 700; font-size: 17px; border-top: 1px solid var(--line);
                    padding-top: 12px; margin-top: 6px; }
.dps-empty { text-align: center; padding: 40px 20px; color: var(--slate); }

/* Product detail */
.dps-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.dps-pdp-media img { width: 100%; height: auto; border-radius: var(--radius);
                     background: var(--surface-2); }
.dps-pdp h1 { margin: 4px 0 8px; font-size: 26px; letter-spacing: -0.01em; }
.dps-price-now { font-size: 24px; font-weight: 700; }
.dps-spec { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 14px;
            margin: 16px 0; }
.dps-spec dt { color: var(--slate); }
.dps-spec dd { margin: 0; }

/* Recognition band, recommendation rail and confirmations */
.dps-recognition {
  background: var(--grad-brand); color: #fff; border-radius: var(--radius);
  padding: 18px 20px; margin: 20px 0; display: flex; gap: 16px; align-items: center;
}
.dps-recognition img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.dps-recognition h2 { margin: 0 0 4px; font-size: 18px; }
.dps-recognition p { margin: 0; opacity: 0.92; font-size: 14px; }
.dps-recognition .dps-btn { background: #fff; color: var(--blue-deep); margin-left: auto; }
.dps-reco { margin: 24px 0; }
.dps-confirm {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: 340px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: 10px; padding: 14px 16px; box-shadow: 0 12px 32px rgba(0, 2, 38, 0.16);
}
.dps-confirm strong { display: block; font-size: 14px; }
.dps-confirm p { margin: 4px 0 0; font-size: 13px; color: var(--slate); }

/* The Messages drawer frame */
.dps-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100%); z-index: 70;
  background: var(--page); border-left: 1px solid var(--line); overflow-y: auto;
  padding: 20px; box-shadow: -16px 0 40px rgba(0, 2, 38, 0.14);
}
.dps-drawer h2 { margin: 0 0 16px; font-size: 18px; line-height: 40px; padding-right: 84px; }
.dps-drawer-close { position: absolute; top: 14px; right: 14px; }

/* The Inbox drawer (js/inbox.js), drawn to the card the panel previews for an Inbox Message: the
   picture across the top, the title, the message, full width buttons, and a pinned band. */
.dps-inbox-msg { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
                 overflow: hidden; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(0, 2, 38, 0.05); }
.dps-inbox-msg.is-pinned { border-color: var(--blue-light); box-shadow: 0 4px 16px rgba(18, 92, 250, 0.12); }
.dps-inbox-pin { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 12px;
                 font-weight: 700; color: var(--blue); background: var(--blue-tint); }
.dps-inbox-pin-icon { width: 14px; height: 14px; }
.dps-inbox-img { display: block; width: calc(100% - 24px); margin: 12px 12px 0; aspect-ratio: 7 / 5;
                 object-fit: cover; border-radius: 12px; background: var(--surface-2); }
.dps-inbox-body { padding: 14px 16px 12px; }
.dps-inbox-body h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; color: var(--ink); }
.dps-inbox-body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--slate); }
.dps-inbox-ctas { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dps-inbox-msg[data-type="image"] .dps-inbox-ctas { margin-top: 0; }
.dps-inbox-cta { display: block; width: 100%; text-align: center; min-height: 44px; box-sizing: border-box; }
.dps-inbox-cta.dps-btn-ghost { color: var(--blue); border: 2px solid var(--blue); background: transparent; }
.dps-inbox-nb { white-space: nowrap; }
.dps-inbox-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                  margin-top: 10px; }
.dps-inbox-when { font-size: 12px; color: var(--slate); }
.dps-inbox-msg.is-unread .dps-inbox-when::before { content: ""; display: inline-block; width: 8px;
                 height: 8px; margin-right: 6px; border-radius: 50%; background: var(--blue);
                 vertical-align: 1px; }
.dps-inbox-del { border: 0; background: none; padding: 10px 4px; min-height: 40px; font: inherit;
                 font-size: 13px; color: var(--slate); cursor: pointer; }
.dps-inbox-del:hover { color: var(--ink); text-decoration: underline; }
.dps-inbox-empty { text-align: center; padding: 40px 12px; }
.dps-inbox-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.dps-inbox-empty p { margin: 0; font-size: 14px; color: var(--slate); }
.dps-inbox-loading { font-size: 14px; color: var(--slate); }
.dps-msg { border: 1px solid var(--line); border-radius: 10px; padding: 12px;
           margin-bottom: 10px; }
.dps-msg-from { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
                color: var(--slate); }
.dps-msg h3 { margin: 4px 0; font-size: 15px; }
.dps-msg p { margin: 0; font-size: 14px; color: var(--slate); }

/* Creative roots. Namespaced under the root id by js/creatives.js, and these are only the
   containers the page reserves for them. */
.dps-creative { position: relative; }
.dps-creative-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 80; }
.dps-creative-bar.dps-creative-bar-bottom { top: auto; bottom: 0; }
.dps-creative-popup {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
  justify-content: center; background: rgba(0, 2, 38, 0.45); padding: 20px;
}

/* The debug readout and the presenter launcher */
.dps-readout {
  position: fixed; left: 12px; bottom: 12px; z-index: 100; width: min(420px, calc(100% - 24px));
  max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; font-size: 12px;
}
.dps-readout table { width: 100%; border-collapse: collapse; }
.dps-readout td { padding: 3px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.dps-readout .is-no { color: var(--purple); }

.dps-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dps-table th, .dps-table td { text-align: left; padding: 8px; border-top: 1px solid var(--line); }
.dps-table th { color: var(--slate); font-size: 12px; text-transform: uppercase;
                letter-spacing: 0.04em; }

@media (max-width: 860px) {
  .dps-listing, .dps-two, .dps-pdp { grid-template-columns: 1fr; }
  .dps-facets { position: static; }
}

/* ============================================================================================
 * The handset.
 *
 * Found by tools/mobile-check.mjs rather than by looking: at 320 the utility bar pushed the page
 * 99px sideways, the nav links measured 27 to 38 css pixels on their smaller side, and two labels
 * sat at 11px. None of those is visible on a laptop and every one of them is visible on the phone
 * being passed around a room.
 *
 * The floor is a tap target of 40 and copy of 12. Anything smaller fails the build.
 * ========================================================================================== */

/* Nothing under 12px anywhere. A label small enough to need leaning in is a label nobody reads. */
.dps-flag, .dps-msg-from, .dps-card-brand, .dps-facet-count, #cart-count,
.dps-utility, .dps-readout { font-size: 12px; }

/* Every navigation link is a tap target, not a word. The padding is what makes it one, and it
   costs nothing on a desktop where the pointer is precise. */
.dps-nav a, .dps-utility-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 2px;
}
/* :not([hidden]) is load bearing. A bare display rule beats the browser's own
   [hidden] { display: none }, so the signed in and signed out header controls were all on screen
   at once and each was a tap target the state said should not exist. */
.dps-icon:not([hidden]), .dps-theme:not([hidden]) {
  min-height: 40px; display: inline-flex; align-items: center;
}
/* The burger lives only where the drawer does, and this selector matches the tap target rule's
   weight so the order in this file decides, here and in the phone block below. */
.dps-burger:not([hidden]) { display: none; }
[hidden] { display: none !important; }
/* The wordmark is a link and therefore a tap target, and it was the shortest one on the page. */
.dps-mark { display: inline-flex; align-items: center; min-height: 40px; }
/* Footer links are links people actually use on a phone, where the footer is most of the page. */
.dps-footer-cols a { display: inline-flex; align-items: center; min-height: 40px; }
/* Small is a size, not an excuse. 36 was under the floor on every card in the catalogue. */
.dps-btn-small { min-height: 40px; }
/* A 13px checkbox is a coin toss on a phone. The box is enlarged and its label carries the
   target, which is what actually gets tapped: clicking the label toggles the input. */
.dps-facet label, .dps-field input[type="checkbox"] + span,
label:has(> input[type="checkbox"]) { min-height: 40px; }
.dps-facet label { align-items: center; }
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; min-height: 20px; flex: 0 0 auto; accent-color: var(--blue);
}
.dps-theme { padding: 6px 12px; }
.dps-hero-dots button { min-height: 40px; height: 40px; background: none; padding: 18px 0; }
.dps-hero-dots button::after {
  content: ""; display: block; width: 30px; height: 4px; border-radius: 2px;
  background: var(--line);
}
.dps-hero-dots button[aria-selected="true"] { background: none; }
.dps-hero-dots button[aria-selected="true"]::after { background: var(--blue); }

@media (max-width: 820px) {
  /* The utility strip carries ONE line: the delivery promise. Its links live in the drawer at
     this width, because a strip of six tiny links above the mark is chrome eating the first
     screen. */
  .dps-utility .wrap { justify-content: center; min-height: 32px; }
  .dps-utility-nav { display: none; }
  .dps-utility-right .dps-theme { display: none; }
  .dps-utility-note { opacity: 0.9; }

  /* The phone header: mark left, three glyphs and the burger right, 56px, one row, and the
     whole map behind the burger. The first screen of a storefront belongs to products. */
  .dps-mainbar-inner { min-height: 56px; gap: 10px; }
  .dps-nav { display: none; }
  .dps-burger:not([hidden]) { display: inline-flex; }
  .dps-mark { font-size: 20px; }
  /* The text pills fold into the drawer: sign in, join and sign out are account rows there,
     and the header keeps only what a thumb reaches for mid-browse. */
  .dps-nav-right .dps-textlink { display: none; }
  /* The notifications bell folds in with them: at 320 a fifth glyph pushed the header 37px
     past the screen, measured by the phone tier on 19 October 2026. */
  .dps-nav-right #dps-push { display: none; }

  /* The products come first and the filters wait behind the button. The facets column used to
     stack ABOVE the grid at this width, so the first screen of a category was checkboxes and
     the products were nowhere: the exact opposite of what a category page is for. */
  .dps-filter-toggle { display: inline-block; }
  .dps-facets { display: none; }
  .dps-facets[data-open="true"] { display: block; border: 1px solid var(--line);
    border-radius: 10px; padding: 14px; margin-bottom: 14px; background: var(--surface); }
  .dps-listing { display: block; }
  .dps-grid.dps-rail { gap: 12px; scrollbar-width: none; }
  .dps-grid.dps-rail::-webkit-scrollbar { display: none; }
  .dps-grid.dps-rail > * { flex: 0 0 46%; }
  /* The card's own controls hold one line each and share the row; a label folded into three
     lines inside a pill reads as a blob, not a button. */
  .dps-card .dps-btn-small { white-space: nowrap; padding: 9px 12px; font-size: 13px;
                             flex: 1 1 auto; text-align: center; }

  .dps-footer-cols { grid-template-columns: 1fr 1fr; }
  .dps-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .dps-section-head { margin-top: 24px; }
  .dps-drawer { width: 100%; }
  .dps-confirm { left: 12px; right: 12px; max-width: none; }
}

@media (max-width: 560px) {
  /* A row of image, text, price and two controls does not fit 320. It wraps rather than pushing
     the page sideways, and the controls keep their full width so they stay pressable. */
  .dps-row { flex-wrap: wrap; }
  .dps-row-main { flex: 1 1 100%; order: 2; }
  .dps-row img { order: 1; }
  .dps-row .dps-btn { flex: 1 1 auto; order: 3; }
}

@media (max-width: 380px) {
  /* At the narrowest a two column grid still shows a product properly; three does not. */
  .dps-grid { grid-template-columns: repeat(2, 1fr); }
  .dps-departments { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- the games */
/* The wheel, the scratch card and their shared result block. Drawn by the engine as popups, so
   everything sits under the creative root and inside the dps- namespace. */
.dps-gamecard { max-width: 360px; text-align: center; }
.dps-gamecard h2 { margin: 4px 0 12px; }
.dps-kicker {
  color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; margin: 0 0 4px;
}
.dps-wheel-stage { position: relative; width: 240px; margin: 0 auto; }
.dps-wheel-svg { display: block; width: 100%; height: auto; }
.dps-wheel-label { fill: #ffffff; font-size: 11px; font-weight: 700; }
.dps-wheel-pin {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 16px solid var(--ink); z-index: 2;
}
.dps-wedge-won { filter: brightness(1.18); }
.dps-scratch-stage {
  position: relative; width: 240px; height: 234px; margin: 0 auto;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
}
.dps-scratch-stage canvas { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.dps-scratch-under {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: var(--blue-tint);
}
.dps-scratch-under span { font-size: 30px; font-weight: 800; color: var(--blue-deep); }
.dps-scratch-under small { color: var(--slate); }
.dps-game-result h3 { margin: 12px 0 6px; }
.dps-game-code {
  display: inline-flex; flex-direction: column; gap: 2px; background: var(--blue-tint);
  border-radius: var(--radius); padding: 8px 16px; margin: 6px 0;
}
.dps-game-code span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--slate); }
.dps-game-code b { font-size: 20px; color: var(--blue); letter-spacing: 1px; }
.dps-game-small { font-size: 12px; color: var(--slate); }
.dps-confetti { position: absolute; inset: 0; pointer-events: none; }
.dps-pop { animation: dps-pop .3s ease; }
@keyframes dps-pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dps-pop { animation: none; } }

/* The category offer band: the listing's own inline, reading the department off the page. */
/* The new season drop's countdown, namespaced under its own creative root. */
#dps-creative-drop_countdown .dps-dropclock { margin: 16px 0; }
#dps-creative-drop_countdown .dps-dropclock-digits { display: flex; align-items: flex-end; gap: 6px; }
#dps-creative-drop_countdown .dps-dropclock-digits span { display: inline-flex; flex-direction: column; align-items: center; }
#dps-creative-drop_countdown .dps-dropclock-digits b { font-size: 26px; line-height: 1; padding: 8px 10px; border-radius: 10px;
  background: var(--blue-tint); color: var(--blue-deep); font-variant-numeric: tabular-nums; }
#dps-creative-drop_countdown .dps-dropclock-digits i { font-style: normal; font-size: 12px; color: var(--slate); margin-top: 4px; }
#dps-creative-drop_countdown .dps-dropclock-colon { font-size: 22px; font-weight: 700; color: var(--ink); padding-bottom: 22px; }
#dps-creative-drop_countdown .dps-dropclock-digits.is-urgent b { background: var(--blue); color: #fff; }
.dps-offerband { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
                 margin: 4px 0 14px; }
.dps-offerband strong { color: var(--ink); }

/* ---------------------------------------------------------------- the on-site twins */
/* js/showcase.js: the local twin of every on-site content, namespaced under the engine's
   creative roots. A press on anything inside a control lands on the control, because the
   engine reads data-act from the element that was pressed. */
.dps-creative [data-act] * { pointer-events: none; }
.dps-twin { position: relative; max-width: 420px; width: 100%; padding: 0; overflow: hidden;
  margin: 0; box-shadow: 0 24px 60px rgba(0, 2, 38, 0.28); }
.dps-twin.is-wide { max-width: 560px; }
.dps-twin-art { display: block; width: 100%; height: auto; }
.dps-twin-body { padding: 18px 20px 20px; }
.dps-twin-body h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: -0.01em; color: var(--ink); }
.dps-twin-body > p { margin: 0 0 14px; color: var(--slate); font-size: 14px; line-height: 1.5; }
.dps-twin-x { position: absolute; top: 8px; right: 8px; z-index: 3; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 2, 38, 0.18); }
.dps-twin-x svg { width: 16px; height: 16px; }
.dps-twin-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px;
  color: var(--slate); margin: 0 0 12px; }
.dps-twin-consent input { margin-top: 2px; }
.dps-twin-problem { color: var(--purple); font-size: 13px; margin: 0 0 10px; }
.dps-twin-done { text-align: center; padding: 10px 0; }
.dps-twin-done h2 { margin-bottom: 6px; }
.dps-twin-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dps-twin-imgpop { position: relative; max-width: 560px; width: 100%; border-radius: 16px;
  overflow: hidden; background: var(--surface); box-shadow: 0 24px 60px rgba(0, 2, 38, 0.28); }
.dps-twin-imgpop img { display: block; width: 100%; height: auto; }
.dps-twin-imgpop-ctas { display: flex; gap: 8px; padding: 12px; flex-wrap: wrap; }
.dps-twin-imgpop-ctas .dps-btn { flex: 1 1 140px; text-align: center; }
.dps-twin-video { position: relative; width: min(420px, 100%); border-radius: 16px;
  overflow: hidden; background: var(--ink); box-shadow: 0 24px 60px rgba(0, 2, 38, 0.28); }
.dps-twin-video video { display: block; width: 100%; height: auto; aspect-ratio: 720 / 900; }
.dps-twin-bar { display: flex; align-items: center; gap: 12px; padding: 10px 60px 10px 16px;
  position: relative; justify-content: center; flex-wrap: wrap; }
.dps-twin-bar .dps-twin-x { top: 50%; transform: translateY(-50%); }
.dps-twin-bar.is-ink { background: var(--ink); }
.dps-twin-bar.is-ink a { color: #fff; text-decoration: none; min-height: 40px;
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.dps-twin-bar.is-ink span { color: var(--blue-tint); margin-left: 6px; }
.dps-twin-bar.is-light { background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0, 2, 38, 0.10); }
.dps-twin-bar.is-light img { width: 44px; height: 44px; border-radius: 10px; }
.dps-twin-bar.is-light div { display: flex; flex-direction: column; }
.dps-twin-bar.is-light span { color: var(--slate); font-size: 13px; }
.dps-twin-imgbar { position: relative; background: var(--blue-deep); }
.dps-twin-imgbar img { display: block; width: 100%; max-width: 1053px; height: auto; margin: 0 auto; }
.dps-twin-imgbar .dps-twin-x { top: 50%; transform: translateY(-50%); }
.dps-twin-scale { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.dps-twin-nps .dps-chip { min-width: 34px; justify-content: center; padding: 6px 0; }
.dps-chip.is-on { border-color: var(--blue); background: var(--blue); color: #fff; }
.dps-twin-scale-ends { display: flex; justify-content: space-between; font-size: 11px;
  color: var(--slate); margin: 0 0 14px; }
.dps-twin-stars { gap: 4px; margin-bottom: 14px; }
.dps-twin-star { width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
  padding: 2px; }
.dps-twin-star svg { width: 100%; height: 100%; fill: var(--surface-2); stroke: var(--muted);
  stroke-width: 1; }
.dps-twin-star.is-on svg { fill: var(--blue); stroke: var(--blue); }
.dps-twin-choices { margin-bottom: 14px; }
.dps-twin-flash .dps-twin-body { text-align: center; }
.dps-twin-clock { display: flex; gap: 8px; justify-content: center; margin: 4px 0 14px; }
.dps-twin-clock span { display: flex; flex-direction: column; align-items: center; }
.dps-twin-clock b { font-size: 24px; min-width: 52px; padding: 10px 6px; border-radius: 28px;
  background: var(--page); border: 1px solid var(--line); color: var(--ink);
  font-variant-numeric: tabular-nums; }
.dps-twin-clock i { font-style: normal; font-size: 12px; color: var(--slate); margin-top: 4px; }
.dps-twin-code { display: flex; flex-direction: column; gap: 2px; align-items: center;
  background: var(--blue-tint); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; }
.dps-twin-code span { font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--slate); }
.dps-twin-code b { font-size: 22px; color: var(--blue); letter-spacing: 1px; }
.dps-twin-code small { color: var(--slate); }
.dps-twin-flash .dps-twin-row { justify-content: center; }
.dps-twin-slides { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; }
.dps-twin-slide { flex: 0 0 46%; scroll-snap-align: start; display: flex; flex-direction: column;
  gap: 4px; }
.dps-twin-slide img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px;
  background: var(--surface-2); }
.dps-twin-slide-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.dps-twin-slide-price s { color: var(--muted); }
.dps-twin-slide .dps-btn { margin-top: 4px; text-align: center; }
.dps-twin-inline { border-radius: var(--radius); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); margin: 16px 0; }
.dps-twin-inline img { display: block; width: 100%; height: auto; }
.dps-twin-inline-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 12px 16px; color: var(--slate); font-size: 15px; }
.dps-twin-pick { display: flex; gap: 18px; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 16px 0; }
.dps-twin-pick img { width: 180px; height: 180px; border-radius: 12px; display: block; }
.dps-twin-pick h3 { margin: 0 0 4px; }
.dps-twin-pick p { margin: 0 0 8px; color: var(--slate); }
.dps-twin-promise { background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px; margin: 16px 0; }
.dps-twin-promise h3 { margin: 0 0 14px; font-size: 20px; }
.dps-twin-tiles { display: flex; gap: 12px; }
.dps-twin-tile { flex: 1 1 0; display: block; padding: 14px; border-radius: 12px;
  background: var(--page); text-decoration: none; color: var(--ink);
  transition: background 160ms ease, transform 160ms ease; }
.dps-twin-tile:hover { background: var(--blue-tint); transform: translateY(-2px); }
.dps-twin-dot { display: inline-flex; align-items: center; justify-content: center; width: 34px;
  height: 34px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 800; }
.dps-twin-dot.is-a { background: var(--grad-band); }
.dps-twin-dot.is-b { background: var(--grad-brand); }
.dps-twin-dot.is-c { background: var(--blue-deep); }
.dps-twin-tile-name { display: block; margin-top: 10px; font-weight: 700; }
.dps-twin-tile-line { display: block; margin-top: 4px; font-size: 13px; color: var(--slate); }
.dps-twin-stories { padding: 14px 0 4px; }
.dps-twin-stories-title { display: block; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.dps-twin-covers { display: flex; gap: 14px; overflow-x: auto; }
.dps-twin-cover { border: 0; background: none; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 0; color: var(--ink); font: inherit; font-size: 13px; }
.dps-twin-cover img { width: 68px; height: 68px; border-radius: 50%; padding: 3px;
  background: var(--grad-brand); }
.dps-twin-viewer { position: fixed; inset: 0; z-index: 95; background: rgba(0, 2, 38, 0.82);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.dps-twin-viewer[hidden] { display: none; }
.dps-twin-viewer-card { position: relative; width: min(380px, 100%); aspect-ratio: 720 / 1280;
  border-radius: 16px; overflow: hidden; background: var(--ink); }
.dps-twin-viewer-card > img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.dps-twin-viewer-bars { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2;
  display: flex; gap: 4px; }
.dps-twin-viewer-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.dps-twin-viewer-bars span.is-done, .dps-twin-viewer-bars span.is-now { background: #fff; }
.dps-twin-viewer-name { position: absolute; top: 22px; left: 14px; z-index: 2; color: #fff;
  font-weight: 700; font-size: 14px; }
.dps-twin-viewer .dps-twin-x { top: 18px; }
.dps-twin-viewer-prev, .dps-twin-viewer-next { position: absolute; top: 0; bottom: 70px; width: 40%;
  z-index: 1; border: 0; background: transparent; cursor: pointer; }
.dps-twin-viewer-prev { left: 0; }
.dps-twin-viewer-next { right: 0; }
.dps-twin-viewer-card > .dps-btn { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2;
  text-align: center; }
@media (max-width: 560px) {
  .dps-twin-bar { padding: 8px 44px 8px 12px; gap: 8px; flex-wrap: nowrap; justify-content: flex-start;
    font-size: 13px; }
  .dps-twin-bar.is-ink span, .dps-twin-bar.is-light div span { display: none; }
  .dps-twin-bar.is-light img { width: 32px; height: 32px; }
  .dps-twin-bar.is-light div { flex: 1 1 auto; min-width: 0; }
  .dps-twin-tiles { flex-direction: column; }
  .dps-twin-pick { flex-direction: column; align-items: flex-start; }
  .dps-twin-pick img { width: 100%; height: auto; }
  .dps-twin-slide { flex-basis: 70%; }
}

/* ---------------------------------------------------------------- the anonymous visitor */
/* js/engage.js: the corner card slides in beside what the shopper is reading and covers
   nothing they are answering; the welcome leads with the advertised product or the offer; the
   quiz is three rows of chips and an edit of real products. */
.dps-creative-corner { position: fixed; right: 16px; bottom: 16px; z-index: 85;
  width: min(360px, calc(100% - 32px)); animation: dps-slidein .45s cubic-bezier(.2,.9,.25,1); }
@keyframes dps-slidein { from { transform: translateY(24px) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; } }
.dps-creative-popup > .dps-panel { animation: dps-rise .4s cubic-bezier(.2,.9,.25,1); }
@keyframes dps-rise { from { transform: translateY(18px) scale(.96); opacity: 0; }
  to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dps-creative-corner, .dps-creative-popup > .dps-panel { animation: none; }
}
.dps-eng-corner { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 16px 14px; box-shadow: 0 18px 40px rgba(0, 2, 38, .18); }
.dps-eng-corner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  border-radius: 16px 16px 0 0; background: var(--grad-brand); }
.dps-eng-corner h3 { margin: 2px 0 10px; font-size: 17px; color: var(--ink); }
.dps-eng-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin: 8px 0 12px; }
.dps-twin .dps-eng-tiles { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.dps-eng-tile { display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  color: var(--ink); font-size: 12px; line-height: 1.3; }
.dps-eng-tile:hover { text-decoration: none; }
.dps-eng-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
  background: var(--surface-2); transition: transform .25s ease; }
.dps-eng-tile:hover img { transform: scale(1.04); }
.dps-eng-brand { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); margin-top: 4px; }
.dps-eng-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.dps-eng-price s { color: var(--muted); margin-right: 2px; }
.dps-eng-price b { color: var(--blue-deep); }
.dps-eng-hero { position: relative; height: 190px; overflow: hidden; background: var(--grad-brand); }
.dps-eng-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dps-eng-hero span { position: absolute; left: 14px; bottom: 12px; background: rgba(255,255,255,.92);
  color: var(--ink); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.dps-eng-hero.is-badge { display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: #fff; text-align: center; }
.dps-eng-hero.is-badge b { font-size: 64px; line-height: 1; letter-spacing: -0.03em; }
.dps-eng-hero.is-badge span { position: static; background: none; color: #fff; font-size: 15px;
  padding: 4px 0 0; }
.dps-eng-form { display: flex; gap: 8px; margin: 4px 0 10px; }
.dps-eng-form input { flex: 1 1 auto; min-width: 0; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; }
.dps-eng-form .dps-btn { flex: 0 0 auto; }
.dps-eng-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.dps-eng-chips .dps-chip { padding: 10px 14px; border-radius: 999px; font-weight: 600;
  transition: transform .15s ease, background .15s ease; }
.dps-eng-chips .dps-chip:hover { transform: translateY(-1px); background: var(--blue-tint);
  border-color: var(--blue); }
.dps-eng-dots { display: flex; gap: 6px; margin: 2px 0 8px; }
.dps-eng-dots i { width: 28px; height: 4px; border-radius: 4px; background: var(--surface-3); }
.dps-eng-dots i.is-on { background: var(--grad-band); }
.dps-eng-sofar { font-size: 12px; color: var(--slate); margin: 4px 0 0; }
.dps-eng-helplist { display: grid; gap: 8px; }
.dps-eng-helplist button { text-align: left; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--page); font: inherit; font-weight: 600; color: var(--ink);
  cursor: pointer; }
.dps-eng-helplist button:hover { border-color: var(--blue); background: var(--blue-tint); }
.dps-eng-answer { margin: 10px 0 0; font-size: 13px; color: var(--slate); }
.dps-eng-low strong { color: var(--purple); }
@media (max-width: 520px) {
  .dps-creative-corner { right: 8px; left: 8px; bottom: 8px; width: auto; }
  .dps-eng-form { flex-direction: column; }
}

/* ---------------------------------------------------------------- the engagement studio */
.dps-studio-hero { background: var(--grad-brand); color: #fff; border-radius: 20px;
  padding: 28px 28px 24px; margin: 8px 0 16px; }
.dps-studio-hero .dps-kicker { color: rgba(255,255,255,.85); }
.dps-studio-hero h1 { margin: 4px 0 8px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15;
  letter-spacing: -0.02em; color: #fff; }
.dps-studio-hero p { margin: 0; max-width: 640px; color: rgba(255,255,255,.92); }
.dps-studio-bar { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 860px) { .dps-studio-bar { grid-template-columns: 1fr; } }
.dps-studio-toggles { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.dps-studio-toggles label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; }
.dps-studio-toggles input { accent-color: var(--blue); width: 18px; height: 18px; }
.dps-studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px; }
.dps-studio-card { position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); text-decoration: none; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dps-studio-card:hover { transform: translateY(-2px); border-color: var(--blue);
  box-shadow: 0 10px 24px rgba(18, 92, 250, .12); text-decoration: none; }
.dps-studio-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--blue); }
.dps-studio-card.is-g1::before { background: var(--purple); }
.dps-studio-card.is-g2::before { background: var(--cyan); }
.dps-studio-card.is-g3::before { background: var(--blue-deep); }
.dps-studio-card.is-site::before { background: var(--grad-band); }
.dps-studio-card strong { font-size: 15px; line-height: 1.25; }
.dps-studio-card-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate); }
.dps-studio-card .dps-chip { align-self: flex-start; margin-top: auto; }
.dps-studio-log ol { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.dps-studio-log li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px;
  animation: dps-slidein .3s ease; }
.dps-studio-log li:first-child { border-top: 0; }
.dps-studio-log li time { color: var(--slate); font-variant-numeric: tabular-nums;
  margin-right: 8px; }
.dps-studio-log li b { color: var(--ink); }
.dps-studio-log li.is-bad b { color: var(--purple); }
.dps-studio-log li.is-quiet { color: var(--slate); }