/*!
 * 1814 Design System 1.0.0 — one visual language for 1814services.com, kids.1814services.com and the Workplace.
 * Owner decision (11 Mehr 1405): navy ink, brass, cream; ultra-luxury but quiet; mobile-first; Persian RTL.
 *
 * How to use: a theme declares add_theme_support( 'i1814-ds', array( 'brand' => 'services'|'kids'|'workplace' ) )
 * (or enqueues the handle «i1814-ds»). <body> gets .ds-brand-<brand>; everything is opt-in through ds-* classes,
 * so nothing on a site changes until its theme uses them. Tokens are also exported as assets/ds-tokens.json (app).
 *
 * Rules that make it «1814» (keep them when adding components):
 *  1. Brass is a signature, not a paint: focus ring, the price that matters, the club tier, one hairline. Never large fills.
 *  2. Readable first: body ≥ 16px on phones, line-height 1.85 for Persian, text contrast ≥ 4.5:1 (checked), touch targets ≥ 44px.
 *  3. Hierarchy by weight and space, not by boxes: few borders, shadows only on things that float (sheet, menu, toast).
 *  4. Logical properties only (inline-start/end) — RTL and LTR both work; Latin brand names are isolated LTR.
 *  5. Motion answers the visitor (open, add, confirm) and stops when «reduce motion» is on.
 */

/* ---------- 1. tokens ---------- */
:root{
  /* palette (WCAG contrast on --ds-ground in brackets) */
  --ds-navy-900:#141C2C; --ds-navy-800:#1B2638 /*14.4*/; --ds-navy-700:#2A3550; --ds-navy-600:#3A4660 /*8.9*/; --ds-navy-100:#E6E9EF;
  --ds-brass-700:#6B5124 /*7.0*/; --ds-brass-600:#7A5E2C /*5.7*/; --ds-brass-400:#B39152 /*decorative; 5.1 on navy*/; --ds-brass-200:#D9C29A; --ds-brass-100:#F1E8D6;
  --ds-cream-50:#FBF8F3; --ds-cream-100:#F4EFE6; --ds-cream-200:#E7E0D3; --ds-cream-300:#CFC6B6;
  --ds-stone-600:#5F5A52 /*6.5*/; --ds-stone-500:#8A8478 /*3.5: placeholders, borders of inputs, never body text*/;
  --ds-white:#FFFFFF;
  --ds-success:#2E5E4E; --ds-success-bg:#E4EEE8; --ds-warning:#8A5A12; --ds-warning-bg:#F8EEDB;
  --ds-danger:#8E3A2C; --ds-danger-bg:#F6E5E1; --ds-info:#2D4E73; --ds-info-bg:#E3EAF2;

  /* roles */
  --ds-ground:var(--ds-cream-50); --ds-surface:var(--ds-white); --ds-surface-2:var(--ds-cream-100);
  --ds-ink:var(--ds-navy-800); --ds-ink-2:var(--ds-navy-600); --ds-muted:var(--ds-stone-600); --ds-faint:var(--ds-stone-500);
  --ds-placeholder:#736D64 /*5.1 on white*/; --ds-line:var(--ds-cream-200); --ds-line-strong:var(--ds-cream-300); --ds-field-line:var(--ds-stone-500);
  --ds-accent:var(--ds-brass-600); --ds-accent-strong:var(--ds-brass-700); --ds-gilt:var(--ds-brass-400);
  --ds-on-ink:#F3EEE4; --ds-focus:var(--ds-brass-600);

  /* type */
  --ds-font-text:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  --ds-font-display:"Vazirmatn",Tahoma,sans-serif;
  --ds-font-latin:"Cormorant Garamond","Times New Roman",serif;
  --ds-fs-xs:.8125rem; --ds-fs-sm:.875rem; --ds-fs-md:1rem; --ds-fs-lg:1.125rem;
  --ds-fs-h4:clamp(1.125rem,1rem + .4vw,1.25rem); --ds-fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --ds-fs-h2:clamp(1.5rem,1.25rem + 1.1vw,2.125rem); --ds-fs-h1:clamp(1.875rem,1.4rem + 2vw,2.875rem);
  --ds-fs-hero:clamp(2.125rem,1.4rem + 3.4vw,4rem);
  --ds-lh-text:1.85; --ds-lh-tight:1.3; --ds-w-regular:400; --ds-w-medium:500; --ds-w-strong:600; --ds-w-display:700;

  /* space (4px grid), size, shape, depth, motion */
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px; --ds-5:20px; --ds-6:24px; --ds-8:32px; --ds-10:40px; --ds-12:48px; --ds-16:64px; --ds-20:80px;
  --ds-gutter:16px; --ds-container:1240px; --ds-measure:38em; --ds-tap:48px; --ds-header-h:64px;
  --ds-radius-control:10px; --ds-radius-card:16px; --ds-radius-sheet:20px; --ds-radius-pill:999px;
  --ds-shadow-float:0 18px 44px rgba(20,28,44,.14); --ds-shadow-raise:0 6px 18px rgba(20,28,44,.08);
  --ds-ease:cubic-bezier(.2,.7,.2,1); --ds-dur:180ms; --ds-dur-slow:320ms;
}
@media (min-width:768px){ :root{ --ds-gutter:24px; --ds-header-h:76px; } }
@media (min-width:1280px){ :root{ --ds-gutter:40px; } }

