/* ===========================================================================
   DESIGN SYSTEM — Storefront (Phase 5)
   ---------------------------------------------------------------------------
   One system for both languages. Every directional rule uses CSS LOGICAL
   properties (margin-inline-start, padding-block, inset-inline, text-align:
   start …), so a single stylesheet serves LTR and RTL. That replaces the old
   approach of maintaining style.css and style-ar.css as parallel copies which
   had to be edited twice and had already drifted apart.

   Loaded LAST, after Bootstrap and the legacy theme, so it layers over them
   rather than requiring every existing page to be rewritten at once.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS
   NOTE ON UNITS: the storefront theme sets html { font-size: 62.5% }, so in
   this document 1rem == 10px, not 16px. Every rem value below is expressed
   against that root — 1.5rem is 15px, 4.4rem is 44px — which keeps the sheet
   scaling with the visitor's browser font-size preference exactly like the
   surrounding theme does. The admin sheet uses a 16px root and its own scale.
   =========================================================================== */
:root {
    /* Neutrals — warm slate, not pure grey */
    --c-bg:            #ffffff;
    --c-bg-subtle:     #f7f8fa;
    --c-bg-sunken:     #eef0f4;
    --c-surface:       #ffffff;
    --c-border:        #e3e6ec;
    --c-border-strong: #cdd2dc;

    --c-text:          #1b2333;
    --c-text-muted:    #626b7e;
    --c-text-faint:    #8b93a4;
    --c-text-invert:   #ffffff;

    /* Accent — refined amber. Deliberately restrained: one accent, used for
       actions and emphasis only. No neon, no gradients-as-decoration. */
    --c-accent:        #b8860b;
    --c-accent-hover:  #9a7009;
    --c-accent-soft:   #fdf6e3;
    --c-accent-ring:   rgba(184, 134, 11, .28);

    /* Status */
    --c-success:       #1a7f4b;
    --c-success-soft:  #e8f5ee;
    --c-warning:       #9a6700;
    --c-warning-soft:  #fff6e0;
    --c-danger:        #b42318;
    --c-danger-soft:   #fdeceb;
    --c-info:          #1f5fa8;
    --c-info-soft:     #eaf2fb;

    /* Typography */
    --f-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    /* Almarai is the single Arabic family across storefront and admin.
       It has no 500/600 weights, so semibold maps to 700 (see the weight
       remap under the [lang="ar"] block) rather than being synthesised by
       the browser, which is what made Arabic headings look smeared. */
    --f-ar:   "Almarai", "Tajawal", "Segoe UI", system-ui, sans-serif;

    --t-xs:   1.2rem;
    --t-sm:   1.3rem;
    --t-base: 1.5rem;
    --t-md:   1.7rem;
    --t-lg:   2rem;
    --t-xl:   2.4rem;
    --t-2xl:  3rem;
    --t-3xl:  3.6rem;

    --lh-tight:   1.25;
    --lh-normal:  1.55;
    --lh-relaxed: 1.75;

    --w-regular: 400;
    --w-medium:  500;
    --w-semi:    600;
    --w-bold:    700;

    /* Spacing — 4px base */
    --s-1: 0.4rem;  --s-2: 0.8rem;   --s-3: 1.2rem;  --s-4: 1.6rem;
    /* --s-7 was referenced three times but never defined, so every rule
       using it was invalid at computed-value time and fell back to the
       initial value: the page heading lost its padding AND its bottom
       margin (the breadcrumb sat on the top edge of the band and the
       subtitle on the bottom), and the cart grid lost its column gap.
       The scale is a 0.4rem step, so the missing value is 2.8rem. */
    --s-5: 2rem;  --s-6: 2.4rem;   --s-7: 2.8rem;  --s-8: 3.2rem;     --s-10: 4rem;
    --s-12: 4.8rem;    --s-16: 6.4rem;

    /* Radius */
    --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-full: 999px;

    /* Elevation — soft, low-contrast */
    --e-sm: 0 1px 2px rgba(20, 26, 38, .06);
    --e-md: 0 2px 8px rgba(20, 26, 38, .08);
    --e-lg: 0 8px 28px rgba(20, 26, 38, .10);

    /* Layout */
    --container: 1280px;
    --gutter: 1.6rem;
    --tap: 44px;              /* minimum touch target */

    /* Motion */
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Arabic gets its own family and a slightly looser line height — Arabic
   glyphs need more vertical room than Latin at the same nominal size. */
:root[lang="ar"], [lang="ar"] {
    --f-sans: var(--f-ar);
    --lh-normal: 1.7;

    /* Almarai ships 300/400/700/800 only. Asking for 500 or 600 makes the
       browser synthesise a weight by smearing the 400 outline, which is what
       gave Arabic headings their muddy look. Snap to real weights instead. */
    --w-medium: 400;
    --w-semi:   700;
    --w-bold:   800;
}

/* ------------------------------------------------------- 2. RESET / BASE */
.ds body, body.ds-body {
    font-family: var(--f-sans);
}

.ds-scope {
    font-family: var(--f-sans);
    color: var(--c-text);
    font-size: var(--t-base);
    line-height: var(--lh-normal);
}

.ds-scope *,
.ds-scope *::before,
.ds-scope *::after { box-sizing: border-box; }

.ds-scope img { max-width: 100%; height: auto; }

/* Visible focus everywhere. The legacy theme removed outlines entirely. */
.ds-scope :focus-visible,
.ds-btn:focus-visible,
.ds-field input:focus-visible,
.ds-field select:focus-visible,
.ds-field textarea:focus-visible,
a:focus-visible {
    outline: 3px solid var(--c-accent-ring);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Screen-reader-only helper. */
.ds-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Skip link — first tab stop on every page. */
.ds-skip {
    position: absolute;
    inset-inline-start: var(--s-4);
    inset-block-start: -100px;
    z-index: 2000;
    background: var(--c-text);
    color: var(--c-text-invert);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-md);
    font-weight: var(--w-semi);
    transition: inset-block-start var(--dur-base) var(--ease);
}
.ds-skip:focus { inset-block-start: var(--s-4); color: var(--c-text-invert); }

/* --------------------------------------------------------- 3. CONTAINERS */
.ds-container {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.ds-container--narrow { max-inline-size: 760px; }

.ds-section { padding-block: var(--s-10); }
.ds-section--tight { padding-block: var(--s-6); }

.ds-stack > * + * { margin-block-start: var(--s-4); }
.ds-stack-sm > * + * { margin-block-start: var(--s-2); }

.ds-grid { display: grid; gap: var(--s-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)); }
.ds-grid--auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.ds-row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
.ds-row--between { justify-content: space-between; }
.ds-row--end { justify-content: flex-end; }
.ds-spacer { flex: 1 1 auto; }

/* -------------------------------------------------------- 4. TYPOGRAPHY */
.ds-h1 { font-size: var(--t-3xl); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: -.02em; margin: 0; }
.ds-h2 { font-size: var(--t-2xl); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: -.015em; margin: 0; }
.ds-h3 { font-size: var(--t-xl); font-weight: var(--w-semi); line-height: var(--lh-tight); margin: 0; }
.ds-h4 { font-size: var(--t-lg); font-weight: var(--w-semi); line-height: var(--lh-tight); margin: 0; }
.ds-lead { font-size: var(--t-md); color: var(--c-text-muted); line-height: var(--lh-relaxed); margin: 0; }
.ds-muted { color: var(--c-text-muted); }
.ds-faint { color: var(--c-text-faint); font-size: var(--t-sm); }
.ds-eyebrow {
    font-size: var(--t-xs); font-weight: var(--w-semi);
    letter-spacing: .09em; text-transform: uppercase; color: var(--c-accent);
}
.ds-text-start { text-align: start; }
.ds-text-center { text-align: center; }

/* Numbers and prices stay LTR even inside an RTL paragraph, so a currency
   symbol cannot end up on the wrong side of the figure. */
.ds-num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ----------------------------------------------------------- 5. BUTTONS */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--s-2);
    min-block-size: var(--tap);
    padding-inline: var(--s-5); padding-block: var(--s-3);
    font-family: inherit; font-size: var(--t-base); font-weight: var(--w-semi);
    line-height: 1; text-align: center; text-decoration: none;
    border: 1px solid transparent; border-radius: var(--r-md);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn[disabled], .ds-btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }

.ds-btn--primary { background: var(--c-accent); color: var(--c-text-invert); }
.ds-btn--primary:hover { background: var(--c-accent-hover); color: var(--c-text-invert); }

.ds-btn--dark { background: var(--c-text); color: var(--c-text-invert); }
.ds-btn--dark:hover { background: #0e1420; color: var(--c-text-invert); }

.ds-btn--outline { background: transparent; color: var(--c-text); border-color: var(--c-border-strong); }
.ds-btn--outline:hover { border-color: var(--c-text); background: var(--c-bg-subtle); color: var(--c-text); }

.ds-btn--ghost { background: transparent; color: var(--c-text-muted); }
.ds-btn--ghost:hover { background: var(--c-bg-subtle); color: var(--c-text); }

.ds-btn--danger { background: var(--c-danger); color: var(--c-text-invert); }
.ds-btn--danger:hover { background: #91180f; color: var(--c-text-invert); }

.ds-btn--sm { min-block-size: 36px; padding-inline: var(--s-3); padding-block: var(--s-2); font-size: var(--t-sm); }
.ds-btn--lg { min-block-size: 52px; padding-inline: var(--s-8); font-size: var(--t-md); }
.ds-btn--block { inline-size: 100%; }

/* Directional glyphs inside buttons flip with the document. */
[dir="rtl"] .ds-btn .ds-ico-next { transform: scaleX(-1); }

/* ------------------------------------------------------------- 6. CARDS */
.ds-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-sm);
    overflow: hidden;
}
.ds-card__body { padding: var(--s-5); }
.ds-card__header {
    padding: var(--s-4) var(--s-5);
    border-block-end: 1px solid var(--c-border);
    display: flex; align-items: center; gap: var(--s-3);
}
.ds-card__title { font-size: var(--t-md); font-weight: var(--w-semi); margin: 0; }
.ds-card--flat { box-shadow: none; }
.ds-card--pad { padding: var(--s-5); }

/* ------------------------------------------------- 7. PRODUCT CARD */
.ds-product {
    /* The hover actions below are position:absolute with inset-inline-end,
       but they are a SIBLING of .ds-product__media, not a child of it. With
       the card itself static they resolved against whatever positioned
       ancestor happened to be further up, and ended up outside the card
       entirely — measured at x=12 on the home page while the card's own
       container started at x=73, i.e. out in the page gutter. */
    position: relative;
    display: flex; flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: box-shadow var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
    block-size: 100%;
}
.ds-product:hover { box-shadow: var(--e-lg); border-color: var(--c-border-strong); transform: translateY(-2px); }

.ds-product__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;          /* fixed ratio — no distorted products */
    background: var(--c-bg-subtle);
    overflow: hidden;
}
.ds-product__media img {
    inline-size: 100%; block-size: 100%;
    object-fit: contain;           /* contain, so nothing is cropped or stretched */
    padding: var(--s-4);
    transition: transform var(--dur-base) var(--ease);
}
.ds-product:hover .ds-product__media img { transform: scale(1.03); }

.ds-product__badges {
    position: absolute;
    inset-block-start: var(--s-3);
    inset-inline-start: var(--s-3);
    display: flex; flex-direction: column; gap: var(--s-1);
    z-index: 2;
}

.ds-product__actions {
    position: absolute;
    inset-block-end: var(--s-3);
    inset-inline-end: var(--s-3);
    display: flex; flex-direction: column; gap: var(--s-2);
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.ds-product:hover .ds-product__actions,
.ds-product:focus-within .ds-product__actions { opacity: 1; transform: none; }

.ds-icon-btn {
    inline-size: var(--tap); block-size: var(--tap);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-surface); color: var(--c-text);
    border: 1px solid var(--c-border); border-radius: var(--r-full);
    box-shadow: var(--e-sm); cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ds-icon-btn:hover { background: var(--c-text); color: var(--c-text-invert); }

.ds-product__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 auto; }
.ds-product__cat { font-size: var(--t-xs); color: var(--c-text-faint); text-transform: uppercase; letter-spacing: .06em; }
.ds-product__title {
    font-size: var(--t-base); font-weight: var(--w-medium); line-height: var(--lh-tight);
    margin: 0; color: var(--c-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ds-product__title a { color: inherit; text-decoration: none; }
.ds-product__title a:hover { color: var(--c-accent); }
.ds-product__foot { margin-block-start: auto; display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.ds-product__price { font-size: var(--t-md); font-weight: var(--w-bold); color: var(--c-text); }
.ds-product__price-was { font-size: var(--t-sm); color: var(--c-text-faint); text-decoration: line-through; }

/* ------------------------------------------------------------ 8. BADGES */
.ds-badge {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding-inline: var(--s-2); padding-block: 3px;
    font-size: var(--t-xs); font-weight: var(--w-semi); line-height: 1.4;
    border-radius: var(--r-full); white-space: nowrap;
    background: var(--c-bg-sunken); color: var(--c-text-muted);
}
.ds-badge--success { background: var(--c-success-soft); color: var(--c-success); }
.ds-badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.ds-badge--danger  { background: var(--c-danger-soft);  color: var(--c-danger); }
.ds-badge--info    { background: var(--c-info-soft);    color: var(--c-info); }
.ds-badge--accent  { background: var(--c-accent-soft);  color: var(--c-accent); }
.ds-badge--solid   { background: var(--c-text); color: var(--c-text-invert); }

/* Status dot, so state is never conveyed by colour alone. */
.ds-badge__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------------- 9. FORMS */
.ds-field { display: block; margin-block-end: var(--s-4); }
.ds-field__label {
    display: block; margin-block-end: var(--s-2);
    font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--c-text);
}
.ds-field__hint { display: block; margin-block-start: var(--s-1); font-size: var(--t-xs); color: var(--c-text-faint); }
.ds-field__error { display: block; margin-block-start: var(--s-1); font-size: var(--t-xs); color: var(--c-danger); }

.ds-input, .ds-select, .ds-textarea {
    inline-size: 100%;
    min-block-size: var(--tap);
    padding-inline: var(--s-3); padding-block: var(--s-2);
    font-family: inherit; font-size: var(--t-base); color: var(--c-text);
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    text-align: start;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--c-text-faint); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
    border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-ring); outline: none;
}
.ds-textarea { min-block-size: 110px; resize: vertical; }
.ds-input[aria-invalid="true"] { border-color: var(--c-danger); }

