/* ==========================================================================
   DealSquad — Components.

   Extracted from the approved prototype, where component styling was authored
   as 2,475 inline `style` attributes against only three class names. Prototype
   RULING Q11 and DEV-NOTES "Handoff: extracting the CSS" both instruct this
   extraction at handoff; the token values these rules reference are identical
   to the prototype's, so the rendering is unchanged.

   Depends on tokens.css and base.css. Light mode only (RULING Q13) — there is
   no dark theme and no [data-theme] selector anywhere in this product.

   Author: Fahad Ali Khan
   ========================================================================== */

/* --------------------------------------------------------------- layout -- */

.ds-shell        { min-height: 100vh; background: var(--bg); font-family: var(--font-ui); }
.ds-container    { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-5); }
.ds-container--narrow { max-width: var(--content-max); }
.ds-prose        { max-width: var(--prose-max); }

.ds-stack > * + *      { margin-top: var(--sp-4); }
.ds-stack--tight > * + * { margin-top: var(--sp-2); }
.ds-stack--loose > * + * { margin-top: var(--sp-8); }

.ds-row      { display: flex; align-items: center; gap: var(--sp-3); }
.ds-row--between { justify-content: space-between; }
.ds-row--wrap    { flex-wrap: wrap; }

.ds-grid { display: grid; gap: var(--sp-5); }
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) { .ds-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .ds-grid--3, .ds-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ds-grid--2, .ds-grid--3, .ds-grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------ announcement bar -- */

.ds-topbar { background: var(--brand-teal-dark); border-bottom: 0; }

.ds-topbar__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 6px var(--sp-5);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-11);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: rgba(255, 255, 255, .82);
}
.ds-topbar__inner span::before { color: var(--brand-amber); }

@media (max-width: 620px) { .ds-topbar__inner span:nth-child(n+3) { display: none; } }

/* --------------------------------------------------------------- header -- */

.ds-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.ds-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.ds-brand { display: flex; align-items: center; gap: 10px; margin-right: var(--sp-2); color: var(--structure); flex-shrink: 0; }
.ds-brand svg { width: 65px; height: 38px; }
/* The base stylesheet's a:visited (0,1,1) outranks .ds-brand (0,1,0) and was
   painting the prototype's navy lockup crimson. Pin the link states. */
a.ds-brand:link,
a.ds-brand:visited,
a.ds-brand:hover { color: var(--structure); text-decoration: none; }

/* EN / UR language toggle (FR-10.2, Ruling Q8). */
.ds-lang { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-xs); overflow: hidden; flex-shrink: 0; }
.ds-lang button {
  height: 34px;
  padding: 0 10px;
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  color: var(--text-secondary);
  background: var(--surface-2);
  cursor: pointer;
}
.ds-lang button[aria-pressed="true"] { background: var(--structure); color: var(--text-inverse); cursor: default; }
.ds-brand__word { font-family: var(--font-display); font-size: 20px; letter-spacing: -.015em; }
.ds-brand__word b { font-weight: var(--fw-bold); }
.ds-brand img { max-height: 34px; width: auto; }

.ds-nav { display: flex; align-items: center; gap: var(--sp-1); flex: 1 1 auto; min-width: 0; overflow: hidden; }

/* wp_nav_menu emits bare <li> items; without this they paint list bullets
   between the links and break the flex row. display:contents lets the links
   participate in the flex layout directly. */
.ds-nav li,
.ds-drawer li { display: contents; }
.ds-nav li::marker,
.ds-drawer li::marker { content: none; }

.ds-nav a {
  height: 34px;
  padding: 0 var(--sp-3);
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-xs);
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  color: var(--text-secondary);
  white-space: nowrap;
  text-decoration: none;
}

.ds-nav a:hover,
.ds-nav a:focus-visible { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.ds-nav .current-menu-item > a { color: var(--text); background: var(--surface-sunken); }

@media (max-width: 860px)  { .ds-nav { display: none; } }


.ds-drawer-toggle { display: none; }
@media (max-width: 860px) { .ds-drawer-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); } }

.ds-drawer { border-top: 1px solid var(--border); background: var(--surface); padding: var(--sp-4) var(--sp-5); }
.ds-drawer a { display: block; padding: var(--sp-3) 0; font-size: var(--fs-15); font-weight: var(--fw-semi); color: var(--text); }

/* -------------------------------------------------------------- surfaces -- */

.ds-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.ds-card--flat   { box-shadow: var(--e-0); }
.ds-card--raised { box-shadow: var(--e-2); }

.ds-card__header {
  padding: 14px var(--sp-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-16);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
}

.ds-card__body   { padding: var(--sp-5); }
.ds-card__footer { padding: 15px var(--sp-5); border-top: 1px solid var(--border); }

.ds-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-4);
  padding-bottom: 9px;
  border-bottom: 2px solid var(--rule);
}

/* The results count sits vertically centred against the display heading and
   hugs the right edge. WooCommerce floats it by default, which collapses the
   flex item and pinned it to the top. */
.ds-section-title > :last-child:not(h1):not(h2) { margin-left: auto; }
.ds-section-title .woocommerce-result-count { float: none; margin: 0; }

.ds-eyebrow {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

.ds-muted    { font-size: var(--fs-12); color: var(--text-muted); }
.ds-muted-sm { font-size: var(--fs-12); color: var(--text-muted); margin-top: 1px; }

/* --------------------------------------------------------------- buttons -- */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 42px;
  min-height: var(--tap-min);
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.ds-btn:hover { text-decoration: none; }

/*
 * base.css sets `a:visited { color: var(--action-ink) }`, which has higher
 * specificity (0,1,1) than a plain `.ds-btn--primary` class (0,1,0). Once a
 * visitor had followed a button once, its label rendered red-on-red and became
 * invisible. Every button colour is therefore stated for the link states too.
 */
a.ds-btn:link,
a.ds-btn:visited { color: inherit; }

a.ds-btn--primary:link,
a.ds-btn--primary:visited,
.ds-btn--primary { color: var(--text-on-action); }

a.ds-btn--secondary:link,
a.ds-btn--secondary:visited,
.ds-btn--secondary { color: var(--text-inverse); }

a.ds-btn--outline:link,
a.ds-btn--outline:visited,
.ds-btn--outline { color: var(--text); }

a.ds-btn--ghost:link,
a.ds-btn--ghost:visited,
.ds-btn--ghost { color: var(--text-secondary); }

a.ds-btn--danger:link,
a.ds-btn--danger:visited,
.ds-btn--danger { color: #fff; }

a.ds-btn--whatsapp:link,
a.ds-btn--whatsapp:visited,
.ds-btn--whatsapp { color: #06301a; }

/* Same problem in the portal navigation and the footer. */
a.ds-app__nav-link:link,
a.ds-app__nav-link:visited { color: var(--text-secondary); }
a.ds-app__nav-link[aria-current="page"]:link,
a.ds-app__nav-link[aria-current="page"]:visited { color: var(--text-inverse); }

.ds-footer a:link,
.ds-footer a:visited { color: rgba(247, 243, 235, .86); }

.ds-nav a:link,
.ds-nav a:visited { color: var(--text-secondary); }

.ds-product__title a:link,
.ds-product__title a:visited { color: var(--text); }

.ds-btn--primary   { background: var(--action); color: var(--text-on-action); }
.ds-btn--primary:hover,
.ds-btn--primary:focus-visible { background: var(--action-hover); color: var(--text-on-action); }

.ds-btn--secondary { background: var(--structure); color: var(--text-inverse); }
.ds-btn--secondary:hover { background: var(--structure-hover); color: var(--text-inverse); }

.ds-btn--outline   { background: transparent; border-color: var(--border-strong); color: var(--text); }
.ds-btn--outline:hover { background: var(--surface-sunken); color: var(--text); }

.ds-btn--ghost     { background: transparent; color: var(--text-secondary); font-weight: var(--fw-semi); }
.ds-btn--ghost:hover { background: var(--surface-sunken); color: var(--text); }

.ds-btn--danger    { background: var(--danger); color: #fff; }
.ds-btn--whatsapp  { background: var(--brand-whatsapp); color: #06301a; }

.ds-btn--block     { width: 100%; }
.ds-btn--lg        { height: 48px; font-size: var(--fs-15); padding: 0 var(--sp-6); }
.ds-btn--sm        { height: 34px; font-size: var(--fs-13); padding: 0 var(--sp-3); min-height: 0; }

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- forms -- */

.ds-field       { display: block; margin-bottom: var(--sp-4); }
.ds-field__label { display: block; font-size: var(--fs-13); font-weight: var(--fw-bold); margin-bottom: 6px; }
.ds-field__hint  { font-size: var(--fs-12); color: var(--text-muted); margin-top: 5px; }
.ds-field__error { font-size: var(--fs-12); color: var(--danger); font-weight: var(--fw-semi); margin-top: 5px; }

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-14);
  font-family: var(--font-ui);
}

.ds-textarea { height: auto; min-height: 110px; padding: 11px 14px; line-height: var(--lh-normal); resize: vertical; }

.ds-input:focus-visible,
.ds-select:focus-visible,
.ds-textarea:focus-visible { border-color: var(--border-focus); box-shadow: var(--e-focus); outline: none; }

.ds-field--invalid .ds-input,
.ds-field--invalid .ds-select,
.ds-field--invalid .ds-textarea { border-color: var(--danger); }

.ds-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-14); line-height: var(--lh-normal); }
.ds-check input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--action); }

/* --------------------------------------------------------------- badges -- */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  white-space: nowrap;
}

.ds-badge--success { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); }
.ds-badge--warning { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning-border); }
.ds-badge--danger  { background: var(--danger-soft);  color: var(--danger);  border: 1px solid var(--danger-border); }
.ds-badge--info    { background: var(--info-soft);    color: var(--info);    border: 1px solid var(--info-border); }
.ds-badge--tier    { background: var(--tier-soft);    color: var(--tier-ink); border: 1px solid var(--tier-border); }
.ds-badge--neutral { background: var(--neutral-soft); color: var(--text-secondary); border: 1px solid var(--border); }

.ds-flag {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--action);
  color: #fff;
  font-size: var(--fs-11);
  font-weight: 800;
  letter-spacing: .05em;
}

/* --------------------------------------------------------------- notices -- */

.ds-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
}

.ds-notice--success { border-color: var(--success-border); background: var(--success-soft); }
.ds-notice--warning { border-color: var(--warning-border); background: var(--warning-soft); }
.ds-notice--danger  { border-color: var(--danger-border);  background: var(--danger-soft); }
.ds-notice--info    { border-color: var(--info-border);    background: var(--info-soft); }
.ds-notice--tier    { border-color: var(--tier-border);    background: var(--tier-soft); }

/* ---------------------------------------------------------------- money -- */

.ds-money        { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ds-money--lg    { font-size: var(--fs-32); font-weight: var(--fw-semi); color: var(--action-ink); line-height: var(--lh-tight); }
.ds-money--was   { font-size: var(--fs-16); color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.ds-money--free  { color: var(--success); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; }
.ds-money--neg   { color: var(--danger); }

/* --------------------------------------------------------- squad ladder -- */

.ds-ladder { display: grid; gap: var(--sp-2); }

.ds-ladder__step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-13);
}

.ds-ladder__step[data-state="reached"] { border-color: var(--tier-border); background: var(--tier-soft); }
.ds-ladder__step[data-state="current"] { border-color: var(--tier); background: var(--tier-soft); box-shadow: var(--e-1); }
.ds-ladder__step[data-state="locked"]  { opacity: .62; }

.ds-ladder__band  { font-weight: var(--fw-bold); color: var(--text); }
.ds-ladder__pct   { font-family: var(--font-display); font-weight: var(--fw-semi); color: var(--tier-ink); }

.ds-progress { height: 8px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; }
.ds-progress__bar { height: 100%; background: var(--tier); border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease-out); }

.ds-countdown { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
.ds-countdown[data-ds-expired] { color: var(--text-muted); }

/* --------------------------------------------------------------- tables -- */

.ds-table { width: 100%; border-collapse: collapse; }

.ds-table th {
  padding: 10px 14px;
  font-size: var(--fs-11);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  font-weight: var(--fw-semi);
  text-align: left;
  white-space: nowrap;
}

.ds-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: var(--fs-13); vertical-align: middle; }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover { background: var(--surface-2); }

.ds-table .ds-num,
.ds-table th.ds-num { text-align: right; font-variant-numeric: tabular-nums; }

.ds-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Admin data tables fit their content column with no horizontal scroll: long
   unbreakable values (emails, CNIC/NTN numbers, e-mail slugs) wrap instead of
   forcing the table wider than the column, and headers may wrap too. */
.ds-app .ds-table th { white-space: normal; }
.ds-app .ds-table td { overflow-wrap: anywhere; word-break: break-word; }
/* Keep action buttons and badges on one line — only the data values wrap. */
.ds-app .ds-table td .ds-btn,
.ds-app .ds-table td .ds-badge { white-space: nowrap; word-break: normal; overflow-wrap: normal; }

/* Seller variation builder: one row per leaf (group/option/units/price/stock/sku/image). */
.ds-variation-row {
	display: grid;
	grid-template-columns: 1.1fr 1.1fr 0.9fr 0.8fr 0.8fr 0.9fr 1.2fr auto;
	gap: 10px;
	align-items: end;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	margin-bottom: var(--sp-3);
	background: var(--surface);
}
.ds-variation-row__cell { min-width: 0; }
.ds-variation-row__cell .ds-input { width: 100%; }
/* The file input is the widest control — keep it inside its cell and legible. */
.ds-variation-row__cell input[type="file"] { max-width: 100%; font-size: var(--fs-12); padding: 6px 8px; }
.ds-variation-row__actions { display: flex; flex-direction: column; gap: 6px; align-self: center; }
.ds-variation-row__remove,
.ds-variation-row__addchild { align-self: center; white-space: nowrap; }
@media (max-width: 1100px) {
	.ds-variation-row { grid-template-columns: 1fr 1fr 1fr; }
	.ds-variation-row__actions { flex-direction: row; grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 640px) {
	.ds-variation-row { grid-template-columns: 1fr 1fr; }
}

.ds-cell-2line strong { display: block; font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--text); }
.ds-cell-2line span   { display: block; font-size: var(--fs-12); color: var(--text-muted); margin-top: 1px; }

/* ------------------------------------------------------ product cards --- */

.ds-product { position: relative; display: flex; flex-direction: column; height: 100%; }
.ds-product__media { position: relative; aspect-ratio: 1 / 1; background: var(--surface-sunken); overflow: hidden; }
.ds-product__media img { width: 100%; height: 100%; object-fit: cover; }
.ds-product__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; }
.ds-product__title { font-family: var(--font-ui); font-size: var(--fs-14); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.ds-product__title a { color: var(--text); }
.ds-product__meta { margin-top: auto; }

/* A product with no photograph gets a designed typographic tile, never a
   broken image and never a grey box (prototype state matrix, PR-10.7). */
.ds-tile {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-21);
  line-height: var(--lh-snug);
  color: var(--text-inverse);
  background: var(--structure);
}

.ds-tile[data-tone="1"] { background: var(--brand-navy-2); }
.ds-tile[data-tone="2"] { background: var(--brand-red-2); }
.ds-tile[data-tone="3"] { background: var(--tier-ink); }
.ds-tile[data-tone="4"] { background: var(--n-700); }

/* ------------------------------------------------------------- states --- */

.ds-empty { padding: var(--sp-12) var(--sp-5); text-align: center; }
.ds-empty__icon { width: 48px; height: 48px; margin: 0 auto var(--sp-4); display: grid; place-items: center; border-radius: var(--r-full); background: var(--surface-sunken); color: var(--text-muted); }
.ds-empty__title { font-family: var(--font-display); font-size: var(--fs-21); margin-bottom: var(--sp-2); }
.ds-empty__body  { font-size: var(--fs-14); color: var(--text-secondary); margin-bottom: var(--sp-5); }

.ds-skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--n-200) 37%, var(--surface-sunken) 63%);
  background-size: 420px 100%;
  border-radius: var(--r-xs);
  animation: ds-shimmer 1.4s linear infinite;
}

@keyframes ds-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@media (prefers-reduced-motion: reduce) { .ds-skeleton { animation: none; } }

/* ------------------------------------------------------------- footer --- */

.ds-footer { background: var(--surface-inverse); color: var(--text-inverse); margin-top: var(--sp-16); }
.ds-footer__inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.ds-footer li { display: contents; }
.ds-footer li::marker { content: none; }