/* brand voices — same system, different tone */
.ds-brand-services{ --ds-ground:var(--ds-white); --ds-surface-2:var(--ds-cream-50); }
.ds-brand-kids{
  --ds-font-display:"Vazirmatn",Tahoma,sans-serif; --ds-w-display:600; --ds-lh-tight:1.4; /* 1.1.1: Vazirmatn for Persian headings too (Markazi read as a default font) */
  --ds-radius-control:2px; --ds-radius-card:4px; --ds-radius-sheet:6px;
}
.ds-brand-workplace{ /* colours and fonts only; the Workplace keeps its own layout («میز تمرکز») */
  --ds-ground:#F6F4EF; --ds-radius-control:8px; --ds-radius-card:12px;
}

/* ---------- 2. base (only inside .ds-root or a brand body, so legacy pages are untouched) ---------- */
.ds-root,body[class*="ds-brand-"]{
  background:var(--ds-ground); color:var(--ds-ink);
  font:var(--ds-w-regular) var(--ds-fs-md)/var(--ds-lh-text) var(--ds-font-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-kerning:normal;
}
.ds-root *, .ds-root *::before, .ds-root *::after{ box-sizing:border-box; }
.ds-root :focus-visible, body[class*="ds-brand-"] :focus-visible{ outline:2px solid var(--ds-focus); outline-offset:3px; border-radius:2px; }
.ds-root img{ max-width:100%; height:auto; }

.ds-container{ width:100%; max-width:var(--ds-container); margin-inline:auto; padding-inline:var(--ds-gutter); }
.ds-section{ padding-block:var(--ds-12); } @media (min-width:1024px){ .ds-section{ padding-block:var(--ds-20); } }
.ds-section--alt{ background:var(--ds-surface-2); }
.ds-stack>*+*{ margin-block-start:var(--ds-4); }
.ds-cluster{ display:flex; flex-wrap:wrap; gap:var(--ds-3); align-items:center; }
.ds-grid{ display:grid; gap:var(--ds-4); grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--ds-grid-min,260px)),1fr)); }
@media (min-width:768px){ .ds-grid{ gap:var(--ds-6); } }
.ds-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ds-skip{ position:absolute; inset-inline-start:12px; top:-80px; z-index:1000; background:var(--ds-ink); color:var(--ds-on-ink); padding:12px 16px; border-radius:var(--ds-radius-control); }
.ds-skip:focus{ top:12px; }
.ds-mobile-only{} .ds-desktop-only{ display:none!important; }
@media (min-width:1024px){ .ds-mobile-only{ display:none!important; } .ds-desktop-only{ display:revert!important; } }