/* Select arrow sits on the inline-end side in both directions. */
.ds-select {
    appearance: none;
    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 fill='%23626b7e' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-3) center;
    padding-inline-end: var(--s-8);
}
[dir="rtl"] .ds-select { background-position: left var(--s-3) center; }

.ds-check { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; min-block-size: var(--tap); }
.ds-check input { inline-size: 18px; block-size: 18px; accent-color: var(--c-accent); flex: none; }

/* --------------------------------------------------------- 10. FILTERS */
.ds-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.ds-chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding-inline: var(--s-3); padding-block: var(--s-2);
    font-size: var(--t-sm); font-weight: var(--w-medium);
    background: var(--c-accent-soft); color: var(--c-accent);
    border: 1px solid transparent; border-radius: var(--r-full);
}
.ds-chip__x {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 18px; block-size: 18px; border-radius: 50%;
    background: rgba(184,134,11,.18); cursor: pointer; border: 0; color: inherit;
    font-size: 11px; line-height: 1;
}
.ds-chip__x:hover { background: var(--c-accent); color: var(--c-text-invert); }

.ds-toolbar {
    display: flex; flex-wrap: wrap; gap: var(--s-3);
    align-items: center; justify-content: space-between;
    padding-block: var(--s-4);
    border-block-end: 1px solid var(--c-border);
    margin-block-end: var(--s-5);
}
.ds-result-count { font-size: var(--t-sm); color: var(--c-text-muted); }
.ds-result-count strong { color: var(--c-text); font-weight: var(--w-semi); }

.ds-filter-group { border-block-end: 1px solid var(--c-border); padding-block: var(--s-4); }
.ds-filter-group:last-child { border-block-end: 0; }
.ds-filter-group__title {
    font-size: var(--t-sm); font-weight: var(--w-semi); text-transform: uppercase;
    letter-spacing: .05em; color: var(--c-text); margin-block-end: var(--s-3);
}

/* ---------------------------------------------------------- 11. TABLES */
.ds-table-wrap { inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-table {
    inline-size: 100%; border-collapse: separate; border-spacing: 0;
    font-size: var(--t-sm);
}
.ds-table th, .ds-table td {
    padding: var(--s-3) var(--s-4);
    text-align: start;
    border-block-end: 1px solid var(--c-border);
    vertical-align: middle;
}
.ds-table thead th {
    font-size: var(--t-xs); font-weight: var(--w-semi);
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--c-text-muted); background: var(--c-bg-subtle);
    white-space: nowrap;
}
.ds-table tbody tr:hover { background: var(--c-bg-subtle); }
.ds-table--plain tbody tr:hover { background: transparent; }
.ds-table td.ds-num-cell { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- 12. ALERTS */
.ds-alert {
    display: flex; gap: var(--s-3); align-items: flex-start;
    padding: var(--s-4);
    border: 1px solid var(--c-border);
    border-inline-start: 4px solid var(--c-text-faint);
    border-radius: var(--r-md);
    background: var(--c-bg-subtle);
    font-size: var(--t-sm);
}
.ds-alert--success { background: var(--c-success-soft); border-inline-start-color: var(--c-success); color: #14603a; }
.ds-alert--warning { background: var(--c-warning-soft); border-inline-start-color: var(--c-warning); color: #7a5200; }
.ds-alert--danger  { background: var(--c-danger-soft);  border-inline-start-color: var(--c-danger);  color: #8f1109; }
.ds-alert--info    { background: var(--c-info-soft);    border-inline-start-color: var(--c-info);    color: #17487e; }

/* Toast stack */
.ds-toasts {
    position: fixed; z-index: 1080;
    inset-block-end: var(--s-5); inset-inline-end: var(--s-5);
    display: flex; flex-direction: column; gap: var(--s-2);
    max-inline-size: 360px;
}
.ds-toast {
    background: var(--c-text); color: var(--c-text-invert);
    padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
    box-shadow: var(--e-lg); font-size: var(--t-sm);
    animation: ds-toast-in var(--dur-base) var(--ease);
}
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------- 13. EMPTY STATES */
.ds-empty {
    text-align: center;
    padding-block: var(--s-16); padding-inline: var(--s-5);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r-lg);
    background: var(--c-bg-subtle);
}
.ds-empty__icon {
    inline-size: 56px; block-size: 56px; margin-inline: auto; margin-block-end: var(--s-4);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-full); background: var(--c-bg-sunken); color: var(--c-text-faint);
    font-size: var(--t-xl);
}
.ds-empty__title { font-size: var(--t-md); font-weight: var(--w-semi); margin: 0 0 var(--s-2); }
.ds-empty__text { color: var(--c-text-muted); margin: 0 0 var(--s-5); font-size: var(--t-sm); }

/* ----------------------------------------------------- 14. PAGINATION */
.ds-pagination { display: flex; gap: var(--s-1); flex-wrap: wrap; justify-content: center; padding-block: var(--s-6); }
.ds-pagination a, .ds-pagination span {
    min-inline-size: var(--tap); min-block-size: var(--tap);
    display: inline-flex; align-items: center; justify-content: center;
    padding-inline: var(--s-3);
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    color: var(--c-text); text-decoration: none; font-size: var(--t-sm); font-weight: var(--w-medium);
    background: var(--c-surface);
}
.ds-pagination a:hover { border-color: var(--c-text); background: var(--c-bg-subtle); }
.ds-pagination .is-active { background: var(--c-text); color: var(--c-text-invert); border-color: var(--c-text); }
[dir="rtl"] .ds-pagination .ds-ico-next { transform: scaleX(-1); }

/* --------------------------------------------------------- 15. MODALS */
.ds-modal__backdrop { background: rgba(16, 21, 31, .55); backdrop-filter: blur(2px); }
.ds-modal {
    background: var(--c-surface); border-radius: var(--r-xl);
    box-shadow: var(--e-lg); border: 1px solid var(--c-border);
    overflow: hidden;
}
.ds-modal__header { padding: var(--s-5); border-block-end: 1px solid var(--c-border); }
.ds-modal__body { padding: var(--s-5); }
.ds-modal__footer { padding: var(--s-5); border-block-start: 1px solid var(--c-border); display: flex; gap: var(--s-3); justify-content: flex-end; }

/* ------------------------------------------------- 16. STEPS / TIMELINE */
.ds-steps { display: flex; gap: var(--s-2); list-style: none; padding: 0; margin: 0 0 var(--s-6); flex-wrap: wrap; }
.ds-step { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-text-faint); }
.ds-step__num {
    inline-size: 26px; block-size: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-bg-sunken); color: var(--c-text-muted);
    font-size: var(--t-xs); font-weight: var(--w-bold); flex: none;
}
.ds-step.is-active { color: var(--c-text); font-weight: var(--w-semi); }
.ds-step.is-active .ds-step__num { background: var(--c-accent); color: var(--c-text-invert); }
.ds-step.is-done .ds-step__num { background: var(--c-success); color: var(--c-text-invert); }
.ds-step__sep { color: var(--c-border-strong); }
[dir="rtl"] .ds-step__sep { transform: scaleX(-1); }

.ds-timeline { list-style: none; margin: 0; padding: 0; }
.ds-timeline li {
    position: relative;
    padding-inline-start: var(--s-6); padding-block-end: var(--s-5);
    border-inline-start: 2px solid var(--c-border);
}
.ds-timeline li:last-child { border-inline-start-color: transparent; padding-block-end: 0; }
.ds-timeline li::before {
    content: ""; position: absolute;
    inset-inline-start: -7px; inset-block-start: 2px;
    inline-size: 12px; block-size: 12px; border-radius: 50%;
    background: var(--c-border-strong); border: 2px solid var(--c-surface);
}
.ds-timeline li.is-done::before { background: var(--c-success); }
.ds-timeline li.is-active::before { background: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-ring); }
.ds-timeline__title { font-weight: var(--w-semi); font-size: var(--t-sm); }
.ds-timeline__meta { font-size: var(--t-xs); color: var(--c-text-faint); }

/* ------------------------------------------------ 17. SUMMARY / TOTALS */
.ds-summary { display: flex; flex-direction: column; gap: var(--s-3); }
.ds-summary__row { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-sm); }
.ds-summary__row--total {
    padding-block-start: var(--s-3); border-block-start: 1px solid var(--c-border);
    font-size: var(--t-md); font-weight: var(--w-bold);
}
.ds-summary__label { color: var(--c-text-muted); }
.ds-summary__row--total .ds-summary__label { color: var(--c-text); }

/* ------------------------------------------- 18. PAYMENT METHOD CARDS */
.ds-pay { display: grid; gap: var(--s-3); }
.ds-pay__option { position: relative; }
.ds-pay__option input { position: absolute; opacity: 0; pointer-events: none; }
.ds-pay__label {
    display: flex; gap: var(--s-3); align-items: flex-start;
    padding: var(--s-4);
    border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    cursor: pointer; background: var(--c-surface);
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
    min-block-size: var(--tap);
}
.ds-pay__label:hover { border-color: var(--c-text-faint); }
.ds-pay__option input:checked + .ds-pay__label { border-color: var(--c-accent); background: var(--c-accent-soft); }
.ds-pay__option input:focus-visible + .ds-pay__label { outline: 3px solid var(--c-accent-ring); outline-offset: 2px; }
.ds-pay__radio {
    inline-size: 20px; block-size: 20px; border-radius: 50%; flex: none;
    border: 2px solid var(--c-border-strong); margin-block-start: 2px;
    display: grid; place-items: center;
}
.ds-pay__option input:checked + .ds-pay__label .ds-pay__radio { border-color: var(--c-accent); }
.ds-pay__option input:checked + .ds-pay__label .ds-pay__radio::after {
    content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--c-accent);
}
.ds-pay__title { font-weight: var(--w-semi); font-size: var(--t-base); }
.ds-pay__desc { font-size: var(--t-sm); color: var(--c-text-muted); margin-block-start: var(--s-1); }

/* ------------------------------------------------------ 19. STOCK CUES */
.ds-stock { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); font-weight: var(--w-medium); }
.ds-stock--in  { color: var(--c-success); }
.ds-stock--low { color: var(--c-warning); }
.ds-stock--out { color: var(--c-danger); }
.ds-stock__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------- 20. GALLERY */
.ds-gallery { display: grid; gap: var(--s-3); }
.ds-gallery__main {
    aspect-ratio: 1 / 1; background: var(--c-bg-subtle);
    border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden;
    display: grid; place-items: center;
}
.ds-gallery__main img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: var(--s-5); }
.ds-gallery__thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ds-gallery__thumb {
    inline-size: 72px; block-size: 72px; padding: var(--s-1);
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    background: var(--c-surface); cursor: pointer; overflow: hidden;
}
.ds-gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.ds-gallery__thumb.is-active { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent-ring); }

/* ------------------------------------------------------ 21. UTILITIES */
.ds-hide { display: none !important; }
.ds-divider { block-size: 1px; background: var(--c-border); border: 0; margin-block: var(--s-5); }
.ds-sticky { position: sticky; inset-block-start: var(--s-5); }

/* ---------------------------------------------------- 22. RESPONSIVE */
@media (max-width: 1024px) {
    :root { --t-3xl: 3rem; --t-2xl: 2.4rem; }
    .ds-grid--4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 768px) {
    :root { --gutter: 1.6rem; --s-16: 4.8rem; }
    .ds-grid--3, .ds-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ds-section { padding-block: var(--s-8); }
    .ds-toolbar { flex-direction: column; align-items: stretch; }
    /* Product actions are always visible on touch — there is no hover. */
    .ds-product__actions { opacity: 1; transform: none; position: static; flex-direction: row; padding: 0 var(--s-4) var(--s-4); }
}
@media (max-width: 430px) {
    :root { --t-3xl: 2.6rem; --t-2xl: 2.2rem; --t-xl: 1.9rem; }
    .ds-grid--2, .ds-grid--3, .ds-grid--4, .ds-grid--auto { grid-template-columns: 1fr; }
    .ds-toasts { inset-inline: var(--s-3); max-inline-size: none; }
    /* Full-width buttons are right for form submits and single-action
       blocks on a phone, but wrong for a hero call to action, a toolbar
       control or anything sitting inline next to other content — it made the
       home hero CTA span the whole band. Opt in rather than blanket-apply. */
    .ds-form .ds-btn,
    .ds-fields .ds-btn,
    .ds-empty .ds-btn,
    .ds-aside .ds-btn,
    .ds-btn--block { inline-size: 100%; }
}