.ds-footer__grid { display: grid; gap: 34px; grid-template-columns: minmax(220px, 1.3fr) repeat(auto-fit, minmax(140px, 1fr)); padding-top: 44px; padding-bottom: 34px; }
.ds-footer__lockup { display: flex; align-items: center; gap: 10px; color: var(--brand-cream); margin-bottom: 12px; }
.ds-footer__lockup img { max-width: 58px; }
.ds-brand img.ds-brand__mark { max-height: 38px; }
.ds-footer__mark { width: 58px; height: 34px; flex: 0 0 58px; display: block; object-fit: contain; }
.ds-footer__word { font-family: var(--font-display); font-size: 22px; letter-spacing: .01em; font-weight: 700; text-transform: uppercase; color: var(--brand-amber); }
.ds-footer__word b { font-weight: 700; color: #FFFFFF; }
.ds-footer__tagline { font-family: var(--font-ui); font-size: var(--fs-12); letter-spacing: .28em; text-transform: uppercase; color: var(--brand-amber); margin-bottom: 12px; }
.ds-footer__blurb { font-size: var(--fs-13); line-height: 1.6; color: rgba(247, 243, 235, .72); max-width: 34ch; }

.ds-footer__title { font-size: var(--fs-11); letter-spacing: .1em; text-transform: uppercase; font-weight: var(--fw-bold); color: rgba(247, 243, 235, .55); margin-bottom: 11px; }
.ds-footer__grid nav a { display: block; font-size: var(--fs-13); font-weight: var(--fw-medium); padding: 4px 0; }
.ds-footer a:link,
.ds-footer a:visited { color: rgba(247, 243, 235, .86); }
.ds-footer a:hover { color: var(--brand-gold); text-decoration: none; }

.ds-footer__band { border-top: 1px solid rgba(247, 243, 235, .14); border-bottom: 1px solid rgba(247, 243, 235, .14); }
.ds-footer__promises { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); padding-top: 18px; padding-bottom: 18px; }
.ds-footer__promise { display: flex; gap: 10px; }
.ds-footer__promise svg { flex-shrink: 0; margin-top: 2px; }
.ds-footer__promise b { display: block; font-size: var(--fs-13); color: var(--brand-cream); margin-bottom: 2px; }
.ds-footer__promise span span { font-size: var(--fs-12); line-height: 1.5; color: rgba(247, 243, 235, .62); }

.ds-footer__bottom { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding-top: 16px; padding-bottom: 22px; font-size: var(--fs-12); color: rgba(247, 243, 235, .55); }
.ds-footer__copyright { flex: 1; min-width: 200px; }
.ds-footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.ds-footer__bottom a:link,
.ds-footer__bottom a:visited { color: rgba(247, 243, 235, .72); font-size: var(--fs-12); }
.ds-footer__bottom a:hover { color: var(--brand-gold); }

/* ------------------------------------------------------ accessibility --- */

.ds-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-focus);
  border-radius: var(--r-xs);
  font-weight: var(--fw-bold);
}

.ds-skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

.ds-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------ product layout --- */

.ds-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
}

@media (max-width: 900px) {
  .ds-product-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

.ds-product-layout__media img { width: 100%; height: auto; border-radius: var(--r-md); }
.ds-product-layout__summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }

@media (max-width: 900px) { .ds-product-layout__summary { position: static; } }

/* The media column stretches to the row, and the About card fills whatever
   height the photo leaves over — its bottom edge lines up with the bottom of
   the summary column (the DealSquad promise card). When the description is
   taller than that space, the card clamps with a fade and a Read more
   toggle (wired to [data-ds-clamp] in app.js). */
.ds-product-layout__media { align-self: stretch; display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.ds-product-layout__media .ds-product-photo { flex: 0 0 auto; }

/* Thumbnail strip under the product photo — only rendered when the product
   has gallery images beyond the featured one. */
.ds-gallery { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ds-gallery__thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-sunken);
  cursor: pointer;
}
.ds-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-gallery__thumb.is-active,
.ds-gallery__thumb:focus-visible { border-color: var(--brand-gold); }

.ds-about { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ds-about .ds-about__body { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
.ds-about.is-clamped .ds-about__body::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}
.ds-about.is-open { flex: 0 0 auto; }
.ds-about.is-open .ds-about__body { overflow: visible; }
.ds-about.is-open .ds-about__body::after { content: none; }
.ds-about__more {
  display: none;
  margin: var(--sp-3) var(--sp-5) var(--sp-4);
  align-self: flex-start;
}
.ds-about.is-clamped .ds-about__more,
.ds-about.is-open .ds-about__more { display: inline-flex; }

@media (max-width: 900px) {
  /* Stacked layout: the description shows at its natural height. */
  .ds-about { flex: 0 0 auto; }
  .ds-about .ds-about__body { overflow: visible; flex: 0 0 auto; }
  .ds-about.is-clamped .ds-about__body::after { content: none; }
  .ds-about.is-clamped .ds-about__more { display: none; }
}

/* WooCommerce's stylesheet puts a table-display clearfix ::before/::after on
   ul.products; inside our grid those pseudo-elements become grid ITEMS — the
   ::before occupied the first cell, shoving every related-product card one
   place along and wrapping the last one under the heading. */
.related.products ul.products::before,
.related.products ul.products::after { content: none; }

.ds-product-title {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-2);
}

.ds-squad-panel { box-shadow: var(--e-2); }
.ds-squad-panel .ds-table th { text-transform: none; letter-spacing: 0; font-size: var(--fs-13); color: var(--text-secondary); }

/* WooCommerce leaves its own class names on a few elements; align them with
   the extracted component layer rather than letting two systems fight. */
.woocommerce-breadcrumb { font-size: var(--fs-12); color: var(--text-muted); margin-bottom: var(--sp-5); }
.woocommerce-breadcrumb a { color: var(--text-secondary); }
.woocommerce-result-count { margin: 0; }
.woocommerce-ordering select { height: 38px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); padding: 0 var(--sp-3); font-size: var(--fs-13); }

.woocommerce-pagination ul { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-8); }
.woocommerce-pagination a,
.woocommerce-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--fs-13); font-weight: var(--fw-semi);
}
.woocommerce-pagination .current { background: var(--structure); color: var(--text-inverse); border-color: var(--structure); }

.related.products > h2 { font-family: var(--font-display); font-size: var(--fs-26); margin: var(--sp-12) 0 var(--sp-5); }
.related.products ul.products { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-5); }
@media (max-width: 860px) { .related.products ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ----------------------------------------------------------------- home -- */

.ds-hero { position: relative; background: var(--surface-inverse); color: var(--text-inverse); overflow: hidden; }
.ds-hero::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34%; max-width: 520px; background: var(--brand-gradient); clip-path: polygon(45% 0, 100% 0, 68% 50%, 100% 100%, 45% 100%, 13% 50%); opacity: .10; pointer-events: none; z-index: 0; }
/* The chevron must never widen the page: the shell clips sideways overflow
   (clip, not hidden, so sticky headers keep working). */
.ds-shell { overflow-x: clip; }
.ds-hero > * { position: relative; z-index: 1; }
.ds-hero__inner { max-width: 720px; padding-block: var(--sp-16); }

/* Client-directed landing enrichment (deviation D-11): a fanned collage of
   real catalogue photographs beside the hero copy on wide screens. */
.ds-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--sp-10); }
.ds-hero__collage { display: none; }

@media (min-width: 1024px) {
  .ds-hero__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ds-hero__collage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    padding-block: var(--sp-10);
  }
  .ds-hero__shot {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 3px solid rgba(247, 243, 235, .18);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    transform: rotate(-2deg);
    background: var(--surface-sunken);
  }
  .ds-hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ds-hero__shot:nth-child(1) { grid-row: span 2; aspect-ratio: 3 / 4; transform: rotate(-2.5deg); }
  .ds-hero__shot:nth-child(2) { aspect-ratio: 4 / 3; transform: rotate(2deg) translateY(6px); }
  .ds-hero__shot:nth-child(3) { aspect-ratio: 4 / 3; transform: rotate(-1deg) translateY(-2px); border-color: rgba(251, 176, 52, .55); }
}
.ds-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-52);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--brand-cream);
  margin-bottom: var(--sp-4);
}
.ds-hero__body { font-size: var(--fs-18); line-height: var(--lh-loose); color: rgba(247,243,235,.82); margin-bottom: var(--sp-6); }
.ds-hero a.ds-btn--outline:link,
.ds-hero a.ds-btn--outline:visited,
.ds-hero .ds-btn--outline { border-color: rgba(247,243,235,.4); color: var(--brand-cream); }
.ds-hero .ds-btn--outline:hover { background: rgba(247,243,235,.1); color: var(--brand-cream); }

@media (max-width: 720px) {
  .ds-hero__inner { padding-block: var(--sp-12); }
  .ds-hero__title { font-size: var(--fs-40); }
  .ds-hero__body { font-size: var(--fs-16); }
}

/* Photo tiles (deviation D-11): each category wears a real product photo. */
.ds-category-tile--photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: var(--sp-4);
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-inverse);
}
.ds-category-tile--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.ds-category-tile--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 66, 66, .82) 0%, rgba(2, 66, 66, .25) 55%, rgba(2, 66, 66, .05) 100%);
}
.ds-category-tile--photo > span { position: relative; z-index: 1; }
.ds-category-tile--photo .ds-category-tile__name { color: var(--brand-cream); display: block; }
.ds-category-tile--photo .ds-category-tile__count { color: rgba(247, 243, 235, .75); font-size: var(--fs-12); }
.ds-category-tile--photo:hover { border-color: var(--tier); box-shadow: var(--e-2); text-decoration: none; }
.ds-category-tile--photo:hover img { transform: scale(1.05); }

/* WhatsApp share on the squad card. */
.ds-squad-card__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: #25D366;
  color: #fff;
}
a.ds-squad-card__share:link,
a.ds-squad-card__share:visited { color: #fff; }
.ds-squad-card__share:hover { background: #1ebe5b; }

.ds-category-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-5);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ds-category-tile:hover { border-color: var(--tier); box-shadow: var(--e-2); text-decoration: none; }
.ds-category-tile__name { font-family: var(--font-display); font-size: var(--fs-18); color: var(--text); }

.ds-how { background: var(--bg-inset); padding-block: var(--sp-12); }
.ds-how__num {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-full);
  background: var(--tier-soft); color: var(--tier-ink);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-14);
}
.ds-how__title { font-family: var(--font-display); font-size: var(--fs-18); }
.ds-how ol { counter-reset: none; }

/* ---------------------------------------------------------- portal shell -- */

.ds-app { padding-block: var(--sp-8) var(--sp-16); }

.ds-app__layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 900px) {
  .ds-app__layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

.ds-app__nav {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
}

@media (max-width: 900px) {
  .ds-app__nav { position: static; }
  .ds-app__nav ul { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
  .ds-app__nav li { flex: 0 0 auto; }
}

.ds-app__nav .ds-eyebrow { margin-bottom: var(--sp-3); }

.ds-app__nav-link {
  display: block;
  padding: 9px var(--sp-3);
  border-radius: var(--r-xs);
  font-size: var(--fs-14);
  font-weight: var(--fw-semi);
  color: var(--text-secondary);
  white-space: nowrap;
}

.ds-app__nav-link:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }

.ds-app__nav-link[aria-current="page"] {
  background: var(--structure);
  color: var(--text-inverse);
}

.ds-stat { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: var(--sp-4) var(--sp-5); }
.ds-stat__label { font-size: var(--fs-11); letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--text-muted); }
.ds-stat__value { font-family: var(--font-display); font-size: var(--fs-26); font-weight: var(--fw-semi); margin-top: var(--sp-1); }
.ds-stat__note { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; }

/* ------------------------------------------------------------------ auth -- */

.ds-auth { max-width: 460px; margin: 0 auto; padding-block: var(--sp-12) var(--sp-16); }
.ds-auth--wide { max-width: 560px; }

.ds-auth__card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--sp-8);
  box-shadow: var(--e-2);
}

@media (max-width: 520px) {
  .ds-auth { padding-inline: var(--sp-4); }
  .ds-auth__card { padding: var(--sp-5); }
}

.ds-auth__head { margin-bottom: var(--sp-6); }
.ds-auth__title { font-family: var(--font-display); font-size: var(--fs-26); margin-bottom: var(--sp-2); }
.ds-auth__sub { font-size: var(--fs-14); color: var(--text-secondary); line-height: var(--lh-normal); }

.ds-auth__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-13);
  color: var(--text-secondary);
}

.ds-auth__foot a { font-weight: var(--fw-semi); }

/* ------------------------------------------------------------- OTP entry -- */

.ds-otp { display: flex; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-4); }
.ds-otp input {
  width: 46px; height: 56px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-21);
  font-weight: var(--fw-bold);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.ds-otp input:focus-visible { border-color: var(--border-focus); box-shadow: var(--e-focus); outline: none; }

/* ------------------------------------------------------------- wizard -- */

.ds-wizard__steps { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.ds-wizard__step {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px 12px; border-radius: var(--r-full);
  font-size: var(--fs-12); font-weight: var(--fw-semi);
  background: var(--surface-sunken); color: var(--text-muted);
}
.ds-wizard__step.is-current { background: var(--structure); color: var(--text-inverse); }
.ds-wizard__step.is-done { background: var(--success-soft); color: var(--success); }

.ds-upload {
  display: block; padding: var(--sp-5);
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2); text-align: center; cursor: pointer;
}
.ds-upload:hover { border-color: var(--tier); background: var(--tier-soft); }
.ds-upload input { display: none; }
.ds-upload__label { font-weight: var(--fw-semi); font-size: var(--fs-14); }
.ds-upload__hint { font-size: var(--fs-12); color: var(--text-muted); margin-top: 3px; }

.ds-table--details th { text-transform: none; letter-spacing: 0; font-size: var(--fs-13); color: var(--text-secondary); font-weight: var(--fw-medium); white-space: normal; }
.ds-table--details td { font-weight: var(--fw-semi); }

/* ------------------------------------------------------------------ tabs -- */

/* overflow-x:auto alone promotes overflow-y to auto (CSS spec), so the active
   tab's underline triggers a phantom vertical scrollbar — pin it hidden. The
   horizontal scroll stays for narrow screens but its bar is hidden. */
.ds-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tabs__tab {
  flex: 0 0 auto;
  padding: 9px var(--sp-4);
  font-size: var(--fs-14);
  font-weight: var(--fw-semi);
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.ds-tabs__tab:hover { color: var(--text); text-decoration: none; }
.ds-tabs__tab.is-current { color: var(--text); border-bottom-color: var(--rule); }
a.ds-tabs__tab:link, a.ds-tabs__tab:visited { color: var(--text-secondary); }
a.ds-tabs__tab.is-current:link, a.ds-tabs__tab.is-current:visited { color: var(--text); }

/* -------------------------------------------------------------- timeline -- */

.ds-timeline { display: grid; gap: var(--sp-3); }
.ds-timeline__step { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-14); color: var(--text-muted); }
.ds-timeline__dot {
  width: 12px; height: 12px; border-radius: var(--r-full);
  background: var(--surface-sunken); border: 2px solid var(--border-strong);
  flex-shrink: 0;
}
.ds-timeline__step.is-done { color: var(--text); font-weight: var(--fw-semi); }
.ds-timeline__step.is-done .ds-timeline__dot { background: var(--success); border-color: var(--success); }

/* --------------------------------------------------------------- choices -- */

.ds-choice {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); margin-bottom: var(--sp-2);
  cursor: pointer;
}
.ds-choice:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ds-choice input { margin-top: 3px; accent-color: var(--action); flex-shrink: 0; }
.ds-choice span { display: block; }
.ds-choice strong { display: block; font-size: var(--fs-14); }
.ds-choice .ds-muted { font-size: var(--fs-12); }
.ds-choice:has(input:checked) { border-color: var(--tier); background: var(--tier-soft); }

/* ------------------------------------------------------------ rider stop -- */

.ds-stop {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
  min-height: 72px;
  margin-bottom: var(--sp-2);
}
.ds-stop:hover { border-color: var(--border-strong); text-decoration: none; }
.ds-stop.is-done { opacity: .62; background: var(--surface-2); }
.ds-stop strong { display: block; font-size: var(--fs-15); color: var(--text); }
.ds-stop .ds-muted { display: block; font-size: var(--fs-12); }
.ds-stop .ds-money { font-size: var(--fs-18); color: var(--action-ink); }
a.ds-stop:link, a.ds-stop:visited { color: var(--text); }

/* ------------------------------------------------------------ seller track -- */

.ds-track { display: block; text-decoration: none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.ds-track:hover { border-color: var(--tier); box-shadow: var(--e-2); text-decoration: none; }
.ds-track__title { font-family: var(--font-display); font-size: var(--fs-21); margin-bottom: var(--sp-1); }
.ds-track__list { margin: var(--sp-4) 0; }
.ds-track__list li { position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-2); font-size: var(--fs-13); color: var(--text-secondary); }
.ds-track__list li::before { content: "—"; position: absolute; left: 0; color: var(--tier); }
a.ds-track:link, a.ds-track:visited { color: var(--text); }

/* ------------------------------------------------- hero stats + chip bar -- */

.ds-hero__eyebrow {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--brand-gold);
  margin-bottom: var(--sp-3);
}

.ds-hero__stats {
  display: flex;
  gap: var(--sp-10);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(247, 243, 235, .16);
  flex-wrap: wrap;
}

.ds-hero__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-26);
  font-weight: var(--fw-semi);
  color: var(--brand-gold);
  line-height: var(--lh-tight);
}

.ds-hero__stat-label {
  display: block;
  font-size: var(--fs-11);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: rgba(247, 243, 235, .6);
  margin-top: 4px;
}

@media (max-width: 720px) { .ds-hero__stats { gap: var(--sp-6); } }