/* ---------- 3. type ---------- */
.ds-hero-title,.ds-h1,.ds-h2,.ds-h3,.ds-h4{ font-family:var(--ds-font-display); font-weight:var(--ds-w-display); line-height:var(--ds-lh-tight); color:var(--ds-ink); margin:0 0 .45em; letter-spacing:0; text-wrap:balance; }
.ds-hero-title{ font-size:var(--ds-fs-hero); line-height:1.15; }
.ds-h1{ font-size:var(--ds-fs-h1); } .ds-h2{ font-size:var(--ds-fs-h2); } .ds-h3{ font-size:var(--ds-fs-h3); } .ds-h4{ font-size:var(--ds-fs-h4); font-family:var(--ds-font-text); font-weight:var(--ds-w-strong); }
.ds-lead{ font-size:var(--ds-fs-lg); color:var(--ds-muted); max-width:var(--ds-measure); }
.ds-prose{ max-width:var(--ds-measure); } .ds-prose p{ margin:0 0 1em; }
.ds-small{ font-size:var(--ds-fs-sm); } .ds-muted{ color:var(--ds-muted); }
.ds-latin{ font-family:var(--ds-font-latin); direction:ltr; unicode-bidi:isolate; letter-spacing:.08em; }
.ds-num{ font-variant-numeric:tabular-nums; unicode-bidi:isolate; white-space:nowrap; }
.ds-nowrap{ white-space:nowrap; }
.ds-rule{ border:0; height:1px; background:var(--ds-line); margin-block:var(--ds-8); }
.ds-rule--gilt{ width:56px; height:2px; background:var(--ds-gilt); margin-inline:0; }
.ds-link{ color:var(--ds-ink); text-decoration:underline; text-decoration-color:var(--ds-brass-200); text-underline-offset:.35em; text-decoration-thickness:1px; }
.ds-link:hover{ color:var(--ds-accent-strong); text-decoration-color:currentColor; }

/* ---------- 4. buttons ---------- */
.ds-btn{
  --_bg:var(--ds-ink); --_fg:var(--ds-on-ink); --_bd:var(--ds-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ds-2);
  min-height:var(--ds-tap); padding:0 var(--ds-6); border:1px solid var(--_bd); border-radius:var(--ds-radius-control);
  background:var(--_bg); color:var(--_fg); font:var(--ds-w-strong) var(--ds-fs-md)/1.2 var(--ds-font-text);
  text-decoration:none; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--ds-dur) var(--ds-ease),color var(--ds-dur) var(--ds-ease),border-color var(--ds-dur) var(--ds-ease),transform var(--ds-dur) var(--ds-ease);
}
.ds-btn:hover{ --_bg:var(--ds-navy-700); --_bd:var(--ds-navy-700); }
.ds-btn:active{ transform:translateY(1px); }
.ds-btn--secondary{ --_bg:transparent; --_fg:var(--ds-ink); --_bd:var(--ds-ink); }
.ds-btn--secondary:hover{ --_bg:var(--ds-ink); --_fg:var(--ds-on-ink); }
.ds-btn--quiet{ --_bg:transparent; --_fg:var(--ds-ink); --_bd:transparent; padding-inline:var(--ds-3); }
.ds-btn--quiet:hover{ --_bg:var(--ds-surface-2); --_bd:transparent; }
.ds-btn--on-ink{ --_bg:var(--ds-on-ink); --_fg:var(--ds-ink); --_bd:var(--ds-on-ink); }
.ds-btn--on-ink:hover{ --_bg:var(--ds-white); --_bd:var(--ds-white); }
.ds-btn--block{ width:100%; } .ds-btn--lg{ min-height:56px; padding-inline:var(--ds-8); font-size:var(--ds-fs-lg); }
.ds-btn--sm{ min-height:40px; padding-inline:var(--ds-4); font-size:var(--ds-fs-sm); }
.ds-btn[disabled],.ds-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; }
.ds-btn[aria-busy="true"]{ position:relative; color:transparent!important; pointer-events:none; }
.ds-btn[aria-busy="true"]::after{ content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid var(--_fg); border-inline-end-color:transparent; animation:ds-spin .7s linear infinite; }
.ds-icon-btn{ display:inline-grid; place-items:center; width:44px; height:44px; border:0; border-radius:var(--ds-radius-pill); background:none; color:var(--ds-ink); cursor:pointer; position:relative; }
.ds-icon-btn:hover{ background:var(--ds-surface-2); }
.ds-icon{ width:22px; height:22px; flex:none; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ds-count{ position:absolute; top:4px; inset-inline-end:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--ds-ink); color:var(--ds-on-ink); font:600 11px/18px var(--ds-font-text); text-align:center; }