/* Filter drawer on small screens. */
@media (max-width: 768px) {
    .ds-filter-drawer {
        position: fixed; z-index: 1070;
        inset-inline: 0; inset-block-end: 0;
        max-block-size: 82vh; overflow-y: auto;
        background: var(--c-surface);
        border-start-start-radius: var(--r-xl); border-start-end-radius: var(--r-xl);
        box-shadow: var(--e-lg);
        transform: translateY(100%);
        transition: transform var(--dur-base) var(--ease);
        padding: var(--s-5);
    }
    .ds-filter-drawer.is-open { transform: none; }
    .ds-filter-drawer__handle {
        inline-size: 40px; block-size: 4px; border-radius: var(--r-full);
        background: var(--c-border-strong); margin: 0 auto var(--s-4);
    }
}

/* -------------------------------------------- 23. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .ds-product:hover { transform: none; }
    .ds-product:hover .ds-product__media img { transform: none; }
}

/* ------------------------------------------------- 24. PRINT (invoice) */
@media print {
    .ds-no-print, header, footer, .ds-toasts { display: none !important; }
    .ds-card { box-shadow: none; border-color: #000; }
    body { background: #fff; }
}

/* ---------------------------------------- 25. PAGE HEAD / BREADCRUMB */
/* Replaces the legacy .page-header, which painted a photographic background
   behind white text (unreadable at several viewport widths and a contrast
   failure). This is a flat band that reads the same in both directions. */
.ds-pagehead {
    background: var(--c-bg-subtle);
    border-block-end: 1px solid var(--c-border);
    padding-block: var(--s-7) var(--s-6);
    margin-block-end: var(--s-7);
}
.ds-pagehead__title {
    font-size: var(--t-2xl);
    font-weight: var(--w-semi);
    line-height: var(--lh-tight);
    margin: 0;
    color: var(--c-text);
}
.ds-pagehead__sub {
    font-size: var(--t-base);
    color: var(--c-text-muted);
    margin-block-start: var(--s-2);
    max-inline-size: 60ch;
}
.ds-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    list-style: none;
    margin: 0 0 var(--s-3);
    padding: 0;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}
.ds-breadcrumb li { display: flex; align-items: center; gap: var(--s-2); }
.ds-breadcrumb li + li::before {
    content: "/";
    color: var(--c-text-faint);
}
.ds-breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.ds-breadcrumb a:hover { color: var(--c-accent); text-decoration: underline; }
.ds-breadcrumb [aria-current="page"] { color: var(--c-text); font-weight: var(--w-medium); }

/* -------------------------------------------- 26. PRODUCT DETAIL (PDP) */
.ds-pdp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
}
.ds-pdp__info { display: flex; flex-direction: column; gap: var(--s-4); }
.ds-pdp__title {
    font-size: var(--t-2xl);
    font-weight: var(--w-semi);
    line-height: var(--lh-tight);
    margin: 0;
}
.ds-pdp__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}
.ds-pdp__desc { color: var(--c-text-muted); line-height: var(--lh-normal); }
.ds-pdp__desc p:last-child { margin-block-end: 0; }
.ds-pdp__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s-3);
    padding-block: var(--s-5);
    border-block: 1px solid var(--c-border);
}
.ds-pdp__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-5);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}

/* Price block */
.ds-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); }
.ds-price__now {
    font-size: var(--t-xl);
    font-weight: var(--w-bold);
    color: var(--c-text);
}
.ds-price__was {
    font-size: var(--t-base);
    color: var(--c-text-faint);
    text-decoration: line-through;
}
.ds-price__off {
    font-size: var(--t-xs);
    font-weight: var(--w-semi);
    color: var(--c-danger);
    background: var(--c-danger-soft);
    border-radius: var(--r-sm);
    padding: 2px var(--s-2);
}

/* Quantity stepper. The buttons are real buttons, so they are keyboard
   reachable and meet the 44px target; the native number input stays the
   source of truth so the existing #quantity binding keeps working. */
.ds-qty { display: inline-flex; align-items: stretch; }
.ds-qty__btn {
    inline-size: var(--tap);
    min-block-size: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--t-md);
    cursor: pointer;
}
.ds-qty__btn:first-child {
    border-start-start-radius: var(--r-md);
    border-end-start-radius: var(--r-md);
}
.ds-qty__btn:last-child {
    border-start-end-radius: var(--r-md);
    border-end-end-radius: var(--r-md);
}
.ds-qty__btn:hover { background: var(--c-bg-subtle); }
.ds-qty__btn:focus-visible { outline: 3px solid var(--c-accent-ring); outline-offset: -1px; z-index: 1; }
.ds-qty input {
    inline-size: 6.4rem;
    min-block-size: var(--tap);
    text-align: center;
    border: 1px solid var(--c-border-strong);
    border-inline: 0;
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-weight: var(--w-semi);
    -moz-appearance: textfield;
}
.ds-qty input::-webkit-outer-spin-button,
.ds-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ds-qty input:focus-visible { outline: 3px solid var(--c-accent-ring); outline-offset: -1px; position: relative; z-index: 1; }

/* ----------------------------------------------------------- 27. TABS */
.ds-tabs {
    display: flex;
    gap: var(--s-1);
    list-style: none;
    margin: 0 0 var(--s-6);
    padding: 0;
    border-block-end: 1px solid var(--c-border);
    overflow-x: auto;
    scrollbar-width: thin;
}
.ds-tabs__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap);
    padding-inline: var(--s-4);
    font-size: var(--t-base);
    font-weight: var(--w-medium);
    color: var(--c-text-muted);
    text-decoration: none;
    border-block-end: 2px solid transparent;
    white-space: nowrap;
    background: none;
}
.ds-tabs__link:hover { color: var(--c-text); }
.ds-tabs__link.active,
.ds-tabs__link[aria-selected="true"] {
    color: var(--c-text);
    border-block-end-color: var(--c-accent);
}
.ds-tabs__link:focus-visible { outline: 3px solid var(--c-accent-ring); outline-offset: -2px; border-radius: var(--r-sm); }

/* ------------------------------------------------ 28. SPEC / KEY-VALUE */
.ds-specs { inline-size: 100%; border-collapse: collapse; }
.ds-specs th,
.ds-specs td {
    padding: var(--s-3) var(--s-4);
    text-align: start;
    font-size: var(--t-base);
    border-block-end: 1px solid var(--c-border);
    vertical-align: top;
}
.ds-specs th { font-weight: var(--w-medium); color: var(--c-text-muted); inline-size: 40%; }
.ds-specs td { color: var(--c-text); }
.ds-specs tr:last-child th,
.ds-specs tr:last-child td { border-block-end: 0; }

/* -------------------------------------------------- 29. CART / SUMMARY */
.ds-cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 33.6rem;
    gap: var(--s-7);
    align-items: start;
}
.ds-aside { position: sticky; inset-block-start: var(--s-5); display: grid; gap: var(--s-4); }
.ds-cartline {
    display: grid;
    grid-template-columns: 8.8rem minmax(0, 1fr) auto;
    gap: var(--s-4);
    align-items: center;
    padding-block: var(--s-4);
    border-block-end: 1px solid var(--c-border);
}
.ds-cartline:last-child { border-block-end: 0; }
.ds-cartline__media {
    inline-size: 8.8rem;
    block-size: 8.8rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-bg-subtle);
    overflow: hidden;
}
.ds-cartline__media img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: var(--s-2); }
.ds-cartline__name {
    font-size: var(--t-base);
    font-weight: var(--w-medium);
    color: var(--c-text);
    text-decoration: none;
    display: block;
}
.ds-cartline__name:hover { color: var(--c-accent); }
.ds-cartline__meta { font-size: var(--t-sm); color: var(--c-text-muted); margin-block-start: var(--s-1); }
.ds-cartline__end { display: flex; align-items: center; gap: var(--s-4); }
.ds-cartline__total { font-weight: var(--w-semi); white-space: nowrap; }
.ds-cartline__remove {
    inline-size: var(--tap);
    block-size: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text-muted);
    cursor: pointer;
    font-size: var(--t-md);
    line-height: 1;
}
.ds-cartline__remove:hover { border-color: var(--c-danger); color: var(--c-danger); background: var(--c-danger-soft); }
.ds-cartline__remove:focus-visible { outline: 3px solid var(--c-accent-ring); outline-offset: 2px; }

/* --------------------------------------------------- 30. CHECKBOX ROW */
.ds-check { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-sm); cursor: pointer; }
.ds-check input[type="checkbox"] {
    inline-size: 1.8rem;
    block-size: 1.8rem;
    margin: 0;
    flex: none;
    margin-block-start: 2px;
    accent-color: var(--c-accent);
}
.ds-check input:focus-visible { outline: 3px solid var(--c-accent-ring); outline-offset: 2px; }
.ds-check a { color: var(--c-accent); }

/* ------------------------------------------------------- 31. REVIEWS */
.ds-review { padding-block: var(--s-5); border-block-end: 1px solid var(--c-border); }
.ds-review:last-child { border-block-end: 0; }
.ds-review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.ds-review__who { font-weight: var(--w-semi); font-size: var(--t-base); }
.ds-review__when { font-size: var(--t-xs); color: var(--c-text-faint); }
.ds-review__body { margin-block-start: var(--s-2); color: var(--c-text-muted); line-height: var(--lh-normal); }
.ds-stars { display: inline-flex; gap: 1px; color: var(--c-accent); font-size: var(--t-sm); letter-spacing: .05em; }
.ds-stars--muted { color: var(--c-text-faint); }

/* ------------------------------------------------- 32. FIELD GROUPING */
.ds-field { display: grid; gap: var(--s-2); }
.ds-field__label { font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--c-text); }
.ds-field__hint { font-size: var(--t-xs); color: var(--c-text-faint); }
.ds-field__error { font-size: var(--t-xs); color: var(--c-danger); }
.ds-fields { display: grid; gap: var(--s-4); }
.ds-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-req { color: var(--c-danger); }

/* -------------------------------------------- 33. AUTH / NARROW PAGES */
.ds-narrow { max-inline-size: 48rem; margin-inline: auto; }
.ds-narrow--wide { max-inline-size: 70.4rem; }

/* ------------------------------------- 34. RESPONSIVE (new components) */
@media (max-width: 991px) {
    .ds-cart { grid-template-columns: minmax(0, 1fr); }
    .ds-aside { position: static; }
}
@media (max-width: 767px) {
    .ds-pdp { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
    .ds-pdp__title { font-size: var(--t-xl); }
    .ds-pagehead { padding-block: var(--s-5) var(--s-4); margin-block-end: var(--s-5); }
    .ds-pagehead__title { font-size: var(--t-xl); }
    .ds-fields--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
    .ds-cartline { grid-template-columns: 6.4rem minmax(0, 1fr); row-gap: var(--s-3); }
    .ds-cartline__media { inline-size: 6.4rem; block-size: 6.4rem; }
    .ds-cartline__end { grid-column: 1 / -1; justify-content: space-between; }
    .ds-pdp__buy { flex-direction: column; align-items: stretch; }
    .ds-pdp__buy .ds-btn { inline-size: 100%; }
    .ds-qty { align-self: flex-start; }
}

/* Toast stack readability: opaque surface + elevation, full-width on phones. */
.ds-toasts .ds-alert { box-shadow: var(--e-lg); }
@media (max-width: 479px) {
    .ds-toasts { inset-inline: var(--s-4); max-inline-size: none; inset-block-end: var(--s-4); }
}

/* Section 35 (the Phase 5 hero + promo banners) has been removed. It styled
   info_header()/info_adsH(), which the home redesign replaced with homeHero()
   and a single promo band. Its .ds-hero rules were still matching the new
   markup and fighting section 43 for height, alignment and scrim. Hero now
   lives in section 43, promo in section 41. */

/* --------------------------------------- 36. COARSE POINTER TARGET SIZES */
/* On a touch device every control gets the full 44px, including the compact
   button variant that is deliberately 36px on a mouse-driven desktop.
   Inline links inside running text are exempt under WCAG 2.5.8, but standalone
   navigation links such as breadcrumbs are not, so they get the room too. */
@media (pointer: coarse) {
    .ds-btn--sm { min-block-size: var(--tap); padding-inline: var(--s-4); }
    .ds-breadcrumb a,
    .ds-breadcrumb [aria-current="page"] {
        display: inline-flex;
        align-items: center;
        min-block-size: var(--tap);
    }
    .ds-icon-btn { min-inline-size: var(--tap); min-block-size: var(--tap); }
}

/* ===========================================================================
   37. HEADER
   ---------------------------------------------------------------------------
   One structure for every breakpoint and both directions. The vendored theme
   shipped three overlapping header layouts (.header-left / .header-right /
   .header-middle each with their own flex rules and media queries); those are
   switched off in ds-bridge.css so this is the single source of truth rather
   than another layer of overrides.
   =========================================================================== */
.ds-header {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    min-block-size: 7.2rem;
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

.ds-header__logo {
    flex: none;
    display: inline-flex;
    align-items: center;
    /* A wordmark is not a directional glyph: it must not flip in RTL. */
    direction: ltr;
}
.ds-header__logo img {
    inline-size: auto;
    block-size: 4.4rem;
    object-fit: contain;
}

/* --- navigation ---------------------------------------------------------- */
.ds-header__nav { flex: 1 1 auto; min-inline-size: 0; }
.ds-header__nav .menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--s-1);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible;
}
.ds-header__nav .menu > li > a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap);
    padding-inline: var(--s-3);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--r-md);
}
.ds-header__nav .menu > li > a:hover,
.ds-header__nav .menu > li:hover > a { color: var(--c-accent); background: var(--c-bg-subtle); }