.ds-chipbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.ds-chipbar__inner { display: flex; gap: var(--sp-2); padding: var(--sp-3) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ds-chip {
  flex: 0 0 auto;
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  color: var(--text-secondary);
  background: var(--surface);
  white-space: nowrap;
}
.ds-chip:hover { border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.ds-chip.is-current { background: var(--structure); border-color: var(--structure); color: var(--text-inverse); }
a.ds-chip:link, a.ds-chip:visited { color: var(--text-secondary); }
a.ds-chip.is-current:link, a.ds-chip.is-current:visited { color: var(--text-inverse); }

/* --------------------------------------------------------- squad card ---- */

.ds-squad-card__cat {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: rgba(2, 66, 66, .82);
  color: var(--brand-cream);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
}

.ds-squad-card__timer {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--brand-red);
  color: #fff;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
}

.ds-squad-card__seller { font-size: var(--fs-12); color: var(--text-muted); }

.ds-squad-card__price .ds-money { font-family: var(--font-display); font-size: var(--fs-21); font-weight: var(--fw-semi); color: var(--action-ink); }
.ds-squad-card__price .ds-money--was { font-size: var(--fs-13); margin-left: 4px; }

.ds-squad-card__foot { font-size: var(--fs-12); color: var(--text-muted); margin-top: var(--sp-2); }

.ds-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--brand-red);
  margin-left: 6px;
  animation: ds-pulse 1.6s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ds-live-dot { animation: none; } }

.ds-header__account { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
@media (max-width: 620px) { .ds-header__account .ds-btn--ghost { display: none; } }

/* ---------------------------------------------------- squad panel (v2) --- */

.ds-panel-price { display: flex; align-items: baseline; gap: var(--sp-3); }
.ds-panel-price__now {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  font-weight: var(--fw-semi);
  color: var(--action-ink);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.ds-badge--navy { background: var(--structure); color: var(--text-inverse); border: 1px solid var(--structure); }

.ds-panel-timer { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); color: var(--action-ink); }
.ds-panel-timer .ds-live-dot { margin-left: 0; }

.ds-progress--gold .ds-progress__bar { background: linear-gradient(90deg, var(--brand-red), var(--brand-gold)); }

.ds-tierboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: var(--sp-2); }

.ds-tierbox {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-align: center;
}
.ds-tierbox__band { font-size: var(--fs-11); letter-spacing: .05em; color: var(--text-muted); font-weight: var(--fw-semi); }
.ds-tierbox__pct { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-semi); }
.ds-tierbox.is-current { border-color: var(--tier); background: var(--tier-soft); box-shadow: var(--e-1); }
.ds-tierbox.is-current .ds-tierbox__pct { color: var(--tier-ink); }
.ds-tierbox.is-passed { opacity: .62; }

.ds-variants { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ds-variant {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
}
.ds-variant.is-soldout { color: var(--text-subtle); text-decoration: line-through; }
.ds-variant.is-soldout small { display: block; font-size: var(--fs-11); text-decoration: none; color: var(--text-muted); }

.ds-stepper { display: inline-flex; align-items: center; gap: var(--sp-1); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.ds-stepper__btn { width: 40px; height: 40px; font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--text-secondary); }
.ds-stepper__btn:hover { color: var(--text); background: var(--surface-sunken); }
.ds-stepper__value { min-width: 34px; text-align: center; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

.ds-totals { border-top: 1px solid var(--border); padding-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.ds-totals__row { display: flex; justify-content: space-between; font-size: var(--fs-14); color: var(--text-secondary); }
.ds-totals__row .ds-money { font-variant-numeric: tabular-nums; }
.ds-totals__row--grand { font-family: var(--font-display); font-size: var(--fs-16); color: var(--text); font-weight: var(--fw-semi); }
.ds-totals__row--grand .ds-money { color: var(--action-ink); font-size: var(--fs-18); }

.ds-promise { margin-top: var(--sp-4); }
.ds-promise__title { font-family: var(--font-display); font-weight: var(--fw-semi); margin-bottom: var(--sp-3); }
.ds-promise__list li { position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-2); font-size: var(--fs-13); color: var(--text-secondary); }
.ds-promise__list li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: var(--fw-bold); }

.ds-product-photo { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--surface-sunken); }
.ds-product-photo img { width: 100%; height: auto; display: block; }
.ds-product-photo__weight {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  background: rgba(2, 66, 66, .82);
  color: var(--brand-cream);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
}

/* ---------------------------------------------------------- image sanity -- */

/*
 * WordPress emits explicit width/height attributes on every attachment image.
 * The reset constrains width with max-width:100% but the height ATTRIBUTE then
 * still applies, so a constrained image rendered as a distorted sliver (seen
 * on the join form's thumbnail). Height must follow width.
 */
img { height: auto; }

/* The small product thumbnail used on join, share and detail screens. */
.ds-thumb {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-sunken);
}
.ds-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-thumb .ds-tile { font-size: var(--fs-12); padding: var(--sp-2); }

/* ==========================================================================
   Premium redesign layer — client-directed (2026-08-29, deviation D-12).
   Navy + gold luxury chrome; prices and primary actions stay red per the
   client's instruction. Later rules override the earlier layout on purpose.
   ========================================================================== */

/* ---- topbar ---- */
.ds-topbar { background: var(--surface-inverse); border-bottom: 0; }
.ds-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 8px var(--sp-5);
  color: rgba(247, 243, 235, .85);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
}
.ds-topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.ds-topbar__item svg { color: var(--brand-gold); }
a.ds-topbar__item:link, a.ds-topbar__item:visited { color: rgba(247, 243, 235, .85); }
a.ds-topbar__item:hover { color: var(--brand-gold); }
.ds-topbar__spacer { flex: 1; }
.ds-topbar__social { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: var(--r-full); }
a.ds-topbar__social:link, a.ds-topbar__social:visited { color: rgba(247, 243, 235, .8); }
.ds-topbar__social:hover { color: var(--brand-navy); background: var(--brand-gold); }
@media (max-width: 620px) {
  .ds-topbar__inner span.ds-topbar__item--mid, .ds-topbar__inner a.ds-topbar__item { display: none; }
  .ds-topbar__inner .ds-topbar__social { display: inline-flex; }
}

/* ---- header: brand row ---- */
.ds-header { border-bottom: 0; box-shadow: 0 1px 0 var(--border); }
.ds-header__main { height: 86px; gap: var(--sp-6); }
.ds-brand { margin-right: 0; }
.ds-brand__mark { flex-shrink: 0; width: 65px; height: 38px; display: block; object-fit: contain; }
.ds-brand__text { display: flex; flex-direction: column; line-height: 1; }
.ds-brand__word { font-family: var(--font-display); font-size: 27px; letter-spacing: .01em; color: var(--brand-persimmon); font-weight: 700; text-transform: uppercase; }
.ds-brand__word b { font-weight: 700; color: var(--brand-teal-dark); }
.ds-brand__tagline { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--brand-teal); font-weight: var(--fw-semi); margin-top: 4px; white-space: nowrap; }
a.ds-brand:link, a.ds-brand:visited, a.ds-brand:hover { color: var(--brand-persimmon); text-decoration: none; }

.ds-header__search { position: relative; flex: 1 1 auto; max-width: 620px; margin-inline: auto; }
.ds-header__search input {
  width: 100%;
  height: 46px;
  padding: 0 54px 0 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  color: var(--text);
}
.ds-header__search input:focus { outline: none; border-color: var(--brand-gold); background: var(--surface); }
.ds-header__search-go {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--brand-gold);
  color: var(--brand-navy);
  cursor: pointer;
}
.ds-header__search-go:hover { background: var(--tier); }

.ds-header__actions { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; }
.ds-header__seller-link { font-size: var(--fs-14); font-weight: var(--fw-semi); white-space: nowrap; }
a.ds-header__seller-link:link, a.ds-header__seller-link:visited { color: var(--text); }
.ds-header__seller-link:hover { color: var(--brand-gold); }
.ds-header__icon-btn { position: relative; display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1.5px solid var(--border); border-radius: var(--r-full); }
a.ds-header__icon-btn:link, a.ds-header__icon-btn:visited { color: var(--text); }
.ds-header__icon-btn:hover { border-color: var(--brand-gold); color: var(--brand-gold); }
.ds-header__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--brand-gold);
  color: var(--brand-navy);
  font-size: var(--fs-12);
  font-weight: 800;
}

/* ---- header: nav row ---- */
.ds-header__navrow { height: 56px; gap: var(--sp-5); border-top: 1px solid var(--border); }
.ds-cats { position: relative; flex-shrink: 0; }
.ds-cats__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  background: var(--structure);
  color: var(--text-inverse);
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.ds-cats__toggle:hover { background: var(--structure-hover); }
.ds-cats__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--e-3, 0 16px 40px rgba(2,66,66,.14));
  z-index: calc(var(--z-header) + 1);
}
.ds-cats__menu a { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 9px 12px; border-radius: var(--r-xs); font-size: var(--fs-13); font-weight: var(--fw-semi); }
.ds-cats__menu a:link, .ds-cats__menu a:visited { color: var(--tier-ink); }
.ds-cats__menu a:hover { background: rgba(251, 176, 52, .12); color: var(--tier-ink); text-decoration: none; }
.ds-nav a.is-current { color: var(--text); box-shadow: inset 0 -2px 0 var(--brand-gold); border-radius: 0; }
.ds-header__cta { flex-shrink: 0; }

.ds-btn--gold { background: var(--brand-gold); color: var(--brand-navy); }
a.ds-btn--gold:link, a.ds-btn--gold:visited { color: var(--brand-navy); }
.ds-btn--gold:hover { background: var(--tier); color: var(--brand-navy); }
.ds-btn--navy { background: var(--structure); color: var(--text-inverse); }
a.ds-btn--navy:link, a.ds-btn--navy:visited { color: var(--text-inverse); }
.ds-btn--navy:hover { background: var(--structure-hover); color: var(--text-inverse); }

/* ---- hero (premium, light) ---- */
.ds-hero { background: linear-gradient(135deg, #F7FAF9 0%, #ECF3F1 55%, #E3EEEB 100%); color: var(--text); overflow: visible; }
.ds-hero__layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
.ds-hero__inner { max-width: none; padding-block: var(--sp-12); }
.ds-hero__eyebrow-pill {
  display: inline-flex;
  padding: 7px 16px;
  border: 1.5px solid var(--brand-gold);
  border-radius: var(--r-full);
  color: var(--tier-ink);
  font-size: var(--fs-11);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: var(--sp-5);
}
.ds-hero__title { color: var(--structure); }
.ds-hero__title-navy, .ds-hero__title-gold { display: block; }
.ds-hero__title-gold { color: var(--brand-gold); }
.ds-hero__body { color: var(--text-secondary); max-width: 46ch; }
.ds-hero__ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-7); }
.ds-hero a.ds-btn--outline:link, .ds-hero a.ds-btn--outline:visited, .ds-hero .ds-btn--outline { border-color: var(--border-strong, var(--border)); color: var(--text); background: var(--surface); }
.ds-hero .ds-btn--outline:hover { border-color: var(--brand-gold); color: var(--text); background: var(--surface); }
.ds-hero__trust { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.ds-trust-chip { display: inline-flex; align-items: center; gap: 10px; }
.ds-trust-chip__icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1.5px solid var(--brand-gold); border-radius: var(--r-full); color: var(--brand-gold); background: var(--surface); flex-shrink: 0; }
.ds-trust-chip b { display: block; font-size: var(--fs-13); color: var(--text); }
.ds-trust-chip small { font-size: var(--fs-12); color: var(--text-muted); }

.ds-hero__stage { position: relative; display: none; min-height: 420px; }
@media (min-width: 1024px) {
  .ds-hero__layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
  .ds-hero__stage { display: block; }
}
.ds-hero__arch {
  position: absolute;
  inset: 6% 8% 0 8%;
  border-radius: 999px 999px 18px 18px;
  background: linear-gradient(180deg, #0c5252 0%, var(--brand-navy, #024242) 70%);
  box-shadow: inset 0 0 0 3px rgba(251, 176, 52, .55), 0 30px 60px rgba(2, 66, 66, .28);
}
.ds-hero__podium {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6%;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, #105151, #024242);
  box-shadow: 0 -2px 0 rgba(251, 176, 52, .7), 0 14px 26px rgba(2, 66, 66, .45);
}
.ds-hero__stage-shot { position: absolute; border-radius: var(--r-md); overflow: hidden; border: 3px solid rgba(251, 176, 52, .65); box-shadow: 0 18px 34px rgba(0, 0, 0, .35); background: var(--surface); }
.ds-hero__stage-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-hero__stage-shot--1 { left: 24%; bottom: 13%; width: 34%; aspect-ratio: 3 / 4; transform: rotate(-3deg); z-index: 2; }
.ds-hero__stage-shot--2 { right: 16%; bottom: 15%; width: 30%; aspect-ratio: 4 / 5; transform: rotate(3deg); }
.ds-hero__stage-shot--3 { left: 14%; top: 14%; width: 26%; aspect-ratio: 1; transform: rotate(-6deg); border-color: rgba(247, 243, 235, .5); }
.ds-hero__save {
  position: absolute;
  top: 2%;
  right: 4%;
  z-index: 3;
  width: 92px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--brand-navy, #024242);
  color: var(--brand-cream);
  box-shadow: 0 0 0 3px var(--brand-gold), 0 14px 28px rgba(2, 66, 66, .35);
  text-align: center;
  line-height: 1.1;
}
.ds-hero__save small { font-size: 12px; letter-spacing: .12em; font-weight: 800; }
.ds-hero__save b { font-family: var(--font-display); font-size: 26px; color: var(--brand-gold); }

/* ---- navy category bar ---- */
.ds-catbar {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: calc(-1 * var(--sp-7));
  position: relative;
  z-index: 2;
  padding: 18px 22px;
  border-radius: 20px;
  background: var(--brand-navy, #024242);
  box-shadow: 0 18px 36px rgba(2, 66, 66, .25);
  overflow-x: auto;
}
.ds-catbar__item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 76px; flex: 1; }
a.ds-catbar__item:link, a.ds-catbar__item:visited { color: rgba(247, 243, 235, .88); }
.ds-catbar__icon { color: var(--brand-gold); display: inline-flex; }
.ds-catbar__label { font-size: var(--fs-12); font-weight: var(--fw-semi); white-space: nowrap; }
.ds-catbar__item:hover { text-decoration: none; }
.ds-catbar__item:hover .ds-catbar__label { color: var(--brand-gold); }

/* ---- how it works ---- */
.ds-how { padding-block: var(--sp-12) var(--sp-8); }
.ds-how__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-26);
  color: var(--structure);
  margin-bottom: var(--sp-8);
}
.ds-how__heading em { font-style: normal; color: var(--brand-gold); }
.ds-how__rule { width: 64px; height: 2px; background: var(--brand-gold); border-radius: 2px; }
.ds-how__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.ds-how__step { position: relative; display: flex; align-items: flex-start; gap: 14px; padding-right: var(--sp-5); }
.ds-how__icon { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; border: 2px solid var(--brand-gold); border-radius: var(--r-full); background: var(--brand-navy, #024242); color: var(--brand-gold); flex-shrink: 0; }
.ds-how__step b { display: block; font-size: var(--fs-15); color: var(--text); margin-bottom: 3px; }
.ds-how__step .ds-muted { font-size: var(--fs-13); line-height: 1.5; display: block; }
.ds-how__arrow { position: absolute; right: -6px; top: 18px; color: var(--brand-gold); }
@media (max-width: 1024px) { .ds-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-how__arrow { display: none; } }
@media (max-width: 560px)  { .ds-how__steps { grid-template-columns: minmax(0, 1fr); } }

/* ---- premium squad card ---- */
.ds-squad-card { border-radius: 18px; }
.ds-squad-card__fire {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: rgba(2, 66, 66, .88);
  color: var(--brand-cream);
  font-size: var(--fs-11);
  font-weight: 800;
}
.ds-squad-card__members {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 5px;
  border-radius: var(--r-full);
  background: rgba(2, 66, 66, .88);
  color: var(--brand-cream);
  font-size: var(--fs-11);
  font-weight: 700;
}
.ds-avatar {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--brand-gold);
  color: var(--brand-navy);
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  margin-right: -8px;
  border: 1.5px solid rgba(2, 66, 66, .9);
}
.ds-avatar:last-of-type { margin-right: 2px; }
.ds-off-pill {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  background: #E8F6EC;
  color: #1E7A3C;
  font-size: var(--fs-11);
  font-weight: 800;
}
.ds-squad-card__unlock { font-size: var(--fs-12); color: var(--text-secondary); margin: 6px 0 8px; }
.ds-ends-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
}
.ds-ends-chip b { font-family: var(--font-mono, ui-monospace, monospace); color: var(--action-ink); font-variant-numeric: tabular-nums; }
.ds-squad-card__share { background: var(--brand-gold); color: var(--brand-navy); width: 36px; height: 36px; }
a.ds-squad-card__share:link, a.ds-squad-card__share:visited { color: var(--brand-navy); }
.ds-squad-card__share:hover { background: var(--tier); }