/* ---------- 5. forms ---------- */
.ds-field{ display:grid; gap:var(--ds-2); margin-block-end:var(--ds-5); }
.ds-label{ font-weight:var(--ds-w-strong); font-size:var(--ds-fs-sm); color:var(--ds-ink); }
.ds-label .ds-opt{ font-weight:var(--ds-w-regular); color:var(--ds-muted); }
.ds-input,.ds-select,.ds-textarea{
  width:100%; min-height:var(--ds-tap); padding:var(--ds-3) var(--ds-4); border:1px solid var(--ds-field-line); border-radius:var(--ds-radius-control);
  background:var(--ds-surface); color:var(--ds-ink); font:var(--ds-w-regular) var(--ds-fs-md)/1.5 var(--ds-font-text);
  transition:border-color var(--ds-dur) var(--ds-ease),box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-input::placeholder,.ds-textarea::placeholder{ color:var(--ds-placeholder); }
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{ outline:none; border-color:var(--ds-ink); box-shadow:0 0 0 3px var(--ds-brass-100); }
.ds-input[dir="ltr"],.ds-input--ltr{ direction:ltr; text-align:end; }
.ds-textarea{ min-height:120px; resize:vertical; }
.ds-select{ appearance:none; padding-inline-end:var(--ds-10); 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.5l5 5 5-5' fill='none' stroke='%231B2638' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:12px 8px; background-repeat:no-repeat; background-position:left 16px center; }
[dir="ltr"] .ds-select{ background-position:right 16px center; }
.ds-help{ font-size:var(--ds-fs-sm); color:var(--ds-muted); }
.ds-field.is-invalid .ds-input,.ds-field.is-invalid .ds-select,.ds-field.is-invalid .ds-textarea,.ds-input[aria-invalid="true"]{ border-color:var(--ds-danger); }
.ds-error{ font-size:var(--ds-fs-sm); color:var(--ds-danger); }
.ds-check{ display:flex; gap:var(--ds-3); align-items:flex-start; min-height:var(--ds-tap); padding-block:var(--ds-2); cursor:pointer; }
.ds-check input{ width:20px; height:20px; margin:3px 0 0; accent-color:var(--ds-ink); flex:none; }
.ds-otp{ display:flex; gap:var(--ds-2); direction:ltr; justify-content:center; }
.ds-otp input{ width:48px; height:56px; text-align:center; font:600 1.375rem/1 var(--ds-font-text); border:1px solid var(--ds-field-line); border-radius:var(--ds-radius-control); background:var(--ds-surface); }
.ds-otp input:focus{ outline:none; border-color:var(--ds-ink); box-shadow:0 0 0 3px var(--ds-brass-100); }

/* choice chips (size, colour, filters, time slots) */
.ds-chips{ display:flex; flex-wrap:wrap; gap:var(--ds-2); }
.ds-chip{ display:inline-flex; align-items:center; gap:var(--ds-2); min-height:44px; padding:0 var(--ds-4); border:1px solid var(--ds-line-strong); border-radius:var(--ds-radius-pill); background:var(--ds-surface); color:var(--ds-ink); font:var(--ds-w-medium) var(--ds-fs-sm)/1 var(--ds-font-text); cursor:pointer; }
.ds-chip:hover{ border-color:var(--ds-ink); }
.ds-chip[aria-pressed="true"],.ds-chip[aria-checked="true"],.ds-chip.is-selected{ background:var(--ds-ink); border-color:var(--ds-ink); color:var(--ds-on-ink); }
.ds-chip[aria-disabled="true"],.ds-chip.is-unavailable{ color:var(--ds-faint); text-decoration:line-through; cursor:not-allowed; }
.ds-brand-kids .ds-chip{ border-radius:var(--ds-radius-control); }

/* ---------- 6. surfaces ---------- */
.ds-card{ background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:var(--ds-radius-card); padding:var(--ds-5); }
@media (min-width:768px){ .ds-card{ padding:var(--ds-6); } }
.ds-card--flat{ border-color:transparent; background:var(--ds-surface-2); }
.ds-card--link{ display:block; color:inherit; text-decoration:none; transition:border-color var(--ds-dur) var(--ds-ease); }
.ds-card--link:hover{ border-color:var(--ds-ink); }
.ds-media{ aspect-ratio:var(--ds-ratio,4/5); overflow:hidden; background:var(--ds-surface-2); border-radius:var(--ds-radius-card); }
.ds-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* product / service tile */
.ds-tile{ display:grid; gap:var(--ds-3); color:inherit; text-decoration:none; }
.ds-tile__title{ font-weight:var(--ds-w-medium); line-height:1.6; }
.ds-tile__meta{ font-size:var(--ds-fs-sm); color:var(--ds-muted); }

/* price — the brass moment: member price; old price struck, tax note quiet */
.ds-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--ds-1) var(--ds-3); font-variant-numeric:tabular-nums; }
.ds-price__now{ font-weight:var(--ds-w-strong); font-size:var(--ds-fs-lg); color:var(--ds-ink); }
.ds-price__unit{ font-size:var(--ds-fs-sm); color:var(--ds-muted); font-weight:var(--ds-w-regular); }
.ds-price__was{ font-size:var(--ds-fs-sm); color:var(--ds-muted); text-decoration:line-through; }
.ds-price__member{ display:inline-flex; align-items:baseline; gap:var(--ds-2); color:var(--ds-accent-strong); font-weight:var(--ds-w-strong); }
.ds-price__note{ flex-basis:100%; font-size:var(--ds-fs-xs); color:var(--ds-muted); }