/* Submenus: a plain panel, opened by the theme's superfish init. */
.ds-header__nav .menu ul {
    min-inline-size: 22rem;
    padding: var(--s-2);
    margin: 0;
    list-style: none;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--e-lg);
}
.ds-header__nav .menu ul li a {
    display: block;
    padding: var(--s-2) var(--s-3);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    text-decoration: none;
    border-radius: var(--r-sm);
}
.ds-header__nav .menu ul li a:hover { background: var(--c-bg-subtle); color: var(--c-text); }

/* --- actions ------------------------------------------------------------- */
.ds-header__actions {
    flex: none;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.ds-header__icon {
    inline-size: var(--tap);
    block-size: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 0;
    background: transparent;
    border-radius: var(--r-md);
    color: var(--c-text);
    font-size: var(--t-md);
    cursor: pointer;
    text-decoration: none;
}
.ds-header__icon:hover { background: var(--c-bg-subtle); color: var(--c-accent); }
.ds-header__icon:focus-visible { outline: 3px solid var(--c-accent-ring); outline-offset: -2px; }

.ds-header__lang {
    display: inline-flex;
    align-items: center;
    min-block-size: 3.4rem;
    padding-inline: var(--s-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
}
.ds-header__lang:hover { border-color: var(--c-text); color: var(--c-text); }

/* Cart badge */
.ds-header__cart .cart-count {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    min-inline-size: 1.8rem;
    block-size: 1.8rem;
    padding-inline: .4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    background: var(--c-accent);
    color: var(--c-text-invert);
    font-size: 1.1rem;
    font-weight: var(--w-bold);
    line-height: 1;
}

/* Account dropdown */
.ds-header__account { position: relative; }
.ds-header__menu {
    padding: var(--s-2);
    min-inline-size: 20rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--e-lg);
}
.ds-header__menu a {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-block-size: var(--tap);
    padding-inline: var(--s-3);
    font-size: var(--t-sm);
    color: var(--c-text);
    text-decoration: none;
    border-radius: var(--r-sm);
}
.ds-header__menu a:hover { background: var(--c-bg-subtle); color: var(--c-accent); }

/* --- search -------------------------------------------------------------- */
.ds-header__search { position: relative; }
.ds-header__search .header-search-wrapper {
    position: absolute;
    inset-block-start: calc(100% + var(--s-2));
    inset-inline-end: 0;
    inline-size: 32rem;
    max-inline-size: calc(100vw - 2 * var(--gutter));
    z-index: 60;
    padding: var(--s-2);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--e-lg);
}
.ds-header__search .form-control { inline-size: 100%; }
.ds-header__search #results-container:empty { display: none; }

/* --- responsive ---------------------------------------------------------- */
/* Below 992px the category nav moves into the existing off-canvas drawer, so
   the toggle appears and the inline nav is removed from the flow. Above it the
   toggle is gone entirely — the theme left it visible on desktop next to the
   full menu. */
@media (min-width: 992px) {
    .ds-header .mobile-menu-toggler { display: none; }
}
@media (max-width: 991px) {
    .ds-header { min-block-size: 6rem; gap: var(--s-2); }
    .ds-header__nav { display: none; }
    .ds-header__logo { margin-inline: auto; }
    .ds-header__logo img { block-size: 3.6rem; }
    .ds-header__lang { padding-inline: var(--s-2); }
}
@media (max-width: 575px) {
    .ds-header { padding-inline: var(--s-3); gap: 0; }
    .ds-header__icon { inline-size: 3.8rem; }
    .ds-header__lang { font-size: var(--t-xs); padding-inline: var(--s-2); }
}


/* ===========================================================================
   38. HOME PAGE
   ---------------------------------------------------------------------------
   Section heads, category cards, hero, promo band and trust strip. All of it
   is new markup, so nothing here needs to out-specify the vendored theme.
   =========================================================================== */

/* --- section heading ----------------------------------------------------- */
.ds-sectionhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    margin-block-end: var(--s-6);
}
.ds-sectionhead__title {
    font-size: var(--t-xl);
    font-weight: var(--w-semi);
    line-height: var(--lh-tight);
    letter-spacing: -.01em;
    margin: 0;
}
.ds-sectionhead__sub {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    margin: var(--s-1) 0 0;
}
.ds-sectionhead__link {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--c-accent);
    text-decoration: none;
    white-space: nowrap;
}
.ds-sectionhead__link:hover { text-decoration: underline; color: var(--c-accent-hover); }

/* --- hero: see section 43 --- */
.ds-herowrap { margin-block-end: var(--s-8); }
/* Type selector included deliberately: the generic .ds-scope img rule in
   section 2 sets height:auto and is (0,1,1); a bare .ds-hero__img is (0,1,0)
   and would lose to it, collapsing the hero image to zero height. */
img.ds-hero__img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
}
.ds-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 16, 24, .30), rgba(12, 16, 24, .68));
    pointer-events: none;
}
.ds-hero__content {
    position: relative;
    z-index: 1;
    inline-size: 100%;
    max-inline-size: 62rem;
    padding-inline: var(--gutter);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
}
.ds-hero__title {
    font-size: clamp(var(--t-2xl), 4.2vw, var(--t-3xl));
    font-weight: var(--w-bold);
    line-height: var(--lh-tight);
    letter-spacing: -.02em;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.ds-hero__text {
    font-size: var(--t-md);
    color: rgba(255, 255, 255, .92);
    margin: 0;
    max-inline-size: 46rem;
}

/* Image failed to load, or there was no banner at all: fall back to a solid
   brand band so the headline never sits on an empty grey rectangle. */
.ds-hero.is-noimg,
.ds-hero--plain {
    background: linear-gradient(135deg, #1b2333 0%, #2c3550 100%);
}
.ds-hero.is-noimg .ds-hero__scrim,
.ds-hero--plain .ds-hero__scrim { display: none; }

/* Scroll-snap track. Direction-aware for free: the browser lays the slides
   out in the document direction and snaps to whichever edge is the start. */
.ds-heroslides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ds-heroslides::-webkit-scrollbar { display: none; }
.ds-heroslides > .ds-hero {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Dots */
.ds-herowrap { position: relative; }
.ds-herodots {
    position: absolute;
    inset-block-end: var(--s-5);
    inset-inline: 0;
    display: flex;
    justify-content: center;
    gap: var(--s-1);
    z-index: 2;
}
.ds-herodot {
    inline-size: var(--tap);
    block-size: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.ds-herodot::before {
    content: "";
    inline-size: 2.4rem;
    block-size: 4px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .45);
    transition: background var(--dur-fast) var(--ease);
}
.ds-herodot.is-active::before { background: #fff; }
.ds-herodot:focus-visible { outline: 3px solid var(--c-accent-ring); outline-offset: -4px; border-radius: var(--r-sm); }

/* --- category cards ------------------------------------------------------ */
.ds-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ds-cat {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    block-size: 100%;
    padding: var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.ds-cat:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--e-md);
    transform: translateY(-2px);
}
.ds-cat__media {
    flex: none;
    inline-size: 5.6rem;
    block-size: 5.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--c-bg-subtle);
    color: var(--c-text-faint);
    font-size: var(--t-lg);
}
.ds-cat__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: var(--s-2);
}
.ds-cat__body { min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-cat__name {
    font-size: var(--t-base);
    font-weight: var(--w-semi);
    color: var(--c-text);
    line-height: var(--lh-tight);
    /* Category names are admin-entered and occasionally long; clamp rather
       than let one card grow taller than the rest of the row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Single long words such as "ACCESSORIES" have no break opportunity and
       were being clipped mid-word inside the clamp on a narrow card. */
    overflow-wrap: anywhere;
}
.ds-cat:hover .ds-cat__name { color: var(--c-accent); }
.ds-cat__count { font-size: var(--t-xs); color: var(--c-text-muted); }

/* --- product grid -------------------------------------------------------- */
/* 4 per row on desktop, 3 on small laptop, 2 on tablet and phone. */
.ds-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- promo band: see section 41 --- */

/* --- trust strip --------------------------------------------------------- */
.ds-trustband {
    margin-block-start: var(--s-10);
    padding-block: var(--s-8);
    background: var(--c-bg-subtle);
    border-block-start: 1px solid var(--c-border);
}
.ds-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-6);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ds-trust__item { display: flex; align-items: flex-start; gap: var(--s-3); }
.ds-trust__icon {
    flex: none;
    inline-size: 4.4rem;
    block-size: 4.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-accent);
    font-size: var(--t-md);
}
.ds-trust__title {
    display: block;
    font-size: var(--t-base);
    font-weight: var(--w-semi);
    color: var(--c-text);
    line-height: var(--lh-tight);
}
.ds-trust__text {
    display: block;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    margin-block-start: 2px;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1199px) {
    .ds-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ds-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .ds-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .ds-grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
    .ds-hero { block-size: clamp(24rem, 62vw, 32rem); }
    .ds-sectionhead { margin-block-end: var(--s-4); }
    .ds-sectionhead__title { font-size: var(--t-lg); }
    .ds-trustband { margin-block-start: var(--s-8); padding-block: var(--s-6); }
}
@media (max-width: 479px) {
    .ds-cats { gap: var(--s-3); }
    .ds-cat { padding: var(--s-3); gap: var(--s-3); }
    .ds-cat__media { inline-size: 4.4rem; block-size: 4.4rem; }
    .ds-trust { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* Home grid: a slightly wider media ratio than the listing page's square, so
   four cards in a row stay compact instead of becoming tall columns. Scoped to
   .ds-grid--products so the products listing keeps its 1:1 boxes. */
.ds-grid--products .ds-product__media { aspect-ratio: 4 / 3; }

/* Narrow phones: the bar holds a drawer toggle, a wordmark and five controls.
   At 360-430px that overflows, and the cart — the one control a shopper must
   always be able to reach — was the one pushed off the edge. The wishlist is
   dropped instead: it is still reachable from the account menu and the drawer.
   The wordmark also steps down a size. */
@media (max-width: 479px) {
    .ds-header__wish { display: none; }
    .ds-header__logo img { block-size: 3rem; }
}

/* ===========================================================================
   39. FOOTER
   ---------------------------------------------------------------------------
   Owns the footer layout so the theme's float-based .footer-middle columns are
   no longer involved. Logical properties throughout, so the columns and the
   text align to the correct edge in both directions with no RTL overrides.
   =========================================================================== */
.ds-footer {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: var(--s-8);
    padding-block: var(--s-10) var(--s-8);
    text-align: start;
}
/* Type selector included deliberately, like img.ds-hero__img above: the
   generic .ds-scope img rule in section 2 sets height:auto and is (0,1,1),
   so a bare .ds-footer__logo is (0,1,0) and loses. block-size and height are
   the same property once resolved, so the logo fell back to its intrinsic
   679x172 and filled the whole brand column. */
img.ds-footer__logo { block-size: 4rem; inline-size: auto; object-fit: contain; }
.ds-footer__tag {
    margin-block: var(--s-4) 0;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    line-height: var(--lh-normal);
    max-inline-size: 34rem;
}
.ds-footer__social { display: flex; gap: var(--s-2); margin-block-start: var(--s-5); }
.ds-footer__social a {
    inline-size: var(--tap);
    block-size: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    color: var(--c-text-muted);
    background: var(--c-surface);
}
.ds-footer__social a:hover { border-color: var(--c-accent); color: var(--c-accent); }

.ds-footer__title {
    font-size: var(--t-sm);
    font-weight: var(--w-semi);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-text);
    margin: 0 0 var(--s-4);
}
/* Arabic has no caps, so letter-spacing and uppercase only distort it. */
[lang="ar"] .ds-footer__title { text-transform: none; letter-spacing: 0; font-size: var(--t-base); }

.ds-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.ds-footer__list a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-block-size: var(--tap);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    text-decoration: none;
}
.ds-footer__list a:hover { color: var(--c-accent); }
.ds-footer__hours {
    font-size: var(--t-sm);
    color: var(--c-text-faint);
    padding-block: var(--s-2);
    line-height: var(--lh-normal);
}

.ds-footer__bottom {
    border-block-start: 1px solid var(--c-border);
    padding-block: var(--s-5);
}
.ds-footer__bottom p {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--c-text-faint);
    text-align: center;
}

@media (max-width: 991px) {
    .ds-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
    .ds-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
    .ds-footer { grid-template-columns: minmax(0, 1fr); }
}

/* Section 40 (nav dropdowns) was superseded by section 42. */

/* ===========================================================================
   41. PROMO BAND (revised)
   =========================================================================== */
.ds-promo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: linear-gradient(135deg, #1b2333 0%, #2c3550 100%);
    border: 0;
}
.ds-promo__media { position: relative; min-block-size: 26rem; }
.ds-promo__media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
/* Fades the artwork into the copy panel so an arbitrary upload never ends in a
   hard vertical seam down the middle of the band. */