/* ---- mobile app chrome ---- */
.ds-tabbar { display: none; }
@media (max-width: 860px) {
  .ds-header__main { height: auto; flex-wrap: wrap; padding-block: 10px; row-gap: 10px; }
  .ds-drawer-toggle { order: 1; }
  .ds-brand { order: 2; flex: 1 1 auto; justify-content: center; margin-right: 0; min-width: 0; }
  .ds-brand svg, .ds-brand__mark { width: 51px; height: 30px; }
  .ds-brand__word { font-size: 22px; }
  .ds-brand__tagline { font-size: 8px; letter-spacing: .2em; white-space: nowrap; }
  .ds-header__actions { order: 3; }
  .ds-header__seller-link { display: none; }
  .ds-header__search { display: block; order: 4; flex-basis: 100%; max-width: none; margin-inline: 0; }
  .ds-header__navrow { display: none; }
  .ds-hero__inner { padding-block: var(--sp-8); }
  .ds-catbar { margin-top: var(--sp-2); justify-content: flex-start; }

  .ds-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-header);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgba(2, 66, 66, .08);
  }
  .ds-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: var(--fw-semi); padding: 4px 0; }
  .ds-tabbar a:link, .ds-tabbar a:visited { color: var(--text-muted); }
  .ds-tabbar a.is-active, .ds-tabbar a.is-active:visited { color: var(--structure); }
  .ds-tabbar a:hover { text-decoration: none; }
  .ds-tabbar__fab span {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    background: var(--brand-gold);
    color: var(--brand-navy);
    margin-top: -26px;
    box-shadow: 0 8px 18px rgba(251, 176, 52, .45), 0 0 0 4px var(--surface);
  }
  .ds-tabbar__fab small { font-size: 10.5px; }
  a.ds-tabbar__fab:link, a.ds-tabbar__fab:visited { color: var(--text-muted); }

  body.ds-shell { padding-bottom: 78px; }
  .ds-portal-manage .ds-tabbar, .ds-portal-rider .ds-tabbar, .ds-portal-seller .ds-tabbar { display: none; }
  .ds-portal-manage.ds-shell, .ds-portal-rider.ds-shell, .ds-portal-seller.ds-shell { padding-bottom: 0; }
}

/* ==========================================================================
   Premium layer, platform-wide (client-directed, 2026-08-31). Every screen
   is assembled from the shared components below, so restyling them carries
   the navy/gold pattern through auth, buyer, seller, rider and manage —
   with prices and primary actions kept red throughout.
   ========================================================================== */

/* ---- cards, everywhere ---- */
.ds-card { border-radius: 16px; box-shadow: 0 1px 2px rgba(2, 66, 66, .04); }
.ds-card__header { position: relative; font-size: var(--fs-17, 17px); color: var(--structure); padding-bottom: 13px; }
.ds-card__header::after {
  content: '';
  position: absolute;
  left: var(--sp-5);
  bottom: -1px;
  width: 34px;
  height: 2px;
  background: var(--brand-gold);
}

/* ---- buttons: primary stays red, dressed premium ---- */
.ds-btn { border-radius: 12px; }
/* Direction change (2026-08-31): primary actions are GOLD platform-wide;
   prices and the countdown stay red. These overrides outrank the original
   red primary rules, including their :link/:visited pins. */
.ds-btn--primary,
a.ds-btn--primary:link,
a.ds-btn--primary:visited {
  background: var(--action);
  border-color: var(--brand-gold);
  color: var(--text-on-action);
  box-shadow: 0 6px 14px rgba(251, 176, 52, .3);
}
.ds-btn--primary:hover,
a.ds-btn--primary:hover {
  background: var(--tier);
  border-color: var(--tier);
  color: var(--text-on-action);
  transform: translateY(-1px);
  box-shadow: 0 9px 18px rgba(251, 176, 52, .35);
}
.ds-btn--primary:disabled { background: rgba(251, 176, 52, .45); border-color: transparent; color: rgba(2, 66, 66, .55); transform: none; box-shadow: none; }
.ds-btn--gold { box-shadow: 0 6px 14px rgba(251, 176, 52, .3); }
.ds-btn--gold:hover { transform: translateY(-1px); }
.ds-btn--outline:hover { border-color: var(--brand-gold); }

/* ---- form controls: gold focus, softer fields ---- */
.ds-input, .ds-select, .ds-textarea {
  border-width: 1.5px;
  border-radius: 10px;
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none;
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(251, 176, 52, .18);
}
.ds-field__label { color: var(--structure); font-weight: var(--fw-semi); }
.ds-choice { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; transition: border-color .15s ease, background .15s ease; }
.ds-choice:hover { border-color: var(--brand-gold); background: var(--surface-2); }
.ds-choice input[type='radio'], .ds-choice input[type='checkbox'], .ds-check input { accent-color: var(--brand-gold); }
.ds-upload { border: 1.5px dashed var(--brand-gold); border-radius: 12px; background: rgba(251, 176, 52, .05); }

/* ---- tables: the navy console header ---- */
.ds-table thead th {
  background: var(--structure);
  color: var(--brand-cream);
  border-bottom: 2px solid var(--brand-gold);
  font-size: var(--fs-11);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ds-table thead th:first-child { border-top-left-radius: 10px; }
.ds-table thead th:last-child { border-top-right-radius: 10px; }
.ds-table tbody tr:hover { background: rgba(251, 176, 52, .06); }

/* ---- portal sidebar: the navy rail with the gold active pill ---- */
.ds-app__nav {
  border: 0;
  border-radius: 16px;
  background: var(--structure);
  padding: var(--sp-5);
  box-shadow: 0 14px 30px rgba(2, 66, 66, .18);
}
.ds-app__nav .ds-eyebrow { color: var(--brand-gold); }
.ds-app__nav-link { color: rgba(247, 243, 235, .82); border-radius: 10px; }
a.ds-app__nav-link:link, a.ds-app__nav-link:visited { color: rgba(247, 243, 235, .82); }
.ds-app__nav-link:hover { background: rgba(247, 243, 235, .1); color: var(--brand-cream); }
.ds-app__nav-link[aria-current="page"],
a.ds-app__nav-link[aria-current="page"]:link,
a.ds-app__nav-link[aria-current="page"]:visited {
  background: var(--brand-gold);
  color: var(--brand-navy);
  font-weight: var(--fw-bold);
}

/* ---- screen headers: serif navy with the gold rule ---- */
.ds-app .ds-section-title { border-bottom-color: var(--brand-gold); }
.ds-app .ds-section-title h1, .ds-app .ds-section-title h2 { color: var(--structure); }

/* Admin Portal brand guide: operations-panel headings in Deep Teal (#105151),
   distinct from the Dark Teal (#024242) sidebar/topbar. Scoped to /manage/ so
   the storefront is untouched. */
.ds-portal-manage .ds-app .ds-section-title h1,
.ds-portal-manage .ds-app .ds-section-title h2,
.ds-portal-manage .ds-section-title h1,
.ds-portal-manage .ds-section-title h2 { color: var(--brand-teal); }

/* ---- stat tiles ---- */
.ds-stat { border-radius: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.ds-stat:hover { border-color: var(--brand-gold); box-shadow: 0 8px 18px rgba(2, 66, 66, .08); }
.ds-stat__value { color: var(--structure); }

/* A clickable tile keeps the card look — no link underline or link colour — and
   lifts a little on hover so it reads as actionable. */
a.ds-stat--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.ds-stat--link:hover { color: inherit; text-decoration: none; transform: translateY(-1px); }
a.ds-stat--link:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }

/* ---- notices ---- */
.ds-notice { border-radius: 12px; border-left-width: 3px; }
.ds-notice--info { border-left-color: var(--brand-gold); }

/* ---- auth screens: the framed premium card ---- */
.ds-portal-auth .ds-main { background: linear-gradient(160deg, #F7FAF9 0%, #E6EFEC 100%); }
.ds-auth__card { border-radius: 18px; box-shadow: 0 24px 50px rgba(2, 66, 66, .12); overflow: hidden; position: relative; }
.ds-auth__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-gold), #E8C766, var(--brand-gold));
}
.ds-auth__title { color: var(--structure); }
.ds-auth__head { position: relative; padding-bottom: 12px; }
.ds-auth__head::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--brand-gold); }

/* ---- squad panel: gold tier boxes, red price and join kept ---- */
.ds-panel-price__now { color: var(--action-ink); }
.ds-tierbox { border: 1.5px solid var(--border); border-radius: 12px; transition: border-color .15s ease; }
.ds-tierbox.is-current { border-color: var(--brand-gold); background: rgba(251, 176, 52, .1); box-shadow: 0 4px 12px rgba(251, 176, 52, .18); }
.ds-tierbox.is-current .ds-tierbox__pct { color: var(--tier-ink); }
.ds-tierbox.is-passed { background: var(--surface-sunken); opacity: .75; }
.ds-panel-timer { color: var(--action-ink); }

/* ---- badges ---- */
.ds-badge { border-radius: var(--r-full); }
.ds-badge--navy { background: var(--structure); color: var(--brand-cream); }

/* ---- pagination / misc links hover gold ---- */
.ds-app a:hover { color: var(--tier-ink); }
.ds-app .ds-btn:hover { color: inherit; }
/* Keep the sidebar rail's hover text readable: a light cream on the dark teal,
   not the inherited dark body colour. The active gold pill's hover stays navy
   via the aria-current rule below. */
.ds-app .ds-app__nav-link:hover { color: var(--brand-cream); }
.ds-app a.ds-btn--primary:hover { color: var(--text-on-action); }
.ds-app a.ds-btn--gold:hover { color: var(--brand-navy); }
.ds-app a.ds-btn--navy:hover { color: var(--text-inverse); }
/* Solid buttons rendered as <button> (e.g. the Staff "Update" action) also need
   their light label kept on hover — the `color: inherit` reset above only meant
   to neutralise the link-hover gold, but it left them dark-on-dark. */
.ds-app .ds-btn--secondary:hover,
.ds-app .ds-btn--navy:hover { color: var(--text-inverse); }
.ds-app a.ds-app__nav-link[aria-current="page"]:hover { color: var(--brand-navy); }

/* mobile portal rail: horizontal scroll pills */
@media (max-width: 860px) {
  .ds-app__nav { display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto; padding: 10px 12px; border-radius: 14px; }
  .ds-app__nav ul { display: flex; gap: 6px; margin: 0; }
  .ds-app__nav .ds-eyebrow { margin: 0 6px 0 2px; white-space: nowrap; }
  .ds-app__nav-link { white-space: nowrap; padding: 8px 13px; }
}

/* ---- WooCommerce pagination, premium (the stock grey-lavender boxes
        clashed with the design) ---- */
.woocommerce nav.woocommerce-pagination,
nav.woocommerce-pagination { margin-top: var(--sp-8); text-align: center; }
.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul.page-numbers {
  border: 0;
  margin: 0;
  display: inline-flex;
  gap: 8px;
  white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul li,
nav.woocommerce-pagination ul.page-numbers li {
  border: 0;
  float: none;
  display: inline-flex;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
nav.woocommerce-pagination a.page-numbers,
nav.woocommerce-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--structure);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  line-height: 1;
  text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
nav.woocommerce-pagination a.page-numbers:hover {
  border-color: var(--brand-gold);
  background: rgba(251, 176, 52, .1);
  color: var(--structure);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
nav.woocommerce-pagination span.page-numbers.current {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-navy);
}

/* ---- product page enrichment (2026-08-31) ---- */
.ds-seller-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  flex: 0 0 auto;
}
a.ds-seller-strip:link, a.ds-seller-strip:visited { color: var(--text); }
.ds-seller-strip:hover { border-color: var(--brand-gold); text-decoration: none; box-shadow: 0 8px 18px rgba(2, 66, 66, .08); }
.ds-seller-strip__avatar {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--structure);
  color: var(--brand-gold);
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 700;
  flex-shrink: 0;
}
.ds-seller-strip__meta { flex: 1; min-width: 0; }
.ds-seller-strip__meta b { display: block; font-size: var(--fs-14); color: var(--structure); }
.ds-seller-strip__go { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--tier-ink); white-space: nowrap; }

.ds-share-strip { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); flex: 0 0 auto; }
.ds-share-strip__label { flex: 1; min-width: 0; }
.ds-share-strip__label b { display: block; font-size: var(--fs-13); color: var(--structure); }
.ds-share-strip__actions { display: inline-flex; gap: var(--sp-2); flex-shrink: 0; }
.ds-share-strip__wa,
a.ds-share-strip__wa:link, a.ds-share-strip__wa:visited { background: #25D366; border-color: #25D366; color: #fff; }
.ds-share-strip__wa:hover { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }

button.ds-tierbox { cursor: pointer; font-family: var(--font-ui); }
.ds-tierbox.is-peek { border-color: var(--structure); box-shadow: inset 0 0 0 1px var(--structure); }
.ds-tier-peek {
  margin-top: var(--sp-2);
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(2, 66, 66, .06);
  color: var(--structure);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
}

/* hover lift + photo zoom on product cards */
.ds-product { transition: transform .2s ease, box-shadow .2s ease; }
.ds-product:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(2, 66, 66, .12); }
.ds-product__media { overflow: hidden; display: block; }
.ds-product__media img { transition: transform .35s ease; }
.ds-product:hover .ds-product__media img { transform: scale(1.05); }

/* scroll reveal */
.ds-reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.ds-reveal.is-revealed { opacity: 1; transform: none; }

/* ==========================================================================
   De-red pass (client final direction, 2026-08-31): no decorative red
   anywhere — prices, countdowns and links go navy/gold per the reference
   screens. Red survives ONLY as status semantics: error notices, danger
   badges and destructive confirmations, which the reference does not cover
   and which lose their meaning in any other colour.
   ========================================================================== */

/* links: navy at rest, gold ink on hover (buttons/navs keep their pins) */
a:link, a:visited { color: var(--structure); }
a:hover { color: var(--tier-ink); }

/* prices: navy, exactly as the reference shows them */
.ds-money { color: var(--structure); }
.ds-money--was { color: var(--text-muted); }
.ds-panel-price__now { color: var(--structure); }
.ds-squad-card__price .ds-money:first-child { color: var(--structure); }

/* countdowns and live markers: navy numerals, gold pulse */
.ds-ends-chip b { color: var(--structure); }
.ds-panel-timer { color: var(--structure); }
.ds-squad-card__timer { background: rgba(2, 66, 66, .88); color: var(--brand-cream); }
.ds-live-dot { background: var(--brand-gold); box-shadow: 0 0 0 0 rgba(251, 176, 52, .5); }

/* the % off badge on archive/related cards: green like the reference */
.ds-product .onsale, .ds-sale-flash { background: #E8F6EC; color: #1E7A3C; }
.ds-totals__row--grand .ds-money { color: var(--structure); }
/* remaining decorative reds → navy (rider cash figures, large money) */
.ds-money--lg { color: var(--structure); }
.ds-stop .ds-money { color: var(--structure); }

/* ==========================================================================
   Product page transformation (2026-08-31) — the panel becomes the hero.
   ========================================================================== */

/* framed photograph */
.ds-product-photo { border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 3px rgba(251, 176, 52, .45), 0 22px 44px rgba(2, 66, 66, .16); }
.ds-product-photo .ds-squad-card__cat { background: var(--brand-gold); color: var(--brand-navy); font-weight: 800; }

/* the panel itself */
.ds-squad-panel { border-radius: 18px; box-shadow: 0 18px 40px rgba(2, 66, 66, .1); }
.ds-panel-price__now { font-size: var(--fs-40, 40px); }
.ds-badge--gold { background: var(--brand-gold); color: var(--brand-navy); font-weight: 800; }

/* live banner */
.ds-panel-live {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--structure);
  color: var(--brand-cream);
}
.ds-panel-live__who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ds-panel-live__who strong { font-size: var(--fs-13); }
.ds-panel-live .ds-avatar { border-color: var(--structure); }
.ds-panel-live--first { background: rgba(251, 176, 52, .14); color: var(--tier-ink); border: 1.5px dashed var(--brand-gold); }
.ds-panel-timer { color: var(--brand-gold); }
.ds-panel-live .ds-countdown { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }

/* milestone bar */
.ds-milestones { position: relative; padding-block: 6px; }
.ds-milestones .ds-progress { height: 8px; }
.ds-milestones__dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  border: 2.5px solid var(--structure);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}
.ds-milestones__dot.is-reached { background: var(--brand-gold); border-color: var(--brand-gold); }
.ds-milestones__dot::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--structure);
  color: var(--brand-cream);
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 3;
}
.ds-milestones__dot:hover::after, .ds-milestones__dot:focus-visible::after { opacity: 1; }

/* trust mini-row under the CTA */
.ds-trust-mini { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; }
.ds-trust-mini span { white-space: nowrap; }

/* entrance: the panel's blocks rise in sequence */
@media (prefers-reduced-motion: no-preference) {
  .ds-panel-animate .ds-stack > * { opacity: 0; transform: translateY(10px); animation: ds-rise .45s ease forwards; }
  .ds-panel-animate .ds-stack > *:nth-child(1) { animation-delay: .02s; }
  .ds-panel-animate .ds-stack > *:nth-child(2) { animation-delay: .08s; }
  .ds-panel-animate .ds-stack > *:nth-child(3) { animation-delay: .14s; }
  .ds-panel-animate .ds-stack > *:nth-child(4) { animation-delay: .2s; }
  .ds-panel-animate .ds-stack > *:nth-child(5) { animation-delay: .26s; }
  .ds-panel-animate .ds-stack > *:nth-child(6) { animation-delay: .32s; }
  .ds-panel-animate .ds-stack > *:nth-child(7) { animation-delay: .38s; }
  .ds-panel-animate .ds-stack > *:nth-child(8) { animation-delay: .44s; }
}
@keyframes ds-rise { to { opacity: 1; transform: none; } }