/* badges and tags */
.ds-badge{ display:inline-flex; align-items:center; gap:var(--ds-1); min-height:26px; padding:0 var(--ds-3); border-radius:var(--ds-radius-pill); font:var(--ds-w-medium) var(--ds-fs-xs)/1 var(--ds-font-text); background:var(--ds-surface-2); color:var(--ds-ink); border:1px solid var(--ds-line); white-space:nowrap; }
.ds-badge--member{ background:var(--ds-brass-100); color:var(--ds-brass-700); border-color:var(--ds-brass-200); }
.ds-badge--soon{ background:var(--ds-navy-100); color:var(--ds-navy-700); border-color:transparent; }
.ds-badge--success{ background:var(--ds-success-bg); color:var(--ds-success); border-color:transparent; }
.ds-badge--warning{ background:var(--ds-warning-bg); color:var(--ds-warning); border-color:transparent; }
.ds-badge--danger{ background:var(--ds-danger-bg); color:var(--ds-danger); border-color:transparent; }
.ds-brand-kids .ds-badge{ border-radius:var(--ds-radius-control); }

/* notices */
.ds-notice{ display:block; padding:var(--ds-4); border-radius:var(--ds-radius-control); background:var(--ds-info-bg); color:var(--ds-info); font-size:var(--ds-fs-sm); line-height:1.8; }
.ds-notice--success{ background:var(--ds-success-bg); color:var(--ds-success); }
.ds-notice--warning{ background:var(--ds-warning-bg); color:var(--ds-warning); }
.ds-notice--danger{ background:var(--ds-danger-bg); color:var(--ds-danger); }
.ds-notice b,.ds-notice strong{ color:inherit; }