.ds-promo__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to var(--promo-fade, right),
                rgba(27, 35, 51, 0) 55%, rgba(27, 35, 51, .96) 100%);
}
[dir="rtl"] .ds-promo { --promo-fade: left; }

.ds-promo__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s-4);
    padding: var(--s-10) var(--s-8);
}
.ds-promo__body .ds-eyebrow { color: #e8c46a; margin: 0; }
.ds-promo__text {
    font-size: var(--t-xl);
    font-weight: var(--w-semi);
    line-height: var(--lh-tight);
    letter-spacing: -.01em;
    color: #fff;
    margin: 0;
    max-inline-size: 30ch;
    /* Admin copy can run long; cap it rather than let the band grow. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 991px) {
    .ds-promo { grid-template-columns: minmax(0, 1fr); }
    .ds-promo__media { min-block-size: 18rem; }
    .ds-promo__media::after {
        background: linear-gradient(to bottom, rgba(27, 35, 51, 0) 40%, rgba(27, 35, 51, .96) 100%);
    }
    .ds-promo__body { padding: var(--s-6); }
    .ds-promo__text { font-size: var(--t-lg); }
}

/* ===========================================================================
   42. NAVIGATION DROPDOWNS (rebuilt)
   ---------------------------------------------------------------------------
   Replaces section 40. The theme positions submenus with PHYSICAL offsets
   (`right: 0` for the panel, `right: 100%` for a nested one). In an RTL
   document that sends the nested flyout away from its parent instead of
   toward it, which is why the second level appeared detached and overlapping.
   Logical offsets make one rule correct in both directions: panels align to
   their parent's inline start, and nested panels fly out toward the inline
   end — right in LTR, left in RTL.
   =========================================================================== */

/* --- top-level trigger --------------------------------------------------- */
.ds-header__nav .menu > li > a {
    position: relative;
    gap: var(--s-2);
}
.ds-header__nav .menu > li > a::after { display: none; }

/* A caret, drawn rather than borrowed from the icon font so it inherits
   colour and never depends on a webfont having loaded.

   position: static is the important line. The theme positions this
   pseudo-element absolutely, so with left:0 it landed on the LEFT EDGE of
   its own link — i.e. hard against the item before it. Four categories in
   a row therefore read as "Women > Men > Shoes > Accessories", a
   breadcrumb trail rather than four separate links. Static puts it back in
   the flex flow so the link gap places it after its own label. */
.ds-header__nav .menu > li > .sf-with-ul::after {
    position: static;
    display: block;
    content: "";
    flex: none;
    inline-size: .5rem;
    block-size: .5rem;
    margin-block-start: -.2rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .5;
    transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.ds-header__nav .menu > li:hover > .sf-with-ul::after,
.ds-header__nav .menu > li.show > .sf-with-ul::after {
    opacity: 1;
    transform: rotate(225deg) translate(-.15rem, -.15rem);
}

/* The open trigger reads as selected without the theme's solid amber fill. */
.ds-header__nav .menu > li:hover > a,
.ds-header__nav .menu > li.show > a {
    color: var(--c-accent);
    background: var(--c-accent-soft);
}

/* --- panel --------------------------------------------------------------- */
.ds-header__nav .menu ul {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    inset-inline-end: auto;
    z-index: 1002;

    min-inline-size: 24rem;
    padding: var(--s-2);
    margin-block-start: var(--s-1);

    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: 0 12px 32px -8px rgba(20, 26, 38, .18),
                0 2px 8px rgba(20, 26, 38, .06);

    /* A long flat list scrolls rather than running off the window. overflow-x
       stays hidden so the scroll container never grows a second scrollbar. */
    max-block-size: min(64vh, 48rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border-strong) transparent;
}

/* A panel that hosts a third-level flyout cannot be a scroll container: an
   absolutely positioned descendant still counts toward a scrolling ancestor,
   so the panel grew a horizontal scrollbar and would have clipped the flyout.
   These size to their content. The class is set server-side from the tree. */
.ds-header__nav .menu ul.ds-submenu--flyout {
    max-block-size: none;
    overflow: visible;
}
.ds-header__nav .menu ul::-webkit-scrollbar { inline-size: 4px; }
.ds-header__nav .menu ul::-webkit-scrollbar-thumb {
    background: var(--c-border-strong);
    border-radius: var(--r-full);
}
.ds-header__nav .menu ul::-webkit-scrollbar-track { background: transparent; }

/* Nested panel: opens alongside its parent, toward the inline end. */
.ds-header__nav .menu ul ul {
    inset-block-start: calc(-1 * var(--s-2));
    inset-inline-start: 100%;
    inset-inline-end: auto;
    margin-block-start: 0;
    margin-inline-start: var(--s-1);
}

/* Long lists split into two columns; short ones stay single so the panel is
   not mostly empty gutter. The class is set server-side from the child count.

   Grid, not CSS multicol: a multicol box that runs out of height does not
   scroll, it keeps ADDING columns sideways, so the panel overflowed its own
   width. Grid grows downward instead, which is what makes the height cap and
   overflow-y actually work. */
.ds-header__nav .menu ul.ds-submenu--wide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--s-2);
    align-content: start;
    min-inline-size: 44rem;
}
/* A nested panel is always a single column, whatever its parent is. */
.ds-header__nav .menu ul ul { display: block; min-inline-size: 22rem; }

/* --- panel item ---------------------------------------------------------- */
.ds-header__nav .menu ul li a {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-block-size: 3.6rem;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    font-weight: var(--w-regular);
    color: var(--c-text-muted);
    text-decoration: none;
    line-height: var(--lh-tight);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ds-header__nav .menu ul li > a:hover,
.ds-header__nav .menu ul li:hover > a {
    background: var(--c-bg-subtle);
    color: var(--c-text);
}

/* Chevron on an item that has its own submenu, pinned to the inline end and
   pointing the way the panel will actually open. */
.ds-header__nav .menu ul li > .sf-with-ul::after {
    display: block;
    content: "";
    inline-size: .45rem;
    block-size: .45rem;
    margin-inline-start: auto;
    flex: none;
    border-block-start: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .45;
}
[dir="rtl"] .ds-header__nav .menu ul li > .sf-with-ul::after {
    transform: rotate(-135deg);
}
.ds-header__nav .menu ul li:hover > .sf-with-ul::after { opacity: 1; }

/* ===========================================================================
   43. HERO (refined)
   =========================================================================== */
.ds-hero {
    position: relative;
    display: flex;
    align-items: center;
    block-size: clamp(30rem, 44vw, 50rem);
    overflow: hidden;
    background: var(--c-bg-sunken);
    isolation: isolate;
}

/* Two layers: a directional wash that anchors the copy to the inline start,
   and a light bottom lift so the indicators stay legible over any artwork.
   The wash is what lets the photograph stay visible instead of being flattened
   under one uniform dark sheet. */
.ds-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to var(--hero-wash, right),
            rgba(11, 15, 23, .88) 0%,
            rgba(11, 15, 23, .70) 34%,
            rgba(11, 15, 23, .28) 66%,
            rgba(11, 15, 23, .12) 100%),
        linear-gradient(to bottom, rgba(11, 15, 23, .10), rgba(11, 15, 23, .45));
}
[dir="rtl"] .ds-hero { --hero-wash: left; }

.ds-hero__content {
    position: relative;
    z-index: 2;
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    gap: var(--s-5);
}
/* Everything in the copy column shares one measure. */
.ds-hero__content > * { max-inline-size: 52rem; }

/* A short accent rule above the headline — structure, not invented copy. */
.ds-hero__title::before {
    content: "";
    display: block;
    inline-size: 4.8rem;
    block-size: 3px;
    border-radius: var(--r-full);
    background: var(--c-accent);
    margin-block-end: var(--s-4);
}
.ds-hero__title {
    font-size: clamp(var(--t-2xl), 3.6vw, 4.8rem);
    font-weight: var(--w-bold);
    line-height: 1.12;
    letter-spacing: -.025em;
    color: #fff;
    margin: 0;
    text-wrap: balance;
}
.ds-hero__text {
    font-size: var(--t-md);
    line-height: var(--lh-relaxed);
    color: rgba(255, 255, 255, .82);
    margin: 0;
}
.ds-hero .ds-btn--lg { box-shadow: 0 8px 24px -8px rgba(184, 134, 11, .7); }

/* Arabic runs a touch larger: Almarai's x-height is smaller than Inter's at
   the same nominal size, so matching sizes would read as a smaller headline. */
[lang="ar"] .ds-hero__title { letter-spacing: 0; line-height: 1.25; }

/* Slide indicators */
/* Centring with inset-inline-start:50% + translateX(-50%) is not direction
   safe: inset-inline-start resolves to `right` in RTL while translateX still
   moves along the physical X axis, so the dots slid into the corner. Spanning
   the full width and centring with justify-content works in both. */
.ds-herodots {
    position: absolute;
    inset-block-end: var(--s-6);
    inset-inline: 0;
    display: flex;
    justify-content: center;
    gap: var(--s-1);
    z-index: 3;
}
.ds-herodot::before {
    inline-size: 1.8rem;
    block-size: 3px;
    background: rgba(255, 255, 255, .38);
    transition: inline-size var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.ds-herodot.is-active::before { inline-size: 3.6rem; background: #fff; }

@media (max-width: 767px) {
    .ds-hero { block-size: clamp(26rem, 64vw, 34rem); }
    .ds-hero__content { gap: var(--s-4); }
    .ds-hero__title::before { inline-size: 3.6rem; margin-block-end: var(--s-3); }
    .ds-hero__text { font-size: var(--t-base); }
}

/* ===========================================================================
   44. HEADER — stop the nav colliding with the account/cart icons
   ---------------------------------------------------------------------------
   With seven top-level categories the menu wanted 1000px of a 753px track, so
   it overflowed and ran underneath the search, account, wishlist and cart
   icons. `.ds-header__nav` already shrinks correctly; what overflowed was the
   <ul> inside it, which is `overflow: visible` because the dropdown panels are
   absolutely positioned children and clipping would cut them off.

   So the space has to come from somewhere else. Three sources, no clipping:

   1. The search block was reserving ~116px while showing only its 44px toggle.
      The wrapper it holds is `position: absolute` and `display: none` until the
      toggle opens it, but the <form> around it is a block and stretched, so the
      nav was losing ~72px to an element with nothing in it. Sizing the block to
      the toggle gives that back. Opening the search is unaffected — the wrapper
      is positioned against this block, not laid out inside it.

   2. The theme uppercases the nav labels, which costs about 14% of their width
      for no benefit. Sentence case also suits Arabic, which has no capitals and
      where uppercase and letter-spacing only distort the shapes.

   3. On a wide screen the header was still capped at the 1280px container, so a
      1920px monitor gained nothing. Above 1400px it gets a wider one.
   =========================================================================== */

.ds-header__search { inline-size: var(--tap); flex: none; }

/* Top-level nav spacing.
   This block used to halve the item padding to var(--s-1) because the old
   catalogue had SEVEN top-level categories with long labels ("LED Strips &
   Profiles", "Smart & Control") that ran under the account and cart icons at
   1280. The fashion catalogue has four short ones, so the labels take about
   220px of a 900px track and the squeeze is no longer paying for anything —
   it just made the items read as one run-on cluster. */
.ds-header__nav .menu > li > a {
    text-transform: none;
    letter-spacing: 0;
    padding-inline: var(--s-4);
    font-size: var(--t-base);
}

/* Breathing room between the items themselves, not only inside them. */
.ds-header__nav .menu { gap: var(--s-2); }

/* The caret belongs to the label in front of it. At the old spacing it sat
   almost touching the NEXT item, so a row of four categories read like a
   breadcrumb trail. Tucked closer to its own word and lightened. */
.ds-header__nav .menu > li > a { gap: var(--s-1); }
.ds-header__nav .menu > li > .sf-with-ul::after { opacity: .38; }

@media (min-width: 1400px) {
    .ds-header { max-inline-size: 144rem; }
}

/* Narrower desktops get a smaller step rather than the old hard squeeze; the
   four labels still clear the icons with room to spare at 1024. */


/* ===========================================================================
   45. PRODUCTS / CATEGORY LISTING
   ---------------------------------------------------------------------------
   Owns the listing layout so the theme's Bootstrap .row / .col-lg-9 /
   .col-lg-3 grid is no longer involved. The page previously put its content
   column in a white box with an inline `padding:20px;background-color:#fff`
   and left the sidebar as a plain column, so the two halves shared neither an
   alignment nor a surface.

   The card itself is NOT redefined here: the grid holds the same
   productCard() component the home page uses.
   =========================================================================== */

.ds-listing {
    display: grid;
    grid-template-columns: 26rem minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
    padding-block-end: var(--s-12);
}

/* --- filter rail --------------------------------------------------------- */
.ds-filters {
    position: sticky;
    inset-block-start: var(--s-6);
    max-block-size: calc(100vh - var(--s-12));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border-strong) transparent;
    padding: var(--s-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}
.ds-filters::-webkit-scrollbar { inline-size: 4px; }
.ds-filters::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-full); }