/* mobile sticky join bar, above the tab bar */
.ds-mobile-cta { display: none; }
@media (max-width: 860px) {
  .ds-mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 10px var(--sp-5);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 26px rgba(2, 66, 66, .1);
  }
  .ds-mobile-cta__price b { display: block; font-family: var(--font-display); font-size: var(--fs-18); color: var(--structure); }
  .ds-mobile-cta__price small { font-size: var(--fs-11); color: var(--text-muted); }
  body.single-product.ds-shell { padding-bottom: 148px; }
}

/* =====================================================================
   0.7.5 — The discount ladder, the info pages, and the contact form.
   The ladder replaces the milestone-bar / tier-notice / tier-box trio on
   the product panel with one connected component: tiers as nodes on a
   single gold rail that fills to the squad's exact position.
   ===================================================================== */

.ds-ladder2__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ds-ladder2__head .ds-eyebrow { margin: 0; }

.ds-ladder2__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--r-full);
  background: var(--tier-soft); color: var(--tier-ink);
  border: 1px solid var(--tier-border);
  font-size: var(--fs-12); font-weight: var(--fw-semi); line-height: 1.4;
}
.ds-ladder2__chip svg { flex-shrink: 0; }
.ds-ladder2__chip--max { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }

.ds-ladder2__map { position: relative; }
.ds-ladder2__rail {
  position: absolute; top: 8px; left: 12.5%; width: 75%; height: 5px;
  border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden;
}
.ds-ladder2__fill {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-gold), #E6B93F);
  transition: width .6s cubic-bezier(.2, .7, .3, 1);
}

.ds-ladder2__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-ladder2__step {
  display: grid; justify-items: center; gap: 2px;
  padding: 0 2px 4px; background: transparent; border: 0;
  border-radius: var(--r-sm); cursor: pointer;
}
.ds-ladder2__node {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%; margin-bottom: 7px;
  background: var(--surface); border: 2px solid var(--border); color: #fff;
  position: relative; z-index: 1; transition: background .25s, border-color .25s, box-shadow .25s;
}
.ds-ladder2__step.is-passed  .ds-ladder2__node { background: var(--structure); border-color: var(--structure); }
.ds-ladder2__step.is-current .ds-ladder2__node { background: var(--brand-gold); border-color: var(--brand-gold); box-shadow: 0 0 0 4px rgba(251, 176, 52, .22); }
.ds-ladder2__step.is-current .ds-ladder2__node::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .ds-ladder2__step.is-current .ds-ladder2__node { animation: ds-node-pulse 2.4s ease-in-out infinite; }
  @keyframes ds-node-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(251, 176, 52, .22); }
    50%      { box-shadow: 0 0 0 8px rgba(251, 176, 52, .1); }
  }
}

.ds-ladder2__pct  { font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-semi); color: var(--structure); line-height: 1.15; transition: color .2s; }
.ds-ladder2__step.is-current .ds-ladder2__pct { color: var(--tier-ink); }
.ds-ladder2__step.is-locked  .ds-ladder2__pct { color: var(--text-muted); }
.ds-ladder2__step:hover .ds-ladder2__pct,
.ds-ladder2__step:focus-visible .ds-ladder2__pct { color: var(--tier-ink); }
.ds-ladder2__band { font-size: var(--fs-11); letter-spacing: .04em; color: var(--text-muted); font-weight: var(--fw-semi); }

.ds-ladder2__tag {
  margin-top: 4px; font-size: 12px; line-height: 1; padding: 4px 8px;
  border-radius: var(--r-full); font-weight: var(--fw-semi); letter-spacing: .02em;
  white-space: nowrap;
}
.ds-ladder2__tag.is-empty { visibility: hidden; }
.ds-ladder2__step.is-passed  .ds-ladder2__tag { background: var(--success-soft); color: var(--success); }
.ds-ladder2__step.is-current .ds-ladder2__tag { background: var(--brand-navy, #024242); color: #fff; }
.ds-ladder2__step.is-locked  .ds-ladder2__tag { background: var(--surface-sunken); color: var(--text-secondary); }

/* The quantity stepper, rounded to match the ladder. */
.ds-stepper { border-radius: var(--r-full); border: 1.5px solid var(--border); padding: 3px; gap: 2px; }
.ds-stepper__btn { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-sunken); color: var(--structure); font-size: var(--fs-16); transition: background .2s, color .2s; }
.ds-stepper__btn:hover { background: var(--tier-soft); color: var(--tier-ink); }
.ds-stepper__value { min-width: 40px; font-family: var(--font-display); font-size: var(--fs-16); }

/* Landing on /#how-it-works must clear the sticky header. */
.ds-how { scroll-margin-top: 170px; }

/* ------------------------------------------------- info-page chrome -- */

.ds-info-hero {
  background: linear-gradient(135deg, var(--brand-navy, #024242) 0%, #13294f 55%, #1a3560 100%);
  color: #fff; text-align: center; padding: 56px var(--sp-5) 60px;
}
.ds-info-hero--short { padding: 42px var(--sp-5) 46px; }
.ds-info-hero__eyebrow { color: var(--brand-gold); letter-spacing: .14em; text-transform: uppercase; font-size: var(--fs-12); font-weight: var(--fw-semi); margin-bottom: var(--sp-3); }
.ds-info-hero__title { font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 44px); font-weight: var(--fw-semi); color: #fff; margin-bottom: var(--sp-3); }
.ds-info-hero__sub { max-width: 580px; margin-inline: auto; color: rgba(255, 255, 255, .78); font-size: var(--fs-15); line-height: 1.65; }

.ds-info-body { padding-block: var(--sp-12); display: grid; gap: var(--sp-16); }
.ds-info-title {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); font-weight: var(--fw-semi);
  color: var(--structure); text-align: center; margin-bottom: var(--sp-8);
}

/* The four steps, long form. */
.ds-hiw { display: grid; gap: var(--sp-8); max-width: 780px; margin-inline: auto; width: 100%; }
.ds-hiw__row { display: flex; gap: var(--sp-5); align-items: flex-start; }
.ds-hiw__num { font-family: var(--font-display); font-size: 46px; line-height: 1; color: var(--brand-gold); font-weight: var(--fw-semi); min-width: 66px; text-align: right; }
.ds-hiw__copy h2 { font-family: var(--font-display); font-size: var(--fs-20, 20px); font-weight: var(--fw-semi); color: var(--structure); margin-bottom: var(--sp-2); }
.ds-hiw__copy p { color: var(--text-secondary); line-height: 1.7; max-width: 62ch; }

/* The rules cards. */
.ds-rules__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.ds-rules__card { padding: var(--sp-5); border-top: 3px solid var(--brand-gold); }
.ds-rules__card h3 { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--structure); margin-bottom: var(--sp-2); }
.ds-rules__card p { font-size: var(--fs-13); color: var(--text-secondary); line-height: 1.65; }

/* The FAQ. */
.ds-faq { max-width: 720px; margin-inline: auto; width: 100%; }
.ds-faq__item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--sp-3); }
.ds-faq__item summary {
  padding: var(--sp-4) 48px var(--sp-4) var(--sp-5); cursor: pointer; list-style: none;
  font-weight: var(--fw-semi); color: var(--structure); position: relative;
}
.ds-faq__item summary::-webkit-details-marker { display: none; }
.ds-faq__item summary::after {
  content: "+"; position: absolute; right: var(--sp-5); top: 50%;
  translate: 0 -50%; font-size: 22px; line-height: 1; color: var(--brand-gold);
  transition: rotate .2s;
}
.ds-faq__item[open] summary::after { rotate: 45deg; }
.ds-faq__item[open] summary { border-bottom: 1px dashed var(--border); }
.ds-faq__item p { padding: var(--sp-4) var(--sp-5); color: var(--text-secondary); line-height: 1.7; }