/* ---------- 7. navigation ---------- */
.ds-header{ position:sticky; top:0; z-index:50; min-height:var(--ds-header-h); background:color-mix(in srgb,var(--ds-ground) 94%,transparent); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--ds-line); }
.ds-header__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--ds-3); min-height:var(--ds-header-h); }
.admin-bar .ds-header{ top:46px; } @media (min-width:783px){ .admin-bar .ds-header{ top:32px; } }
.ds-crumbs{ display:flex; flex-wrap:wrap; gap:var(--ds-2); font-size:var(--ds-fs-sm); color:var(--ds-muted); list-style:none; padding:0; margin:0 0 var(--ds-4); }
.ds-crumbs li+li::before{ content:"/"; margin-inline-end:var(--ds-2); color:var(--ds-line-strong); }
.ds-crumbs a{ color:var(--ds-muted); text-decoration:none; } .ds-crumbs a:hover{ color:var(--ds-ink); }
.ds-tabs{ display:flex; gap:var(--ds-1); overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--ds-line); }
.ds-tabs::-webkit-scrollbar{ display:none; }
.ds-tab{ flex:none; min-height:var(--ds-tap); padding:0 var(--ds-4); border:0; border-bottom:2px solid transparent; background:none; color:var(--ds-muted); font:var(--ds-w-medium) var(--ds-fs-md)/1 var(--ds-font-text); cursor:pointer; }
.ds-tab[aria-selected="true"]{ color:var(--ds-ink); border-bottom-color:var(--ds-gilt); }
/* phone bottom bar (store, bag, account) — hidden from 1024px */
.ds-bottom-nav{ position:fixed; inset-inline:0; bottom:0; z-index:60; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--ds-surface); border-top:1px solid var(--ds-line); padding-bottom:env(safe-area-inset-bottom); }
.ds-bottom-nav a{ display:grid; justify-items:center; gap:2px; padding:var(--ds-2) 0; min-height:56px; color:var(--ds-muted); font-size:11px; text-decoration:none; position:relative; }
.ds-bottom-nav a[aria-current="page"]{ color:var(--ds-ink); font-weight:var(--ds-w-strong); }
.ds-bottom-nav a[aria-current="page"]::before{ content:""; position:absolute; top:0; width:24px; height:2px; background:var(--ds-gilt); }
.ds-has-bottom-nav{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
@media (min-width:1024px){ .ds-bottom-nav{ display:none; } .ds-has-bottom-nav{ padding-bottom:0; } }
.ds-steps{ display:flex; gap:var(--ds-2); list-style:none; padding:0; margin:0 0 var(--ds-6); counter-reset:ds-step; }
.ds-steps li{ flex:1; display:grid; gap:var(--ds-2); font-size:var(--ds-fs-xs); color:var(--ds-muted); counter-increment:ds-step; }
.ds-steps li::before{ content:""; height:3px; border-radius:2px; background:var(--ds-line); }
.ds-steps li[aria-current="step"],.ds-steps li.is-done{ color:var(--ds-ink); }
.ds-steps li[aria-current="step"]::before{ background:var(--ds-gilt); } .ds-steps li.is-done::before{ background:var(--ds-ink); }
.ds-pager{ display:flex; gap:var(--ds-2); justify-content:center; margin-block:var(--ds-8); }
.ds-pager a,.ds-pager span{ display:inline-grid; place-items:center; min-width:44px; height:44px; border-radius:var(--ds-radius-control); color:var(--ds-ink); text-decoration:none; }
.ds-pager [aria-current="page"]{ background:var(--ds-ink); color:var(--ds-on-ink); }

/* ---------- 8. disclosure and overlays ---------- */
.ds-accordion{ border-top:1px solid var(--ds-line); }
.ds-accordion details{ border-bottom:1px solid var(--ds-line); }
.ds-accordion summary{ display:flex; justify-content:space-between; align-items:center; gap:var(--ds-4); min-height:56px; padding-block:var(--ds-3); cursor:pointer; list-style:none; font-weight:var(--ds-w-medium); }
.ds-accordion summary::-webkit-details-marker{ display:none; }
.ds-accordion summary::after{ content:""; width:10px; height:10px; border-inline-end:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform var(--ds-dur) var(--ds-ease); flex:none; }
.ds-accordion details[open] summary::after{ transform:rotate(-135deg); }
.ds-accordion .ds-accordion__body{ padding-block-end:var(--ds-5); color:var(--ds-ink-2); }
.ds-scrim{ position:fixed; inset:0; z-index:90; background:rgba(20,28,44,.45); }
.ds-sheet{ position:fixed; z-index:100; inset-inline:0; bottom:0; max-height:88vh; overflow:auto; background:var(--ds-surface); border-radius:var(--ds-radius-sheet) var(--ds-radius-sheet) 0 0; box-shadow:var(--ds-shadow-float); padding:var(--ds-5) var(--ds-gutter) calc(var(--ds-6) + env(safe-area-inset-bottom)); animation:ds-up var(--ds-dur-slow) var(--ds-ease); }
.ds-sheet__grip{ width:40px; height:4px; border-radius:2px; background:var(--ds-line-strong); margin:0 auto var(--ds-4); }
@media (min-width:768px){ .ds-sheet{ inset:auto; top:50%; left:50%; transform:translate(-50%,-50%); width:min(560px,92vw); border-radius:var(--ds-radius-sheet); animation:ds-fade var(--ds-dur-slow) var(--ds-ease); } .ds-sheet__grip{ display:none; } }
.ds-drawer{ position:fixed; z-index:100; top:0; bottom:0; inset-inline-start:0; width:min(360px,88vw); background:var(--ds-surface); box-shadow:var(--ds-shadow-float); overflow:auto; padding:var(--ds-5); }
.ds-toast{ position:fixed; z-index:110; inset-inline:var(--ds-gutter); bottom:calc(76px + env(safe-area-inset-bottom)); display:flex; gap:var(--ds-3); align-items:center; padding:var(--ds-3) var(--ds-4); border-radius:var(--ds-radius-control); background:var(--ds-ink); color:var(--ds-on-ink); box-shadow:var(--ds-shadow-float); font-size:var(--ds-fs-sm); animation:ds-up var(--ds-dur-slow) var(--ds-ease); }
@media (min-width:1024px){ .ds-toast{ inset-inline:auto var(--ds-8); bottom:var(--ds-8); max-width:420px; } }

/* ---------- 9. account and club ---------- */
.ds-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ds-table{ width:100%; border-collapse:collapse; font-size:var(--ds-fs-sm); }
.ds-table th{ text-align:start; font-weight:var(--ds-w-strong); color:var(--ds-muted); padding:var(--ds-3); border-bottom:1px solid var(--ds-line-strong); }
.ds-table td{ padding:var(--ds-3); border-bottom:1px solid var(--ds-line); vertical-align:top; }
@media (max-width:767px){ /* phone: each row becomes a small card */
  .ds-table--stack thead{ display:none; } .ds-table--stack tr{ display:grid; gap:var(--ds-1); padding:var(--ds-4) 0; border-bottom:1px solid var(--ds-line); }
  .ds-table--stack td{ display:flex; justify-content:space-between; gap:var(--ds-4); padding:0; border:0; }
  .ds-table--stack td::before{ content:attr(data-label); color:var(--ds-muted); }
}
.ds-tier{ display:grid; gap:var(--ds-3); padding:var(--ds-5); border-radius:var(--ds-radius-card); background:var(--ds-ink); color:var(--ds-on-ink); }
.ds-tier__name{ font-family:var(--ds-font-display); font-size:var(--ds-fs-h3); font-weight:var(--ds-w-display); color:var(--ds-gilt); }
.ds-tier__points{ font-size:var(--ds-fs-h2); font-weight:var(--ds-w-display); font-variant-numeric:tabular-nums; }
.ds-progress{ height:6px; border-radius:3px; background:rgba(243,238,228,.18); overflow:hidden; }
.ds-progress>span{ display:block; height:100%; width:var(--ds-value,0%); background:var(--ds-gilt); border-radius:inherit; transition:width var(--ds-dur-slow) var(--ds-ease); }
.ds-progress--light{ background:var(--ds-line); }

/* ---------- 10. states ---------- */
.ds-empty{ display:grid; justify-items:center; gap:var(--ds-3); padding:var(--ds-12) var(--ds-4); text-align:center; color:var(--ds-muted); }
.ds-empty .ds-h3{ color:var(--ds-ink); }
.ds-skeleton{ background:linear-gradient(90deg,var(--ds-surface-2) 0%,var(--ds-cream-200) 50%,var(--ds-surface-2) 100%); background-size:200% 100%; animation:ds-shimmer 1.4s ease-in-out infinite; border-radius:var(--ds-radius-control); min-height:1em; }

@keyframes ds-spin{ to{ transform:rotate(360deg); } }
@keyframes ds-up{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes ds-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ds-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){
  .ds-root *,.ds-root *::before,.ds-root *::after,body[class*="ds-brand-"] *{ animation-duration:1ms!important; animation-iteration-count:1!important; transition-duration:1ms!important; scroll-behavior:auto!important; }
}
@media print{ .ds-header,.ds-bottom-nav,.ds-toast,.ds-sheet,.ds-scrim{ display:none!important; } }

/* ---------- 11. link guard ----------
   Older theme/admin rules such as «body.x a{color:…}» are more specific than a single class; «:not(#_)» lifts only the
   colour of linked components above them, so a button never ends up navy-on-navy on a legacy page. */
a.ds-btn:not(#_),a.ds-btn:not(#_):visited,a.ds-btn:not(#_):hover{ color:var(--_fg); text-decoration:none; }
a.ds-tile:not(#_),a.ds-card--link:not(#_){ color:inherit; text-decoration:none; }
a.ds-link:not(#_){ color:var(--ds-ink); } a.ds-link:not(#_):hover{ color:var(--ds-accent-strong); }
.ds-crumbs a:not(#_){ color:var(--ds-muted); } .ds-crumbs a:not(#_):hover{ color:var(--ds-ink); }
.ds-pager a:not(#_){ color:var(--ds-ink); } .ds-pager a[aria-current="page"]:not(#_){ color:var(--ds-on-ink); }
.ds-bottom-nav a:not(#_){ color:var(--ds-muted); } .ds-bottom-nav a[aria-current="page"]:not(#_){ color:var(--ds-ink); }
/* form controls keep their shape on pages whose older CSS styles every input/select (e.g. «.wp-core-ui select») */
.ds-input:not(#_),.ds-select:not(#_),.ds-textarea:not(#_){ border:1px solid var(--ds-field-line); border-radius:var(--ds-radius-control); min-height:var(--ds-tap); padding:var(--ds-3) var(--ds-4); background-color:var(--ds-surface); color:var(--ds-ink); font-size:var(--ds-fs-md); box-shadow:none; max-width:none; }
.ds-select:not(#_){ padding-inline-end:var(--ds-10); line-height:1.5; 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.5l5 5 5-5' fill='none' stroke='%231B2638' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:12px 8px; background-repeat:no-repeat; background-position:left 16px center; }
[dir="ltr"] .ds-select:not(#_){ background-position:right 16px center; }
.ds-input:not(#_):focus,.ds-select:not(#_):focus,.ds-textarea:not(#_):focus{ border-color:var(--ds-ink); box-shadow:0 0 0 3px var(--ds-brass-100); }
.ds-field.is-invalid .ds-input:not(#_),.ds-input[aria-invalid="true"]:not(#_){ border-color:var(--ds-danger); }