.ds-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-block-end: var(--s-4);
    margin-block-end: var(--s-2);
    border-block-end: 1px solid var(--c-border);
}
.ds-filters__head h2 {
    margin: 0;
    font-size: var(--t-base);
    font-weight: var(--w-semi);
    color: var(--c-text);
}

/* The theme's .widget blocks are reused as the group container, so the
   existing collapse behaviour and the server-rendered inputs keep working. */
.ds-filters .widget { border: 0; padding: 0; margin: 0 0 var(--s-2); }
.ds-filters .widget-title { margin: 0; font-size: var(--t-sm); }
.ds-filters .widget-title > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    min-block-size: var(--tap);
    padding: 0;
    font-size: var(--t-sm);
    font-weight: var(--w-semi);
    color: var(--c-text);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}
/* A caret that follows the open state, drawn rather than borrowed from the
   icon font so it never depends on a webfont having loaded.

   position:static is doing real work. The legacy theme styles the same
   pseudo-element as an icon-font glyph pinned with
   position:absolute; top:50%; left:1.6rem. This rule only replaced its
   content and box, not its positioning, so the caret stayed out of flow and
   landed on top of the first characters of the label instead of flowing to
   the end of the flex row. Returning it to the flow lets
   justify-content:space-between on the parent place it. */
.ds-filters .widget-title > a::after {
    content: "";
    position: static;
    flex: none;
    inline-size: .5rem;
    block-size: .5rem;
    margin-block-start: -.2rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .5;
    transition: transform var(--dur-fast) var(--ease);
}
.ds-filters .widget-title > a[aria-expanded="true"]::after {
    transform: rotate(225deg) translate(-.15rem, -.15rem);
    opacity: 1;
}
.ds-filters .widget-body { padding: 0 0 var(--s-3); }

/* Long option lists are capped and scroll instead of running the rail to
   several screens tall. */
.ds-filters .filter-items {
    max-block-size: 22rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: var(--s-1);
}
.ds-filters .filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    min-block-size: var(--tap);
}
.ds-filters .custom-control {
    padding: 0;
    margin: 0;
    min-block-size: var(--tap);
    display: flex;
    align-items: center;
}
.ds-filters .custom-control-label {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    cursor: pointer;
    padding-inline-start: var(--s-6);
    overflow-wrap: anywhere;
}
.ds-filters .custom-control-input:checked ~ .custom-control-label {
    color: var(--c-text);
    font-weight: var(--w-medium);
}
.ds-filters .item-count { font-size: var(--t-xs); color: var(--c-text-faint); flex: none; }

/* --- listing column ------------------------------------------------------ */
.ds-listing__main { min-inline-size: 0; }

/* Four across where the column allows it, then down in steps. Explicit
   columns rather than auto-fill, so the count is predictable at each
   breakpoint instead of drifting with the card's intrinsic width. */
.ds-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }

.ds-listing__search { position: relative; flex: 1 1 22rem; min-inline-size: 0; }
.ds-listing__search .ds-input { inline-size: 100%; }
.ds-listing__results {
    position: absolute;
    inset-block-start: calc(100% + var(--s-1));
    inset-inline: 0;
    z-index: 40;
    max-block-size: 34rem;
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: 0 12px 32px -8px rgba(20, 26, 38, .18);
}
.ds-listing__results:empty { display: none; }

/* --- mobile filter drawer ------------------------------------------------ */
.ds-filters-toggle { display: none; }
.ds-drawer-backdrop { display: none; }

@media (min-width: 992px) {
    /* The drawer's own chrome is meaningless while the rail is inline. */
    .ds-filters__close, .ds-filters__apply { display: none; }
}

@media (max-width: 1199px) {
    .ds-listing { grid-template-columns: 24rem minmax(0, 1fr); gap: var(--s-6); }
    .ds-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .ds-listing { grid-template-columns: minmax(0, 1fr); }
    .ds-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ds-filters-toggle { display: inline-flex; }

    /* Below the desktop breakpoint the rail becomes a drawer rather than a
       squeezed column: a sidebar narrowed to phone width is unusable, and
       stacking it above the grid pushes every product off the first screen. */
    .ds-filters {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 1200;
        inline-size: min(34rem, 88vw);
        max-block-size: 100vh;
        border-radius: 0;
        border-inline-start: 0;
        padding-block-end: 9rem;
        transform: translateX(-100%);
        transition: transform var(--dur-base) var(--ease);
        visibility: hidden;
    }
    [dir="rtl"] .ds-filters { transform: translateX(100%); }
    .ds-filters.is-open { transform: none; visibility: visible; }

    .ds-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1199;
        background: rgba(11, 15, 23, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
    }
    .ds-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

    /* Pinned so it stays reachable without scrolling back up through a long
       filter list. */
    .ds-filters__apply {
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        display: flex;
        gap: var(--s-3);
        padding: var(--s-4);
        background: var(--c-surface);
        border-block-start: 1px solid var(--c-border);
    }
    .ds-filters__apply .ds-btn { flex: 1 1 auto; }
    .ds-filters .filter-items { max-block-size: none; }
}

@media (max-width: 767px) {
    .ds-grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}
@media (max-width: 359px) {
    /* Two cards stop being readable below this width. */
    .ds-grid--products { grid-template-columns: minmax(0, 1fr); }
}

/* The toolbar switches to a column below 768px. A flex-basis set for the
   horizontal case then applies to the BLOCK axis, so the search row claimed
   30rem of height and left a 300px hole between the heading and the first
   product. Basis only while the toolbar is a row. */
.ds-toolbar__lead { flex: 0 1 auto; min-inline-size: 0; }
@media (min-width: 769px) {
    /* Grows only while the toolbar is a row. Left growable in the column
       case it stretched to fill the toolbar and left 30px of dead space
       above the search field. */
    .ds-toolbar__lead { flex: 1 1 30rem; }
}

/* The toolbar is `flex-wrap: wrap` for its horizontal case. Once it becomes a
   column below 768px that wrap produces a phantom second line, so the search
   row measured 104px for 44px of content and the first product sat 60px lower
   than it should. Wrapping has no purpose in the column case. */
@media (max-width: 768px) {
    .ds-toolbar { flex-wrap: nowrap; }
}

/* ===========================================================================
   46. PRODUCT DETAILS
   ---------------------------------------------------------------------------
   Additions to the Phase 5 .ds-pdp block, not a replacement for it.
   =========================================================================== */

/* --- gallery -------------------------------------------------------------
   The main image is a scroll-snap track rather than one <img>, so a phone can
   swipe between photographs. Same approach as the home hero, for the same
   reason: the theme's carousel is not direction-aware and put the Arabic
   gallery off-screen.
   ------------------------------------------------------------------------- */
.ds-gallery__main { position: relative; }

.ds-gallery__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-lg);
}
.ds-gallery__track::-webkit-scrollbar { display: none; }

.ds-gallery__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin: 0;
    aspect-ratio: 1 / 1;
    background: var(--c-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ds-gallery__slide img {
    inline-size: 100%;
    block-size: 100%;
    /* contain, so a tall fitting and a wide driver both sit in the same box
       without either being cropped or stretched. */
    object-fit: contain;
    padding: var(--s-5);
}

.ds-gallery__zoom {
    position: absolute;
    inset-block-end: var(--s-3);
    inset-inline-end: var(--s-3);
    z-index: 2;
    inline-size: var(--tap);
    block-size: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
}
.ds-gallery__zoom:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* The thumbnails keep .product-gallery-item so elevateZoom still finds them,
   and the theme sizes that class through a two-class selector that outranked
   the 72px square set earlier in this file — the thumbnails came out 145x62,
   so every photograph was letterboxed into a wide slot. Matching the theme's
   specificity and winning on source order puts them back on the square the
   rest of the gallery uses. */
.ds-gallery__thumbs .ds-gallery__thumb {
    flex: 0 0 auto;
    inline-size: 7.2rem;
    block-size: 7.2rem;
}
.ds-gallery__thumb[aria-current="true"] {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px var(--c-accent-ring);
}

/* --- rating under the product name --------------------------------------- */
.ds-pdp__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    text-decoration: none;
    color: var(--c-text-muted);
    font-size: var(--t-sm);
    min-block-size: var(--tap);
}
.ds-pdp__rating:hover { color: var(--c-text); }
.ds-stars { display: inline-flex; gap: .2rem; color: #e0a800; font-size: var(--t-sm); }
/* The star row is a rating, not a direction: it reads the same way round in
   both languages, so it is pinned to LTR. */
.ds-stars { direction: ltr; }
.ds-pdp__rating-count { color: var(--c-text-faint); }

/* --- long description ----------------------------------------------------- */
.ds-prose { line-height: var(--lh-relaxed); color: var(--c-text); }
.ds-prose > :first-child { margin-block-start: 0; }
.ds-prose > :last-child { margin-block-end: 0; }
.ds-prose p { margin-block: 0 var(--s-4); max-inline-size: 78ch; }
.ds-prose table { margin-block-start: var(--s-5); }

@media (max-width: 991px) {
    .ds-gallery__slide img { padding: var(--s-4); }
}
@media (max-width: 767px) {
    /* Thumbnails stay, but the track is the primary control on a phone. */
    .ds-gallery__thumbs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .ds-gallery__thumbs::-webkit-scrollbar { display: none; }
    .ds-gallery__thumb { flex: 0 0 auto; }
}

/* ===========================================================================
   47. CART
   ---------------------------------------------------------------------------
   Additions to the Phase 5 .ds-cart / .ds-cartline blocks. The line gains a
   quantity stepper, so it needs a column for it and a busy state while the
   server is deciding.
   =========================================================================== */

/* Each line is a row on desktop and a small card on a phone. No table: a
   five-column table on a 360px screen is the thing this replaces. */
.ds-cartline {
    display: grid;
    grid-template-columns: 8.8rem minmax(0, 1fr) auto;
    gap: var(--s-4);
    align-items: center;
    padding-block: var(--s-4);
    border-block-end: 1px solid var(--c-border);
}
.ds-cartline:last-child { border-block-end: 0; padding-block-end: 0; }
.ds-cartline:first-child { padding-block-start: 0; }

.ds-cartline__media {
    inline-size: 8.8rem;
    block-size: 8.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    overflow: hidden;
}
.ds-cartline__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: var(--s-2);
}

.ds-cartline__body { min-inline-size: 0; display: grid; gap: var(--s-1); }
.ds-cartline__name {
    font-weight: var(--w-medium);
    color: var(--c-text);
    text-decoration: none;
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
}
.ds-cartline__name:hover { color: var(--c-accent); }
.ds-cartline__meta { font-size: var(--t-sm); color: var(--c-text-muted); }
.ds-cartline__was { text-decoration: line-through; color: var(--c-text-faint); margin-inline-start: var(--s-1); }
.ds-cartline__note { font-size: var(--t-xs); color: var(--c-warning); margin: 0; }
.ds-cartline__warn { font-size: var(--t-xs); color: var(--c-danger); margin: 0; font-weight: var(--w-medium); }

.ds-cartline__end {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    justify-content: flex-end;
}
.ds-cartline__total { font-weight: var(--w-semi); min-inline-size: 10ch; text-align: end; }

.ds-cartline__remove {
    flex: none;
    inline-size: var(--tap);
    block-size: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    border-radius: var(--r-full);
    color: var(--c-text-faint);
    cursor: pointer;
}
.ds-cartline__remove:hover { color: var(--c-danger); background: var(--c-bg-subtle); }

/* A compact stepper for the line; the page-level one stays as it is. */
.ds-qty--sm { flex: none; }
.ds-qty--sm .ds-qty__btn { inline-size: 3.4rem; block-size: 3.4rem; }
.ds-qty--sm input { inline-size: 4.4rem; block-size: 3.4rem; text-align: center; }

/* While the server is deciding, the row says so and stops accepting input —
   otherwise a fast second click posts a quantity based on a stale number. */
.ds-cartline.is-busy { opacity: .55; pointer-events: none; }

.ds-summary__row--save .ds-summary__label,
.ds-summary__row--save .ds-num { color: var(--c-success); }

/* The summary follows on a long cart rather than scrolling out of reach. */
@media (min-width: 992px) {
    .ds-aside { position: sticky; inset-block-start: var(--s-6); }
}

@media (max-width: 767px) {
    /* Image and text on one row, controls on their own beneath — the three
       columns would otherwise squeeze the name to a couple of words. */
    .ds-cartline {
        grid-template-columns: 7.2rem minmax(0, 1fr);
        gap: var(--s-3);
        row-gap: var(--s-3);
    }
    .ds-cartline__media { inline-size: 7.2rem; block-size: 7.2rem; }
    .ds-cartline__end {
        grid-column: 1 / -1;
        justify-content: space-between;
        gap: var(--s-3);
    }
    .ds-cartline__total { min-inline-size: 0; }
}

/* ===========================================================================
   48. CHECKOUT
   =========================================================================== */

/* Field errors reuse the existing .ds-field__error; only the invalid state of
   the control itself is new here. */
.ds-input.is-invalid,
.ds-select.is-invalid,
[aria-invalid="true"].ds-input,
[aria-invalid="true"].ds-select {
    border-color: var(--c-danger);
}
.ds-input.is-invalid:focus,
.ds-select.is-invalid:focus { box-shadow: 0 0 0 3px var(--c-danger-soft); }

/* While the server is re-quoting delivery the figures are stale, so the card
   says so instead of showing a total that is about to change. */