/* The closing band. */
.ds-cta-band { background: linear-gradient(135deg, var(--brand-navy, #024242), #13294f); color: #fff; padding-block: var(--sp-10); }
.ds-cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.ds-cta-band__title { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 26px); font-weight: var(--fw-semi); color: #fff; margin-bottom: 4px; }
.ds-cta-band__sub { color: rgba(255, 255, 255, .72); font-size: var(--fs-14); }
.ds-cta-band__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.ds-btn--outline-light { border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.ds-btn--outline-light:hover { border-color: var(--brand-gold); color: var(--brand-gold); background: transparent; }

/* ------------------------------------------------------ contact page -- */

.ds-contact-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.ds-contact-card { padding: var(--sp-5); }
.ds-contact-card h2 { font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-semi); color: var(--structure); margin-bottom: var(--sp-4); }
.ds-contact-facts { display: grid; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.ds-contact-facts li { display: grid; gap: 3px; }
.ds-contact-facts b { color: var(--structure); font-size: var(--fs-14); }
.ds-contact-facts span { font-size: var(--fs-13); color: var(--text-secondary); line-height: 1.6; }
.ds-contact-facts a { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--tier-ink); width: fit-content; }
.ds-contact-facts a:hover { color: var(--brand-gold); }

.ds-contact-form { padding: var(--sp-6); }
.ds-contact-form h2 { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 24px); font-weight: var(--fw-semi); color: var(--structure); margin-bottom: var(--sp-4); }
.ds-contact-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-3); }
.ds-input--area { min-height: 140px; resize: vertical; padding-top: 10px; line-height: 1.55; }
select.ds-input {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230A1F44' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.ds-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ds-contact-form__note { font-size: var(--fs-12); text-align: center; margin-top: var(--sp-3); }

@media (max-width: 900px) {
  .ds-rules__grid { grid-template-columns: 1fr 1fr; }
  .ds-contact-grid { grid-template-columns: 1fr; }
  .ds-contact-aside { order: 2; }
}

@media (max-width: 640px) {
  .ds-info-body { padding-block: var(--sp-8); gap: var(--sp-12); }
  .ds-hiw__num { font-size: 32px; min-width: 46px; }
  .ds-rules__grid { grid-template-columns: 1fr; }
  .ds-cta-band__inner { flex-direction: column; align-items: flex-start; }
  .ds-contact-form { padding: var(--sp-5); }
  .ds-contact-form__pair { grid-template-columns: 1fr; }
  .ds-ladder2__head { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .ds-ladder2__pct { font-size: var(--fs-16); }
  .ds-ladder2__tag { padding: 3px 6px; }
}

/* =====================================================================
   0.7.8 — the mobile pass. Fixes from walking every screen at 375px:
   one-row header, swipeable category bar, navy shop-card prices with a
   green flag, footer columns that respect the edge, price-first order
   on the product page, and the last decorative reds retired.
   ===================================================================== */

/* Shop and related-product cards: navy price, muted compare, green flag.
   (The card template used to carry an inline red — now classed.) */
.ds-product__price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ds-product__price .ds-money { font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-semi); color: var(--structure); }
.ds-product__price .ds-money--was { font-size: var(--fs-13); color: var(--text-muted); }
.ds-flag { background: #E8F6EC; color: #1E7A3C; font-weight: 700; }

/* The struck compare price on home squad cards lost the de-red pass to a
   more specific 0.5.x rule — settle it. */
.ds-squad-card__price .ds-money--was { color: var(--text-muted); }

/* The big panel price must never break between "Rs" and the amount. */
.ds-panel-price { flex-wrap: wrap; row-gap: 4px; }
.ds-panel-price__now { white-space: nowrap; }

/* The live banner survives narrow screens by wrapping, not clipping. */
.ds-panel-live { flex-wrap: wrap; row-gap: 6px; }

@media (max-width: 860px) {
  /* One-row header: burger — lockup — icons, search on its own line. */
  .ds-header__main { gap: 10px; row-gap: 8px; }
  .ds-header__actions { gap: var(--sp-2); }

  /* The category bar swipes instead of squeezing its labels. */
  .ds-catbar {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 14px 16px;
  }
  .ds-catbar::-webkit-scrollbar { display: none; }
  .ds-catbar__item { flex: 0 0 auto; scroll-snap-align: start; }
}

@media (max-width: 480px) {
  .ds-drawer-toggle { width: 40px; height: 40px; }
  .ds-brand svg, .ds-brand__mark { width: 38px; height: 38px; }
  .ds-brand__word { font-size: 18px; }
  .ds-brand__tagline { font-size: 7px; letter-spacing: .1em; }
  .ds-header__icon-btn { width: 40px; height: 40px; }
}

@media (max-width: 900px) {
  /* Price first on the phone: photo → title → panel → share → about → seller → promise → the rest.
     display:contents lets the two desktop columns interleave. */
  .ds-product-layout { display: flex; flex-direction: column; gap: var(--sp-4); }
  .ds-product-layout__media, .ds-product-layout__summary { display: contents; }
  .ds-product-layout__media > * { order: 6; }
  .ds-product-layout__summary > * { order: 3; }
  .ds-product-photo { order: 1; }
  .ds-gallery { order: 2; }
  .ds-squad-panel { order: 4; }
  .ds-promise { order: 8; }
  .ds-product-layout__media > .ds-about { order: 6; }
  .ds-product-layout__media > .ds-seller-strip { order: 7; }
  .ds-product-layout__media > .ds-ask-seller { order: 7; }
  .ds-product-layout__media > .ds-reviews { order: 9; }
  .ds-product-layout__media > .ds-share-strip { order: 5; }
  .ds-product-layout__summary > .ds-prose { order: 10; }
}

@media (max-width: 640px) {
  /* Footer columns: two per row, never flush against the screen edge. */
  .ds-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .ds-footer__brand { grid-column: 1 / -1; }

  /* The share strip stacks; the buttons take the full row. */
  .ds-share-strip { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .ds-share-strip__actions { display: flex; }
  .ds-share-strip__actions .ds-btn { flex: 1 1 0; }

  .ds-panel-price__now { font-size: 32px; }
}

/* The one-row header needs the lockup a touch narrower on real phones. */
@media (max-width: 480px) {
  .ds-brand { gap: 8px; }
  .ds-brand__word { font-size: 16.5px; }
  .ds-brand__tagline { font-size: 6.5px; letter-spacing: .06em; }
}
@media (max-width: 390px) {
  .ds-drawer-toggle { width: 36px; height: 36px; }
  .ds-header__icon-btn { width: 36px; height: 36px; }
}

/* The mobile drawer in the house style: navy panel, cream links, gold hover. */
.ds-drawer { background: var(--brand-navy, #024242); border-top: 1px solid rgba(251, 176, 52, .35); padding: var(--sp-2) var(--sp-5) var(--sp-4); }
.ds-drawer a, a.ds-drawer-link { border-bottom: 1px solid rgba(247, 243, 235, .08); }
.ds-drawer a:last-child { border-bottom: 0; }
.ds-drawer a:link, .ds-drawer a:visited { color: rgba(247, 243, 235, .92); }
.ds-drawer a:hover { color: var(--brand-gold); text-decoration: none; }

/* =====================================================================
   0.8.1 — client review: categories become their own titled section on a
   white card (no more navy bar overlapping the hero), and phones show
   products two to a row like the reference.
   ===================================================================== */

.ds-catsec { margin-top: var(--sp-10); }
.ds-catsec__title {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px);
  font-weight: var(--fw-semi); color: var(--structure);
  text-align: center; margin-bottom: var(--sp-5);
}

.ds-catbar {
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(2, 66, 66, .07);
}
a.ds-catbar__item:link, a.ds-catbar__item:visited { color: var(--structure); }
.ds-catbar__item:hover .ds-catbar__label { color: var(--tier-ink); }

@media (max-width: 860px) {
  .ds-catsec { margin-top: var(--sp-8); }
  .ds-catsec__title { font-size: 20px; margin-bottom: var(--sp-4); }
}

/* Phones: products as horizontal cards, exactly the client's reference —
   photo on the left carrying the joined-today and members chips, the
   details stacked on the right ending in the countdown chip and the gold
   share button. Desktop unchanged. */
@media (max-width: 640px) {
  .ds-grid--4 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }

  .ds-squad-card { display: grid; grid-template-columns: minmax(122px, 40%) minmax(0, 1fr); }
  .ds-squad-card__media { position: relative; height: 100%; min-height: 172px; aspect-ratio: auto; }
  .ds-squad-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .ds-squad-card .ds-card__body { padding: var(--sp-3); gap: 4px; }

  .ds-squad-card__fire { top: 8px; left: 8px; padding: 4px 8px; font-size: 10px; }
  .ds-squad-card__members { font-size: 10px; }
  .ds-squad-card__cat { display: none; }

  .ds-squad-card__title { font-size: var(--fs-14); line-height: 1.3; }
  .ds-squad-card__seller { font-size: var(--fs-11); margin: 0; }
  .ds-squad-card__price { margin: 2px 0; }
  .ds-squad-card__price .ds-money { font-size: var(--fs-17, 17px); }
  .ds-squad-card__price .ds-money--was { font-size: var(--fs-11); }
  .ds-squad-card__unlock { font-size: var(--fs-11); margin: 4px 0 6px; }
  .ds-squad-card__foot { margin-top: 6px; }
  .ds-ends-chip { font-size: 10px; padding: 4px 8px; }
  .ds-squad-card__share { width: 34px; height: 34px; }

  /* shop-archive cards: the same horizontal shape */
  .ds-product { display: grid; grid-template-columns: minmax(122px, 40%) minmax(0, 1fr); }
  .ds-product__media { height: 100%; min-height: 128px; aspect-ratio: auto; }
  .ds-product__body { padding: var(--sp-3); gap: 6px; }
  .ds-product__title { font-size: var(--fs-13); }
  .ds-product__price .ds-money { font-size: var(--fs-15); }
  .ds-flag { top: 8px; right: 8px; }
}

/* 0.8.5 — the Create-a-Squad landing: the CTA now opens the shop in a
   start-a-squad view with this banner, startable products first. */
.ds-start-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  flex-wrap: wrap; margin-bottom: var(--sp-6); padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md); color: #fff;
  background: linear-gradient(135deg, var(--brand-navy, #024242), #13294f);
  border: 1px solid rgba(251, 176, 52, .35);
}
.ds-start-banner__title { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 26px); font-weight: var(--fw-semi); color: #fff; margin-bottom: 3px; }
.ds-start-banner__sub { color: rgba(255, 255, 255, .78); font-size: var(--fs-14); line-height: 1.55; max-width: 56ch; }
.ds-start-banner__steps { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-13); color: rgba(255, 255, 255, .9); }
.ds-start-banner__steps b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; margin-right: 5px;
  background: var(--brand-gold); color: var(--brand-navy); font-size: var(--fs-11);
}
@media (max-width: 640px) {
  .ds-start-banner { padding: var(--sp-4); }
  .ds-start-banner__steps { display: grid; gap: var(--sp-2); }
}

/* 0.8.9 — an actionable danger notice: message on the left, its fix on the
   right (used by the join gate to send unverified buyers to /verify/). */
.ds-notice--action { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.ds-notice--action .ds-btn { flex-shrink: 0; }

/* 0.8.10 — full backend↔frontend category sync: the icon bar now shows every
   non-empty category, so it must stay graceful at any count. Let it scroll
   horizontally rather than break the layout when categories outgrow the row. */
.ds-catbar { overflow-x: auto; scrollbar-width: thin; }
.ds-catbar > .ds-catbar__item { flex: 0 0 auto; }

/* 0.8.11 — seller product gallery: stacked "Add another photo" inputs. */
.ds-gallery-adder { display: grid; gap: var(--sp-2); }
.ds-gallery-adder__more { margin-top: var(--sp-2); }
.ds-gallery-adder__more[disabled] { opacity: .5; cursor: not-allowed; }

/* 0.29.34 — each gallery picker row gets a "remove" (×) once a file is chosen. */
.ds-gallery-adder__item { display: flex; align-items: center; gap: var(--sp-2); }
.ds-gallery-adder__item .ds-gallery-adder__row { flex: 1 1 auto; min-width: 0; }
.ds-gallery-adder__clear { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--danger, #c0392b); font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ds-gallery-adder__clear:hover { background: color-mix(in srgb, var(--danger, #c0392b) 12%, transparent); border-color: var(--danger, #c0392b); }
.ds-gallery-adder__clear[hidden] { display: none; }

/* 0.29.33 — join cart: pick quantities across variants, one membership. */
.ds-cart { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-cart__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); border: 1.5px solid var(--border); border-radius: 12px; }
.ds-cart__row.is-soldout { opacity: .55; }
.ds-cart__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-cart__name { font-weight: var(--fw-semi); color: var(--structure); }
.ds-cart__price { font-size: var(--fs-sm); display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.ds-cart__qty { width: 72px; flex: 0 0 auto; text-align: center; }

/* 0.29.41 — smarter option cart + icon-only row actions. */
.ds-btn--icon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ds-btn--icon svg { width: 16px; height: 16px; }
.ds-cart { gap: var(--sp-2); }
.ds-cart__row { padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--border); border-radius: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.ds-cart__row:has(.ds-cart__qty:not([value="0"]):not(:placeholder-shown)),
.ds-cart__row:focus-within { border-color: var(--brand-gold, var(--action)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold, var(--action)) 14%, transparent); }
.ds-cart__name { font-weight: var(--fw-semi); color: var(--structure); font-size: var(--fs-16); }
.ds-cart__price { font-size: var(--fs-sm); display: inline-flex; align-items: baseline; gap: var(--sp-2); margin-top: 2px; }
.ds-cart__price strong { color: var(--structure); font-size: var(--fs-16); }
.ds-cart__qty { width: 84px; height: 44px; font-size: var(--fs-16); border-radius: 10px; }
.ds-cart__row.is-soldout { opacity: .55; }
/* Grouped (nested) variants: sizes tucked under their colour card. */
.ds-cart__group--named { border: 1.5px solid var(--border); border-radius: 16px; padding: var(--sp-3) var(--sp-4); background: var(--surface-2, var(--surface)); }
.ds-cart__group-label { font-weight: var(--fw-bold, var(--fw-semi)); color: var(--structure); margin: 0 0 var(--sp-2); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; }
.ds-cart__group--named .ds-cart__row { border: 0; border-radius: 0; padding: var(--sp-2) 0; box-shadow: none; }
.ds-cart__group--named .ds-cart__row + .ds-cart__row { border-top: 1px solid var(--border); }
.ds-cart__group--named .ds-cart__row:focus-within { box-shadow: none; }

/* 0.29.38 — nested cart: sizes grouped under their colour, on the product page. */
.ds-cart--nested { gap: var(--sp-3); }
.ds-cart__group--named { border: 1.5px solid var(--border); border-radius: 12px; padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-cart__group-label { font-weight: var(--fw-semi); color: var(--structure); margin: 0 0 2px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .02em; }
.ds-cart__group--named .ds-cart__row { border: 0; padding: 0; }
.ds-cart__hint { margin: var(--sp-2) 0 0; font-size: var(--fs-12); }
.ds-panel-cart { display: block; }
.ds-panel-cart .ds-totals { margin-top: var(--sp-3); }

/* 0.29.45 — variant picker: dependent colour → size dropdowns + a compact cart. */
.ds-picker { display: block; }
.ds-picker__controls {
	display: grid;
	grid-template-columns: 1fr 1fr auto auto;
	gap: var(--sp-2);
	align-items: end;
}
.ds-picker__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ds-picker__field--qty { width: 74px; }
.ds-picker__label { font-size: var(--fs-12); color: var(--muted, var(--structure)); text-transform: uppercase; letter-spacing: .03em; font-weight: var(--fw-semi); }
.ds-picker__select, .ds-picker__qty { width: 100%; height: 44px; }
.ds-picker__add { height: 44px; white-space: nowrap; }
.ds-picker__hint { margin: var(--sp-2) 0 0; font-size: var(--fs-12); }
.ds-picker__empty { margin: var(--sp-3) 0 0; font-size: var(--fs-13); }
.ds-picker__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-picker__row {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	border: 1.5px solid var(--border);
	border-radius: 12px;
	background: var(--surface-2, var(--surface));
}
.ds-picker__row-name { flex: 1 1 auto; min-width: 0; }
.ds-picker__row-price { font-weight: var(--fw-bold, var(--fw-semi)); white-space: nowrap; }
.ds-picker__remove {
	border: 0;
	background: transparent;
	color: var(--muted, var(--structure));
	font-size: var(--fs-18);
	line-height: 1;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	cursor: pointer;
	flex: 0 0 auto;
}
.ds-picker__remove:hover { background: color-mix( in srgb, var(--danger, #c0392b) 12%, transparent ); color: var(--danger, #c0392b); }
@media (max-width: 560px) {
	.ds-picker__controls { grid-template-columns: 1fr 1fr; }
	.ds-picker__field--qty { width: auto; }
	.ds-picker__add { grid-column: 1 / -1; }
}

/* 0.29.30 — code sign-in on AUTH-02: separator, channel choice, link button. */
.ds-auth-sep { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--muted); font-size: var(--fs-sm); }
.ds-auth-sep::before, .ds-auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.ds-code-signin__title { font-size: var(--fs-16); margin: 0 0 2px; }
.ds-code-signin__sub { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.ds-code-signin__channels { border: 0; padding: 0; margin: 0 0 var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-code-signin__channels legend { padding: 0; margin-bottom: var(--sp-2); }
.ds-choice--inline { display: flex; align-items: center; gap: var(--sp-2); }
.ds-btn--link { background: none; border: 0; padding: 0; color: var(--action); text-decoration: underline; cursor: pointer; font: inherit; }
.ds-btn--link:hover { color: var(--action-strong, var(--action)); }

/* 0.29.30 — buyer-facing delivery estimate on the product page (SHOP-03). */
.ds-delivery-estimate { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.ds-delivery-estimate__icon { font-size: 1.5rem; line-height: 1.2; }
.ds-delivery-estimate__text { display: flex; flex-direction: column; gap: 2px; }
.ds-delivery-estimate__text b { color: var(--structure); }
.ds-delivery-estimate__text .ds-muted { font-size: var(--fs-sm); }

/* 0.29.30 — seller product row actions: Edit / View / Duplicate / Delete. */
.ds-row-actions { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.ds-req { color: var(--danger, #c0392b); font-weight: var(--fw-semi); }
.ds-btn--ghost.ds-btn--danger { background: transparent; color: var(--danger); }
.ds-btn--ghost.ds-btn--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

/* 0.29.30 — existing gallery images with a per-photo Remove tick (SEL-04). */
.ds-gallery-existing { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.ds-gallery-existing__item { display: inline-flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); cursor: pointer; }
.ds-gallery-existing__item .ds-thumb { width: 84px; height: 84px; object-fit: cover; }
.ds-gallery-existing__remove { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.ds-gallery-existing__item:has(input:checked) .ds-thumb { outline: 2px solid var(--danger, #c0392b); opacity: .45; }
.ds-gallery-existing__item:has(input:checked) .ds-gallery-existing__remove { color: var(--danger, #c0392b); font-weight: var(--fw-semi); }

/* 0.8.12 — verify screen: enter/change number, and profile "verify now". */
.ds-phone-value { font-weight: var(--fw-semi); color: var(--structure); }
.ds-setphone { margin-top: var(--sp-3); text-align: left; }
.ds-otp-change { margin-top: var(--sp-4); }
.ds-otp-change > summary { cursor: pointer; color: var(--tier-ink); font-size: var(--fs-13); font-weight: var(--fw-semi); list-style: none; text-align: center; }
.ds-otp-change > summary::-webkit-details-marker { display: none; }
.ds-otp-change[open] > summary { margin-bottom: var(--sp-2); }

/* 0.8.13 — a flash notice inside an auth card (e.g. "A new code is on its
   way." above the OTP boxes) had no gap below it and butted the next row.
   Space it from whatever follows. */
.ds-auth__card .ds-notice { margin-bottom: var(--sp-4); }

/* 0.8.14 — related products clipped on phones: the cards turn horizontal
   (image + text) at <=640px, but this grid stayed 2-up all the way down, so
   each card had a 158px cell — a 122px image left ~34px for the text. Match
   the shop/store grids: one column on phones, so the horizontal card gets the
   full width. */
@media (max-width: 640px) {
  .related.products ul.products { grid-template-columns: minmax(0, 1fr); }
}

/* 0.9.0 — OTP channel choice: SMS or WhatsApp on the verify screen. */
.ds-auth__foot--stack { flex-direction: column; gap: var(--sp-3); align-items: stretch; }
.ds-otp-channels { display: grid; gap: var(--sp-2); justify-items: center; }
.ds-otp-channels__label { font-size: var(--fs-12); color: var(--text-secondary); text-align: center; margin: 0; }
.ds-otp-channels__btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.ds-otp-channels__btn { display: inline-flex; align-items: center; gap: 6px; }
.ds-btn--outline.ds-otp-channels__btn--whatsapp { color: #128C4B; border-color: rgba(18, 140, 75, .4); }
.ds-btn--outline.ds-otp-channels__btn--whatsapp:hover { background: #128C4B; border-color: #128C4B; color: #fff; }
/* As the main choice the button keeps the action surface: green ink on the amber
   gradient reads at 1.96:1, well under the 4.5:1 the rest of the platform holds to. */
.ds-btn--primary.ds-otp-channels__btn--whatsapp { color: var(--text-on-action); }

.ds-channel-pick { display: flex; gap: var(--sp-2); margin-top: 6px; }
.ds-channel-pick__opt {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer; font-weight: var(--fw-semi); color: var(--structure); font-size: var(--fs-14);
}
.ds-channel-pick__opt:has(input:checked) { border-color: var(--brand-gold); background: var(--tier-soft); color: var(--tier-ink); }
.ds-channel-pick__opt input { accent-color: var(--brand-gold); }

/* ---------------------------------------------------------------------------
 * Seller ratings, order tracking and delivery address (0.11)
 * ------------------------------------------------------------------------- */

.ds-rating { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-13); line-height: 1; white-space: nowrap; }
.ds-rating--empty { color: var(--text-muted); font-size: var(--fs-12); }
.ds-stars { display: inline-flex; letter-spacing: 1px; }
.ds-star { color: var(--border-strong); }
.ds-star.is-full { color: var(--brand-gold); }
.ds-stars--lg { font-size: 1.5rem; }
.ds-rating__num { font-weight: var(--fw-bold); color: var(--structure); }
.ds-rating__count { color: var(--text-muted); }

/* Interactive picker: row-reverse so :checked ~ label fills the stars to the left. */
.ds-starpick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 3px; font-size: 2rem; line-height: 1; margin: 4px 0 10px; }
.ds-starpick input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ds-starpick label { color: var(--border-strong); cursor: pointer; transition: color var(--dur-fast) ease; }
.ds-starpick label:hover, .ds-starpick label:hover ~ label, .ds-starpick input:checked ~ label { color: var(--brand-gold); }
.ds-starpick input:focus-visible ~ label { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.ds-rate textarea { width: 100%; margin: 4px 0 10px; }
.ds-rate__comment { font-style: italic; color: var(--text-secondary); }

.ds-timeline__label { display: block; }
.ds-timeline__at { display: block; font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; }
.ds-timeline__step.is-current .ds-timeline__label { font-weight: var(--fw-bold); color: var(--structure); }

.ds-address { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.ds-address__phone { margin-top: 2px; font-weight: var(--fw-semi); }
.ds-deliver-list { display: flex; flex-direction: column; gap: 12px; }
.ds-deliver-list__item { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ds-deliver-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.ds-deliver-list__who { margin-bottom: 3px; }
.ds-deliver-list__rider { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: var(--fs-14); }

.ds-footer__support { margin-top: 12px; font-size: var(--fs-13); }
.ds-footer__support a { color: var(--brand-gold); font-weight: var(--fw-semi); }

/* Sign out — visible everywhere a signed-in person can be */
.ds-header__icon-btn--signout { color: var(--danger); }
.ds-app__nav-link--signout { display: block; margin-top: 12px; color: var(--danger); font-weight: var(--fw-semi); }
.ds-btn--signout { color: var(--danger); border-color: var(--danger-border); }

/* Address broken into its parts: house / street / area / city */
.ds-address--rows { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; align-items: baseline; }
.ds-address__label { color: var(--text-muted); font-size: var(--fs-12); white-space: nowrap; }
.ds-address__value { font-weight: var(--fw-medium); }

.ds-nav__ops{color:var(--brand-gold);font-weight:var(--fw-semi)}

/* Seller documents, rendered inline for the reviewer. */
.ds-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-5); }
.ds-doc { margin: 0; border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-4); background: var(--surface, #fff); }
.ds-doc__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-3); font-size: var(--fs-13); }
.ds-doc__preview { background: var(--surface-2, #f6f4ef); border-radius: 8px; overflow: hidden; margin-bottom: var(--sp-3); min-height: 120px; display: flex; align-items: center; justify-content: center; }
.ds-doc__preview img { display: block; max-width: 100%; max-height: 440px; object-fit: contain; }
.ds-doc__preview iframe { display: block; width: 100%; height: 480px; border: 0; }

/* Clickable list rows (operations tables). */
.ds-table__row--link { cursor: pointer; }
.ds-table__row--link:hover > td, .ds-table__row--link:hover > th { background: var(--surface-2, #f6f4ef); }
.ds-table__row--link:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: -2px; }

/* Category picker on the product wizard. */
.ds-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; margin: 4px 0 8px; }

/* Profile: read-only review, code-gated editing. */
.ds-profile-lock { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.ds-profile-lock form { margin: 0; }
.ds-code-input { font-size: 24px; letter-spacing: 0.35em; text-align: center; max-width: 260px; }

/* Messaging. */
.ds-thread { display: flex; flex-direction: column; gap: var(--sp-3); }
.ds-msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; background: var(--surface-2, #f6f4ef); align-self: flex-start; }
.ds-msg--mine { align-self: flex-end; background: #fff6d6; border: 1px solid var(--brand-gold); }
.ds-msg--admin { background: #eef3ff; }
.ds-msg__meta { font-size: var(--fs-12); color: var(--text-muted); margin-bottom: 2px; }
.ds-msg__body { white-space: pre-wrap; word-break: break-word; }
.ds-ask-seller { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.ds-ask-seller__label { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 640px) { .ds-ask-seller { flex-direction: column; align-items: stretch; } }

/* Product ratings and reviews. */
.ds-rating-line { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: var(--fs-13); }
.ds-review { padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.ds-review:first-child { border-top: 0; padding-top: 0; }
.ds-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; font-size: var(--fs-13); }
.ds-review__body { margin: 0; white-space: pre-wrap; }
.ds-rate__row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.ds-rate__row > div { min-width: 200px; }
.ds-rate__label { display: block; font-weight: var(--fw-semi); margin-bottom: 2px; }

/* Brand 2026: display headings in the condensed face read best slightly larger. */
h1, h2, h3, .ds-screen__title { font-family: var(--font-display); font-weight: 700; }
.ds-btn--primary { font-weight: var(--fw-bold); }
a.ds-btn--primary:link, a.ds-btn--primary:visited { color: var(--text-on-action); }

/* ==========================================================================
   Brand 2026 — vibrancy layer (client direction: "make it look more
   attractive"). Same palette, used with more confidence: a deep-teal hero
   wearing the brand chevrons, amber-to-persimmon primary actions with a soft
   glow, amber deal badges, and brand shapes in the footer. Appended last so
   it outranks the earlier premium/de-red layers.
   ========================================================================== */

/* ---- hero: deep teal stage with brand chevrons ---- */
.ds-hero {
  background: radial-gradient(120% 90% at 85% 10%, #1a6a66 0%, #105151 38%, #024242 75%);
  color: var(--brand-cream);
}
.ds-hero::before {
  inset: 0 0 0 auto; width: 44%; max-width: 620px; opacity: .95;
  background: linear-gradient(135deg, #FBB034 0%, #F47920 42%, #105151 100%);
  clip-path: polygon(56% 0, 100% 0, 78% 50%, 100% 100%, 56% 100%, 34% 50%);
  filter: drop-shadow(-14px 0 30px rgba(0, 0, 0, .18));
}
.ds-hero::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 26%; max-width: 360px; pointer-events: none; z-index: 0;
  background: linear-gradient(135deg, rgba(251, 176, 52, .9), rgba(249, 157, 28, .35));
  clip-path: polygon(48% 0, 100% 0, 74% 50%, 100% 100%, 48% 100%, 22% 50%);
  opacity: .9;
}
.ds-hero__eyebrow-pill { border-color: rgba(251, 176, 52, .8); color: var(--brand-amber); background: rgba(255, 255, 255, .06); }
.ds-hero__title { color: #FFFFFF; text-shadow: 0 2px 18px rgba(0, 0, 0, .18); }
.ds-hero__title-navy { color: #FFFFFF; }
.ds-hero__title-gold { color: var(--brand-amber); }
.ds-hero__body { color: rgba(245, 249, 248, .86); }
.ds-hero .ds-btn--navy,
.ds-hero a.ds-btn--navy:link,
.ds-hero a.ds-btn--navy:visited {
  background: linear-gradient(135deg, #FBB034 0%, #F47920 100%);
  color: var(--brand-teal-dark);
  box-shadow: 0 10px 26px rgba(244, 121, 32, .35);
  border: 0;
}
.ds-hero .ds-btn--navy:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(244, 121, 32, .45); color: var(--brand-teal-dark); }
.ds-hero a.ds-btn--outline:link, .ds-hero a.ds-btn--outline:visited, .ds-hero .ds-btn--outline { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); color: #FFFFFF; }
.ds-hero .ds-btn--outline:hover { background: rgba(255, 255, 255, .16); border-color: #FFFFFF; color: #FFFFFF; }
.ds-trust-chip b { color: #FFFFFF; }
.ds-trust-chip small { color: rgba(245, 249, 248, .7); }
.ds-trust-chip__icon { background: rgba(255, 255, 255, .06); border-color: rgba(251, 176, 52, .8); color: var(--brand-amber); }
.ds-hero__arch { background: linear-gradient(180deg, #F4F8F7 0%, #E3EEEB 100%); box-shadow: inset 0 0 0 3px rgba(251, 176, 52, .8), 0 30px 60px rgba(0, 0, 0, .28); }
.ds-hero__podium { background: linear-gradient(180deg, #FBB034, #F99D1C); box-shadow: 0 14px 26px rgba(0, 0, 0, .3); }
.ds-hero__save { background: linear-gradient(135deg, #FBB034, #F47920); color: var(--brand-teal-dark); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 14px 28px rgba(0, 0, 0, .3); }
.ds-hero__save b { color: var(--brand-teal-dark); }
.ds-hero__stage-shot { border-color: rgba(255, 255, 255, .85); }
.ds-hero__stage-shot--3 { border-color: rgba(251, 176, 52, .9); }
.ds-hero__stage, .ds-hero__inner { position: relative; z-index: 1; }
@media (max-width: 1023px) { .ds-hero::before { width: 60%; opacity: .55; } .ds-hero::after { display: none; } }

/* ---- primary actions everywhere: amber → persimmon with a soft glow ---- */
.ds-btn--primary,
a.ds-btn--primary:link,
a.ds-btn--primary:visited {
  background: linear-gradient(135deg, #FBB034 0%, #F47920 100%);
  color: var(--brand-teal-dark);
  box-shadow: 0 6px 16px rgba(244, 121, 32, .25);
  border: 0;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.ds-btn--primary:hover, a.ds-btn--primary:hover { filter: saturate(1.08) brightness(1.03); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(244, 121, 32, .35); color: var(--brand-teal-dark); }
.ds-btn--primary:active { transform: none; }

/* ---- deal badges: amber, unmistakable ---- */
.ds-product .onsale, .ds-sale-flash { background: linear-gradient(135deg, #FBB034, #F99D1C); color: var(--brand-teal-dark); font-weight: 800; box-shadow: 0 4px 10px rgba(251, 176, 52, .35); }
.ds-product:hover { box-shadow: 0 18px 36px rgba(2, 66, 66, .14), 0 0 0 2px rgba(251, 176, 52, .55); }
.ds-product { border-radius: 16px; }

/* ---- section titles: bolder, with an amber accent ---- */
.ds-section-title h2, .ds-section-title .ds-section__heading { font-size: var(--fs-32); letter-spacing: .005em; }

/* ---- category bar and tiles ---- */
.ds-catbar { background: linear-gradient(135deg, #024242 0%, #105151 100%); box-shadow: 0 18px 36px rgba(2, 66, 66, .25), inset 0 -3px 0 rgba(251, 176, 52, .9); }
.ds-category-tile:hover { border-color: var(--brand-amber); box-shadow: 0 12px 28px rgba(2, 66, 66, .12), inset 0 -3px 0 var(--brand-amber); transform: translateY(-2px); }
.ds-category-tile { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }

/* ---- how it works: brand chevron whisper behind the steps ---- */
.ds-how { position: relative; overflow: hidden; background: linear-gradient(135deg, #F4F8F7 0%, #E9F0EF 100%); }
.ds-how::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30%; max-width: 420px; background: var(--brand-gradient); clip-path: polygon(45% 0, 100% 0, 68% 50%, 100% 100%, 45% 100%, 13% 50%); opacity: .12; pointer-events: none; }
.ds-how > * { position: relative; }
.ds-how__num { background: linear-gradient(135deg, #FBB034, #F47920); color: var(--brand-teal-dark); }

/* ---- footer: brand chevrons in the corner ---- */
.ds-footer { position: relative; overflow: hidden; }
.ds-footer::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28%; max-width: 380px; background: linear-gradient(135deg, #FBB034 0%, #F47920 45%, #105151 100%); clip-path: polygon(56% 0, 100% 0, 78% 50%, 100% 100%, 56% 100%, 34% 50%); opacity: .28; pointer-events: none; }
.ds-footer > * { position: relative; }

/* ---- links: persimmon on hover ---- */
a:hover { color: var(--action-ink); }

/* the "% off" pill on product and squad cards */
.ds-off-pill { background: linear-gradient(135deg, #FBB034, #F99D1C); color: var(--brand-teal-dark); font-weight: 800; box-shadow: 0 4px 10px rgba(251, 176, 52, .35); }

/* Products without a photo wear the brand lockup. */
.ds-tile--logo { background: #EAF1EF; padding: 0; display: block; }
.ds-tile--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ds-product-photo .ds-tile--logo { aspect-ratio: 1 / 1; }

/* ==========================================================================
   Design QA pass (0.18.0) — readability, consistency and phone layout.
   A full-screen audit at 1366px and 390px found muted copy under the AA
   contrast floor, 11px labels, a phone portal rail whose links were painted
   over by Sign out, category labels invisible on the teal band, and countdowns
   set in a monospace face. Everything below outranks the rules above it.
   ========================================================================== */

/* 1. One type family everywhere: countdowns and code entry use the UI face,
      whose digits are tabular, so timers do not jitter. */
.ds-countdown,
.ds-panel-live .ds-countdown,
.ds-ends-chip b,
.ds-otp input,
.ds-code-input { font-family: var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* 2. Muted copy on dark surfaces: brighter ink, and a 12px floor. */
.ds-footer__title { font-size: var(--fs-12); color: rgba(247, 243, 235, .82); }
.ds-footer__bottom, .ds-footer__copyright { color: rgba(247, 243, 235, .8); }
.ds-footer__promise span span { color: rgba(247, 243, 235, .8); }
.ds-footer__blurb { color: rgba(247, 243, 235, .84); }
.ds-hero__stat-label { color: rgba(247, 243, 235, .9); }
.ds-hero__eyebrow-pill { font-size: var(--fs-12); color: #FFFFFF; border-color: rgba(251, 176, 52, .9); }
.woocommerce .woocommerce-breadcrumb, .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a, .woocommerce-breadcrumb a { color: var(--text-secondary); font-size: var(--fs-13); }
.ds-how__heading em { color: var(--brand-amber); background: var(--brand-teal-dark); padding: .02em .32em .06em; border-radius: 8px; }

/* 3. Category band: cream labels on the teal gradient (they inherited teal-on-teal). */
.ds-catbar a.ds-catbar__item:link,
.ds-catbar a.ds-catbar__item:visited { color: rgba(247, 243, 235, .94); }
.ds-catbar a.ds-catbar__item:hover,
.ds-catbar .ds-catbar__item:hover .ds-catbar__label { color: var(--brand-amber); }

/* 4. Buttons: near-black teal ink on the amber → persimmon gradient (6:1), and
      dark ink on the WhatsApp green (white was 2:1). */
.ds-hero .ds-btn--navy,
.ds-hero a.ds-btn--navy:link,
.ds-hero a.ds-btn--navy:visited,
.ds-hero .ds-btn--navy:hover { color: var(--text-on-action); }
.ds-share-strip__wa,
.ds-share-strip__actions a.ds-share-strip__wa:link,
.ds-share-strip__actions a.ds-share-strip__wa:visited,
.ds-share-strip__actions a.ds-share-strip__wa:hover { color: #06301A; }

/* 5. Phone tab bar: 11px labels in secondary ink instead of 10.5px muted. */
@media (max-width: 1024px) {
  .ds-tabbar a, .ds-tabbar__fab small { font-size: 11px; }
  .ds-tabbar a:link, .ds-tabbar a:visited,
  a.ds-tabbar__fab:link, a.ds-tabbar__fab:visited { color: var(--text-secondary); }
  .ds-tabbar a.is-active, .ds-tabbar a.is-active:visited { color: var(--structure); }
}

/* 6. Brand lockup: the tagline never drops below 9px; on phones the lockup is
      the mark and the wordmark, as the guidelines allow at small sizes. */
.ds-brand__tagline { font-size: 10px; letter-spacing: .28em; }
@media (max-width: 860px) { .ds-brand__tagline { font-size: 9px; letter-spacing: .18em; } }
@media (max-width: 480px) { .ds-brand__tagline { display: none; } }

/* 7. Phone portal rail: one scrollable row of pills; Sign out sits at the end
      of the row instead of being painted over the links. */
@media (max-width: 860px) {
  .ds-app__nav {
    display: flex; align-items: center; gap: var(--sp-2);
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: 10px 12px; border-radius: 14px;
  }
  .ds-app__nav::-webkit-scrollbar { display: none; }
  .ds-app__nav .ds-eyebrow { flex: 0 0 auto; margin: 0 6px 0 2px; white-space: nowrap; }
  .ds-app__nav ul { display: flex; flex: 0 0 auto; gap: 6px; margin: 0; padding: 0; overflow: visible; }
  .ds-app__nav li { flex: 0 0 auto; }
  .ds-app__nav-link { white-space: nowrap; padding: 8px 13px; }
  .ds-app__nav-link--signout { flex: 0 0 auto; margin: 0 0 0 6px; }
}

/* 8. Second pass: sizes that earlier phone rules had pushed down to 10px, and
      the two button surfaces still carrying teal-dark ink on persimmon. */
.ds-btn--primary, a.ds-btn--primary:link, a.ds-btn--primary:visited,
.ds-btn--primary:hover, a.ds-btn--primary:hover,
.ds-hero__save, .ds-hero__save b { color: var(--text-on-action); }
.ds-hero__save small { font-size: 12px; }
.ds-trust-chip small { color: rgba(245, 249, 248, .92); }
.ds-avatar { width: 24px; height: 24px; font-size: 12px; }
.ds-ladder2__tag { font-size: 12px; }
.ds-squad-card__fire, .ds-squad-card__members, .ds-ends-chip { font-size: var(--fs-12); }
@media (max-width: 1024px) { .ds-tabbar a, .ds-tabbar__fab small { font-size: 12px; } }

/* 9. Row headers in portal tables read as content, not as column captions:
      the first cell of every row had inherited the uppercase, letter-spaced,
      muted heading style, so product names and order numbers shouted. */
.ds-table tbody th { font-size: var(--fs-13); letter-spacing: 0; text-transform: none; color: var(--text); font-weight: var(--fw-semi); white-space: normal; }

/* 10. Portal tables on phones: each row becomes a stacked block of label and
       value pairs instead of a strip that scrolls sideways inside its card. */
@media (max-width: 640px) {
  .ds-table__scroll { overflow: visible; }
  .ds-table__scroll .ds-table,
  .ds-table__scroll .ds-table tbody,
  .ds-table__scroll .ds-table tr { display: block; width: 100%; }
  .ds-table__scroll .ds-table thead { display: none; }
  .ds-table__scroll .ds-table tr { padding: 8px 0 10px; border-bottom: 1px solid var(--border); }
  .ds-table__scroll .ds-table tr:last-child { border-bottom: 0; }
  .ds-table__scroll .ds-table tbody tr:hover { background: transparent; }
  .ds-table__scroll .ds-table td {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
    padding: 5px var(--sp-4); border: 0; text-align: right; font-size: var(--fs-13); white-space: normal;
  }
  .ds-table__scroll .ds-table td::before {
    content: attr(data-label); flex: 0 0 auto; max-width: 44%; text-align: left;
    font-size: var(--fs-12); letter-spacing: var(--ls-caps); text-transform: uppercase;
    font-weight: var(--fw-semi); color: var(--text-muted);
  }
  .ds-table__scroll .ds-table td[data-label=""]::before { display: none; }
  .ds-table__scroll .ds-table tbody th { display: block; padding: 4px var(--sp-4) 6px; border: 0; font-size: var(--fs-14); }
  .ds-table__scroll .ds-table td:has(form),
  .ds-table__scroll .ds-table td:has(.ds-btn) { display: block; text-align: left; padding-top: 8px; }
  .ds-table__scroll .ds-table td:has(form)::before,
  .ds-table__scroll .ds-table td:has(.ds-btn)::before { display: none; }
  .ds-table__scroll .ds-table td .ds-row { justify-content: flex-start; }
  .ds-table__scroll .ds-table td .ds-cell-2line { text-align: right; }
  .ds-table__scroll .ds-table td.ds-num { text-align: right; }
}

/* 11. Small fit-and-finish: the ask-the-seller button keeps its label on one
       line, and inline notices keep their sentences together. */
.ds-ask-seller .ds-btn { white-space: nowrap; flex-shrink: 0; }

/* 12. Third pass from the verification crawl: the last three colour misses,
       and code-styled values (bank account numbers) set in the UI face. */
.ds-hiw .ds-hiw__num, .ds-hiw__row .ds-hiw__num, .ds-hiw__num { color: var(--action-ink); }
.ds-btn--outline.ds-otp-channels__btn--whatsapp { color: #0E7A40; border-color: rgba(14, 122, 64, .45); }
.ds-btn--outline.ds-otp-channels__btn--whatsapp:hover { background: #0E7A40; border-color: #0E7A40; color: #FFFFFF; }
.ds-shell code, .ds-shell kbd, .ds-shell samp { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: 1em; }
.ds-notice { display: block; }
.ds-notice > .ds-btn { margin-left: 8px; vertical-align: middle; }
@media (max-width: 640px) {
  .ds-table__scroll .ds-table td, .ds-table__scroll .ds-table tbody th { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Info pages on the brand palette (0.18.4). The how-it-works hero and the
   closing band still faded into the old navy. Both now sit on the deep-teal
   ground behind the amber → persimmon → teal chevron; the four steps carry
   amber numerals on teal-dark tiles; the rules sit in a light-teal container;
   FAQ markers use persimmon, the accent the guidelines reserve for icons.
   ========================================================================== */
.ds-info-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 150% at 12% 0%, #105151 0%, #024242 58%, #02393A 100%);
}
.ds-info-hero::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34%; max-width: 480px; pointer-events: none;
  background: linear-gradient(135deg, #FBB034 0%, #F47920 42%, #105151 100%);
  clip-path: polygon(56% 0, 100% 0, 78% 50%, 100% 100%, 56% 100%, 34% 50%);
  opacity: .88; filter: drop-shadow(-14px 0 30px rgba(0, 0, 0, .18));
}
.ds-info-hero::after {
  content: ""; position: absolute; left: -10%; bottom: -60%; width: 46%; height: 160%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(251, 176, 52, .22), rgba(251, 176, 52, 0));
}
.ds-info-hero > * { position: relative; z-index: 1; }
.ds-info-hero__eyebrow { color: var(--brand-amber); }
.ds-info-hero__title { color: #FFFFFF; text-shadow: 0 2px 18px rgba(0, 0, 0, .18); }
.ds-info-hero__sub { color: rgba(245, 249, 248, .88); }
@media (max-width: 860px) {
  .ds-info-hero::before { width: 46%; max-width: none; opacity: .36; }
  .ds-info-hero::after { display: none; }
}

/* Steps: amber numerals on teal-dark tiles, the logo's own pairing. */
.ds-hiw .ds-hiw__num, .ds-hiw__row .ds-hiw__num, .ds-hiw__num {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 66px; height: 66px; min-width: 66px; border-radius: 18px; text-align: center;
  background: var(--brand-teal-dark); color: var(--brand-amber); font-size: 30px;
  box-shadow: 0 10px 24px rgba(2, 66, 66, .18);
}
.ds-hiw__copy h2 { color: var(--brand-teal-dark); }
@media (max-width: 640px) {
  .ds-hiw .ds-hiw__num, .ds-hiw__row .ds-hiw__num, .ds-hiw__num { width: 52px; height: 52px; min-width: 52px; font-size: 24px; border-radius: 14px; }
}

/* Rules: a light-teal container with amber-topped white cards. */
.ds-rules { background: var(--structure-soft); border-radius: 24px; padding: var(--sp-8) var(--sp-6); }
.ds-rules__card { border-top: 3px solid var(--brand-amber); box-shadow: 0 10px 26px rgba(2, 66, 66, .08); }
.ds-rules__card h3 { color: var(--brand-teal-dark); }
@media (max-width: 640px) { .ds-rules { padding: var(--sp-6) var(--sp-4); border-radius: 18px; } }

/* FAQ: persimmon markers, amber edge on the open item. */
.ds-faq__item summary::after { color: var(--brand-persimmon); font-weight: var(--fw-semi); }
.ds-faq__item[open] { border-color: var(--brand-amber); box-shadow: 0 8px 22px rgba(2, 66, 66, .08); }
.ds-faq__item[open] summary { border-bottom-color: var(--tier-border); }

/* Closing band: deep teal with the chevron, like the footer. */
.ds-cta-band { position: relative; overflow: hidden; background: linear-gradient(135deg, #024242 0%, #105151 100%); }
.ds-cta-band::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30%; max-width: 420px; pointer-events: none;
  background: linear-gradient(135deg, #FBB034 0%, #F47920 45%, #105151 100%);
  clip-path: polygon(56% 0, 100% 0, 78% 50%, 100% 100%, 56% 100%, 34% 50%);
  opacity: .42;
}
.ds-cta-band__inner { position: relative; z-index: 1; }
.ds-cta-band__sub { color: rgba(245, 249, 248, .84); }
.ds-btn--outline-light { border-color: rgba(251, 176, 52, .75); color: #FFFFFF; }
.ds-btn--outline-light:hover { background: rgba(251, 176, 52, .14); border-color: var(--brand-amber); color: #FFFFFF; }

/* ==========================================================================
   Home hero slider (0.18.6): three banners on the brand palette.
   The track slides sideways; each slide keeps the hero layout and carries its
   own ground — deep teal, amber, or cool white — with the brand chevron cut
   in the complementary colours. Controls take their ink from the active
   slide's tone via [data-tone] on the slider.
   ========================================================================== */
.ds-hero-slider { position: relative; overflow: hidden; }
.ds-slider__track { display: flex; align-items: stretch; transition: transform .65s var(--ease); will-change: transform; }
.ds-slider__slide { flex: 0 0 100%; min-width: 100%; position: relative; overflow: hidden; }
.ds-slider__slide .ds-hero__inner { padding-bottom: calc(var(--sp-12) + 22px); }
.ds-slider__slide .ds-hero__title { margin-bottom: var(--sp-4); }
.ds-hero__stage--art { display: none; align-items: center; justify-content: center; min-height: 420px; }
.ds-hero__art { width: 100%; max-width: 520px; height: auto; display: block; filter: drop-shadow(0 26px 40px rgba(2, 66, 66, .28)); }
@media (min-width: 1024px) { .ds-hero__stage--art { display: flex; } }

/* Arrows and dots. */
.ds-slider__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 4;
  width: 46px; height: 46px; border-radius: 999px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(2, 66, 66, .32); color: #FFFFFF;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ds-slider__arrow:hover { background: rgba(251, 176, 52, .95); border-color: #FBB034; color: #024242; transform: translateY(-50%) scale(1.04); translate: 0; }
.ds-slider__arrow:focus-visible { outline: none; box-shadow: var(--e-focus); }
.ds-slider__arrow--prev { left: 18px; }
.ds-slider__arrow--next { right: 18px; }
.ds-slider__dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 4; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.ds-slider__dot {
  width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; pointer-events: auto;
  background: rgba(255, 255, 255, .5); transition: width .25s var(--ease), background .25s var(--ease);
}
.ds-slider__dot:hover { background: rgba(255, 255, 255, .85); }
.ds-slider__dot[aria-current="true"] { width: 28px; background: #FBB034; }
.ds-slider__dot:focus-visible { outline: none; box-shadow: var(--e-focus); }
.ds-hero-slider[data-tone="amber"] .ds-slider__arrow,
.ds-hero-slider[data-tone="light"] .ds-slider__arrow { border-color: rgba(2, 66, 66, .35); background: rgba(255, 255, 255, .55); color: #024242; }
.ds-hero-slider[data-tone="amber"] .ds-slider__arrow:hover,
.ds-hero-slider[data-tone="light"] .ds-slider__arrow:hover { background: #024242; border-color: #024242; color: #FBB034; }
.ds-hero-slider[data-tone="amber"] .ds-slider__dot,
.ds-hero-slider[data-tone="light"] .ds-slider__dot { background: rgba(2, 66, 66, .3); }
.ds-hero-slider[data-tone="amber"] .ds-slider__dot[aria-current="true"] { background: #024242; }
.ds-hero-slider[data-tone="light"] .ds-slider__dot[aria-current="true"] { background: #F47920; }
@media (max-width: 1023px) { .ds-slider__arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .ds-slider__track { transition: none; } }

/* Slide 2 — amber ground, teal chevrons, teal-dark ink. */
.ds-hero--amber { background: linear-gradient(135deg, #FBB034 0%, #F99D1C 55%, #F47920 100%); color: #024242; }
.ds-hero--amber::before {
  inset: 0 0 0 auto; width: 44%; max-width: 620px; opacity: .96;
  background: linear-gradient(135deg, #105151 0%, #024242 100%);
  clip-path: polygon(56% 0, 100% 0, 78% 50%, 100% 100%, 56% 100%, 34% 50%);
  filter: drop-shadow(-14px 0 30px rgba(2, 66, 66, .28));
}
.ds-hero--amber::after {
  background: linear-gradient(135deg, rgba(2, 66, 66, .55), rgba(16, 81, 81, .2));
  clip-path: polygon(48% 0, 100% 0, 74% 50%, 100% 100%, 48% 100%, 22% 50%); opacity: .9;
}
.ds-hero--amber .ds-hero__eyebrow-pill { color: #024242; border-color: rgba(2, 66, 66, .55); background: rgba(255, 255, 255, .22); }
.ds-hero--amber .ds-hero__title { color: #024242; text-shadow: none; }
.ds-hero--amber .ds-hero__title-navy { color: #024242; }
.ds-hero--amber .ds-hero__title-gold { display: inline-block; color: #FBB034; background: #024242; padding: .02em .28em .08em; border-radius: 14px; }
.ds-hero--amber .ds-hero__body { color: rgba(2, 66, 66, .86); }
.ds-hero--amber .ds-btn--navy, .ds-hero--amber a.ds-btn--navy:link, .ds-hero--amber a.ds-btn--navy:visited, .ds-hero--amber .ds-btn--navy:hover {
  background: #024242; color: #FFFFFF; box-shadow: 0 10px 26px rgba(2, 66, 66, .3);
}
.ds-hero--amber .ds-btn--navy:hover { background: #105151; }
.ds-hero--amber a.ds-btn--outline:link, .ds-hero--amber a.ds-btn--outline:visited, .ds-hero--amber .ds-btn--outline { background: rgba(255, 255, 255, .28); border-color: rgba(2, 66, 66, .55); color: #024242; }
.ds-hero--amber .ds-btn--outline:hover { background: rgba(255, 255, 255, .5); border-color: #024242; color: #024242; }
.ds-hero--amber .ds-trust-chip b { color: #024242; }
.ds-hero--amber .ds-trust-chip small { color: rgba(2, 66, 66, .8); }
.ds-hero--amber .ds-trust-chip__icon { background: rgba(255, 255, 255, .28); border-color: rgba(2, 66, 66, .55); color: #024242; }

/* Slide 3 — cool-white ground, the amber → teal chevron, teal-dark ink. */
.ds-hero--light { background: linear-gradient(135deg, #FFFFFF 0%, #F4F8F7 48%, #E4F0EE 100%); color: var(--text); }
.ds-hero--light::before {
  inset: 0 0 0 auto; width: 44%; max-width: 620px; opacity: .95;
  background: linear-gradient(135deg, #FBB034 0%, #F47920 42%, #105151 100%);
  clip-path: polygon(56% 0, 100% 0, 78% 50%, 100% 100%, 56% 100%, 34% 50%);
  filter: drop-shadow(-14px 0 30px rgba(2, 66, 66, .16));
}
.ds-hero--light::after {
  background: linear-gradient(135deg, rgba(251, 176, 52, .9), rgba(249, 157, 28, .35));
  clip-path: polygon(48% 0, 100% 0, 74% 50%, 100% 100%, 48% 100%, 22% 50%); opacity: .9;
}
.ds-hero--light .ds-hero__eyebrow-pill { color: var(--action-ink); border-color: rgba(244, 121, 32, .7); background: rgba(255, 255, 255, .7); }
.ds-hero--light .ds-hero__title { color: var(--brand-teal-dark); text-shadow: none; }
.ds-hero--light .ds-hero__title-navy { color: var(--brand-teal-dark); }
.ds-hero--light .ds-hero__title-gold { color: var(--action-ink); }
.ds-hero--light .ds-hero__body { color: var(--text-secondary); }
.ds-hero--light a.ds-btn--outline:link, .ds-hero--light a.ds-btn--outline:visited, .ds-hero--light .ds-btn--outline { background: #FFFFFF; border-color: rgba(2, 66, 66, .35); color: var(--brand-teal-dark); }
.ds-hero--light .ds-btn--outline:hover { border-color: var(--brand-teal-dark); background: #FFFFFF; color: var(--brand-teal-dark); }
.ds-hero--light .ds-trust-chip b { color: var(--brand-teal-dark); }
.ds-hero--light .ds-trust-chip small { color: var(--text-muted); }
.ds-hero--light .ds-trust-chip__icon { background: #FFFFFF; border-color: rgba(244, 121, 32, .7); color: var(--action-ink); }

/* Phones: keep the chevrons out from under the copy. */
@media (max-width: 1023px) {
  .ds-hero--amber::before, .ds-hero--light::before { width: 42%; right: -20%; opacity: .45; }
  .ds-hero--amber::after, .ds-hero--light::after { display: none; }
}

/* Slider ink, second pass: the amber banner keeps its persimmon only past the
   copy column, and body/chip text uses the near-black teal so it clears AA
   even over the warmest stop; the light banner's eyebrow is teal-dark. */
.ds-hero--amber { background: linear-gradient(135deg, #FBB034 0%, #F99D1C 62%, #F47920 100%); }
.ds-hero--amber .ds-hero__body { color: var(--text-on-action); }
.ds-hero--amber .ds-trust-chip b { color: var(--text-on-action); }
.ds-hero--amber .ds-trust-chip small { color: rgba(15, 31, 30, .86); }
.ds-hero--light .ds-hero__eyebrow-pill { color: var(--brand-teal-dark); }

/* ==========================================================================
   0.19.0 — "Buy together, save together" lockup spacing, and prices set in
   the UI face (Nunito Sans bold, lining tabular figures) instead of the
   condensed display face, which read thin at money sizes.
   ========================================================================== */
.ds-brand__tagline { font-size: 9.5px; letter-spacing: .12em; }
@media (max-width: 860px) { .ds-brand__tagline { font-size: 9px; letter-spacing: .08em; } }
.ds-footer__tagline { letter-spacing: .16em; }

.ds-money, .ds-panel-price__now, .ds-squad-card__price .ds-money, .ds-totals__row .ds-money,
.ds-stop .ds-money, .ds-money--lg, .ds-mobile-cta__price b, .ds-product__price .ds-money {
  font-family: var(--font-ui); font-weight: var(--fw-bold); letter-spacing: -.012em;
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1;
}
.ds-panel-price__now { font-size: 38px; letter-spacing: -.02em; }
.ds-money--was { font-weight: var(--fw-regular); letter-spacing: 0; }
.ds-money--free { font-family: var(--font-ui); letter-spacing: .06em; }
.ds-otp-channels__btns:has(.ds-btn--primary) { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-inline: auto; }
.ds-otp-channels__btns:has(.ds-btn--primary) form { display: block; }
.ds-otp-channels__btn.ds-btn--primary { width: 100%; justify-content: center; }

/* ==========================================================================
   0.20.0 — the cart-and-people logo. The header and footer carry the full
   lockup artwork (mark, wordmark and tagline) as one image, so the identity
   is exact on every device and the tagline is never dropped on phones.
   ========================================================================== */
.ds-brand { gap: 0; }
.ds-brand img.ds-brand__lockup, .ds-brand__lockup { display: block; height: 70px; max-height: none; width: auto; max-width: none; }
.ds-footer__lockup { margin-bottom: 14px; }
.ds-footer__lockup img.ds-footer__logo { display: block; height: 68px; width: auto; max-width: none; }
@media (max-width: 860px) { .ds-brand img.ds-brand__lockup, .ds-brand__lockup { height: 50px; } }
@media (max-width: 480px) { .ds-brand img.ds-brand__lockup, .ds-brand__lockup { height: 46px; } .ds-footer__lockup img.ds-footer__logo { height: 58px; } }

/* ---------------------------------------------------- live delivery (0.22) */
.ds-livedel .ds-card__header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ds-livedel__map { height:260px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); margin-bottom:12px; }
.ds-livedel__rider { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; background:var(--surface-sunken); border-radius:var(--r-md); margin-bottom:12px; }
.ds-livedel__timeline { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ds-livedel__step { display:flex; align-items:flex-start; gap:10px; color:var(--text-muted); }
.ds-livedel__step small { display:block; font-size:var(--fs-12, .8rem); color:var(--text-muted); }
.ds-livedel__step.is-done { color:var(--text); }
.ds-livedel__step.is-current { color:var(--text); font-weight:var(--fw-bold); }
.ds-livedel__dot { flex:0 0 14px; width:14px; height:14px; border-radius:50%; margin-top:4px; background:var(--surface-sunken); border:2px solid var(--border); }
.ds-livedel__step.is-done .ds-livedel__dot { background:var(--success); border-color:var(--success); }
.ds-livedel__step.is-current .ds-livedel__dot { background:var(--persimmon, #F47920); border-color:var(--amber, #FBB034); }
.ds-livedel__pin { width:40px; height:40px; border-radius:50%; background:#F47920; border:3px solid #fff; box-shadow:0 2px 8px rgba(2,66,66,.35); display:flex; align-items:center; justify-content:center; font-size:18px; }
.ds-livedel__pin--home { width:34px; height:34px; background:#024242; font-size:15px; }
.ds-livedel__pin--shop { width:34px; height:34px; background:#105151; font-size:15px; }
.ds-geo-status { font-size:var(--fs-13, .85rem); color:var(--text-muted); margin-top:6px; }

/* ------------------------------------------------- account security (0.22) */
.ds-security-decide { min-width: 200px; }
.ds-security-decide .ds-input--sm { width: 100%; padding: 6px 10px; font-size: var(--fs-13, .85rem); }
.ds-security-decide .ds-cluster { display: flex; flex-wrap: wrap; gap: 6px; }

/* ----------------------------------------------- pagination on phones (0.22.4) */
.woocommerce-pagination { max-width: 100%; overflow-x: auto; }
.woocommerce-pagination .page-numbers { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0; padding: 0; }