#ds-order-summary.is-busy { opacity: .6; }

/* Checkout's own two-column proportions. It was an inline style on the element,
   which then needed !important to undo at narrow widths; as a modifier it just
   takes part in the cascade. */
/* The storefront sets html { font-size: 62.5% }, so 1rem is 10px here. This
   was 24rem, i.e. 240px — a summary column barely wider than its own total,
   against a 980px form. It now matches the cart page (33.6rem = 336px), so
   the two pages read as one layout. */
.ds-cart--checkout { grid-template-columns: minmax(0, 1fr) 33.6rem; }
@media (max-width: 991px) {
    .ds-cart--checkout { grid-template-columns: minmax(0, 1fr); }

    /* Stacked, the order is: details, how you pay, what you are paying for,
       then the button. Choosing the payment method before reading the total
       keeps the total the last thing seen before committing. */
    .ds-cart--checkout .ds-aside > .ds-scope { display: flex; flex-direction: column; gap: var(--s-4); }
    .ds-cart--checkout .ds-aside > .ds-scope > #ds-order-summary { order: 2; margin-block-start: 0; }
    .ds-cart--checkout .ds-aside > .ds-scope > fieldset { order: 1; margin-block-start: 0; }
    .ds-cart--checkout .ds-aside > .ds-scope > #btn_checkout { order: 3; margin-block-start: 0; }
}

/* ===========================================================================
   49. AUTH (sign-in page)
   ---------------------------------------------------------------------------
   A single narrow column. Deliberately not a full-bleed hero with artwork:
   the page has one job and everything on it is either a field, the button, or
   a way out of it.
   =========================================================================== */

.ds-auth {
    display: flex;
    justify-content: center;
    padding-block: var(--s-10) var(--s-12);
}
.ds-auth__card {
    inline-size: 100%;
    max-inline-size: 42rem;
    padding: var(--s-8);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}
.ds-auth__brand { display: block; margin-block-end: var(--s-6); }
/* The logo is a wordmark: it reads left to right in both languages. */
.ds-auth__brand img { block-size: 4rem; inline-size: auto; object-fit: contain; direction: ltr; }

.ds-auth__title {
    font-size: var(--t-xl);
    font-weight: var(--w-semi);
    line-height: var(--lh-tight);
    margin: 0 0 var(--s-2);
    color: var(--c-text);
}
.ds-auth__intro {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    margin: 0 0 var(--s-6);
    line-height: var(--lh-normal);
}

.ds-auth__foot {
    margin-block-start: var(--s-4);
    font-size: var(--t-sm);
    text-align: center;
}
.ds-auth__alt {
    margin-block: var(--s-5) 0;
    padding-block-start: var(--s-5);
    border-block-start: 1px solid var(--c-border);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    text-align: center;
}

/* --- input with a trailing control ---------------------------------------- */
.ds-inputgroup { position: relative; display: flex; align-items: stretch; }
.ds-inputgroup .ds-input {
    inline-size: 100%;
    /* Room for the button, on whichever side the inline end is. */
    padding-inline-end: var(--tap);
}
.ds-inputgroup__btn {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--c-text-faint);
    cursor: pointer;
}
.ds-inputgroup__btn:hover { color: var(--c-text); }

/* The icon font has an eye but no crossed-out variant, so the revealed state
   is drawn: a line through the icon, which is the same convention without
   depending on a glyph that is not in the font. */
.ds-inputgroup__btn[aria-pressed="true"] { color: var(--c-accent); }
.ds-inputgroup__btn[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    inline-size: 2rem;
    block-size: 1.5px;
    background: currentColor;
    transform: rotate(-45deg);
}

@media (max-width: 479px) {
    .ds-auth { padding-block: var(--s-6) var(--s-10); }
    .ds-auth__card { padding: var(--s-5); border-radius: var(--r-md); }
}

/* --- social sign-in ------------------------------------------------------- */
.ds-auth__sep {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-block: var(--s-5);
    color: var(--c-text-faint);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
}
/* Arabic has no capitals; uppercase and tracking only distort it. */
[lang="ar"] .ds-auth__sep { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); }
.ds-auth__sep::before,
.ds-auth__sep::after {
    content: "";
    flex: 1 1 auto;
    block-size: 1px;
    background: var(--c-border);
}

.ds-auth__social { display: grid; gap: var(--s-3); }
.ds-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
}
.ds-social__mark {
    inline-size: 2rem;
    block-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: var(--r-full);
    font-weight: var(--w-bold);
    font-size: var(--t-sm);
    /* The provider marks are set in their own colours, which is what the
       brand guidelines of both require; nothing else on the page uses them. */
    direction: ltr;
}
.ds-social--google .ds-social__mark { color: #4285f4; }
.ds-social--facebook .ds-social__mark { color: #1877f2; }
.ds-social:hover { border-color: var(--c-border-strong); background: var(--c-bg-subtle); }

/* ===========================================================================
   50. ORDER CONFIRMATION
   ---------------------------------------------------------------------------
   A confirmation, not a celebration. One line of reassurance, the reference
   and the date — no full-width success panel, no illustration, no animation.
   Everything else on the page is the order itself.
   =========================================================================== */

.ds-confirm {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-5);
    border: 1px solid var(--c-success);
    border-radius: var(--r-lg);
    background: var(--c-success-soft);
    margin-block-end: var(--s-6);
}
.ds-confirm__mark {
    flex: 0 0 auto;
    inline-size: 4rem;
    block-size: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-success);
    color: #fff;
    font-size: var(--t-md);
}
.ds-confirm__title {
    margin: 0;
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--c-success-ink, #14603a);
}
.ds-confirm__text {
    margin: var(--s-1) 0 0;
    color: var(--c-success-ink, #14603a);
}
.ds-confirm__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    margin: var(--s-3) 0 0;
    font-size: var(--t-sm);
    color: var(--c-success-ink, #14603a);
}
.ds-confirm__meta strong { margin-inline-start: var(--s-1); }

/* The scroller is the existing .ds-table-wrap; only .ds-table--order is new. */
/* The wrapper scrolls, so the table keeps a workable width instead of
   crushing four columns of money into a phone and wrapping every cell. */
.ds-table--order { min-inline-size: 46rem; }
.ds-table--order td { vertical-align: middle; }
.ds-table--order th:not(:first-child),
.ds-table--order td:not(:first-child) { white-space: nowrap; }
.ds-orderline { display: flex; align-items: center; gap: var(--s-3); }
.ds-orderline__media {
    flex: 0 0 auto;
    inline-size: 5.6rem;
    block-size: 5.6rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--c-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ds-orderline__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ds-orderline__placeholder { color: var(--c-text-faint); font-size: var(--t-md); }
.ds-orderline__body { min-inline-size: 0; }
.ds-orderline__name { display: block; font-weight: 500; }
.ds-orderline__ref {
    display: block;
    font-size: var(--t-xs);
    color: var(--c-text-faint);
}

@media (max-width: 767px) {
    .ds-confirm { flex-direction: column; gap: var(--s-3); padding: var(--s-4); }
    .ds-orderline__media { inline-size: 4.4rem; block-size: 4.4rem; }
}

/* ===========================================================================
   51. MY ACCOUNT — ORDER CARDS
   ---------------------------------------------------------------------------
   A compact card per order: what it is, what state it is in, what it cost,
   and a way through to the detail. The lines sit behind a disclosure so a
   long history stays scannable.
   =========================================================================== */

.ds-order {
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    overflow: hidden;
}
.ds-order__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4);
    border-block-end: 1px solid var(--c-border);
    background: var(--c-bg-subtle);
}
.ds-order__ref { font-weight: var(--w-semi); }
.ds-order__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
}
.ds-order__body { padding: var(--s-4); }
.ds-order__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    margin-block-end: var(--s-3);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}
.ds-order__total { color: var(--c-text); }
.ds-order__items > summary {
    cursor: pointer;
    min-block-size: var(--tap);
    display: flex;
    align-items: center;
    font-weight: var(--w-medium);
}
.ds-order__items .ds-table-wrap { margin-block-start: var(--s-3); }
.ds-order__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-block-start: var(--s-4);
}

/* A second badge tone for payment state, so it reads as information rather
   than as another order status. */
.ds-badge--muted {
    background: var(--c-bg-subtle);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}

@media (max-width: 767px) {
    .ds-order__head { align-items: flex-start; }
    .ds-order__facts { gap: var(--s-1) var(--s-4); }
}

/* The account layout, its sidebar and its responsive collapse now live in
   section 55 (MY ACCOUNT DASHBOARD), with the rest of that page. */

/* ===========================================================================
   52. MY ORDERS — status chips and pager extras
   ---------------------------------------------------------------------------
   .ds-chip already exists as a removable filter tag on the products listing,
   where every chip shown IS active. Here the same shape is used for
   navigation, so it needs a resting state to contrast against: --nav is
   neutral until .is-active puts it back into the accent.
   =========================================================================== */

.ds-chip--nav {
    background: var(--c-surface);
    color: var(--c-text-muted);
    border-color: var(--c-border);
    text-decoration: none;
}
.ds-chip--nav:hover {
    border-color: var(--c-text);
    color: var(--c-text);
}
.ds-chip--nav.is-active {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    border-color: var(--c-accent);
}
.ds-chip__count {
    font-size: var(--t-xs);
    opacity: .75;
}

/* Previous / Next read as words rather than numbers, so they get room. */
.ds-pagination__step {
    padding-inline: var(--s-4) !important;
    inline-size: auto !important;
}
.ds-pagination__gap {
    border: 0 !important;
    background: transparent !important;
    color: var(--c-text-faint);
}

/* A long address, note or carrier reference has to give way rather than push
   the layout sideways — these land in narrow table cells on a phone. */
.ds-wrap {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ===========================================================================
   53. WISHLIST — unavailable tile
   ---------------------------------------------------------------------------
   A saved product the shop no longer sells. It keeps the card's footprint so
   the grid does not break rhythm, but reads as inert: no price, no button,
   just what happened and a way to clear it.
   =========================================================================== */

.ds-product--gone { background: var(--c-bg-subtle); }
.ds-product__media--gone {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    color: var(--c-text-faint);
    font-size: var(--t-xl);
    background: var(--c-border-subtle, var(--c-bg-subtle));
    border-block-end: 1px solid var(--c-border);
}
.ds-product--gone .ds-product__title { color: var(--c-text-muted); }
.ds-product__gone-note {
    margin: var(--s-2) 0 0;
    font-size: var(--t-sm);
    color: var(--c-text-faint);
}

/* The remove control sits in the same slot the wishlist heart uses elsewhere,
   so it is always visible here rather than waiting for a hover that never
   happens on a touch screen. */
.ds-grid--products .ds-product .delete_wishlist,
.ds-product--gone .ds-product__actions { opacity: 1; }
.ds-grid--products .ds-product__actions:has(.delete_wishlist) {
    opacity: 1;
    transform: none;
}

/* ===========================================================================
   54. PUBLIC / CMS CONTENT
   ---------------------------------------------------------------------------
   The legal and informational pages are running text, which needs different
   treatment from a product grid: a measure the eye can track, headings that
   separate sections without shouting, and lists that read as lists.
   =========================================================================== */

.ds-prose {
    /* .ds-narrow--wide caps the column at 70.4rem; this sets the size inside
       it. The theme puts paragraphs at 1.4rem, which is fine for a product
       blurb and too small for several screens of policy — long-form text
       gets --t-md and a loose line-height so the eye can find the next line. */
    font-size: var(--t-md);
    line-height: 1.75;
    color: var(--c-text);
}
.ds-prose p,
.ds-prose li,
.ds-prose address { font-size: var(--t-md); }
.ds-prose > :first-child { margin-block-start: 0; }
.ds-prose > :last-child  { margin-block-end: 0; }

.ds-prose p {
    margin-block: 0 var(--s-4);
    /* A long unbroken URL in a policy must not push the page sideways. */
    overflow-wrap: anywhere;
}
.ds-prose__heading,
.ds-prose h2 {
    margin-block: var(--s-7) var(--s-3);
    font-size: var(--t-lg);
    font-weight: var(--w-semi);
    line-height: 1.3;
}
.ds-prose h3 {
    margin-block: var(--s-5) var(--s-2);
    font-size: var(--t-md);
    font-weight: var(--w-semi);
}
.ds-prose ul,
.ds-prose ol {
    margin-block: 0 var(--s-4);
    padding-inline-start: var(--s-6);
}
.ds-prose li { margin-block-end: var(--s-2); }
.ds-prose a { text-decoration: underline; }

/* Sits between sections, never at the end of the page. */
.ds-prose__rule {
    border: 0;
    border-block-start: 1px solid var(--c-border);
    margin-block: var(--s-7) 0;
}

/* A table inside policy text scrolls rather than widening the page. */
.ds-prose table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block-end: var(--s-4);
    font-size: var(--t-sm);
}
.ds-prose th,
.ds-prose td {
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-border);
    text-align: start;
}

.ds-prose__figure {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    margin-block-end: var(--s-6);
}

@media (max-width: 767px) {
    .ds-prose { line-height: 1.7; }
    .ds-prose__heading,
    .ds-prose h2 { margin-block-start: var(--s-6); }
}

/* ===========================================================================
   55. MY ACCOUNT — DASHBOARD
   ---------------------------------------------------------------------------
   The account page used to be a shared .ds-cart grid with the tab list glued
   to a hairline border and every dimension written as an inline style on the
   element. Three consequences: the sidebar could not be themed without
   editing PHP, the generic .ds-pagehead band opened the page with a lot of
   empty space above a single muted line, and the panes below had no headings
   at all.

   This section owns the whole page instead — hero, summary, navigation card
   and pane headers — so the markup carries classes rather than style
   attributes, and the layout has one place to change.

   Every rule here is logical-property based: the same sheet lays the sidebar
   out on the left in English and on the right in Arabic with no [dir] forks.
   =========================================================================== */

/* -------------------------------------------------------------- 55.1 HERO */
/* Tighter than .ds-pagehead deliberately: --s-7/--s-6 there opened the page
   with roughly a hundred pixels of nothing before the first real content. */
.ds-accthero {
    background: var(--c-bg-subtle);
    border-block-end: 1px solid var(--c-border);
    padding-block: var(--s-4) var(--s-6);
    margin-block-end: var(--s-6);
}
.ds-accthero__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-4);
}
.ds-accthero__id {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-inline-size: 0;
}

/* Initials, not a remote avatar: they are derived from data the page already
   has, render identically offline, and add no third-party request. */
.ds-avatar {
    flex: 0 0 auto;
    inline-size: 5.6rem;
    block-size: 5.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    background: var(--c-accent-soft);
    border: 1px solid rgba(184, 134, 11, .22);
    color: var(--c-accent-hover);
    font-size: var(--t-lg);
    font-weight: var(--w-semi);
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none;
}
.ds-accthero__text { min-inline-size: 0; }
.ds-accthero__title {
    font-size: var(--t-xl);
    font-weight: var(--w-semi);
    line-height: var(--lh-tight);
    color: var(--c-text);
    margin: 0;
}
.ds-accthero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-4);
    margin: var(--s-2) 0 0;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}
.ds-accthero__meta > span {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-inline-size: 0;
}
.ds-accthero__meta i { font-size: var(--t-base); color: var(--c-text-faint); }
.ds-accthero__who {
    color: var(--c-text);
    font-size: var(--t-base);
    font-weight: var(--w-semi);
    /* An email or a pasted display name can be longer than the column. */
    overflow-wrap: anywhere;
}
.ds-accthero__since {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    background: var(--c-surface);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}
.ds-accthero__since i { color: var(--c-text-faint); }

/* ----------------------------------------------------------- 55.2 SUMMARY */
.ds-acctstats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
    margin-block-end: var(--s-6);
}
.ds-acctstat {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--e-sm);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
a.ds-acctstat:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--e-md);
    color: inherit;
    text-decoration: none;
}
a.ds-acctstat:focus-visible {
    outline: 3px solid var(--c-accent-ring);
    outline-offset: 2px;
}
.ds-acctstat__icon {
    flex: 0 0 auto;
    inline-size: 4.4rem;
    block-size: 4.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--c-bg-subtle);
    color: var(--c-text-muted);
    font-size: var(--t-md);
}
.ds-acctstat__text {
    /* Spans, so they have to be told to stack — otherwise the figure and
       its label share a line and the card reads as a sentence. */
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}
.ds-acctstat__value {
    font-size: var(--t-lg);
    font-weight: var(--w-semi);
    line-height: var(--lh-tight);
    color: var(--c-text);
}
.ds-acctstat__label {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    margin-block-start: 2px;
}
.ds-acctstat--accent .ds-acctstat__icon { background: var(--c-accent-soft); color: var(--c-accent-hover); }
.ds-acctstat--ok     .ds-acctstat__icon { background: var(--c-success-soft); color: var(--c-success); }
.ds-acctstat--warn   .ds-acctstat__icon { background: var(--c-warning-soft); color: var(--c-warning); }

/* ------------------------------------------------------------ 55.3 LAYOUT */
.ds-account {
    display: grid;
    grid-template-columns: 24rem minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
}

/* ------------------------------------------------------- 55.4 NAVIGATION */
.ds-acctnav {
    /* A flex column, so the log-out link can sit OUTSIDE the tablist — a
       tablist may only contain tabs, and log out is a plain navigation link.
       On narrow screens the same container becomes a row. */
    display: flex;
    flex-direction: column;
    position: sticky;
    inset-block-start: var(--s-5);
    padding: var(--s-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--e-sm);
}
/* .ds-tabs is a horizontal strip with a baseline border and its own bottom
   margin. Reset what does not apply once it is a vertical card. */
.ds-acctnav .ds-tabs {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    border-block-end: 0;
    overflow: visible;
}
.ds-acctnav .ds-tabs__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    inline-size: 100%;
    min-block-size: var(--tap);
    padding-inline: var(--s-3);
    padding-block: var(--s-2);
    border-radius: var(--r-md);
    border-block-end: 0;
    white-space: normal;
    color: var(--c-text-muted);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ds-acctnav .ds-tabs__link i {
    flex: 0 0 auto;
    inline-size: 2rem;
    text-align: center;
    font-size: var(--t-md);
    color: var(--c-text-faint);
}
.ds-acctnav .ds-tabs__link:hover { background: var(--c-bg-subtle); color: var(--c-text); }
.ds-acctnav .ds-tabs__link:hover i { color: var(--c-text-muted); }
.ds-acctnav .ds-tabs__link.active,
.ds-acctnav .ds-tabs__link[aria-selected="true"] {
    background: var(--c-accent-soft);
    color: var(--c-text);
    font-weight: var(--w-semi);
    border-block-end-color: transparent;
}
.ds-acctnav .ds-tabs__link.active i,
.ds-acctnav .ds-tabs__link[aria-selected="true"] i { color: var(--c-accent-hover); }
/* The accent marker is a pseudo-element on the inline start edge, so it
   flips to the right-hand edge in Arabic without a second rule. */
.ds-acctnav .ds-tabs__link.active::before,
.ds-acctnav .ds-tabs__link[aria-selected="true"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: var(--s-2);
    inline-size: 3px;
    border-radius: var(--r-full);
    background: var(--c-accent);
}
.ds-acctnav .ds-tabs__link:focus-visible {
    outline: 3px solid var(--c-accent-ring);
    outline-offset: -2px;
    border-radius: var(--r-md);
}
.ds-acctnav__sep {
    block-size: 1px;
    margin: var(--s-2) var(--s-3);
    background: var(--c-border);
}
.ds-acctnav__out:hover { background: var(--c-danger-soft); color: var(--c-danger); }
.ds-acctnav__out:hover i { color: var(--c-danger); }
/* The icon font has no sign-out glyph, so the arrow stands in — mirrored in
   Arabic so it still points away from the page, the same trick the pager
   already uses for its next arrow. */
[dir="rtl"] .ds-acctnav__out i { transform: scaleX(-1); }

/* ------------------------------------------------------ 55.5 PANE HEADERS */
/* Each pane had no heading of its own, so the page went from the h1 straight
   to the card titles inside two of the four panes, and to nothing at all in
   the other two. One h2 per pane restores the outline. */
.ds-acctpanel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    margin-block-end: var(--s-4);
}
.ds-acctpanel__title {
    font-size: var(--t-lg);
    font-weight: var(--w-semi);
    line-height: var(--lh-tight);
    margin: 0;
}
.ds-acctpanel__note {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}

/* The "Change password" entry scrolls its card into view. Leave room above
   it so the heading does not sit flush against the top of the viewport. */
.ds-acct-anchor { scroll-margin-block-start: var(--s-6); }

/* ------------------------------------------------- 55.6 RICH EMPTY STATE */
/* The dashed .ds-empty reads as a placeholder slot, which is right inside a
   filtered list and wrong as the first thing a new customer sees. This
   variant is a real card with a filled icon well and room for two actions. */
.ds-empty--rich {
    border-style: solid;
    border-color: var(--c-border);
    background: var(--c-surface);
    box-shadow: var(--e-sm);
    padding-block: var(--s-12);
}
.ds-empty--rich .ds-empty__icon {
    inline-size: 7.2rem;
    block-size: 7.2rem;
    background: var(--c-accent-soft);
    color: var(--c-accent-hover);
    font-size: var(--t-2xl);
    margin-block-end: var(--s-5);
}
.ds-empty--rich .ds-empty__title { font-size: var(--t-lg); }
.ds-empty--rich .ds-empty__text {
    font-size: var(--t-base);
    max-inline-size: 44ch;
    margin-inline: auto;
}
.ds-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: center;
}

/* ------------------------------------------------------- 55.7 RESPONSIVE */
@media (max-width: 1199px) {
    .ds-account { grid-template-columns: 21rem minmax(0, 1fr); }
}

/* The sidebar and a two-column form stop fitting side by side well before
   the cart layout does, so this page collapses at its own breakpoint. The
   navigation becomes a horizontal, scrollable pill row rather than a stack,
   which keeps it one thumb-reach tall at the top of the page. */
@media (max-width: 991px) {
    .ds-account { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
    /* The whole strip scrolls as one, rather than the tab list scrolling
       underneath a log-out link pinned to the end of the row, which left an
       entry sliced in half against it. */
    .ds-acctnav {
        position: static;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .ds-acctnav .ds-tabs {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--s-1);
        overflow: visible;
    }
    .ds-acctnav > .ds-tabs__link { flex: 0 0 auto; }
    .ds-acctnav .ds-tabs .nav-item { flex: 0 0 auto; }
    /* Four cards across a tablet leave about 168px each, which wraps the
       longer labels onto a second line. The summary drops to 2x2 at the
       same width the page itself collapses. */
    .ds-acctstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-acctnav .ds-tabs__link {
        inline-size: auto;
        white-space: nowrap;
        padding-inline: var(--s-4);
        border-radius: var(--r-full);
    }
    .ds-acctnav .ds-tabs__link.active::before,
    .ds-acctnav .ds-tabs__link[aria-selected="true"]::before { content: none; }
    .ds-acctnav__sep {
        inline-size: 1px;
        block-size: 2.4rem;
        margin-inline: var(--s-2);
        margin-block: 0;
    }
}

@media (max-width: 767px) {
    .ds-acctstats { gap: var(--s-3); }
    .ds-accthero { padding-block: var(--s-3) var(--s-5); margin-block-end: var(--s-5); }
    .ds-accthero__title { font-size: var(--t-lg); }
    /* The meta list wraps to three lines at this width, and a centred avatar
       then sits beside the middle of the block instead of beside the name. */
    .ds-accthero__id { align-items: flex-start; }
    .ds-avatar { inline-size: 4.8rem; block-size: 4.8rem; font-size: var(--t-md); }
    .ds-acctpanel__title { font-size: var(--t-md); }
    .ds-empty--rich { padding-block: var(--s-8); }
}

@media (max-width: 479px) {
    .ds-acctstat { gap: var(--s-3); padding: var(--s-3); }
    .ds-acctstat__icon { inline-size: 3.6rem; block-size: 3.6rem; font-size: var(--t-base); }
    .ds-acctstat__value { font-size: var(--t-md); }
    .ds-acctstat__label { font-size: var(--t-xs); }
    .ds-accthero__since { display: none; }
    .ds-empty__actions .ds-btn { inline-size: 100%; justify-content: center; }
}

/* ===========================================================================
   Contact page.

   The three detail cards used to sit in a row across the top with the form
   squeezed into the middle third below them, which left a band of empty space
   between the heading and the only control on the page. Form and details now
   sit side by side, and the contact methods are rows with icons rather than a
   stack of bare links.
   ======================================================================== */
.ds-contact {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
}

.ds-contact__aside { display: grid; gap: var(--s-4); align-content: start; }

@media (max-width: 900px) {
    /* One column, and the form keeps its place at the top: it is what the
       visitor came for. */
    .ds-contact { grid-template-columns: minmax(0, 1fr); }
}

.ds-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }

.ds-contact__item { display: flex; align-items: flex-start; gap: var(--s-3); }

.ds-contact__icon {
    flex: none;
    inline-size: 3.6rem;
    block-size: 3.6rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: 1.5rem;
}

.ds-contact__body { display: flex; flex-direction: column; min-inline-size: 0; }

.ds-contact__label {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-text-faint);
}

.ds-contact__value { color: var(--c-text); overflow-wrap: anywhere; }
.ds-contact__value a { color: var(--c-text); text-decoration: none; }
.ds-contact__value a:hover { color: var(--c-accent); text-decoration: underline; }
.ds-contact__value address { margin: 0; font-style: normal; }

/* Social buttons. The old ones were ~18px icons sitting on top of each other
   with no hit area worth the name. */
.ds-social__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.ds-social {
    inline-size: 4.4rem;
    block-size: 4.4rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: 1.7rem;
    text-decoration: none;
    transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}

.ds-social:hover, .ds-social:focus-visible { color: var(--c-text-invert); transform: translateY(-2px); }
.ds-social--facebook:hover,  .ds-social--facebook:focus-visible  { background: #1877f2; border-color: #1877f2; }
.ds-social--whatsapp:hover,  .ds-social--whatsapp:focus-visible  { background: #1da851; border-color: #1da851; }
.ds-social--instagram:hover, .ds-social--instagram:focus-visible { background: #c13584; border-color: #c13584; }
.ds-social--youtube:hover,   .ds-social--youtube:focus-visible   { background: #c4302b; border-color: #c4302b; }
.ds-social:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .ds-social { transition: none; }
    .ds-social:hover, .ds-social:focus-visible { transform: none; }
}