/* "DM Scripts": Indian scripts and Arabic (Noto Sans, OFL, in fonts/noto). The heading and text fonts fall back to it, and a
   browser downloads a script's file only when that script is on the page. */
@font-face { font-family: "DM Scripts"; src: url("../fonts/noto/devanagari-600.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+A8E0-A8FF; }
@font-face { font-family: "DM Scripts"; src: url("../fonts/noto/bengali-600.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0980-09FE; }
@font-face { font-family: "DM Scripts"; src: url("../fonts/noto/gurmukhi-600.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0A00-0A76; }
@font-face { font-family: "DM Scripts"; src: url("../fonts/noto/gujarati-600.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0A80-0AFF; }
@font-face { font-family: "DM Scripts"; src: url("../fonts/noto/tamil-600.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0B80-0BFA; }
@font-face { font-family: "DM Scripts"; src: url("../fonts/noto/telugu-600.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0C00-0C7F; }
@font-face { font-family: "DM Scripts"; src: url("../fonts/noto/kannada-600.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0C80-0CF3; }
@font-face { font-family: "DM Scripts"; src: url("../fonts/noto/malayalam-600.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0D00-0D7F; }
@font-face { font-family: "DM Scripts"; src: url("../fonts/noto/arabic-600.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

/* Dazzle Monk: a store theme for ForgePanel. Colours, fonts and corners come from Theme options as
   --dm-* variables (see dm_style()). Logical properties throughout so RTL mirrors. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--dm-bg); color: var(--dm-text); font: 15px/1.6 var(--dm-font); -webkit-font-smoothing: antialiased; }
::selection { background: var(--dm-sel-bg, #000); color: var(--dm-sel-text, #fff); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--dm-font-head); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
h4, h5, h6 { margin: 0; font-family: var(--dm-font-sub, var(--dm-font-head)); line-height: 1.25; text-wrap: balance; }
/* Sub headings: the small lines above and under headings (Theme options › Fonts › Sub headings). */
.dm-kicker, .dm-slide-kicker, .dm-banner-kicker, .dm-fs-head p { font-family: var(--dm-font-sub, var(--dm-font-head)); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-sr { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dm-skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; border-radius: var(--dm-r-btn); background: var(--dm-secondary); color: var(--dm-on-secondary); }
.dm-skip:focus { top: 1rem; }
.dm-i { flex: none; }
[hidden] { display: none !important; }

:root {
    --dm-line: color-mix(in srgb, var(--dm-text) 12%, transparent);
    --dm-soft: color-mix(in srgb, var(--dm-text) 4%, var(--dm-bg));
    --dm-muted: color-mix(in srgb, var(--dm-text) 62%, var(--dm-bg));
    --dm-primary-soft: color-mix(in srgb, var(--dm-primary) 10%, var(--dm-bg));
    --dm-line-soft: color-mix(in srgb, var(--dm-text) 6%, var(--dm-bg));
    --dm-img-bg: color-mix(in srgb, var(--dm-text) 5%, var(--dm-bg));
    --dm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* ForgePanel's shared date picker (core/datepicker.css) reads these: the store's own colours. */
    --fp-primary: var(--dm-primary); --fp-on-primary: var(--dm-on-primary); --fp-primary-soft: var(--dm-primary-soft);
    --fp-text: var(--dm-text); --fp-text-2: var(--dm-muted); --fp-text-3: var(--dm-muted); --fp-danger: #dc2626;
    --fp-border: var(--dm-line); --fp-border-strong: color-mix(in srgb, var(--dm-text) 28%, var(--dm-bg));
    --fp-surface: var(--dm-bg); --fp-surface-2: var(--dm-soft); --fp-font: var(--dm-font); --fp-font-head: var(--dm-font-head);
    --fp-radius-sm: var(--dm-r-sm); --fp-radius: var(--dm-r-btn); --fp-radius-lg: var(--dm-r); --fp-radius-pill: 999px;
    --fp-pop-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.3);
    /* The shared theme variables that apps style their own pages with (any theme sets these). */
    --theme-primary: var(--dm-primary); --theme-on-primary: var(--dm-on-primary); --theme-secondary: var(--dm-secondary);
    --theme-text: var(--dm-text); --theme-bg: var(--dm-bg); --theme-line: var(--dm-line); --theme-muted: var(--dm-muted);
    --theme-soft: var(--dm-soft); --theme-img-bg: var(--dm-img-bg); --theme-font-head: var(--dm-font-head);
    --theme-r: var(--dm-r); --theme-r-btn: var(--dm-r-btn); --theme-r-sm: var(--dm-r-sm); --theme-primary-soft: var(--dm-primary-soft);
    --theme-btn: var(--dm-btn); --theme-on-btn: var(--dm-on-btn); --theme-btn-hover: var(--dm-btn-hover); --theme-on-btn-hover: var(--dm-on-btn-hover);
}
.dm-wrap { width: 100%; max-width: 82rem; margin-inline: auto; padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px)); }
@media (min-width: 64em) { .dm-wrap { padding-inline: 1.5rem; } }

/* Buttons */
.dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.75rem; padding: 0 1.25rem; border: 1.5px solid var(--dm-btn); border-radius: var(--dm-r-btn); background: var(--dm-btn); color: var(--dm-on-btn); font-weight: 600; font-size: 0.9rem; white-space: nowrap; transition: background-color 0.45s var(--dm-ease), color 0.45s var(--dm-ease), border-color 0.45s var(--dm-ease), transform 0.55s var(--dm-ease); }
.dm-btn:hover { border-color: var(--dm-btn-hover); background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
/* Grow: on hover a button grows 10% and the colour flows in; full-width buttons grow less so they stay inside their box. */
.dm-btn:hover, .dm-btn:focus-visible { transform: scale(1.1); }
.dm-btn.is-block:hover, .dm-btn.is-auth:hover, .dm-btn.is-block:focus-visible, .dm-btn.is-auth:focus-visible { transform: scale(1.015); }
.dm-btn:active { transform: scale(0.97); transition-duration: 0.2s; }
.dm-btn > svg { transition: transform 0.45s var(--dm-ease); }
.dm-btn:hover > svg { transform: translateX(3px); }
[dir='rtl'] .dm-btn:hover > svg { transform: translateX(-3px); }
[dir='rtl'] .dm-btn:hover > svg.is-dir { transform: translateX(-3px) scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .dm-btn, .dm-btn > svg { transform: none !important; } }
.dm-btn.is-primary { border-color: var(--dm-btn); background: var(--dm-btn); color: var(--dm-on-btn); }
.dm-btn.is-primary:hover { border-color: var(--dm-btn-hover); background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
.dm-btn.is-light { height: 2.9rem; padding: 0 1.85rem; border-color: #fff; border-radius: var(--dm-r-sm); background: #fff; color: #000; font-weight: 500; }
.dm-btn.is-light:hover { border-color: var(--dm-btn-hover); background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
/* A hero slide's own button colours (each slide's Button colour / on hover). */
.dm-btn.is-light.has-own { border-color: var(--dm-sb, #fff); background: var(--dm-sb, #fff); color: var(--dm-sb-ink, #000); }
.dm-btn.is-light.has-own:hover { border-color: var(--dm-sbh, var(--dm-btn-hover)); background: var(--dm-sbh, var(--dm-btn-hover)); color: var(--dm-sbh-ink, var(--dm-on-btn-hover)); }
.dm-btn.is-ghost { border-color: var(--dm-line); background: transparent; color: var(--dm-text); }
.dm-btn.is-ghost:hover { border-color: var(--dm-btn-hover); background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
.dm-btn.is-lg { height: 3.25rem; padding: 0 1.75rem; font-size: 0.95rem; }
.dm-btn.is-block { width: 100%; }
.dm-btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }
.dm-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.dm-kicker { display: inline-block; color: var(--dm-primary); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.dm-icon-btn { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: var(--dm-r-btn); background: none; }
.dm-icon-btn:hover { background: var(--dm-soft); }

/* ── Header (laid out after Shofy's header 1) ── */
.dm-header { position: relative; z-index: 40; }
.dm-topbar { border-bottom: 1px solid color-mix(in srgb, var(--dm-top-text) 9%, transparent); background: var(--dm-top-bg); color: var(--dm-top-text); font-size: 0.82rem; font-weight: 500; }
.dm-topbar .dm-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.15rem; }
.dm-notes { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.dm-notes button { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; color: inherit; opacity: 0.8; }
.dm-notes button:hover { opacity: 1; color: var(--dm-primary); }
.dm-notes p { min-width: 0; margin-inline-start: 0.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-notes p span { animation: dm-fade 0.4s; }
.dm-notes p a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dm-notes p a:hover { color: var(--dm-primary); }
.dm-notes .dm-notes-x { margin-inline-start: 0.25rem; opacity: 0.65; }
.dm-topbar nav { display: flex; margin-inline-start: auto; } /* stays on the right when the messages are closed or empty */
.dm-topbar nav a { padding: 0.1rem 0.9rem; opacity: 0.85; }
.dm-topbar nav a + a { border-inline-start: 1px solid color-mix(in srgb, var(--dm-top-text) 22%, transparent); }
.dm-topbar nav a:last-child { padding-inline-end: 0; }
.dm-topbar nav a:hover { opacity: 1; color: var(--dm-primary); }
/* Language menu (Website › Languages) */
.dm-lang { position: relative; margin-inline-start: 0.4rem; padding-inline-start: 0.9rem; border-inline-start: 1px solid color-mix(in srgb, var(--dm-top-text) 22%, transparent); }
.dm-lang summary { display: flex; align-items: center; gap: 0.35rem; list-style: none; cursor: pointer; opacity: 0.85; }
.dm-lang summary::-webkit-details-marker { display: none; }
.dm-lang summary:hover, .dm-lang[open] summary { opacity: 1; color: var(--dm-primary); }
.dm-lang ul { position: absolute; inset-block: calc(100% + 0.5rem) auto; inset-inline: auto 0; z-index: 60; min-width: 10rem; margin: 0; padding: 0.35rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); color: var(--dm-text); list-style: none; box-shadow: 0 12px 30px rgb(0 0 0 / 0.12); }
.dm-topbar nav .dm-lang ul a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0.6rem; border: 0; border-radius: calc(var(--dm-r-sm) * 0.7); opacity: 1; font-weight: 500; }
.dm-topbar nav .dm-lang ul a:hover { background: var(--dm-soft); color: var(--dm-text); }
.dm-topbar nav .dm-lang ul a[aria-current] { color: var(--dm-primary); }
.dm-lang li + li { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--dm-line); }
.dm-mainbar { background: var(--dm-header-bg); color: var(--dm-header-text); }
.dm-mainbar .dm-wrap { display: flex; align-items: center; gap: 2rem; padding-block: 1.7rem; }
.dm-burger { display: none; }
.dm-logo { display: inline-flex; flex: none; align-items: center; gap: 0.6rem; min-width: 12rem; }
.dm-logo img { height: var(--dm-logo-h); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
[dir="rtl"] .dm-logo img { object-position: right center; }
.dm-logo-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: calc(var(--dm-r) * 0.9); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-logo-mark .dm-i { fill: currentColor; stroke: none; }
.dm-logo-mark.is-own { width: var(--dm-logo-h); height: var(--dm-logo-h); border-radius: 0; background: none; }
.dm-logo-mark.is-own img { width: 100%; height: 100%; }
.dm-logo-night { display: none; }
.dm-logo-name { font: 700 1.3rem/1 var(--dm-font-head); letter-spacing: -0.02em; }
.dm-search { display: flex; flex: 1; align-items: stretch; max-width: 36rem; height: 3.15rem; margin-inline-start: 2.5rem; border: 1px solid var(--dm-btn); border-radius: var(--dm-r-sm); background: var(--dm-bg); overflow: hidden; }
.dm-search input { flex: 1; min-width: 0; padding: 0 1.5rem; border: 0; outline: 0; background: none; font-size: 0.92rem; }
.dm-search input::placeholder { color: var(--dm-muted); }
.dm-search-cat { position: relative; display: flex; flex: none; align-items: center; }
.dm-search-cat::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; width: 1px; height: 1.25rem; background: color-mix(in srgb, var(--dm-text) 30%, transparent); transform: translateY(-50%); }
.dm-search-cat select { height: 100%; width: 10.5rem; padding: 0 2.25rem 0 0.25rem; padding-inline-start: 0.25rem; border: 0; background: none; font-size: 0.88rem; appearance: none; cursor: pointer; text-indent: 0.25rem; }
.dm-search-cat .dm-i { position: absolute; inset-inline-end: 1rem; pointer-events: none; }
.dm-search button { display: grid; place-items: center; flex: none; width: 3.75rem; border: 0; background: var(--dm-btn); color: var(--dm-on-btn); transition: background-color 0.2s, color 0.2s; }
.dm-search button:hover { background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
/* The bar no longer clips (its suggestions hang below), so the button follows its curve itself. */
.dm-search button { border-start-end-radius: max(0px, calc(var(--dm-r-sm) - 1px)); border-end-end-radius: max(0px, calc(var(--dm-r-sm) - 1px)); }
.dm-actions { display: flex; flex: none; align-items: center; gap: 1.6rem; margin-inline-start: auto; }
.dm-account { display: inline-flex; align-items: center; gap: 0.65rem; margin-inline-end: 1.5rem; }
.dm-account-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--dm-line); border-radius: 50%; transition: border-color 0.2s, color 0.2s; }
.dm-account:hover .dm-account-ic { border-color: var(--dm-primary); color: var(--dm-primary); }
.dm-account-t { display: flex; flex-direction: column; gap: 0.2rem; line-height: 1; }
.dm-account-t small { font-size: 0.75rem; font-weight: 500; opacity: 0.75; }
.dm-account-t b { font-size: 0.88rem; font-weight: 500; }
.dm-act { position: relative; display: inline-flex; transition: color 0.2s; }
.dm-act:hover { color: var(--dm-primary); }
.dm-act em { position: absolute; top: -0.45rem; inset-inline-end: -0.8rem; display: grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 0.25rem; border: 2px solid var(--dm-header-bg); border-radius: 999px; background: var(--dm-btn); color: var(--dm-on-btn); font-size: 0.72rem; font-style: normal; font-weight: 700; line-height: 1; }
.dm-menubar { background: var(--dm-menu-bg); color: var(--dm-menu-text); border-top: 1px solid color-mix(in srgb, var(--dm-menu-text) 10%, transparent); }
.dm-menubar .dm-wrap { display: flex; align-items: center; gap: 2rem; min-height: 3.15rem; }
.dm-allcats { position: relative; align-self: stretch; display: flex; flex: none; width: calc((100% - 3rem) * 0.25 - 1rem); min-width: 14rem; }
.dm-allcats-btn { display: inline-flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0 1.9rem; border: 0; background: var(--dm-btn); color: var(--dm-on-btn); font-weight: 500; font-size: 0.92rem; transition: background-color 0.2s, color 0.2s; }
.dm-allcats-btn:hover, .dm-allcats.is-open .dm-allcats-btn { background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
.dm-allcats-btn span { flex: 1; text-align: start; }
.dm-allcats-btn > .dm-i:last-child { transition: transform 0.25s; }
.dm-allcats.is-open .dm-allcats-btn > .dm-i:last-child { transform: rotate(180deg); }
.dm-allcats-list { position: absolute; top: 100%; inset-inline: 0; z-index: 30; margin: 0; padding: 0.5rem 0; list-style: none; border: 1px solid var(--dm-line); border-top: 0; background: var(--dm-bg); box-shadow: 0 10px 30px rgb(1 15 28 / 0.1); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s, transform 0.25s var(--dm-ease), visibility 0.2s; }
.dm-allcats.is-open .dm-allcats-list { opacity: 1; visibility: visible; transform: none; }
.dm-allcats-list a { display: flex; justify-content: space-between; padding: 0.6rem 1.9rem; color: var(--dm-text); font-size: 0.9rem; transition: color 0.15s; }
.dm-allcats-list a:hover { color: var(--dm-primary); }
.dm-allcats-list small { color: var(--dm-muted); }
.dm-allcats-list .is-dir { color: var(--dm-muted); }
.dm-allcats-more { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--dm-line); }
.dm-allcats-list .dm-allcats-more a { color: var(--dm-primary); font-weight: 500; }
/* A main category's sub-categories open beside the list as small pictures. */
.dm-allcats-fly { position: absolute; top: -1px; inset-inline-start: 100%; min-height: calc(100% + 1px); width: 27rem; padding: 1.1rem 1.25rem 1.25rem; border: 1px solid var(--dm-line); background: var(--dm-bg); box-shadow: 0 10px 30px rgb(1 15 28 / 0.1); opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; }
.dm-allcats-list > li:hover > .dm-allcats-fly, .dm-allcats-list > li:focus-within > .dm-allcats-fly { opacity: 1; visibility: visible; }
.dm-allcats-list > li.has-kids:hover > a, .dm-allcats-list > li.has-kids:focus-within > a { color: var(--dm-primary); }
.dm-allcats-list .dm-allcats-fly a { padding: 0; }
.dm-allcats-fly-all { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.9rem; font-family: var(--dm-font-sub, var(--dm-font-head)); font-weight: 600; }
.dm-allcats-fly ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 0.75rem; margin: 0; padding: 0; list-style: none; }
.dm-allcats-list .dm-allcats-fly li a { flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; }
.dm-allcats-pic { display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin-bottom: 0.35rem; overflow: hidden; border-radius: var(--dm-r); background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-allcats-pic img { width: 100%; height: 100%; object-fit: cover; }
.dm-allcats-fly b { font-family: var(--dm-font-head); font-weight: 500; font-size: 0.75rem; line-height: 1.3; overflow-wrap: break-word; }
.dm-allcats-fly li small { font-size: 0.72rem; }
.dm-nav { flex: 1; }
.dm-nav > ul { display: flex; gap: 1.85rem; margin: 0; padding: 0; list-style: none; }
.dm-nav li { position: relative; }
.dm-nav > ul > li > a { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.95rem 0; font-family: var(--dm-font-sub, var(--dm-font-head)); font-weight: 600; font-size: 0.92rem; transition: color 0.2s; }
.dm-nav > ul > li > a .dm-i { transition: transform 0.25s; }
.dm-nav a:hover, .dm-nav a.is-here { color: var(--dm-primary); }
.dm-nav li.has-sub:hover > a .dm-i, .dm-nav li.has-sub:focus-within > a .dm-i { transform: rotate(180deg); }
.dm-sub { position: absolute; top: 100%; inset-inline-start: -1.5rem; z-index: 30; min-width: 14rem; margin: 0; padding: 1rem 0; list-style: none; background: var(--dm-bg); box-shadow: 0 10px 30px rgb(1 15 28 / 0.12); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.2s, transform 0.25s var(--dm-ease), visibility 0.2s; }
.dm-nav li.has-sub:hover > .dm-sub, .dm-nav li.has-sub:focus-within > .dm-sub { opacity: 1; visibility: visible; transform: none; }
.dm-sub a { display: block; padding: 0.35rem 1.5rem; color: var(--dm-text); font-size: 0.9rem; transition: color 0.15s, padding 0.25s var(--dm-ease); }
.dm-sub a:hover { padding-inline-start: 1.85rem; }
.dm-hotline { display: inline-flex; flex: none; align-items: center; gap: 0.65rem; }
.dm-hotline .dm-i { color: var(--dm-primary); }
.dm-hotline span { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1; }
.dm-hotline small { font-size: 0.75rem; font-weight: 500; }
.dm-hotline b { font-size: 0.88rem; font-weight: 500; }
.dm-hotline:hover b { color: var(--dm-primary); }
/* Hotline and the second link (e.g. Support) side by side at the end of the menu bar. */
.dm-bar-links { display: flex; flex: none; align-items: center; gap: 2rem; }
.dm-support-pic { width: 22px; height: 22px; object-fit: contain; }
.dm-support span:only-child, .dm-support b:only-child { line-height: 1.2; }
/* The Support link reads like the menu beside it: the menu font, same weight and size. */
.dm-support b { font-family: var(--dm-font-sub, var(--dm-font-head)); font-weight: 600; font-size: 0.92rem; }
@media (max-width: 1199.98px) { .dm-bar-links { gap: 1.25rem; } .dm-bar-links small { display: none; } }
/* Sticky: the main bar slides down once the page scrolls */
.dm-header.is-sticky.is-stuck[data-dm-bar='main'] .dm-mainbar { position: fixed; top: var(--fp-admin-bar, 0px); inset-inline: 0; padding-inline-end: var(--dm-sbw, 0px); z-index: 50; }
/* Slimmer once the page has moved on; eased both ways, and full size again before the bar rejoins the page. */
.dm-header.is-sticky .dm-mainbar { transition: box-shadow 0.3s; }
.dm-header.is-sticky .dm-mainbar .dm-wrap { transition: padding-block 0.3s var(--dm-ease); }
.dm-header.is-compact[data-dm-bar='main'] .dm-mainbar { box-shadow: 0 2px 6px rgb(1 15 28 / 0.16); }
.dm-header.is-compact[data-dm-bar='main'] .dm-mainbar .dm-wrap { padding-block: 1rem; }
/* Only the menu bar stays (the default on computers): it turns the page colour (white; the dark page colour in
   dark mode) with the menu in the text colour, a hairline and a soft shadow, and slides in from the top. */
.dm-header.is-sticky.is-stuck[data-dm-bar='menu'] .dm-menubar { position: fixed; top: var(--fp-admin-bar, 0px); inset-inline: 0; z-index: 50; padding-inline-end: var(--dm-sbw, 0px);
    border-top: 0; border-bottom: 1px solid var(--dm-line); background: color-mix(in srgb, var(--dm-bg) 97%, transparent); color: var(--dm-text);
    /* No backdrop blur: on a bar that stays put while the page scrolls under it, Safari and Firefox redo the blur
       on every frame of scrolling (the lag outside Chrome). At 97% the page colour looks the same without it. */
    /* A real shadow: a tight contact shade right under the bar, then softer, wider layers falling off. */
    box-shadow: 0 1px 1px rgb(15 23 42 / 0.06), 0 2px 4px -1px rgb(15 23 42 / 0.07), 0 6px 12px -4px rgb(15 23 42 / 0.08), 0 14px 28px -12px rgb(15 23 42 / 0.12);
    animation: dm-down 0.35s var(--dm-ease); }
/* Dark mode: the same falloff, deeper, so the bar still lifts off a dark page. */
html[data-dm-theme='dark'] .dm-header.is-stuck[data-dm-bar='menu'] .dm-menubar { box-shadow: 0 1px 1px rgb(0 0 0 / 0.35), 0 3px 6px -1px rgb(0 0 0 / 0.35), 0 8px 16px -4px rgb(0 0 0 / 0.4), 0 18px 36px -12px rgb(0 0 0 / 0.55); }
@media (prefers-color-scheme: dark) { html:not([data-dm-theme='light']) .dm-header.is-stuck[data-dm-bar='menu'] .dm-menubar { box-shadow: 0 1px 1px rgb(0 0 0 / 0.35), 0 3px 6px -1px rgb(0 0 0 / 0.35), 0 8px 16px -4px rgb(0 0 0 / 0.4), 0 18px 36px -12px rgb(0 0 0 / 0.55); } }
.dm-header.is-stuck[data-dm-bar='menu'] .dm-menubar .dm-nav a.is-here, .dm-header.is-stuck[data-dm-bar='menu'] .dm-menubar .dm-nav > ul > li > a:hover { color: var(--dm-primary); }
.dm-header.is-stuck[data-dm-bar='menu'] .dm-menubar .dm-hotline small { color: var(--dm-muted); }
@media (prefers-reduced-motion: reduce) { .dm-header.is-stuck .dm-menubar { animation: none; } }
/* The stuck menu bar carries the wishlist and cart (with their counts), as the logo bar with its own icons has scrolled away. */
.dm-stuck-acts { display: none; flex: none; align-items: center; gap: 1.6rem; padding-inline: 0.4rem 0.8rem; }
.dm-header.is-stuck[data-dm-bar='menu'] .dm-stuck-acts { display: flex; animation: dm-fade-in 0.3s var(--dm-ease); }
.dm-header.is-stuck[data-dm-bar='menu'] .dm-bar-links + .dm-stuck-acts { padding-inline-start: 1.6rem; border-inline-start: 1px solid var(--dm-line); }
.dm-stuck-acts .dm-act em { border-color: var(--dm-bg); }
@keyframes dm-fade-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .dm-header.is-stuck .dm-stuck-acts { animation: none; } }
@keyframes dm-down { from { transform: translateY(-100%); } }

/* Drawer (phones) */
.dm-drawer { position: fixed; inset: 0; z-index: 90; }
.dm-drawer-shade { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); animation: dm-fade 0.25s; }
.dm-drawer-panel { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; display: flex; flex-direction: column; gap: 1rem; width: min(22rem, 88vw); padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; background: var(--dm-bg); animation: dm-in 0.35s var(--dm-ease); }
.dm-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.dm-drawer-head .dm-logo { min-width: 0; }
.dm-drawer-nav { display: flex; flex-direction: column; }
.dm-drawer-nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--dm-line); font-weight: 500; }
.dm-drawer-nav.is-small a { padding: 0.55rem 0; font-weight: 400; font-size: 0.9rem; }
.dm-drawer-h { margin-top: 0.5rem; color: var(--dm-muted); font-size: 0.8rem; font-weight: 600; }
.dm-drawer-h a { float: inline-end; color: var(--dm-primary); font-weight: 500; }
.dm-search.is-drawer { order: 0; flex: none; height: 2.85rem; margin: 0; }
.dm-search-btn { display: none; }
.dm-drawer .dm-hotline { margin-top: auto; }
.dm-drawer-links { display: flex; flex-direction: column; gap: 1rem; margin-top: auto; }
.dm-drawer-links .dm-hotline { margin-top: 0; }
@keyframes dm-fade { from { opacity: 0; } }
@keyframes dm-in { from { transform: translateX(-100%); } }
[dir='rtl'] .dm-drawer-panel { animation-name: dm-in-rtl; }
@keyframes dm-in-rtl { from { transform: translateX(100%); } }

/* ── Sections ── */
.dm-main { min-height: 50vh; }
.dm-sec { padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.dm-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.4rem; }
.dm-sec-head.has-line::after { content: ''; order: 1; flex: 1; min-width: 4rem; height: 2px; background: var(--dm-line-soft); }
.dm-sec-head.has-line > :last-child:not(:first-child) { order: 2; }
/* Section titles carry a hand-drawn stroke under their first word, as Shofy's do. */
.dm-h2 { position: relative; z-index: 0; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; }
.dm-h2::after { content: ''; position: absolute; z-index: -1; inset-inline-start: -0.3rem; bottom: -0.65rem; width: 4.75rem; height: 1rem; background: var(--dm-primary); -webkit-mask: var(--dm-stroke) no-repeat center / contain; mask: var(--dm-stroke) no-repeat center / contain; }
.dm-h2.is-sm { margin-bottom: 1.75rem; font-size: 1.25rem; }
.dm-h2.is-sm::after { bottom: -0.6rem; width: 3.6rem; }
.dm-h3 { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--dm-line); font-size: 1.05rem; }
:root { --dm-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 16'%3E%3Cpath d='M2 13.5C14 6.5 40 2.5 80 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Hero: full width, a colour band with the picture on the right */
.dm-hero { position: relative; overflow: hidden; background: var(--dm-hero-bg); color: var(--dm-on-hero); }
.dm-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.8s var(--dm-ease), visibility 0.8s; }
.dm-slide:first-child { position: relative; }
.dm-slide.is-on { opacity: 1; visibility: visible; z-index: 1; }
.dm-slide > .dm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 2rem; min-height: clamp(26rem, 36vw, 32.5rem); }
.dm-slide-text { display: flex; flex-direction: column; align-items: flex-start; padding-block: 3rem 4.5rem; }
/* Words and button come in one after another from the start side; the picture from the other side. */
.dm-slide.is-on .dm-slide-text > * { animation: dm-from-start 0.9s var(--dm-ease) both 0.15s; }
.dm-slide.is-on .dm-slide-text > *:nth-child(2) { animation-delay: 0.28s; }
.dm-slide.is-on .dm-slide-text > *:nth-child(3) { animation-delay: 0.41s; }
.dm-slide.is-on .dm-slide-text > *:nth-child(4) { animation-delay: 0.54s; }
@keyframes dm-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes dm-from-start { from { opacity: 0; transform: translateX(-48px); } }
@keyframes dm-from-end { from { opacity: 0; transform: translateX(60px); } }
[dir='rtl'] .dm-slide.is-on .dm-slide-text > * { animation-name: dm-from-start-rtl; }
/* Title line by line (dm.js splits the title into the lines it is drawn in and numbers everything): lines 0.1s
   apart, then the text and button 0.13s apart, each 0.9s, sliding 48px. */
.dm-slide-text.is-split > * { animation-delay: calc(0.15s + var(--e, 0) * 0.13s + var(--after, 0) * (var(--dm-nln, 1) - 1) * 0.1s) !important; }
.dm-slide.is-on .dm-slide-text.is-split > .has-lines { animation: none; }
.dm-ln { display: block; }
.dm-slide.is-on .dm-slide-text.is-split .dm-ln { animation: dm-from-start 0.9s var(--dm-ease) both; animation-delay: calc(0.15s + var(--e, 0) * 0.13s + var(--lni) * 0.1s); }
[dir='rtl'] .dm-slide.is-on .dm-slide-text.is-split .dm-ln { animation-name: dm-from-start-rtl; }
@keyframes dm-from-start-rtl { from { opacity: 0; transform: translateX(48px); } }
@keyframes dm-from-end-rtl { from { opacity: 0; transform: translateX(-60px); } }
/* Parallax: after the first change, the next slide pushes in from the side (back: from the other side) and
   its picture travels a little further, while the old slide drifts away more slowly underneath.
   --dm-dir is 1 or -1 (set by dm.js, mirrored in Arabic). */
.dm-hero.is-moved .dm-slide { transition: none; overflow: clip; }
.dm-hero.is-moved .dm-slide:not(.has-bg) { background: var(--dm-hero-bg); }
.dm-hero.is-moved .dm-slide.is-on { animation: dm-par-in 1.1s var(--dm-ease) both; }
.dm-hero.is-moved .dm-slide.is-on .dm-slide-pic { animation: dm-par-pic 1.1s var(--dm-ease) both; }
.dm-hero.is-moved .dm-slide.is-out { z-index: 0; opacity: 1; visibility: visible; animation: dm-par-out 1.1s var(--dm-ease) both; }
@keyframes dm-par-in { from { transform: translateX(calc(100% * var(--dm-dir, 1))); } }
@keyframes dm-par-pic { from { transform: translateX(calc(35% * var(--dm-dir, 1))); } }
@keyframes dm-par-out { to { transform: translateX(calc(-50% * var(--dm-dir, 1))); } }
@media (prefers-reduced-motion: reduce) {
    .dm-hero.is-moved .dm-slide { transition: opacity 0.4s ease, visibility 0.4s; }
    .dm-hero.is-moved .dm-slide.is-on, .dm-hero.is-moved .dm-slide.is-on .dm-slide-pic, .dm-hero.is-moved .dm-slide.is-out { animation: none; }
    .dm-slide.is-on .dm-slide-text > *, .dm-slide.is-on .dm-slide-text.is-split .dm-ln { animation: dm-fade-only 0.4s ease both; }
}
.dm-slide-kicker { margin-bottom: 0.4rem; font-weight: 500; font-size: 1.05rem; }
/* Typed words under the title (hero slide "Typed words"), then a bold line (B1: bold, a size larger). */
.dm-slide-typed { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin-bottom: 2.2rem; font-family: var(--dm-font-sub, var(--dm-font-head)); }
/* A fixed height, so the title above never moves while words are typed and cleared. */
.dm-typed-line { display: inline-flex; align-items: center; height: 1.6em; line-height: 1.6; font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 500; }
.dm-typed { white-space: nowrap; }
.dm-caret { display: inline-block; width: 3px; height: 1.05em; margin-inline-start: 3px; background: currentColor; animation: dm-caret 1s steps(1) infinite; }
/* While keys are being pressed the caret stays lit, like a real one; it blinks only while waiting. */
.dm-typed-line.is-typing .dm-caret { animation: none; opacity: 1; }
@keyframes dm-caret { 50% { opacity: 0; } }
.dm-slide-bold { font-family: var(--dm-font-head); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
.dm-slide.has-text .dm-typed-line, .dm-slide.has-text .dm-slide-bold { color: var(--dm-slide-text); }
@media (prefers-reduced-motion: reduce) { .dm-caret { animation: none; } }
/* A slide's own colours (hero slide fields): background, title and text; the dots follow a dark or light slide. */
.dm-slide.has-bg { background: var(--dm-slide-bg); }
.dm-slide.has-text .dm-slide-kicker, .dm-slide.has-text .dm-slide-lede { color: var(--dm-slide-text); }
.dm-hero:has(.dm-slide.is-on.on-dark) .dm-hero-dots button { background: rgb(255 255 255 / 0.4); }
.dm-hero:has(.dm-slide.is-on.on-dark) .dm-hero-dots button[aria-current='true'] { background: #ffffff; }
.dm-hero:has(.dm-slide.is-on.on-light) .dm-hero-dots button { background: rgb(0 0 0 / 0.25); }
.dm-hero:has(.dm-slide.is-on.on-light) .dm-hero-dots button[aria-current='true'] { background: #141414; }
.dm-slide h1, .dm-slide h2 { max-width: 14ch; margin-bottom: 1.1rem; color: var(--dm-hero-title, inherit); font-size: clamp(2.3rem, 4.4vw, 3.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.dm-slide-lede { margin-bottom: 2rem; font-family: var(--dm-font); font-size: 1rem; font-weight: 400; line-height: 1.65; }
.dm-slide-lede .is-hi { color: var(--dm-hero-hi, var(--dm-primary)); font-weight: 700; }
.dm-slide-pic { display: grid; place-items: center; align-self: stretch; padding-block: 2.5rem; }
.dm-slide-pic img { width: min(100%, calc(36rem * var(--dm-hero-scale, 1))); max-height: calc(26rem * var(--dm-hero-scale, 1)); object-fit: contain; }
.dm-slide-pic .dm-lottie { width: min(100%, calc(36rem * var(--dm-hero-scale, 1))); max-height: calc(26rem * var(--dm-hero-scale, 1)); }
/* Slide template "Interactive banknote": room kept before the note loads (the art is 2400 × 1471). */
.dm-slide-pic .dm-banknote { width: min(100%, calc(40rem * var(--dm-hero-scale, 1))); aspect-ratio: 2400 / 1471; }
/* The note stays hidden until its picture is drawn (banknote-hero.js adds .is-ready), then rises and fades in;
   it plays again each time its slide comes back. */
.dm-slide-pic .dm-banknote:not(.is-ready) { opacity: 0; }
.dm-slide.is-on .dm-slide-pic .dm-banknote.is-ready { animation: dm-note-in 1.3s cubic-bezier(0.33, 0, 0.2, 1) both 0.1s; }
@keyframes dm-note-in { from { opacity: 0; transform: translateY(1.25rem) scale(0.97); filter: blur(4px); } 60% { filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .dm-slide.is-on .dm-slide-pic .dm-banknote.is-ready { animation: dm-fade-only 0.4s ease both; } }
@keyframes dm-fade-only { from { opacity: 0; } }
.dm-slide.is-on .dm-slide-pic img, .dm-slide.is-on .dm-slide-pic .dm-lottie { animation: dm-from-end 1.1s var(--dm-ease) both 0.3s; }
[dir='rtl'] .dm-slide.is-on .dm-slide-pic img, [dir='rtl'] .dm-slide.is-on .dm-slide-pic .dm-lottie { animation-name: dm-from-end-rtl; }
@keyframes dm-pic { from { opacity: 0; transform: translateX(40px) scale(0.96); } }
.dm-hero-dots { position: absolute; z-index: 2; bottom: 1.75rem; inset-inline: 0; display: flex; justify-content: center; gap: 0.5rem; }
.dm-hero-dots button { width: 0.6rem; height: 0.6rem; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--dm-on-hero) 35%, transparent); transition: background-color 0.2s, transform 0.2s; }
.dm-hero-dots button[aria-current='true'] { background: var(--dm-on-hero); transform: scale(1.15); }

/* Lottie animations: room kept before they load; the svg fills it */
.dm-lottie { display: block; overflow: hidden; }
.dm-lottie svg { display: block; }
@media (max-width: 47.99em) { .dm-wide-only { display: none !important; } }
@media (min-width: 48em) { .dm-phone-only { display: none !important; } }

/* Picture sliders (Sliders app): the picture is the slide, words sit on it */
.dm-bs.is-full .dm-bs-out { padding-inline: 0; }
.dm-bs-stage { position: relative; overflow: hidden; aspect-ratio: var(--dm-bs-ratio, 21 / 9); border-radius: var(--dm-r); background: var(--dm-soft); }
.dm-bs.is-full .dm-bs-stage { border-radius: 0; }
.dm-bs .dm-bs-slide, .dm-bs .dm-bs-slide:first-child { position: absolute; inset: 0; display: flex; align-items: center; }
.dm-bs-slide picture, .dm-bs-slide img, .dm-bs-slide .dm-lottie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dm-bs-slide.is-on img { animation: dm-bs-in 6s var(--dm-ease) both; }
@keyframes dm-bs-in { from { transform: scale(1.04); } to { transform: none; } }
.dm-bs-slide.has-words.is-light::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.1) 70%); }
.dm-bs-slide.has-words.is-light.is-center::before { background: rgb(0 0 0 / 0.35); }
.dm-bs-slide.has-words.is-light.is-end::before { background: linear-gradient(270deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.1) 70%); }
[dir='rtl'] .dm-bs-slide.has-words.is-light.is-start::before { background: linear-gradient(270deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.1) 70%); }
[dir='rtl'] .dm-bs-slide.has-words.is-light.is-end::before { background: linear-gradient(90deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.1) 70%); }
.dm-bs-text { position: relative; z-index: 2; width: min(100%, 34rem); margin-inline: clamp(1.5rem, 6%, 5rem); padding-block: 2rem; }
.dm-bs-slide.is-light .dm-bs-text { color: #fff; }
.dm-bs-slide.is-dark .dm-bs-text { color: #111; }
.dm-bs-slide.is-center { justify-content: center; text-align: center; }
.dm-bs-slide.is-center .dm-bs-text { align-items: center; }
.dm-bs-slide.is-end { justify-content: flex-end; }
.dm-bs-text h2 { max-width: 18ch; margin-bottom: 1rem; font-size: clamp(1.6rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.dm-bs-lede { margin-bottom: 1.6rem; font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 500; }
.dm-bs-lede .is-hi { color: var(--dm-primary); font-weight: 700; }
.dm-bs-slide.is-dark .dm-btn { border-color: #111; background: #111; color: #fff; }
.dm-bs-link { position: absolute; inset: 0; z-index: 3; }
.dm-bs-arrow { position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.9); color: #111; opacity: 0; transition: opacity 0.2s, background-color 0.2s, color 0.2s; }
.dm-bs-arrow.is-prev { inset-inline-start: 1rem; }
.dm-bs-arrow.is-next { inset-inline-end: 1rem; }
[dir='rtl'] .dm-bs-arrow svg { transform: scaleX(-1); }
.dm-bs-stage:hover .dm-bs-arrow, .dm-bs-arrow:focus-visible { opacity: 1; }
.dm-bs-arrow:hover { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-bs-dots { z-index: 4; bottom: 1rem; }
.dm-bs-dots button { background: rgb(255 255 255 / 0.55); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15); }
.dm-bs-dots button[aria-current='true'] { background: #fff; }
@media (max-width: 47.99em) {
    .dm-bs-stage { aspect-ratio: var(--dm-bs-ratio-m, var(--dm-bs-ratio, 21 / 9)); }
    .dm-bs-stage.has-words { aspect-ratio: auto; min-height: 22rem; }
    .dm-bs-slide.has-words.is-light::before { background: rgb(0 0 0 / 0.45); }
    .dm-bs-text { margin-inline: 1.25rem; }
    .dm-bs-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dm-bs-slide.is-on img { animation: none; } }

/* Categories: square pictures with rounded corners (they follow the theme’s corner setting), no cards */
.dm-cats-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 1.5rem) / 5); gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dm-cats-row::-webkit-scrollbar { display: none; }
/* Grid look: every category in view, in rows (a continent's countries). */
.dm-cats-row.is-grid { grid-auto-flow: row; grid-template-columns: repeat(var(--dm-cats-cols, 5), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; row-gap: 2.5rem; }
@media (max-width: 991.98px) { .dm-cats-row.is-grid { grid-template-columns: repeat(min(var(--dm-cats-cols, 5), 4), minmax(0, 1fr)); } }
@media (max-width: 47.99em) { .dm-cats-row.is-grid { grid-template-columns: repeat(min(var(--dm-cats-cols, 5), 3), minmax(0, 1fr)); gap: 1.5rem 0.75rem; } }
.dm-cat { display: flex; flex-direction: column; align-items: center; text-align: center; scroll-snap-align: start; }
.dm-cat-pic { display: grid; place-items: center; width: min(100%, 14rem); aspect-ratio: 1; margin-bottom: 1.4rem; overflow: hidden; border-radius: calc(var(--dm-r) * 1.5); background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-cat-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--dm-ease); }
.dm-cat:hover .dm-cat-pic img { transform: scale(1.1); }
.dm-cat b { font-family: var(--dm-font-head); font-weight: 600; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; transition: color 0.2s; }
.dm-cat:hover b { color: var(--dm-primary); }
.dm-cat small { margin-top: 0.25rem; color: var(--dm-muted); font-size: 0.9rem; }
/* A category's sub-categories as pictures (Asia › India, Japan…): a wrapping grid, not a sliding row. */
.dm-cathub { padding-block: 1.5rem 4rem; }
.dm-cathub-intro { max-width: 65ch; margin: 0 auto 2.5rem; color: var(--dm-muted); text-align: center; }
.dm-cathub-intro p { margin: 0 0 0.75em; }
.dm-cathub-intro p:last-child { margin-bottom: 0; }
/* A category's own text on its product list (Theme options › Products › Category text). */
.dm-cattext { color: var(--dm-muted); line-height: 1.65; }
.dm-cattext.is-top { padding-top: 1.25rem; }
.dm-cattext.is-bottom { padding-block: 3rem 1rem; }
.dm-cattext.is-bottom .dm-h2 { margin-bottom: 1rem; color: var(--dm-text); }
.dm-cattext-body { max-width: none; }
.dm-cattext-body p { margin: 0 0 0.75em; }
.dm-cattext-body p:last-child { margin-bottom: 0; }
/* Long text up top: three whole lines ending in "…" until Read more (no half-cut line, no fade). The whole text stays on the page for search engines. */
.dm-cattext.is-long:not(.is-open) .dm-cattext-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.dm-cattext.is-long:not(.is-open) .dm-cattext-body p { display: inline; margin: 0; }
.dm-cattext.is-long:not(.is-open) .dm-cattext-body p + p::before { content: " "; }
.dm-cattext.is-fits .dm-cattext-more { display: none; }
.dm-cattext-more { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.6rem; padding: 0.15rem 0; border: 0; border-radius: 0; background: none; color: var(--dm-text); font: inherit; font-size: 0.95em; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dm-cattext-more span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dm-cattext-more .dm-i { transition: transform 0.2s ease; }
.dm-cattext.is-open .dm-cattext-more .dm-i { transform: rotate(180deg); }
.dm-cattext-more:hover { color: var(--dm-primary); }
/* No box around it after a click or tap; keyboard users still see where they are (orange words, thicker line). */
.dm-cattext-more:focus, .dm-cattext-more:focus-visible { outline: none; box-shadow: none; }
.dm-cattext-more:focus-visible { color: var(--dm-primary); }
.dm-cattext-more:focus-visible span { text-decoration-thickness: 2px; }
.dm-cathub-intro.dm-cattext.is-top { padding-top: 0; }
.dm-cathub { --dm-hub-cols: 5; }
/* Sub-category pictures per row (Theme options › Products): computers 5, tablets 4, phones 2 by default. */
.dm-cathub-grid { display: grid; grid-template-columns: repeat(var(--dm-hub-cols), minmax(0, 1fr)); gap: 2.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 991.98px) { .dm-cathub-grid { grid-template-columns: repeat(var(--dm-hub-cols-t, 4), minmax(0, 1fr)); } }
.dm-cathub-grid .dm-cat-pic { width: 100%; max-width: 13rem; }
@media (max-width: 575px) {
    /* Phones: Theme options › Products › "per row on phones", 2 by default (Chandru, 2026-11-11). */
    .dm-cathub-grid { grid-template-columns: repeat(var(--dm-hub-cols-m, 2), minmax(0, 1fr)); gap: 1.5rem 0.75rem; }
    .dm-cathub-grid .dm-cat-pic { margin-bottom: 0.5rem; }
    .dm-cathub-grid .dm-cat b { font-size: 0.8rem; }
    .dm-cathub-grid .dm-cat small { font-size: 0.72rem; }
}

/* Promises: grey boxes side by side */
.dm-feats { padding-block: clamp(2.5rem, 5vw, 3.75rem) 0; }
.dm-feats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.dm-feat { display: flex; align-items: center; gap: 1.1rem; padding: 1.85rem 2.5rem; border-radius: var(--dm-r-sm); background: var(--dm-soft); }
.dm-feat > .dm-i { color: var(--dm-primary); }
/* An uploaded icon (picture, GIF or Lottie) sits in the same square as the built-in one. */
.dm-feat-pic { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; }
.dm-feat-pic > img, .dm-feat-pic > .dm-lottie { width: 100%; height: 100%; object-fit: contain; }
.dm-feat b { display: block; margin-bottom: 0.25rem; font-family: var(--dm-font-head); font-weight: 500; font-size: 0.95rem; line-height: 1.3; letter-spacing: -0.01em; }
.dm-feat small { color: var(--dm-muted); font-size: 0.9rem; }

/* Promises, "Outlined strip" style: one black-outlined band, thin black lines between the promises.
   Four across; 2 × 2 below a wide laptop; on phones still 2 × 2 with the icon above the words. */
.dm-feats.is-strip { padding-block: clamp(1.1rem, 3.2svh, 2.2rem) clamp(1.4rem, 4svh, 2.75rem); }
.dm-feats.is-strip .dm-feats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--dm-text); border-radius: var(--dm-r-sm); }
.is-strip .dm-feat { min-width: 0; gap: 1.15rem; padding: clamp(0.9rem, 2.2svh, 1.6rem) clamp(1rem, 2.2vw, 1.8rem); border-radius: 0; background: none; }
.is-strip .dm-feat + .dm-feat { border-inline-start: 1px solid var(--dm-text); }
.is-strip .dm-feat > .dm-i { width: 2.5rem; height: 2.5rem; stroke-width: 1.75; }
.is-strip .dm-feat-pic { width: 2.6rem; height: 2.6rem; }
@media (max-width: 67.5em) {
    .dm-feats.is-strip .dm-feats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .is-strip .dm-feat:nth-child(odd) { border-inline-start: 0; }
    .is-strip .dm-feat:nth-child(n+3) { border-block-start: 1px solid var(--dm-text); }
}
@media (max-width: 47.99em) {
    /* Phones: one column, icon beside the words, a thin line between the promises. */
    .dm-feats.is-strip { padding-block: 1.3rem 1.6rem; }
    .dm-feats.is-strip .dm-feats-row { grid-template-columns: minmax(0, 1fr); }
    .is-strip .dm-feat { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.1rem; text-align: start; }
    .is-strip .dm-feat + .dm-feat { border-inline-start: 0; border-block-start: 1px solid var(--dm-text); }
    .is-strip .dm-feat > .dm-i { width: 2.15rem; height: 2.15rem; }
    .is-strip .dm-feat b { font-size: 0.88rem; }
    .is-strip .dm-feat small { display: block; font-size: 0.82rem; line-height: 1.4; }
}

/* Animated promise icons (dm_feat_icon): one gentle move every few seconds, the four taking turns. */
.dm-ai * { transform-box: fill-box; }
.dm-ai .dm-ai-lid { transform-origin: 0% 100%; animation: dm-ai-lid 4s var(--dm-ease) infinite; }
.dm-ai .dm-ai-body { animation: dm-ai-drive 1.2s ease-in-out infinite; }
.dm-ai .dm-ai-wheel { transform-origin: center; animation: dm-ai-spin 0.8s linear infinite; }
.dm-ai .dm-ai-wind { stroke-dasharray: 3 5; animation: dm-ai-wind 0.7s linear infinite; opacity: 0.8; }
.dm-ai .dm-ai-card { transform-origin: center; animation: dm-ai-tilt 4s var(--dm-ease) infinite; }
.dm-ai .dm-ai-stripe { stroke-dasharray: 20; animation: dm-ai-draw 4s var(--dm-ease) infinite; }
.dm-ai .dm-ai-dots { animation: dm-ai-blink 4s ease-in-out infinite; }
.dm-ai .dm-ai-wave { transform-origin: left center; animation: dm-ai-wave 1.6s ease-in-out infinite; }
.dm-ai .dm-ai-wave.is-2 { animation-delay: 0.25s; }
.dm-ai .dm-ai-turn { transform-origin: center; animation: dm-ai-turn 4s var(--dm-ease) infinite; }
.dm-ai .dm-ai-tick { stroke-dasharray: 9; animation: dm-ai-draw-tick 4s var(--dm-ease) infinite; }
.dm-feat:nth-child(2) .dm-ai * { animation-delay: 1s; }
.dm-feat:nth-child(3) .dm-ai * { animation-delay: 2s; }
.dm-feat:nth-child(4) .dm-ai * { animation-delay: 3s; }
.dm-feat:nth-child(4) .dm-ai .dm-ai-wave.is-2 { animation-delay: 3.25s; }
@keyframes dm-ai-lid { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(-3px) rotate(-10deg); } 86% { transform: translateY(-1px) rotate(-4deg); } }
@keyframes dm-ai-drive { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.6px); } }
@keyframes dm-ai-spin { to { transform: rotate(360deg); } }
@keyframes dm-ai-wind { to { stroke-dashoffset: -8; } }
@keyframes dm-ai-tilt { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-8deg) scale(1.04); } 90% { transform: rotate(2deg); } }
@keyframes dm-ai-draw { 0%, 70% { stroke-dashoffset: 0; } 76% { stroke-dashoffset: 20; } 90%, 100% { stroke-dashoffset: 0; } }
@keyframes dm-ai-blink { 0%, 72%, 100% { opacity: 1; } 80% { opacity: 0.15; } 88% { opacity: 1; } }
@keyframes dm-ai-wave { 0%, 100% { opacity: 0.15; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes dm-ai-turn { 0%, 70% { transform: rotate(0); } 90%, 100% { transform: rotate(360deg); } }
@keyframes dm-ai-draw-tick { 0%, 70% { stroke-dashoffset: 0; } 76% { stroke-dashoffset: 9; } 90%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .dm-ai * { animation: none !important; } .dm-ai .dm-ai-wind { opacity: 0; } }

/* Fit the first screen (Theme options): the hero gets the height the script in the hero block measured,
   and its words and picture scale with the screen height so nothing is cut on short laptops. */
.dm-hero.is-fit .dm-slide > .dm-wrap { min-height: var(--dm-fit-h); }
.dm-hero.is-fit .dm-slide-text { padding-block: clamp(1.25rem, 5svh, 3rem) clamp(2.5rem, 7svh, 4.5rem); }
.dm-hero.is-fit .dm-slide h1, .dm-hero.is-fit .dm-slide h2 { font-size: clamp(2rem, min(4.4vw, 7svh), 3.75rem); margin-bottom: clamp(0.6rem, 2svh, 1.1rem); }
.dm-hero.is-fit .dm-slide-pic { padding-block: clamp(1rem, 4svh, 2.5rem); }
.dm-hero.is-fit .dm-slide-pic img, .dm-hero.is-fit .dm-slide-pic .dm-lottie { max-height: min(calc(26rem * var(--dm-hero-scale, 1)), calc(var(--dm-fit-h) - 5rem)); }
.dm-hero.is-fit .dm-slide-pic .dm-banknote { width: min(100%, calc(40rem * var(--dm-hero-scale, 1)), calc((var(--dm-fit-h) - 5rem) * 1.631)); }
@media (max-width: 47.99em) {
    /* Phones: words at the top, the picture centred in the rest of the screen. */
    .dm-hero.is-fit .dm-slide > .dm-wrap { height: var(--dm-fit-h); grid-template-rows: auto minmax(0, 1fr); }
    .dm-hero.is-fit .dm-slide-text { padding-block: 2rem 0.5rem; }
    .dm-hero.is-fit .dm-slide h1, .dm-hero.is-fit .dm-slide h2 { font-size: clamp(1.9rem, 9vw, 2.5rem); }
    .dm-hero.is-fit .dm-slide-pic { align-self: stretch; min-height: 0; padding-block: 1rem 3.5rem; }
    /* The space left under the words, whatever their length. */
    .dm-hero.is-fit .dm-slide-pic img, .dm-hero.is-fit .dm-slide-pic .dm-lottie { max-height: min(100%, calc(var(--dm-fit-h) - 17rem)); }
    /* A slide with long words still gets a big picture (Chandru, 2026-11-07: the Numi Circle characters were tiny):
       the picture keeps at least 16rem and the slide grows past the screen instead of shrinking it. */
    .dm-hero.is-fit .dm-slide > .dm-wrap { height: auto; min-height: var(--dm-fit-h); grid-template-rows: auto minmax(calc(16rem * var(--dm-hero-scale, 1) + 3.25rem), 1fr); }
    .dm-hero.is-fit .dm-slide-pic img, .dm-hero.is-fit .dm-slide-pic .dm-lottie { max-height: max(calc(16rem * var(--dm-hero-scale, 1)), min(100%, calc(var(--dm-fit-h) - 17rem))); }
    .dm-hero.is-fit .dm-slide-pic .dm-lottie { height: calc(16rem * var(--dm-hero-scale, 1)); max-height: none; contain: size; }
    /* Slides stack in one grid cell, so the tallest slide sets the hero's height (none is cut off at the bottom). */
    .dm-hero.is-fit { display: grid; }
    .dm-hero.is-fit > .dm-slide { grid-area: 1 / 1; position: relative; inset: auto; }
    .dm-hero.is-fit .dm-slide-pic:has(.dm-lottie) { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding-block: 0.25rem 3rem; }
}
/* Computers: square animations (Lottie) may use more of the height than flat pictures, so the characters aren't small. */
@media (min-width: 48em) {
    .dm-slide-pic .dm-lottie, .dm-hero.is-fit .dm-slide-pic .dm-lottie { max-height: min(calc(32rem * var(--dm-hero-scale, 1)), calc(var(--dm-fit-h, 40rem) - 3rem)); }
}

/* Tabs: words, the chosen one dark with the stroke under it */
.dm-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem 2.25rem; }
.dm-tabs button { position: relative; z-index: 0; padding: 0; border: 0; background: none; color: var(--dm-muted); font-size: 1.15rem; transition: color 0.2s; }
.dm-tabs button:hover { color: var(--dm-text); }
.dm-tabs button[aria-selected='true'] { color: var(--dm-text); }
.dm-tabs button::after { content: ''; position: absolute; z-index: -1; inset-inline-start: -0.2rem; bottom: -0.7rem; width: 2.6rem; height: 0.8rem; background: var(--dm-primary); -webkit-mask: var(--dm-stroke) no-repeat center / contain; mask: var(--dm-stroke) no-repeat center / contain; opacity: 0; transition: opacity 0.2s; }
.dm-tabs button[aria-selected='true']::after { opacity: 1; }

/* Product grid and card */
.dm-grid { display: grid; grid-template-columns: repeat(var(--shop-cols, 4), minmax(0, 1fr)); gap: 1.5rem; animation: dm-fade 0.35s; }
/* Product card: no shadow; on hover it lifts and swells a little with a soft spring (liquid), the
   picture drifts larger inside, and the side buttons flow in one after another. */
.dm-card { --dm-liquid: cubic-bezier(0.34, 1.32, 0.5, 1); position: relative; display: flex; flex-direction: column; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); transition: transform 0.55s var(--dm-liquid), border-color 0.35s; }
/* Only the card under the pointer gets its own layer: one per card (a whole grid of them) made the browser skip
   drawing some pictures while scrolling, which then showed up only on hover. */
@media (hover: hover) { .dm-card:hover { will-change: transform; } }
/* Coming into view (Theme options › Products; dm.js marks cards below the fold and the pictures still loading). */
.dm-card.is-due { opacity: 0; transform: translateY(18px); }
[data-dm-reveal='fade'] .dm-card.is-due { transform: none; }
.dm-card.is-shown { animation: dm-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--dm-ci, 0) * 60ms); }
[data-dm-reveal='fade'] .dm-card.is-shown { animation-name: dm-fade; animation-duration: 0.5s; }
@keyframes dm-card-in { from { opacity: 0; transform: translateY(18px); } }
.dm-card-img img.is-wait { opacity: 0; }
.dm-card-img img.is-seen { transition: opacity 0.45s ease, transform 1.1s var(--dm-ease); }
@media (prefers-reduced-motion: reduce) { .dm-card.is-due { opacity: 1; transform: none; } .dm-card.is-shown { animation: none; } .dm-card-img img.is-wait { opacity: 1; } }
.dm-card:hover { border-color: var(--dm-text); transform: translateY(-4px) scale(1.012); }
.dm-card.is-plain { border-color: transparent; }
/* The picture sits inside the card's 1px border, so its corners are 1px tighter and follow the card's curve exactly. */
.dm-card-img { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--dm-line); border-radius: max(0px, calc(var(--dm-r) - 1px)) max(0px, calc(var(--dm-r) - 1px)) 0 0; background: var(--dm-img-bg); }
.dm-card-img > a { display: grid; place-items: center; aspect-ratio: 1; outline: none; }
.dm-card-img > a { position: relative; }
.dm-card-img img { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; transition: opacity 0.7s var(--dm-ease), transform 1.1s var(--dm-ease); }
.dm-card-img img { transform-origin: 50% 38%; }
.dm-card:hover .dm-card-img img { transform: scale(1.06); }
/* The second picture on hover (Theme options › Products): the first fades out as the second zooms in. */
.dm-card-img .dm-card-back { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); }
@media (hover: hover) {
    .dm-card:hover .dm-card-img.has-back img:not(.dm-card-back) { opacity: 0; }
    .dm-card:hover .dm-card-img .dm-card-back { opacity: 1; transform: scale(1.1); }
}
@media (hover: none) { .dm-card-img .dm-card-back { display: none; } }
/* No picture yet: a small photo drawing in the shop's colour, never a random image. */
.dm-card-ph { display: grid; place-items: center; place-self: stretch; width: 100%; height: 100%; background: color-mix(in srgb, var(--dm-primary) 6%, var(--dm-bg)); }
.dm-ph-art { width: min(58%, 11.5rem); height: auto; overflow: visible; }
.dm-gal-main .dm-ph-art { width: min(50%, 17rem); }
.dm-ph-back { fill: color-mix(in srgb, var(--dm-primary) 22%, var(--dm-bg)); }
.dm-ph-card { fill: var(--dm-bg); stroke: var(--dm-text); stroke-width: 2; }
.dm-ph-sky { fill: color-mix(in srgb, var(--dm-primary) 9%, var(--dm-bg)); }
.dm-ph-sun { fill: var(--dm-primary); }
.dm-ph-far { fill: var(--dm-primary); }
.dm-ph-near { fill: var(--dm-text); }
/* Labels stay side by side on one line; on a narrow card the deal badge moves under them. */
.dm-badges { position: absolute; z-index: 1; top: 1rem; inset-inline: 1rem 1.25rem; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; align-items: flex-start; gap: 0.3rem; pointer-events: none; }
.dm-badges-deal, .dm-badges-labels { display: flex; flex-wrap: wrap; align-items: center; gap: inherit; min-width: 0; max-width: 100%; }
.dm-badges-deal { margin-inline-end: auto; }
.dm-badges-labels { justify-content: flex-end; margin-inline-start: auto; }
.dm-badges .dm-badge { overflow: hidden; text-overflow: ellipsis; }
.dm-badges-deal:empty, .dm-badges-labels:empty { display: none; }
.dm-badge { display: inline-flex; align-items: center; height: 1.35rem; padding: 0.05rem 0.5rem 0; border-radius: var(--dm-r-sm); background: var(--b, var(--dm-secondary)); color: #fff; font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 0.74rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.dm-badge.is-sale { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-badge.is-out { background: #000; }
.dm-badge.is-new { box-shadow: inset 0 0 0 1px var(--dm-line); background: #fff; color: var(--dm-text); }
/* One rounded column; each button slides in on its own, a beat after the one above. */
.dm-card-tools { position: absolute; z-index: 1; bottom: 3.6rem; inset-inline-end: 1.25rem; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); opacity: 0; visibility: hidden; transform: translateX(0.75rem); transition: opacity 0.35s, visibility 0.35s, transform 0.55s var(--dm-liquid); }
[dir='rtl'] .dm-card-tools { transform: translateX(-0.75rem); }
.dm-card:hover .dm-card-tools, .dm-card:focus-within .dm-card-tools { opacity: 1; visibility: visible; transform: none; }
.dm-card-tools form { display: contents; }
.dm-card-tools > :nth-child(2) { --i: 1; } .dm-card-tools > :nth-child(3) { --i: 2; } .dm-card-tools > :nth-child(4) { --i: 3; }
.dm-card-tools a, .dm-card-tools button { display: grid; place-items: center; width: calc(2.5rem - 2px); height: calc(2.5rem - 1px); padding: 0; border: 0; border-radius: 0; background: var(--dm-bg); color: var(--dm-text); opacity: 0; transform: translateX(100%); transition: background-color 0.25s, color 0.25s, opacity 0.3s, transform 0.5s var(--dm-liquid); transition-delay: 0s, 0s, calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms); }
[dir='rtl'] .dm-card-tools a, [dir='rtl'] .dm-card-tools button { transform: translateX(-100%); }
.dm-card-tools a, .dm-card-tools button { border-top: 1px solid var(--dm-line); }
.dm-card-tools > a:first-child, .dm-card-tools > form:first-child button { border-top: 0; }
.dm-card:hover .dm-card-tools a, .dm-card:hover .dm-card-tools button, .dm-card:focus-within .dm-card-tools a, .dm-card:focus-within .dm-card-tools button { opacity: 1; transform: none; }
.dm-card-tools a:hover, .dm-card-tools button:hover { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-card-tools a:hover .dm-i, .dm-card-tools button:hover .dm-i { animation: dm-icon-pop 0.5s var(--dm-liquid); }
@keyframes dm-icon-pop { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-8deg); } 65% { transform: scale(0.94) rotate(4deg); } 100% { transform: scale(1); } }
.dm-card-add { position: absolute; z-index: 1; inset-inline: 0; bottom: -3rem; opacity: 0; visibility: hidden; transition: all 0.3s ease-out; }
.dm-card:hover .dm-card-add, .dm-card:focus-within .dm-card-add { bottom: 0; opacity: 1; visibility: visible; }
.dm-card-add a, .dm-card-add button { display: block; width: 100%; padding: 0.6rem 1rem; border: 0; background: var(--dm-btn); color: var(--dm-on-btn); font-weight: 500; font-size: 0.92rem; text-align: center; transition: background-color 0.2s, color 0.2s; }
.dm-card-add a:hover, .dm-card-add button:hover { background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
.dm-card-add form { margin: 0; }
.dm-card-body { display: flex; flex: 1; flex-direction: column; gap: 0.25rem; padding: 0.7rem 1.85rem 1.3rem; }
.dm-card-cat { font-size: 0.76rem; font-weight: 500; opacity: 0.85; }
.dm-card-cat:hover { color: var(--dm-primary); opacity: 1; }
.dm-card-name { display: -webkit-box; overflow: hidden; margin-bottom: 0.3rem; font: 600 0.92rem/1.35 var(--dm-font-sub, var(--dm-font-head)); letter-spacing: 0; -webkit-box-orient: vertical; -webkit-line-clamp: var(--dm-name-lines); text-wrap: wrap; }
/* Plain wrapping, not the headings' balance: Firefox balances the whole name before cutting it to its lines, so a long
   name showed as two short lines ("Portuguese / India 1962…") with the card half empty. */
.dm-card-name a:hover { color: var(--dm-primary); }
/* Card size a block chooses (Compact, Large). */
.is-cards-compact .dm-card-body { padding: 0.55rem 1rem 0.9rem; }
.is-cards-compact .dm-card-name { font-size: 0.84rem; }
.is-cards-compact .dm-price b { font-size: 0.88rem; }
.is-cards-large .dm-card-body { padding: 1rem 2rem 1.6rem; }
.is-cards-large .dm-card-name { font-size: 1.08rem; }
.is-cards-large .dm-price b { font-size: 1.1rem; }
.dm-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
/* The price, and on phones the round cart button at its end. */
.dm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.dm-card-foot .dm-price { min-width: 0; }
.dm-card-mcart { flex: none; margin: 0; }
.dm-card-mcart > button, a.dm-card-mcart { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: var(--dm-btn); color: var(--dm-on-btn); cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.2s; }
.dm-card-mcart > button:active, a.dm-card-mcart:active { transform: scale(0.92); }
.dm-card-mcart > button:disabled { opacity: 0.6; }
.dm-card-mcart > button:focus-visible, a.dm-card-mcart:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-price b { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; color: var(--dm-primary); }
.dm-price s { color: var(--dm-muted); font-size: 0.78rem; font-weight: 500; }
.dm-card.is-offer { border-color: var(--dm-line); }
.dm-card.is-offer .dm-card-body { padding: 1.25rem 1.85rem 1.85rem; }
.dm-card.is-offer .dm-card-tools { bottom: 3.6rem; }

/* Banners: wide one and narrow one */
.dm-banners { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.5rem; }
.dm-banners[style*='--n: 2'] { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.dm-banner { position: relative; display: flex; align-items: center; min-height: 14.5rem; overflow: hidden; padding: 2.5rem 2.5rem 2.25rem; border-radius: var(--dm-r); background: var(--dm-soft); color: var(--dm-text); }
.dm-banner.is-tint { background: var(--dm-primary-soft); }
.dm-banner.is-dark { background: var(--dm-secondary); color: var(--dm-on-secondary); }
.dm-banner.is-brand { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-banner-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; max-width: 55%; }
.dm-banner-kicker { font-size: 0.9rem; font-weight: 500; }
.dm-banner-text b { margin-bottom: 1.4rem; font: 500 clamp(1.3rem, 2.1vw, 1.75rem)/1.2 var(--dm-font-head); }
.dm-banner .dm-link { font-size: 0.82rem; font-weight: 600; }
.dm-banner img, .dm-banner .dm-lottie { position: absolute; inset-inline-end: 1.5rem; top: 50%; height: 80%; width: 36%; object-fit: contain; transform: translateY(-50%); transition: transform 0.4s var(--dm-ease); }
.dm-banner:hover img, .dm-banner:hover .dm-lottie { transform: translateY(-50%) scale(1.05); }
.dm-banner:hover .dm-link { color: var(--dm-primary); }
.dm-banner.is-brand:hover .dm-link { color: var(--dm-secondary); }

/* Deal of the day: a grey band, a countdown on every card */
.dm-deal { margin-top: clamp(3rem, 6vw, 4.5rem); padding-block: clamp(3rem, 6vw, 4.75rem); background: var(--dm-band-bg); }
.dm-deal .dm-sec-head.has-line::after { background: var(--dm-bg); }
.dm-grid.is-deals { gap: 1.5rem; }
.dm-countdown { display: flex; gap: 0.6rem; }
.dm-countdown.is-card { margin-top: 1rem; }
.dm-countdown span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.15rem; height: 3.15rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); }
.dm-countdown b { font-size: 1.05rem; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dm-countdown small { font-size: 0.62rem; font-weight: 500; text-transform: uppercase; }
.dm-deal + .dm-sec { padding-top: clamp(3rem, 6vw, 4.5rem); }

/* Rail (new arrivals) */
.dm-arrows { display: flex; gap: 0.5rem; }
.dm-arrows button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--dm-line); border-radius: 50%; background: var(--dm-bg); transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.dm-arrows button:hover { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--shop-cols, 4) - 1) * 1.5rem) / var(--shop-cols, 4)); gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.5rem 0.25rem 0.75rem; margin-inline: -0.25rem; scrollbar-width: none; }
.dm-rail::-webkit-scrollbar { display: none; }
.dm-rail > * { scroll-snap-align: start; }

/* Three columns */
.dm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.dm-cols.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-cols.is-one { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.dm-cols.is-lines.is-one .dm-col { padding-inline: 0; }
/* Product columns, "Price on the right": a price list with lines. Every row is the same height (names up to two
   lines, the old price under the new one), so the rows of side-by-side columns line up exactly. */
.dm-cols.is-list { column-gap: 3.5rem; row-gap: 2.5rem; align-items: start; }
.dm-col-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--dm-text); }
.dm-col-head h3 { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.dm-col-head a { flex: none; font-size: 0.85rem; font-weight: 600; }
.dm-col-head a:hover { color: var(--dm-primary); }
.dm-plist { margin: 0; padding: 0; list-style: none; }
.dm-plist a { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 6.5rem; align-items: center; column-gap: 1rem; height: 5rem; border-bottom: 1px solid var(--dm-line); }
.dm-plist a:has(.dm-plist-no) { grid-template-columns: 1.75rem 3.5rem minmax(0, 1fr) 6.5rem; }
.dm-plist-no { font: 600 0.8rem/1 var(--dm-font-head); color: var(--dm-muted); font-variant-numeric: tabular-nums; }
.dm-plist li:first-child .dm-plist-no { color: var(--dm-primary); }
.dm-plist-pic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: var(--dm-r-sm); background: var(--dm-img-bg); color: var(--dm-muted); }
.dm-plist-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--dm-ease); }
.dm-plist a:hover .dm-plist-pic img { transform: scale(1.08); }
.dm-plist a > b { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: 500; line-height: 1.35; }
.dm-plist a:hover > b { color: var(--dm-primary); }
.dm-plist-price { display: flex; flex-direction: column; align-items: flex-end; text-align: end; font-variant-numeric: tabular-nums; line-height: 1.3; }
.dm-plist-price b { color: var(--dm-primary); font-weight: 600; white-space: nowrap; }
.dm-plist-price s { color: var(--dm-muted); font-size: 0.8rem; white-space: nowrap; }
/* "Lines all round": a line between the columns too, a thin line under each heading, name with the price under it. */
.dm-cols.is-lines { column-gap: 0; }
.dm-cols.is-lines .dm-col { padding-inline-end: 2.5rem; }
.dm-cols.is-lines .dm-col + .dm-col { padding-inline: 2.5rem 0; border-inline-start: 1px solid var(--dm-line); }
.dm-cols.is-lines.is-two .dm-col + .dm-col, .dm-cols.is-lines .dm-col:last-child { padding-inline-end: 0; }
.dm-cols.is-lines:not(.is-two) .dm-col + .dm-col:not(:last-child) { padding-inline-end: 2.5rem; }
.dm-cols.is-lines .dm-col-head { border-bottom-width: 1px; }
.dm-cols.is-lines .dm-col-head h3 { font-size: 1.25rem; }
.dm-cols.is-lines .dm-plist a { grid-template-columns: 4.75rem minmax(0, 1fr); height: 6.75rem; }
.dm-cols.is-lines .dm-plist-pic { width: 4.75rem; height: 4.75rem; }
.dm-plist-text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.dm-plist-text > b { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: 500; line-height: 1.35; }
.dm-plist a:hover .dm-plist-text > b { color: var(--dm-primary); }
.dm-plist-text .dm-price b { color: var(--dm-primary); font-weight: 600; }
.dm-plist-text .dm-price s { color: var(--dm-muted); font-size: 0.85rem; }
@media (max-width: 47.99em) { .dm-cols.is-list { grid-template-columns: minmax(0, 1fr); } .dm-cols.is-lines .dm-col, .dm-cols.is-lines .dm-col + .dm-col { padding-inline: 0; border-inline-start: 0; } .dm-cols.is-lines .dm-plist a { grid-template-columns: 4rem minmax(0, 1fr); height: 6rem; } .dm-cols.is-lines .dm-plist-pic { width: 4rem; height: 4rem; } .dm-plist a { grid-template-columns: 3rem minmax(0, 1fr) auto; } .dm-plist a:has(.dm-plist-no) { grid-template-columns: 1.5rem 3rem minmax(0, 1fr) auto; } .dm-plist-pic { width: 3rem; height: 3rem; } }
.dm-mini { display: flex; align-items: center; gap: 1.25rem; padding: 0 0 1.5rem; }
.dm-mini + .dm-mini { padding-top: 1.5rem; border-top: 1px solid var(--dm-line); }
.dm-mini-pic { display: grid; place-items: center; flex: none; width: 8.75rem; height: 8.75rem; overflow: hidden; border-radius: var(--dm-r-sm); background: var(--dm-img-bg); color: var(--dm-muted); }
.dm-mini-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--dm-ease); }
.dm-mini:hover .dm-mini-pic img { transform: scale(1.1); }
.dm-mini > span:last-child { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.dm-mini > span:last-child > b { font-weight: 500; font-size: 1rem; line-height: 1.35; }
.dm-mini:hover > span:last-child > b { color: var(--dm-primary); }

/* Brands */
.dm-brands-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0; border-top: 1px solid var(--dm-line); border-inline-start: 1px solid var(--dm-line); }
.dm-brand { display: grid; place-items: center; height: 6rem; padding: 1rem; border-inline-end: 1px solid var(--dm-line); border-bottom: 1px solid var(--dm-line); color: var(--dm-muted); font: 700 1rem var(--dm-font-head); filter: grayscale(1); opacity: 0.75; transition: filter 0.3s, opacity 0.3s; }
.dm-brand:hover { filter: none; opacity: 1; color: var(--dm-text); }
.dm-brand img { max-height: 2.75rem; width: auto; }

/* Newsletter */
.dm-news { margin-top: clamp(3rem, 6vw, 5rem); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-news .dm-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 2.5rem; }
.dm-news .dm-kicker { color: inherit; opacity: 0.75; }
.dm-news h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.dm-news-form { position: relative; display: flex; flex: 1 1 26rem; max-width: 32rem; height: 3.25rem; overflow: hidden; border-radius: var(--dm-r-btn); background: var(--dm-bg); }
.dm-news-form input { flex: 1; min-width: 0; padding: 0 1.1rem; border: 0; outline: 0; background: none; color: var(--dm-text); }
.dm-news-form .dm-btn { height: auto; border-radius: 0; }
.dm-btn.is-dark { border-color: var(--dm-btn); background: var(--dm-btn); color: var(--dm-on-btn); }
.dm-btn.is-dark:hover { border-color: var(--dm-btn-hover); background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
.dm-news-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding-inline: 1rem; background: var(--dm-bg); color: var(--dm-text); font-weight: 600; text-align: center; }
.dm-news-note[hidden] { display: none; }
.dm-news-note svg { flex: none; color: var(--dm-primary); }
.dm-news-box { display: flex; flex: 1 1 min(26rem, 100%); min-width: 0; flex-direction: column; gap: 0.45rem; max-width: 32rem; }
.dm-news-box .dm-news-form { flex: none; width: 100%; max-width: none; }
.dm-news-form:has(input[aria-invalid='true']) { box-shadow: 0 0 0 2px var(--dm-secondary); }
.dm-news-err { color: inherit; font-size: 0.86rem; font-weight: 600; }
.dm-news.is-block { margin-top: 0; padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); border-radius: var(--dm-r-sm); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.dm-news-text { margin: 0.5rem 0 0; max-width: 46ch; opacity: 0.85; }
.dm-unsub { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-inline: auto; text-align: center; }
.dm-unsub .dm-auth-head { margin: 0; }
.dm-unsub-ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); }

/* Testimonials (Shofy's review slider) */
.dm-sec-head.is-center { flex-direction: column; justify-content: center; gap: 0.4rem; text-align: center; }
.dm-arrows.is-center { justify-content: center; margin-top: 1.5rem; }
.dm-tsm-rail { --shop-cols: 3; justify-content: safe center; }
.dm-tsm-card { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding: 2rem 2rem 1.6rem; border: 1px solid var(--dm-line-soft); border-radius: var(--dm-r-sm); background: var(--dm-bg); }
.dm-stars { display: flex; gap: 0.15rem; color: #ffb21d; }
.dm-tsm-card blockquote { flex: 1; margin: 0; font-size: 1.02rem; line-height: 1.7; }
.dm-tsm-card figcaption { display: flex; align-items: center; gap: 0.8rem; padding-top: 1.1rem; border-top: 1px solid var(--dm-line-soft); }
.dm-tsm-card figcaption > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dm-tsm-card figcaption b { font-family: var(--dm-font-head); font-size: 1rem; }
.dm-tsm-card figcaption small { color: var(--dm-muted); font-size: 0.86rem; }
.dm-tsm-pic { display: grid; flex: none; place-items: center; width: 3.25rem; height: 3.25rem; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--dm-primary) 14%, var(--dm-bg)); color: var(--dm-primary); font-weight: 700; }
.dm-tsm-pic img { width: 100%; height: 100%; object-fit: cover; }
.dm-tsm-q { color: color-mix(in srgb, var(--dm-primary) 35%, var(--dm-bg)); }

/* Photo gallery (Shofy's Instagram strip) */
.dm-gal-handle { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--dm-muted); font-weight: 500; }
a.dm-gal-handle:hover { color: var(--dm-primary); }
.dm-gal-grid { display: grid; grid-template-columns: repeat(var(--dm-gal, 6), minmax(0, 1fr)); gap: 0.75rem; }
.dm-gal-pic { position: relative; display: block; overflow: hidden; aspect-ratio: 1; max-width: 100%; border-radius: var(--dm-r-sm); background: var(--dm-soft); }
.dm-gal-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--dm-ease); }
.dm-gal-pic span { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 0.35); color: #fff; opacity: 0; transition: opacity 0.3s; }
a.dm-gal-pic:hover img, a.dm-gal-pic:focus-visible img { transform: scale(1.06); }
a.dm-gal-pic:hover span, a.dm-gal-pic:focus-visible span { opacity: 1; }

/* Picture and text */
.dm-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.dm-about.is-end .dm-about-pic { order: 2; }
.dm-about-pic { display: grid; place-items: center; overflow: hidden; aspect-ratio: 5 / 4; max-width: 100%; border-radius: var(--dm-r-sm); background: var(--dm-soft); color: var(--dm-muted); }
.dm-about-pic img, .dm-about-pic .dm-lottie { width: 100%; height: 100%; object-fit: cover; }
.dm-about-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.dm-about-text p { margin: 0; color: var(--dm-muted); font-size: 1.02rem; line-height: 1.75; }
.dm-about-text .dm-kicker { color: var(--dm-primary); }
.dm-about-text .dm-btn { margin-top: 0.5rem; }

/* Numbers */
.dm-nums-row { display: grid; grid-template-columns: repeat(var(--dm-n, 4), minmax(0, 1fr)); margin: 0; border-radius: var(--dm-r-sm); background: var(--dm-soft); }
.dm-nums-row > div { display: flex; flex-direction: column-reverse; gap: 0.3rem; padding: 2rem 1.5rem; text-align: center; }
.dm-nums-row > div + div { border-inline-start: 1px solid var(--dm-line-soft); }
.dm-nums-row dd { margin: 0; color: var(--dm-text); font: 700 clamp(1.6rem, 3vw, 2.3rem)/1.1 var(--dm-font-head); }
.dm-nums-row dt { color: var(--dm-muted); font-size: 0.95rem; }

/* Newsletter popup */
.dm-modal-box.dm-pop-box { display: grid; width: min(100%, 50rem); padding: 0; overflow: hidden; }
.dm-pop-box.has-pic { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.dm-pop-pic { min-height: 100%; background: var(--dm-soft); }
.dm-pop-pic img, .dm-pop-pic .dm-lottie { width: 100%; height: 100%; object-fit: cover; }
.dm-pop-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; padding: clamp(1.75rem, 4vw, 3rem); }
.dm-pop-body h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.dm-pop-body > p:not(.dm-kicker) { margin: 0; color: var(--dm-muted); }
.dm-pop-body .dm-news-box { width: 100%; max-width: none; flex: none; }
.dm-pop-body .dm-news-form { border: 1px solid var(--dm-line); }
.dm-pop-body .dm-news-err { color: var(--dm-danger, #dc2626); }
.dm-pop-no { padding: 0; border: 0; background: none; color: var(--dm-muted); font: inherit; font-size: 0.88rem; text-decoration: underline; cursor: pointer; }
.dm-pop-no:hover { color: var(--dm-text); }

/* Forge Campaign sign-up forms (pop-up, slide-in, bar, page block): the app draws them; Dazzle Monk gives them its
   colours, fonts and corners, light and dark. `html` wins over the app's plain look, which comes later in the page. */
html .fcf { color: var(--dm-text); }
html .fcf-box { background: var(--dm-bg); border-radius: max(var(--dm-r), 14px); box-shadow: 0 0 0 1px var(--dm-line), 0 30px 70px rgb(1 15 28 / 0.25); }
html .fcf-title { font-family: var(--dm-font-head); letter-spacing: -0.015em; color: var(--dm-text); }
html .fcf-kicker { font-family: var(--dm-font-sub, var(--dm-font-head)); }
html .fcf-text, html .fcf-note, html .fcf-no, html .fcf-tick { color: var(--dm-muted); }
html .fcf-in { border-color: var(--dm-line); background: var(--dm-bg); color: var(--dm-text); border-radius: var(--dm-r); }
html .fcf-btn, html .fcf-copy { background: var(--dm-btn); color: var(--dm-on-btn); border-radius: var(--dm-r-btn, var(--dm-r)); }
html .fcf-btn:hover { background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
html .fcf-x { background: color-mix(in srgb, var(--dm-bg) 85%, transparent); color: var(--dm-text); }
html .fcf-pic { background: var(--dm-soft); }
html .fcf-coupon b { color: var(--dm-text); }
html .fcf--bold .fcf-box { background: var(--fcf-a); } html .fcf--bold .fcf-title, html .fcf--bold .fcf-coupon b { color: #fff; }
html .fcf--bold .fcf-text, html .fcf--bold .fcf-note, html .fcf--bold .fcf-no, html .fcf--bold .fcf-tick { color: rgb(255 255 255 / 0.88); }
html .fcf--bold .fcf-in { background: #fff; color: #18181b; border-color: transparent; }
html .fcf--inline .fcf-box { box-shadow: 0 0 0 1px var(--dm-line); } html .fcf--inline.fcf--minimal .fcf-box { box-shadow: none; background: transparent; }

/* Stars and product reviews (Shofy's review tab) */
.dm-stars-rate { position: relative; display: inline-flex; flex: none; vertical-align: middle; line-height: 0; }
.dm-stars-rate > span { display: inline-flex; gap: 0.1rem; }
.dm-stars-bg { color: var(--dm-line); }
.dm-stars-fg { position: absolute; inset-block: 0; inset-inline-start: 0; overflow: hidden; width: var(--dm-rate, 0%); color: #ffb21d; white-space: nowrap; }
.dm-card-rate { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; }
.dm-card-rate small { color: var(--dm-muted); font-size: 0.8rem; }
.dm-pd-rating { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--dm-muted); font-size: 0.9rem; }
.dm-pd-rating:hover span { color: var(--dm-primary); text-decoration: underline; }
.dm-rvs { display: grid; grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 4vw, 4rem); scroll-margin-top: 6rem; }
.dm-rvs-sum { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem; border-radius: var(--dm-r-sm); background: var(--dm-soft); }
.dm-rvs-avg { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.dm-rvs-avg b { font: 700 3rem/1 var(--dm-font-head); }
.dm-rvs-avg small { color: var(--dm-muted); }
.dm-rvs-bars { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; list-style: none; font-size: 0.86rem; }
.dm-rvs-bars li { display: grid; grid-template-columns: 2.2rem 1fr 2rem; align-items: center; gap: 0.6rem; }
.dm-rvs-bars span { display: inline-flex; align-items: center; gap: 0.2rem; }
.dm-rvs-bars span svg { color: #ffb21d; }
.dm-rvs-bars i { position: relative; height: 0.4rem; overflow: hidden; border-radius: 99px; background: var(--dm-line); }
.dm-rvs-bars i::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: inherit; background: #ffb21d; }
.dm-rvs-bars small { color: var(--dm-muted); text-align: end; }
.dm-rvs-main { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; min-width: 0; }
.dm-rv-list { display: flex; flex-direction: column; width: 100%; }
.dm-rv { display: flex; flex-direction: column; gap: 0.6rem; padding-block: 1.4rem; border-bottom: 1px solid var(--dm-line-soft); }
.dm-rv:first-child { padding-top: 0; }
.dm-rv header { display: flex; align-items: center; gap: 0.8rem; }
.dm-rv header > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.75rem; }
.dm-rv header b { font-family: var(--dm-font-head); }
.dm-rv-ok { display: inline-flex; align-items: center; gap: 0.25rem; color: #16a34a; font-size: 0.8rem; font-weight: 600; }
.dm-rv-meta { display: flex; flex-basis: 100%; align-items: center; gap: 0.6rem; color: var(--dm-muted); font-size: 0.82rem; }
.dm-rv h4 { margin: 0; font-size: 1rem; }
.dm-rv p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.dm-rv-pics { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dm-rv-pics img { width: 5rem; height: 5rem; border-radius: var(--dm-r-sm); object-fit: cover; }
.dm-rv-reply { padding: 0.8rem 1rem; border-inline-start: 3px solid var(--dm-primary); border-radius: var(--dm-r-sm); background: var(--dm-soft); font-size: 0.92rem; }
.dm-rv-reply b { font-size: 0.85rem; }
.dm-rv-write { display: flex; flex-direction: column; gap: 1rem; width: 100%; margin-top: 0.75rem; padding-top: 1.75rem; border-top: 1px solid var(--dm-line); }
.dm-rv-form { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.dm-rv-form .dm-field { width: 100%; }
.dm-rv-form textarea { width: 100%; }
.dm-rate-pick { margin: 0; padding: 0; border: 0; }
.dm-rate-pick legend { margin-bottom: 0.4rem; font-weight: 600; }
.dm-rate-pick small { color: #dc2626; font-size: 0.86rem; }
/* Five radio stars, laid out right to left so "this one and all before it" light up with ~ */
.dm-rate-row { display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; }
[dir='rtl'] .dm-rate-row { flex-direction: row; }
.dm-rate-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dm-rate-row label { color: var(--dm-line); cursor: pointer; transition: color 0.15s, transform 0.15s; }
.dm-rate-row input:checked ~ label, .dm-rate-row label:hover, .dm-rate-row label:hover ~ label { color: #ffb21d; }
.dm-rate-row input:focus-visible + label { outline: 2px solid var(--dm-primary); outline-offset: 2px; border-radius: 4px; }
.dm-rate-row label:active { transform: scale(0.9); }
.dm-rv-keep { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }
.dm-rv-keep label { position: relative; display: block; cursor: pointer; }
.dm-rv-keep input { position: absolute; opacity: 0; }
.dm-rv-keep img { width: 4.5rem; height: 4.5rem; border: 2px solid var(--dm-primary); border-radius: var(--dm-r-sm); object-fit: cover; }
.dm-rv-keep em { position: absolute; inset-inline: 0; bottom: 0; padding: 0.1rem; border-radius: 0 0 var(--dm-r-sm) var(--dm-r-sm); background: var(--dm-primary); color: var(--dm-on-primary); font-size: 0.7rem; font-style: normal; text-align: center; }
.dm-rv-keep input:not(:checked) + img { border-color: var(--dm-line); opacity: 0.45; }
.dm-rv-keep input:not(:checked) ~ em { background: var(--dm-muted); }
.dm-rv-keep input:not(:checked) ~ em::after { content: ' (removed)'; }
.dm-rv-keep input:focus-visible + img { outline: 2px solid var(--dm-primary); outline-offset: 2px; }

.dm-co-save { color: var(--dm-muted); font-size: 0.8rem; font-style: normal; }

/* Product questions */
.dm-qa { display: flex; flex-direction: column; gap: 1.25rem; scroll-margin-top: 6rem; }
.dm-qa-find { display: flex; align-items: center; gap: 0.6rem; max-width: 32rem; height: 3rem; padding: 0 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); color: var(--dm-muted); }
.dm-qa-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--dm-text); font: inherit; }
.dm-qa-find:focus-within { border-color: var(--dm-primary); }
.dm-qa-hint { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 -0.5rem; color: var(--dm-primary); font-size: 0.9rem; font-weight: 600; }
.dm-qa-by { display: block; margin-top: 0.4rem; color: var(--dm-muted); font-size: 0.82rem; }
.dm-qa-ask { display: flex; flex-direction: column; gap: 1rem; max-width: 44rem; padding-top: 1.5rem; border-top: 1px solid var(--dm-line); }
.dm-qa-form { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.dm-qa-form .dm-field, .dm-qa-form textarea { width: 100%; }
.dm-qa-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; }
@media (max-width: 575.98px) { .dm-qa-two { grid-template-columns: minmax(0, 1fr); } }

/* Flash sales */
.dm-badge.is-flash { display: inline-flex; align-items: center; gap: 0.2rem; background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-flash-box { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.25rem 0 0.5rem; padding: 1rem 1.15rem; border: 1px solid color-mix(in srgb, var(--dm-primary) 40%, transparent); border-radius: var(--dm-r-sm); background: color-mix(in srgb, var(--dm-primary) 7%, var(--dm-bg)); }
.dm-flash-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.dm-flash-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.6rem; border-radius: 99px; background: var(--dm-primary); color: var(--dm-on-primary); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.dm-flash-tag svg { animation: dm-zap 1.6s ease-in-out infinite; }
@keyframes dm-zap { 0%, 100% { transform: none; } 50% { transform: scale(1.18) rotate(-8deg); } }
.dm-flash-tag.is-light { background: var(--dm-on-secondary); color: var(--dm-secondary); }
.dm-flash-tag.is-light svg { color: var(--dm-primary); }
.dm-flash-name { font-family: var(--dm-font-head); font-weight: 600; }
.dm-flash-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.dm-flash-ends { color: var(--dm-muted); font-size: 0.88rem; }
.dm-flash-clock { display: inline-flex; align-items: center; gap: 0.3rem; font-variant-numeric: tabular-nums; }
.dm-flash-clock span { display: inline-flex; align-items: baseline; gap: 0.1rem; min-width: 2.6rem; justify-content: center; padding: 0.35rem 0.45rem; border-radius: var(--dm-r-sm); background: var(--dm-secondary); color: var(--dm-on-secondary); }
.dm-flash-clock b { font: 700 1.1rem/1 var(--dm-font-head); }
.dm-flash-clock small { font-size: 0.7rem; opacity: 0.7; }
.dm-flash-clock [hidden] { display: none; }
.dm-flash-clock i { color: var(--dm-muted); font-style: normal; font-weight: 700; }
.dm-flash-clock.is-urgent span { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-flash-stock { display: flex; flex-direction: column; gap: 0.35rem; }
.dm-flash-stock small { color: var(--dm-muted); font-size: 0.84rem; }
.dm-flash-stock small b { color: var(--dm-primary); }
.dm-flash-bar { position: relative; display: block; height: 0.5rem; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--dm-primary) 15%, var(--dm-bg)); }
.dm-flash-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: inherit; background: var(--dm-primary); transition: width 0.6s var(--dm-ease); }
.dm-flash-box.is-compact { padding: 0.75rem 0.9rem; }
.dm-fs-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); border-radius: var(--dm-r-sm); background: var(--dm-secondary); color: var(--dm-on-secondary); }
.dm-fs-band.is-soon { background: color-mix(in srgb, var(--dm-secondary) 88%, var(--dm-primary)); }
.dm-fs-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; min-width: 0; }
.dm-fs-head h2 { color: inherit; font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
.dm-fs-head p { margin: 0; opacity: 0.75; }
.dm-fs-clock-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.dm-fs-clock-wrap > small { flex-basis: 100%; opacity: 0.7; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.dm-countdown.is-big span { width: 4.4rem; height: 4.6rem; border: 0; background: color-mix(in srgb, var(--dm-on-secondary) 10%, transparent); color: inherit; }
.dm-countdown.is-big b { font: 700 1.7rem/1 var(--dm-font-head); }
.dm-countdown.is-big small { margin-top: 0.3rem; opacity: 0.7; }
.dm-countdown.is-big.is-urgent span { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-fs-rail-head { display: flex; justify-content: flex-end; margin: 1.5rem 0 0.75rem; }
.dm-fs-item { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.dm-flash-stock.is-card { padding-inline: 0.25rem; }
@media (prefers-reduced-motion: reduce) { .dm-flash-tag svg { animation: none; } }
@media (max-width: 575.98px) { .dm-countdown.is-big span { width: 3.5rem; height: 3.8rem; } .dm-countdown.is-big b { font-size: 1.35rem; } }

/* Frequently bought together */
.dm-fbt { padding-block: clamp(2rem, 4vw, 3rem) 0; }
.dm-fbt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1.25rem; }
.dm-fbt-deal { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 99px; background: color-mix(in srgb, var(--dm-primary) 12%, var(--dm-bg)); color: var(--dm-primary); font-size: 0.85rem; font-weight: 700; }
.dm-fbt-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); align-items: center; gap: 1.5rem 2.5rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); }
.dm-fbt-pics { display: flex; flex-wrap: wrap; grid-column: 1 / -1; align-items: center; row-gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dm-fbt-pics li { position: relative; display: grid; place-items: center; width: 6.5rem; height: 6.5rem; overflow: hidden; border-radius: var(--dm-r-sm); background: var(--dm-soft); color: var(--dm-muted); transition: opacity 0.25s, transform 0.25s var(--dm-ease), filter 0.25s; }
.dm-fbt-pics li + li { margin-inline-start: 2.25rem; }
.dm-fbt-pics li + li::before { content: '+'; position: absolute; inset-inline-start: -1.7rem; top: 50%; color: var(--dm-muted); font: 600 1.4rem/1 var(--dm-font-head); transform: translateY(-50%); }
.dm-fbt-pics li { overflow: visible; }
.dm-fbt-pics img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.dm-fbt-pics li.is-off { opacity: 0.35; filter: grayscale(1); transform: scale(0.92); }
.dm-fbt-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
.dm-fbt-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; font-size: 0.95rem; }
.dm-fbt-pick { display: flex; flex: 1; align-items: center; gap: 0.6rem; min-width: 0; cursor: pointer; }
.dm-fbt-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dm-fbt-box { display: grid; flex: none; place-items: center; width: 1.25rem; height: 1.25rem; border: 2px solid var(--dm-line); border-radius: 0.3rem; color: transparent; transition: background 0.15s, border-color 0.15s; }
.dm-fbt-pick input:checked + .dm-fbt-box { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-fbt-pick input:focus-visible + .dm-fbt-box { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-fbt-pick input:disabled:checked + .dm-fbt-box { opacity: 0.6; }
.dm-fbt-list li.is-off .dm-fbt-pick { cursor: default; color: var(--dm-muted); }
.dm-fbt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-fbt-price { display: inline-flex; align-items: baseline; gap: 0.4rem; margin-inline-start: auto; white-space: nowrap; }
.dm-fbt-price s { color: var(--dm-muted); font-size: 0.85rem; }
.dm-fbt-price b { color: var(--dm-primary); }
.dm-fbt-total { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding-inline-start: 2rem; border-inline-start: 1px solid var(--dm-line); }
.dm-fbt-total > span:first-child { color: var(--dm-muted); font-size: 0.9rem; }
.dm-fbt-sum b { font: 700 1.6rem/1.1 var(--dm-font-head); }
.dm-fbt-sum s { margin-inline-start: 0.35rem; color: var(--dm-muted); }
.dm-fbt-save { color: #16a34a; font-weight: 700; }
.dm-fbt-total .dm-btn { margin-top: 0.5rem; }
.dm-cart-bundle { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--dm-primary); font-weight: 600; }
.dm-cart-total s { margin-inline-end: 0.4rem; color: var(--dm-muted); font-weight: 400; }
.dm-cart-more-deal { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding-inline: 0.25rem; color: var(--dm-primary); font-size: 0.85rem; font-weight: 600; }
@media (max-width: 991.98px) {
    .dm-fbt-body { grid-template-columns: minmax(0, 1fr); }
    .dm-fbt-total { padding: 1.25rem 0 0; border-inline-start: 0; border-top: 1px solid var(--dm-line); }
}
@media (max-width: 575.98px) {
    .dm-fbt-pics li { width: 4.5rem; height: 4.5rem; }
    .dm-fbt-pics li + li { margin-inline-start: 1.6rem; }
    .dm-fbt-pics li + li::before { inset-inline-start: -1.2rem; font-size: 1.1rem; }
}

/* Promotions */
.dm-nudge { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.9rem; padding: 0.75rem 0.9rem; border: 1px dashed var(--dm-primary); border-radius: var(--dm-r-sm); background: color-mix(in srgb, var(--dm-primary) 6%, var(--dm-bg)); }
.dm-nudge p { display: flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--dm-text); font-size: 0.9rem; font-weight: 600; }
.dm-nudge p svg { flex: none; color: var(--dm-primary); }
.dm-nudge-bar { position: relative; display: block; height: 0.35rem; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--dm-primary) 15%, var(--dm-bg)); }
.dm-nudge-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: inherit; background: var(--dm-primary); transition: width 0.5s var(--dm-ease); }
.dm-promo-ship { margin-inline-start: 0.35rem; padding: 0.1rem 0.45rem; border-radius: 99px; background: color-mix(in srgb, #16a34a 12%, var(--dm-bg)); color: #15803d; font-size: 0.72rem; font-weight: 700; }
.dm-pd-promos { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.dm-pd-promos li { display: flex; align-items: center; gap: 0.45rem; color: var(--dm-primary); font-size: 0.92rem; font-weight: 600; }

/* Toast after adding to the cart */
.dm-toast { position: fixed; z-index: 95; inset-inline-start: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 0.75rem; max-width: calc(100vw - 2rem); padding: 0.8rem 1rem 0.8rem 1.1rem; border-radius: var(--dm-r-sm); background: var(--dm-secondary); color: var(--dm-on-secondary); font-size: 0.9rem; box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); transform: translateX(-50%); animation: dm-toast 0.35s var(--dm-ease); }
[dir='rtl'] .dm-toast { transform: translateX(50%); }
.dm-toast a { color: var(--dm-primary); font-weight: 600; white-space: nowrap; }
@keyframes dm-toast { from { opacity: 0; translate: 0 12px; } }

/* ── Footer (Shofy footer 1: light, four columns) ── */
.dm-footer { margin-top: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--dm-line); background: var(--dm-footer-bg); color: var(--dm-footer-text); font-size: 0.94rem; }
.dm-news + .dm-footer { margin-top: 0; }
.dm-foot-grid { display: grid; grid-template-columns: 1.35fr 0.85fr 0.85fr 1.1fr; gap: 2.5rem; padding-block: 5.6rem 2.25rem; }
.dm-footer h3 { margin-bottom: 1.5rem; color: var(--dm-footer-heading); font: 600 1.1rem/1.25 var(--dm-font-head); letter-spacing: 0; }
.dm-footer ul { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.dm-footer ul a { position: relative; padding-inline-start: 0.85rem; }
.dm-footer ul a::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; transform: translateY(-50%); }
.dm-footer a { transition: color 0.2s; }
.dm-footer a:hover { color: var(--dm-footer-hover); }
.dm-foot-about { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.dm-foot-about .dm-logo-name { color: var(--dm-footer-heading); }
.dm-foot-about p { max-width: 34ch; }
.dm-social { flex-direction: row !important; gap: 0.5rem !important; }
/* Social links: round outlined buttons like the product page's share row; on hover they fill with the brand colour and rise. */
.dm-social a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0 !important; border: 1px solid color-mix(in srgb, var(--dm-footer-text) 22%, transparent); border-radius: 50%; color: var(--dm-footer-text); transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.3s var(--dm-ease); }
.dm-social a .dm-i { transition: transform 0.3s var(--dm-ease); }
.dm-social a::before { content: none !important; }
.dm-social a:hover, .dm-social a:focus-visible { border-color: var(--dm-footer-hover); background: var(--dm-footer-hover); color: var(--dm-on-primary); }
.dm-social a:focus-visible { outline: 2px solid var(--dm-footer-hover); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .dm-social a:hover { transform: translateY(-3px); }
    .dm-social a:hover .dm-i { transform: scale(1.12) rotate(-6deg); }
    .dm-social a:active { transform: translateY(-1px) scale(0.95); }
}
.dm-foot-talk { display: flex; flex-direction: column; align-items: flex-start; }
.dm-foot-talk small { font-size: 0.94rem; }
.dm-foot-phone { margin: 0.2rem 0 1.4rem; color: var(--dm-footer-heading); font-weight: 500; font-size: 1.5rem; }
.dm-foot-contact { gap: 0.9rem !important; }
.dm-foot-contact li { display: flex; align-items: flex-start; gap: 0.7rem; }
.dm-foot-contact li a { padding: 0; }
.dm-foot-contact li a::before { content: none; }
.dm-foot-contact .dm-i { margin-top: 0.15rem; color: var(--dm-footer-heading); }
/* Talk to us: tighter (Chandru, 2026-11-07). The number sits close to its line, the email and address close to it
   and to each other, the address lines closer. */
.dm-foot-talk small { line-height: 1.35; }
.dm-foot-phone { margin: 0.1rem 0 0.85rem; line-height: 1.2; }
.dm-foot-contact { gap: 0.55rem !important; }
.dm-foot-contact li { gap: 0.55rem; line-height: 1.45; }
.dm-foot-contact .dm-i { margin-top: 0.1rem; }
.dm-footer .dm-foot-grid > div:has(> .dm-foot-talk) h3 { margin-bottom: 1rem; }
@media (max-width: 991.98px) {
    /* On phones and tablets it takes the whole width, so the email and address don't wrap in a narrow column. */
    .dm-footer .dm-foot-grid > div:has(> .dm-foot-talk) { grid-column: 1 / -1; }
    .dm-foot-contact li a { overflow-wrap: anywhere; hyphens: none; }
}
@media (max-width: 47.99em) {
    /* Phones: one column, everything larger so the section fills the width (Chandru, 2026-11-07: no split). */
    .dm-foot-talk small { font-size: 1.05rem; }
    .dm-footer .dm-foot-talk a.dm-foot-phone { font-size: clamp(1.5rem, 8.2vw, 2rem); margin: 0.15rem 0 1rem; white-space: nowrap; }
    .dm-foot-contact { gap: 0.8rem !important; }
    .dm-foot-contact li { font-size: 1.15rem; gap: 0.7rem; }
    .dm-foot-contact .dm-i { width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; }
}
.dm-foot-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; padding-block: 1.4rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--dm-line); font-size: 0.9rem; }
.dm-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.dm-pay > p { margin: 0; opacity: 0.8; }
/* Payment icons (Theme options › Footer), from the shared set: bare marks in a row that wraps on phones,
   in one colour (the footer's text colour) or their brand colours. */
.dm-pay-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.dm-pay-icons > span { display: inline-flex; }
.dm-pay-i { display: block; width: auto; height: 1.4rem; }
/* WhatsApp chat: a round button in the corner (WhatsApp's own green, so shoppers know it) with a small panel of who answers. */
.dm-wa { --wa: #25d366; --wa-ink: #075e54; position: fixed; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 61; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.dm-wa.is-end { inset-inline-end: max(1.25rem, env(safe-area-inset-right, 0px)); }
.dm-wa.is-start { inset-inline-start: max(1.25rem, env(safe-area-inset-left, 0px)); align-items: flex-start; }
.dm-wa-btn { display: inline-flex; align-items: center; gap: 0.55rem; height: 3.25rem; padding: 0 1.2rem 0 0.95rem; border: 0; border-radius: 2rem; background: var(--wa); color: #fff; font: inherit; font-weight: 600; font-size: 0.92rem; box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.45); cursor: pointer; transition: transform 0.25s var(--dm-ease); }
[dir='rtl'] .dm-wa-btn { padding: 0 0.95rem 0 1.2rem; }
.dm-wa-btn:hover { transform: translateY(-2px); }
.dm-wa-btn:focus-visible { outline: 3px solid var(--wa-ink); outline-offset: 3px; }
.dm-wa-panel { width: min(21rem, calc(100vw - 2.5rem)); overflow: hidden; border: 1px solid var(--dm-line); border-radius: calc(var(--dm-r) * 1.4); background: var(--dm-bg); color: var(--dm-text); box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.35); transform-origin: bottom right; animation: dm-wa-in 0.25s var(--dm-ease); }
.dm-wa.is-start .dm-wa-panel { transform-origin: bottom left; }
@keyframes dm-wa-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.dm-wa-head { display: flex; align-items: flex-start; gap: 0.7rem; padding: 1rem 1rem 0.9rem; background: var(--wa-ink); color: #fff; }
.dm-wa-head b { font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 0.98rem; }
.dm-wa-head p { margin: 0.2rem 0 0; opacity: 0.85; font-size: 0.82rem; line-height: 1.45; }
.dm-wa-head > div { flex: 1; min-width: 0; }
.dm-wa-logo { display: grid; flex: none; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--wa); }
.dm-wa-x { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; margin: -0.3rem -0.3rem 0 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.dm-wa-x:hover { background: rgb(255 255 255 / 0.12); }
.dm-wa-list { display: flex; flex-direction: column; margin: 0; padding: 0.4rem; list-style: none; max-height: 50vh; overflow-y: auto; }
.dm-wa-agent { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.6rem; border-radius: var(--dm-r); color: var(--dm-text); transition: background-color 0.15s; }
.dm-wa-agent:hover, .dm-wa-agent:focus-visible { background: var(--dm-soft, rgb(0 0 0 / 0.04)); outline: none; }
.dm-wa-agent > .dm-i { color: var(--dm-muted); }
.dm-wa-face { position: relative; display: grid; flex: none; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--dm-primary-soft); color: var(--dm-primary); font-family: var(--dm-font-head); font-weight: 700; }
.dm-wa-face::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 0.7rem; height: 0.7rem; border: 2px solid var(--dm-bg); border-radius: 50%; background: var(--dm-muted); }
.dm-wa-agent.is-on .dm-wa-face::after { background: var(--wa); }
.dm-wa-who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dm-wa-who b { font-size: 0.9rem; }
.dm-wa-who small { color: var(--dm-muted); font-size: 0.76rem; }
.dm-wa-who em { font-style: normal; }
.dm-wa-agent.is-on .dm-wa-who em { color: #15803d; font-weight: 500; }
.dm-wa-foot { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.55rem 1rem 0.75rem; color: var(--dm-muted); font-size: 0.72rem; }
.dm-wa.is-end ~ .dm-top-btn { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
/* Icon only: a round bubble. Hidden on the home page when the store says so. */
.dm-wa.is-icon .dm-wa-btn { width: 3.5rem; height: 3.5rem; padding: 0; justify-content: center; }
.dm-wa.is-icon .dm-wa-btn span { display: none; }
.dm-wa.is-icon .dm-wa-btn .dm-i { width: 30px; height: 30px; }
.is-home .dm-wa.no-home { display: none; }
.is-home .dm-wa.no-home ~ .dm-top-btn { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
.dm-wa-inline { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.75rem; }
.dm-wa-cta { gap: 0.5rem; border-color: #25d366; background: transparent; color: var(--dm-text); }
.dm-wa-cta .dm-i { color: #25d366; }
.dm-wa-cta:hover { border-color: #25d366; background: #25d366; color: #fff; }
.dm-wa-cta:hover .dm-i { color: #fff; }
.dm-wa-inline.is-cart .dm-wa-cta { width: 100%; }
.dm-wa-inline p { margin: 0; color: var(--dm-muted); font-size: 0.78rem; }
@media (min-width: 48em) { .dm-wa.no-desktop { display: none; } }
@media (max-width: 47.99em) {
    .dm-wa.no-phones { display: none; }
    /* Phones: just the round button, above the tab bar; out of the way where a pay or buy bar sits. */
    .dm-wa-btn { width: 3.25rem; padding: 0; justify-content: center; }
    [dir='rtl'] .dm-wa-btn { padding: 0; }
    .dm-wa-btn span { display: none; }
    .has-tabs .dm-wa { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
    .has-tabs .dm-wa.is-end ~ .dm-top-btn { bottom: calc(9rem + env(safe-area-inset-bottom, 0px)); }
    .is-product .dm-wa, .is-cart .dm-wa, .is-checkout .dm-wa { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dm-wa-panel { animation: none; } .dm-wa-btn { transition: none; } }
.dm-top-btn { position: fixed; inset-inline-end: calc(max(1.25rem, env(safe-area-inset-right, 0px)) + var(--dm-sbw, 0px)); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; background: var(--dm-btn); color: var(--dm-on-btn); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s, transform 0.35s var(--dm-ease), visibility 0.25s; }
.dm-top-btn:hover { background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
.dm-top-btn.is-on { opacity: 1; visibility: visible; transform: none; }
/* Over dark parts of the page (the footer, dark bands) it turns white, so it never disappears. */
.dm-top-btn { transition: opacity 0.25s, transform 0.35s var(--dm-ease), visibility 0.25s, background-color 0.3s, color 0.3s; }
.dm-top-btn.is-on-dark { background: #fff; color: #010f1c; }
.dm-top-btn.is-on-dark:hover { background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }

/* ── Smaller screens ── */
@media (max-width: 80em) {
    .dm-account-t { display: none; }
    .dm-account { margin-inline-end: 0.25rem; }
    .dm-search { margin-inline-start: 0.5rem; }
    .dm-logo { min-width: 0; }
}
/* Tablets (about 768–1024px): the search bar gives way to the logo and icons instead of pushing the row past the
   screen edge; the category picker goes so the typing space stays usable. */
.dm-mainbar .dm-search { min-width: 0; }
@media (min-width: 48.01em) and (max-width: 64em) {
    .dm-mainbar .dm-search-cat { display: none; }
    .dm-mainbar .dm-wrap { gap: 1.25rem; }
    .dm-mainbar .dm-actions { gap: 1.25rem; }
}
@media (max-width: 64em) {
    .dm-bar-links { display: none; }
    .dm-grid, .dm-grid.is-deals { grid-template-columns: repeat(var(--shop-cols-t, 3), minmax(0, 1fr)); }
    .dm-rail { grid-auto-columns: calc((100% - (var(--shop-cols-t, 3) - 1) * 1.5rem) / var(--shop-cols-t, 3)); }
    .dm-cats-row { grid-auto-columns: calc((100% - 3 * 1.5rem) / 4); }
    .dm-feats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dm-feat { padding: 1.5rem 1.75rem; }
    .dm-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dm-mini-pic { width: 6.5rem; height: 6.5rem; }
}
@media (max-width: 48em) {
    .dm-topbar nav { display: none; }
    .dm-mainbar .dm-wrap { flex-wrap: wrap; gap: 0.75rem 1rem; padding-block: 0.9rem; }
    .dm-header.is-compact .dm-mainbar .dm-wrap { padding-block: 0.6rem; }
    /* The search bar gives way to an icon beside the cart (it opens the search screen); the menu drawer keeps its own at the top. */
    .dm-mainbar .dm-search { display: none; }
    .dm-search-btn { display: grid; margin-inline-start: auto; }
    .dm-mainbar .dm-search-btn + .dm-actions { margin-inline-start: 0.25rem; }
    .dm-burger { display: grid; margin-inline-start: -0.5rem; }
    .dm-logo-name { font-size: 1.1rem; }
    .dm-search { order: 3; flex: 1 1 100%; max-width: none; height: 2.85rem; margin: 0; }
    .dm-search input { padding: 0 1rem; }
    .dm-search-cat { display: none; }
    .dm-search button { width: 3.1rem; }
    .dm-actions { gap: 1.25rem; }
    .dm-account-ic { width: 2.4rem; height: 2.4rem; border: 0; }
    .dm-account { margin: 0; }
    .dm-menubar { display: none; }
    .dm-slide > .dm-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
    .dm-slide-text { position: relative; z-index: 1; padding-block: 2.5rem 0.5rem; }
    .dm-slide-text .dm-btn { margin-bottom: 0; }
    /* Phones: the words and the button sit in the middle, over the picture below them (Chandru, 2026-11-07). */
    .dm-slide-text, .dm-slide-typed { align-items: center; text-align: center; }
    .dm-slide h1, .dm-slide h2 { margin-inline: auto; }
    .dm-slide-pic { padding-block: 1.5rem 3.5rem; }
    .dm-slide-pic img, .dm-slide-pic .dm-lottie { max-height: calc(15rem * var(--dm-hero-scale, 1)); }
    .dm-cats-row { grid-auto-columns: calc((100% - 2 * 1rem) / 3); gap: 1rem; }
    .dm-cat-pic { margin-bottom: 0.75rem; }
    .dm-cat b { font-size: 0.85rem; }
    .dm-cat small { font-size: 0.8rem; }
    .dm-feats-row { grid-template-columns: minmax(0, 1fr); }
    .dm-sec-head { margin-bottom: 1.6rem; }
    .dm-sec-head.has-line::after { display: none; }
    .dm-tabs { gap: 0.5rem 1.4rem; }
    .dm-tabs button { font-size: 1rem; }
    .dm-grid, .dm-grid.is-deals { grid-template-columns: repeat(var(--shop-cols-m, 2), minmax(0, 1fr)); gap: 0.75rem; }
    .dm-rail { grid-auto-columns: calc((100% - 0.75rem) / 2); gap: 0.75rem; }
    .dm-card-body, .dm-card.is-offer .dm-card-body { padding: 0.65rem 0.8rem 0.9rem; }
    /* No hover on touch screens: the side buttons stay in view. */
    .dm-card-tools { inset-inline-end: 0.6rem; bottom: 0.6rem; opacity: 1; visibility: visible; transform: none; }
    .dm-card-tools a, .dm-card-tools button { width: calc(2.2rem - 2px); height: calc(2.2rem - 1px); opacity: 1; transform: none; }
    .dm-card:hover { transform: none; }
    .dm-card-add { display: none; }
    .dm-badges { top: 0.6rem; inset-inline: 0.6rem; gap: 0.25rem; }
    .dm-badge { height: 1.15rem; padding-inline: 0.38rem; font-size: 0.62rem; }
    .dm-countdown { gap: 0.35rem; }
    .dm-countdown span { width: 2.6rem; height: 2.6rem; }
    .dm-banners, .dm-banners[style*='--n: 2'] { grid-template-columns: minmax(0, 1fr); }
    .dm-banner { min-height: 12rem; padding: 1.75rem; }
    .dm-cols, .dm-foot-grid { grid-template-columns: minmax(0, 1fr); }
    .dm-foot-grid { padding-block: 3rem 1.5rem; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Breadcrumb ── */
.dm-crumbs { padding-block: 1.5rem; }
.dm-crumbs.is-band { margin-bottom: 0.5rem; background: var(--dm-crumb-bg); padding-block: 1.1rem; }
.dm-crumbs-h { margin-bottom: 0.25rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.dm-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; color: var(--dm-muted); font-size: 0.85rem; }
.dm-crumbs li + li::before { content: '/'; margin-inline-end: 0.4rem; opacity: 0.6; }
.dm-crumbs a:hover { color: var(--dm-primary); }
.dm-crumbs [aria-current] { color: var(--dm-text); }
/* Back link on the right of the breadcrumb (Theme options › Breadcrumb › Show a Back link). */
.dm-crumbs-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dm-crumbs-main { min-width: 0; }
.dm-crumbs-back { display: inline-flex; flex: none; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border: 1px solid color-mix(in srgb, var(--dm-text) 14%, transparent); border-radius: 999px; background: var(--dm-bg, #fff); color: var(--dm-text); font-size: 0.85rem; font-weight: 500; transition: border-color 0.2s, color 0.2s, transform 0.2s; }
.dm-crumbs-back svg { transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1); }
.dm-crumbs-back:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
.dm-crumbs-back:hover svg { transform: translateX(-3px); }
[dir="rtl"] .dm-crumbs-back svg { transform: scaleX(-1); }
[dir="rtl"] .dm-crumbs-back:hover svg { transform: scaleX(-1) translateX(-3px); }
@media (max-width: 575px) { .dm-crumbs-back { padding: 0.4rem 0.7rem; } .dm-crumbs-back span { display: none; } }

/* ── Shop: filters beside results ── */
/* Sub-categories as pictures on a category page (Figurines › Marvel, DC, Disney). */
.dm-subcats { padding-block: 1.25rem 0; }
.dm-subcats-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dm-subcat { display: flex; flex-direction: column; align-items: center; width: 7.5rem; text-align: center; }
.dm-subcat-pic { display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin-bottom: 0.6rem; overflow: hidden; border: 2px solid transparent; border-radius: calc(var(--dm-r) * 1.5); background: var(--dm-primary-soft); color: var(--dm-primary); transition: border-color 0.2s; }
.dm-subcat-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--dm-ease); }
.dm-subcat-pic .dm-card-ph svg { width: 70%; }
.dm-subcat.is-all .dm-subcat-pic { background: var(--dm-text); color: var(--dm-bg); }
.dm-subcat b { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--dm-font-head); font-weight: 600; font-size: 0.85rem; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; transition: color 0.2s; }
.dm-subcat small { margin-top: 0.15rem; color: var(--dm-muted); font-size: 0.75rem; }
.dm-subcat:hover b, .dm-subcat[aria-current] b { color: var(--dm-primary); }
.dm-subcat:hover .dm-subcat-pic img { transform: scale(1.08); }
.dm-subcat[aria-current] .dm-subcat-pic { border-color: var(--dm-primary); }
.dm-subcat.is-all[aria-current] .dm-subcat-pic { background: var(--dm-primary); color: #fff; }
.dm-subcat:focus-visible { outline: none; }
.dm-subcat:focus-visible .dm-subcat-pic { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
@media (max-width: 47.99em) {
    /* Phones: one row that swipes, the next picture peeking in. */
    .dm-subcats { padding-block: 1rem 0; }
    .dm-subcats-row { flex-wrap: nowrap; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; }
    .dm-subcats-row::-webkit-scrollbar { display: none; }
    .dm-subcats-row > li { flex: 0 0 auto; scroll-snap-align: start; }
    .dm-subcat { width: 5.4rem; }
    .dm-subcat-pic { margin-bottom: 0.4rem; }
    .dm-subcat b { font-size: 0.7rem; }
    .dm-subcat small { font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) { .dm-subcat-pic img { transition: none; } }
/* All categories: main ones down the side, their sub-categories as pictures. */
.dm-allc { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; padding-block: 1.75rem 2.5rem; }
.dm-allc-rail { position: sticky; top: calc(var(--dm-stuck, 0px) + 1rem); max-height: calc(100vh - var(--dm-stuck, 0px) - 2rem); overflow-y: auto; scrollbar-width: thin; }
.dm-allc-rail ul { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.dm-allc-rail a { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.6rem; border-radius: var(--dm-r); color: var(--dm-text); font-family: var(--dm-font-head); font-size: 0.82rem; font-weight: 500; transition: background-color 0.15s, color 0.15s; }
.dm-allc-rail a:hover { color: var(--dm-primary); }
.dm-allc-rail a[aria-current] { background: var(--dm-primary-soft); color: var(--dm-primary); font-weight: 600; }
.dm-allc-dot { display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; overflow: hidden; border-radius: calc(var(--dm-r) * 0.75); background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-allc-dot img { width: 100%; height: 100%; object-fit: cover; }
.dm-allc-main { display: grid; gap: 2.25rem; min-width: 0; }
.dm-allc-sec { scroll-margin-top: calc(var(--dm-stuck, 0px) + 1rem); }
.dm-allc-sec > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--dm-line); }
.dm-allc-sec h2 { font-size: 1.3rem; }
.dm-allc-sec > header a { color: var(--dm-primary); font-weight: 500; font-size: 0.9rem; }
.dm-allc-sec > header small { margin-inline-start: 0.3rem; color: var(--dm-muted); font-weight: 400; }
.dm-allc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 1.25rem 1rem; margin: 0; padding: 0; list-style: none; }
.dm-allc-grid .dm-subcat { width: auto; }
.dm-allc-every { justify-self: start; }
@media (max-width: 47.99em) {
    /* Phones: the app layout, a narrow list on one side and pictures on the other. */
    .is-categories .dm-crumbs.is-band { padding-block: 1rem; }
    .dm-allc { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.85rem; padding-block: 0.75rem 1.5rem; padding-inline-start: env(safe-area-inset-left, 0px); }
    .dm-allc-rail { top: var(--dm-stuck, 0px); max-height: calc(100vh - var(--dm-stuck, 0px) - 4.5rem); border-inline-end: 1px solid var(--dm-line); scrollbar-width: none; }
    .dm-allc-rail::-webkit-scrollbar { display: none; }
    .dm-allc-rail ul { gap: 0; }
    .dm-allc-rail a { flex-direction: column; gap: 0.35rem; padding: 0.7rem 0.3rem; border-radius: 0; border-inline-start: 3px solid transparent; text-align: center; font-size: 0.62rem; line-height: 1.25; overflow-wrap: break-word; }
    .dm-allc-rail a[aria-current] { border-inline-start-color: var(--dm-primary); }
    .dm-allc-dot { width: 2.6rem; height: 2.6rem; }
    .dm-allc-main { gap: 1.5rem; }
    .dm-allc-sec > header { margin-bottom: 0.75rem; }
    .dm-allc-sec h2 { font-size: 1rem; }
    .dm-allc-sec > header small { display: none; }
    .dm-allc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 0.6rem; }
    .dm-allc-every { justify-self: stretch; justify-content: center; }
    .dm-allc-grid .dm-subcat b { font-size: 0.7rem; }
    .dm-allc-grid .dm-subcat small { font-size: 0.64rem; }
}
@media (max-width: 22em) { .dm-allc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dm-shop { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 2rem; align-items: start; padding-block: 1.75rem 0; }
.dm-filters { position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.dm-filters form { display: flex; flex-direction: column; gap: 1rem; }
.dm-filters-head { display: none; align-items: center; justify-content: space-between; }
.dm-fbox { padding-bottom: 1rem; border-bottom: 1px solid var(--dm-line); }
.dm-fbox h3 { margin-bottom: 0.75rem; font-size: 0.95rem; }
.dm-ftree, .dm-ftree ul { display: flex; flex-direction: column; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.dm-ftree ul { margin-block: 0.15rem; padding-inline-start: 0.85rem; border-inline-start: 1px solid var(--dm-line); }
.dm-ftree a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: calc(var(--dm-r-btn) * 0.6); font-size: 0.9rem; transition: background-color 0.15s, color 0.15s; }
.dm-ftree a:hover { color: var(--dm-primary); }
.dm-ftree a.is-on { background: var(--dm-primary-soft); color: var(--dm-primary); font-weight: 600; }
.dm-ftree small { color: var(--dm-muted); }
.dm-price-range { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.dm-price-range label { display: flex; flex-direction: column; gap: 0.25rem; color: var(--dm-muted); font-size: 0.75rem; }
.dm-price-range input { width: 100%; height: 2.5rem; padding: 0 0.6rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-text); }
.dm-price-range input:focus { outline: 0; border-color: var(--dm-primary); }
.dm-check { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; font-size: 0.9rem; cursor: pointer; }
.dm-check input { position: absolute; opacity: 0; pointer-events: none; }
.dm-check span { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border: 1.5px solid color-mix(in srgb, var(--dm-text) 35%, transparent); border-radius: 4px; transition: background-color 0.15s, border-color 0.15s; }
.dm-check input:checked + span { border-color: var(--dm-primary); background: var(--dm-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 75% no-repeat; }
.dm-check input:focus-visible + span { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-fchips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dm-fchips a { padding: 0.3rem 0.75rem; border: 1px solid var(--dm-line); border-radius: 999px; font-size: 0.82rem; }
.dm-fchips a:hover { border-color: var(--dm-text); }
.dm-fchips a.is-on { border-color: var(--dm-secondary); background: var(--dm-secondary); color: var(--dm-on-secondary); }
.dm-fchips small { margin-inline-start: 0.15rem; opacity: 0.55; font-size: 0.74rem; }
/* Colour filters: a dot per colour with its name and count; ticked when chosen. */
.dm-fswatches { display: flex; flex-direction: column; gap: 0.15rem; }
.dm-fswatches a { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.35rem; border-radius: var(--dm-r-sm); font-size: 0.88rem; transition: background-color 0.15s; }
.dm-fswatches a:hover { background: var(--dm-soft); }
.dm-fswatches span { position: relative; flex: none; width: 1.3rem; height: 1.3rem; border-radius: 99px; background: var(--sw); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dm-text) 18%, transparent); }
.dm-fswatches span.is-blank { background: repeating-linear-gradient(45deg, var(--dm-line), var(--dm-line) 2px, transparent 2px, transparent 5px); }
.dm-fswatches a.is-on span { box-shadow: 0 0 0 2px var(--dm-bg), 0 0 0 3.5px var(--dm-primary); }
.dm-fswatches em { flex: 1; min-width: 0; font-style: normal; }
.dm-fswatches a.is-on em { font-weight: 600; }
.dm-fswatches small { color: var(--dm-muted); font-size: 0.78rem; }
.dm-filters-shade { display: none; }
.dm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-filters-open { display: none; height: 2.4rem; }
.dm-count { flex: 1; font-size: 0.9rem; }
.dm-count span { color: var(--dm-muted); }
.dm-sort { display: flex; gap: 0.5rem; }
.dm-sort label { position: relative; display: flex; align-items: center; }
.dm-sort select { height: 2.4rem; padding: 0 2rem 0 0.8rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); font-size: 0.85rem; appearance: none; cursor: pointer; }
.dm-sort .dm-i { position: absolute; inset-inline-end: 0.65rem; pointer-events: none; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.dm-chips a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.4rem 0.3rem 0.75rem; border-radius: 999px; background: var(--dm-primary-soft); color: var(--dm-primary); font-size: 0.82rem; font-weight: 600; }
.dm-chips a:hover { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-chips a.is-clear { background: none; color: var(--dm-muted); text-decoration: underline; }
.dm-grid.is-shop { grid-template-columns: repeat(min(var(--shop-cols, 4), 5), minmax(0, 1fr)); }
.dm-empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 4rem 1rem; border: 1px dashed var(--dm-line); border-radius: var(--dm-r); text-align: center; }
.dm-empty > span { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-empty h2 { font-size: 1.25rem; }
.dm-empty p { color: var(--dm-muted); margin-bottom: 0.5rem; }
.dm-pages { display: flex; justify-content: center; gap: 0.35rem; margin-top: 2rem; }
.dm-pages a, .dm-pages span { display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 0.6rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); font-weight: 600; font-size: 0.9rem; }
.dm-pages a:hover { border-color: var(--dm-secondary); }
.dm-more { display: grid; justify-items: center; gap: 0.8rem; margin-top: 2rem; text-align: center; }
.dm-more p { margin: 0; color: var(--dm-muted, inherit); font-size: 0.9rem; }
.dm-more.is-busy [data-dm-more-next] { opacity: 0.55; pointer-events: none; }
.dm-more[data-dm-more="infinite"] [data-dm-more-next] { min-width: 10rem; }
.dm-pages .is-here { border-color: var(--dm-secondary); background: var(--dm-secondary); color: var(--dm-on-secondary); }
.dm-pages .is-off { opacity: 0.35; }

/* ── Product page ── */
.dm-pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: 1.5rem 0; align-items: start; }
.dm-gal { position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.dm-gal-main { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--dm-r); }
/* The photo fills its rounded frame, so its corners are rounded and the labels sit inside it. */
.dm-gal-main img { width: 100%; height: 100%; object-fit: contain; padding: 0; border-radius: inherit; animation: dm-fade 0.35s; }
.dm-gal-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 0.6rem; }
.dm-gal-thumbs button { aspect-ratio: 1; padding: 0; overflow: hidden; border: 1.5px solid var(--dm-line); border-radius: calc(var(--dm-r) * 0.7); background: transparent; transition: border-color 0.15s; }
.dm-gal-thumbs button:hover { border-color: color-mix(in srgb, var(--dm-text) 30%, transparent); }
.dm-gal-thumbs button[aria-current='true'] { border-color: var(--dm-primary); }
.dm-gal-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 0.4rem; }
.dm-pd-info { display: flex; flex-direction: column; gap: 0.9rem; }
.dm-pd-name { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 700; }
.dm-pd-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--dm-muted); font-size: 0.85rem; }
.dm-stock { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.dm-stock::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.dm-stock.is-in, .dm-stock.is-untracked { color: #15803d; }
.dm-stock.is-low { color: #b45309; }
.dm-stock.is-out { color: #b91c1c; }
.dm-price.is-big b { font: 700 1.9rem/1.1 var(--dm-font-head); }
.dm-price.is-big s { font-size: 1.05rem; }
.dm-price em { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--dm-primary-soft); color: var(--dm-primary); font-size: 0.8rem; font-style: normal; font-weight: 700; }
.dm-card:has(s) .dm-price b, .dm-pd-info .dm-price:has(s) b { color: var(--dm-primary); }
.dm-pd-ends { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--dm-primary); font-size: 0.88rem; font-weight: 600; }
.dm-pd-ends .dm-i { fill: currentColor; stroke: none; }
.dm-pd-short { color: color-mix(in srgb, var(--dm-text) 80%, transparent); }
.dm-buy { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.1rem; border-block: 1px solid var(--dm-line); }
.dm-opt { margin: 0; padding: 0; border: 0; }
.dm-opt legend { margin-bottom: 0.5rem; padding: 0; font-size: 0.88rem; }
.dm-opt-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dm-opt-row button { min-width: 3rem; height: 2.6rem; padding: 0 0.9rem; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); font-size: 0.88rem; font-weight: 500; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.dm-opt-row button:hover { border-color: var(--dm-text); }
.dm-opt-row button[aria-pressed='true'] { border-color: var(--dm-secondary); background: var(--dm-secondary); color: var(--dm-on-secondary); }
.dm-opt-row button.is-off { opacity: 0.4; text-decoration: line-through; }
.dm-opt-row button.is-swatch { width: 2.6rem; min-width: 0; padding: 0; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 3px var(--dm-bg); }
.dm-opt-row button.is-swatch[aria-pressed='true'] { border-color: var(--dm-primary); }
.dm-buy-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dm-qty { display: flex; align-items: center; height: 3.25rem; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r-btn); }
.dm-qty button { display: grid; place-items: center; width: 2.75rem; height: 100%; border: 0; background: none; font-size: 1.2rem; }
.dm-qty button:disabled { opacity: 0.35; }
.dm-qty button:hover { color: var(--dm-primary); }
.dm-qty input { width: 3rem; height: 100%; border: 0; background: none; text-align: center; font-weight: 600; -moz-appearance: textfield; }
.dm-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.dm-buy-add { flex: 1; min-width: 9rem; }
.dm-buy-add:disabled { opacity: 0.55; cursor: not-allowed; }
.dm-buy-wish { width: 3.25rem; height: 3.25rem; border: 1.5px solid var(--dm-line); }
.dm-buy-wish:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
.dm-pd-note { color: var(--dm-muted); font-size: 0.82rem; }
.dm-pd-promises { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.dm-pd-promises li { display: flex; align-items: center; gap: 0.6rem; }
.dm-pd-promises .dm-i { color: var(--dm-primary); }
.dm-pd-facts { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; font-size: 0.88rem; }
.dm-pd-facts div { display: flex; gap: 0.5rem; }
.dm-pd-facts dt { min-width: 6rem; color: var(--dm-muted); }

/* Product page: the photo and the details fit one screen on every size; the description shows on scroll.
   dm.js puts where the product starts in --dm-pd-top, and the photo (thumbnails included) takes the
   height left below it. On phones the photo leaves room for the name, price and Add to cart. */
.is-product .dm-crumbs, .is-product .dm-crumbs.is-band { margin-bottom: 0; padding-block: 0.9rem; }
.dm-pd:not(.is-quick) { --dm-frame: max(24rem, calc(100svh - var(--dm-pd-top, 15rem) - 1.25rem)); padding-block-start: 1.25rem; }
.dm-pd:not(.is-quick) .dm-gal { justify-self: center; width: min(100%, calc(var(--dm-frame) - 5.5rem)); }
.dm-pd:not(.is-quick) .dm-gal:not(:has(.dm-gal-thumbs)) { width: min(100%, var(--dm-frame)); }
.dm-pd:not(.is-quick) .dm-gal-thumbs { grid-template-columns: repeat(auto-fill, 4.5rem); justify-content: center; }
/* Wider screens: the small pictures stand in a column on the left of the big one (on the right in Arabic),
   as tall as the big picture and scrolling inside it when there are many. */
@media (min-width: 48.01em) {
    .dm-pd:not(.is-quick) .dm-gal:has(.dm-gal-thumbs) { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; gap: 0.75rem; width: min(100%, calc(var(--dm-frame) + 5.25rem)); }
    .dm-pd:not(.is-quick) .dm-gal:has(.dm-gal-thumbs) .dm-gal-main { grid-area: 1 / 2; }
    .dm-pd:not(.is-quick) .dm-gal-thumbs { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.6rem; height: 0; min-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
    .dm-pd:not(.is-quick) .dm-gal-thumbs::-webkit-scrollbar { display: none; }
    .dm-pd:not(.is-quick) .dm-gal-thumbs button { flex: none; width: 100%; }
}
@media (min-width: 48.01em) and (max-height: 53.75em) {
    .dm-pd:not(.is-quick) .dm-pd-info { gap: 0.65rem; }
    .dm-pd:not(.is-quick) .dm-pd-name { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
    .dm-pd:not(.is-quick) .dm-price.is-big b { font-size: 1.65rem; }
    .dm-pd:not(.is-quick) .dm-buy { gap: 0.75rem; padding-block: 0.8rem; }
    .dm-pd:not(.is-quick) .dm-pd-promises { flex-flow: row wrap; gap: 0.4rem 1.25rem; }
    .dm-pd:not(.is-quick) .dm-pd-promise-t { display: none; }
    .dm-pd:not(.is-quick) .dm-buy-row { gap: 0.5rem; }
    .dm-pd:not(.is-quick) .dm-qty, .dm-pd:not(.is-quick) .dm-buy-add { height: 2.9rem; min-height: 0; }
    .dm-pd:not(.is-quick) .dm-buy-add { min-width: 7rem; }
    .dm-pd:not(.is-quick) .dm-buy-wish { width: 2.9rem; height: 2.9rem; }
}
@media (max-width: 48em) {
    /* One column: the photo leaves room for the details down to Add to cart (measured by dm.js, so
       options count) above the tab bar; the short description moves under Add to cart. */
    .dm-pd:not(.is-quick) { --dm-frame: calc(100svh - var(--dm-pd-top, 9rem) - 1.25rem - var(--dm-pd-bar, 0px)); }
    .has-tabs .dm-pd:not(.is-quick) { --dm-pd-bar: 4.25rem; }
    .dm-pd:not(.is-quick) .dm-gal, .dm-pd:not(.is-quick) .dm-gal:not(:has(.dm-gal-thumbs)) { width: min(100%, max(12rem, calc(var(--dm-frame) - var(--dm-pd-buy, 17rem) - 3.25rem))); }
    .dm-pd:not(.is-quick) .dm-gal-main img { padding: 0; }
    .dm-pd:not(.is-quick) .dm-pd-info { gap: 0.6rem; }
    .dm-pd:not(.is-quick) .dm-buy { gap: 0.75rem; padding-block: 0.8rem; }
    .dm-pd:not(.is-quick) .dm-pd-short { order: 1; }
    .dm-pd:not(.is-quick) .dm-buy ~ * { order: 2; }
}
.dm-pd-facts dd { margin: 0; }
.dm-pd-facts a:hover { color: var(--dm-primary); }
/* Share row under the category: round buttons, one per site, then email and copy link. */
.dm-pd-facts .dm-pd-share { align-items: center; }
.dm-pd-share dd { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.dm-pd-share dd > a, .dm-pd-share dd > button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--dm-line); border-radius: 50%; background: transparent; color: var(--dm-text); cursor: pointer; transition: border-color 0.15s, color 0.15s, background-color 0.15s; }
.dm-pd-share dd > a:hover, .dm-pd-share dd > button:hover { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-pd-share dd > a:focus-visible, .dm-pd-share dd > button:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-pd-tabs { padding-block: clamp(2.5rem, 5vw, 3.5rem) 0; }
.dm-tabs.is-line { gap: 1.75rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--dm-line); }
.dm-tabs.is-line button { position: relative; padding: 0.75rem 0; border: 0; border-radius: 0; background: none; color: var(--dm-muted); font-size: 1rem; }
.dm-tabs.is-line button::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2.5px; background: var(--dm-primary); transform: scaleX(0); transition: transform 0.3s var(--dm-ease); }
.dm-tabs.is-line button[aria-selected='true'] { background: none; color: var(--dm-text); }
.dm-tabs.is-line button[aria-selected='true']::after { transform: none; }
.dm-prose { max-width: 70ch; line-height: 1.75; }
.dm-prose > * + * { margin-top: 1rem; }
.dm-prose img { border-radius: var(--dm-r); }
.dm-prose a { color: var(--dm-primary); text-decoration: underline; }
.dm-muted { color: var(--dm-muted); }
.dm-specs { width: 100%; max-width: 50rem; border-collapse: collapse; font-size: 0.92rem; }
.dm-specs th, .dm-specs td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--dm-line); text-align: start; vertical-align: top; }
.dm-specs th { width: 35%; background: var(--dm-soft); font-weight: 600; }
.dm-specs .dm-spec-group th { width: auto; padding-top: 1.1rem; background: none; color: var(--dm-text); font: 600 0.95rem/1.3 var(--dm-font-sub, var(--dm-font-head)); }
.dm-cmp-group th { padding: 1rem 1rem 0.5rem; background: none !important; color: var(--dm-text); font: 600 0.95rem/1.3 var(--dm-font-sub, var(--dm-font-head)); text-align: start; }
.dm-faqs { display: flex; flex-direction: column; gap: 0.6rem; max-width: 50rem; }
.dm-faqs details { border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-faqs summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; font-weight: 600; cursor: pointer; list-style: none; }
.dm-faqs summary::-webkit-details-marker { display: none; }
.dm-faqs summary .dm-i { transition: transform 0.25s; }
.dm-faqs details[open] summary .dm-i { transform: rotate(45deg); color: var(--dm-primary); }
.dm-faqs p { padding: 0 1.1rem 1rem; color: color-mix(in srgb, var(--dm-text) 80%, transparent); }

/* ── 404 ── */
.dm-404 { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-block: clamp(3rem, 8vw, 6rem); text-align: center; }
.dm-404-num { font: 800 clamp(5rem, 16vw, 9rem)/1 var(--dm-font-head); color: var(--dm-primary); letter-spacing: -0.04em; }
.dm-404-art { display: block; width: min(100%, 32rem); aspect-ratio: 703 / 445; margin-block: clamp(-5rem, -8vw, -2rem) -1rem; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dm-404-art canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s var(--dm-ease); }
.dm-404-art.is-ready canvas { opacity: 1; }
.dm-404-art:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 4px; border-radius: var(--dm-radius, 12px); }
.dm-404 h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
.dm-404 > p { max-width: 46ch; color: var(--dm-muted); }
.dm-404 .dm-search { width: min(100%, 32rem); flex: none; }
.dm-404-staff { max-width: 46ch; padding: .75rem 1rem; border: 1px dashed var(--dm-line, currentColor); border-radius: var(--dm-radius, 12px); font-size: .9rem; color: var(--dm-muted); }
.dm-404-staff a { color: var(--dm-primary); font-weight: 600; }

@media (max-width: 64em) {
    .dm-shop { grid-template-columns: minmax(0, 1fr); }
    .dm-filters { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 90; width: min(21rem, 88vw); padding: 1rem 1.25rem; overflow-y: auto; background: var(--dm-bg); transform: translateX(-105%); transition: transform 0.35s var(--dm-ease); }
    [dir='rtl'] .dm-filters { transform: translateX(105%); }
    .dm-filters.is-open { transform: none; }
    .dm-filters-head { display: flex; }
    .dm-filters-shade.is-open { position: fixed; inset: 0; z-index: 89; display: block; background: rgb(0 0 0 / 0.45); }
    .dm-filters-open { display: inline-flex; }
    .dm-grid.is-shop { grid-template-columns: repeat(var(--shop-cols-t, 3), minmax(0, 1fr)); }
}
@media (max-width: 48em) {
    .dm-pd { grid-template-columns: minmax(0, 1fr); }
    .dm-gal { position: static; }
    .dm-grid.is-shop { grid-template-columns: repeat(var(--shop-cols-m, 2), minmax(0, 1fr)); }
    .dm-sort { flex: 1 1 100%; }
    .dm-sort label, .dm-sort select { flex: 1; width: 100%; }
    .dm-count { order: -1; flex: 1 1 100%; }
    .dm-buy-add { flex: 1 1 100%; order: 3; }
}

/* ── Flash messages ── */
.dm-flash { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1rem; padding: 0.85rem 1rem; border-radius: var(--dm-r); background: color-mix(in srgb, #16a34a 10%, var(--dm-bg)); color: color-mix(in srgb, #16a34a 70%, var(--dm-text)); font-size: 0.9rem; }
.dm-paybox { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1rem; margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--dm-primary); border-radius: var(--dm-r); background: color-mix(in srgb, var(--dm-primary) 6%, var(--dm-bg)); }
.dm-paybox > div { display: flex; flex: 1 1 14rem; flex-direction: column; gap: 0.15rem; min-width: 0; }
.dm-paybox small { color: var(--dm-muted); font-size: 0.86rem; }
.dm-paybox-ico { display: grid; flex: none; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-co-box .dm-paybox { margin: 0 0 0.75rem; }
.dm-flash.is-bad { background: color-mix(in srgb, #dc2626 9%, var(--dm-bg)); color: color-mix(in srgb, #dc2626 75%, var(--dm-text)); }
.dm-flash .dm-i { margin-top: 0.15rem; }
.dm-warn { color: #b45309; font-size: 0.85rem; }

/* ── Cart ── */
.dm-cartpage { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 2rem; align-items: start; padding-block: 1.75rem 0; }
.dm-cartpage > .dm-flash, .dm-cartpage > .dm-empty { grid-column: 1 / -1; }
.dm-cart-lines { display: flex; flex-direction: column; min-width: 0; }
.dm-cart-head, .dm-cart-line { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr) 6.5rem 8rem 6.5rem 2.5rem; gap: 1rem; align-items: center; }
.dm-cart-head { grid-template-columns: minmax(0, 1fr) 6.5rem 8rem 6.5rem 2.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--dm-line); color: var(--dm-muted); font-size: 0.8rem; font-weight: 600; }
.dm-cart-head span:first-child { padding-inline-start: 0; }
.dm-cart-line { padding: 1rem 0; border-bottom: 1px solid var(--dm-line); }
.dm-cart-line > .dm-mini-pic { width: 5.25rem; height: 5.25rem; }
.dm-cart-name { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.dm-cart-name a { font-weight: 500; }
.dm-cart-name a:hover { color: var(--dm-primary); }
.dm-cart-name small { color: var(--dm-muted); font-size: 0.78rem; }
.dm-cart-unit { color: var(--dm-muted); }
.dm-cart-total { font-weight: 700; }
.dm-cart-rm:hover { color: #dc2626; }
.dm-qty.is-sm { height: 2.6rem; }
.dm-qty.is-sm button { width: 2.2rem; }
.dm-qty.is-sm input { width: 2.4rem; }
.dm-cart-acts { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; }
.dm-summary { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-soft); }
.dm-summary.is-sticky { position: sticky; top: 6.5rem; }
.dm-summary .dm-h3 { margin-bottom: 0; }
.dm-coupon { display: flex; gap: 0.5rem; align-items: center; }
.dm-coupon input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 0.85rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); text-transform: uppercase; }
.dm-coupon input:focus { outline: 0; border-color: var(--dm-primary); }
.dm-coupon-on { display: flex; flex: 1; align-items: center; gap: 0.4rem; color: var(--dm-primary); }
.dm-coupon .dm-link { border: 0; background: none; color: var(--dm-muted); text-decoration: underline; }
.dm-totals { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; font-size: 0.92rem; }
.dm-totals div { display: flex; justify-content: space-between; gap: 1rem; }
.dm-totals dt { color: var(--dm-muted); }
.dm-totals dd { margin: 0; font-weight: 600; }
.dm-totals .is-save dd { color: #15803d; }
.dm-totals .is-total { margin-top: 0.4rem; padding-top: 0.8rem; border-top: 1px solid var(--dm-line); font-size: 1.1rem; }
.dm-totals .is-total dt { color: var(--dm-text); font-weight: 700; }
.dm-totals .is-total dd { font: 700 1.25rem var(--dm-font-head); }
/* Paid from the customer's points, wallet or gift card, under the total; then what is left to pay. */
.dm-totals .is-credit dt { color: var(--dm-text); }
.dm-totals .is-credit-back dd { color: var(--dm-muted); }
.dm-totals .is-left { padding-top: 0.55rem; border-top: 1px dashed var(--dm-line); }
.dm-totals .is-left dt { color: var(--dm-text); font-weight: 700; }
.dm-totals .is-left dd { font-weight: 700; }
.dm-summary-note { display: flex; align-items: center; gap: 0.5rem; color: var(--dm-muted); font-size: 0.8rem; }
.dm-summary-note .dm-i { color: #15803d; }

/* ── Checkout ── */
.dm-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: 2rem; align-items: start; padding-block: 1.75rem 0; }
.dm-co-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.dm-co-box { padding: 1.5rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-co-box .dm-h3 { display: flex; align-items: center; gap: 0.6rem; }
.dm-step { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--dm-secondary); color: var(--dm-on-secondary); font-size: 0.82rem; }
.dm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dm-field { position: relative; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; }
.dm-field.is-full { grid-column: 1 / -1; }
.dm-field em { color: var(--dm-muted); font-style: normal; font-weight: 400; }
.dm-field input, .dm-field select, .dm-field textarea { width: 100%; min-height: 2.9rem; padding: 0.6rem 0.85rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); font-weight: 400; font-size: 0.95rem; }
.dm-field input:focus, .dm-field select:focus, .dm-field textarea:focus { outline: 0; border-color: var(--dm-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary) 18%, transparent); }
.dm-field.is-bad input, .dm-field.is-bad select { border-color: #dc2626; }
.dm-field small { color: #dc2626; font-weight: 500; }
.dm-select select { appearance: none; padding-inline-end: 2.2rem; cursor: pointer; }
.dm-select > .dm-i { position: absolute; inset-inline-end: 0.85rem; top: 2.45rem; pointer-events: none; }
.dm-co-more { margin-top: 1rem; }
.dm-co-more summary { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--dm-primary); font-size: 0.88rem; font-weight: 600; cursor: pointer; list-style: none; }
.dm-co-more summary::-webkit-details-marker { display: none; }
.dm-co-more[open] summary { margin-bottom: 1rem; }
.dm-choices { display: flex; flex-direction: column; gap: 0.6rem; }
.dm-choice { position: relative; display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.dm-choice:hover { border-color: color-mix(in srgb, var(--dm-primary) 50%, var(--dm-line)); }
.dm-choice:has(input:checked) { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
.dm-choice input { position: absolute; opacity: 0; }
.dm-radio { flex: none; width: 1.15rem; height: 1.15rem; border: 1.5px solid color-mix(in srgb, var(--dm-text) 35%, transparent); border-radius: 50%; transition: border 0.15s; }
.dm-choice input:checked + .dm-radio { border: 5px solid var(--dm-primary); }
.dm-choice input:focus-visible + .dm-radio { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-choice > span:not(.dm-radio, .dm-cost, .dm-pay-terms) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dm-choice b { font-weight: 600; font-size: 0.93rem; }
.dm-choice small { color: var(--dm-muted); font-size: 0.8rem; }
.dm-choice .dm-cost { margin-inline-start: auto; font-weight: 700; }
.dm-co-notes { margin-top: 1rem; }
.dm-co-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.dm-co-way { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.dm-co-way:hover { border-color: color-mix(in srgb, var(--dm-primary) 50%, var(--dm-line)); }
.dm-co-way:has(input:checked) { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
.dm-co-way:has(input:focus-visible) { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-co-way input { position: absolute; opacity: 0; }
.dm-co-way > .dm-i { flex: none; color: var(--dm-muted); }
.dm-co-way:has(input:checked) > .dm-i { color: var(--dm-primary); }
.dm-co-way span { display: flex; flex-direction: column; min-width: 0; }
.dm-co-way b { font-size: 0.93rem; font-weight: 600; }
.dm-co-way small { color: var(--dm-muted); font-size: 0.8rem; }
.dm-co-store { align-items: flex-start; }
.dm-co-store .dm-radio { margin-top: 0.15rem; }
.dm-choice.dm-co-store > .dm-cost { flex: none; }
.dm-choice > .dm-co-store-main { display: flex; flex: 1; flex-direction: column; gap: 0.2rem; min-width: 0; }
.dm-co-store-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; margin-top: 0.25rem; color: var(--dm-muted); font-size: 0.8rem; }
.dm-co-store-meta > span, .dm-co-store-meta > a { display: inline-flex; align-items: center; gap: 0.3rem; }
.dm-co-store-meta a { color: var(--dm-text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--dm-line); text-underline-offset: 3px; }
.dm-co-store-meta a:hover { color: var(--dm-primary); }
.dm-co-store-note { font-style: italic; }
.dm-co-pickup-tip { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0.35rem 0 0; font-size: 0.82rem; }
.dm-co-pickup-tip .dm-i { flex: none; margin-top: 0.2rem; }
.dm-open { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--dm-muted); font-weight: 500; }
.dm-open i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: color-mix(in srgb, var(--dm-text) 30%, transparent); }
.dm-open.is-open { color: #15803d; }
.dm-open.is-open i { background: #16a34a; box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 18%, transparent); }

/* ── Store locator ── */
.dm-stores { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 1.75rem 0; }
.dm-stores-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.dm-stores-find { position: relative; flex: 1 1 18rem; max-width: 30rem; }
.dm-stores-find input { width: 100%; height: 3rem; padding: 0 1rem; padding-inline-start: 2.75rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); font-size: 0.95rem; }
.dm-stores-find input:focus { outline: 0; border-color: var(--dm-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary) 18%, transparent); }
.dm-stores-find .dm-i { position: absolute; inset-inline-start: 1rem; top: 50%; translate: 0 -50%; color: var(--dm-muted); pointer-events: none; }
.dm-stores-chip { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.4rem; padding: 0 0.95rem; border: 1.5px solid var(--dm-line); border-radius: 999px; background: var(--dm-bg); color: var(--dm-text); font-size: 0.85rem; font-weight: 500; cursor: pointer; }
.dm-stores-chip[aria-pressed="true"] { border-color: var(--dm-primary); background: var(--dm-primary-soft); color: var(--dm-text); }
.dm-stores-count { margin-inline-start: auto; color: var(--dm-muted); font-size: 0.88rem; }
.dm-stores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.dm-store { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); transition: border-color 0.2s; }
.dm-store:hover { border-color: color-mix(in srgb, var(--dm-primary) 45%, var(--dm-line)); }
.dm-store-top { display: flex; align-items: flex-start; gap: 0.85rem; }
.dm-store-ic { display: grid; flex: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--dm-r-btn); background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-store-top div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.dm-store h2 { font-size: 1.05rem; }
.dm-store-city { color: var(--dm-muted); font-size: 0.82rem; }
.dm-store-addr { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.dm-store-tags { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.84rem; }
.dm-store-tags > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.dm-store-tag { color: var(--dm-muted); }
.dm-store-hours { margin: 0; padding: 0.75rem 0.9rem; border-radius: var(--dm-r-btn); background: var(--dm-soft); font-size: 0.84rem; }
.dm-store-hours div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.12rem; }
.dm-store-hours dt { color: var(--dm-muted); }
.dm-store-hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.dm-store-hours .is-today dt, .dm-store-hours .is-today dd { color: var(--dm-text); font-weight: 600; }
.dm-store-note { margin: 0; color: var(--dm-muted); font-size: 0.84rem; font-style: italic; }
.dm-store-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 0.25rem; }
.dm-store-acts .dm-btn { height: 2.5rem; padding: 0 1rem; font-size: 0.85rem; }
.dm-pickup { display: flex; flex-direction: column; gap: 0.85rem; }
.dm-pickup .dm-addr { margin: 0; }
.dm-pickup-state { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--dm-r-btn); background: var(--dm-soft); font-size: 0.88rem; font-weight: 600; }
.dm-pickup.is-ready .dm-pickup-state { background: color-mix(in srgb, #16a34a 10%, var(--dm-bg)); color: #15803d; }
.dm-pickup.is-done .dm-pickup-state { color: var(--dm-muted); }
.dm-pickup .dm-store-acts .dm-btn { height: 2.3rem; }
.dm-pickup + .dm-pd-facts { margin-top: 1rem; }
/* Addresses, hours and phone numbers keep their own direction inside Arabic text. */
.dm-store-addr, .dm-store-hours dd, .dm-store-acts a[href^="tel:"], .dm-co-store-main > small, .dm-pickup .dm-addr { unicode-bidi: plaintext; }
.dm-store-hours dd { text-align: end; }
[dir="rtl"] .dm-store-addr, [dir="rtl"] .dm-co-store-main > small, [dir="rtl"] .dm-pickup .dm-addr { text-align: right; }
.dm-stores-none { padding: 3rem 1rem; color: var(--dm-muted); text-align: center; }
@media (max-width: 48em) {
    .dm-co-ways { grid-template-columns: minmax(0, 1fr); }
    .dm-stores-count { flex-basis: 100%; margin-inline-start: 0; }
}
.dm-co-lines { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.dm-co-lines li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; }
.dm-co-lines .dm-mini-pic { position: relative; width: 3.5rem; height: 3.5rem; overflow: visible; }
.dm-co-lines .dm-mini-pic img { border-radius: inherit; }
.dm-co-lines .dm-mini-pic em { position: absolute; top: -0.4rem; inset-inline-end: -0.4rem; display: grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 999px; background: var(--dm-secondary); color: var(--dm-on-secondary); font-size: 0.7rem; font-style: normal; font-weight: 700; }
.dm-co-name { flex: 1; min-width: 0; }
.dm-co-name small { color: var(--dm-muted); }
.dm-check.is-bad span { border-color: #dc2626; }

/* ── Thank you ── */
.dm-thanks { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 2.5rem 0; max-width: 60rem; }
.dm-thanks-head { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.dm-thanks-ring { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: color-mix(in srgb, #16a34a 12%, var(--dm-bg)); color: #16a34a; }
.dm-thanks-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.dm-thanks-head > p:last-child { max-width: 48ch; color: var(--dm-muted); }
.dm-thanks-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.25rem; }
.dm-addr { line-height: 1.7; margin-bottom: 1rem; }
.dm-thanks > .dm-btn { align-self: center; }

@media (max-width: 64em) {
    .dm-cartpage, .dm-checkout, .dm-thanks-grid { grid-template-columns: minmax(0, 1fr); }
    .dm-summary.is-sticky { position: static; }
}
@media (max-width: 48em) {
    .dm-cart-head { display: none; }
    .dm-cart-line { grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem; grid-template-areas: 'pic name rm' 'pic qty total'; gap: 0.5rem 0.75rem; }
    .dm-cart-line > .dm-mini-pic { grid-area: pic; width: 4.5rem; height: 4.5rem; }
    .dm-cart-name { grid-area: name; }
    .dm-cart-unit { display: none; }
    .dm-cart-line .dm-qty { grid-area: qty; justify-self: start; }
    .dm-cart-total { grid-area: total; justify-self: end; }
    .dm-cart-rm { grid-area: rm; }
    .dm-cart-giftqty { grid-area: qty; }
    .dm-cart-line.is-gift > span:last-child:empty { display: none; }
    .dm-fields { grid-template-columns: minmax(0, 1fr); }
    .dm-co-box, .dm-summary { padding: 1.1rem; }
}
@media (hover: none) {
    .dm-card-tools { inset-inline-end: 0.6rem; bottom: 0.6rem; opacity: 1; visibility: visible; transform: none; }
    .dm-card-tools a, .dm-card-tools button { opacity: 1; transform: none; }
    .dm-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dm-card, .dm-card-img img, .dm-card-tools, .dm-card-tools a, .dm-card-tools button { transition-duration: 0.01s; transition-delay: 0s; }
    .dm-card:hover { transform: none; }
    .dm-card:hover .dm-card-img img { transform: none; }
    .dm-card-tools a:hover .dm-i, .dm-card-tools button:hover .dm-i { animation: none; }
}

/* ── Sign in, register, password (Shofy's login card) ── */
.dm-auth, .dm-track { display: flex; justify-content: center; padding-block: 3rem 0; }
.dm-auth-card { width: min(100%, 37.5rem); padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3.25rem) clamp(2rem, 5vw, 3rem); background: var(--dm-bg); box-shadow: 0 30px 70px rgb(1 15 28 / 0.1); }
.dm-auth-card.is-wide { width: min(100%, 52rem); }
.dm-auth-head { margin-bottom: 2rem; text-align: center; }
.dm-auth-head h2 { margin-bottom: 0.35rem; font: 600 clamp(1.5rem, 3vw, 1.9rem)/1.2 var(--dm-font-head); letter-spacing: 0; }
.dm-auth-head p { color: var(--dm-muted); font-size: 1rem; }
.dm-auth-head a, .dm-auth-link { position: relative; padding: 0; border: 0; background: none; color: var(--dm-primary); font: inherit; cursor: pointer; }
.dm-auth-head a::after, .dm-auth-link::after { content: ''; position: absolute; inset-inline-end: 0; bottom: 2px; width: 0; height: 1px; background: currentColor; transition: width 0.3s; }
.dm-auth-head a:hover::after, .dm-auth-link:hover::after { inset-inline: 0 auto; width: 100%; }
.dm-auth-form { display: flex; flex-direction: column; gap: 1.25rem; }
.dm-auth-form .dm-field { font-weight: 400; font-size: 0.88rem; }
.dm-auth-form .dm-field input { min-height: 3.5rem; padding: 0 1.25rem; border-color: color-mix(in srgb, var(--dm-text) 14%, transparent); border-radius: 0; font-size: 0.9rem; }
.dm-auth-form .dm-field input:focus { border-color: var(--dm-text); box-shadow: none; }
.dm-auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: -0.25rem; font-size: 0.94rem; }
.dm-btn.is-auth { width: 100%; height: 3.4rem; border: 0; border-radius: 0; background: var(--dm-btn); color: var(--dm-on-btn); font-weight: 500; font-size: 1rem; }
.dm-btn.is-auth:hover { background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
.dm-auth-foot { color: var(--dm-muted); text-align: center; font-size: 0.94rem; }
/* Confirm your email (My account opens after confirming). */
.dm-confirm-gate-art { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 4px; border-radius: 50%; background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); animation: dm-gate-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.dm-confirm-gate-art svg { animation: dm-gate-float 3s ease-in-out 0.6s infinite; }
@keyframes dm-gate-pop { from { transform: scale(0.6); opacity: 0; } }
@keyframes dm-gate-float { 50% { transform: translateY(-3px) rotate(-4deg); } }
.dm-confirm-gate-more { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 10px; margin: 14px 0 6px; color: var(--dm-muted); }
.dm-confirm-gate-more form { margin: 0; }
.dm-confirm-gate-change { flex-basis: auto; }
.dm-confirm-gate-change[open] { flex-basis: 100%; }
.dm-confirm-gate-change summary { display: inline; list-style: none; }
.dm-confirm-gate-change summary::-webkit-details-marker { display: none; }
.dm-confirm-gate-change[open] summary { display: block; text-align: center; margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .dm-confirm-gate-art, .dm-confirm-gate-art svg { animation: none; } }
.dm-auth-form.is-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
.dm-auth-form.is-row .dm-btn.is-auth { width: auto; padding: 0 2.25rem; height: 3.5rem; }
.dm-pass { position: relative; display: block; }
.dm-pass input { padding-inline-end: 3.25rem !important; }
.dm-pass button { position: absolute; inset-inline-end: 0.5rem; top: 50%; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; background: none; color: var(--dm-muted); transform: translateY(-50%); }
.dm-pass button:hover, .dm-pass button[aria-pressed='true'] { color: var(--dm-text); }

/* ── My account: menu beside the page ── */
.dm-acc { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: 2rem; align-items: start; padding-block: 2.5rem 0; }
.dm-acc-side { position: sticky; top: 6rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); }
.dm-acc-me { display: flex; align-items: center; gap: 0.85rem; padding: 1.4rem 1.25rem; border-bottom: 1px solid var(--dm-line); }
.dm-acc-av { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--dm-primary); color: var(--dm-on-primary); font-weight: 600; }
.dm-acc-av { overflow: hidden; }
.dm-acc-av img { width: 100%; height: 100%; object-fit: cover; }
.dm-acc-me > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dm-acc-me b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dm-acc-me small { overflow: hidden; color: var(--dm-muted); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.dm-acc-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem; }
.dm-acc-nav a, .dm-acc-nav button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.65rem 0.85rem; border: 0; border-radius: var(--dm-r-sm); background: none; font-size: 0.92rem; text-align: start; transition: background-color 0.2s, color 0.2s; }
.dm-acc-nav a:hover, .dm-acc-nav button:hover { background: var(--dm-soft); }
.dm-acc-nav a[aria-current] { background: var(--dm-primary-soft); color: var(--dm-primary); font-weight: 500; }
.dm-acc-nav form { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--dm-line); }
.dm-acc-nav button { color: var(--dm-muted); }
/* Overview tiles (Theme options › My account › Overview cards): black outlines that lift on hover. */
.dm-acc-tiles { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.dm-acc-tile { display: grid; align-content: start; gap: 0.3rem; min-width: 0; padding: 0.95rem 1rem; border: 1.5px solid var(--dm-text); border-radius: var(--dm-r); background: var(--dm-bg); color: var(--dm-text); transition: transform 0.2s, box-shadow 0.2s; }
.dm-acc-tile:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--dm-text); }
.dm-acc-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.dm-acc-tile-ic { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: min(0.6rem, var(--dm-r)); background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-acc-tile-val { overflow: hidden; font-family: var(--dm-font-head); font-size: 1.05rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.dm-acc-tile > b { font-size: 0.92rem; font-weight: 600; }
.dm-acc-tile small { color: var(--dm-muted); font-size: 0.78rem; line-height: 1.4; }
@media (max-width: 64em) { .dm-acc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dm-acc-tile, .dm-acc-tile:hover { transform: none; transition: none; } }
/* Side menu, Ink (Theme options › My account › Side menu): black outline, black for the open page, dividers. */
.dm-acc-side.is-ink { border: 1.5px solid var(--dm-text); border-radius: calc(var(--dm-r) * 1.1); }
.dm-acc-side.is-ink .dm-acc-me { margin: 0 0.9rem; padding-inline: 0.35rem; border-bottom: 1.5px solid var(--dm-text); }
.dm-acc-side.is-ink .dm-acc-nav a[aria-current] { background: var(--dm-text); color: var(--dm-bg); }
.dm-acc-side.is-ink .dm-acc-nav a[aria-current] svg { color: var(--dm-primary); }
.dm-acc-side.is-ink .dm-acc-nav form { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1.5px dashed color-mix(in srgb, var(--dm-text) 22%, transparent); }
/* Account menus: the ForgePanel list hover. An orange line grows in at the start edge, the words turn bold and the
   row's icon and words grow a little on a calm, springy ease, with no colour fill. Mouse only; still when less motion is asked for. */
.dm-acc-nav a, .dm-acc-nav button { position: relative; }
.dm-acc-nav a::before, .dm-acc-nav button::before { content: ''; position: absolute; inset-block: 0.5rem; inset-inline-start: 0; width: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--dm-primary); transform: scaleY(0); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.dm-acc-nav a:not([aria-current]):hover::before, .dm-acc-nav button:hover::before { transform: scaleY(1); }
.dm-acc-nav a:not([aria-current]):hover, .dm-acc-nav button:hover { background: none; color: var(--dm-text); font-weight: 600; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .dm-acc-nav a > *, .dm-acc-nav button > * { transform-origin: left center; transition: transform 0.5s cubic-bezier(0.34, 1.45, 0.64, 1); }
    [dir="rtl"] .dm-acc-nav a > *, [dir="rtl"] .dm-acc-nav button > * { transform-origin: right center; }
    .dm-acc-nav a:not([aria-current]):hover > *, .dm-acc-nav button:hover > * { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .dm-acc-nav a::before, .dm-acc-nav button::before { transition: none; } }
.dm-acc-div { margin: 0.35rem 0.4rem; border: 0; border-top: 1.5px dashed color-mix(in srgb, var(--dm-text) 22%, transparent); }
.dm-acc-count { margin-inline-start: auto; padding: 0 0.45rem; border-radius: 999px; background: var(--dm-primary); color: var(--dm-on-primary); font-size: 0.72rem; font-style: normal; font-weight: 600; line-height: 1.5; }
.dm-acc-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.dm-acc-title { padding-bottom: 1rem; border-bottom: 1px solid var(--dm-line); font: 600 1.35rem/1.2 var(--dm-font-head); letter-spacing: 0; }
.dm-acc-hello { max-width: 70ch; color: var(--dm-muted); }
.dm-acc-hello b { color: var(--dm-text); }
.dm-acc-hello.is-with-welcome { display: none; }

/* ── My account welcome banner (Theme options › My account › Welcome banner: ink, peach, clean) ── */
.dm-welcome {
    --wl-bg: #0f0f0f; --wl-fg: #fff; --wl-fg-2: rgb(255 255 255 / 0.68); --wl-line: rgb(255 255 255 / 0.14);
    --wl-card: rgb(255 255 255 / 0.06); --wl-card-hover: rgb(255 255 255 / 0.1); --wl-tile: #1b1b1b;
    position: relative; isolation: isolate; overflow: hidden; margin-bottom: 1.75rem; padding: clamp(1.25rem, 3.2vw, 2.25rem);
    border-radius: calc(var(--dm-r, 12px) * 1.6); background: var(--wl-bg); color: var(--wl-fg);
    animation: dm-wl-in 0.7s var(--dm-ease) both;
}
.dm-welcome.is-peach { --wl-bg: color-mix(in srgb, var(--dm-primary) 16%, #fff); --wl-fg: #111; --wl-fg-2: rgb(17 17 17 / 0.66); --wl-line: rgb(17 17 17 / 0.12); --wl-card: rgb(255 255 255 / 0.72); --wl-card-hover: #fff; --wl-tile: #fff; }
/* Clean: white, with black outlines on the cards, tiles and icon (as ForgeTraq's welcome). */
.dm-welcome.is-clean { --wl-bg: var(--dm-bg); --wl-fg: var(--dm-text); --wl-fg-2: var(--dm-muted); --wl-line: var(--dm-text); --wl-card: var(--dm-soft); --wl-card-hover: var(--dm-primary-soft); --wl-tile: var(--dm-primary-soft); border: 1px solid var(--dm-line); }
.dm-welcome.is-clean .dm-welcome-dots i { background: var(--dm-line); }
.dm-welcome a { color: inherit; }
/* Orange: solid brand colour, black type, white tiles. */
.dm-welcome.is-orange { --wl-bg: var(--dm-primary); --wl-fg: #111; --wl-fg-2: rgb(17 17 17 / 0.72); --wl-line: rgb(17 17 17 / 0.16); --wl-card: rgb(255 255 255 / 0.9); --wl-card-hover: #fff; --wl-tile: #fff; --wl-em: #fff; }
.dm-welcome.is-orange .dm-welcome-live, .dm-welcome.is-orange .dm-welcome-dots i::after { background: #111; }
.dm-welcome.is-orange .dm-welcome-line a svg, .dm-welcome.is-orange .dm-welcome-go { color: #111; }
.dm-welcome.is-orange .dm-welcome-stat:hover, .dm-welcome.is-orange .dm-welcome-card:hover, .dm-welcome.is-orange .dm-welcome-card.is-hot { border-color: #111; }
/* Bold: white with a thick black frame; the numbers sit on black tiles. */
.dm-welcome.is-bold { --wl-bg: var(--dm-bg); --wl-fg: var(--dm-text); --wl-fg-2: var(--dm-muted); --wl-line: var(--dm-text); --wl-card: var(--dm-bg); --wl-card-hover: var(--dm-primary-soft); --wl-tile: var(--dm-primary); border: 3px solid var(--dm-text); box-shadow: 8px 8px 0 var(--dm-text); }
.dm-welcome.is-bold .dm-welcome-stat { border-color: var(--dm-text); background: var(--dm-text); color: var(--dm-bg); }
.dm-welcome.is-bold .dm-welcome-stat span { color: color-mix(in srgb, var(--dm-bg) 70%, transparent); }
.dm-welcome.is-bold .dm-welcome-stat:hover { background: var(--dm-primary); border-color: var(--dm-primary); color: #111; }
.dm-welcome.is-bold .dm-welcome-card { border-width: 2px; }
.dm-welcome.is-bold .dm-welcome-card:hover { box-shadow: 4px 4px 0 var(--dm-text); }
.dm-welcome.is-bold .dm-welcome-still { color: #111; }
/* Minimal: no box; big type, numbers in a row, cards as plain rows with a line between. */
.dm-welcome.is-minimal { --wl-bg: transparent; --wl-fg: var(--dm-text); --wl-fg-2: var(--dm-muted); --wl-line: var(--dm-line); --wl-card: transparent; --wl-card-hover: var(--dm-soft); --wl-tile: var(--dm-primary-soft); overflow: visible; padding: 0.9rem 0 0 0.9rem; border-radius: 0; }
.dm-welcome.is-minimal .dm-welcome-stat { border: 0; border-inline-start: 3px solid var(--dm-primary); border-radius: 0; background: none; padding-block: 0.2rem; }
.dm-welcome.is-minimal .dm-welcome-lane { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--dm-line); }
.dm-welcome.is-minimal .dm-welcome-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 1rem; border: 0; border-bottom: 1px solid var(--dm-line); border-radius: 0; padding: 0.9rem 0.25rem; transform: none; }
.dm-welcome.is-minimal .dm-welcome-card small { grid-column: 2; }
.dm-welcome.is-minimal .dm-welcome-card b { grid-column: 2; grid-row: 1; }
.dm-welcome.is-minimal .dm-welcome-badge { grid-row: 1 / span 2; min-width: 8rem; }
.dm-welcome.is-minimal .dm-welcome-go { position: static; grid-column: 3; grid-row: 1 / span 2; opacity: 1; translate: 0 0; }
@media (max-width: 640px) { .dm-welcome.is-minimal .dm-welcome-badge { min-width: 0; } }

.dm-welcome-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.dm-welcome-stage { position: relative; display: grid; place-items: center; width: 7.5rem; height: 7.5rem; border: 1px solid var(--wl-line); border-radius: calc(var(--dm-r, 12px) * 2.2); background: var(--wl-tile); transition: transform 0.5s var(--dm-ease); }
.dm-welcome-stage:hover { transform: rotate(-4deg) scale(1.05); }
.dm-welcome-icon { display: block; width: 6.4rem; height: 6.4rem; opacity: 0; cursor: pointer; transition: opacity 0.3s; }
.dm-welcome-still { position: absolute; display: grid; place-items: center; color: var(--dm-primary); transition: opacity 0.3s, scale 0.3s; animation: dm-wl-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; }
.dm-welcome.is-live .dm-welcome-icon { opacity: 1; animation: dm-wl-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.dm-welcome.is-live .dm-welcome-still { opacity: 0; scale: 0.6; }

.dm-welcome-hi { min-width: 0; container-type: inline-size; }
.dm-welcome-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--wl-fg-2); font: 600 0.72rem/1.3 var(--dm-font-sub, var(--dm-font-head)); letter-spacing: 0.08em; text-transform: uppercase; }
.dm-welcome-kicker time { font-variant-numeric: tabular-nums; }
.dm-welcome-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dm-primary); animation: dm-wl-live 2.2s ease-out infinite; }
.dm-welcome-title { margin-top: 0.45rem; color: inherit; font-size: clamp(1.7rem, 7cqi, 3.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.dm-welcome-title em { color: var(--wl-em, var(--dm-primary)); font-style: normal; }
/* Long first names: a smaller headline, the name kept whole (cut with … only when it can't fit; the full name is its title). */
.dm-welcome-title { overflow-wrap: break-word; }
.dm-welcome-title em { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.dm-welcome-title.is-long { font-size: clamp(1.45rem, 5.6cqi, 2.6rem); }
.dm-welcome-title.is-xlong { font-size: clamp(1.3rem, 4.6cqi, 2.15rem); }
@media (max-width: 640px) {
    .dm-welcome-title.is-long { font-size: clamp(1.3rem, 7.5cqi, 1.75rem); }
    .dm-welcome-title.is-xlong { font-size: clamp(1.15rem, 6.2cqi, 1.5rem); }
}
.dm-welcome-word { display: inline-block; animation: dm-wl-word 0.65s var(--dm-ease) both; animation-delay: calc(var(--i, 0) * 80ms + 0.15s); }
.dm-welcome-lines { position: relative; display: grid; margin-top: 0.75rem; max-width: 44rem; }
.dm-welcome-line { grid-area: 1 / 1; color: var(--wl-fg-2); font-size: 1rem; opacity: 0; translate: 0 10px; pointer-events: none; transition: opacity 0.45s ease, translate 0.6s var(--dm-ease); }
.dm-welcome-line.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.dm-welcome-line.is-out { opacity: 0; translate: 0 -10px; }
.dm-welcome-line a { display: inline; color: var(--wl-fg); font-weight: 500; }
.dm-welcome-line a svg { margin-inline-start: 0.3rem; vertical-align: -2px; }
.dm-welcome-line a svg { color: var(--dm-primary); transition: translate 0.25s var(--dm-ease); }
.dm-welcome-line a:hover svg { translate: 4px 0; }
.dm-welcome-dots { display: flex; gap: 6px; margin-top: 0.8rem; }
.dm-welcome-dots i { position: relative; overflow: hidden; width: 18px; height: 3px; border-radius: 3px; background: var(--wl-line); }
.dm-welcome-dots i::after { content: ''; position: absolute; inset: 0; background: var(--dm-primary); transform: scaleX(0); transform-origin: left; }
.dm-welcome-dots i.is-on::after { animation: dm-wl-fill var(--wl-every, 5s) linear forwards; }
.dm-welcome.is-paused .dm-welcome-dots i.is-on::after { animation-play-state: paused; }

.dm-welcome-stats { display: grid; grid-auto-flow: column; gap: 0.5rem; }
.dm-welcome-stat { display: grid; justify-items: start; gap: 0.15rem; min-width: 6.5rem; padding: 0.85rem 1rem; border: 1px solid var(--wl-line); border-radius: var(--dm-r, 12px); background: var(--wl-card); transition: background 0.25s, transform 0.35s var(--dm-ease), border-color 0.25s; animation: dm-wl-rise 0.6s var(--dm-ease) both; animation-delay: calc(var(--i, 0) * 90ms + 0.35s); }
.dm-welcome-stat:hover { transform: translateY(-3px); border-color: var(--dm-primary); background: var(--wl-card-hover); }
.dm-welcome-stat b { font: 800 1.45rem/1 var(--dm-font-head); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dm-welcome-stat span { color: var(--wl-fg-2); font-size: 0.8rem; }

.dm-welcome-lane { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: clamp(1.1rem, 2.5vw, 1.6rem); perspective: 900px; }
.dm-welcome-card { position: relative; display: grid; align-content: start; gap: 0.3rem; min-width: 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--wl-line); border-radius: var(--dm-r, 12px); background: var(--wl-card);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: background 0.25s, border-color 0.25s, transform 0.2s ease-out; animation: dm-wl-rise 0.6s var(--dm-ease) both; animation-delay: calc(var(--i, 0) * 110ms + 0.55s); }
.dm-welcome-card:hover { border-color: color-mix(in srgb, var(--dm-primary) 70%, transparent); background: var(--wl-card-hover); }
.dm-welcome-card.is-hot { border-color: color-mix(in srgb, var(--dm-primary) 55%, transparent); }
.dm-welcome-badge { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--wl-fg-2); font-size: 0.75rem; font-weight: 600; }
.dm-welcome-card.is-hot .dm-welcome-badge, .dm-welcome-badge svg { color: var(--dm-primary); }
.dm-welcome-card b { overflow: hidden; font: 700 1.05rem/1.25 var(--dm-font-head); text-overflow: ellipsis; white-space: nowrap; }
.dm-welcome-card small { color: var(--wl-fg-2); font-size: 0.82rem; }
.dm-welcome-go { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; color: var(--dm-primary); opacity: 0; translate: -6px 0; transition: opacity 0.25s, translate 0.3s var(--dm-ease); }
.dm-welcome-card:hover .dm-welcome-go { opacity: 1; translate: 0 0; }
[dir='rtl'] .dm-welcome-go svg, [dir='rtl'] .dm-welcome-line a svg { transform: scaleX(-1); }

@keyframes dm-wl-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes dm-wl-word { from { opacity: 0; transform: translateY(0.45em) rotate(3deg); filter: blur(4px); } }
@keyframes dm-wl-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes dm-wl-pop { from { opacity: 0; scale: 0.6; } }
@keyframes dm-wl-fill { to { transform: scaleX(1); } }
@keyframes dm-wl-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dm-primary) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

@media (max-width: 1023px) {
    .dm-welcome-top { grid-template-columns: auto minmax(0, 1fr); }
    .dm-welcome-stats { grid-column: 1 / -1; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dm-welcome-stat { min-width: 0; }
}
@media (max-width: 640px) {
    .dm-welcome-stage { width: 4.6rem; height: 4.6rem; }
    .dm-welcome-icon { width: 4rem; height: 4rem; }
    .dm-welcome-still svg { width: 28px; height: 28px; }
    .dm-welcome-title { font-size: clamp(1.45rem, 9cqi, 2rem); }
    .dm-welcome-lane { grid-template-columns: minmax(0, 1fr); }
    .dm-welcome-stat { padding: 0.7rem 0.75rem; } .dm-welcome-stat b { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
    .dm-welcome, .dm-welcome * { animation: none !important; transition: none !important; }
    .dm-welcome-card { transform: none; }
}
.dm-acc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.dm-acc-stats > * { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.5rem; border-radius: var(--dm-r-sm); background: var(--dm-soft); }
.dm-acc-stats .dm-i { color: var(--dm-primary); }
.dm-acc-stats span { display: flex; flex-direction: column; }
.dm-acc-stats b { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.dm-acc-stats small { color: var(--dm-muted); font-size: 0.84rem; }
a.dm-acc-stats > *:hover, .dm-acc-stats a:hover b { color: var(--dm-primary); }
.dm-acc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.dm-acc-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.25rem 1.4rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); transition: border-color 0.2s, box-shadow 0.3s; }
.dm-acc-card .dm-i { margin-bottom: 0.4rem; color: var(--dm-primary); }
.dm-acc-card small { color: var(--dm-muted); font-size: 0.85rem; }
.dm-acc-card:hover { border-color: var(--dm-bg); box-shadow: 0 4px 10px rgb(1 15 28 / 0.14); }
.dm-acc-sub { margin-top: 0.75rem; font: 600 1.05rem var(--dm-font-head); letter-spacing: 0; }
.dm-acc-note { margin-top: -0.25rem; }
.dm-acc .dm-chips a { padding: 0.4rem 0.95rem; }
.dm-acc .dm-chips a[aria-current] { background: var(--dm-secondary); color: var(--dm-on-secondary); }
.dm-empty > .dm-i { color: var(--dm-primary); }

/* Tables */
.dm-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.dm-table th { padding: 0.85rem 1.1rem; background: var(--dm-soft); font-weight: 500; text-align: start; white-space: nowrap; }
.dm-table td { padding: 0.95rem 1.1rem; border-top: 1px solid var(--dm-line); white-space: nowrap; }
.dm-table td small { color: var(--dm-muted); }
.dm-table td a b:hover { color: var(--dm-primary); }
.dm-table .is-end { text-align: end; }
.dm-btn.is-sm { height: 2.3rem; padding: 0 0.95rem; font-size: 0.84rem; }
.dm-status { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--dm-soft); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.dm-status.is-pending { background: #fef3c7; color: #92400e; }
.dm-status.is-processing { background: #e0f2fe; color: #075985; }
.dm-status.is-shipped { background: var(--dm-primary-soft); color: color-mix(in srgb, var(--dm-primary) 70%, #000); }
.dm-status.is-completed { background: #dcfce7; color: #166534; }
.dm-status.is-cancelled, .dm-status.is-refunded { background: #fee2e2; color: #991b1b; }
.dm-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 0.9rem; }
.dm-pager a, .dm-pager > span:not(:nth-child(2)) { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--dm-line); border-radius: 50%; }
.dm-pager > span:not(:nth-child(2)) { opacity: 0.4; }
.dm-pager a:hover { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }

/* Order page and tracking */
.dm-ord-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.dm-ord-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; color: var(--dm-muted); }
.dm-ord-head b { color: var(--dm-text); font-weight: 500; }
.dm-ord-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dm-ord-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.dm-ord-side { display: flex; flex-direction: column; gap: 1.25rem; }
.dm-addr.is-small { margin: 0.75rem 0 0; font-size: 0.85rem; line-height: 1.5; }
.dm-progress { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 1.25rem 0 0.25rem; list-style: none; counter-reset: s; }
.dm-progress li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; color: var(--dm-muted); font-size: 0.85rem; text-align: center; }
.dm-progress li::before { content: ''; position: absolute; top: 0.85rem; inset-inline: -50% 50%; z-index: 0; height: 2px; background: var(--dm-line); }
.dm-progress li:first-child::before { content: none; }
.dm-progress li.is-done::before { background: var(--dm-primary); }
.dm-progress li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 2px solid var(--dm-line); border-radius: 50%; background: var(--dm-bg); color: transparent; }
.dm-progress li.is-done { color: var(--dm-text); }
.dm-progress li.is-done > span { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-progress li.is-now { font-weight: 600; }
.dm-progress li.is-now > span { box-shadow: 0 0 0 5px var(--dm-primary-soft); }
.dm-progress li.is-bad > span { border-color: #dc2626; background: #dc2626; color: #fff; }
.dm-track-result { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--dm-line); }
.dm-track-result > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.dm-track-total { display: flex; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid var(--dm-line); }

/* Addresses and settings */
.dm-addr-grid, .dm-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.dm-addr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dm-addr-top .dm-h3 { flex: 1; }
.dm-addr-remove { margin-top: 0.75rem; font-size: 0.85rem; }
.dm-form-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; grid-column: 1 / -1; }
.dm-fields > .is-full { grid-column: 1 / -1; }

@media (max-width: 64em) {
    .dm-acc { grid-template-columns: minmax(0, 1fr); }
    .dm-acc-side { position: static; }
    .dm-acc-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .dm-acc-nav a, .dm-acc-nav button { width: auto; white-space: nowrap; }
    .dm-acc-nav form { margin: 0; padding: 0; border: 0; }
    .dm-ord-grid, .dm-addr-grid, .dm-set-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48em) {
    .dm-acc-stats, .dm-acc-cards { grid-template-columns: minmax(0, 1fr); }
    .dm-acc-me { display: none; }
    .dm-auth-form.is-row { grid-template-columns: minmax(0, 1fr); }
    .dm-auth-form.is-row .dm-btn.is-auth { width: 100%; }
    .dm-progress li { font-size: 0.74rem; }
}
.dm-co-box > .dm-co-lines, .dm-track-result > .dm-co-lines { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--dm-line); }
.dm-co-name small { margin-inline-start: 0.25rem; color: var(--dm-muted); }
.dm-co-lines .dm-co-name { flex: 1; min-width: 0; }

/* ── Wishlist and compare ── */
.dm-lists { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding-block: 2.5rem 0; }
.dm-lists > .dm-table-wrap, .dm-lists > .dm-empty, .dm-lists > .dm-flash { align-self: stretch; }
.dm-lists-note { margin-bottom: -0.5rem; }
.dm-cart-table td { vertical-align: middle; }
.dm-cart-table .dm-cart-pic { width: 6.5rem; padding-inline-end: 0; }
.dm-cart-table .dm-cart-pic a { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; overflow: hidden; border-radius: var(--dm-r-sm); background: var(--dm-img-bg); color: var(--dm-muted); }
.dm-cart-table .dm-cart-pic img { width: 100%; height: 100%; object-fit: cover; }
.dm-cart-table .dm-cart-name { white-space: normal; min-width: 12rem; }
.dm-cart-table .dm-cart-name a { display: block; font-weight: 500; }
.dm-cart-table .dm-cart-name a:hover { color: var(--dm-primary); }
.dm-cart-table .dm-cart-name small { color: var(--dm-muted); }
.dm-x { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; border: 0; background: none; color: var(--dm-muted); font-size: 0.88rem; }
.dm-x:hover { color: #dc2626; }
.dm-compare { table-layout: fixed; min-width: 40rem; }
.dm-compare th { width: 10rem; background: var(--dm-soft); vertical-align: top; }
.dm-compare td, .dm-compare th { border-top: 1px solid var(--dm-line); border-inline-start: 1px solid var(--dm-line); white-space: normal; }
.dm-compare tr:first-child td, .dm-compare tr:first-child th { border-top: 0; }
.dm-compare-pic { display: grid; place-items: center; width: 100%; max-width: 12rem; aspect-ratio: 1; margin-bottom: 0.75rem; overflow: hidden; border-radius: var(--dm-r-sm); background: var(--dm-img-bg); color: var(--dm-muted); }
.dm-compare-pic img { width: 100%; height: 100%; object-fit: cover; }
.dm-compare-name { font-weight: 500; }
.dm-compare-name:hover { color: var(--dm-primary); }
.dm-compare-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; align-self: stretch; color: var(--dm-muted); font-size: 0.92rem; }
.dm-compare-diff { color: var(--dm-text); }
.dm-compare th { position: sticky; inset-inline-start: 0; z-index: 1; }
.dm-compare tr.is-head td { vertical-align: top; }
.dm-compare tr[hidden] { display: none; }
.dm-compare tr.is-diff td { background: color-mix(in srgb, var(--dm-primary) 4%, var(--dm-bg)); }
.dm-compare-best { display: inline-block; margin-top: 0.35rem; padding: 0.1rem 0.55rem; border-radius: 99px; background: var(--dm-primary-soft); color: var(--dm-primary); font-size: 0.75rem; font-weight: 600; }
.dm-compare .dm-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.dm-compare-rate { display: flex; flex-direction: column; gap: 0.2rem; }
.dm-compare-rate small { color: var(--dm-muted); font-size: 0.8rem; }
.dm-compare-sw { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dm-compare-sw > span { position: relative; width: 1.25rem; height: 1.25rem; border-radius: 99px; background: var(--sw); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dm-text) 18%, transparent); }
.dm-compare-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.dm-compare-none { align-self: stretch; }
.dm-btn.is-dark.is-sm:hover { border-color: var(--dm-btn-hover); background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); }
/* Saved state of the heart and compare buttons */
.dm-buy-wish[aria-pressed='true'] { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
/* On a card, saved / in compare: a light tint and the icon in the primary colour (the heart filled), so it reads as "on", not as a hover stuck in place. */
.dm-card-tools button[aria-pressed='true'] { background: color-mix(in srgb, var(--dm-primary) 10%, var(--dm-bg)); color: var(--dm-primary); }
.dm-card-tools button[aria-pressed='true']:hover { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-card-tools button[aria-pressed='true'] .dm-i path:only-child { fill: currentColor; }
.dm-buy-wish[aria-pressed='true'] .dm-i { fill: none; }
.dm-card-tools button[aria-pressed='true'] .dm-i, .dm-buy-wish[aria-pressed='true'] .dm-i { stroke: currentColor; }

/* ── Mini cart (slides in from the end side) ── */
.dm-drawer.is-end .dm-drawer-panel { inset-inline: auto 0; animation-name: dm-in-end; }
[dir='rtl'] .dm-drawer.is-end .dm-drawer-panel { animation-name: dm-in; }
@keyframes dm-in-end { from { transform: translateX(100%); } }
.dm-cartmini { width: min(23.5rem, 92vw); gap: 0; padding: 0; }
.dm-cartmini-top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--dm-line); }
.dm-cartmini-top b { font: 600 1.05rem var(--dm-font-head); }
.dm-cartmini-free { padding: 1rem 1.5rem; border-bottom: 1px solid var(--dm-line); font-size: 0.86rem; }
.dm-cartmini-free span { display: block; height: 0.35rem; margin-top: 0.55rem; overflow: hidden; border-radius: 999px; background: var(--dm-line); }
.dm-cartmini-free i { display: block; height: 100%; border-radius: inherit; background: var(--dm-primary); transition: width 0.6s var(--dm-ease); }
.dm-cartmini-body { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 0.5rem 1.5rem; }
.dm-cartmini-lines { margin: 0; padding: 0; list-style: none; }
.dm-cartmini-lines li { position: relative; display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--dm-line); }
.dm-cartmini-lines .dm-mini-pic { width: 4.5rem; height: 4.5rem; }
.dm-cartmini-lines .dm-mini-pic img { object-fit: cover; padding: 0; }
.dm-cartmini-lines li > div { display: flex; flex: 1; flex-direction: column; gap: 0.25rem; min-width: 0; padding-inline-end: 1.5rem; }
.dm-cartmini-name { font-weight: 500; font-size: 0.92rem; line-height: 1.35; }
.dm-cartmini-name:hover { color: var(--dm-primary); }
.dm-cartmini-price { color: var(--dm-muted); font-size: 0.85rem; }
.dm-cartmini-price b { color: var(--dm-primary); }
.dm-qty.is-xs { display: inline-flex; align-self: flex-start; height: 2rem; margin-top: 0.25rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); }
.dm-qty.is-xs button { width: 1.9rem; border: 0; background: none; }
.dm-qty.is-xs button:disabled { opacity: 0.35; }
.dm-qty.is-xs input { width: 2rem; border: 0; background: none; text-align: center; font-size: 0.85rem; }
.dm-cartmini-del { position: absolute; top: 1rem; inset-inline-end: 0; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; background: none; color: var(--dm-muted); }
.dm-cartmini-del:hover { color: #dc2626; }
.dm-cartmini-del svg { width: 16px; height: 16px; }
.dm-cartmini-foot { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--dm-line); }
.dm-cartmini-foot p { display: flex; justify-content: space-between; margin-bottom: 0.4rem; font-size: 1rem; }
.dm-cartmini-foot b { font-weight: 700; }
.dm-cartmini-empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 4rem 1rem; text-align: center; color: var(--dm-muted); }
.dm-cartmini-empty .dm-i { color: var(--dm-primary); }
/* The empty cart's bag: drawn in, then swings gently over its shadow. */
.dm-cartmini-ico { position: relative; display: grid; place-items: center; width: 5rem; height: 5rem; }
.dm-cartmini-ico .dm-i { position: relative; z-index: 1; transform-origin: 50% 0; animation: dm-bag-swing 2.8s ease-in-out .9s infinite; }
.dm-cartmini-ico .dm-i * { stroke-dasharray: 80; stroke-dashoffset: 80; animation: dm-bag-draw .9s ease-out forwards; }
.dm-cartmini-ico .dm-i *:nth-child(2) { animation-delay: .25s; }
.dm-cartmini-ico .dm-i *:nth-child(3) { animation-delay: .45s; }
.dm-cartmini-ico > i { position: absolute; bottom: 0.9rem; width: 1.9rem; height: 0.3rem; border-radius: 50%; background: var(--dm-primary); opacity: .18; animation: dm-bag-shadow 2.8s ease-in-out .9s infinite; }
@keyframes dm-bag-draw { to { stroke-dashoffset: 0; } }
@keyframes dm-bag-swing { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-8deg) translateY(-3px); } 50% { transform: rotate(0) translateY(-5px); } 75% { transform: rotate(8deg) translateY(-3px); } }
@keyframes dm-bag-shadow { 0%, 100% { transform: scaleX(1); opacity: .18; } 50% { transform: scaleX(.7); opacity: .1; } }
@media (prefers-reduced-motion: reduce) { .dm-cartmini-ico .dm-i, .dm-cartmini-ico > i { animation: none; } .dm-cartmini-ico .dm-i * { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 48em) {
    .dm-actions .dm-act[href$='/compare'] { display: none; }
}

/* ── Quick view popup (Shofy's product modal) ── */
.dm-modal { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }
.dm-modal-shade { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); animation: dm-fade 0.25s; }
.dm-modal-box { position: relative; width: min(100%, 64rem); max-height: 100%; overflow-y: auto; padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--dm-bg); box-shadow: 0 30px 70px rgb(1 15 28 / 0.25); animation: dm-pop 0.35s var(--dm-ease); }
@keyframes dm-pop { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.dm-modal-x { position: absolute; z-index: 2; top: 0.75rem; inset-inline-end: 0.75rem; }
.dm-pd.is-quick { padding: 0; }
.dm-pd.is-quick .dm-gal { position: static; }
.dm-pd.is-quick .dm-pd-name { padding-inline-end: 2rem; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.dm-pd.is-quick .dm-pd-name a:hover { color: var(--dm-primary); }
.dm-pd.is-quick .dm-pd-promises { display: none; }
.dm-qv-more { margin-top: 0.25rem; color: var(--dm-primary); font-size: 0.92rem; }
/* Quick view opening ("Curtain"): the popup opens from a middle line, the picture grows in,
   the title comes up line by line and the rest comes into focus. No grey box behind pictures. */
.dm-modal[data-dm-qv] .dm-modal-shade { animation: none; opacity: 0; transition: opacity 0.3s var(--dm-ease), backdrop-filter 0.3s var(--dm-ease); }
.dm-modal[data-dm-qv].is-in .dm-modal-shade { opacity: 1; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dm-modal[data-dm-qv] .dm-modal-box { --qv-c: max(var(--dm-r), 18px); --qv-r: var(--qv-c); border-radius: var(--qv-c); animation: none; clip-path: inset(49.5% 0 49.5% 0 round var(--qv-r)); }
.dm-modal[data-dm-qv].is-in .dm-modal-box { clip-path: inset(0 0 0 0 round var(--qv-r)); transition: clip-path 0.32s cubic-bezier(0.76, 0, 0.24, 1); }
.dm-modal[data-dm-qv].is-out .dm-modal-shade { opacity: 0; backdrop-filter: none; transition-duration: 0.25s; }
.dm-modal[data-dm-qv].is-out .dm-modal-box { opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 0.22s ease, transform 0.28s var(--dm-ease); }
.dm-modal[data-dm-qv] .dm-gal-main img { animation: none; opacity: 0; transform: scale(0.85); }
.dm-modal[data-dm-qv].is-in .dm-gal-main img { opacity: 1; transform: none; transition: opacity 0.3s ease 0.16s, transform 0.42s cubic-bezier(0.33, 1, 0.68, 1) 0.16s; }
.dm-modal[data-dm-qv] [data-qv-in] { opacity: 0; }
.dm-modal[data-dm-qv].is-in [data-qv-in] { animation: dm-qv-focus 0.38s cubic-bezier(0.33, 1, 0.68, 1) both; animation-delay: calc(220ms + var(--i) * 35ms); }
@keyframes dm-qv-focus { from { opacity: 0; filter: blur(10px); transform: scale(0.98); } to { opacity: 1; filter: none; transform: none; } }
.dm-qv-ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.dm-qv-ln > span { display: block; transform: translateY(105%); }
.dm-modal[data-dm-qv].is-in .dm-qv-ln > span { animation: dm-qv-ln 0.38s cubic-bezier(0.33, 1, 0.68, 1) both; animation-delay: calc(190ms + var(--li) * 45ms); }
@keyframes dm-qv-ln { to { transform: none; } }
.dm-card-tools a.is-busy .dm-i { animation: dm-qv-busy 0.9s ease-in-out infinite; }
@keyframes dm-qv-busy { 50% { opacity: 0.35; transform: scale(0.85); } }
@media (max-width: 48em) {
    .dm-modal[data-dm-qv] .dm-modal-box { --qv-r: var(--qv-c) var(--qv-c) 0 0; border-radius: var(--qv-c) var(--qv-c) 0 0; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dm-modal[data-dm-qv] .dm-modal-box, .dm-modal[data-dm-qv] .dm-gal-main img, .dm-modal[data-dm-qv] [data-qv-in], .dm-qv-ln > span { clip-path: none; transform: none; opacity: 1; animation: none !important; transition: none !important; }
}
@media (max-width: 48em) {
    .dm-modal { place-items: end stretch; padding: 0; }
    .dm-modal-box { max-height: 92vh; border-radius: var(--dm-r) var(--dm-r) 0 0; animation-name: dm-up; }
    @keyframes dm-up { from { transform: translateY(100%); } }
}
.dm-buy-wish { flex: none; }
@media (max-width: 48em) {
    .dm-modal-box { padding-top: 3.5rem; }
}
/* Menus from Website › Menus: a second level opens beside the first */
.dm-sub li { position: relative; }
.dm-sub li.has-sub > a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.dm-sub.is-deep { top: -1rem; inset-inline-start: 100%; }
.dm-sub a.is-here { color: var(--dm-primary); }
.dm-drawer-nav details { border-bottom: 1px solid var(--dm-line); }
.dm-drawer-nav summary { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; font-weight: 500; cursor: pointer; list-style: none; }
.dm-drawer-nav summary::-webkit-details-marker { display: none; }
.dm-drawer-nav details[open] > summary > .dm-i { transform: rotate(180deg); }
.dm-drawer-nav details a { padding: 0.5rem 0 0.5rem 1rem; border: 0; font-weight: 400; font-size: 0.92rem; }
.dm-drawer-nav details a:last-child { padding-bottom: 0.9rem; }

/* ── Page blocks (Website › Pages) ── */
.dm-page > .dm-sec:first-child:not(.dm-hero) { padding-top: 2.5rem; }
.dm-text .dm-prose { display: flex; flex-direction: column; gap: 1rem; font-size: 1rem; line-height: 1.75; }
.dm-text .dm-prose p { color: color-mix(in srgb, var(--dm-text) 82%, var(--dm-bg)); }
.dm-text .dm-prose .dm-h2 { margin-bottom: 1.25rem; }
.dm-text.is-narrow .dm-prose { max-width: 46rem; }
.dm-text.is-center .dm-prose { align-items: center; margin-inline: auto; text-align: center; }
.dm-text.is-center .dm-h2::after { inset-inline-start: 50%; transform: translateX(-50%); }
.dm-prose a { color: var(--dm-primary); text-decoration: underline; text-underline-offset: 3px; }
.dm-image figure { margin-block: 0; }
.dm-image img, .dm-image .dm-lottie { width: var(--dm-img-size, 100%); margin-inline: auto; border-radius: var(--dm-r); }
.dm-image a { display: block; }
.dm-image.is-narrow figure { max-width: 52rem; }
.dm-image figcaption { margin-top: 0.75rem; color: var(--dm-muted); font-size: 0.88rem; text-align: center; }
.dm-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--dm-r); background: var(--dm-secondary); color: var(--dm-on-secondary); }
.dm-cta.is-light { background: var(--dm-soft); color: var(--dm-text); }
.dm-cta.is-brand { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-cta h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; }
.dm-cta > div { display: flex; flex-direction: column; gap: 0.6rem; max-width: 40rem; }
.dm-cta-text { opacity: 0.85; }
.dm-faq-block .dm-faqs { max-width: 52rem; }
.dm-spacer.is-small { height: 1.5rem; }
.dm-spacer.is-medium { height: 3.5rem; }
.dm-spacer.is-large { height: 6rem; }
.dm-spacer { display: flex; align-items: center; }
.dm-spacer .dm-wrap { width: 100%; }
.dm-spacer hr { margin: 0; border: 0; border-top: 1px solid var(--dm-line); }
.dm-page-empty { padding-block: 3rem; text-align: center; }
.dm-text .dm-prose > * + * { margin-top: 0; }
.dm-text.is-wide .dm-prose { max-width: none; }

/* ── Blog (Shofy's blog grid, sidebar widgets and post page) ── */
.dm-blog { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 3rem; align-items: start; padding-block: 3rem 0; }
.dm-blog-main { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.dm-blog-lede { color: var(--dm-muted); font-size: 1.05rem; }
.dm-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.75rem; }
.dm-posts.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-post { display: flex; flex-direction: column; gap: 1.1rem; }
.dm-post-pic { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--dm-r); background: var(--dm-img-bg); color: var(--dm-muted); }
.dm-post-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--dm-ease); }
.dm-post:hover .dm-post-pic img { transform: scale(1.06); }
.dm-post-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.dm-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; color: var(--dm-muted); font-size: 0.84rem; }
.dm-post-meta > * { display: inline-flex; align-items: center; gap: 0.35rem; }
.dm-post-meta a { color: var(--dm-primary); font-weight: 500; }
.dm-post-meta.is-big { font-size: 0.92rem; }
.dm-post-title { font: 600 1.2rem/1.35 var(--dm-font-head); letter-spacing: -0.01em; }
.dm-post-title a:hover { color: var(--dm-primary); }
.dm-post-ex { color: color-mix(in srgb, var(--dm-text) 75%, var(--dm-bg)); font-size: 0.94rem; }
.dm-post-more { margin-top: 0.2rem; font-size: 0.88rem; }
.dm-post-more:hover { color: var(--dm-primary); }
.dm-blog-side { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 2.25rem; }
.dm-widget-h { margin-bottom: 1.1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--dm-line); font: 600 1.1rem var(--dm-font-head); }
.dm-blog-search { display: flex; height: 3.25rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); overflow: hidden; }
.dm-blog-search:focus-within { border-color: var(--dm-text); }
.dm-blog-search input { flex: 1; min-width: 0; padding: 0 1.1rem; border: 0; outline: 0; background: none; }
.dm-blog-search button { width: 3.25rem; border: 0; background: none; }
.dm-blog-search button:hover { color: var(--dm-primary); }
.dm-recent { display: flex; align-items: center; gap: 0.9rem; }
.dm-recent + .dm-recent { margin-top: 1rem; }
.dm-recent-pic { display: grid; flex: none; place-items: center; width: 5rem; height: 4.25rem; overflow: hidden; border-radius: var(--dm-r-sm); background: var(--dm-img-bg); color: var(--dm-muted); }
.dm-recent-pic img { width: 100%; height: 100%; object-fit: cover; }
.dm-recent > span:last-child { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.dm-recent small { color: var(--dm-muted); font-size: 0.78rem; }
.dm-recent b { display: -webkit-box; overflow: hidden; font-weight: 500; font-size: 0.92rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dm-recent:hover b { color: var(--dm-primary); }
.dm-widget-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dm-widget-list a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0; transition: color 0.2s, padding 0.25s var(--dm-ease); }
.dm-widget-list a:hover, .dm-widget-list a.is-here { padding-inline-start: 0.35rem; color: var(--dm-primary); }
.dm-widget-list small { color: var(--dm-muted); }
.dm-tagcloud { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.dm-tagcloud b { margin-inline-end: 0.25rem; }
.dm-tagcloud a { padding: 0.35rem 0.85rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); font-size: 0.84rem; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.dm-tagcloud a:hover, .dm-tagcloud a.is-here { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-article { gap: 1.25rem; }
.dm-article-pic { width: 100%; max-height: 32rem; object-fit: cover; border-radius: var(--dm-r); }
.dm-article-title { font-size: clamp(1.75rem, 3.5vw, 2.6rem); font-weight: 700; line-height: 1.2; }
.dm-article-lede { color: color-mix(in srgb, var(--dm-text) 75%, var(--dm-bg)); font-size: 1.15rem; line-height: 1.6; }
.dm-article-body { max-width: none; font-size: 1.02rem; }
.dm-article-body h2 { margin-top: 2rem; font-size: 1.55rem; }
.dm-article-body h3 { margin-top: 1.5rem; font-size: 1.25rem; }
.dm-article-body h4 { margin-top: 1.25rem; font-size: 1.05rem; }
.dm-article-body ul, .dm-article-body ol { padding-inline-start: 1.4rem; }
.dm-article-body li + li { margin-top: 0.4rem; }
.dm-article-body blockquote { margin: 1.5rem 0; padding: 1.4rem 1.6rem; border-inline-start: 4px solid var(--dm-primary); border-radius: var(--dm-r-sm); background: var(--dm-soft); font-size: 1.1rem; font-style: italic; }
.dm-article-body img { margin-block: 0.5rem; }
.dm-article-body figure { margin: 1.5rem 0; }
.dm-article-body figcaption { margin-top: 0.5rem; color: var(--dm-muted); font-size: 0.88rem; text-align: center; }
.dm-article-body hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--dm-line); }
.dm-article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-block: 1px solid var(--dm-line); }
.dm-share { display: flex; align-items: center; gap: 0.45rem; }
.dm-share b { margin-inline-end: 0.25rem; }
.dm-share a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--dm-line); border-radius: 50%; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.dm-share a:hover { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dm-article-nav a { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.25rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-article-nav a.is-next { align-items: flex-end; text-align: end; }
.dm-article-nav small { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--dm-muted); font-size: 0.8rem; }
.dm-article-nav b { font-weight: 500; }
.dm-article-nav a:hover b { color: var(--dm-primary); }
@media (max-width: 64em) {
    .dm-blog { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
    .dm-blog-side { position: static; }
    .dm-posts.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48em) {
    .dm-posts, .dm-posts.is-three, .dm-article-nav { grid-template-columns: minmax(0, 1fr); }
}

/* ── Contact form block (Shofy's contact page) ── */
.dm-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.dm-contact-grid.has-info { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.dm-contact-box { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--dm-line); background: var(--dm-bg); }
.dm-contact-h { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
.dm-contact-lede { color: var(--dm-muted); }
.dm-contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.dm-contact-form .dm-field { font-weight: 400; font-size: 0.88rem; }
.dm-contact-form .dm-field input, .dm-contact-form .dm-field textarea { min-height: 3.4rem; padding: 0.85rem 1.1rem; border-color: color-mix(in srgb, var(--dm-text) 14%, transparent); border-radius: 0; font-size: 0.92rem; }
.dm-contact-form .dm-field textarea { resize: vertical; }
.dm-contact-form .dm-field input:focus, .dm-contact-form .dm-field textarea:focus { border-color: var(--dm-text); box-shadow: none; }
.dm-contact-send { width: auto; align-self: flex-start; padding: 0 2.5rem; }
.dm-contact-send[disabled] { opacity: 0.6; }
.dm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.dm-contact-info { display: flex; flex-direction: column; gap: 2rem; padding-top: 1rem; }
.dm-contact-item { display: flex; gap: 1.1rem; }
.dm-contact-item > span { display: grid; flex: none; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-contact-item b { display: block; margin-bottom: 0.2rem; font: 600 1.05rem var(--dm-font-head); }
.dm-contact-item a:hover { color: var(--dm-primary); }
.dm-contact-item p { color: color-mix(in srgb, var(--dm-text) 78%, var(--dm-bg)); }
.dm-contact-social b { display: block; margin-bottom: 0.75rem; font: 600 1.05rem var(--dm-font-head); }
.dm-contact-social .dm-social a { border-color: var(--dm-line); }
.dm-contact-social .dm-social a:hover { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
@media (max-width: 64em) { .dm-contact-grid.has-info { grid-template-columns: minmax(0, 1fr); } }
.dm-contact-social .dm-social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.dm-contact-social .dm-social a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--dm-line); border-radius: 50%; color: var(--dm-text); }

@media (max-width: 991.98px) {
    .dm-tsm-rail { grid-auto-columns: calc((100% - 1.5rem) / 2); }
    .dm-gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dm-about-grid { grid-template-columns: minmax(0, 1fr); }
    .dm-about.is-end .dm-about-pic { order: 0; }
    .dm-nums-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dm-nums-row > div:nth-child(3) { border-inline-start: 0; }
    .dm-nums-row > div:nth-child(n + 3) { border-top: 1px solid var(--dm-line-soft); }
}
@media (max-width: 575.98px) {
    .dm-tsm-rail { grid-auto-columns: 88%; }
    .dm-tsm-card { padding: 1.5rem; }
    .dm-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .dm-pop-box.has-pic { grid-template-columns: minmax(0, 1fr); }
    .dm-pop-pic { display: none; }
}

@media (max-width: 767.98px) {
    .dm-rvs { grid-template-columns: minmax(0, 1fr); }
}

/* Gift cards: the box in the cart and checkout summaries, and the account page. */
.dm-gc { display: flex; flex-direction: column; gap: 0.6rem; }
.dm-gc-form { display: contents; }
.dm-gc-more { border: 1px dashed var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); }
.dm-gc-more summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem; cursor: pointer; font-weight: 600; font-size: 0.9rem; list-style: none; }
.dm-gc-more summary::-webkit-details-marker { display: none; }
.dm-gc-more summary .dm-i:first-child { color: var(--dm-primary); }
.dm-gc-more summary .dm-i:last-child { margin-inline-start: auto; color: var(--dm-muted); transition: transform 0.2s var(--dm-ease); }
.dm-gc-more[open] summary .dm-i:last-child { transform: rotate(180deg); }
.dm-gc-row { display: flex; gap: 0.5rem; padding: 0 0.85rem 0.85rem; }
.dm-gc-row input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 0.85rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-text); font-family: ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.dm-gc-row input:focus { outline: 0; border-color: var(--dm-primary); }
.dm-gc-on { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.85rem; border-radius: var(--dm-r-sm); background: var(--dm-secondary); color: var(--dm-on-secondary); }
.dm-gc-chip { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-gc-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dm-gc-txt b { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-gc-txt small { opacity: 0.7; font-size: 0.78rem; }
.dm-gc-on .dm-link { border: 0; background: none; color: inherit; opacity: 0.8; text-decoration: underline; cursor: pointer; }
.dm-gc-wallet { display: flex; flex-direction: column; gap: 0.4rem; }
.dm-gc-use { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--dm-primary); border-radius: var(--dm-r-sm); background: var(--dm-primary-soft); color: var(--dm-text); font: inherit; font-size: 0.9rem; text-align: start; cursor: pointer; transition: background 0.2s var(--dm-ease); }
.dm-gc-use:hover { background: var(--dm-bg); }
.dm-gc-use .dm-i { color: var(--dm-primary); }
.dm-gc-use small { margin-inline-start: auto; color: var(--dm-muted); font-family: ui-monospace, monospace; }
.dm-gc-msg { margin: 0; font-size: 0.82rem; color: #15803d; }
.dm-gc-msg.is-bad { color: #b91c1c; }
.dm-totals .is-due { padding-top: 0.6rem; border-top: 1px dashed var(--dm-line); }
.dm-totals .is-due dt { color: var(--dm-text); font-weight: 700; }
.dm-totals .is-due dd { color: var(--dm-primary); font: 700 1.1rem var(--dm-font-head); }

/* Reward points: the checkout switch, the product hint and Account › Reward points. */
.dm-rw { display: flex; flex-direction: column; gap: 0.45rem; }
.dm-rw-use { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); color: var(--dm-text); font: inherit; text-align: start; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.dm-rw-use:hover { border-color: var(--dm-primary); }
.dm-rw-use:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-rw.is-on .dm-rw-use { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
.dm-rw-chip { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-rw.is-on .dm-rw-chip { background: var(--dm-primary); color: var(--dm-on-primary, #fff); }
.dm-rw-txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dm-rw-txt b { font-size: 0.9rem; }
.dm-rw-txt small { color: var(--dm-muted); font-size: 0.78rem; }
.dm-rw-switch { position: relative; flex: none; width: 2.4rem; height: 1.4rem; border-radius: 1rem; background: var(--dm-line); transition: background-color 0.2s; }
.dm-rw-switch i { position: absolute; top: 0.2rem; inset-inline-start: 0.2rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: transform 0.2s var(--dm-ease); }
.dm-rw.is-on .dm-rw-switch { background: var(--dm-primary); }
.dm-rw.is-on .dm-rw-switch i { transform: translateX(1rem); }
[dir='rtl'] .dm-rw.is-on .dm-rw-switch i { transform: translateX(-1rem); }
.dm-rw-line { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; font-size: 0.85rem; }
.dm-rw-line .dm-i, .dm-rw-hint .dm-i { flex: none; margin-top: 0.15rem; color: var(--dm-primary); }
.dm-rw-earn { margin: 0; color: var(--dm-muted); font-size: 0.8rem; }
.dm-rw-hint { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0; color: var(--dm-text); font-size: 0.88rem; font-weight: 500; }
.dm-rw-hint .dm-i { margin-top: 0; }
.dm-rw-hint small { color: var(--dm-muted); font-weight: 400; }
.dm-rws { display: flex; flex-direction: column; gap: 1.75rem; }
.dm-rws-card { padding: 1.4rem 1.5rem; border-radius: var(--dm-r); background: var(--dm-secondary, #111); color: var(--dm-on-secondary, #fff); }
.dm-rws-top { display: flex; align-items: center; gap: 0.5rem; color: var(--dm-primary); font-weight: 600; font-size: 0.9rem; }
.dm-rws-num { display: block; margin: 0.35rem 0 0.2rem; font: 700 clamp(2.2rem, 6vw, 3rem)/1.05 var(--dm-font-head); font-variant-numeric: tabular-nums; }
.dm-rws-card p { margin: 0; opacity: 0.78; font-size: 0.9rem; }
.dm-rws-card .dm-rws-pend { margin-top: 0.6rem; opacity: 1; color: var(--dm-primary); }
.dm-rws-how ul { display: grid; gap: 0.7rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.dm-rws-how li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.9rem; }
.dm-rws-how .dm-i { flex: none; margin-top: 0.1rem; color: var(--dm-primary); }
.dm-rws-top .dm-rws-lvtag { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem 0.15rem 0.2rem; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); color: var(--dm-on-secondary, #fff); font-size: 0.8rem; }
.dm-rws-top .dm-rws-lvtag img { inline-size: 22px; block-size: 22px; object-fit: contain; border-radius: 50%; }
.dm-rws-lv-now { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; }
.dm-rws-lv-badge { flex: none; display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--dm-surface-2, rgba(0,0,0,.04)); color: var(--dm-primary); overflow: hidden; }
.dm-rws-lv-badge img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.dm-rws-lv-badge.is-sm { inline-size: 40px; block-size: 40px; }
.dm-rws-lv-txt { display: grid; gap: 0.3rem; min-width: 0; flex: 1; font-size: 0.9rem; }
.dm-rws-lv-txt b { font: 700 1.15rem/1.2 var(--dm-font-head); }
.dm-rws-lv-txt p { margin: 0; }
.dm-rws-lv-bar { display: block; block-size: 0.45rem; border-radius: 999px; background: var(--dm-line, rgba(0,0,0,.1)); overflow: hidden; max-inline-size: 22rem; }
.dm-rws-lv-bar i { display: block; block-size: 100%; border-radius: inherit; background: var(--dm-primary); }
.dm-rws-ladder { display: flex; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.dm-rws-ladder li { flex: 1 0 7.5rem; display: grid; justify-items: center; gap: 0.25rem; padding: 0.75rem 0.5rem; border: 1px solid var(--dm-line, rgba(0,0,0,.1)); border-radius: var(--dm-r); text-align: center; font-size: 0.8rem; opacity: 0.6; }
.dm-rws-ladder li.is-done { opacity: 1; }
.dm-rws-ladder li.is-on { border-color: var(--dm-primary); box-shadow: inset 0 0 0 1px var(--dm-primary); }
.dm-rws-ladder small { color: var(--dm-muted, inherit); opacity: 0.8; }
.dm-gcs { display: flex; flex-direction: column; gap: 1.5rem; }
.dm-gcs-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-soft); }
.dm-gcs-total span { color: var(--dm-muted); }
.dm-gcs-total b { display: block; font: 700 1.75rem var(--dm-font-head); color: var(--dm-text); }
.dm-gcs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 1rem; }
.dm-gcard { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem; aspect-ratio: 1.586; max-width: 100%; border-radius: calc(var(--dm-r) + 4px); background: var(--dm-secondary); color: var(--dm-on-secondary); overflow: hidden; }
.dm-gcard::after { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -25%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 1.5rem solid var(--dm-primary); opacity: 0.9; }
.dm-gcard.is-off { filter: grayscale(1); opacity: 0.6; }
.dm-gcard-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; }
.dm-gcard-top .dm-i { color: var(--dm-primary); }
.dm-gcard-amt { position: relative; z-index: 1; margin-top: auto; font: 700 1.9rem/1 var(--dm-font-head); }
.dm-gcard-amt small { display: block; margin-top: 0.4rem; font-family: var(--dm-font); font-size: 0.8rem; font-weight: 400; line-height: 1.3; opacity: 0.7; }
.dm-gcard-code { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 0.5rem; font-family: ui-monospace, monospace; font-size: 0.85rem; letter-spacing: 0.08em; }
.dm-gcard-code em { font-style: normal; font-family: inherit; opacity: 0.75; letter-spacing: 0; }
.dm-gcs-hist { margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.dm-gcs-hist li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--dm-line-soft); }
.dm-gcs-hist .is-up { color: #15803d; }
.dm-gcs-claim { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.dm-gcs-claim .dm-gc-row { padding: 0; flex: 1; min-width: min(20rem, 100%); }

/* Returns: the request form, the return page and the box on the order page. */
.dm-rq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); gap: 1.5rem; align-items: start; margin-top: 1rem; }
.dm-rq-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.dm-rq-main .dm-h3 { display: flex; align-items: center; gap: 0.6rem; }
.dm-rq-items { display: flex; flex-direction: column; gap: 0.6rem; }
.dm-rq-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.9rem; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r); transition: border-color 0.15s, background-color 0.15s; }
.dm-rq-item.is-on { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
.dm-rq-item.is-off { opacity: 0.55; }
.dm-rq-pick { display: flex; flex: 1; align-items: center; gap: 0.8rem; min-width: 0; cursor: pointer; }
.dm-rq-pick input { position: absolute; opacity: 0; pointer-events: none; }
.dm-rq-box { display: grid; flex: none; place-items: center; width: 1.35rem; height: 1.35rem; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); color: transparent; transition: background-color 0.15s, border-color 0.15s; }
.dm-rq-pick input:checked + .dm-rq-box { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-rq-pick input:focus-visible + .dm-rq-box { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-rq-item .dm-mini-pic { width: 3.25rem; height: 3.25rem; flex: none; }
.dm-rq-name { display: flex; flex-direction: column; min-width: 0; }
.dm-rq-name small { color: var(--dm-muted); }
.dm-rq-item .dm-qty.is-xs { margin-top: 0; background: var(--dm-bg); }
.dm-choices.is-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-rq .dm-field.is-full { margin-top: 1rem; }
.dm-rq-policy { margin: 0; padding: 0.75rem 0.9rem; border-radius: var(--dm-r-sm); background: var(--dm-bg); color: var(--dm-muted); font-size: 0.85rem; white-space: pre-line; }
.dm-rq [data-dm-rq-send]:disabled { opacity: 0.5; cursor: not-allowed; }

.dm-rstat { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--dm-soft); font-size: 0.78rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.dm-rstat.is-requested { background: #fef3c7; color: #92400e; }
.dm-rstat.is-approved { background: #e0f2fe; color: #075985; }
.dm-rstat.is-received { background: var(--dm-primary-soft); color: color-mix(in srgb, var(--dm-primary) 70%, #000); }
.dm-rstat.is-refunded { background: #dcfce7; color: #166534; }
.dm-rstat.is-rejected { background: #fee2e2; color: #991b1b; }
.dm-table td small { display: block; color: var(--dm-muted); font-size: 0.78rem; }

.dm-rt-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0; padding: 1.1rem 1.25rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-soft); }
.dm-rt-next > div { flex: 1; min-width: min(18rem, 100%); }
.dm-rt-next b { font-size: 1.02rem; }
.dm-rt-next p { margin: 0.25rem 0 0; color: var(--dm-muted); }
.dm-rt-pack ol { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0 0; padding-inline-start: 1.2rem; }
.dm-rt-pack address { margin-top: 0.25rem; font-style: normal; font-weight: 600; }
.dm-rt-code { padding: 0.1rem 0.5rem; border-radius: var(--dm-r-sm); background: var(--dm-secondary); color: var(--dm-on-secondary); font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: 0.04em; }
.dm-rt-reply { display: flex; gap: 0.5rem; margin-top: 0.75rem !important; color: var(--dm-text) !important; }
.dm-rt-reply .dm-i { flex: none; color: var(--dm-primary); }
.dm-rt-done { display: flex; gap: 0.75rem; align-items: flex-start; }
.dm-rt-done > .dm-i { flex: none; padding: 0.35rem; border-radius: 50%; background: #16a34a; color: #fff; box-sizing: content-box; }
.dm-rt-box { display: flex; flex-direction: column; gap: 0.6rem; }
.dm-rt-box .dm-muted { margin: 0; font-size: 0.88rem; }
.dm-rt-line { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--dm-line-soft); color: inherit; text-decoration: none; }
.dm-rt-line .dm-i { margin-inline-start: auto; color: var(--dm-muted); }
@media (max-width: 64em) { .dm-rq-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 36em) { .dm-choices.is-two { grid-template-columns: minmax(0, 1fr); } }

/* Shipment: where the parcel is, on the account order page and the tracking page. */
.dm-ship { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; padding: 0.9rem 1rem; border-radius: var(--dm-r); background: var(--dm-soft); }
.dm-ship-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.dm-ship-top > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dm-ship-top small { color: var(--dm-muted); }
.dm-ship-icon { display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-ship-awb { font-family: ui-monospace, monospace; letter-spacing: 0.03em; }
.dm-btn.is-sm { height: 2.25rem; padding: 0 0.9rem; font-size: 0.85rem; }
.dm-ship-when, .dm-ship-cod { margin: 0; font-size: 0.9rem; }
.dm-ship-cod { display: flex; align-items: center; gap: 0.4rem; color: #92400e; }
.dm-ship-log { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0 0 0 1rem; border-inline-start: 2px solid var(--dm-line); list-style: none; font-size: 0.85rem; }
.dm-ship-log li { display: flex; flex-direction: column; }
.dm-ship-log li:first-child b { color: var(--dm-primary); }
.dm-ship-log li.is-bad b { color: #b91c1c; }
.dm-ship-log small { color: var(--dm-muted); font-size: 0.76rem; }
.dm-track-result .dm-ship { margin-top: 1rem; }

/* Product options on the product page, and the choices shown under cart and order lines. */
.dm-pdo { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.dm-pdo-row { display: flex; flex-direction: column; gap: 0.4rem; }
.dm-pdo-label { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; }
.dm-pdo-label em, .dm-pdo-pick legend em { color: var(--dm-primary); font-style: normal; }
.dm-pdo-add { margin-inline-start: auto; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--dm-primary-soft); color: color-mix(in srgb, var(--dm-primary) 75%, #000); font-size: 0.78rem; font-weight: 600; }
.dm-pdo-input { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-text); font: inherit; }
textarea.dm-pdo-input { resize: vertical; }
.dm-pdo-input:focus { outline: 0; border-color: var(--dm-primary); }
.dm-pdo .dm-select { position: relative; display: block; }
.dm-pdo .dm-select select { width: 100%; height: 2.9rem; padding: 0 2.4rem 0 0.85rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-text); font: inherit; }
.dm-pdo .dm-select > .dm-i { top: 50%; transform: translateY(-50%); }
.dm-pdo-check { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r); cursor: pointer; }
.dm-pdo-check:has(input:checked) { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
.dm-pdo-check b { font-weight: 600; }
.dm-pdo-pick { margin: 0; padding: 0; border: 0; }
.dm-pdo-pick legend { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.95rem; }
.dm-pdo-pick legend small { color: var(--dm-muted); font-weight: 400; }
.dm-pdo-chip { position: relative; cursor: pointer; }
.dm-pdo-chip input { position: absolute; opacity: 0; pointer-events: none; }
.dm-pdo-chip span { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.6rem; padding: 0 1rem; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r-btn); font-size: 0.9rem; transition: border-color 0.15s, background-color 0.15s; }
.dm-pdo-chip span small { color: var(--dm-muted); font-size: 0.76rem; }
.dm-pdo-chip:hover span { border-color: color-mix(in srgb, var(--dm-primary) 50%, var(--dm-line)); }
.dm-pdo-chip input:checked + span { border-color: var(--dm-primary); background: var(--dm-primary-soft); font-weight: 600; }
.dm-pdo-chip input:focus-visible + span { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-pdo-help { color: var(--dm-muted); font-size: 0.8rem; }
.dm-pdo-help [data-dm-chars] { float: inline-end; font-variant-numeric: tabular-nums; }
.dm-pdo-err { display: none; color: #b91c1c; font-size: 0.82rem; font-weight: 600; }
.dm-pdo-row.is-bad .dm-pdo-err { display: block; }
.dm-pdo-row.is-bad .dm-pdo-input, .dm-pdo-row.is-bad .dm-pdo-check, .dm-pdo-row.is-bad select, .dm-pdo-row.is-bad .dm-pdo-chip span { border-color: #dc2626; }
.dm-pdo-sum { margin: -0.25rem 0 0; color: var(--dm-muted); font-size: 0.85rem; }
.dm-pdo-row[hidden] { display: none; }
.dm-pdo-row.is-in { animation: dm-pdo-in 0.32s var(--dm-ease) both; }
@keyframes dm-pdo-in { from { opacity: 0; transform: translateY(-6px); } }
/* Date: a field that opens a month calendar. */
.dm-cal { position: relative; }
.dm-cal-field { display: flex; align-items: center; gap: 0.6rem; width: 100%; height: 2.9rem; padding: 0 0.85rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-muted); font: inherit; text-align: start; cursor: pointer; transition: border-color 0.15s; }
.dm-cal-field > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-cal-field > .dm-i:first-child { color: var(--dm-primary); }
.dm-cal-field > .dm-i:last-child { transition: transform 0.2s var(--dm-ease); }
.dm-cal.is-set .dm-cal-field { color: var(--dm-text); font-weight: 600; }
.dm-cal-field:hover, .dm-cal.is-open .dm-cal-field { border-color: var(--dm-primary); }
.dm-cal.is-open .dm-cal-field > .dm-i:last-child { transform: rotate(180deg); }
.dm-cal-pop { position: absolute; z-index: 30; inset-inline-start: 0; top: calc(100% + 0.4rem); width: min(20.5rem, calc(100vw - 2rem)); padding: 0.85rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.35); animation: dm-cal-in 0.2s var(--dm-ease); }
@keyframes dm-cal-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.dm-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; }
.dm-cal-head b, .dm-cal-title { font-family: var(--dm-font-head); font-size: 0.92rem; }
.dm-cal-title { padding: 0.3rem 0.7rem; border: 0; border-radius: 999px; background: none; color: var(--dm-text); font-weight: 700; cursor: pointer; }
.dm-cal-title:hover, .dm-cal-title:focus-visible { background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-cal-grid[data-level="years"], .dm-cal-grid[data-level="months"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; animation: dm-cal-in 0.2s var(--dm-ease); }
.dm-cal-cell { height: 2.6rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: none; color: var(--dm-text); font: inherit; font-size: 0.86rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.dm-cal-cell:not(:disabled):hover { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
.dm-cal-cell:disabled { opacity: 0.3; cursor: default; }
.dm-cal-cell.is-on { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary, #fff); font-weight: 700; }
.dm-cal-cell:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 1px; }
.dm-cal-nav { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--dm-line); border-radius: 50%; background: none; color: var(--dm-text); cursor: pointer; }
.dm-cal-nav:disabled { opacity: 0.3; cursor: default; }
.dm-cal-nav:not(:disabled):hover { border-color: var(--dm-primary); color: var(--dm-primary); }
[dir="rtl"] .dm-cal-nav .dm-i { transform: scaleX(-1); }
.dm-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.2rem; }
.dm-cal-wd { padding-bottom: 0.25rem; color: var(--dm-muted); font-size: 0.72rem; font-weight: 600; text-align: center; }
.dm-cal-day { position: relative; aspect-ratio: 1; border: 0; border-radius: var(--dm-r-btn); background: none; color: var(--dm-text); font: inherit; font-size: 0.86rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.dm-cal-day:not(:disabled):hover { background: var(--dm-primary-soft); }
.dm-cal-day:disabled { color: color-mix(in srgb, var(--dm-text) 28%, var(--dm-bg)); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--dm-text) 20%, transparent); cursor: default; }
.dm-cal-day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--dm-line); }
.dm-cal-day.is-rush::after, .dm-cal-note i { content: ""; position: absolute; bottom: 0.3rem; left: 50%; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--dm-primary); transform: translateX(-50%); }
.dm-cal-day.is-on { background: var(--dm-primary); color: var(--dm-on-primary, #fff); font-weight: 700; animation: dm-cal-pick 0.28s var(--dm-ease); }
.dm-cal-day.is-on::after { background: currentColor; }
@keyframes dm-cal-pick { 50% { transform: scale(1.12); } }
.dm-cal-day:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 1px; }
.dm-cal-note { display: flex; align-items: center; gap: 0.45rem; margin: 0.6rem 0 0; color: var(--dm-muted); font-size: 0.76rem; }
.dm-cal-note i { position: static; flex: none; transform: none; }
/* Time slots: buttons; full ones are crossed out. */
.dm-pdo-chip.is-slot span .dm-i { color: var(--dm-muted); }
.dm-pdo-chip.is-slot input:checked + span .dm-i { color: var(--dm-primary); }
.dm-slot-full { display: none; }
.dm-pdo-chip.is-full { cursor: not-allowed; }
.dm-pdo-chip.is-full span { opacity: 0.55; text-decoration: line-through; }
.dm-pdo-chip.is-full .dm-slot-full { display: inline; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--dm-soft); text-decoration: none; }
/* File upload: a drop box, then the file with a progress bar. */
.dm-up-drop { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.1rem 1rem; border: 1.5px dashed color-mix(in srgb, var(--dm-text) 25%, transparent); border-radius: var(--dm-r); background: var(--dm-soft); text-align: center; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.dm-up-drop:hover, .dm-up-drop.is-over, .dm-up-drop:focus-within { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
.dm-up-drop.is-over .dm-up-icon { transform: translateY(-3px); }
.dm-up-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dm-up-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--dm-bg); color: var(--dm-primary); transition: transform 0.2s var(--dm-ease); }
.dm-up-text { font-size: 0.9rem; }
.dm-up-text b { color: var(--dm-primary); }
.dm-up-text span, .dm-up-drop small { color: var(--dm-muted); }
.dm-up-drop small { font-size: 0.76rem; }
.dm-up-file { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); animation: dm-pdo-in 0.25s var(--dm-ease); }
.dm-up-thumb { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; overflow: hidden; border-radius: var(--dm-r-btn); background: var(--dm-soft); color: var(--dm-muted); }
.dm-up-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dm-up-name { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
.dm-up-name b { overflow: hidden; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.dm-up-name small { color: var(--dm-muted); font-size: 0.76rem; }
.dm-up.is-done .dm-up-name small { color: #15803d; font-weight: 600; }
.dm-up-bar { height: 4px; overflow: hidden; border-radius: 999px; background: var(--dm-soft); }
.dm-up-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--dm-primary); transition: width 0.2s linear; }
.dm-up.is-done .dm-up-bar { display: none; }
.dm-up-x { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: none; color: var(--dm-muted); cursor: pointer; }
.dm-up-x:hover { background: var(--dm-soft); color: var(--dm-text); }
.dm-pdo-row.is-bad .dm-up-drop, .dm-pdo-row.is-bad .dm-cal-field { border-color: #dc2626; }
/* Number: − [ 3 m ] + */
.dm-num { display: flex; align-items: center; width: fit-content; max-width: 100%; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); }
.dm-num:focus-within { border-color: var(--dm-primary); }
.dm-num-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; background: none; color: var(--dm-text); cursor: pointer; }
.dm-num-btn:disabled { opacity: 0.3; cursor: default; }
.dm-num-btn:not(:disabled):hover { color: var(--dm-primary); }
.dm-num .dm-num-input { width: 4.5rem; height: 2.75rem; padding: 0; border: 0; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.dm-num-unit { padding-inline-end: 0.4rem; color: var(--dm-muted); font-size: 0.85rem; }
.dm-pdo-row.is-bad .dm-num { border-color: #dc2626; }
.dm-pdo-row.is-bad .dm-num .dm-num-input { border: 0; }
@media (prefers-reduced-motion: reduce) { .dm-pdo-row.is-in, .dm-cal-pop, .dm-cal-day.is-on, .dm-up-file { animation: none; } }
.dm-line-opt { display: block; color: var(--dm-muted); font-size: 0.8rem; }
.dm-line-opt em { font-style: normal; color: var(--dm-text); }
.dm-pdo-add { font-style: normal; }

/* Digital products: Account › Downloads and the thank-you page. */
.dm-dls { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.dm-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-dl.is-off { opacity: 0.6; }
.dm-dl-icon { display: grid; flex: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--dm-r-sm); background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-dl-text { display: flex; flex: 1; flex-direction: column; min-width: min(14rem, 100%); }
.dm-dl-text b { overflow-wrap: anywhere; }
.dm-dl-text small { color: var(--dm-muted); font-size: 0.82rem; }
.dm-dls-note { margin-top: 1rem; font-size: 0.85rem; }
.dm-thanks-dl { margin: 1.25rem 0; padding: 1.1rem 1.25rem; border: 1.5px solid var(--dm-primary); border-radius: var(--dm-r); background: var(--dm-primary-soft); }
.dm-thanks-dl h2 { display: flex; align-items: center; gap: 0.5rem; }
.dm-thanks-dl ul { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; padding: 0; list-style: none; }
.dm-thanks-dl li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; overflow-wrap: anywhere; }
.dm-thanks-dl .dm-muted { margin: 0; font-size: 0.85rem; }

/* Spam protection's small sum, when switched on. */
.fp-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.25rem 0; font-size: 0.88rem; }
.fp-sum label { color: var(--dm-muted); font-weight: 600; }
.fp-sum input { width: 4.5rem; height: 2.5rem; padding: 0 0.7rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-text); font: inherit; text-align: center; }
.fp-sum input:focus { outline: 0; border-color: var(--dm-primary); }
.dm-foot-credit { font-size: 0.82em; opacity: 0.7; white-space: nowrap; }
.dm-foot-credit::before { content: '· '; }
@media (max-width: 640px) { .dm-foot-credit { display: block; margin-top: 0.3rem; } .dm-foot-credit::before { content: none; } }
.dm-foot-credit a { color: inherit; text-decoration: none; }
.dm-foot-credit a:hover, .dm-foot-credit a:focus-visible { opacity: 1; color: var(--dm-footer-hover, var(--dm-primary)); text-decoration: underline; text-underline-offset: 2px; }
.dm-foot-cookie { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* "Continue with Google / Facebook" on the sign-in pages. */
.dm-sso { display: flex; flex-direction: column; gap: 0.6rem; }
.dm-sso-btn { display: flex; align-items: center; justify-content: center; gap: 0.65rem; min-height: 3rem; padding: 0 1rem; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-text); font-weight: 600; text-decoration: none; transition: border-color 0.15s, background-color 0.15s; }
.dm-sso-btn:hover { border-color: var(--dm-text); }
.dm-sso-btn:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-sso-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0; color: var(--dm-muted); font-size: 0.85rem; }
.dm-sso-or::before, .dm-sso-or::after { content: ""; flex: 1; height: 1px; background: var(--dm-line); }

/* ── FAQ page (FAQ app): search, group list, questions with “Was this helpful?” ── */
.dm-faqpage { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.dm-faq-top { display: flex; flex-direction: column; gap: 0.9rem; max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.dm-faq-intro { color: var(--dm-muted); font-size: 1.02rem; }
.dm-faq-search { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.35rem 0.35rem 1rem; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); transition: border-color 0.2s; }
.dm-faq-search:focus-within { border-color: var(--dm-primary); }
.dm-faq-search > .dm-i { flex: none; color: var(--dm-muted); }
.dm-faq-search input { flex: 1; min-width: 0; height: 2.6rem; border: 0; outline: 0; background: none; color: inherit; font: inherit; }
.dm-faq-search input::-webkit-search-cancel-button { cursor: pointer; }
.dm-faq-found { color: var(--dm-muted); font-size: 0.88rem; }
.dm-faq-body { display: grid; gap: 2.5rem; }
@media (min-width: 62em) { .dm-faq-body:has(.dm-faq-nav) { grid-template-columns: 15rem minmax(0, 1fr); gap: 3.5rem; } }
.dm-faq-nav { display: flex; flex-direction: column; gap: 0.15rem; align-self: start; position: sticky; top: 1.5rem; }
.dm-faq-nav a { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.85rem; border-inline-start: 2px solid var(--dm-line); color: var(--dm-muted); font-weight: 500; transition: color 0.2s, border-color 0.2s; }
.dm-faq-nav a:hover { color: var(--dm-text); }
.dm-faq-nav a.is-on { border-color: var(--dm-primary); color: var(--dm-text); font-weight: 600; }
.dm-faq-nav small { color: var(--dm-muted); font-weight: 500; }
.dm-faq-nav a[hidden] { display: none; }
@media (max-width: 61.99em) {
    .dm-faq-nav { position: static; flex-direction: row; gap: 0.4rem; overflow-x: auto; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; }
    .dm-faq-nav a { flex: none; padding: 0.45rem 0.9rem; border: 1px solid var(--dm-line); border-radius: 99px; }
    .dm-faq-nav a.is-on { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
}
.dm-faq-main { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); min-width: 0; }
.dm-faq-group { scroll-margin-top: 1.5rem; }
.dm-faq-group[hidden] { display: none; }
.dm-faq-desc { margin: -0.35rem 0 1.1rem; color: var(--dm-muted); font-size: 0.92rem; }
.dm-faqpage .dm-faqs { max-width: none; }
.dm-faqs details { scroll-margin-top: 1.5rem; transition: border-color 0.2s; }
.dm-faqs details[open] { border-color: color-mix(in srgb, var(--dm-text) 22%, transparent); }
.dm-faqs details[hidden] { display: none; }
.dm-faq-a { padding-bottom: 0.15rem; }
.dm-faq-a a { color: var(--dm-primary); text-decoration: underline; }
.dm-faq-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 1.1rem 1rem; padding-top: 0.85rem; border-top: 1px solid var(--dm-line-soft); color: var(--dm-muted); font-size: 0.85rem; }
.dm-faq-vote > span { margin-inline-end: 0.25rem; }
.dm-faq-vbtn { display: inline-flex; align-items: center; gap: 0.35rem; height: 2rem; padding: 0 0.8rem; border: 1px solid var(--dm-line); border-radius: 99px; background: none; color: var(--dm-text); font: inherit; font-weight: 500; cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.dm-faq-vbtn:hover { border-color: var(--dm-text); }
.dm-faq-vbtn[aria-pressed='true'] { border-color: var(--dm-primary); background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-faq-vbtn:disabled { opacity: 0.6; cursor: default; }
.dm-faq-thanks { color: var(--dm-text); }
.dm-faq-none[hidden] { display: none; }
.dm-faq-none a { color: var(--dm-primary); text-decoration: underline; }
.dm-faq-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.5rem clamp(1.25rem, 3vw, 2rem); border-radius: var(--dm-r); background: var(--dm-soft); }
.dm-faq-ask .dm-h3 { margin: 0 0 0.25rem; padding: 0; border: 0; }
.dm-faq-ask p { color: var(--dm-muted); font-size: 0.92rem; }
.dm-faq-more { margin-top: 1.5rem; }
mark.dm-faq-hit { padding: 0 0.1em; border-radius: 3px; background: var(--dm-primary-soft); color: inherit; }

/* ── Galleries (Galleries app): album cards, photo grids and the full-screen viewer ── */
.dm-galpage { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.dm-galpage-head { display: flex; flex-direction: column; gap: 0.5rem; max-width: 46rem; margin-bottom: 1.75rem; }
.dm-galpage-intro { max-width: 46rem; margin-bottom: 1.75rem; color: var(--dm-muted); font-size: 1.02rem; }
.dm-galpage-head .dm-galpage-intro { margin: 0; }
.dm-galpage-more { margin-top: clamp(3rem, 7vw, 4.5rem); }
.dm-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.dm-album { display: flex; flex-direction: column; gap: 0.8rem; }
.dm-album-pic { display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--dm-r); background: var(--dm-img-bg); color: var(--dm-muted); }
.dm-album-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--dm-ease); }
.dm-album:hover .dm-album-pic img { transform: scale(1.04); }
.dm-album-text { display: flex; flex-direction: column; gap: 0.1rem; }
.dm-album-text b { font-family: var(--dm-font-head); font-size: 1.02rem; font-weight: 600; transition: color 0.2s; }
.dm-album:hover .dm-album-text b { color: var(--dm-primary); }
.dm-album-text small { color: var(--dm-muted); font-size: 0.86rem; }
.dm-photos.is-masonry { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.dm-photos.is-masonry::after { content: ''; flex: 999 1 0; }
.dm-photos.is-masonry .dm-photo { flex: var(--dm-r-w) 1 calc(var(--dm-r-w) * 18rem); aspect-ratio: var(--dm-ratio); max-width: 100%; }
.dm-photos.is-masonry .dm-photo img { height: 100%; object-fit: cover; }
@media (max-width: 40em) { .dm-photos.is-masonry .dm-photo { flex-basis: calc(var(--dm-r-w) * 9rem); } }
.dm-photos.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 13rem), 1fr)); gap: 0.75rem; }
.dm-photos.is-grid .dm-photo { aspect-ratio: 1; }
.dm-photos.is-grid .dm-photo img { height: 100%; object-fit: cover; }
.dm-photo { position: relative; display: block; overflow: hidden; border-radius: var(--dm-r); background: var(--dm-img-bg); cursor: zoom-in; }
.dm-photo img { display: block; width: 100%; height: auto; transition: transform 0.6s var(--dm-ease), opacity 0.3s; }
.dm-photo:hover img { transform: scale(1.03); }
.dm-photo:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 3px; }
.dm-photo-cap { position: absolute; inset: auto 0 0; padding: 1.6rem 0.9rem 0.7rem; background: linear-gradient(transparent, rgb(0 0 0 / 0.6)); color: #fff; font-size: 0.85rem; opacity: 0; transition: opacity 0.25s; }
.dm-photo:hover .dm-photo-cap, .dm-photo:focus-visible .dm-photo-cap { opacity: 1; }
@media (hover: none) { .dm-photo-cap { opacity: 1; } }
.dm-lb { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); align-items: center; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: rgb(10 10 10 / 0.94); color: #fff; animation: dm-fade 0.2s; touch-action: pan-y pinch-zoom; }
.dm-lb-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.75rem 0.6rem 1.25rem; font-size: 0.88rem; opacity: 0.85; }
.dm-lb-btn { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 99px; background: none; color: #fff; cursor: pointer; transition: background-color 0.2s; }
.dm-lb-btn:hover { background: rgb(255 255 255 / 0.12); }
.dm-lb-btn:focus-visible { outline: 2px solid var(--dm-primary); }
.dm-lb-btn:disabled { opacity: 0.25; cursor: default; background: none; }
.dm-lb-nav { margin-inline: 0.5rem; }
.dm-lb-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; height: 100%; min-height: 0; margin: 0; padding-bottom: 1.25rem; }
.dm-lb-stage img { max-width: 100%; max-height: calc(100% - 2.5rem); min-height: 0; object-fit: contain; border-radius: calc(var(--dm-r) * 0.5); transition: opacity 0.2s; }
.dm-lb-stage img.is-loading { opacity: 0.3; }
.dm-lb-stage figcaption { max-width: 60ch; min-height: 1.4em; color: rgb(255 255 255 / 0.85); font-size: 0.92rem; text-align: center; }
@media (max-width: 40em) {
    .dm-lb { grid-template-columns: minmax(0, 1fr); }
    .dm-lb-stage { grid-column: 1; grid-row: 2; padding: 0 0.5rem 4.75rem; }
    .dm-lb-nav { position: absolute; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); margin: 0; background: rgb(255 255 255 / 0.1); }
    .dm-lb-nav.is-prev { inset-inline-start: 1.25rem; }
    .dm-lb-nav.is-next { inset-inline-end: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .dm-lb { animation: none; } .dm-photo img, .dm-album-pic img { transition: none; } }
[dir="rtl"] .dm-lb-nav .dm-i { transform: scaleX(-1); }
/* Phone numbers, prices and codes keep their own order in right-to-left pages. */
.dm-hotline b, .dm-gc-code { unicode-bidi: isolate; direction: ltr; }
[dir="rtl"] .dm-hotline b { text-align: end; }
[dir="rtl"] .dm-notes button .dm-i { transform: scaleX(-1); }

/* Recent sales popup: a small card bottom-left (bottom-right in right-to-left), above the back-to-top button's row. */
.dm-popup { position: fixed; inset-inline-start: max(1rem, env(safe-area-inset-left, 0px)); inset-block-end: max(1rem, env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 0.75rem; width: min(22rem, calc(100vw - 2rem)); padding: 0.65rem 2.2rem 0.65rem 0.65rem; border: 1px solid var(--dm-line, #e5e5e5); border-radius: var(--dm-r, 10px); background: var(--dm-bg, #fff); color: var(--dm-text, #111); box-shadow: 0 12px 32px rgb(0 0 0 / 0.14); animation: dm-popup-in 0.35s ease-out; }
[dir='rtl'] .dm-popup { padding: 0.65rem 0.65rem 0.65rem 2.2rem; }
.dm-popup.is-out { animation: dm-popup-out 0.3s ease-in forwards; }
.dm-popup-pic { position: relative; display: grid; flex: none; place-items: center; color: var(--dm-muted, #6b6b6b); width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: calc(var(--dm-r, 10px) * 0.7); background: var(--dm-soft, #f4f4f4); }
.dm-popup-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dm-popup-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; font-size: 0.82rem; }
.dm-popup-text a { overflow: hidden; color: inherit; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dm-popup-text a:hover { color: var(--dm-primary); }
.dm-popup-text small { color: var(--dm-muted, #6b6b6b); font-size: 0.74rem; }
.dm-popup-ago { display: inline-flex; align-items: center; gap: 0.25rem; }
.dm-popup-ago svg { color: #16a34a; }
.dm-popup-x { position: absolute; inset-block-start: 0.4rem; inset-inline-end: 0.4rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--dm-muted, #6b6b6b); }
.dm-popup-x:hover { background: var(--dm-soft, #f4f4f4); color: inherit; }
@keyframes dm-popup-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes dm-popup-out { to { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .dm-popup, .dm-popup.is-out { animation: none; } }

/* ── License codes ── */
.dm-keys-h { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem; }
.dm-keys + .dm-keys-h, .dm-keys + .dm-empty { margin-top: 1.75rem; }
.dm-keys { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.dm-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.85rem 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-key-what { display: flex; flex: 1 1 12rem; flex-direction: column; min-width: 0; }
.dm-key-what small { color: var(--dm-muted); font-size: 0.8rem; }
.dm-key-code { padding: 0.45rem 0.75rem; border: 1px dashed color-mix(in srgb, var(--dm-primary) 45%, var(--dm-line)); border-radius: var(--dm-r-btn); background: var(--dm-primary-soft); font: 600 0.95rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; }
.dm-key .dm-btn.is-copied { border-color: #16a34a; color: #15803d; }
.dm-thanks-dl .dm-keys { margin-block: 0.75rem; }
.dm-ord-keys .dm-h3 { display: flex; align-items: center; gap: 0.5rem; }

/* ── Ads (the Ads app) ── */
.fp-ad { position: relative; overflow: hidden; border-radius: var(--dm-r); background: var(--dm-img-bg); line-height: 0; }
.fp-ad a { display: block; }
.fp-ad img { width: 100%; height: auto; transition: transform 0.6s var(--dm-ease); }
.fp-ad-lottie { display: block; width: 100%; }
@media (max-width: 640px) { .fp-ad .fp-ad-wide { display: none !important; } }
@media (min-width: 641px) { .fp-ad .fp-ad-phone { display: none !important; } }
.fp-ad a:hover img { transform: scale(1.015); }
.fp-ad a:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: -2px; }
.fp-ad-tag { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; padding: 0.15rem 0.45rem; border-radius: 4px; background: rgb(0 0 0 / 0.55); color: #fff; font-size: 0.68rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em; pointer-events: none; }
.dm-ad-row { padding-block: 1.25rem; }
.dm-results > .fp-ad { margin-bottom: 1.25rem; }
.fp-ad-sec { padding-block: 1rem; }
@media (prefers-reduced-motion: reduce) { .fp-ad img { transition: none; } .fp-ad a:hover img { transform: none; } }

/* Account › Privacy */
.dm-btn.is-danger { border-color: #dc2626; background: #dc2626; color: #fff; }
.dm-btn.is-danger:hover { border-color: #b91c1c; background: #b91c1c; color: #fff; }
.dm-flash.is-warn { align-items: center; background: color-mix(in srgb, #f59e0b 12%, var(--dm-bg)); color: color-mix(in srgb, #b45309 85%, var(--dm-text)); }
.dm-flash.is-warn .dm-link { margin-inline-start: 0.35rem; font-weight: 600; }
.dm-priv { display: flex; flex-direction: column; gap: 1.25rem; }
.dm-priv-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.1rem; align-items: start; }
.dm-priv-card > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; min-width: 0; }
.dm-priv-card .dm-h3, .dm-priv-card p { margin: 0; }
.dm-priv-ic { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: color-mix(in srgb, var(--dm-primary) 12%, var(--dm-bg)); color: var(--dm-primary); }
.dm-priv-ic.is-big { width: 3.6rem; height: 3.6rem; }
.dm-priv-card.is-danger .dm-priv-ic { background: color-mix(in srgb, #dc2626 10%, var(--dm-bg)); color: #dc2626; }
.dm-priv-fine { font-size: 0.8rem; }
.dm-priv-state { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: var(--dm-r-sm, 8px); background: var(--dm-soft); }
.dm-priv-state > span { display: flex; flex-direction: column; gap: 0.15rem; color: var(--dm-muted); font-size: 0.9rem; }
.dm-priv-state b { color: var(--dm-text); }
.dm-priv-state > .dm-i { flex: none; margin-top: 0.15rem; color: var(--dm-primary); }
.dm-priv-list { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.dm-priv-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; }
.dm-priv-list li > .dm-i { flex: none; margin-top: 0.15rem; color: #b45309; }
.dm-priv-list.is-block li { padding: 0.7rem 0.9rem; border-radius: var(--dm-r-sm, 8px); background: color-mix(in srgb, #f59e0b 10%, var(--dm-bg)); }
.dm-priv-go { width: 100%; }
.dm-priv-go > summary { display: inline-flex; list-style: none; cursor: pointer; }
.dm-priv-go > summary::-webkit-details-marker { display: none; }
.dm-priv-go[open] > summary { display: none; }
.dm-priv-go form { margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--dm-line); }
.dm-priv-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dm-priv-confirm { display: grid; place-items: center; padding-block: 3rem; }
.dm-priv-confirm > .dm-co-box { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; max-width: 34rem; text-align: center; }
.dm-priv-confirm .dm-h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.dm-priv-confirm p { margin: 0; }
.dm-priv-confirm .dm-priv-acts { justify-content: center; margin-top: 0.5rem; }

/* Currencies: the switcher, and the rupee notes */
.dm-cur ul { min-width: 15rem; }
.dm-topbar nav .dm-cur ul a span { display: flex; gap: 0.45rem; }
.dm-topbar nav .dm-cur ul a b { min-width: 2.4rem; font-weight: 700; }
.dm-cur-fine { padding: 0.45rem 0.6rem 0.25rem; border-top: 1px solid var(--dm-line); color: var(--dm-muted); font-size: 0.75rem; line-height: 1.4; }
.dm-cur-note { display: block; margin-top: -0.35rem; color: var(--dm-muted); font-size: 0.82rem; }
.dm-cur-about { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0.5rem 0 0; padding: 0.6rem 0.75rem; border-radius: var(--dm-r-sm, 8px); background: var(--dm-soft); color: var(--dm-muted); font-size: 0.84rem; }
.dm-cur-about .dm-i { flex: none; margin-top: 0.15rem; color: var(--dm-primary); }

/* Shared wishlists and recently viewed */
.dm-wshare { margin-bottom: 1.25rem; }
.dm-wshare-off { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1.1rem; border: 1px dashed var(--dm-line); border-radius: var(--dm-r); }
.dm-wshare-off > span { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--dm-muted); font-size: 0.92rem; }
.dm-wshare-off > span .dm-i { color: var(--dm-primary); }
.dm-wshare-on { display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--dm-primary) 40%, var(--dm-line)); border-radius: var(--dm-r); background: color-mix(in srgb, var(--dm-primary) 5%, var(--dm-bg)); }
.dm-wshare-on > b { display: inline-flex; align-items: center; gap: 0.45rem; }
.dm-wshare-link { display: flex; gap: 0.5rem; }
.dm-wshare-link input { flex: 1; min-width: 0; padding: 0.55rem 0.75rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm, 8px); background: var(--dm-bg); color: var(--dm-text); font: inherit; font-size: 0.88rem; }
.dm-wshare-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 0.86rem; }
.dm-wshare-acts form { margin-inline-start: auto; }
.dm-wshare-wa { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.dm-wshare-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; padding: 0.9rem 1.1rem; border-radius: var(--dm-r); background: var(--dm-soft); }
.dm-wshare-head p { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0; font-size: 0.92rem; }
.dm-wshare-head p .dm-i { flex: none; margin-top: 0.15rem; color: var(--dm-primary); }
.dm-recent-tools { display: flex; align-items: center; gap: 1rem; }
.dm-recent .dm-link { font-size: 0.88rem; }
.dm-wshare-wa { white-space: nowrap; }
button.dm-link { padding: 0; border: 0; background: none; color: var(--dm-primary); font: inherit; font-weight: 600; cursor: pointer; }
button.dm-link:hover { text-decoration: underline; }

/* Back-in-stock alert */
.dm-notify { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.9rem; }
/* Sold out: an outlined "Notify Me When Available" button in the brand colour; guests get the email box under it. */
.dm-notify-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; max-width: 30rem; min-height: 3.25rem; padding: 0.7rem 1.5rem; border: 2px solid var(--dm-primary); border-radius: var(--dm-r-btn); background: transparent; color: var(--dm-primary); font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.dm-notify-btn:hover, .dm-notify-btn:focus-visible { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-notify-btn:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 3px; }
.dm-notify-btn[hidden], .dm-notify-box[hidden] { display: none; }
.dm-notify-btn .dm-i { transform-origin: 50% 10%; }
.dm-notify-btn:hover .dm-i { animation: dm-bell 0.9s ease-in-out; }
@keyframes dm-bell { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .dm-notify-btn:hover .dm-i { animation: none; } }
.dm-notify-box { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; border: 1px dashed color-mix(in srgb, var(--dm-primary) 45%, var(--dm-line)); border-radius: var(--dm-r); }
.dm-notify[hidden] { display: none; }
.dm-notify p { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; font-size: 0.9rem; }
.dm-notify p .dm-i { flex: none; margin-top: 0.2rem; color: var(--dm-primary); }
.dm-notify-row { display: flex; gap: 0.5rem; }
.dm-notify-row[hidden] { display: none; }
.dm-notify-row input { flex: 1; min-width: 0; padding: 0.6rem 0.8rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm, 8px); background: var(--dm-bg); color: var(--dm-text); font: inherit; }
.dm-notify-msg { color: #15803d; font-size: 0.88rem; font-weight: 600; }
.dm-notify-msg.is-bad { color: #b91c1c; }

/* Payment receipt (bank transfer and UPI) */
.dm-receipt { display: grid; gap: 0.85rem; }
.dm-thanks .dm-receipt { margin-block: 1rem; }
.dm-receipt .dm-h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.dm-receipt-st { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0; padding: 0.7rem 0.85rem; border-radius: var(--dm-r); background: var(--dm-soft); font-size: 0.88rem; line-height: 1.5; }
.dm-receipt-st svg { flex: none; margin-top: 0.15rem; }
.dm-receipt-st small { display: block; color: var(--dm-muted); }
.dm-receipt-st.is-wait svg { color: var(--dm-primary); }
.dm-receipt-st.is-ok { background: color-mix(in srgb, #16a34a 9%, transparent); }
.dm-receipt-st.is-ok svg { color: #16a34a; }
.dm-receipt-st.is-bad { background: color-mix(in srgb, #dc2626 8%, transparent); }
.dm-receipt-st.is-bad svg { color: #dc2626; }
.dm-receipt-form { display: grid; gap: 0.8rem; }
.dm-receipt-form .dm-muted { margin: 0; }
.dm-receipt-file input[type=file] { padding: 0.55rem; border: 1.5px dashed var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); font: inherit; font-size: 0.85rem; cursor: pointer; }
.dm-receipt-file input[type=file]::file-selector-button { margin-inline-end: 0.75rem; padding: 0.45rem 0.9rem; border: 0; border-radius: calc(var(--dm-r) - 2px); background: var(--dm-text); color: var(--dm-bg); font: inherit; font-weight: 600; cursor: pointer; }
.dm-receipt-hint { color: var(--dm-muted); font-size: 0.78rem; }
.dm-receipt-form .dm-btn { justify-self: start; }
.dm-cart-min { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0.65rem 0.8rem; border-radius: var(--dm-r); background: var(--dm-primary-soft); color: var(--dm-text); font-size: 0.86rem; font-weight: 500; }
.dm-cart-min svg { flex: none; margin-top: 0.1rem; color: var(--dm-primary); }
.dm-track .dm-receipt { margin-top: 1.25rem; text-align: start; }

/* ── App on phones (Theme options › App on phones) ── */
/* The phone header in one row: the logo's mark, then wishlist and cart. Account and the menu move to the tab bar. */
@media (max-width: 48em) {
    .dm-header .dm-mainbar .dm-logo-name { display: none; }
    .dm-header .dm-mainbar .dm-logo img { max-width: 42vw; }
    .dm-mainbar .dm-actions { margin-inline-start: auto; }
    .dm-mainbar .dm-search-btn + .dm-actions { margin-inline-start: 0.25rem; }
    .dm-actions a[href$="/compare"] { display: none; }
    /* The tab bar has Menu, Account and Search, so the header doesn't repeat them (search icon: Chandru, 2026-11-07). */
    .has-tabs .dm-mainbar .dm-burger, .has-tabs .dm-mainbar .dm-account, .has-tabs .dm-mainbar .dm-search-btn { display: none; }
    .has-tabs .dm-mainbar .dm-search-btn + .dm-actions { margin-inline-start: auto; }
    .has-tabs .dm-mainbar .dm-logo { margin-inline-start: 0; }
    html, body { overflow-x: clip; }
    body { -webkit-tap-highlight-color: transparent; }
    a, button, input, select, label { touch-action: manipulation; }
}
@media (display-mode: standalone) {
    /* Full screen: clear of the notch, no rubber-band bounce at the top. */
    html, body { overscroll-behavior-y: none; }
    .dm-header { padding-top: env(safe-area-inset-top, 0px); background: var(--dm-top-bg); }
    .dm-body { user-select: none; -webkit-user-select: none; }
    .dm-body :is(p, h1, h2, h3, li, td, input, textarea, [contenteditable]) { user-select: text; -webkit-user-select: text; }
}

/* The tab bar */
.dm-appbar { display: none; }
@media (max-width: 48em) {
    .dm-appbar { position: fixed; inset: auto 0 0; z-index: 70; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; padding: 0.35rem max(0.5rem, env(safe-area-inset-left, 0px)) calc(0.35rem + env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-right, 0px));
        border-top: 1px solid var(--dm-line); background: color-mix(in srgb, var(--dm-bg) 97%, transparent); transition: transform 0.3s var(--dm-ease); } /* no backdrop blur while the page scrolls under it (see the stuck menu bar) */
    .dm-appbar.is-away { transform: translateY(110%); }
    .dm-appbar a, .dm-appbar button { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.3rem 0 0.2rem; border: 0; border-radius: var(--dm-r-sm); background: none; color: var(--dm-muted); font: inherit; font-size: 0.68rem; font-weight: 500; }
    .dm-appbar .is-on { color: var(--dm-text); font-weight: 700; }
    .dm-appbar .is-on .dm-i { color: var(--dm-primary); }
    .dm-appbar :is(a, button):active { transform: scale(0.92); transition: transform 0.1s; }
    .has-tabs { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
    .has-tabs .dm-top-btn { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
    .has-tabs .dm-toast { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
    .has-tabs .dm-popup { inset-block-end: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
}

/* "Add to home screen" */
.dm-install { position: fixed; inset: auto 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 0.75rem; max-width: 30rem; margin-inline: auto; padding: 0.75rem 0.75rem 0.75rem 0.85rem; border-radius: var(--dm-r); background: var(--dm-bg); color: var(--dm-text); box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.35); animation: dm-rise 0.45s var(--dm-ease) both; }
.has-tabs .dm-install { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
.dm-install img { flex: none; width: 3rem; height: 3rem; border-radius: 0.8rem; }
.dm-install-text { flex: 1; min-width: 0; }
.dm-install-text b { display: block; font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 0.9rem; }
.dm-install-text p { margin: 0.15rem 0 0; color: var(--dm-muted); font-size: 0.78rem; line-height: 1.35; }
.dm-install .dm-btn { flex: none; height: 2.4rem; padding: 0 1rem; }
.dm-install-share { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-inline: 0.15rem; border: 1.5px solid currentColor; border-radius: 4px; vertical-align: -0.3rem; }

/* Swipe for back and forward: an arrow follows the finger from the edge */
.dm-swipe { position: fixed; top: 50%; z-index: 95; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; border-radius: 50%; background: var(--dm-btn); color: var(--dm-on-btn); box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.45); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.dm-swipe.is-back { inset-inline-start: 0.5rem; }
.dm-swipe.is-fwd { inset-inline-end: 0.5rem; }
.dm-swipe.is-ready { background: var(--dm-primary); color: var(--dm-on-primary); }

/* Connection notices and pull to refresh */
.dm-net { position: fixed; inset: env(safe-area-inset-top, 0px) 0 auto; z-index: 96; padding: 0.45rem 1rem; background: var(--dm-btn); color: var(--dm-on-btn); font-size: 0.8rem; font-weight: 500; text-align: center; transform: translateY(-100%); transition: transform 0.3s var(--dm-ease); }
.dm-net.is-on { transform: none; }
.dm-net.is-good { background: #15803d; color: #fff; }
.dm-pull { position: fixed; inset: calc(env(safe-area-inset-top, 0px) + 0.5rem) 0 auto; z-index: 96; display: flex; justify-content: center; pointer-events: none; }
.dm-pull span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--dm-bg); color: var(--dm-text); box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.3); font-size: 0.78rem; font-weight: 600; }
.dm-pull .dm-i { transition: transform 0.2s; }
.dm-pull.is-ready .dm-i { transform: rotate(180deg); color: var(--dm-primary); }
.dm-pull.is-busy .dm-i { animation: dm-spin 0.8s linear infinite; }
@keyframes dm-spin { to { transform: rotate(360deg); } }

/* Offline page */
.dm-offline .dm-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: 34rem; padding-block: 2rem 4rem; text-align: center; }
.dm-offline-ic { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--dm-soft); color: var(--dm-primary); }
.dm-offline p { margin: 0; color: var(--dm-muted); }
.dm-offline-acts { display: flex; gap: 0.6rem; margin-top: 0.75rem; }

/* Page entrance (Theme options › App › Smooth page changes): coming from another page of the shop, the new
   page's parts rise one after another, 35 ms apart (master.blade.php marks them). The hero banner never moves.
   Until the parts are marked the content is held back (the hero shows); after 0.7 s it shows regardless. */
.dm-enter:not(.dm-go) .dm-main { visibility: hidden; animation: dm-show 0s linear 0.7s forwards; }
.dm-enter .dm-main .dm-hero { visibility: visible; }
.dm-go [data-dm-in] { animation: dm-rise 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--dm-i, 0) * 35ms); }
@keyframes dm-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes dm-show { to { visibility: visible; } }

/* ── Product page on phones: compact breadcrumb, swipeable pictures, a buy bar in reach ── */
.dm-buybar { display: none; }
@media (max-width: 48em) {
    .is-product .dm-crumbs.is-band { margin-bottom: 0; padding-block: 0.7rem; }
    .is-product .dm-crumbs ol { flex-wrap: nowrap; overflow: hidden; font-size: 0.78rem; white-space: nowrap; }
    .is-product .dm-crumbs li:last-child { overflow: hidden; text-overflow: ellipsis; }
    .is-product .dm-pd { padding-top: 0.75rem; }

    /* Pictures: swipe the big one; the small ones become dots. */
    .dm-pd:not(.is-quick) .dm-gal-main { touch-action: pan-y; }
    .dm-gal-main[data-dm-slide='next'] img { animation: dm-gal-next 0.32s var(--dm-ease); }
    .dm-gal-main[data-dm-slide='prev'] img { animation: dm-gal-prev 0.32s var(--dm-ease); }
    .dm-pd:not(.is-quick) .dm-gal-thumbs { display: flex; justify-content: center; gap: 0.4rem; }
    .dm-pd:not(.is-quick) .dm-gal-thumbs button { width: 0.5rem; height: 0.5rem; aspect-ratio: auto; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--dm-text) 22%, transparent); transition: width 0.25s var(--dm-ease), background-color 0.25s; }
    .dm-pd:not(.is-quick) .dm-gal-thumbs button[aria-current='true'] { width: 1.4rem; background: var(--dm-primary); }
    .dm-pd:not(.is-quick) .dm-gal-thumbs img { display: none; }
    /* A bigger touch area around each dot. */
    .dm-pd:not(.is-quick) .dm-gal-thumbs button { position: relative; }
    .dm-pd:not(.is-quick) .dm-gal-thumbs button::after { content: ''; position: absolute; inset: -0.6rem -0.25rem; }

    .dm-buybar { position: fixed; inset: auto 0 0; z-index: 71; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem max(0.75rem, env(safe-area-inset-right, 0px)) calc(0.55rem + env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--dm-line); background: var(--dm-bg); transform: translateY(110%); transition: transform 0.3s var(--dm-ease); }
    .dm-buybar[hidden] { display: none; }
    .dm-buybar.is-on { transform: none; }
    .dm-buybar img { flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--dm-r-sm); background: var(--dm-img-bg); object-fit: cover; }
    .dm-buybar-text { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 0.1rem; }
    .dm-buybar-text > b { overflow: hidden; font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 0.78rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .dm-buybar-text span { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.8rem; }
    .dm-buybar-text span b { color: var(--dm-primary); font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 0.95rem; }
    .dm-buybar-text span s { color: var(--dm-muted); }
    .dm-buybar .dm-btn { flex: none; height: 2.75rem; padding-inline: 1rem; }
    .has-buybar .dm-appbar { transform: translateY(110%); }
    .has-buybar .dm-top-btn { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
    .has-buybar .dm-toast { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}
/* The next picture comes in from the side the finger moved away from (mirrored for Arabic). */
.dm-gal-main { --dm-gal-dir: 1; }
[dir='rtl'] .dm-gal-main { --dm-gal-dir: -1; }
@keyframes dm-gal-next { from { opacity: 0.2; transform: translateX(calc(12% * var(--dm-gal-dir))); } }
@keyframes dm-gal-prev { from { opacity: 0.2; transform: translateX(calc(-12% * var(--dm-gal-dir))); } }
@media (prefers-reduced-motion: reduce) { .dm-gal-main[data-dm-slide] img { animation: none; } .dm-buybar { transition: none; } }

/* ── Shop page on phones: a sticky toolbar, filters and sort in bottom sheets ── */
.dm-sort-open, .dm-sheet { display: none; }
.dm-filters-n { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; margin-inline-start: 0.1rem; padding-inline: 0.3rem; border-radius: 999px; background: var(--dm-primary); color: var(--dm-on-primary); font-size: 0.7rem; font-style: normal; font-weight: 700; }
@media (max-width: 48em) {
    .is-shop .dm-crumbs.is-band { padding-block: 1rem; }
    .is-shop .dm-crumbs-h { margin-bottom: 0.2rem; font-size: 1.35rem; }
    .is-shop .dm-crumbs ol { font-size: 0.78rem; }

    .dm-toolbar { position: sticky; top: calc(var(--dm-stuck, 0px) + env(safe-area-inset-top, 0px)); z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-inline: calc(-1 * var(--dm-gutter, 1rem)); padding: 0.55rem var(--dm-gutter, 1rem); border: 0; border-bottom: 1px solid var(--dm-line); border-radius: 0; background: var(--dm-bg); transition: top 0.2s; }
    .dm-toolbar .dm-filters-open, .dm-toolbar .dm-sort-open { display: inline-flex; justify-content: center; gap: 0.45rem; height: 2.6rem; min-width: 0; padding-inline: 0.6rem; font-size: 0.85rem; }
    .dm-sort-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dm-toolbar .dm-sort { display: none; }
    .dm-toolbar .dm-count { grid-column: 1 / -1; order: 3; margin: 0; color: var(--dm-muted); font-size: 0.78rem; }

    /* Filters: a sheet from the bottom instead of a side drawer. */
    .dm-filters, [dir='rtl'] .dm-filters { top: auto; bottom: 0; inset-inline: 0; width: auto; max-height: 86vh; padding: 0 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-radius: 1.1rem 1.1rem 0 0; transform: translateY(105%); }
    .dm-filters.is-open, [dir='rtl'] .dm-filters.is-open { transform: none; }
    .dm-filters-head { position: sticky; top: 0; z-index: 1; align-items: center; justify-content: space-between; margin-inline: -1.1rem; padding: 1.1rem 1.1rem 0.75rem; background: var(--dm-bg); touch-action: none; }
    .dm-filters-head::before, .dm-sheet-head::before { content: ''; position: absolute; top: 0.45rem; inset-inline-start: 50%; width: 2.5rem; height: 0.3rem; margin-inline-start: -1.25rem; border-radius: 999px; background: var(--dm-line); }
    .dm-filters form > .dm-btn.is-block { position: sticky; bottom: 0; margin-top: 0.5rem; box-shadow: 0 -12px 16px var(--dm-bg); }

    /* Sort */
    .dm-sheet { position: fixed; inset: 0; z-index: 95; display: block; }
    .dm-sheet[hidden] { display: none; }
    .dm-sheet-shade { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); opacity: 0; transition: opacity 0.25s; }
    .dm-sheet-panel { position: absolute; inset: auto 0 0; padding: 0 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-radius: 1.1rem 1.1rem 0 0; background: var(--dm-bg); transform: translateY(105%); transition: transform 0.3s var(--dm-ease); }
    .dm-sheet.is-open .dm-sheet-shade { opacity: 1; }
    .dm-sheet.is-open .dm-sheet-panel { transform: none; }
    .dm-sheet-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0 0.5rem; touch-action: none; }
    .dm-sheet-head b { font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 1rem; }
    .dm-sheet-list { margin: 0; padding: 0; list-style: none; }
    .dm-sheet-list a { display: flex; align-items: center; justify-content: space-between; min-height: 3.1rem; border-bottom: 1px solid var(--dm-line); font-weight: 500; }
    .dm-sheet-list li:last-child a { border-bottom: 0; }
    .dm-sheet-list a[aria-current] { color: var(--dm-primary); font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) { .dm-sheet-panel, .dm-sheet-shade { transition: none; } }

/* ── Cart and checkout on phones: the total and the next step in reach ── */
.dm-paybar { display: none; }
@media (max-width: 48em) {
    .dm-paybar { position: fixed; inset: auto 0 0; z-index: 71; display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem max(1rem, env(safe-area-inset-right, 0px)) calc(0.6rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--dm-line); background: var(--dm-bg); transform: translateY(110%); transition: transform 0.3s var(--dm-ease); }
    .dm-paybar[hidden] { display: none; }
    .dm-paybar.is-on { transform: none; }
    .dm-paybar-total { display: flex; flex-direction: column; min-width: 0; }
    .dm-paybar-total small { color: var(--dm-muted); font-size: 0.72rem; }
    .dm-paybar-total b { font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 1.1rem; white-space: nowrap; }
    .dm-paybar .dm-btn { flex: 1; justify-content: center; height: 2.9rem; }

    /* Bigger, easier taps in the cart. */
    .is-cart .dm-qty.is-sm button { width: 2.5rem; height: 2.5rem; }
    .is-cart .dm-qty.is-sm input { height: 2.5rem; }
    .is-cart .dm-cart-rm { width: 2.5rem; height: 2.5rem; }
    .is-checkout .dm-checkout :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .dm-paybar { transition: none; } }

/* ── My account on phones: a home screen with a list, and a back link on every page ── */
.dm-acc-profile, .dm-acc-list, .dm-acc-back { display: none; }
@media (max-width: 48em) {
    .is-account .dm-crumbs.is-band { padding-block: 0.9rem; }
    .is-account .dm-crumbs-h { display: none; }
    .is-account .dm-crumbs ol { font-size: 0.78rem; }
    .dm-acc { gap: 1rem; padding-top: 1.25rem; }
    .dm-acc-side { display: none; }
    .dm-acc-main { gap: 1rem; }
    .dm-acc-back { display: inline-flex; align-items: center; gap: 0.25rem; align-self: flex-start; margin-block: -0.25rem -0.5rem; padding-block: 0.35rem; color: var(--dm-muted); font-size: 0.88rem; font-weight: 500; }
    .dm-acc-title { padding-bottom: 0.75rem; font-size: 1.3rem; }

    /* The account home */
    .is-account-home .dm-acc-title, .is-account-home .dm-acc-hello, .is-account-home .dm-acc-cards { display: none; }
    .dm-acc-profile { display: flex; align-items: center; gap: 0.85rem; padding: 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
    .dm-acc-profile > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
    .dm-acc-profile b { overflow: hidden; font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
    .dm-acc-profile small { overflow: hidden; color: var(--dm-muted); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
    .dm-acc-profile .dm-acc-av { width: 3.25rem; height: 3.25rem; font-size: 1.05rem; }
    .is-account-home .dm-acc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
    .is-account-home .dm-acc-stats > * { flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0.85rem 0.8rem; }
    .is-account-home .dm-acc-stats .dm-i { width: 20px; height: 20px; }
    .is-account-home .dm-acc-stats b { font-size: 1.05rem; }
    .is-account-home .dm-acc-stats small { font-size: 0.72rem; line-height: 1.3; }
    .dm-acc-list { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
    .dm-acc-list a, .dm-acc-list button { display: flex; align-items: center; gap: 0.85rem; min-height: 3.35rem; padding: 0 1rem; border: 0; border-bottom: 1px solid var(--dm-line); background: none; color: var(--dm-text); font: inherit; font-weight: 500; text-align: start; }
    .dm-acc-list > :last-child { border-bottom: 0; }
    .dm-acc-list span { flex: 1; }
    .dm-acc-list .dm-i:first-child { color: var(--dm-primary); }
    .dm-acc-list .dm-i:last-child { color: var(--dm-muted); }
    .dm-acc-list :is(a, button):active { background: var(--dm-soft); }
    .dm-acc-list .is-out, .dm-acc-list .is-out .dm-i { color: #c62828; }

    /* Order filters: one row you swipe along */
    .dm-acc .dm-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; }
    .dm-acc .dm-chips a { flex: none; }
}

/* ── Orders on phones: each order a card you tap ── */
@media (max-width: 48em) {
    .dm-table-wrap.is-orders { overflow: visible; border: 0; }
    .is-orders .dm-table, .is-orders .dm-table tbody { display: block; }
    .is-orders .dm-table thead { display: none; }
    .is-orders .dm-table tbody { display: flex; flex-direction: column; gap: 0.6rem; }
    .is-orders .dm-table tr { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'no st' 'dt tot'; gap: 0.35rem 1rem; padding: 0.9rem 2.6rem 0.9rem 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); }
    .is-orders .dm-table td { padding: 0; border: 0; }
    .is-orders .dm-table td:nth-child(1) { grid-area: no; }
    .is-orders .dm-table td:nth-child(2) { grid-area: dt; color: var(--dm-muted); font-size: 0.82rem; }
    .is-orders .dm-table td:nth-child(3) { grid-area: st; justify-self: end; }
    .is-orders .dm-table td:nth-child(4) { grid-area: tot; justify-self: end; font-family: var(--dm-font-sub, var(--dm-font-head)); font-weight: 600; }
    .is-orders .dm-table td:nth-child(4) small { display: block; color: var(--dm-muted); font-family: var(--dm-font); font-size: 0.72rem; font-weight: 400; text-align: end; }
    /* The whole card opens the order; a chevron says so. */
    .is-orders .dm-table td:nth-child(1) a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
    .is-orders .dm-table td.is-end { position: absolute; top: 50%; inset-inline-end: 0.85rem; width: 1.1rem; height: 1.1rem; margin-top: -0.55rem; }
    .is-orders .dm-table td.is-end .dm-btn { position: absolute; inset: 0; overflow: hidden; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: transparent; font-size: 0; }
    .is-orders .dm-table td.is-end::before { content: ''; position: absolute; inset: 0; border-block-start: 2px solid var(--dm-muted); border-inline-end: 2px solid var(--dm-muted); transform: scale(0.55) rotate(45deg); pointer-events: none; }
    [dir='rtl'] .is-orders .dm-table td.is-end::before { transform: scale(0.55) rotate(-45deg); }
    .is-orders .dm-table tr:active { background: var(--dm-soft); }
}

/* ── Home page on phones: tighter sections, rows you swipe, calmer cards ── */
@media (max-width: 48em) {
    .dm-sec { padding-block: 2.25rem 0; }
    .dm-feats { padding-block: 1.5rem 0; }
    .dm-sec-head { margin-bottom: 1rem; }

    /* Categories: more in view, the next one peeking in. */
    .dm-cats-row { grid-auto-columns: calc((100% - 2 * 0.75rem) / 3.15); gap: 0.75rem; scroll-padding-inline: 1rem; margin-inline: -1rem; padding-inline: 1rem; }
    .dm-cats-row > * { scroll-snap-align: start; }
    /* Categories block "On phones": rows of 2 or 3 going down the page instead of the sliding row. */
    .dm-cats-row.is-m-grid { grid-auto-flow: row; grid-template-columns: repeat(var(--dm-cats-cols-m, 2), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; gap: 1.5rem 0.75rem; }
    /* A last row that isn't full sits in the middle (e.g. Europe under the four other continents). */
    .dm-cats-row.is-m-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.375rem); }
    .dm-cats-row.is-m-3 > :last-child:nth-child(3n + 1) { grid-column: 2; }
    .dm-cat-pic { margin-bottom: 0.5rem; }
    .dm-cat b { font-size: 0.78rem; }
    .dm-cat small { font-size: 0.7rem; }

    /* Promises: a compact 2 × 2. */
    .dm-feats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .dm-feat { flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 0.9rem; }
    .dm-feat > .dm-i { width: 24px; height: 24px; }
    .dm-feat b { margin-bottom: 0.1rem; font-size: 0.85rem; }
    .dm-feat small { font-size: 0.75rem; line-height: 1.35; }

    /* Product grids on the home page: rows going down the page, 2 or 1 a row (--shop-cols-m, the block's "On phones").
       A block set to "One row to swipe along" gets .is-swipe-m: one row you swipe sideways. */
    .dm-sec .dm-grid.is-swipe-m:not(.is-shop) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(92% / var(--shop-cols-m, 2)); gap: 0.75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; margin-inline: -1rem; padding: 0.25rem 1rem 0.5rem; scrollbar-width: none; }
    .dm-sec .dm-grid.is-swipe-m:not(.is-shop)::-webkit-scrollbar { display: none; }
    .dm-sec .dm-grid.is-swipe-m:not(.is-shop) > * { scroll-snap-align: start; }
    .dm-sec .dm-grid.is-deals.is-swipe-m { grid-auto-columns: 62%; }
    .dm-rail { grid-auto-columns: calc(92% / var(--shop-cols-m, 2)); margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; }

    /* Cards: just the heart and Add to cart over the picture; the card itself opens the product. */
    .dm-card-tools a[data-dm-quick], .dm-card-tools form[data-dm-list-form='compare'] { display: none; }
    /* Add to cart moved beside the price, so the box over the picture holds only the heart (none when the wishlist is off). */
    .dm-card-tools:not(:has(form[data-dm-list-form='wishlist'])) { display: none; }
}

/* ── Search on phones: full screen, results as you type ── */
.dm-ss { position: fixed; inset: 0; z-index: 96; display: flex; flex-direction: column; background: var(--dm-bg); opacity: 0; transform: translateY(1.5rem); transition: opacity 0.22s, transform 0.28s var(--dm-ease); }
.dm-ss[hidden] { display: none; }
.dm-ss.is-open { opacity: 1; transform: none; }
.dm-ss-bar { display: flex; align-items: center; gap: 0.35rem; padding: calc(0.6rem + env(safe-area-inset-top, 0px)) max(0.6rem, env(safe-area-inset-right, 0px)) 0.6rem max(0.6rem, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--dm-line); }
.dm-ss-bar input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 0.9rem; border: 1.5px solid var(--dm-text); border-radius: var(--dm-r-btn, var(--dm-r-sm)); background: var(--dm-bg); color: var(--dm-text); font: inherit; font-size: 1rem; }
.dm-ss-bar input:focus { border-color: var(--dm-primary); outline: none; }
.dm-ss-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }
/* A thin divider between sections, never above the first one shown (Recent may be hidden). */
.dm-ss-sec:not([hidden]) ~ .dm-ss-sec { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--dm-line); }
.dm-ss-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.65rem; }
.dm-ss-h b { font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 0.92rem; }
.dm-ss-chips, .dm-ss-cats { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.dm-ss-chips a, .dm-ss-cats a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem; padding: 0 0.9rem; border: 1px solid var(--dm-line); border-radius: 999px; font-size: 0.85rem; font-weight: 500; }
/* Search results, the "clean list": labelled sections, divided rows, stock and saving, category chips, a strong "See all". */
.dm-ss-label { padding: 0.15rem 0 0.4rem; color: var(--dm-muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.dm-ss-label.is-line { margin-top: 0.4rem; padding-top: 0.85rem; border-top: 1px solid var(--dm-line); }
.dm-ss-list { margin: 0 0 0.4rem; padding: 0; list-style: none; }
.dm-ss-list li + li { border-top: 1px solid var(--dm-line); }
.dm-ss-list a { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; margin-inline: -0.6rem; padding: 0.6rem; border-radius: var(--dm-r-sm); transition: background-color 0.15s; }
.dm-ss-list a:hover, .dm-ss-list a:focus-visible { background: var(--dm-soft); outline: 0; }
.dm-ss-pic { display: grid; place-items: center; width: 3rem; height: 3rem; overflow: hidden; border-radius: var(--dm-r-sm); background: var(--dm-img-bg); color: var(--dm-muted); }
.dm-ss-pic img { width: 100%; height: 100%; object-fit: cover; }
.dm-ss-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dm-ss-name { overflow: hidden; font-size: 0.9rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.dm-ss-name mark { background: none; color: inherit; font-weight: 700; }
.dm-ss-meta { overflow: hidden; color: var(--dm-muted); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.dm-ss-meta .is-ok { color: #15803d; }
.dm-ss-meta .is-low { color: #b45309; }
.dm-ss-meta .is-out { color: var(--dm-muted); }
.dm-ss-price { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.88rem; line-height: 1.3; }
.dm-ss-price b { font-weight: 600; }
.dm-ss-price s { color: var(--dm-muted); font-size: 0.74rem; }
.dm-ss-price em { color: var(--dm-primary); font-size: 0.7rem; font-style: normal; font-weight: 600; }
.dm-ss-cats { margin-bottom: 0.9rem; }
.dm-ss-cats a { gap: 0.4rem; }
.dm-ss-cats a em { color: var(--dm-muted); font-size: 0.72rem; font-style: normal; font-weight: 500; }
.dm-ss-cats a:hover { border-color: var(--dm-text); }
.dm-ss-all { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; padding: 0.85rem 1.1rem; border-radius: var(--dm-r-sm); background: var(--dm-btn); color: var(--dm-on-btn); font-size: 0.9rem; font-weight: 500; transition: background-color 0.2s, color 0.2s; }
.dm-ss-all:hover, .dm-ss-all:focus-visible { background: var(--dm-btn-hover); color: var(--dm-on-btn-hover); outline: 0; }
.dm-ss-all small { display: inline-flex; align-items: center; gap: 0.35rem; opacity: 0.75; font-size: 0.76rem; }
.dm-ss-none { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.4rem 0; color: var(--dm-muted); }
.dm-ss-none p { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.dm-ss-none b { color: var(--dm-text); font-weight: 600; }
.dm-ss-none span { font-size: 0.84rem; }
@media (max-width: 48em) { .dm-ss-all small { display: none; } .dm-ss-all { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .dm-ss { transition: none; transform: none; } }

/* ── Mini cart and wishlist on phones ── */
@keyframes dm-up { from { transform: translateY(100%); } }
@media (max-width: 48em) {
    /* The mini cart rises from the bottom, like an app's sheet. */
    .dm-drawer.is-end .dm-cartmini, [dir='rtl'] .dm-drawer.is-end .dm-cartmini { inset: auto 0 0; width: auto; max-height: 88vh; border-radius: 1.1rem 1.1rem 0 0; animation: dm-up 0.32s var(--dm-ease); }
    .dm-cartmini-top { position: relative; padding: 1.25rem 1.1rem 0.85rem; touch-action: none; }
    .dm-cartmini-top::before { content: ''; position: absolute; top: 0.45rem; inset-inline-start: 50%; width: 2.5rem; height: 0.3rem; margin-inline-start: -1.25rem; border-radius: 999px; background: var(--dm-line); }
    .dm-cartmini-free, .dm-cartmini-body { padding-inline: 1.1rem; }
    .dm-cartmini-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.85rem 1.1rem calc(0.85rem + env(safe-area-inset-bottom, 0px)); }
    .dm-cartmini-foot > p { grid-column: 1 / -1; }

    /* Wishlist: a card per product, Add to cart full width. */
    .is-wishlist .dm-table-wrap { overflow: visible; border: 0; }
    .is-wishlist .dm-cart-table, .is-wishlist .dm-cart-table tbody { display: block; }
    .is-wishlist .dm-cart-table thead { display: none; }
    .is-wishlist .dm-cart-table tbody { display: flex; flex-direction: column; gap: 0.6rem; }
    .is-wishlist .dm-cart-table tr { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); grid-template-areas: 'pic name' 'pic price' 'pic stock' 'add add'; gap: 0.2rem 0.85rem; padding: 0.85rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
    .is-wishlist .dm-cart-table td { padding: 0; border: 0; }
    .is-wishlist .dm-cart-table .dm-cart-pic { grid-area: pic; width: auto; }
    .is-wishlist .dm-cart-table .dm-cart-pic a { width: 5rem; height: 5rem; }
    .is-wishlist .dm-cart-table .dm-cart-name { grid-area: name; min-width: 0; padding-inline-end: 2rem; }
    .is-wishlist .dm-cart-table td:nth-child(3) { grid-area: price; }
    .is-wishlist .dm-cart-table td:nth-child(4) { grid-area: stock; font-size: 0.8rem; }
    .is-wishlist .dm-cart-table td:nth-child(5) { grid-area: add; margin-top: 0.6rem; }
    .is-wishlist .dm-cart-table td:nth-child(5) :is(.dm-btn, form) { width: 100%; }
    .is-wishlist .dm-cart-table td:nth-child(5) .dm-btn { justify-content: center; height: 2.6rem; }
    .is-wishlist .dm-cart-table td.is-end { position: absolute; top: 0.5rem; inset-inline-end: 0.5rem; }
    .is-wishlist .dm-cart-table td.is-end .dm-x { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; }
    .is-wishlist .dm-cart-table td.is-end .dm-x span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .dm-drawer.is-end .dm-cartmini { animation: none; } }

/* Right-to-left (Arabic): arrows that mean back or forward point the other way. */
[dir='rtl'] .dm-i.is-dir { transform: scaleX(-1); }

/* ── Blog comments ── */
.dm-cmts { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--dm-line); }
.dm-cmts-h { margin-bottom: 1.25rem; font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 1.35rem; }
.dm-cmt-list { display: flex; flex-direction: column; gap: 1.25rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.dm-cmt-list.is-replies { gap: 1rem; margin: 1rem 0 0; padding-inline-start: 3.5rem; }
.dm-cmt-card { display: flex; gap: 0.9rem; }
.dm-cmt-av { display: grid; flex: none; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--dm-primary-soft); color: var(--dm-primary); font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 0.85rem; font-weight: 700; }
.dm-cmt-av.is-staff { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-cmt-main { flex: 1; min-width: 0; }
.dm-cmt-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; margin: 0 0 0.3rem; }
.dm-cmt-who b { font-weight: 600; }
.dm-cmt-who time { color: var(--dm-muted); font-size: 0.8rem; }
.dm-cmt-badge { padding: 0.05rem 0.45rem; border-radius: var(--dm-r-sm); background: var(--dm-primary); color: var(--dm-on-primary); font-size: 0.7rem; font-style: normal; font-weight: 600; }
.dm-cmt-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.65; }
.dm-cmt-reply { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.45rem; padding: 0.25rem 0; border: 0; background: none; color: var(--dm-muted); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.dm-cmt-reply:hover { color: var(--dm-primary); }
.dm-cmt-form { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem; border-radius: var(--dm-r); background: var(--dm-soft); }
.dm-cmt .dm-cmt-form { margin: 1rem 0 0 3.5rem; }
.dm-cmt-form-h { margin: 0; font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 1.05rem; }
.dm-cmt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.dm-cmt-form :is(input, textarea) { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); color: var(--dm-text); font: inherit; font-size: 1rem; font-weight: 400; }
.dm-cmt-form :is(input, textarea):focus { border-color: var(--dm-primary); outline: none; }
.dm-cmt-form .dm-field.is-bad :is(input, textarea) { border-color: #c62828; }
.dm-cmt-form .dm-field small { color: #c62828; font-weight: 500; }
.dm-cmt-to { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; color: var(--dm-primary); font-size: 0.86rem; font-weight: 600; }
.dm-cmt-send { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.dm-cmt-signin { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.2rem; border-radius: var(--dm-r); background: var(--dm-soft); }
@media (max-width: 48em) {
    .dm-cmt-pair { grid-template-columns: minmax(0, 1fr); }
    .dm-cmt-list.is-replies { padding-inline-start: 1.5rem; }
    .dm-cmt .dm-cmt-form { margin-inline-start: 0; }
    .dm-cmt-form { padding: 1rem; }
}

/* Added to the cart: the header's cart icon nods and its count pops (the cart itself opens only from the icon). */
.dm-fly { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999; pointer-events: none; }
.dm-act.is-bump svg { animation: dm-cart-nod 0.6s var(--dm-liquid, cubic-bezier(0.34, 1.32, 0.5, 1)); }
.dm-act.is-bump em { animation: dm-cart-pop 0.6s var(--dm-liquid, cubic-bezier(0.34, 1.32, 0.5, 1)); }
@keyframes dm-cart-nod { 30% { transform: rotate(-12deg) scale(1.12); } 60% { transform: rotate(8deg); } }
@keyframes dm-cart-pop { 40% { transform: scale(1.45); } }
@media (prefers-reduced-motion: reduce) { .dm-act.is-bump svg, .dm-act.is-bump em { animation: none; } }

/* Smoother corners on product cards: the continuous "squircle" curve where the browser can draw it
   (it reads smaller than a plain radius, so the radius is larger to look the same size). */
@supports (corner-shape: squircle) {
    .dm-card, .dm-card-img, .dm-card-tools, .dm-badge, .dm-card-add a, .dm-card-add button { corner-shape: squircle; }
    .dm-card { border-radius: calc(var(--dm-r) * 1.7); }
    .dm-card-img { border-radius: max(0px, calc(var(--dm-r) * 1.7 - 1px)) max(0px, calc(var(--dm-r) * 1.7 - 1px)) 0 0; }
    .dm-card-tools, .dm-badge { border-radius: calc(var(--dm-r-sm) * 1.7); }
}

/* Dropdown lists (dm.js): the store's own list in place of the browser's; and no blue anywhere. */
:root { accent-color: var(--dm-primary); }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
select:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-pick { position: fixed; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; padding: 0.35rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); color: var(--dm-text); box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.3); font-size: 0.9rem; animation: dm-pick-in 0.14s var(--dm-ease); }
.dm-pick.is-up { animation-name: dm-pick-up; }
.dm-pick-opt { position: relative; padding: 0.55rem 2.2rem 0.55rem 0.75rem; border-radius: calc(var(--dm-r-sm) * 0.7); cursor: pointer; line-height: 1.35; }
.dm-pick-opt.is-at { background: var(--dm-primary-soft); }
/* A thin line between options (not after the last one, and not around the highlighted one). */
.dm-pick-opt + .dm-pick-opt { margin-top: 1px; }
.dm-pick-opt + .dm-pick-opt::before { content: ""; position: absolute; inset-inline: 0.75rem; top: -1px; height: 1px; background: var(--dm-line); }
.dm-pick-opt.is-at::before, .dm-pick-opt.is-at + .dm-pick-opt::before { opacity: 0; }
.dm-pick-group + .dm-pick-group, .dm-pick > .dm-pick-opt + .dm-pick-group { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid var(--dm-line); }
.dm-pick-opt[aria-selected="true"] { color: var(--dm-primary); font-weight: 500; }
.dm-pick-opt[aria-selected="true"]::after { content: ""; position: absolute; inset-inline-end: 0.8rem; top: 50%; width: 0.4rem; height: 0.7rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-62%) rotate(45deg); }
.dm-pick-opt[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.dm-pick-head { padding: 0.55rem 0.75rem 0.3rem; color: var(--dm-muted); font-size: 0.75rem; font-weight: 600; }
@keyframes dm-pick-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes dm-pick-up { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .dm-pick { animation: none; } }

/* Menu item icons (Website › Menus): a small icon before the name in the menu bar, its dropdowns, the phone menu and the footer menus. */
.dm-nav a > .dm-i:first-child, .dm-drawer-nav a > .dm-i:first-child, .dm-ic-t > .dm-i, .dm-footer ul:not(.dm-social) li a > .dm-i:first-child { flex: none; margin-inline-end: 0.45rem; vertical-align: -0.2em; }
.dm-nav > ul > li > a > .dm-i:first-child { color: var(--dm-primary); }
.dm-drawer-nav a > .dm-i:first-child, .dm-ic-t > .dm-i { color: var(--dm-primary); }
.dm-ic-t { display: inline-flex; align-items: center; }
.dm-footer ul:not(.dm-social) a:has(> .dm-i:first-child) { padding-inline-start: 0; }
.dm-footer ul:not(.dm-social) a:has(> .dm-i:first-child)::before { content: none; }

/* ── Continent maps: Dazzle Monk's own thumbnails for Africa, America, Asia, Australia, Europe ──
   Two vector layers (orange fill, outline). On hover the outline lifts one way and the fill slides
   the other by a few map units, so the printed offset opens a little, and the map grows with a slight tilt.
   One smooth ease-out, the fill trailing the outline a moment, so it moves like liquid.
   No box: the map stands on its own, in the same square as the other thumbnails. It is clipped to
   that square and the hover stays inside its 10% margin, so it never covers a neighbour. */
.has-map { position: relative; overflow: hidden; border-color: transparent !important; border-radius: 0; background: transparent !important; }
.dm-map { position: absolute; inset: 0; padding: 10%; }
.dm-map svg { display: block; width: 100%; height: 100%; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.dm-map .dm-map-fill, .dm-map .dm-map-line { transform-box: fill-box; transform-origin: center; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.dm-map .dm-map-fill { fill: var(--dm-map-fill, #F36D21); transition-duration: 0.55s; }
.dm-map .dm-map-line { stroke: var(--dm-map-line, #000); }
:is(a, button):is(:hover, :focus-visible) .dm-map svg { transform: scale(1.1) rotate(-2deg); }
:is(a, button):is(:hover, :focus-visible) .dm-map .dm-map-line { transform: translate(-6px, -6px); }
:is(a, button):is(:hover, :focus-visible) .dm-map .dm-map-fill { transform: translate(6px, 6px); }
.dm-allc-dot .dm-map, .dm-allcats-pic .dm-map { padding: 6%; }
@media (prefers-reduced-motion: reduce) {
    .dm-map svg, .dm-map .dm-map-fill, .dm-map .dm-map-line { transition: none; }
}

/* Products block: subtitle, side panel, "Simple" layout, button under a sliding row. */
.dm-sec-title { display: flex; flex-direction: column; gap: 1.1rem; }
.dm-sec-sub { margin: 0; color: var(--dm-muted); max-width: 60ch; }
.dm-sec-more { display: flex; justify-content: center; margin: 1.75rem 0 0; }
.dm-prod-wrap.has-side { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.dm-prod-side { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); }
.dm-prod-side-pic, .dm-prod-side picture, .dm-prod-side img { display: block; width: 100%; max-width: 100%; border-radius: var(--dm-r-sm); object-fit: cover; }
.dm-prod-side-t { margin: 0; font-family: var(--dm-font-head); font-size: 1.2rem; font-weight: 700; }
.dm-prod-side-t a { color: inherit; text-decoration: none; }
.dm-prod-side-t a:hover { color: var(--dm-primary); }
.dm-prod-side-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.dm-prod-side-list a { color: var(--dm-muted); text-decoration: none; transition: color 0.2s, padding 0.2s var(--dm-ease); }
.dm-prod-side-list a:hover { color: var(--dm-primary); padding-inline-start: 0.3rem; }
.dm-prod-side .dm-btn { align-self: flex-start; }
.dm-grid.is-simple { gap: 0; border-top: 1px solid var(--dm-line); border-inline-start: 1px solid var(--dm-line); }
.dm-simple { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 0; padding: 1.5rem 1.25rem; border-inline-end: 1px solid var(--dm-line); border-bottom: 1px solid var(--dm-line); text-align: center; }
.dm-simple-pic { display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin-bottom: 0.5rem; overflow: hidden; border-radius: var(--dm-r-sm); background: var(--dm-img-bg); }
.dm-simple-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--dm-ease); }
.dm-simple:hover .dm-simple-pic img { transform: scale(1.05); }
.dm-simple-name { max-width: 100%; margin: 0; overflow: hidden; font-size: 0.98rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dm-simple-name a { color: inherit; text-decoration: none; }
.dm-simple-name a:hover { color: var(--dm-primary); }
.dm-simple-text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--dm-muted); font-size: 0.86rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dm-simple .dm-price { margin: 0; }
@media (max-width: 64em) { .dm-prod-wrap.has-side { grid-template-columns: minmax(0, 1fr); } .dm-prod-side { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: start; } .dm-prod-side > :not(.dm-prod-side-pic):not(picture) { grid-column: 2; } .dm-prod-side > .dm-prod-side-pic, .dm-prod-side > picture { grid-row: span 3; } }
@media (max-width: 48em) { .dm-prod-side { grid-template-columns: minmax(0, 1fr); } .dm-prod-side > * { grid-column: auto !important; grid-row: auto !important; } }

/* Coupons block: tickets with a dashed tear line and the code to copy. */
.dm-coupons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }
.dm-coupon { --cp-bg: var(--dm-bg); --cp-ink: var(--dm-text); --cp-soft: var(--dm-muted); --cp-off: var(--dm-primary); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--cp-bg); color: var(--cp-ink); transition: transform 0.45s var(--dm-ease); }
.dm-coupon:hover { transform: translateY(-3px); }
.dm-coupon.is-brand { --cp-bg: var(--dm-primary); --cp-ink: var(--dm-on-primary); --cp-soft: color-mix(in srgb, var(--dm-on-primary) 75%, transparent); --cp-off: var(--dm-on-primary); border-color: transparent; }
.dm-coupon.is-dark { --cp-bg: #111111; --cp-ink: #ffffff; --cp-soft: rgb(255 255 255 / 0.68); --cp-off: var(--dm-primary); border-color: transparent; }
/* The two half-circle notches at the tear line, on the code side. */
.dm-coupon-code::before, .dm-coupon-code::after { content: ''; position: absolute; inset-inline-start: -1.6rem; width: 1.2rem; height: 0.6rem; background: var(--dm-bg); border: 1px solid var(--dm-line); }
.dm-coupon-code::before { top: calc(-1.25rem - 1px); border-top: 0; border-radius: 0 0 1.2rem 1.2rem; }
.dm-coupon-code::after { bottom: calc(-1.25rem - 1px); border-bottom: 0; border-radius: 1.2rem 1.2rem 0 0; }
.dm-coupon-main { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; padding-inline-end: 1rem; border-inline-end: 1.5px dashed color-mix(in srgb, var(--cp-soft) 60%, transparent); }
.dm-coupon-off { color: var(--cp-off); font-family: var(--dm-font-head); font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 700; line-height: 1.1; }
.dm-coupon-main p { margin: 0; font-size: 0.9rem; }
.dm-coupon-main small { color: var(--cp-soft); font-size: 0.78rem; }
.dm-coupon-code { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; min-width: 7.5rem; max-width: 11rem; }
.dm-coupon-code code { max-width: 100%; overflow: hidden; padding: 0.3rem 0.55rem; border: 1.5px dashed currentColor; border-radius: var(--dm-r-sm); font: 700 0.86rem/1.3 var(--dm-font-head); letter-spacing: 0.03em; text-overflow: ellipsis; white-space: nowrap; }
.dm-coupon.is-brand .dm-btn, .dm-coupon.is-dark .dm-btn { border-color: currentColor; background: transparent; color: inherit; }
.dm-coupon .dm-btn.is-copied { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }

/* Collections block: picture tiles with the name on a bar that slides the arrow in. */
.dm-colls { display: grid; grid-template-columns: repeat(var(--dm-colls, 3), minmax(0, 1fr)); gap: 1.5rem; }
.dm-coll { position: relative; display: block; overflow: hidden; border-radius: var(--dm-r); background: var(--dm-img-bg); color: var(--dm-text); text-decoration: none; isolation: isolate; }
.dm-coll-pic { display: grid; place-items: center; aspect-ratio: 4 / 3; }
.dm-coll-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--dm-ease); }
.dm-coll:hover .dm-coll-pic img { transform: scale(1.06); }
.dm-coll-text { position: absolute; inset-inline: 0.85rem; bottom: 0.85rem; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 3.4rem 0.8rem 1rem; padding-inline: 1rem 3.4rem; border-radius: var(--dm-r-sm); background: var(--dm-bg); }
.dm-coll-text b { overflow: hidden; font-family: var(--dm-font-head); font-size: 1.02rem; text-overflow: ellipsis; white-space: nowrap; }
.dm-coll-text small { color: var(--dm-muted); font-size: 0.8rem; }
.dm-coll-go { position: absolute; inset-inline-end: 1.6rem; bottom: 1.55rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--dm-btn); color: var(--dm-on-btn); transition: transform 0.5s var(--dm-ease), background-color 0.3s; }
.dm-coll:hover .dm-coll-go { background: var(--dm-primary); color: var(--dm-on-primary); transform: translateX(3px); }
[dir='rtl'] .dm-coll:hover .dm-coll-go { transform: translateX(-3px); }

/* Logo strip: a row that glides by itself (a copy fills the gap); still for people who ask for less motion. */
.dm-logos-t { margin: 0 0 1.25rem; color: var(--dm-muted); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; }
.dm-logos { overflow: hidden; }
.dm-logos.is-loop { -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.dm-logos-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 3rem; }
.dm-logos.is-loop .dm-logos-track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: dm-lgs 32s linear infinite; }
.dm-logos.is-loop:hover .dm-logos-track { animation-play-state: paused; }
.dm-lgs-item { display: grid; flex: none; place-items: center; height: 4rem; padding-inline: 0.5rem; }
.dm-lgs-item img { width: auto; height: 3rem; max-width: 9rem; object-fit: contain; transition: filter 0.35s, opacity 0.35s; }
.dm-logos.is-grey .dm-lgs-item img { filter: grayscale(1); opacity: 0.6; }
.dm-logos.is-grey .dm-lgs-item:hover img { filter: none; opacity: 1; }
.dm-logos.is-loop .dm-logos-track > * { margin-inline-end: 3rem; }
.dm-logos.is-loop .dm-logos-track { gap: 0; }
@keyframes dm-lgs { to { transform: translateX(-50%); } }
[dir='rtl'] .dm-logos.is-loop .dm-logos-track { animation-name: dm-lgs-rtl; }
@keyframes dm-lgs-rtl { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .dm-logos.is-loop .dm-logos-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .dm-logos.is-loop { -webkit-mask: none; mask: none; } .dm-logos.is-loop .dm-lgs-item[aria-hidden='true'] { display: none; } }

/* App downloads: words and store buttons beside a phone picture. */
.dm-appdl { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 2rem; overflow: hidden; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--dm-r); background: var(--dm-primary-soft); }
.dm-appdl h2 { margin: 0.4rem 0 0.75rem; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; line-height: 1.1; }
.dm-appdl-lede { margin: 0 0 1.5rem; color: var(--dm-muted); max-width: 46ch; }
.dm-appdl-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.dm-store-btn { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 3.25rem; padding: 0.45rem 1.1rem 0.45rem 0.9rem; border: 1.5px solid #111111; border-radius: var(--dm-r-btn); background: #111111; color: #ffffff; font: 600 1.02rem/1.1 var(--dm-font-head); text-align: start; text-decoration: none; cursor: pointer; transition: transform 0.45s var(--dm-ease), background-color 0.3s, border-color 0.3s; }
.dm-store-btn span { display: flex; flex-direction: column; }
.dm-store-btn small { font: 500 0.66rem var(--dm-font, inherit); opacity: 0.8; }
.dm-store-btn:hover { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); transform: translateY(-2px); }
.dm-store-btn.is-install { background: transparent; color: var(--dm-text); }
.dm-appdl-pic { display: grid; place-items: center; min-width: 0; }
.dm-appdl-img, .dm-appdl-pic picture, .dm-appdl-pic img { max-width: 100%; max-height: 22rem; object-fit: contain; }
.dm-appdl-phone { display: grid; place-items: center; width: min(13rem, 70%); aspect-ratio: 9 / 18; border: 0.6rem solid #111111; border-radius: 2rem; background: var(--dm-bg); box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.35); transform: rotate(-6deg); }
.dm-appdl-phone img { max-width: 70%; }
.dm-appdl-phone b { font-family: var(--dm-font-head); }

/* Coming soon: a centred countdown on a dark band or the owner's picture. */
.dm-soon { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem); border-radius: var(--dm-r); background: #111111; color: #ffffff; text-align: center; isolation: isolate; }
.dm-soon-bg { position: absolute; inset: 0; z-index: -1; }
.dm-soon-bg img, .dm-soon-bg picture, .dm-soon-img { width: 100%; height: 100%; object-fit: cover; }
.dm-soon.has-pic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / 0.55); }
.dm-soon-in { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 40rem; margin-inline: auto; }
.dm-soon h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; line-height: 1.08; text-wrap: balance; }
.dm-soon-text { margin: 0; color: rgb(255 255 255 / 0.78); }
.dm-soon .dm-countdown.is-big { gap: 0.75rem; margin-block: 0.5rem; }
.dm-soon .dm-countdown.is-big span { width: clamp(4rem, 12vw, 5.5rem); height: clamp(4rem, 12vw, 5.5rem); border-color: rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.08); color: #ffffff; }
.dm-soon .dm-countdown.is-big b { font-family: var(--dm-font-head); font-size: clamp(1.4rem, 3.4vw, 2.2rem); font-weight: 700; }
.dm-soon .dm-countdown.is-big small { opacity: 0.7; }
.dm-soon form { width: 100%; max-width: 30rem; }

/* Sellers block (Marketplace app): cards with cover, logo, name and products. */
.dm-sellers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; }
.dm-seller { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; overflow: hidden; padding-bottom: 1.25rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); color: var(--dm-text); text-align: center; text-decoration: none; transition: transform 0.45s var(--dm-ease), border-color 0.3s; }
.dm-seller:hover { border-color: var(--dm-primary); transform: translateY(-3px); }
.dm-seller-cover { display: block; width: 100%; height: 5rem; background: var(--dm-primary-soft) center / cover no-repeat; }
.dm-seller-logo { display: grid; place-items: center; width: 4rem; height: 4rem; margin-top: -2rem; margin-bottom: 0.5rem; overflow: hidden; border: 3px solid var(--dm-bg); border-radius: 50%; background: var(--dm-primary); color: var(--dm-on-primary); font: 700 1.1rem var(--dm-font-head); }
.dm-seller-logo img { width: 100%; height: 100%; object-fit: cover; }
.dm-seller b { max-width: 90%; overflow: hidden; font-family: var(--dm-font-head); text-overflow: ellipsis; white-space: nowrap; }
.dm-seller small { color: var(--dm-muted); font-size: 0.8rem; }

@media (max-width: 64em) { .dm-colls { grid-template-columns: repeat(min(var(--dm-colls, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 48em) {
    .dm-appdl { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .dm-appdl-btns { justify-content: center; }
    .dm-appdl-lede { margin-inline: auto; }
    .dm-appdl-phone { width: 9rem; }
    .dm-colls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    .dm-coll-text { inset-inline: 0.5rem; bottom: 0.5rem; padding: 0.5rem 0.65rem; padding-inline: 0.65rem; }
    .dm-coll-text b { font-size: 0.86rem; }
    .dm-coll-go { display: none; }
}

/* Checkout: the charge or discount beside a way to pay. */
.dm-pay-terms { flex: none; align-self: center; justify-self: end; width: max-content; margin-inline-start: auto; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--dm-soft); color: var(--dm-text); font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.dm-pay-terms.is-off { background: color-mix(in srgb, #1f8a4c 14%, transparent); color: #1f8a4c; }

/* Website › Maintenance: the closed page. */
.dm-closed-page { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; margin: 0; padding: 2rem 1.25rem; background: var(--dm-bg); }
.dm-closed { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 38rem; text-align: center; }
.dm-closed-logo { margin-bottom: 1.5rem; }
.dm-closed-logo .dm-logo img { max-height: 3rem; }
.dm-closed h1 { margin: 0; font-family: var(--dm-font-head); font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 700; line-height: 1.05; text-wrap: balance; }
.dm-closed-text { margin: 0; color: var(--dm-muted); font-size: 1.05rem; }
.dm-closed-back { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0.5rem 1rem; border: 1.5px solid var(--dm-line); border-radius: 999px; font-weight: 600; }
.dm-closed-back .dm-i { color: var(--dm-primary); }
/* The closed page's countdown (Settings › Maintenance › Open again at): split-flap tiles, like an auction lot's clock. */
.dm-cd { display: grid; gap: 0.75rem; width: min(100%, 26rem); margin-top: 0.5rem; padding: 0.9rem 1rem 1rem; border: 1.5px solid var(--dm-text); border-radius: 1.25rem; background: var(--dm-bg); text-align: start; }
.dm-cd-h { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; color: var(--dm-muted); font-size: 0.78rem; }
.dm-cd-h > span:first-child { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--dm-text); font-weight: 600; }
.dm-cd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dm-primary); animation: dm-cd-blink 1.2s steps(2) infinite; }
@keyframes dm-cd-blink { 50% { opacity: 0.2; } }
.dm-cd-d { display: flex; align-items: flex-start; gap: 0.6rem; }
.dm-cd-grp { flex: 1; display: grid; gap: 0.4rem; justify-items: center; }
.dm-cd-grp small { color: var(--dm-muted); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; }
.dm-cd-tiles { display: flex; gap: 5px; width: 100%; }
.dm-cd-tile { position: relative; flex: 1; display: grid; place-items: center; border-radius: 10px; background: #1c1c1e; color: #fff; font: 800 clamp(1.5rem, 5vw, 2.3rem) / 1 var(--dm-font-head); font-variant-numeric: tabular-nums; perspective: 400px; }
.dm-cd-tile::after { content: ''; position: absolute; z-index: 3; inset-inline: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.55); }
.dm-cd-tile > b[data-p] { position: relative; display: block; width: 100%; height: 1.5em; font: inherit; }
.dm-cd-sep { padding-top: 0.6rem; color: var(--dm-muted); font: 800 1.6rem / 1 var(--dm-font-head); }
.dm-cd [hidden] { display: none !important; }
.dm-fh, .dm-ff { position: absolute; inset-inline: 0; height: 50%; overflow: hidden; background: #1c1c1e; backface-visibility: hidden; }
.dm-fh.t, .dm-ff.t { top: 0; border-radius: 10px 10px 0 0; }
.dm-fh.b, .dm-ff.b { bottom: 0; border-radius: 0 0 10px 10px; }
.dm-fh i, .dm-ff i { position: absolute; inset-inline: 0; height: 200%; display: grid; place-items: center; font-style: normal; }
.dm-fh.t i, .dm-ff.t i { top: 0; }
.dm-fh.b i, .dm-ff.b i { bottom: 0; }
.dm-ff.t { z-index: 2; transform-origin: 50% 100%; background: #202023; animation: dm-flip-t 0.3s ease-in forwards; }
.dm-ff.b { z-index: 2; transform-origin: 50% 0; transform: rotateX(90deg); background: #18181a; animation: dm-flip-b 0.3s 0.3s ease-out forwards; }
@keyframes dm-flip-t { to { transform: rotateX(-90deg); } }
@keyframes dm-flip-b { to { transform: rotateX(0); } }
.dm-cd.is-hot .dm-cd-tile { color: var(--dm-primary); }
@media (prefers-reduced-motion: reduce) { .dm-ff { display: none; } .dm-cd-dot { animation: none; } }
.dm-closed-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 1.2rem; margin: 1.5rem 0 0; color: var(--dm-muted); font-size: 0.9rem; }
.dm-closed-contact a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--dm-text); font-weight: 600; }
.dm-closed-contact a:hover { color: var(--dm-primary); }

/* ── Sign in / sign up popup (Theme options › Sign-in screen), after ForgeTraq's sign-in screen ── */
.dm-ap .dm-modal-box.dm-ap-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(100%, 68rem); max-height: 100%; padding: 0; overflow: hidden; border-radius: var(--dm-r); }
.dm-ap-box.is-plain { grid-template-columns: minmax(0, 1fr); width: min(100%, 34rem); }
.dm-ap-side { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vh, 2rem); min-height: 0; padding: clamp(1.75rem, 4vw, 3.25rem); overflow-y: auto; background: var(--dm-bg); }
.dm-ap-hi { display: flex; flex-direction: column; margin: 0; font-family: var(--dm-font-head); font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.dm-ap-hi .is-second { font-weight: 500; }
.dm-ap-tag { margin: 0.6rem 0 0; color: var(--dm-primary); font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: clamp(0.9rem, 1.2vw, 1.05rem); }
.dm-ap-chars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 2.2vw, 1.75rem); }
.dm-ap-char { aspect-ratio: 5 / 6; border: 1.5px solid var(--dm-text); background: var(--dm-bg); overflow: hidden; }
.dm-ap-char > div { width: 100%; height: 100%; opacity: 0; transition: opacity 0.45s var(--dm-ease); }
.dm-ap-char > div.is-ready { opacity: 1; }
.no-js .dm-ap-char > div { opacity: 1; }
.dm-ap-char > div svg { display: block; }
.dm-ap-pic { flex: 1; min-height: 12rem; }
.dm-ap-pic img, .dm-ap-pic > div { width: 100%; height: 100%; object-fit: contain; }
.dm-ap-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 1rem 1.5rem; margin: 0; padding: 1.25rem 0 0; border-top: 1.5px solid color-mix(in srgb, var(--dm-text) 70%, transparent); list-style: none; }
.dm-ap-logos img { display: block; max-height: 3rem; max-width: 7.5rem; width: auto; filter: grayscale(1); opacity: 0.85; transition: filter 0.2s, opacity 0.2s; }
.dm-ap-logos a:hover img, .dm-ap-logos a:focus-visible img { filter: none; opacity: 1; }
.dm-ap-main { display: flex; flex-direction: column; gap: 1.5rem; min-height: 0; padding: clamp(1.75rem, 4vw, 3.25rem); overflow-y: auto; background: color-mix(in srgb, var(--dm-text) 5%, var(--dm-bg)); }
.dm-ap-head { display: flex; align-items: flex-start; gap: 1rem; }
.dm-ap-lock { display: grid; flex: none; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: var(--dm-r-sm); background: var(--dm-bg); }
.dm-ap-head h2 { margin: 0; padding-inline-end: 2rem; font-family: var(--dm-font-head); font-size: clamp(1.35rem, 2.3vw, 2rem); font-weight: 700; line-height: 1.12; text-wrap: balance; }
.dm-ap-head p { margin: 0.55rem 0 0; color: var(--dm-muted); font-size: 0.92rem; line-height: 1.55; }
.dm-ap-form { display: flex; flex-direction: column; gap: 1rem; }
.dm-ap-field label { display: block; margin-bottom: 0.4rem; font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 0.92rem; font-weight: 600; }
.dm-ap-in { position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 3.4rem; padding-inline: 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); transition: border-color 0.15s, box-shadow 0.15s; }
.dm-ap-in > svg { flex: none; color: var(--dm-muted); }
.dm-ap-in input { flex: 1; min-width: 0; height: 3.3rem; border: 0; outline: 0; background: none; color: inherit; font: inherit; font-size: 0.98rem; }
.dm-ap-in:focus-within { border-color: var(--dm-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary) 18%, transparent); }
.dm-ap-field.is-bad .dm-ap-in { border-color: #dc2626; }
.dm-ap-err { display: block; color: #dc2626; font-size: 0.82rem; }
.dm-ap-err:empty { display: none; }
.dm-ap-field .dm-ap-err { margin-top: 0.35rem; }
.dm-ap-eye { display: grid; place-items: center; padding: 0.35rem; border: 0; background: none; color: var(--dm-muted); cursor: pointer; }
.dm-ap-eye svg:last-child, .dm-ap-eye.is-on svg:first-child { display: none; }
.dm-ap-eye.is-on svg:last-child { display: block; }
.dm-ap-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dm-ap-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.dm-ap-link { color: var(--dm-text); font-weight: 600; text-decoration: none; }
.dm-ap-link:hover { color: var(--dm-primary); }
.dm-ap-note { margin: 0; padding: 0.7rem 0.9rem; border-radius: var(--dm-r-sm); background: color-mix(in srgb, #dc2626 9%, var(--dm-bg)); color: color-mix(in srgb, #dc2626 75%, var(--dm-text)); font-size: 0.88rem; }
.dm-ap-submit { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.5rem; margin-top: 0.4rem; border: 0; border-radius: var(--dm-r-btn); background: var(--dm-btn, #010f1c); color: var(--dm-on-btn, #fff); font-family: var(--dm-font-head); font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: background-color 0.2s, transform 0.2s var(--dm-ease); }
.dm-ap-submit:hover, .dm-ap-submit:focus-visible { background: var(--dm-btn-hover, var(--dm-primary)); color: var(--dm-on-btn-hover, #fff); }
.dm-ap-submit:hover svg { transform: translateX(3px); }
.dm-ap-submit svg { transition: transform 0.2s var(--dm-ease); }
.dm-ap-submit:disabled { opacity: 0.7; cursor: progress; }
[dir="rtl"] .dm-ap-submit svg { transform: scaleX(-1); }
.dm-ap-switch { margin: 0.25rem 0 0; color: var(--dm-muted); text-align: center; }
.dm-ap-switch a { color: var(--dm-text); font-family: var(--dm-font-head); font-weight: 700; text-decoration: none; }
.dm-ap-switch a:hover { color: var(--dm-primary); }
.dm-ap-social { display: flex; flex-direction: column; gap: 0.85rem; padding-top: 1.5rem; border-top: 1px solid var(--dm-line); }
.dm-ap-social p { margin: 0 0 0.25rem; color: var(--dm-muted); font-family: var(--dm-font-sub, var(--dm-font-head)); text-align: center; }
.dm-ap-sso { display: flex; align-items: center; justify-content: center; gap: 0.65rem; min-height: 3.4rem; border-radius: var(--dm-r-btn); background: var(--dm-primary); color: var(--dm-on-primary, #fff); font-family: var(--dm-font-head); font-weight: 600; text-decoration: none; transition: filter 0.2s; }
.dm-ap-sso.is-facebook { background: #1877f2; color: #fff; }
.dm-ap-sso:hover { filter: brightness(0.94); }
@media (max-width: 860px) {
    .dm-ap .dm-modal-box.dm-ap-box { grid-template-columns: minmax(0, 1fr); width: min(100%, 34rem); overflow-y: auto; }
    .dm-ap-side, .dm-ap-main { overflow: visible; }
    .dm-ap-side { padding-bottom: 0.5rem; }
    .dm-ap-chars, .dm-ap-pic { display: none; }
    .dm-ap-logos { order: 3; }
}
@media (max-width: 480px) {
    .dm-ap { padding: 0; place-items: end stretch; }
    .dm-ap .dm-modal-box.dm-ap-box { width: 100%; max-height: 94vh; border-radius: var(--dm-r) var(--dm-r) 0 0; }
    .dm-ap-pair { grid-template-columns: 1fr; }
    .dm-ap-lock { display: none; }
}
.dm-ap-view { display: flex; flex-direction: column; gap: 1.75rem; }
.dm-ap-field, .dm-ap-pair > * { min-width: 0; }
.dm-ap-lock.has-logo { width: auto; min-width: 3.4rem; max-width: 9rem; padding: 0.45rem; }
.dm-ap-lock.has-logo img { display: block; max-width: 100%; max-height: 2.5rem; width: auto; object-fit: contain; }
.dm-ap-logos img { height: 2.75rem; max-height: none; object-fit: contain; }
/* ForgeTraq's underlined fields: no box, a line under each; the label rises when you type, the line fills orange on focus. */
.dm-ap-form { gap: 0.5rem; }
.dm-ap-field label { position: absolute; top: 1.15rem; inset-inline-start: 1.9rem; margin: 0; color: var(--dm-muted); font-family: var(--dm-font); font-size: 1rem; font-weight: 400; pointer-events: none; transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease; }
.dm-ap-in { gap: 0; min-height: 3.6rem; padding: 0; border: 0; border-bottom: 1.5px solid var(--dm-text); border-radius: 0; background: transparent; box-shadow: none; }
.dm-ap-in::after { content: ""; position: absolute; inset-inline: 0; bottom: -1.5px; height: 2px; background: var(--dm-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
[dir="rtl"] .dm-ap-in::after { transform-origin: right; }
.dm-ap-in:focus-within { border-color: var(--dm-text); box-shadow: none; }
.dm-ap-in:focus-within::after { transform: scaleX(1); }
.dm-ap-in > svg { position: absolute; top: 50%; inset-inline-start: 0; width: 1.15rem; height: 1.15rem; transform: translateY(-50%); transition: color 0.15s ease; }
.dm-ap-in input { height: auto; min-height: 3.6rem; padding: 1.5rem 0 0.45rem; padding-inline-start: 1.9rem; font-size: 1rem; }
.dm-ap-in input:-webkit-autofill { -webkit-text-fill-color: var(--dm-text); transition: background-color 9999s ease-out 0s; }
.dm-ap-in input:focus + label, .dm-ap-in input:not(:placeholder-shown) + label, .dm-ap-in input:-webkit-autofill + label { top: 0.45rem; font-size: 0.74rem; font-weight: 600; }
.dm-ap-in:focus-within label, .dm-ap-in:focus-within > svg { color: var(--dm-primary); }
.dm-ap-in:has(.dm-ap-eye) input { padding-inline-end: 2.75rem; }
.dm-ap-eye { position: absolute; top: 50%; inset-inline-end: -0.4rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; transform: translateY(-50%); }
.dm-ap-eye:hover, .dm-ap-eye:focus-visible { color: var(--dm-primary); }
.dm-ap-field.is-bad .dm-ap-in { border-color: #dc2626; }
.dm-ap-field.is-bad .dm-ap-in::after { background: #dc2626; }
.dm-ap-field.is-bad label { color: #dc2626; }
.dm-ap-row { margin: 1.1rem 0 1.25rem; }
@media (prefers-reduced-motion: reduce) { .dm-ap-in::after, .dm-ap-field label { transition: none; } }
/* Characters as ForgeTraq draws them: the animation's own frame only, no extra outline. */
.dm-ap-chars { gap: 1rem; max-width: 32rem; }
.dm-ap-char { aspect-ratio: 795 / 930; border: 0; border-radius: max(calc(var(--dm-r) - 0.25rem), 2px); background: none; cursor: pointer; }
.dm-ap-char > div svg { width: 100% !important; height: 100% !important; }
/* The popup always fits the window: sizes follow its height as well as its width, so a laptop
   screen shows it whole without scrolling; very short windows drop the extras first. */
.dm-ap { --ap-pad: clamp(1.1rem, min(3.6vw, 4.4dvh), 3.25rem); --ap-field: clamp(2.9rem, 6.4dvh, 3.6rem); }
.dm-ap .dm-modal-box.dm-ap-box { max-height: calc(100dvh - 2rem); }
.dm-ap-side, .dm-ap-main { padding: var(--ap-pad); }
.dm-ap-side { gap: clamp(0.9rem, 2.6dvh, 2rem); justify-content: center; }
.dm-ap-main { gap: clamp(0.9rem, 2.2dvh, 1.5rem); justify-content: center; }
.dm-ap-hi { font-size: clamp(1.25rem, min(2.6vw, 4.3dvh), 2.3rem); }
.dm-ap-tag { margin-top: clamp(0.3rem, 1dvh, 0.6rem); font-size: clamp(0.82rem, min(1.2vw, 1.9dvh), 1.05rem); }
/* Two rows of characters take about 0.78 × their width in height: keep them inside what's left. */
.dm-ap-chars { width: 100%; max-width: min(32rem, calc((100dvh - 22rem) * 1.25)); gap: clamp(0.5rem, 1.6dvh, 1rem); }
.dm-ap-head h2 { font-size: clamp(1.2rem, min(2.3vw, 3.9dvh), 2rem); }
.dm-ap-head p { margin-top: clamp(0.3rem, 0.9dvh, 0.55rem); font-size: clamp(0.8rem, 1.75dvh, 0.92rem); }
.dm-ap-lock { width: clamp(2.6rem, 6dvh, 3.4rem); height: clamp(2.6rem, 6dvh, 3.4rem); }
.dm-ap-view { gap: clamp(0.9rem, 2.6dvh, 1.75rem); }
.dm-ap-view:not([hidden]), .dm-ap-hello:not([hidden]) { animation: dm-ap-in 0.35s var(--dm-ease); }
@keyframes dm-ap-in { from { opacity: 0; transform: translateY(6px); } }
.dm-ap-form { gap: clamp(0.15rem, 0.8dvh, 0.5rem); }
.dm-ap-in, .dm-ap-in input { min-height: var(--ap-field); }
.dm-ap-in input { padding-top: calc(var(--ap-field) * 0.42); padding-bottom: 0.4rem; }
.dm-ap-field label { top: calc(var(--ap-field) * 0.3); }
.dm-ap-row { margin: clamp(0.5rem, 1.8dvh, 1.1rem) 0 clamp(0.6rem, 2dvh, 1.25rem); }
.dm-ap-submit { min-height: clamp(2.9rem, 6.2dvh, 3.5rem); margin-top: clamp(0.2rem, 0.8dvh, 0.4rem); }
.dm-ap-switch { margin-top: clamp(0.25rem, 1dvh, 0.6rem); }
.dm-ap-social { gap: clamp(0.5rem, 1.5dvh, 0.85rem); padding-top: clamp(0.8rem, 2.4dvh, 1.5rem); }
.dm-ap-sso { min-height: clamp(2.8rem, 6dvh, 3.4rem); }
.dm-ap-logos { padding-top: clamp(0.7rem, 2dvh, 1.25rem); gap: 0.75rem 1.25rem; }
.dm-ap-logos img { height: clamp(2rem, 4.6dvh, 2.75rem); }
@media (min-width: 861px) and (max-height: 760px) { .dm-ap-head p { display: none; } }
@media (min-width: 861px) and (max-height: 640px) { .dm-ap-lock, .dm-ap-logos { display: none; } .dm-ap-pair { gap: 0.75rem; } }
@media (max-width: 860px) {
    .dm-ap-side { justify-content: flex-start; }
    .dm-ap-main { justify-content: flex-start; }
}
@media (max-width: 480px) { .dm-ap .dm-modal-box.dm-ap-box { max-height: 94dvh; } .dm-ap-head p { display: none; } }
.dm-ap-logos { width: 100%; max-width: min(32rem, calc((100dvh - 22rem) * 1.25)); }
.dm-ap-logos img { opacity: 1; max-width: 8.5rem; }
.dm-ap-head h2 { padding-inline-end: 2.5rem; }
/* Logos in the text colour: the picture is used as a stencil filled with --dm-text (the hidden img
   inside gives the size and the name for screen readers). */
.dm-ap-mono { display: block; background: var(--dm-text); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.dm-ap-mono img { opacity: 0; filter: none; }
.dm-ap-logos li:only-child { flex: 1; display: flex; justify-content: center; }
.dm-ap-logos li:only-child img { width: auto; max-width: 100%; height: clamp(2.4rem, 5.4dvh, 3.25rem); }
.dm-ap-logos li:only-child > a, .dm-ap-logos li:only-child .dm-ap-mono { width: 100%; }
.dm-ap-logos li:only-child img { width: 100%; height: auto; max-height: clamp(3rem, 8.5dvh, 4.75rem); object-fit: contain; }
/* A date field always shows its day-month-year boxes, so its label stays up. */
.dm-ap-in input[type="date"] + label { top: 0.45rem; font-size: 0.74rem; font-weight: 600; }
.dm-ap-in input[type="date"] { color: var(--dm-text); }
.dm-ap-in input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
.dm-ap-hint { margin: -0.1rem 0 0; color: var(--dm-muted); font-size: 0.8rem; }
.dm-ap-field.is-bad + .dm-ap-hint { display: none; }
/* Closed page with the character: picture left, words right (stacked on phones). */
.dm-closed.has-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 5vw, 4.5rem); width: min(100%, 72rem); max-width: none; text-align: start; }
.dm-closed.has-art .dm-closed-body { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.dm-closed.has-art .dm-closed-contact { justify-content: flex-start; }
.dm-closed-art { position: relative; aspect-ratio: 1; width: 100%; max-height: 80svh; opacity: 0; transition: opacity 0.5s ease; }
.dm-closed-art.is-ready { opacity: 1; }
.dm-closed-art canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
@media (max-width: 760px) {
    .dm-closed.has-art { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 0.5rem; }
    .dm-closed.has-art .dm-closed-body { align-items: center; }
    .dm-closed.has-art .dm-closed-contact { justify-content: center; }
    .dm-closed-art { width: min(100%, 22rem); margin-inline: auto; }
}
.dm-closed-art.is-own { aspect-ratio: auto; }
.dm-closed-art.is-own img, .dm-closed-lottie { display: block; width: 100%; max-height: 70svh; object-fit: contain; }
.dm-closed-lottie svg { display: block; width: 100% !important; height: auto !important; max-height: 70svh; }

/* Every popup's background (sign-in, quick view, newsletter, menu, cart and filter drawers, phone sheets): a solid
   black see-through layer with a little blur behind. */
.dm-modal-shade, .dm-drawer-shade, .dm-sheet-shade, .dm-filters-shade.is-open { background: rgb(0 0 0 / 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ── Shop toolbar and filters (Theme options › Products › Shop filters) ──
   Panel (default): a Filter button at the end of the toolbar opens the filters from the side, at every
   size; the products use the full width. Sidebar: filters stay on the left on computers.
   Grid / list view buttons; a two-handle price slider; every change updates the products in place. */
.dm-view { display: flex; gap: 0.35rem; }
.dm-view .dm-icon-btn { width: 2.6rem; height: 2.6rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-muted); }
.dm-view .dm-icon-btn[aria-pressed='true'] { border-color: var(--dm-text); color: var(--dm-text); }
@media (min-width: 48.01em) {
    .dm-toolbar .dm-count { order: 1; }
    .dm-toolbar .dm-sort { order: 2; }
    .dm-toolbar .dm-filters-open { order: 3; }
    .dm-sort select { height: 2.6rem; }
}
@media (min-width: 64.01em) {
    .dm-shop.is-panel { grid-template-columns: minmax(0, 1fr); }
    .dm-shop.is-panel .dm-filters { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 90; width: min(22rem, 90vw); padding: 1rem 1.25rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; background: var(--dm-bg); box-shadow: 0 0 40px rgb(0 0 0 / 0.18); transform: translateX(-105%); transition: transform 0.35s var(--dm-ease); }
    [dir='rtl'] .dm-shop.is-panel .dm-filters { transform: translateX(105%); }
    .dm-shop.is-panel .dm-filters.is-open { transform: none; }
    .dm-shop.is-panel .dm-filters-head { display: flex; position: sticky; top: -1rem; z-index: 1; margin: -1rem -1.25rem 0.5rem; padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--dm-line); background: var(--dm-bg); }
    .dm-shop.is-panel .dm-filters-shade.is-open { position: fixed; inset: 0; z-index: 89; display: block; }
    .dm-shop.is-panel .dm-filters-open { display: inline-flex; }
}
/* The Filter button: solid, like the reference, wherever it shows. */
.dm-toolbar .dm-filters-open { gap: 0.5rem; height: 2.6rem; padding-inline: 1.3rem; border-color: var(--dm-text); background: var(--dm-text); color: var(--dm-bg); font-weight: 700; }
.dm-toolbar .dm-filters-open:hover { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-toolbar .dm-filters-open .dm-filters-n { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-filters .dm-btn.is-block[type='submit'] { display: none; } /* filters apply by themselves */
/* Updating: the products fade a touch while the new ones load. */
[data-dm-shop-root].is-loading .dm-results { opacity: 0.45; pointer-events: none; transition: opacity 0.15s; }
/* List view. */
.dm-grid.is-shop.is-list { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.dm-grid.is-list .dm-card { flex-direction: row; align-items: stretch; }
.dm-grid.is-list .dm-card:hover { transform: translateY(-2px); }
.dm-grid.is-list .dm-card-img { flex: 0 0 min(14rem, 36%); border-bottom: 0; border-inline-end: 1px solid var(--dm-line); border-radius: max(0px, calc(var(--dm-r) - 1px)) 0 0 max(0px, calc(var(--dm-r) - 1px)); }
[dir='rtl'] .dm-grid.is-list .dm-card-img { border-radius: 0 max(0px, calc(var(--dm-r) - 1px)) max(0px, calc(var(--dm-r) - 1px)) 0; }
.dm-grid.is-list .dm-card-body { flex: 1; justify-content: center; min-width: 0; padding: 1.25rem 1.5rem; }
.dm-grid.is-list .dm-card-name { font-size: 1.1rem; }
/* The price slider: two handles on one track, the chosen span in the shop's colour. */
.dm-price-slider { position: relative; height: 1.75rem; margin: 0.15rem 0.45rem 0.6rem; --lo: 0%; --hi: 100%; }
.dm-price-track { position: absolute; inset-inline: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: linear-gradient(to right, var(--dm-line) var(--lo), var(--dm-primary) var(--lo), var(--dm-primary) var(--hi), var(--dm-line) var(--hi)); }
[dir='rtl'] .dm-price-track { transform: scaleX(-1); }
.dm-price-slider input[type='range'] { position: absolute; inset: 0 -0.45rem; width: calc(100% + 0.9rem); height: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dm-price-slider input[type='range']::-webkit-slider-runnable-track { background: none; }
.dm-price-slider input[type='range']::-moz-range-track { background: none; }
.dm-price-slider input[type='range']::-webkit-slider-thumb { width: 1.15rem; height: 1.15rem; border: 2px solid var(--dm-primary); border-radius: 50%; background: var(--dm-bg); box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); cursor: grab; pointer-events: auto; -webkit-appearance: none; appearance: none; }
.dm-price-slider input[type='range']::-moz-range-thumb { width: 1rem; height: 1rem; border: 2px solid var(--dm-primary); border-radius: 50%; background: var(--dm-bg); box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); cursor: grab; pointer-events: auto; }
.dm-price-slider input[type='range']:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-price-slider input[type='range']:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
@media (max-width: 48em) {
    .dm-view { display: none; }
    .dm-grid.is-list .dm-card-img { flex-basis: 40%; }
    .dm-grid.is-list .dm-card-body { padding: 0.75rem; }
    .dm-toolbar .dm-filters-open { padding-inline: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { .dm-shop.is-panel .dm-filters { transition: none; } }

/* Menu dropdowns: a thin line between items, and long names wrap onto a second line instead of
   running out of the box. A dropdown that would leave the screen opens the other way (dm.js). */
.dm-sub { width: max-content; min-width: 14rem; max-width: min(20rem, calc(100vw - 2rem)); padding: 0.4rem 0; border-radius: var(--dm-r-sm); }
.dm-sub > li + li::before { content: ''; position: absolute; top: 0; inset-inline: 1.5rem; border-top: 1px solid var(--dm-line); pointer-events: none; }
.dm-sub a { display: flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1.5rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.dm-sub a .dm-nav-t { flex: 1; min-width: 0; }
.dm-sub a .dm-i { flex: none; }
.dm-sub.is-flip { inset-inline-start: auto; inset-inline-end: -1.5rem; }
.dm-sub.is-deep.is-flip { inset-inline-end: 100%; }
.dm-sub.is-deep.is-flip { transform-origin: right; }
.dm-drawer-nav details a { display: block; overflow-wrap: anywhere; }
.dm-drawer-nav details a + a { border-top: 1px solid var(--dm-line); }

/* Category pictures, bigger (Chandru, 2026-11-01): continent maps nearly fill their square; the hover still fits inside. */
.dm-cat-pic.has-map .dm-map { padding: 4%; }
:is(a, button):is(:hover, :focus-visible) .dm-cat-pic.has-map .dm-map svg { transform: scale(1.04) rotate(-2deg); }

/* Icons beside menu and category names (Theme options › Header › Show icons): always in line with the name. */
.dm-ftree a, .dm-allcats-list > li > a, .dm-drawer-nav a { display: flex; align-items: center; gap: 0.5rem; }
.dm-ftree a > .dm-i, .dm-allcats-list > li > a > .dm-i:first-child, .dm-drawer-nav a > .dm-i:first-child { flex: none; color: var(--dm-muted); }
.dm-ftree a.is-on > .dm-i { color: var(--dm-primary); }
.dm-ftree a > span, .dm-allcats-list > li > a > span { flex: 1; min-width: 0; }

/* Newsletter sign-up above the footer (Theme options › Footer): the title and line, then the form. */
.dm-news.is-band .dm-wrap { gap: 1.25rem 2.5rem; }
.dm-news-copy { min-width: 0; flex: 1 1 22rem; }
.dm-news.is-band h2 { margin: 0; text-wrap: balance; }
.dm-news.is-band .dm-news-text { margin: 0.3rem 0 0; opacity: 0.8; }
@media (max-width: 575.98px) { .dm-news.is-band .dm-wrap { padding-block: 2rem; } }
/* Cloudflare Turnstile (Settings › Spam protection) in the one-line sign-up box: kept out of the row; if Cloudflare
   needs the visitor to tick, its small box floats at the bottom corner instead of being cut off. */
.dm-news-form .cf-turnstile { position: fixed; z-index: 70; inset-block-end: 1rem; inset-inline-end: 1rem; max-width: calc(100vw - 2rem); }

/* ---- Small hover and press feedback (2026-11-01): calm, quick, and only where something can be clicked.
   Mouse and trackpad only (hover: hover); none of it for visitors who ask for less motion. ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    /* Every button answers a press with a slight dip. */
    .dm-btn, .dm-icon-btn, .dm-notify-btn, .dm-qty button, .dm-opt-row button, .dm-pd-share dd > a, .dm-pd-share dd > button { transition-property: background-color, border-color, color, transform, box-shadow; transition-duration: 0.2s; }
    .dm-btn:active, .dm-icon-btn:active, .dm-notify-btn:active, .dm-qty button:active, .dm-opt-row button:active, .dm-pd-share dd > :active { transform: scale(0.96); }

    /* Header icons (account, compare, wishlist, cart): the icon lifts a little. */
    .dm-act .dm-i, .dm-account-ic .dm-i { transition: transform 0.25s var(--dm-ease); }
    .dm-act:hover .dm-i, .dm-account:hover .dm-account-ic .dm-i { transform: translateY(-2px); }
    .dm-act:hover em { animation: dm-hop 0.4s var(--dm-ease); }

    /* Wishlist and compare on the product page: the icon grows; the heart pops when it is added. */
    .dm-buy-wish .dm-i { transition: transform 0.25s var(--dm-ease); }
    .dm-buy-wish:hover .dm-i { transform: scale(1.12); }
    .dm-buy-wish[aria-pressed='true'] .dm-i { animation: dm-heart-pop 0.45s var(--dm-ease); }

    /* Promises under Add to cart and the promise strip: the icon nods. */
    .dm-pd-promises li .dm-i, .dm-feat > .dm-i { transition: transform 0.3s var(--dm-ease); }
    .dm-pd-promises li:hover .dm-i { transform: rotate(-8deg) scale(1.15); }
    .dm-feat:hover > .dm-i { transform: translateY(-3px) scale(1.06); }

    /* Footer links slide a touch and their dot fills out. */
    .dm-footer ul:not(.dm-social) a { display: inline-block; transition: color 0.2s, transform 0.25s var(--dm-ease); }
    .dm-footer ul:not(.dm-social) a::before { transition: opacity 0.2s, transform 0.25s var(--dm-ease); }
    .dm-footer ul:not(.dm-social) a:hover { transform: translateX(3px); }
    [dir='rtl'] .dm-footer ul:not(.dm-social) a:hover { transform: translateX(-3px); }
    .dm-footer ul:not(.dm-social) a:hover::before { opacity: 1; transform: translateY(-50%) scale(1.5); }

    /* Share buttons and payment marks rise slightly. */
    .dm-pd-share dd > a:hover, .dm-pd-share dd > button:hover { transform: translateY(-2px); }
    .dm-pay-icons > span { transition: transform 0.25s var(--dm-ease), opacity 0.2s; }
    .dm-pay-icons:hover > span { opacity: 0.55; }
    .dm-pay-icons > span:hover { opacity: 1; transform: translateY(-2px); }

    /* Product page: the big picture leans in a little; thumbnails zoom inside their frame. */
    .dm-gal-thumbs img { transition: transform 0.35s var(--dm-ease); }
    .dm-gal-thumbs button:hover img { transform: scale(1.08); }

    /* Blog cards: the picture zooms and the title takes the brand colour. */
    .dm-post:hover .dm-post-pic img { transform: scale(1.05); }
    .dm-post-title a { transition: color 0.2s; }
    .dm-post:hover .dm-post-title a { color: var(--dm-primary); }

    /* Facts on the product page (category, tags links) underline from the start. */
    .dm-pd-facts dd a { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size 0.3s var(--dm-ease), color 0.2s; }
    [dir='rtl'] .dm-pd-facts dd a { background-position: 100% 100%; }
    .dm-pd-facts dd a:hover { background-size: 100% 1px; }
}
@keyframes dm-heart-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 65% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes dm-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }

/* Sold out (or the chosen option is): "Notify Me When Available" takes the place of the Add to cart row and of
   the phone's sticky buy bar. Picking an option that is in stock brings them back (dm.js hides the notify box). */
[data-dm-product]:has(.dm-notify:not([hidden])) .dm-buy-row,
[data-dm-product]:has(.dm-notify:not([hidden])) .dm-buy-row + .dm-pd-note { display: none; }
body:has([data-dm-product] .dm-notify:not([hidden])) .dm-buybar { display: none; }
[data-dm-product]:has(.dm-notify:not([hidden])) .dm-notify { margin-top: 0.25rem; }
/* With no options to choose, the emptied buy box goes too (no stray divider lines). */
[data-dm-product]:has(.dm-notify:not([hidden])) .dm-buy:not(:has(fieldset, .dm-pdo)) { display: none; }
/* Every card button switched off (Theme options › Products, Settings › Product grids): no empty box. */
.dm-card-tools:not(:has(a, button)) { display: none; }
/* Keep the payment row clear of the back-to-top button that floats in the bottom corner. */
.dm-foot-line .dm-pay { margin-inline-end: 3.75rem; }

/* Product page tabs (Description, Specifications, Questions, Reviews): pill buttons on the left; the open one
   is solid (text colour) with its count in the brand colour. The text below uses the full width. */
.dm-tabs.is-pd { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; max-width: 100%; margin-bottom: 1.75rem; padding: 0; border: 0; background: none; }
.dm-tabs.is-pd button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.3rem; border: 1px solid var(--dm-line); border-radius: 999px; background: var(--dm-bg); color: var(--dm-text); font-size: 0.95rem; font-weight: 500; transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; }
.dm-tabs.is-pd button::after { content: none; }
.dm-tabs.is-pd button:hover { border-color: var(--dm-text); }
.dm-tabs.is-pd button[aria-selected='true'] { border-color: var(--dm-text); background: var(--dm-text); color: var(--dm-bg); }
.dm-tabs.is-pd button:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-tabs.is-pd button:active { transform: scale(0.97); }
.dm-tab-n { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: color-mix(in srgb, var(--dm-text) 8%, transparent); color: var(--dm-muted); font-size: 0.72rem; font-weight: 600; line-height: 1; transition: background-color 0.2s, color 0.2s; }
.dm-tabs.is-pd button[aria-selected='true'] .dm-tab-n { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-pd-tabs .dm-prose { max-width: none; font-size: 1.02rem; }
.dm-pd-tabs [data-dm-panel] { animation: dm-fade 0.3s; }
@media (max-width: 575.98px) {
    .dm-tabs.is-pd { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .dm-tabs.is-pd::-webkit-scrollbar { display: none; }
    .dm-tabs.is-pd button { flex: none; padding: 0.5rem 1rem; font-size: 0.88rem; }
}

/* Product page details (2026-11-01): calmer sizes so the column breathes; promises in regular weight; the facts
   (condition, category, tags, share) in their own block under a line, with room between the rows. */
.dm-pd:not(.is-quick) .dm-pd-info { gap: 1rem; }
.dm-pd:not(.is-quick) .dm-pd-name { font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.22; letter-spacing: -0.01em; }
.dm-pd:not(.is-quick) .dm-price.is-big b { font-size: 1.6rem; }
.dm-pd:not(.is-quick) .dm-price.is-big s { font-size: 0.98rem; }
.dm-pd-promises b { font-weight: 400; }
.dm-pd-promises { gap: 0.65rem; font-size: 0.92rem; }
.dm-pd-facts { gap: 0.7rem; margin-top: 0.4rem; padding-top: 1.1rem; border-top: 1px solid var(--dm-line); }

/* Product picture: zoom-in cursor; under the mouse it magnifies twice (the point under the cursor stays put);
   a click opens the photo viewer. */
[data-dm-zoom] { cursor: zoom-in; }
[data-dm-zoom]:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 3px; }
[data-dm-zoom] [data-dm-main] { transition: transform 0.35s var(--dm-ease); }
[data-dm-zoom].is-zoom [data-dm-main] { transform: scale(2); transition-duration: 0.2s; }
[data-dm-zoom].is-zoom .dm-badges { opacity: 0; transition: opacity 0.2s; }
@media (prefers-reduced-motion: reduce) { [data-dm-zoom] [data-dm-main] { transition: none; } }
.dm-lb-nav[hidden] { display: none; }
.dm-lb { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Review stars (Rive, artboard 200 × 70, stars 26.67 apart from x 46.67): drawn 15rem wide (scale 1.2), so each
   star is 2rem wide and the first starts 2.5rem in. The radio stars sit invisibly on top, one per animated star. */
.dm-rate-rive { display: none; }
.dm-rate-pick.is-rive .dm-rate-stage { position: relative; width: 15rem; height: 5.25rem; margin-block: -0.75rem -0.5rem; }
.dm-rate-pick.is-rive .dm-rate-rive { display: block; width: 100%; height: 100%; }
.dm-rate-pick.is-rive .dm-rate-row { position: absolute; top: 0; bottom: 0; left: 2.5rem; gap: 0; }
.dm-rate-pick.is-rive .dm-rate-row label { display: block; width: 2rem; height: 100%; }
.dm-rate-pick.is-rive .dm-rate-row label .dm-i { opacity: 0; }
.dm-rate-pick.is-rive .dm-rate-row input:focus-visible + label { outline-offset: -0.75rem; }
.dm-notify-hint { color: var(--dm-muted); font-size: 0.8rem; }

/* Back-in-stock popup ("Notify Me When Available"): an orange bell badge, the product, the email (filled in when
   signed in), one orange button and a privacy line; thanks inside the popup after sending. Without JavaScript the
   same box sits on the page. */
.dm-notify-box .dm-notify-shade, .dm-notify-box .dm-notify-x { display: none; }
.dm-notify-box.is-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); border: 0; background: none; }
.dm-notify-box.is-modal[hidden] { display: none; }
.dm-notify-box.is-modal .dm-notify-shade { position: absolute; inset: 0; display: block; background: rgb(0 0 0 / 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: dm-fade 0.25s; }
.dm-notify-panel { position: relative; display: grid; gap: 1rem; width: min(100%, 31rem); max-height: 100%; overflow-y: auto; }
.dm-notify-box.is-modal .dm-notify-panel { padding: clamp(1.4rem, 4vw, 2rem); border-radius: calc(var(--dm-r) + 0.5rem); background: var(--dm-bg); box-shadow: 0 30px 70px rgb(1 15 28 / 0.25); animation: dm-pop 0.35s var(--dm-ease); }
.dm-notify-box.is-modal .dm-notify-x { position: absolute; top: 0.75rem; inset-inline-end: 0.75rem; display: grid; }
.dm-notify-ask, .dm-notify-done { display: grid; gap: 1rem; }
.dm-notify-ask[hidden], .dm-notify-done[hidden] { display: none; }
.dm-notify-head { display: flex; align-items: flex-start; gap: 1rem; padding-inline-end: 2rem; }
.dm-notify-head h3 { margin: 0 0 0.25rem; font-size: 1.15rem; text-wrap: balance; }
.dm-notify-head p { margin: 0; color: var(--dm-muted); font-size: 0.92rem; }
.dm-notify-ic { display: grid; flex: none; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: calc(var(--dm-r) * 0.9); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-notify-ic .dm-i { transform-origin: 50% 15%; animation: dm-bell 1.2s ease-in-out 0.3s 2; }
.dm-notify-ic.is-done { margin-inline: auto; border-radius: 50%; background: color-mix(in srgb, #1f8a4c 14%, transparent); color: #1f8a4c; }
.dm-notify-ic.is-done .dm-i { animation: dm-heart-pop 0.45s var(--dm-ease); }
.dm-notify-product { display: flex; gap: 0.75rem; margin: 0; padding: 0.85rem 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-soft); font-size: 0.92rem; }
.dm-notify-product span { flex: none; color: var(--dm-muted); }
.dm-notify-product b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-notify-label { margin-bottom: -0.5rem; font-weight: 600; font-size: 0.9rem; }
.dm-notify-field { display: flex; align-items: center; gap: 0.7rem; padding-inline: 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); color: var(--dm-muted); transition: border-color 0.2s, box-shadow 0.2s; }
.dm-notify-field:focus-within { border-color: var(--dm-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary) 18%, transparent); }
.dm-notify-field input { flex: 1; min-width: 0; height: 3.1rem; padding: 0; border: 0; outline: 0; background: none; color: var(--dm-text); font: inherit; }
.dm-notify-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; min-height: 3.25rem; padding: 0.7rem 1.5rem; border: 0; border-radius: var(--dm-r-btn); background: var(--dm-primary); color: var(--dm-on-primary); font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: 1.02rem; font-weight: 700; cursor: pointer; transition: filter 0.2s, transform 0.2s; }
.dm-notify-submit:hover { filter: brightness(1.06); }
.dm-notify-submit:active { transform: scale(0.98); }
.dm-notify-submit:disabled { opacity: 0.7; cursor: progress; }
.dm-notify-hint { display: flex; align-items: center; justify-content: center; gap: 0.4rem; color: var(--dm-muted); font-size: 0.8rem; text-align: center; }
.dm-notify-done { justify-items: center; padding-block: 0.5rem; text-align: center; }
.dm-notify-done h3 { margin: 0; font-size: 1.15rem; }
.dm-notify-done p { margin: 0; color: var(--dm-muted); }
.dm-notify-btn:disabled { border-color: #1f8a4c; color: #1f8a4c; cursor: default; background: transparent; }
@media (prefers-reduced-motion: reduce) { .dm-notify-ic .dm-i, .dm-notify-panel, .dm-notify-shade { animation: none !important; } }

/* Every popup opens like the quick view (2026-11-01): the box unfolds from a line across its middle, the page
   behind fades and blurs, then the contents settle in one after another. Quick and calm; none of it for visitors
   who ask for less motion. Used by the sign-in popup, the newsletter popup, the back-in-stock popup and the photo viewer. */
@keyframes dm-reveal { from { clip-path: inset(49.5% 0 49.5% 0 round var(--rv-r, 18px)); } to { clip-path: inset(0 0 0 0 round var(--rv-r, 18px)); } }
@keyframes dm-shade-in { from { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
.dm-modal:not([data-dm-qv]) .dm-modal-shade, .dm-notify-box.is-modal .dm-notify-shade { animation: dm-shade-in 0.3s var(--dm-ease) both; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dm-modal:not([data-dm-qv]) .dm-modal-box { --rv-r: var(--dm-r); animation: dm-reveal 0.32s cubic-bezier(0.76, 0, 0.24, 1) both; }
.dm-notify-box.is-modal .dm-notify-panel { --rv-r: calc(var(--dm-r) + 0.5rem); animation: dm-reveal 0.32s cubic-bezier(0.76, 0, 0.24, 1) both; }
.dm-modal:not([data-dm-qv]) .dm-modal-box > *, .dm-notify-box.is-modal .dm-notify-ask > *, .dm-notify-box.is-modal .dm-notify-done > * { animation: dm-qv-focus 0.38s cubic-bezier(0.33, 1, 0.68, 1) both; animation-delay: 0.2s; }
.dm-modal:not([data-dm-qv]) .dm-modal-box > :nth-child(2), .dm-notify-box.is-modal :is(.dm-notify-ask, .dm-notify-done) > :nth-child(2) { animation-delay: 0.235s; }
.dm-modal:not([data-dm-qv]) .dm-modal-box > :nth-child(3), .dm-notify-box.is-modal :is(.dm-notify-ask, .dm-notify-done) > :nth-child(3) { animation-delay: 0.27s; }
.dm-modal:not([data-dm-qv]) .dm-modal-box > :nth-child(n+4), .dm-notify-box.is-modal :is(.dm-notify-ask, .dm-notify-done) > :nth-child(n+4) { animation-delay: 0.305s; }
.dm-notify-box.is-modal .dm-notify-x { animation: dm-fade 0.3s 0.25s both; }
.dm-lb .dm-lb-stage { --rv-r: 0px; animation: dm-reveal 0.32s cubic-bezier(0.76, 0, 0.24, 1) both; }
@media (prefers-reduced-motion: reduce) {
    .dm-modal .dm-modal-box, .dm-modal .dm-modal-box > *, .dm-notify-panel, .dm-notify-panel *, .dm-lb .dm-lb-stage, .dm-modal-shade, .dm-notify-shade { animation: none !important; clip-path: none !important; }
}
/* Long product names never widen the popup: the columns may shrink and the name wraps to two lines at most. */
.dm-notify-panel, .dm-notify-ask, .dm-notify-done { grid-template-columns: minmax(0, 1fr); }
.dm-notify-panel { overflow-x: hidden; }
.dm-notify-ask > *, .dm-notify-done > * { min-width: 0; }
.dm-notify-product b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; }

/* Back-in-stock popup, option C (2026-11-01): centred and light. A soft ringing bell, short words, the product in
   muted text, and one rounded field with a black button inside that turns brand orange on hover. On phones it
   rises from the bottom as a sheet. */
.dm-notify-ask { justify-items: center; gap: 0.85rem; text-align: center; }
.dm-notify-ask .dm-notify-ic { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); box-shadow: 0 0 0 8px color-mix(in srgb, var(--dm-primary) 6%, transparent); }
.dm-notify-ask h3 { margin: 0.35rem 0 0; font-size: 1.2rem; text-wrap: balance; }
.dm-notify-sub { max-width: 34ch; margin: -0.4rem 0 0; color: var(--dm-muted); font-size: 0.92rem; }
.dm-notify-ask .dm-notify-product { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-width: 36ch; margin: 0; padding: 0; overflow: hidden; border: 0; background: none; color: var(--dm-muted); font-size: 0.9rem; font-weight: 500; }
.dm-notify-join { display: flex; width: 100%; padding: 0.3rem; border: 1px solid var(--dm-line); border-radius: 999px; background: var(--dm-bg); transition: border-color 0.2s, box-shadow 0.2s; }
.dm-notify-join:focus-within { border-color: var(--dm-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary) 18%, transparent); }
.dm-notify-join input { flex: 1; min-width: 0; height: 2.8rem; padding: 0 1rem; border: 0; outline: 0; background: none; color: var(--dm-text); font: inherit; }
.dm-notify-ask .dm-notify-submit { width: auto; min-height: 2.8rem; padding: 0 1.4rem; border-radius: 999px; background: #000; color: #fff; font-size: 0.92rem; transition: background-color 0.2s, color 0.2s, transform 0.15s; }
.dm-notify-ask .dm-notify-submit:hover, .dm-notify-ask .dm-notify-submit:focus-visible { filter: none; background: #ff6d00; color: #000; }
.dm-notify-ask .dm-notify-msg { margin-top: -0.3rem; }
.dm-notify-box.is-modal .dm-notify-panel { width: min(100%, 28rem); }
@media (max-width: 420px) {
    .dm-notify-join { flex-direction: column; gap: 0.35rem; border-radius: 1rem; }
    .dm-notify-ask .dm-notify-submit { width: 100%; }
}
@media (max-width: 575.98px) {
    .dm-notify-box.is-modal { place-items: end stretch; padding: 0; }
    .dm-notify-box.is-modal .dm-notify-panel { width: 100%; border-radius: calc(var(--dm-r) + 0.5rem) calc(var(--dm-r) + 0.5rem) 0 0; padding-bottom: calc(clamp(1.4rem, 4vw, 2rem) + env(safe-area-inset-bottom, 0px)); animation: dm-sheet-up 0.36s cubic-bezier(0.33, 1, 0.68, 1) both; }
}
@keyframes dm-sheet-up { from { transform: translateY(100%); } }

/* Back-in-stock thanks, the fist bump (2026-11-01): the Rive file plays the up-and-down bump and the main bump across
   the top of the popup, then the two fists glide apart and a bell rings between them. Without Rive the green tick shows. */
.dm-notify-done.has-bump .dm-notify-ic.is-done { display: none; }
.dm-bump { position: relative; width: calc(100% + 2 * clamp(1.4rem, 4vw, 2rem)); height: 10.5rem; margin: calc(-1 * clamp(1.4rem, 4vw, 2rem)) 0 -0.75rem; overflow: hidden; }
.dm-bump[hidden] { display: none; }
.dm-bump canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dm-bump-ghost { position: absolute; top: 0; left: 0; width: 100%; height: 10.5rem; opacity: 0; pointer-events: none; }
.dm-bump .dm-bump-half { transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
.dm-bump.is-apart .dm-bump-half.is-l { transform: translateX(-11%); }
.dm-bump.is-apart .dm-bump-half.is-r { transform: translateX(11%); }
[dir=rtl] .dm-bump canvas { direction: ltr; }
.dm-bump-bell { position: absolute; top: 50%; left: 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--dm-bg); color: var(--dm-primary); box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--dm-primary) 18%, transparent); opacity: 0; transform: scale(0.2); pointer-events: none; }
.dm-bump-bell .dm-i { transform-origin: 50% 10%; }
.dm-bump.is-ring .dm-bump-bell { animation: dm-bump-bell-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards; }
.dm-bump.is-ring .dm-bump-bell .dm-i { animation: dm-bell 1.1s ease-in-out 0.4s 2; }
.dm-bump.is-held .dm-bump-bell { top: 22%; }
@keyframes dm-bump-bell-in { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dm-bump .dm-bump-half { transition: none; } .dm-bump.is-ring .dm-bump-bell, .dm-bump.is-ring .dm-bump-bell .dm-i { animation: none; opacity: 1; transform: none; } }

/* Footer design "Statement" (Theme options › Footer, 2026-11-01): one black block. An orange line on top, the newsletter
   headline large with its last word in orange beside an outlined email field, then the store, the footer menus (any
   number, any length: they wrap and flow onto new rows) and a bottom bar with the payment icons in white. */
.dm-news.is-statement { margin-top: clamp(3rem, 6vw, 5rem); border-top: 6px solid var(--dm-primary); background: #000; color: #d6d3d1; }
.dm-news.is-statement .dm-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem) 2.5rem; border-bottom: 1px solid #292524; }
.dm-news.is-statement h2 { margin: 0; color: #fff; font: 700 clamp(2rem, 5.5vw, 4rem)/1.12 var(--dm-font-head); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.dm-news.is-statement h2 em { color: var(--dm-primary); font-style: normal; }
.dm-news-side { display: grid; gap: 0.8rem; min-width: 0; }
.dm-news.is-statement .dm-news-text { margin: 0; max-width: 46ch; opacity: 1; font-size: 0.95rem; }
.dm-news.is-statement .dm-news-box { flex: none; width: 100%; max-width: none; }
.dm-news.is-statement .dm-news-form { max-width: none; border: 1px solid #44403c; background: transparent; }
.dm-news.is-statement .dm-news-form:focus-within { border-color: var(--dm-primary); }
.dm-news.is-statement .dm-news-form input { color: #fff; }
.dm-news.is-statement .dm-news-form input::placeholder { color: #a8a29e; }
.dm-news.is-statement .dm-news-form .dm-btn { margin: 0.25rem; border-radius: calc(var(--dm-r-btn) - 2px); border-color: var(--dm-primary); background: var(--dm-primary); color: #000; }
.dm-news.is-statement .dm-news-form .dm-btn:hover, .dm-news.is-statement .dm-news-form .dm-btn:focus-visible { border-color: #fff; background: #fff; color: #000; }
@media (max-width: 820px) { .dm-news.is-statement .dm-wrap { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.dm-footer.is-statement { --dm-footer-heading: #fff; --dm-footer-text: #d6d3d1; --dm-footer-hover: var(--dm-primary); border-top: 6px solid var(--dm-primary); background: #000; color: #d6d3d1; }
.dm-news.is-statement + .dm-footer.is-statement { margin-top: 0; border-top: 0; }
.dm-footer.is-statement .dm-foot-grid { grid-template-columns: minmax(min(100%, 15rem), 1.4fr) repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); padding-block: 2.8rem 2.2rem; }
.dm-footer.is-statement .dm-foot-about { grid-row: span 2; }
.dm-footer.is-statement h3, .dm-footer.is-statement ul a, .dm-footer.is-statement .dm-foot-contact span { overflow-wrap: anywhere; hyphens: auto; }
.dm-footer.is-statement h3 { text-wrap: balance; }
/* A footer link with its own icon (Website › Menus) shows the icon instead of the dot. */
.dm-footer ul:not(.dm-social) a:has(> .dm-i) { display: inline-flex; align-items: center; gap: 0.5rem; padding-inline-start: 0; }
.dm-footer ul:not(.dm-social) a:has(> .dm-i)::before { content: none; }
.dm-footer ul:not(.dm-social) a > .dm-i { flex: none; opacity: 0.85; transition: transform 0.25s var(--dm-ease); }
.dm-footer ul:not(.dm-social) a:hover > .dm-i { opacity: 1; transform: translateX(2px); }
.dm-footer.is-statement .dm-foot-line { border-top-color: #292524; }
.dm-footer.is-statement .dm-pay { color: #fff; }
.dm-footer.is-statement .dm-pay-icons { gap: 0.8rem 1.4rem; }
.dm-footer.is-statement .dm-pay-i { height: 1.85rem; }
@media (max-width: 991.98px) { .dm-footer.is-statement .dm-foot-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); } .dm-footer.is-statement .dm-foot-about { grid-column: 1 / -1; grid-row: auto; } }
.dm-footer.is-statement .dm-foot-phone { white-space: nowrap; font-size: clamp(1.15rem, 4.5vw, 1.5rem); }
/* Brand colours on the black footer: each mark on a small white tile so dark logos stay readable. */
.dm-footer.is-statement .dm-pay-icons.is-color > span { padding: 0.3rem 0.55rem; border-radius: 6px; background: #fff; }
.dm-footer.is-statement .dm-pay-icons.is-color .dm-pay-i { height: 1.45rem; }

/* Section titles (2026-11-01): a little bigger, no swoosh under the word and no line across; an orange bar beside the
   title and its subtitle, and the "See all" link as text beside a round arrow that tips and fills orange on hover. */
.dm-h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.15; overflow-wrap: anywhere; }
.dm-h2.is-sm { font-size: 1.4rem; }
.dm-h2::after, .dm-h2.is-sm::after { content: none; }
.dm-sec-head.has-line::after { content: none; }
.dm-sec-head { align-items: flex-end; }
.dm-sec-head:not(.is-center) > .dm-sec-title, .dm-sec-head:not(.is-center) > .dm-h2:first-child { padding-inline-start: 1rem; border-inline-start: 4px solid var(--dm-primary); min-width: 0; }
.dm-sec-head > .dm-sec-title { gap: 0.45rem; }
.dm-sec-head > a.dm-btn, .dm-sec-head > a.dm-link { display: inline-flex; align-items: center; gap: 0.75rem; height: auto; padding: 0; border: 0; background: none; color: var(--dm-text); font-weight: 600; white-space: nowrap; }
.dm-sec-head > a.dm-btn:hover, .dm-sec-head > a.dm-btn:focus-visible { border: 0; background: none; color: var(--dm-text); transform: none; }
.dm-sec-head > a > .dm-i { box-sizing: content-box; flex: none; width: 1.1rem; height: 1.1rem; padding: 0.8rem; border: 1.5px solid currentColor; border-radius: 50%; transition: background-color 0.25s, border-color 0.25s, color 0.25s, rotate 0.3s var(--dm-ease); }
.dm-sec-head > a:hover > .dm-i, .dm-sec-head > a:focus-visible > .dm-i { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); rotate: -45deg; transform: none; }
[dir='rtl'] .dm-sec-head > a:hover > .dm-i.is-dir, [dir='rtl'] .dm-sec-head > a:focus-visible > .dm-i.is-dir { rotate: 45deg; transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .dm-sec-head > a:hover > .dm-i { rotate: none; } }
/* On a dark band the link and arrow follow the band's text colour. */
.dm-deal .dm-sec-head > a.dm-btn, .dm-deal .dm-sec-head > a.dm-btn:hover { color: inherit; }
/* Tabs beside a section title: the chosen tab gets a straight orange line (matching the title bar) that slides in. */
.dm-tabs button::after { inset-inline: 0; width: auto; bottom: -0.45rem; height: 3px; border-radius: 2px; -webkit-mask: none; mask: none; opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--dm-ease); }
[dir='rtl'] .dm-tabs button::after { transform-origin: right; }
.dm-tabs button[aria-selected='true']::after { transform: scaleX(1); }
.dm-tabs button:hover::after { transform: scaleX(0.4); }
.dm-tabs button[aria-selected='true']:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .dm-tabs button::after { transition: none; } }

/* Back to top: a light ring keeps it visible on dark sections (the footer), and an orange arc on it fills as you scroll. */
.dm-top-btn { overflow: visible; }
.dm-top-ring { display: none; position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.dm-top-ring circle { fill: none; stroke-width: 2.5; }
.dm-top-track { stroke: color-mix(in srgb, var(--dm-text) 16%, var(--dm-bg)); }
.dm-top-prog { stroke: var(--dm-primary); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.12s linear; }
.dm-top-btn > .dm-i { position: relative; }
@media (prefers-reduced-motion: reduce) { .dm-top-prog { transition: none; } }
/* Email confirmation reminder in the account area: message, then "Send the link again" at the end (wraps under on phones). */
.dm-confirm { flex-wrap: wrap; }
.dm-confirm > span { flex: 1 1 16rem; min-width: 0; }
.dm-confirm form { margin: 0; }
.dm-confirm button.dm-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Date of birth: the calendar button sits where the password eye does (it has one icon, always shown);
   the calendar opens over the sign-up popup without dimming it again. */
.dm-ap-cal svg:last-child { display: block; }
.dm-ap-cal[aria-expanded="true"] { color: var(--dm-primary); }
.fp-dp-veil.is-float.is-soft { background: transparent; animation: none; }
.fp-dp-pop.is-float .fp-dp-mtitle { font-family: var(--dm-font-head); }
/* Promo banner without a picture: the text uses the whole card. */
.dm-banner.no-pic .dm-banner-text { max-width: 100%; }
/* Promo banners: one shape (1200 × 880, the size to upload) so pictures fit exactly. "Fills the banner" shows the
   picture as the whole background with the text on top, untouched (the artwork carries its own colours). */
.dm-banners .dm-banner { aspect-ratio: 15 / 11; min-height: 0; }
.dm-banner.is-cover img, .dm-banner.is-cover .dm-lottie { inset: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
.dm-banner.is-cover:hover img, .dm-banner.is-cover:hover .dm-lottie { transform: scale(1.04); }
/* Staff only: where the picture goes and its size. */
.dm-banner-size { position: absolute; inset-block: 1rem; inset-inline-end: 1rem; width: 38%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.75rem; border: 1.5px dashed color-mix(in srgb, currentColor 35%, transparent); border-radius: max(calc(var(--dm-r) - 0.35rem), 2px); font-size: 0.8rem; font-weight: 600; text-align: center; opacity: 0.75; }
.dm-banner-size small { font-size: 0.7rem; font-weight: 400; }
.dm-banner.no-pic:has(.dm-banner-size) .dm-banner-text { max-width: 55%; }
/* Promo banners: titles start at the same height and every button sits on the same line near the bottom, however
   many lines the title takes. */
.dm-banners .dm-banner { align-items: stretch; padding-block: clamp(1.75rem, 3.6vw, 3.25rem); }
.dm-banners .dm-banner-text { justify-content: flex-start; }
.dm-banners .dm-banner-text b { margin-bottom: 1rem; }
.dm-banners .dm-banner-text .dm-link { margin-top: auto; }
/* Promo banners keep the computer's proportions at every width (Chandru, 2026-11-07: on phones the words looked small
   in a big empty card). Space and words follow the banner's own width, not the screen's: the padding in % of the
   banner, the words in cqi (1% of the width inside the banner). A 405 px banner on a computer looks as before; a full-width
   banner on a phone gets the same space and word sizes for its width. Capped so a wide banner doesn't shout. */
.dm-banners .dm-banner { container-type: inline-size; padding: min(12%, 3.25rem) min(9.9%, 3rem) min(11%, 3rem); }
.dm-banners .dm-banner-text b { font-size: clamp(1.15rem, 8.6cqi, 2.25rem); }
.dm-banners .dm-banner-kicker { font-size: clamp(0.8rem, 4.4cqi, 1.05rem); }
.dm-banners .dm-banner .dm-link { font-size: clamp(0.8rem, 4cqi, 0.95rem); }

/* ---- Wallet (Wallet app): My account › Wallet and "Pay with wallet" ---- */
.dm-wl { display: flex; flex-direction: column; gap: 1.5rem; }
.dm-wl-card { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: space-between; gap: 1.25rem; min-height: 12.5rem; padding: 1.5rem 1.5rem 1.3rem; border-radius: max(var(--dm-r), 1.1rem); background: var(--dm-secondary, #0d0d0d); color: var(--dm-on-secondary, #fff); }
.dm-wl-card::before { content: ""; position: absolute; z-index: -1; width: 15rem; height: 15rem; inset-inline-end: -6.5rem; top: -8rem; border: 2.2rem solid var(--dm-primary); border-radius: 50%; transition: transform 0.8s var(--dm-ease); }
.dm-wl-card::after { content: ""; position: absolute; z-index: -1; width: 6rem; height: 6rem; inset-inline-end: -1.5rem; bottom: -3.5rem; border-radius: 50%; background: color-mix(in srgb, var(--dm-primary) 35%, transparent); }
.dm-wl-card:hover::before { transform: rotate(18deg) scale(1.04); }
.dm-wl-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.82rem; }
.dm-wl-top b { font-family: var(--dm-font-head); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.dm-wl-top span { opacity: 0.8; }
.dm-wl-bal small { display: block; margin-bottom: 0.2rem; font-size: 0.8rem; opacity: 0.7; }
.dm-wl-num { font: 600 clamp(2rem, 6vw, 2.7rem)/1.1 var(--dm-font-head); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.dm-wl-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.dm-wl-bot > span { position: relative; font-size: 0.8rem; opacity: 0.75; }
.dm-wl-addbtn { display: inline-flex; align-items: center; gap: 0.45rem; height: 2.6rem; padding: 0 1.2rem; border-radius: var(--dm-r-btn, 0.75rem); background: #fff; color: #000; font-weight: 600; font-size: 0.9rem; transition: transform 0.2s var(--dm-ease); }
.dm-wl-addbtn:hover { transform: translateY(-1px); }
.dm-wl-addbtn:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 3px; }
.dm-wl-done { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; border-radius: var(--dm-r); background: color-mix(in srgb, #1f8a4c 10%, var(--dm-bg)); }
.dm-wl-done.is-wait { background: var(--dm-primary-soft); }
.dm-wl-done b { display: block; font-family: var(--dm-font-head); font-weight: 600; }
.dm-wl-done p { margin: 0.15rem 0 0; color: var(--dm-muted); font-size: 0.86rem; }
.dm-wl-tick { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: #1f8a4c; color: #fff; animation: dm-wl-pop 0.5s cubic-bezier(0.34, 1.45, 0.64, 1); }
.dm-wl-done.is-wait .dm-wl-tick { background: var(--dm-primary); }
@keyframes dm-wl-pop { from { transform: scale(0.3); opacity: 0; } }
.dm-wl-add { padding: 1.4rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); animation: dm-wl-in 0.35s var(--dm-ease); }
.dm-wl-add[hidden] { display: none; }
@keyframes dm-wl-in { from { opacity: 0; transform: translateY(-6px); } }
.dm-wl-add > p { margin: 0.2rem 0 1rem; font-size: 0.88rem; }
.dm-wl-amount { display: flex; align-items: baseline; gap: 0.3rem; margin-bottom: 0.9rem; padding: 0.3rem 0 0.4rem; border-bottom: 2px solid var(--dm-text); transition: border-color 0.2s; }
.dm-wl-amount:focus-within { border-color: var(--dm-primary); }
.dm-wl-amount span { color: var(--dm-muted); font: 500 1.6rem var(--dm-font-head); }
.dm-wl-amount input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--dm-text); font: 600 2rem var(--dm-font-head); font-variant-numeric: tabular-nums; }
.dm-wl-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.dm-wl-quick button { padding: 0.5rem 0.95rem; border: 1px solid var(--dm-line); border-radius: 999px; background: var(--dm-bg); color: var(--dm-text); font: 500 0.86rem var(--dm-font); cursor: pointer; transition: border-color 0.2s, background-color 0.2s, transform 0.25s cubic-bezier(0.34, 1.45, 0.64, 1); }
.dm-wl-quick button:hover { transform: translateY(-2px); }
.dm-wl-quick button[aria-pressed="true"] { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
.dm-wl-quick em { margin-inline-start: 0.3rem; color: var(--dm-primary); font-size: 0.74rem; font-style: normal; }
.dm-wl-bonus { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; padding: 0.75rem 0.9rem; border-radius: var(--dm-r-sm); background: var(--dm-primary-soft); font-size: 0.86rem; transition: opacity 0.2s; }
.dm-wl-bonus .dm-i { flex: none; color: var(--dm-primary); }
.dm-wl-bonus b { color: var(--dm-primary); }
.dm-wl-bonus.is-off { opacity: 0.6; }
.dm-wl-sum { display: grid; gap: 0.35rem; margin-bottom: 1rem; font-size: 0.9rem; }
.dm-wl-sum div { display: flex; justify-content: space-between; gap: 1rem; }
.dm-wl-sum b { font-weight: 500; font-variant-numeric: tabular-nums; }
.dm-wl-sum .is-total { padding-top: 0.45rem; border-top: 1px dashed var(--dm-line); }
.dm-wl-sum .is-total b, .dm-wl-sum .is-total span { font-weight: 600; }
.dm-wl-gw { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.dm-wl-gw label { position: relative; cursor: pointer; }
.dm-wl-gw input { position: absolute; opacity: 0; }
.dm-wl-gw span { display: inline-block; padding: 0.55rem 0.95rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); font-size: 0.86rem; transition: border-color 0.2s, background-color 0.2s; }
.dm-wl-gw input:checked + span { border-color: var(--dm-primary); background: var(--dm-primary-soft); font-weight: 500; }
.dm-wl-gw input:focus-visible + span { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-wl-pay { width: 100%; justify-content: center; background: var(--dm-primary); color: var(--dm-on-primary, #fff); border-color: var(--dm-primary); }
.dm-wl-pay:disabled { opacity: 0.55; cursor: not-allowed; }
.dm-wl-note { margin: 0.7rem 0 0; color: var(--dm-muted); font-size: 0.76rem; text-align: center; }
.dm-wl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.dm-wl-stats div { min-width: 0; padding: 0.8rem 0.9rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); }
.dm-wl-stats small { display: block; color: var(--dm-muted); font-size: 0.75rem; }
.dm-wl-stats b { font: 600 0.98rem var(--dm-font-head); font-variant-numeric: tabular-nums; }
@media (max-width: 30em) { .dm-wl-stats { grid-template-columns: 1fr; } }
.dm-wl-perks { display: grid; gap: 0.5rem; margin: -0.5rem 0 0; padding: 0; list-style: none; font-size: 0.86rem; }
.dm-wl-perks li { display: flex; align-items: flex-start; gap: 0.55rem; }
.dm-wl-perks .dm-i { flex: none; margin-top: 0.15rem; color: var(--dm-primary); }
.dm-wl-hist ul { margin: 0; padding: 0; list-style: none; }
.dm-wl-month { margin: 1rem 0 0.2rem; color: var(--dm-muted); font-size: 0.75rem; font-weight: 600; }
.dm-wl-hist li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; padding: 0.7rem 0; border-bottom: 1px solid var(--dm-line); }
.dm-wl-hist li:last-child { border-bottom: 0; }
.dm-wl-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--dm-r-sm); background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-wl-ico.is-out { background: var(--dm-soft); color: var(--dm-text); }
.dm-wl-what { min-width: 0; }
.dm-wl-what b { display: block; overflow: hidden; font-size: 0.9rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.dm-wl-what small { color: var(--dm-muted); font-size: 0.78rem; }
.dm-wl-amt { font-size: 0.92rem; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.dm-wl-amt.is-in { color: #1f8a4c; }
/* Checkout and cart: one switch */
.dm-wlbox { display: flex; flex-direction: column; gap: 0.45rem; }
.dm-wlbox-use { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 0.85rem; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); color: var(--dm-text); font: inherit; text-align: start; cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
.dm-wlbox-use:hover { border-color: var(--dm-primary); }
.dm-wlbox-use:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-wlbox.is-on .dm-wlbox-use { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
.dm-wlbox-chip { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: var(--dm-r-sm); background: var(--dm-secondary, #0d0d0d); color: var(--dm-on-secondary, #fff); }
.dm-wlbox-txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dm-wlbox-txt b { font-size: 0.9rem; }
.dm-wlbox-txt small { color: var(--dm-muted); font-size: 0.78rem; }
.dm-wlbox-switch { position: relative; flex: none; width: 2.7rem; height: 1.55rem; border-radius: 1rem; background: color-mix(in srgb, var(--dm-text) 18%, var(--dm-bg)); transition: background-color 0.25s; }
.dm-wlbox-switch i { position: absolute; top: 0.2rem; inset-inline-start: 0.2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform 0.3s cubic-bezier(0.34, 1.45, 0.64, 1); }
.dm-wlbox.is-on .dm-wlbox-switch { background: var(--dm-primary); }
.dm-wlbox.is-on .dm-wlbox-switch i { transform: translateX(1.15rem); }
[dir='rtl'] .dm-wlbox.is-on .dm-wlbox-switch i { transform: translateX(-1.15rem); }
.dm-wlbox-note { margin: 0; color: #1f8a4c; font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .dm-wl-card::before, .dm-wl-tick, .dm-wl-add, .dm-wl-quick button, .dm-wlbox-switch i { animation: none; transition: none; } }
.dm-cart-line.is-gift .dm-cart-unit, .dm-cart-line.is-gift .dm-cart-total { color: var(--dm-primary); }
.dm-cart-giftqty { color: var(--dm-muted); font-variant-numeric: tabular-nums; }
.dm-cartmini-gift { display: block; color: var(--dm-primary); font-size: 0.78rem; font-weight: 600; }

/* ---- Forge Desk: Help centre, Ask for help, a ticket, My account › Support (flat: lines and tints) ---- */
.dm-sp-hero { border-bottom: 1px solid var(--dm-line); }
.dm-sp-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2.5rem; align-items: end; padding-block: 2.75rem 2rem; }
.dm-sp-eyebrow { margin: 0 0 0.6rem; color: var(--dm-muted); font-weight: 500; }
.dm-sp-title { margin: 0 0 1.25rem; font: 600 clamp(2rem, 4.2vw, 3rem)/1.08 var(--dm-font-head); letter-spacing: -0.035em; text-wrap: balance; }
.dm-sp-search { display: flex; align-items: center; gap: 0.6rem; height: 3.5rem; padding: 0 0.4rem 0 1.1rem; border: 1.5px solid var(--dm-text); border-radius: var(--dm-r); background: var(--dm-bg); }
.dm-sp-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1rem; outline: none; }
.dm-sp-search .dm-btn { height: 2.6rem; }
.dm-sp-search .dm-btn:hover { transform: none; }
.dm-sp-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0.9rem 0 0; color: var(--dm-muted); font-size: 0.82rem; }
.dm-sp-pop a { padding: 0.3rem 0.8rem; border: 1px solid var(--dm-line); border-radius: 99px; color: var(--dm-text); transition: border-color 0.3s var(--dm-ease); }
.dm-sp-pop a:hover { border-color: var(--dm-primary); }
.dm-sp-order { padding: 1.1rem 1.15rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-sp-order-top, .dm-sp-ord { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.dm-sp-ord > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dm-sp-search, .dm-sp-order { min-width: 0; max-width: 100%; }
.dm-sp-order-pic { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: var(--dm-r-sm); background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-sp-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dm-sp-grow small, .dm-sp-ord small { color: var(--dm-muted); font-size: 0.78rem; }
.dm-sp-grow b, .dm-sp-ord b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-sp-chip { flex: none; padding: 0.22rem 0.6rem; border-radius: var(--dm-r-sm); background: var(--dm-primary-soft); color: var(--dm-primary); font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.dm-sp-chip.is-solved, .dm-sp-chip.is-ok { background: color-mix(in srgb, #16a34a 13%, var(--dm-bg)); color: #15803d; }
.dm-sp-chip.is-waiting { background: color-mix(in srgb, #2563eb 12%, var(--dm-bg)); color: #1d4ed8; }
.dm-sp-chip.is-bad { background: color-mix(in srgb, #dc2626 11%, var(--dm-bg)); color: #b91c1c; }
.dm-sp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; margin: 1.1rem 0 0.2rem; padding: 0; list-style: none; }
.dm-sp-steps li { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.75rem; color: var(--dm-muted); }
.dm-sp-steps i { display: block; height: 0.32rem; border-radius: 99px; background: var(--dm-line); }
.dm-sp-steps li.is-done i { background: var(--dm-primary); transform-origin: left; animation: dm-sp-grow 0.8s var(--dm-ease) both; }
.dm-sp-steps li.is-done:nth-child(2) i { animation-delay: 0.08s; } .dm-sp-steps li.is-done:nth-child(3) i { animation-delay: 0.16s; } .dm-sp-steps li.is-done:nth-child(4) i { animation-delay: 0.24s; }
.dm-sp-steps li.is-done span { color: var(--dm-text); }
@keyframes dm-sp-grow { from { transform: scaleX(0); } }
.dm-sp-qa { display: flex; gap: 0.5rem; margin-top: 1rem; }
.dm-sp-qa .dm-btn { flex: 1; height: 2.5rem; padding: 0 0.6rem; font-size: 0.82rem; }
.dm-sp-body { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; padding-block: 2rem 3.5rem; }
.dm-sp-h { margin: 0 0 0.85rem; font: 600 1.02rem/1.3 var(--dm-font-head); letter-spacing: -0.02em; }
.dm-sp-main { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.dm-sp-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.dm-sp-topic { display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); color: inherit; transition: border-color 0.35s var(--dm-ease), transform 0.45s var(--dm-ease); }
.dm-sp-topic:hover { border-color: var(--dm-primary); transform: translateY(-2px); }
.dm-sp-topic b { font-size: 0.95rem; }
.dm-sp-topic > span:last-child { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--dm-muted); font-size: 0.8rem; }
.dm-sp-topic:hover > span:last-child .dm-i { transform: translateX(3px); }
.dm-sp-topic > span:last-child .dm-i { transition: transform 0.4s var(--dm-ease); }
.dm-sp-ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: var(--dm-r-sm); }
.dm-sp-ic.is-o { background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-sp-ic.is-b { background: color-mix(in srgb, #2563eb 11%, var(--dm-bg)); color: #1d4ed8; }
.dm-sp-ic.is-g { background: color-mix(in srgb, #16a34a 12%, var(--dm-bg)); color: #15803d; }
.dm-sp-ic.is-v { background: color-mix(in srgb, #7c3aed 11%, var(--dm-bg)); color: #6d28d9; }
.dm-sp-ic.is-y { background: color-mix(in srgb, #ca8a04 14%, var(--dm-bg)); color: #a16207; }
.dm-sp-ic.is-s { background: var(--dm-soft); color: var(--dm-muted); }
.dm-sp-answer { border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); margin-bottom: 0.5rem; }
.dm-sp-answer summary { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.dm-sp-answer[open] summary .dm-i { transform: rotate(180deg); }
.dm-sp-answer-body { padding: 0 1rem 1rem; color: var(--dm-muted); }
.dm-sp-side { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
.dm-sp-tk { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0; border-bottom: 1px solid var(--dm-line-soft); color: inherit; }
.dm-sp-tk:hover b { color: var(--dm-primary); }
.dm-sp-dot { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--dm-primary); }
.dm-sp-dot.is-solved { background: var(--dm-line); }
.dm-sp-dot.is-waiting { background: #2563eb; }
.dm-sp-none { font-size: 0.88rem; }
.dm-sp-all { display: inline-block; margin-top: 0.7rem; font-size: 0.88rem; }
.dm-sp-contact { display: flex; flex-direction: column; gap: 0.6rem; }
.dm-sp-ct { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); color: inherit; transition: border-color 0.35s var(--dm-ease); }
.dm-sp-ct:hover { border-color: var(--dm-primary); }
.dm-sp-ct > .dm-i { color: var(--dm-muted); }
.dm-sp-live { display: inline-block; width: 0.45rem; height: 0.45rem; margin-inline-end: 0.35rem; border-radius: 50%; background: #16a34a; vertical-align: middle; }
.dm-sp-live.is-off { background: var(--dm-muted); }

.dm-sp-new { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2rem; padding-block: 1.5rem 3.5rem; }
.dm-sp-form { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.5rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-sp-form > .dm-btn { align-self: flex-start; }
.dm-sp-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dm-sp-fs { margin: 0; padding: 0; border: 0; }
.dm-sp-fs legend { margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 600; }
.dm-sp-pick { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.dm-sp-pick input { position: absolute; opacity: 0; pointer-events: none; }
.dm-sp-pick span { display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1rem; border: 1px solid var(--dm-line); border-radius: 99px; font-size: 0.88rem; cursor: pointer; transition: border-color 0.3s var(--dm-ease), background-color 0.3s var(--dm-ease); }
.dm-sp-pick input:checked + span { border-color: var(--dm-primary); background: var(--dm-primary-soft); color: var(--dm-text); font-weight: 600; }
.dm-sp-pick input:focus-visible + span { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-sp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dm-sp-small { font-size: 0.82rem; margin: 0; }
.dm-sp-files { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.dm-sp-files .dm-btn { height: 2.5rem; cursor: pointer; }
.dm-sp-tips { align-self: start; padding: 1.25rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-soft); }
.dm-sp-tips ul { display: flex; flex-direction: column; gap: 0.85rem; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.dm-sp-tips li { display: flex; gap: 0.6rem; }
.dm-sp-tips .dm-i { flex: none; color: var(--dm-primary); }

.dm-sp-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; padding-block: 1.5rem 3.5rem; }
.dm-sp-crumb { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.5rem; color: var(--dm-muted); font-size: 0.82rem; }
.dm-sp-crumb a:hover { color: var(--dm-primary); }
.dm-sp-subject { margin: 0 0 1rem; font: 600 clamp(1.4rem, 2.6vw, 1.9rem)/1.2 var(--dm-font-head); letter-spacing: -0.03em; text-wrap: balance; }
.dm-sp-track { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 1.5rem; padding: 0; list-style: none; border: 1px solid var(--dm-line); border-radius: var(--dm-r); overflow: hidden; }
.dm-sp-track li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0.95rem; border-inline-end: 1px solid var(--dm-line); color: var(--dm-muted); font-size: 0.78rem; transition: background-color 0.4s var(--dm-ease); }
.dm-sp-track li:last-child { border-inline-end: 0; }
.dm-sp-track b { display: flex; align-items: center; gap: 0.35rem; color: var(--dm-text); font-size: 0.88rem; }
.dm-sp-track li.is-done b .dm-i { color: #16a34a; }
.dm-sp-track li.is-now { background: var(--dm-primary-soft); }
.dm-sp-track li.is-now b { color: var(--dm-primary); }
.dm-sp-track li.is-now b i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dm-primary); animation: dm-sp-pulse 1.8s ease-in-out infinite; }
@keyframes dm-sp-pulse { 50% { opacity: 0.35; } }
.dm-sp-tl { position: relative; display: flex; flex-direction: column; padding-inline-start: 2.75rem; }
.dm-sp-tl::before { content: ''; position: absolute; inset-inline-start: 0.95rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--dm-line-soft); }
.dm-sp-m { position: relative; padding-bottom: 1.1rem; }
.dm-sp-av { position: absolute; inset-inline-start: -2.75rem; top: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border: 3px solid var(--dm-bg); border-radius: 50%; background: var(--dm-primary-soft); color: var(--dm-primary); font-size: 0.75rem; font-weight: 700; }
.dm-sp-m.is-mine .dm-sp-av { background: color-mix(in srgb, #7c3aed 12%, var(--dm-bg)); color: #6d28d9; }
.dm-sp-who-dd { display: inline-flex; align-items: center; gap: 0.4rem; }
.dm-sp-who-dd img { width: 1.4rem; height: 1.4rem; border-radius: 50%; }
.dm-sp-av.has-img { padding: 0; background: var(--dm-bg); overflow: hidden; }
.dm-sp-av.has-img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dm-sp-av.is-ev { background: var(--dm-bg); border: 2px solid var(--dm-line-soft); color: var(--dm-muted); }
.dm-sp-m.is-ev p { margin: 0.4rem 0 0; color: var(--dm-muted); font-size: 0.8rem; }
.dm-sp-who { margin: 0 0 0.35rem; color: var(--dm-muted); font-size: 0.8rem; }
.dm-sp-who b { color: var(--dm-text); }
.dm-sp-tx { max-width: 42rem; padding: 0.8rem 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); line-height: 1.6; overflow-wrap: anywhere; }
.dm-sp-m.is-team .dm-sp-tx { border-color: color-mix(in srgb, var(--dm-primary) 28%, transparent); background: color-mix(in srgb, var(--dm-primary) 4%, var(--dm-bg)); }
.dm-sp-tx p { margin: 0 0 0.5em; } .dm-sp-tx p:last-child { margin: 0; }
.dm-sp-tx img { max-width: 100%; }
.dm-sp-att { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.dm-sp-att a { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 15rem; padding: 0.25rem 0.65rem 0.25rem 0.25rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); font-size: 0.8rem; }
.dm-sp-att img, .dm-sp-att .dm-i { width: 2.2rem; height: 2.2rem; flex: none; border-radius: calc(var(--dm-r-sm) * 0.7); object-fit: cover; }
.dm-sp-att .dm-i { padding: 0.55rem; background: var(--dm-soft); }
.dm-sp-att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-sp-reply { margin-inline-start: 2.75rem; border: 1.5px solid var(--dm-text); border-radius: var(--dm-r); overflow: hidden; }
.dm-sp-reply textarea { display: block; width: 100%; min-height: 4.5rem; padding: 0.85rem 1rem; border: 0; background: transparent; font: inherit; resize: vertical; outline: none; }
.dm-sp-reply-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.55rem 0.45rem 0.4rem; border-top: 1px solid var(--dm-line-soft); }
.dm-sp-reply-bar .dm-btn { margin-inline-start: auto; height: 2.5rem; }
.dm-sp-reply-bar .dm-icon-btn { cursor: pointer; }
.dm-sp-reply .dm-flash { margin: 0.6rem; }
.dm-sp-ticket-side { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.dm-sp-box { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem 1.15rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-sp-box .dm-sp-h { margin: 0; }
.dm-sp-kv { margin: 0; }
.dm-sp-kv div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--dm-line-soft); font-size: 0.85rem; }
.dm-sp-kv div:last-child { border-bottom: 0; }
.dm-sp-kv dt { color: var(--dm-muted); }
.dm-sp-kv dd { margin: 0; font-weight: 500; text-align: end; }
.dm-sp-kv dd.is-acc { color: var(--dm-primary); }
.dm-sp-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; }
.dm-sp-faces button { height: 2.6rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); font-size: 1.25rem; cursor: pointer; transition: border-color 0.3s var(--dm-ease), transform 0.4s var(--dm-ease); }
.dm-sp-faces button:hover { transform: scale(1.08); border-color: var(--dm-primary); }
.dm-sp-faces button.is-on { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
.dm-sp-mine-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.dm-sp-mine-top p { margin: 0; }
.dm-sp-list { border-top: 1px solid var(--dm-line-soft); }
.dm-sp-new-dot { display: inline-block; width: 0.45rem; height: 0.45rem; margin-inline-start: 0.4rem; border-radius: 50%; background: var(--dm-primary); vertical-align: middle; }
@media (max-width: 991px) {
    .dm-sp-hero-in, .dm-sp-body, .dm-sp-new, .dm-sp-ticket { grid-template-columns: minmax(0, 1fr); }
    .dm-sp-hero-in { gap: 1.5rem; padding-block: 1.75rem 1.5rem; }
    .dm-sp-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .dm-sp-two { grid-template-columns: minmax(0, 1fr); }
    .dm-sp-topic { padding: 0.8rem; }
    .dm-sp-topic > span:last-child { display: none; }
    .dm-sp-search { height: 3.1rem; }
    .dm-sp-search .dm-btn { padding: 0 0.85rem; }
    .dm-sp-qa .dm-btn { flex: 1 1 40%; }
    .dm-sp-track { grid-template-columns: 1fr 1fr; }
    .dm-sp-track li:nth-child(2) { border-inline-end: 0; }
    .dm-sp-track li:nth-child(-n + 2) { border-bottom: 1px solid var(--dm-line); }
    .dm-sp-tl { padding-inline-start: 2.4rem; }
    .dm-sp-reply { margin-inline-start: 0; }
    .dm-sp-qa { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .dm-sp-steps li.is-done i, .dm-sp-track li.is-now b i { animation: none; }
}

/* Help centre, sample J ("One question"): a big question on the left, four big choices on the right. */
.dm-sp-j { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; padding-block: 4rem 4.5rem; }
.dm-sp-j-title { margin: 0 0 0.9rem; font: 600 clamp(2.4rem, 4.6vw, 3.6rem)/1.02 var(--dm-font-head); letter-spacing: -0.04em; text-wrap: balance; }
.dm-sp-j-title em { font-style: normal; color: var(--dm-primary); }
.dm-sp-j-lead { max-width: 30ch; margin: 0 0 1.75rem; color: var(--dm-muted); font-size: 1.08rem; }
.dm-sp-j-open { display: flex; align-items: center; gap: 0.9rem; max-width: 28rem; padding: 1rem 1.1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); color: inherit; transition: border-color 0.35s var(--dm-ease); }
.dm-sp-j-open:hover { border-color: var(--dm-text); }
.dm-sp-j-open .dm-btn { height: 2.5rem; padding: 0 1.1rem; }
.dm-sp-j-open .dm-sp-grow b { white-space: normal; }
.dm-sp-j-dot { width: 0.65rem; height: 0.65rem; flex: none; border-radius: 50%; background: var(--dm-primary); outline: 4px solid var(--dm-primary-soft); }
.dm-sp-j-all { display: inline-block; margin-top: 0.75rem; font-size: 0.88rem; }
.dm-sp-j-sign { color: var(--dm-muted); font-size: 0.92rem; }
.dm-sp-j-list ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dm-line); }
.dm-sp-j-list li { border-bottom: 1px solid var(--dm-line); }
.dm-sp-j-list li > a { position: relative; display: flex; align-items: center; gap: 1.1rem; padding: 1.35rem 0.4rem; color: inherit; border-radius: var(--dm-r); transition: background-color 0.35s var(--dm-ease), padding 0.45s var(--dm-ease); }
.dm-sp-j-list b { display: block; font: 600 1.18rem/1.25 var(--dm-font-head); letter-spacing: -0.03em; }
.dm-sp-j-list small { color: var(--dm-muted); font-size: 0.84rem; }
.dm-sp-j-ic { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex: none; border-radius: calc(var(--dm-r) * 0.9); background: var(--dm-soft); transition: background-color 0.35s var(--dm-ease), color 0.35s var(--dm-ease); }
.dm-sp-j-ar { margin-inline-start: auto; color: var(--dm-muted); transition: color 0.35s var(--dm-ease), transform 0.45s var(--dm-ease); }
.dm-sp-j-list li > a:hover, .dm-sp-j-list li > a:focus-visible { background: var(--dm-soft); padding-inline: 1.1rem; }
.dm-sp-j-list li > a:hover .dm-sp-j-ic, .dm-sp-j-list li > a:focus-visible .dm-sp-j-ic { background: var(--dm-btn); color: var(--dm-on-btn); }
.dm-sp-j-list li > a:hover .dm-sp-j-ar, .dm-sp-j-list li > a:focus-visible .dm-sp-j-ar { color: var(--dm-primary); transform: translateX(4px); }
[dir='rtl'] .dm-sp-j-ar .dm-i { transform: scaleX(-1); }
.dm-sp-j-faq { margin: 1.4rem 0 0; color: var(--dm-muted); font-size: 0.92rem; }
.dm-sp-j-faq a { color: var(--dm-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991px) {
    .dm-sp-j { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2.25rem 3rem; }
}
@media (max-width: 575px) {
    .dm-sp-j-list li > a { gap: 0.85rem; padding-block: 1.1rem; }
    .dm-sp-j-list b { font-size: 1.02rem; }
    .dm-sp-j-ic { width: 2.75rem; height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .dm-sp-j-list li > a, .dm-sp-j-ar { transition: none; }
}

/* ── Support: hands-typing animation (agent writing a reply; thank-you after sending) ── */
.dm-sp-lot { display: block; flex: none; inline-size: 9rem; block-size: 4.75rem; border-radius: var(--dm-r-sm); background: #fff; overflow: hidden; }
.dm-sp-rive { display: block; flex: none; inline-size: 17rem; aspect-ratio: 1; opacity: 0; transition: opacity 0.4s ease; }
.dm-sp-rive.is-ready { opacity: 1; }
.dm-sp-rive canvas { display: block; inline-size: 100%; block-size: 100%; cursor: pointer; }
.dm-sp-typing { margin-block-start: 0.25rem; }
.dm-sp-typing-card { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border: 1.5px dashed color-mix(in srgb, var(--dm-primary) 40%, transparent); border-radius: var(--dm-r); background: color-mix(in srgb, var(--dm-primary) 4%, var(--dm-bg)); }
.dm-sp-typing-card b { display: block; font-family: var(--dm-font-head); font-size: 0.95rem; }
.dm-sp-typing-card span:not(.dm-sp-lot) { color: var(--dm-muted); font-size: 0.85rem; }
.dm-sp-sent { display: flex; align-items: center; gap: 0.5rem; margin-block: 0.25rem 1.25rem; padding: 1.25rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-sp-sent-h { margin: 0 0 0.35rem; font: 700 1.35rem/1.2 var(--dm-font-head); letter-spacing: -0.01em; }
.dm-sp-sent p { margin: 0 0 0.75rem; color: var(--dm-muted); }
.dm-sp-sent-code { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 99px; background: var(--dm-primary-soft); color: var(--dm-text); font-size: 0.85rem; font-weight: 600; }
.dm-sp-sent-code svg { color: var(--dm-primary); }
@media (max-width: 40em) {
    .dm-sp-sent { flex-direction: column; text-align: center; }
    .dm-sp-rive { inline-size: min(100%, 19rem); margin-block-end: -2.5rem; }
    .dm-sp-typing-card { gap: 0.65rem; padding: 0.6rem; }
    .dm-sp-lot:not(.is-big) { inline-size: 6rem; block-size: 3.2rem; }
}

/* ── Support pages: hover motion in Dazzle Monk's style (same easing, lift and arrow nudge as product cards and buttons) ── */
.dm-sp-j-open, .dm-sp-ct, .dm-sp-pop a, .dm-sp-att a, .dm-sp-tk, .dm-sp-order, .dm-sp-box, .dm-sp-sent, .dm-sp-typing-card { transition: border-color 0.4s var(--dm-ease), background-color 0.4s var(--dm-ease), transform 0.55s var(--dm-ease), padding 0.45s var(--dm-ease); }
.dm-sp-j-open:hover, .dm-sp-j-open:focus-visible { transform: translateY(-3px) scale(1.01); }
.dm-sp-j-dot { transition: transform 0.45s var(--dm-ease), outline-width 0.45s var(--dm-ease); }
.dm-sp-j-open:hover .dm-sp-j-dot { transform: scale(1.25); outline-width: 6px; }
.dm-sp-ct:hover, .dm-sp-ct:focus-visible { transform: translateY(-3px); }
.dm-sp-ct > .dm-i { transition: color 0.35s var(--dm-ease), transform 0.45s var(--dm-ease); }
.dm-sp-ct:hover > .dm-i { color: var(--dm-primary); transform: scale(1.12); }
.dm-sp-pop a:hover, .dm-sp-pop a:focus-visible { background: var(--dm-primary-soft); transform: translateY(-2px); }
.dm-sp-pick span:hover { border-color: var(--dm-text); }
.dm-sp-att a { overflow: hidden; }
.dm-sp-att img { transition: transform 0.55s var(--dm-ease); }
.dm-sp-att a:hover { border-color: var(--dm-text); }
.dm-sp-att a:hover img { transform: scale(1.1); }
.dm-sp-tk { border-radius: var(--dm-r-sm); }
.dm-sp-tk:hover, .dm-sp-tk:focus-visible { background: var(--dm-soft); padding-inline: 0.85rem; }
.dm-sp-tk b { transition: color 0.35s var(--dm-ease); }
.dm-sp-tk .dm-sp-chip { transition: transform 0.45s var(--dm-ease); }
.dm-sp-tk:hover .dm-sp-chip { transform: translateX(-3px); }
[dir='rtl'] .dm-sp-tk:hover .dm-sp-chip { transform: translateX(3px); }
.dm-sp-box:hover, .dm-sp-sent:hover { border-color: var(--dm-text); }
.dm-sp-typing-card:hover { border-style: solid; }
.dm-sp-sent-code svg, .dm-sp-ord .dm-i { transition: transform 0.45s var(--dm-ease); }
.dm-sp-sent-code:hover svg { transform: rotate(-12deg) scale(1.15); }
.dm-sp-crumb a { transition: color 0.3s var(--dm-ease); }
.dm-sp-j-faq a, .dm-sp-j-all { text-decoration-color: transparent; transition: text-decoration-color 0.3s var(--dm-ease), color 0.3s var(--dm-ease); }
.dm-sp-j-faq a { text-decoration-color: currentColor; }
.dm-sp-j-faq a:hover, .dm-sp-j-all:hover { color: var(--dm-primary); }
[dir='rtl'] .dm-sp-j-list li > a:hover .dm-sp-j-ar, [dir='rtl'] .dm-sp-j-list li > a:focus-visible .dm-sp-j-ar { transform: translateX(-4px); }
[dir='rtl'] .dm-sp-topic:hover > span:last-child .dm-i { transform: translateX(-3px); }
@media (hover: none) { .dm-sp-j-open:hover, .dm-sp-ct:hover, .dm-sp-pop a:hover, .dm-sp-tk:hover .dm-sp-chip { transform: none; } .dm-sp-tk:hover { padding-inline: 0; background: none; } }
@media (prefers-reduced-motion: reduce) {
    .dm-sp-j-open, .dm-sp-ct, .dm-sp-pop a, .dm-sp-att a, .dm-sp-att img, .dm-sp-tk, .dm-sp-tk .dm-sp-chip, .dm-sp-j-dot, .dm-sp-topic, .dm-sp-j-list li > a, .dm-sp-j-ar, .dm-sp-faces button { transition: none; }
    .dm-sp-j-open:hover, .dm-sp-ct:hover, .dm-sp-pop a:hover, .dm-sp-att a:hover img, .dm-sp-tk:hover .dm-sp-chip, .dm-sp-j-open:hover .dm-sp-j-dot, .dm-sp-topic:hover, .dm-sp-faces button:hover { transform: none; }
}

/* Text blocks: headings and lists written in the text (## Heading, - item, 1. item) */
.dm-text .dm-prose h2:not(.dm-h2) { margin-top: 0.5rem; font-size: 1.35rem; line-height: 1.3; }
.dm-text .dm-prose h3 { margin-top: 0.35rem; font-size: 1.1rem; line-height: 1.35; }
.dm-text .dm-prose h4 { font-size: 1rem; }
.dm-text .dm-prose ul, .dm-text .dm-prose ol { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding-inline-start: 1.25rem; color: color-mix(in srgb, var(--dm-text) 82%, var(--dm-bg)); }
.dm-text .dm-prose ul { list-style: disc; }
.dm-text .dm-prose ol { list-style: decimal; }
.dm-text .dm-prose li::marker { color: var(--dm-primary); }

/* The sign-in popup drawn on the sign-in and sign-up pages: the same box, sitting in the page. */
.dm-auth.is-ap { flex-direction: column; align-items: center; gap: 1rem; padding-block: 2.5rem 0; }
.dm-auth.is-ap > .dm-flash { width: min(100%, 68rem); }
.dm-ap.is-page { width: 100%; }
.dm-ap.is-page .dm-modal-box.dm-ap-box { width: min(100%, 68rem); max-height: none; margin-inline: auto; border: 1px solid var(--dm-line); box-shadow: none; animation: none; }
@media (max-width: 860px) { .dm-ap.is-page .dm-modal-box.dm-ap-box { width: min(100%, 34rem); } }
@media (max-width: 480px) { .dm-ap.is-page .dm-modal-box.dm-ap-box { width: 100%; max-height: none; border-radius: var(--dm-r); } }
.dm-ap-note.is-ok { background: color-mix(in srgb, #16a34a 12%, var(--dm-bg)); color: color-mix(in srgb, #16a34a 70%, var(--dm-text)); }

/* The light / dark switch in the header: a moon in light mode, a sun in dark mode. */
.dm-theme-btn { align-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.dm-theme-btn > span { display: inline-flex; }
.dm-theme-btn .is-sun { display: none; }
.dm-theme-btn:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 4px; border-radius: 4px; }

/* WhatsApp: the floating button stays off the checkout (it covered "Place order"), and off the cart when the
   summary already has "Order on WhatsApp" (it covered the total). Phones hide it on these pages already. */
.is-checkout .dm-wa, .is-cart:has(.dm-wa-inline.is-cart) .dm-wa { display: none; }

/* Sign-in: "Sign in with a code instead", and the code screens' quieter buttons. */
.dm-ap-alt { display: flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 3rem; margin-top: 0.6rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: transparent; color: var(--dm-text); font: inherit; font-weight: 600; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.dm-ap-alt:hover, .dm-ap-alt:focus-visible { border-color: var(--dm-primary); color: var(--dm-primary); }
.dm-ap-submit.is-ghost { border: 1.5px solid var(--dm-btn); background: transparent; color: var(--dm-text); }
.dm-ap-submit.is-ghost:hover, .dm-ap-submit.is-ghost:focus-visible { background: var(--dm-btn); color: var(--dm-on-btn); }
.dm-ap-form + .dm-ap-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--dm-line); }
.dm-ap-form[hidden] + .dm-ap-form { margin-top: 0; padding-top: 0; border-top: 0; }
.dm-ap-2fa-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; }
.dm-ap-link[hidden] { display: none; }
button.dm-ap-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.dm-ap-view[data-dm-auth-view="code"] .dm-ap-switch, .dm-ap-view[data-dm-auth-view="verify"] .dm-ap-switch { margin-top: 1rem; }

/* Account: confirm the email or mobile number with the code. */
.dm-confirm { flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.dm-confirm > span { flex: 1 1 14rem; }
.dm-confirm-code { display: flex; align-items: center; gap: 0.4rem; }
.dm-confirm-code input { width: 8.5rem; height: 2.4rem; padding: 0 0.75rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-text); font: inherit; letter-spacing: 0.2em; }
.dm-confirm-code input:focus { outline: 2px solid var(--dm-primary); outline-offset: 1px; }
.dm-btn.is-sm { height: 2.4rem; padding: 0 0.9rem; font-size: 0.85rem; }

/* My account › Security. */
.dm-sec { display: flex; flex-direction: column; gap: 1.25rem; }
.dm-sec .dm-h3 { display: flex; align-items: center; gap: 0.5rem; }
.dm-sec-state { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; color: var(--dm-muted); }
.dm-sec-state.is-on { color: #15803d; }
.dm-sec-state.is-on b { color: inherit; }
.dm-sec-pick { display: flex; flex-direction: column; gap: 0.6rem; }
.dm-sec-opt { position: relative; display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.9rem 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.dm-sec-opt:hover { border-color: var(--dm-text); }
.dm-sec-opt:has(input:checked) { border-color: var(--dm-primary); background: var(--dm-primary-soft); }
.dm-sec-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dm-sec-opt:has(input:focus-visible) { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-sec-opt-i { display: grid; flex: none; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--dm-soft); color: var(--dm-primary); }
.dm-sec-opt b { display: block; }
.dm-sec-opt small { display: block; margin-top: 0.15rem; color: var(--dm-muted); line-height: 1.45; }
.dm-sec-steps { margin: 0 0 1rem; padding-inline-start: 1.2rem; color: var(--dm-muted); }
.dm-sec-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 1rem; }
.dm-sec-qr-img { flex: none; padding: 0.6rem; border-radius: var(--dm-r-sm); background: #fff; line-height: 0; }
.dm-sec-qr-img svg { width: 10rem; height: 10rem; }
.dm-sec-qr small { display: block; color: var(--dm-muted); }
.dm-sec-qr code, .dm-sec-list code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.dm-sec-form { display: flex; flex-direction: column; gap: 0.4rem; max-width: 20rem; }
.dm-sec-form input { height: 3rem; padding: 0 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-text); font: inherit; font-size: 1.15rem; letter-spacing: 0.3em; }
.dm-sec-form input:focus { outline: 2px solid var(--dm-primary); outline-offset: 1px; }
.dm-sec-form label { font-weight: 600; font-size: 0.9rem; }
.dm-sec-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.9rem; }
.dm-sec-codes { border-color: var(--dm-primary); }
.dm-sec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.4rem 1.25rem; margin: 0.75rem 0; padding-inline-start: 1.4rem; }
.dm-sec-copy { width: 100%; padding: 0.6rem 0.8rem; border: 1px dashed var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-soft); color: var(--dm-text); font: 0.85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: none; }
/* 6-digit codes as six boxes (dm.js otpBoxes): one real input lies over the boxes, so typing, paste and the
   phone's code autofill all work; the boxes pop in as digits arrive, shake red on a wrong code and do a
   green wave on a right one. */
.dm-otp { position: relative; width: 100%; max-width: 28rem; }
.dm-otp-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.4rem, 2vw, 0.75rem); }
.dm-otp-cell { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; height: auto; min-width: 0; border: 1.5px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-text); font-family: var(--dm-font); font-size: clamp(1.4rem, 3.4dvh, 1.85rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; }
.dm-otp-cell.is-filled { border-color: var(--dm-text); }
.dm-otp-cell.is-active { border-color: var(--dm-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary) 18%, transparent); }
.dm-otp-cell.is-active:not(.is-filled)::after { content: ""; width: 2px; height: 45%; border-radius: 1px; background: var(--dm-primary); animation: dm-otp-blink 1s steps(1) infinite; }
.dm-otp-cell.is-pop { animation: dm-otp-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dm-otp.is-full .dm-otp-cell { border-color: var(--dm-primary); }
.dm-otp input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 !important; border: 0; outline: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; opacity: 0; cursor: text; box-shadow: none; }
.dm-otp input::selection { background: transparent; }
.dm-otp.is-bad .dm-otp-row { animation: dm-otp-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.dm-otp.is-bad .dm-otp-cell { border-color: #dc2626; color: #dc2626; background: color-mix(in srgb, #dc2626 7%, var(--dm-bg)); }
.dm-otp.is-ok .dm-otp-cell { border-color: #16a34a; color: #16a34a; background: color-mix(in srgb, #16a34a 9%, var(--dm-bg)); animation: dm-otp-wave 0.45s ease both; animation-delay: calc(var(--i) * 55ms); }
@keyframes dm-otp-blink { 50% { opacity: 0; } }
@keyframes dm-otp-pop { 0% { transform: scale(0.82); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes dm-otp-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes dm-otp-wave { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
/* Off (a password or a backup code in the same field): the plain input comes back. */
.dm-otp.is-off { max-width: none; flex: 1; min-width: 0; }
.dm-otp.is-off .dm-otp-row { display: none; }
.dm-otp.is-off input { position: static; height: auto; opacity: 1; color: inherit; caret-color: auto; cursor: auto; }
.dm-otp.is-off input::selection { background: color-mix(in srgb, var(--dm-primary) 30%, transparent); }
/* In the popup: the label sits above the boxes, no underline. */
.dm-ap-in.has-otp { flex-direction: column; align-items: flex-start; gap: 0.55rem; min-height: 0; padding-top: 0.15rem; border-bottom: 0; }
.dm-ap-in.has-otp::after, .dm-ap-in.has-otp > svg { display: none; }
.dm-ap-in.has-otp label { position: static; order: -1; font-size: 0.8rem; font-weight: 600; color: var(--dm-muted); }
.dm-ap-in.has-otp:focus-within label { color: var(--dm-primary); }
.dm-ap-field.is-bad .dm-ap-in.has-otp label { color: #dc2626; }
.dm-ap-in:has(.dm-otp.is-off input:focus) label, .dm-ap-in:has(.dm-otp.is-off input:not(:placeholder-shown)) label { top: 0.45rem; font-size: 0.74rem; font-weight: 600; }
.dm-ap-in .dm-otp.is-off input { padding: 1.5rem 0 0.45rem !important; padding-inline-start: 1.9rem !important; }
/* Account reminder: smaller boxes in the notice bar. */
.dm-confirm-code .dm-otp { width: 15rem; max-width: 100%; }
.dm-confirm-code .dm-otp-row { gap: 0.3rem; }
.dm-confirm-code .dm-otp-cell { font-size: 1.05rem; border-width: 1px; }
.dm-confirm-code .dm-otp input { width: 100%; height: 100%; padding: 0; border: 0; }
.dm-sec-form .dm-otp input { height: 100%; }
@media (max-width: 380px) { .dm-otp-row { gap: 0.35rem; } .dm-otp-cell { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .dm-otp-cell, .dm-otp-row { animation: none !important; transition: none; } .dm-otp-cell.is-active::after { animation: none; } }
/* All six digits in and a box still to tick: the send button nudges once. */
.is-nudge { animation: dm-otp-nudge 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes dm-otp-nudge { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .is-nudge { animation: none; } }
/* Right to left: the digits still read left to right, the row sits at the start (right) edge. */
.dm-ap-in.has-otp .dm-otp { align-self: stretch; max-width: none; }
.dm-sec-form:has(.dm-otp) { max-width: 26rem; }
.dm-sec-form .dm-otp-cell { height: auto; }
[dir="rtl"] .dm-sec-form .dm-otp { align-self: flex-end; }

/* Confetti for happy moments (dmConfetti in dm.js): one burst over the page, clicks pass through. */
.dm-confetti { position: fixed; inset: 0; z-index: 400; width: 100%; height: 100%; pointer-events: none; transition: opacity 0.6s; }
.dm-confetti.is-out { opacity: 0; }

/* ── Crowd in the stands (Rive, images/crowd.riv): the box crops the scene to the stands ── */
.dm-crowd{position:relative;width:100%;aspect-ratio:1450/770;max-width:100%;overflow:hidden}
.dm-crowd canvas{position:absolute;display:block}
.dm-slide-pic .dm-crowd{align-self:end}

/* ── Marquee block: big words scrolling across ── */
.dm-mq{overflow:hidden;white-space:nowrap;background:var(--dm-mq-bg,#000);color:var(--dm-mq-ink,#fff);padding:13px 0;font:800 1.35rem var(--dm-font-head,inherit);letter-spacing:-.02em}
.dm-mq.is-small{font-size:.9rem;padding:9px 0}
.dm-mq-run{display:inline-flex;align-items:center;animation:dm-mq var(--dm-mq-speed,30s) linear infinite}
.dm-mq.is-reverse .dm-mq-run{animation-direction:reverse}
/* with dm.js the strip is moved by script: never stops on hover, and can be dragged by hand */
.dm-mq.is-js{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.dm-mq.is-js .dm-mq-run{animation:none;will-change:transform}
.dm-mq.is-js.is-dragging{cursor:grabbing}
.dm-mq-run span{margin:0 22px;text-transform:uppercase}.dm-mq.is-small .dm-mq-run span{margin:0 12px}
.dm-mq-run .is-hi,.dm-mq-run em{color:var(--dm-mq-accent,var(--dm-primary,#ff6d00));font-style:normal}
.dm-mq-run em{font-size:1rem}
@keyframes dm-mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.dm-mq-run{animation:none}.dm-mq{overflow-x:auto}}
[dir="rtl"] .dm-mq-run{animation-name:dm-mq-rtl}@keyframes dm-mq-rtl{to{transform:translateX(50%)}}

/* Marquee designs (block style): outlined words, two crossed bands, pills */
.dm-mq.is-outline{background:var(--dm-bg);color:var(--dm-text);border-block:2px solid var(--dm-text);padding:16px 0;font-size:clamp(1.8rem,4vw,3rem);line-height:1}
.dm-mq.is-outline .dm-mq-run span{color:var(--dm-text)}
.dm-mq.is-outline .dm-mq-run span:not(.is-hi){color:var(--dm-bg);-webkit-text-stroke:3px var(--dm-text);paint-order:stroke fill}
.dm-mq.is-outline .dm-mq-run .is-hi{color:var(--dm-text)}
.dm-mq.is-outline .dm-mq-run em{font-size:1.4rem}
.dm-mq-x{position:relative;overflow:hidden;padding:34px 0;margin-block:-6px}
.dm-mq-x .dm-mq{transform:rotate(-2.2deg);margin-inline:-20px;position:relative;z-index:1;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.dm-mq-x .dm-mq-back{position:absolute;inset:34px 0 auto;transform:rotate(2.2deg);z-index:0;background:var(--dm-mq-accent,var(--dm-primary,#ff6d00));color:#000}
.dm-mq-x .dm-mq-back .dm-mq-run .is-hi,.dm-mq-x .dm-mq-back .dm-mq-run em{color:#fff}
.dm-mq.is-pills{background:var(--dm-band-bg,#f5f5f4);color:var(--dm-text);padding:14px 0;font-size:1rem}
.dm-mq.is-pills .dm-mq-run span{margin:0 6px;padding:9px 20px;border:1.5px solid var(--dm-text);border-radius:999px;background:var(--dm-bg)}
.dm-mq.is-pills .dm-mq-run .is-hi{background:var(--dm-text);color:var(--dm-bg);border-color:var(--dm-text)}
.dm-mq.is-pills .dm-mq-run em{margin:0 4px;font-size:.9rem}
@media (prefers-reduced-motion:reduce){.dm-mq-x .dm-mq-back{display:none}}

/* Footer: the legal pages from Settings › Legal pages */
.dm-foot-legal{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem}
.dm-foot-legal a{color:inherit;opacity:.8;text-decoration:none}.dm-foot-legal a:hover{opacity:1;color:var(--dm-footer-hover,var(--dm-primary))}
.dm-check a,.dma-agree a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.dm-legal-note{margin:14px 0 0;font-size:.85rem}.dm-legal-note a{color:var(--dm-muted,inherit);text-decoration:underline;text-underline-offset:2px}

/* Document pages (only text sections, e.g. policies): a reading column aligned with the title, and an "On this page" list */
.dm-doc{display:grid;grid-template-columns:minmax(0,50rem) minmax(13rem,17rem);justify-content:space-between;gap:3rem;align-items:start;padding-block:2.5rem 4rem}
.dm-doc .dm-sec{padding-block:0 2.25rem}
.dm-doc .dm-sec .dm-wrap{max-width:none;padding-inline:0;margin:0}
.dm-doc .dm-text.is-narrow .dm-prose{max-width:none}
.dm-doc .dm-text .dm-prose .dm-h2{font-size:clamp(1.25rem,2vw,1.5rem);margin-bottom:.5rem;scroll-margin-top:7rem}
.dm-doc .dm-text .dm-prose .dm-h2::after{display:none}
.dm-doc .dm-sec[id]{scroll-margin-top:7rem}
.dm-doc .dm-sec + .dm-sec{border-top:1px solid var(--dm-line);padding-top:2.25rem}
.dm-doc-toc{position:sticky;top:7rem}
.dm-doc-toc nav{display:grid;gap:.75rem;padding:1.25rem 1.25rem 1.25rem 1.5rem;border:1px solid var(--dm-line);border-radius:var(--dm-r,12px)}
.dm-doc-toc b{font:600 .78rem/1 var(--dm-font-sub,var(--dm-font-head));letter-spacing:.08em;text-transform:uppercase;color:var(--dm-muted)}
.dm-doc-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:.15rem;counter-reset:toc}
.dm-doc-toc li{counter-increment:toc}
.dm-doc-toc a{display:flex;gap:.6rem;padding:.4rem 0;color:var(--dm-text);text-decoration:none;font-size:.92rem;line-height:1.35}
.dm-doc-toc a::before{content:counter(toc,decimal-leading-zero);color:var(--dm-muted);font-variant-numeric:tabular-nums;font-size:.8rem;padding-top:.1rem}
.dm-doc-toc a:hover,.dm-doc-toc a.is-on{color:var(--dm-primary)}
@media (max-width:960px){.dm-doc{grid-template-columns:minmax(0,1fr)}.dm-doc-toc{display:none}}

/* Something went wrong (errors/500) and Report a problem: calm, no blame, the code to quote, and a way to tell the team. */
.dm-oops { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-block: clamp(2.5rem, 7vw, 5rem); }
.dm-oops-head { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; max-width: 40rem; text-align: center; }
.dm-oops-mark { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; background: var(--dm-primary-soft); color: var(--dm-primary); animation: dm-oops-bob 3.2s var(--dm-ease) infinite; }
.dm-oops-head h1 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.2; text-wrap: balance; }
.dm-oops-head > p { max-width: 46ch; margin: 0; color: var(--dm-muted); }
.dm-oops-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.4rem; }
.dm-oops-code { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0.4rem 0 0; padding: 0.35rem 0.4rem 0.35rem 0.9rem; border: 1px dashed var(--dm-line); border-radius: 99px; color: var(--dm-muted); font-size: 0.86rem; }
.dm-oops-code b { color: var(--dm-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.1em; }
.dm-oops-code button { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.7rem; border: 1px solid var(--dm-line); border-radius: 99px; background: var(--dm-bg); color: var(--dm-text); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.dm-oops-code button.is-copied { border-color: var(--dm-primary); color: var(--dm-primary); }
.dm-oops-code a { padding: 0.25rem 0.7rem; border-radius: 99px; background: var(--dm-text); color: var(--dm-bg); font-size: 0.8rem; font-weight: 600; }
.dm-oops-tell { width: min(100%, 36rem); border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); }
.dm-oops-tell summary { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.15rem; font-weight: 600; cursor: pointer; list-style: none; }
.dm-oops-tell summary::-webkit-details-marker { display: none; }
.dm-oops-tell summary span { flex: 1; }
.dm-oops-tell summary .dm-i:last-child { transition: transform 0.35s var(--dm-ease); }
.dm-oops-tell[open] summary .dm-i:last-child { transform: rotate(180deg); }
.dm-oops-tell .dm-oops-form { padding: 0 1.15rem 1.15rem; }
.dm-oops-form { display: flex; flex-direction: column; gap: 0.9rem; width: 100%; }
.dm-oops.is-page .dm-oops-form { width: min(100%, 36rem); }
.dm-oops-form textarea { min-height: 7rem; resize: vertical; }
.dm-oops-form .dm-btn { align-self: flex-start; }
.dm-oops-hint, .dm-oops-lead { margin: 0; color: var(--dm-muted); font-size: 0.86rem; }
.dm-oops-lead { max-width: 36rem; font-size: 1rem; text-align: center; }
.dm-oops-done { display: flex; align-items: flex-start; gap: 0.75rem; width: min(100%, 36rem); padding: 1rem 1.15rem; border-radius: var(--dm-r); background: var(--dm-primary-soft); }
.dm-oops-done > .dm-i { flex: none; color: var(--dm-primary); }
.dm-oops-done p { margin: 0.2rem 0 0; color: var(--dm-muted); font-size: 0.9rem; }
@keyframes dm-oops-bob { 50% { transform: translateY(-4px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .dm-oops-mark { animation: none; } }

/* Marquee: the same room above it as any section, so it doesn't sit tight under the block before it;
   right under a slider it stays flush, as a band. */
.fp-block > .dm-mq, .fp-block > .dm-mq-x { margin-top: clamp(2.5rem, 5vw, 4rem); }
.fp-block:has(> .dma-slider, > .dm-hero) + .fp-block > .dm-mq,
.fp-block:has(> .dma-slider, > .dm-hero) + .fp-block > .dm-mq-x { margin-top: 0; }
/* Hero crowd slide: the stands take more of the width and sit closer to the top (about 15% bigger). */
@media (min-width: 48em) {
    .dm-slide > .dm-wrap:has(.dm-crowd) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1.5rem; }
    .dm-slide-pic:has(.dm-crowd) { padding-block: 1.25rem 0; }
    .dm-slide-pic .dm-crowd { width: 108%; max-width: none; margin-inline-end: -8%; }
}
/* Hero crowd slide on phones: room between the button and the stands. */
@media (max-width: 47.99em) { .dm-slide-pic .dm-crowd { margin-top: 1.5rem; } }

/* Track your order: the sign-in popup's two sides on the page. The journey (placed, packed, on the way, delivered)
   is drawn in line icons on the left and lights up to where the order is; the form or the order sits on the grey side. */
.dm-trk { padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
.dm-trk-box { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); width: min(100%, 68rem); margin-inline: auto; overflow: hidden; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-trk-side { display: flex; flex-direction: column; justify-content: space-between; gap: 2.25rem; padding: clamp(1.75rem, 4vw, 3.25rem); background: var(--dm-bg); }
.dm-trk-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; padding: clamp(1.75rem, 4vw, 3.25rem); background: color-mix(in srgb, var(--dm-text) 5%, var(--dm-bg)); }
.dm-trk-main .dm-ap-head h2 { padding-inline-end: 0; }
.dm-trk-hint { display: block; margin-top: 0.35rem; color: var(--dm-muted); font-size: 0.8rem; }

.dm-trk-road { position: relative; display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.dm-trk-road li { position: relative; display: flex; align-items: center; gap: 1rem; }
/* the dashed road between the stops; the part already travelled is solid orange */
.dm-trk-road li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: calc(1.6rem - 1px); top: 3.2rem; height: calc(1.1rem); border-inline-start: 2px dashed color-mix(in srgb, var(--dm-text) 25%, transparent); }
.dm-trk-road li.is-done:not(.is-now):not(:last-child)::after { border-inline-start-style: solid; border-color: var(--dm-primary); }
.dm-trk-ic { display: grid; flex: none; place-items: center; width: 3.2rem; height: 3.2rem; border: 1.5px solid var(--dm-text); border-radius: var(--dm-r-sm); background: var(--dm-bg); color: var(--dm-text); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.dm-trk-road li.is-done .dm-trk-ic { border-color: var(--dm-text); background: var(--dm-text); color: var(--dm-bg); }
.dm-trk-road li.is-now .dm-trk-ic { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary, #fff); }
.dm-trk-road li.is-bad .dm-trk-ic { border-color: #dc2626; background: #dc2626; color: #fff; }
.dm-trk-step { display: flex; flex-direction: column; gap: 0.1rem; }
.dm-trk-step b { font-family: var(--dm-font-head); font-size: 1rem; font-weight: 600; }
.dm-trk-road li:not(.is-done) .dm-trk-step b { color: var(--dm-muted); font-weight: 500; }
.dm-trk-step small { color: var(--dm-primary); font-size: 0.78rem; font-weight: 600; }

.dm-trk-order { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); background: var(--dm-bg); }
.dm-trk-num { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0; }
.dm-trk-num b { font-family: var(--dm-font-head); }
.dm-trk-order .dm-co-lines { margin: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--dm-line); }
.dm-trk-order .dm-ship { margin: 0; }
.dm-trk-total { display: flex; justify-content: space-between; margin: 0; font-size: 1.05rem; }
.dm-trk-total b { font-family: var(--dm-font-head); }
.dm-trk-main .dm-receipt { margin: 0; text-align: start; }

@media (max-width: 860px) {
    .dm-trk-box { grid-template-columns: minmax(0, 1fr); }
    .dm-trk-side { gap: 1.5rem; }
    /* on a phone the road runs across, four stops in a row */
    .dm-trk-road { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
    .dm-trk-road li { flex-direction: column; gap: 0.5rem; text-align: center; }
    .dm-trk-road li:not(:last-child)::after { inset-inline-start: calc(50% + 1.8rem); top: 1.6rem; width: calc(100% - 3.6rem + 0.5rem); height: 0; border-inline-start: 0; border-top: 2px dashed color-mix(in srgb, var(--dm-text) 25%, transparent); }
    .dm-trk-road li.is-done:not(.is-now):not(:last-child)::after { border-top-style: solid; border-color: var(--dm-primary); }
    .dm-trk-ic { width: 2.9rem; height: 2.9rem; }
    .dm-trk-step b { font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) { .dm-trk-ic { transition: none; } }

/* Track your order, motion: one moment on arrival. The stops come in one after another, the road between them
   draws itself (orange where the order has already been), and the stop the order is at keeps a calm pulse. */
.dm-trk-ic { position: relative; }
@media (prefers-reduced-motion: no-preference) {
    .dm-trk-road li { animation: dm-trk-stop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 140ms + 120ms); }
    .dm-trk-road li:not(:last-child)::after { transform-origin: top center; animation: dm-trk-draw 0.45s cubic-bezier(0.65, 0, 0.35, 1) both; animation-delay: calc(var(--i, 0) * 140ms + 380ms); }
    .dm-trk-road li.is-done .dm-trk-ic, .dm-trk-road li.is-bad .dm-trk-ic { animation: dm-trk-fill 0.35s ease both; animation-delay: calc(var(--i, 0) * 140ms + 300ms); }
    .dm-trk-road li.is-now .dm-trk-ic::after { content: ''; position: absolute; inset: -2px; border: 2px solid var(--dm-primary); border-radius: inherit; opacity: 0; animation: dm-trk-pulse 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-delay: calc(var(--i, 0) * 140ms + 700ms); pointer-events: none; }
    .dm-trk-main > * { animation: dm-trk-stop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 80ms; }
    .dm-trk-main > :nth-child(2) { animation-delay: 160ms; }
    .dm-trk-main > :nth-child(n + 3) { animation-delay: 240ms; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
    .dm-trk-road li:not(:last-child)::after { transform-origin: left center; animation-name: dm-trk-draw-x; }
    [dir="rtl"] .dm-trk-road li:not(:last-child)::after { transform-origin: right center; }
}
@keyframes dm-trk-stop { from { opacity: 0; transform: translateY(10px); } }
@keyframes dm-trk-draw { from { transform: scaleY(0); } }
@keyframes dm-trk-draw-x { from { transform: scaleX(0); } }
@keyframes dm-trk-fill { from { border-color: var(--dm-text); background: var(--dm-bg); color: var(--dm-text); } }
@keyframes dm-trk-pulse { 0% { opacity: 0.7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.32); } }

/* ── Customer bell (Store app › shop_bell()) and My account › Notifications ── */
.dm-bell { position: relative; display: inline-flex; }
.dm-bell-btn { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.dm-bell.is-open .dm-bell-btn { color: var(--dm-primary); }
.dm-bell-btn.is-bump .dm-i { animation: dm-bell-ring 0.9s var(--dm-ease); transform-origin: 50% 8%; }
@keyframes dm-bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
.dm-bell-panel { position: absolute; top: calc(100% + 0.9rem); inset-inline-end: -1rem; z-index: 60; display: flex; flex-direction: column; width: min(24rem, calc(100vw - 2rem)); max-height: min(34rem, 75vh); border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); color: var(--dm-text); box-shadow: 0 18px 40px rgb(1 15 28 / 0.14); animation: dm-bell-in 0.22s var(--dm-ease); }
@keyframes dm-bell-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dm-bell-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem 0.85rem; border-bottom: 1px solid var(--dm-line); }
.dm-bell-head b { font: 600 1rem/1.2 var(--dm-font-head); }
.dm-bell-all { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; border: 0; background: none; color: var(--dm-muted); font-size: 0.8rem; cursor: pointer; transition: color 0.2s; }
.dm-bell-all:hover { color: var(--dm-primary); }
.dm-bell-list { flex: 1; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.dm-bell-row, .dm-nt-row { position: relative; display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.75rem 1.15rem; color: inherit; text-decoration: none; transition: background-color 0.2s; }
a.dm-bell-row:hover, a.dm-nt-row:hover { background: var(--dm-soft); }
.dm-bell-item + .dm-bell-item { border-top: 1px solid var(--dm-line); }
/* New ones: a small dot at the end of the row. */
.dm-bell-dot { flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.45rem; border-radius: 50%; background: var(--dm-primary); }
.dm-bell-ic { display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--dm-soft); color: var(--dm-text); }
.dm-bell-text, .dm-nt-text { display: flex; flex: 1; flex-direction: column; gap: 0.2rem; min-width: 0; }
.dm-bell-text b, .dm-nt-text b { font-size: 0.88rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.dm-bell-text small, .dm-nt-text small { color: var(--dm-muted); font-size: 0.8rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dm-bell-text time, .dm-nt-text time { color: var(--dm-muted); font-size: 0.72rem; }
.dm-bell-times { display: inline-block; margin-inline-start: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--dm-soft); color: var(--dm-muted); font-size: 0.7rem; font-style: normal; font-weight: 600; vertical-align: 0.1em; }
.dm-bell-empty { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin: 0; padding: 2.25rem 1.5rem; color: var(--dm-muted); font-size: 0.85rem; text-align: center; }
.dm-bell-empty .dm-i { color: var(--dm-primary); }
.dm-bell-err { padding: 1.5rem 1.15rem; color: var(--dm-muted); font-size: 0.85rem; }
.dm-bell-wait { height: 7rem; margin: 0.5rem 1.15rem; border-radius: var(--dm-r-sm); background: var(--dm-soft); animation: dm-bell-wait 1.1s ease-in-out infinite alternate; }
@keyframes dm-bell-wait { to { opacity: 0.45; } }
.dm-bell-foot { display: block; padding: 0.85rem 1.15rem; border-top: 1px solid var(--dm-line); font-size: 0.85rem; font-weight: 500; text-align: center; transition: color 0.2s; }
.dm-bell-foot:hover { color: var(--dm-primary); }
/* The header: with the bell there, the search bar gives a little room so the icons breathe. */
.dm-mainbar:has(.dm-bell) .dm-search { max-width: 33rem; margin-inline-start: 1.75rem; }
@media (min-width: 48.01em) { .dm-mainbar:has(.dm-bell) .dm-actions { padding-inline-start: 1.75rem; } }
@media (max-width: 80em) {
    .dm-mainbar:has(.dm-bell) .dm-search { margin-inline-start: 0.5rem; }
    .dm-mainbar:has(.dm-bell) .dm-actions { gap: 1.3rem; }
}
@media (max-width: 48em) {
    .dm-mainbar:has(.dm-bell) .dm-actions { gap: 1.1rem; }
    /* Phones: a sheet across the screen, just under the header (bell.js sets its top). */
    .dm-bell-panel { position: fixed; top: var(--dm-bell-top, 4.5rem); inset-inline: max(0.75rem, env(safe-area-inset-left, 0px)); width: auto; max-height: calc(100dvh - var(--dm-bell-top, 4.5rem) - 5.5rem); }
}
@media (prefers-reduced-motion: reduce) { .dm-bell-btn.is-bump .dm-i, .dm-bell-panel, .dm-bell-wait { animation: none; } }
/* An alert that wants attention (a game to play) is unread: the bell shakes hard in bursts, with a ring around it,
   until it is opened. People who turn motion off get a steady glow instead. */
.dm-bell.is-calling .dm-bell-btn { position: relative; color: var(--dm-primary); }
.dm-bell.is-calling .dm-bell-btn .dm-i { animation: dm-bell-call 2.6s var(--dm-ease) infinite; transform-origin: 50% 8%; }
.dm-bell.is-calling .dm-bell-btn::before { content: ""; position: absolute; inset: -0.45rem; border: 2px solid var(--dm-primary); border-radius: 50%; opacity: 0; pointer-events: none; animation: dm-bell-halo 2.6s ease-out infinite; }
.dm-bell.is-calling .dm-bell-btn em { background: var(--dm-primary); color: var(--dm-on-primary); animation: dm-cart-pop 2.6s var(--dm-liquid, cubic-bezier(0.34, 1.32, 0.5, 1)) infinite; }
@keyframes dm-bell-call { 0%, 46%, 100% { transform: rotate(0); } 4% { transform: rotate(26deg) scale(1.12); } 9% { transform: rotate(-24deg) scale(1.12); } 14% { transform: rotate(20deg) scale(1.1); } 19% { transform: rotate(-17deg) scale(1.08); } 24% { transform: rotate(12deg) scale(1.05); } 30% { transform: rotate(-8deg); } 36% { transform: rotate(4deg); } 41% { transform: rotate(-2deg); } }
@keyframes dm-bell-halo { 0% { opacity: 0.85; transform: scale(0.7); } 45%, 100% { opacity: 0; transform: scale(1.45); } }
.dm-bell-item.is-calling .dm-bell-row { background: color-mix(in srgb, var(--dm-primary) 9%, var(--dm-bg)); }
.dm-bell-item.is-calling .dm-bell-ic { background: var(--dm-primary); color: var(--dm-on-primary); }
@media (prefers-reduced-motion: reduce) {
    .dm-bell.is-calling .dm-bell-btn .dm-i, .dm-bell.is-calling .dm-bell-btn em { animation: none; }
    .dm-bell.is-calling .dm-bell-btn::before { animation: none; opacity: 1; transform: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--dm-primary) 25%, transparent); }
}

/* My account › Notifications */
.dm-nt { display: flex; flex-direction: column; gap: 1.25rem; }
.dm-nt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.dm-nt-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dm-nt-tabs a { padding: 0.4rem 0.85rem; border: 1px solid var(--dm-line); border-radius: 999px; font-size: 0.82rem; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.dm-nt-tabs a:hover { border-color: var(--dm-text); }
.dm-nt-tabs a[aria-current] { border-color: var(--dm-btn); background: var(--dm-btn); color: var(--dm-on-btn); }
.dm-nt-list { margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--dm-line); border-radius: var(--dm-r); }
.dm-nt-item + .dm-nt-item { border-top: 1px solid var(--dm-line); }
.dm-nt-row { padding: 1rem 1.25rem; }
.dm-nt-text b { font-size: 0.92rem; }
.dm-nt-text small { -webkit-line-clamp: 3; font-size: 0.84rem; }
.dm-nt-dot { flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.4rem; border-radius: 50%; background: var(--dm-primary); }
.dm-nt-pages { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.dm-nt-prefs { display: flex; flex-direction: column; gap: 0.6rem; }
.dm-nt-prefs > p { margin: 0; font-size: 0.86rem; }
.dm-nt-opts { margin: 0.25rem 0 1rem; padding: 0; list-style: none; }
.dm-nt-opts li { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 0; border-bottom: 1px solid var(--dm-line); }
.dm-nt-opt-ic { display: grid; flex: none; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--dm-soft); color: var(--dm-muted); }
.dm-nt-opt-t { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; min-width: 0; font-size: 0.9rem; }
.dm-nt-opt-t small { color: var(--dm-muted); font-size: 0.75rem; }
.dm-nt-opt-t .dm-link { font-size: 0.8rem; }
.dm-nt-sw { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.dm-nt-sw input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.dm-nt-sw i { position: relative; width: 2.5rem; height: 1.45rem; border-radius: 1rem; background: var(--dm-line); transition: background-color 0.2s; }
.dm-nt-sw i::after { content: ''; position: absolute; top: 0.2rem; inset-inline-start: 0.2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: transform 0.2s var(--dm-ease); }
.dm-nt-sw input:checked + i, .dm-nt-sw input:checked ~ i { background: var(--dm-primary); }
.dm-nt-sw input:checked ~ i::after { transform: translateX(1.05rem); }
[dir='rtl'] .dm-nt-sw input:checked ~ i::after { transform: translateX(-1.05rem); }
.dm-nt-sw input:disabled ~ i { opacity: 0.55; }
.dm-nt-sw:has(input:disabled) { cursor: not-allowed; }
.dm-nt-sw input:focus-visible ~ i { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
@media (max-width: 48em) {
    .dm-nt-row { padding: 0.9rem 1rem; }
}
/* Phones: while the bell's sheet is open, the floating chat and WhatsApp buttons step aside. */
@media (max-width: 48em) {
    body:has(.dm-bell.is-open) .dm-lc, body:has(.dm-bell.is-open) .dm-wa, body:has(.dm-bell.is-open) .dm-top-btn, body:has(.dm-bell.is-open) .dm-popup { visibility: hidden; }
}

/* The header search bar's suggestions (wider screens), drawn with the search screen's own result styles. */
.dm-mainbar .dm-search { position: relative; overflow: visible; }
.dm-sugg { position: absolute; top: calc(100% + 0.5rem); inset-inline: -1px; z-index: 60; max-height: min(34rem, 75vh); padding: 1rem 1.2rem 1.2rem; overflow-y: auto; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); color: var(--dm-text); box-shadow: 0 18px 40px rgb(1 15 28 / 0.12); animation: dm-bell-in 0.18s var(--dm-ease); }
.dm-sugg .dm-ss-list a:focus-visible { outline: 0; background: var(--dm-soft); box-shadow: inset 0 0 0 1px var(--dm-line); }
.dm-sugg .dm-ss-cats a:focus-visible { outline: 0; border-color: var(--dm-text); }
/* Search suggestions scroll smoothly with no scroll bar; a soft shade at the top or bottom shows there is more
   (the "local" layers cover it once the end is reached). The phone search sheet does the same. */
.dm-sugg, .dm-ss-body { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.dm-sugg::-webkit-scrollbar, .dm-ss-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.dm-sugg {
  background:
    linear-gradient(var(--dm-bg) 30%, transparent) center top / 100% 2.5rem no-repeat local,
    linear-gradient(transparent, var(--dm-bg) 70%) center bottom / 100% 2.5rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(1 15 28 / 0.14), transparent) center top / 100% 0.8rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgb(1 15 28 / 0.14), transparent) center bottom / 100% 0.8rem no-repeat scroll,
    var(--dm-bg);
}
@media (prefers-reduced-motion: reduce) { .dm-sugg, .dm-ss-body { scroll-behavior: auto; } }
@media (max-width: 48em) { .dm-sugg { display: none; } }
@media (prefers-reduced-motion: reduce) { .dm-sugg { animation: none; } }

/* Search results: rows arrive one after another, and the row under the pointer lifts gently (picture grows, name nudges). */
@keyframes dm-ss-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dm-ss-list li, .dm-ss-cats a, .dm-ss-all { animation: dm-ss-in 0.32s var(--dm-ease) both; }
.dm-ss-list li:nth-child(1) { animation-delay: 0.02s; }
.dm-ss-list li:nth-child(2) { animation-delay: 0.06s; }
.dm-ss-list li:nth-child(3) { animation-delay: 0.1s; }
.dm-ss-list li:nth-child(4) { animation-delay: 0.14s; }
.dm-ss-list li:nth-child(5) { animation-delay: 0.18s; }
.dm-ss-list li:nth-child(6) { animation-delay: 0.22s; }
.dm-ss-cats a { animation-delay: 0.24s; }
.dm-ss-all { animation-delay: 0.28s; }
.dm-ss-pic img, .dm-ss-pic .dm-i { transition: transform 0.35s var(--dm-ease); }
.dm-ss-name { transition: transform 0.25s var(--dm-ease); }
.dm-ss-list a:hover .dm-ss-pic img, .dm-ss-list a:focus-visible .dm-ss-pic img, .dm-ss-list a:hover .dm-ss-pic .dm-i { transform: scale(1.08); }
.dm-ss-list a:hover .dm-ss-name, .dm-ss-list a:focus-visible .dm-ss-name { transform: translateX(3px); }
[dir='rtl'] .dm-ss-list a:hover .dm-ss-name, [dir='rtl'] .dm-ss-list a:focus-visible .dm-ss-name { transform: translateX(-3px); }
.dm-ss-all .dm-i { transition: transform 0.25s var(--dm-ease); }
.dm-ss-all:hover .dm-i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .dm-ss-list li, .dm-ss-cats a, .dm-ss-all { animation: none; }
    .dm-ss-list a:hover .dm-ss-pic img, .dm-ss-list a:hover .dm-ss-name, .dm-ss-all:hover .dm-i { transform: none; }
}

/* Before typing (desktop drop-down and phone screen): recent, trending and popular as chips. */
.dm-sugg-idle { display: flex; flex-direction: column; }
.dm-sugg-idle .dm-ss-sec { animation: dm-ss-in 0.3s var(--dm-ease) both; }
.dm-sugg-idle .dm-ss-sec:nth-child(2) { animation-delay: 0.06s; }
.dm-sugg-idle .dm-ss-sec:nth-child(3) { animation-delay: 0.12s; }
.dm-ss-chips.is-trend a .dm-i { color: var(--dm-primary); }
.dm-ss-chips a { transition: border-color 0.2s, background-color 0.2s; }
.dm-ss-chips a:hover { border-color: var(--dm-text); }
@media (prefers-reduced-motion: reduce) { .dm-sugg-idle .dm-ss-sec { animation: none; } }

/* My account › Account settings: profile photo, and its popup (drop, drag into the circle, zoom). */
.dm-photo { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.dm-photo-av { display: grid; place-items: center; flex: none; width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden; background: var(--dm-primary); color: var(--dm-on-primary); font-size: 1.9rem; font-weight: 600; }
.dm-photo-av img { width: 100%; height: 100%; object-fit: cover; }
.dm-photo-txt { display: grid; gap: 0.35rem; min-width: 0; }
.dm-photo-txt .dm-h3 { margin: 0; padding: 0; border: 0; }
.dm-photo-txt .dm-muted { margin: 0; font-size: 0.9rem; }
.dm-photo-acts, .dm-photo-rm, .dm-photo-sure { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dm-photo-acts { margin-top: 0.4rem; }
.dm-photo-sure > span { font-size: 0.88rem; font-weight: 500; }
.dm-photo-sure[hidden], .dm-photo-rm [hidden] { display: none; }
.dm-photo .dm-field-err, .dm-photo-box .dm-field-err { margin: 0; color: #dc2626; font-size: 0.86rem; font-weight: 500; }
.dm-photo-box { display: grid; gap: 1rem; width: min(100%, 26rem); border-radius: max(var(--dm-r), 18px); }
.dm-photo-box .dm-h3 { margin: 0; padding-inline-end: 2.5rem; }
.dm-photo-drop { position: relative; display: grid; place-items: center; gap: 0.4rem; padding: 2.5rem 1.25rem; border: 1.5px dashed var(--dm-line); border-radius: var(--dm-r); background: var(--dm-soft); text-align: center; cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
.dm-photo-drop:hover, .dm-photo-drop:focus-within, .dm-photo-drop.is-over { border-color: var(--dm-text); background: color-mix(in srgb, var(--dm-primary) 7%, var(--dm-bg)); }
.dm-photo-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dm-photo-drop svg { color: var(--dm-primary); }
.dm-photo-drop span { color: var(--dm-muted); font-size: 0.84rem; }
.dm-photo-drop[hidden], .dm-photo-crop[hidden] { display: none; }
.dm-photo-crop { display: grid; justify-items: center; gap: 0.85rem; }
.dm-photo-stage { position: relative; width: min(18rem, 100%); aspect-ratio: 1; overflow: hidden; border-radius: var(--dm-r); background: #111; cursor: grab; touch-action: none; user-select: none; outline: none; }
.dm-photo-stage:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary) 45%, transparent); }
.dm-photo-stage.is-moving { cursor: grabbing; }
.dm-photo-stage img { position: absolute; top: 50%; left: 50%; max-width: none; pointer-events: none; }
/* The circle that becomes the photo; outside it is dimmed. */
.dm-photo-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / 0.55); outline: 2px solid rgb(255 255 255 / 0.9); outline-offset: -2px; pointer-events: none; }
.dm-photo-zoom { display: flex; align-items: center; gap: 0.6rem; width: min(18rem, 100%); color: var(--dm-muted); }
.dm-photo-zoom input { flex: 1; accent-color: var(--dm-primary); }
.dm-photo-hint { margin: 0; font-size: 0.82rem; text-align: center; }
.dm-photo-foot { display: flex; justify-content: flex-end; gap: 0.5rem; }
.dm-photo-foot [hidden] { display: none; }
.dm-photo-foot .dm-btn[disabled] { opacity: 0.5; pointer-events: none; }
@media (max-width: 30em) { .dm-photo { align-items: flex-start; } .dm-photo-av { width: 4.5rem; height: 4.5rem; font-size: 1.4rem; } }


/* ---- Forge Desk: Help centre articles (home bands, a category, an article). Same flat lines-and-tints look as .dm-sp-j ---- */
.dm-hc-search { max-width: 30rem; margin-bottom: 1.5rem; }
.dm-hc-search.is-small { width: 100%; max-width: 24rem; height: 3.1rem; margin: 0; }
.dm-hc-search.is-small .dm-btn { height: 2.3rem; }
.dm-hc-band { padding-block: 0 3.5rem; scroll-margin-top: 6rem; }
.dm-hc-band.is-last { padding-bottom: 4.5rem; }
.dm-hc-band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding-top: 2.25rem; border-top: 1px solid var(--dm-line); }
.dm-hc-band-head h2 { margin: 0; font: 600 clamp(1.45rem, 2.4vw, 1.9rem)/1.15 var(--dm-font-head); letter-spacing: -0.035em; }
.dm-hc-band-head .dm-link { flex: none; white-space: nowrap; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; }

.dm-hc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.dm-hc-cat { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.35rem 1.35rem 1.2rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); color: inherit; transition: border-color 0.35s var(--dm-ease), transform 0.5s var(--dm-ease), background-color 0.35s var(--dm-ease); }
.dm-hc-cat-ic { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.65rem; border-radius: calc(var(--dm-r) * 0.9); background: var(--dm-soft); transition: background-color 0.35s var(--dm-ease), color 0.35s var(--dm-ease); }
.dm-hc-cat b { font: 600 1.12rem/1.25 var(--dm-font-head); letter-spacing: -0.03em; }
.dm-hc-cat small { color: var(--dm-muted); font-size: 0.85rem; line-height: 1.45; }
.dm-hc-cat-n { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; padding-top: 0.75rem; color: var(--dm-muted); font-size: 0.8rem; font-weight: 600; }
.dm-hc-cat:hover, .dm-hc-cat:focus-visible { border-color: var(--dm-text); transform: translateY(-3px); }
.dm-hc-cat:hover .dm-hc-cat-ic, .dm-hc-cat:focus-visible .dm-hc-cat-ic { background: var(--dm-btn); color: var(--dm-on-btn); }
.dm-hc-cat:hover .dm-hc-cat-n { color: var(--dm-primary); }

.dm-hc-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dm-line); }
.dm-hc-rows li { border-bottom: 1px solid var(--dm-line); }
.dm-hc-rows li > a, .dm-hc-faq > summary { display: flex; align-items: center; gap: 1.1rem; padding: 1.15rem 0.4rem; color: inherit; border-radius: var(--dm-r); cursor: pointer; transition: background-color 0.35s var(--dm-ease), padding 0.45s var(--dm-ease); }
.dm-hc-faq > summary { list-style: none; }
.dm-hc-faq > summary::-webkit-details-marker { display: none; }
.dm-hc-rows b { font: 600 1.05rem/1.3 var(--dm-font-head); letter-spacing: -0.025em; white-space: normal; }
.dm-hc-rows small { margin-top: 0.15rem; color: var(--dm-muted); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-hc-rows li > a:hover, .dm-hc-rows li > a:focus-visible, .dm-hc-faq > summary:hover { background: var(--dm-soft); padding-inline: 1.1rem; }
.dm-hc-rows li > a:hover .dm-sp-j-ar, .dm-hc-rows li > a:focus-visible .dm-sp-j-ar { color: var(--dm-primary); transform: translateX(4px); }
[dir='rtl'] .dm-hc-rows li > a:hover .dm-sp-j-ar, [dir='rtl'] .dm-hc-rows li > a:focus-visible .dm-sp-j-ar { transform: translateX(-4px); }
.dm-hc-faq[open] .dm-sp-j-ar { transform: rotate(180deg); }
.dm-hc-faq .dm-prose { padding: 0 0.4rem 1.25rem 3.85rem; color: var(--dm-muted); }
[dir='rtl'] .dm-hc-faq .dm-prose { padding: 0 3.85rem 1.25rem 0.4rem; }
.dm-hc-kind { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--dm-r-sm); background: var(--dm-soft); }
.dm-hc-num { flex: none; min-width: 2.2rem; color: var(--dm-primary); font: 600 1.5rem/1 var(--dm-font-head); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.dm-hc-mins { flex: none; color: var(--dm-muted); font-size: 0.8rem; white-space: nowrap; }
.dm-hc-rows.is-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; border-top: 0; }
.dm-hc-rows.is-two li:nth-child(-n + 2) { border-top: 1px solid var(--dm-line); }
.dm-hc-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3rem 1.5rem; border: 1px dashed var(--dm-line); border-radius: var(--dm-r); text-align: center; color: var(--dm-muted); }
.dm-hc-empty b { color: var(--dm-text); font: 600 1.2rem/1.3 var(--dm-font-head); }
.dm-hc-empty p { margin: 0 0 0.75rem; }

/* category head and the two-column layout (main + aside) */
.dm-hc-head { display: flex; align-items: flex-end; gap: 1.5rem; padding-block: 2.5rem 2rem; }
.dm-hc-head-ic { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; flex: none; border-radius: var(--dm-r); background: var(--dm-btn); color: var(--dm-on-btn); }
.dm-hc-head-text { flex: 1; min-width: 0; }
.dm-hc-head-text .dm-sp-eyebrow { margin-bottom: 0.3rem; }
.dm-hc-h1 { margin: 0; font: 600 clamp(2rem, 4.2vw, 3.1rem)/1.05 var(--dm-font-head); letter-spacing: -0.04em; text-wrap: balance; }
.dm-hc-lead { max-width: 52ch; margin: 0.7rem 0 0; color: var(--dm-muted); font-size: 1.05rem; line-height: 1.55; }
.dm-hc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; align-items: start; padding-block: 0 4.5rem; }
.dm-hc-layout.is-article { padding-top: 2rem; }
.dm-hc-aside { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.25rem; }
.dm-hc-aside-h { margin: 0 0 0.5rem; color: var(--dm-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.dm-hc-topics ul { margin: 0; padding: 0; list-style: none; }
.dm-hc-topics a { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: var(--dm-r-sm); color: inherit; font-size: 0.92rem; transition: background-color 0.3s var(--dm-ease); }
.dm-hc-topics a:hover { background: var(--dm-soft); }
.dm-hc-topics a[aria-current='page'] { background: var(--dm-primary-soft); color: var(--dm-primary); font-weight: 600; }
.dm-hc-topics small { color: var(--dm-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.dm-hc-topics.is-articles a { padding-block: 0.55rem; border-inline-start: 2px solid var(--dm-line); border-radius: 0; }
.dm-hc-topics.is-articles a[aria-current='page'] { border-inline-start-color: var(--dm-primary); background: none; }
.dm-hc-topics.is-articles .dm-sp-grow { display: block; }

/* "Still need help?" — a dark card */
.dm-hc-need { padding: 1.5rem; border-radius: var(--dm-r); background: var(--dm-btn); color: var(--dm-on-btn); }
.dm-hc-need-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 0.9rem; border-radius: 50%; background: color-mix(in srgb, var(--dm-on-btn) 14%, transparent); }
.dm-hc-need-t { display: block; font: 600 1.25rem/1.2 var(--dm-font-head); letter-spacing: -0.03em; }
.dm-hc-need p { margin: 0.45rem 0 1.1rem; opacity: 0.75; font-size: 0.88rem; line-height: 1.5; }
.dm-hc-need-btns { display: flex; flex-direction: column; gap: 0.5rem; }
.dm-hc-need .dm-btn { width: 100%; height: 2.75rem; padding: 0 1rem; }
.dm-btn.is-light.is-line { border-color: color-mix(in srgb, var(--dm-on-btn) 35%, transparent); background: transparent; color: var(--dm-on-btn); }
.dm-btn.is-light.is-line:hover { border-color: var(--dm-on-btn); background: var(--dm-on-btn); color: var(--dm-btn); }

/* one article */
.dm-hc-chip { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; padding: 0.3rem 0.8rem; border-radius: 99px; background: var(--dm-primary-soft); color: var(--dm-primary); font-size: 0.8rem; font-weight: 600; }
.dm-hc-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.1rem 0 0; padding-bottom: 1.6rem; border-bottom: 1px solid var(--dm-line); color: var(--dm-muted); font-size: 0.84rem; }
.dm-hc-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.dm-hc-body { max-width: 68ch; padding-top: 1.75rem; font-size: 1.02rem; }
.dm-hc-body h2, .dm-hc-body h3 { margin: 2rem 0 0.6rem; font-family: var(--dm-font-head); letter-spacing: -0.03em; line-height: 1.25; }
.dm-hc-body h2 { font-size: 1.45rem; }
.dm-hc-body h3 { font-size: 1.15rem; }
.dm-hc-body img { max-width: 100%; height: auto; border-radius: var(--dm-r-sm); }
.dm-hc-body ol, .dm-hc-body ul { padding-inline-start: 1.3rem; }
.dm-hc-body li { margin-block: 0.35rem; }
.dm-hc-body a { color: var(--dm-primary); text-decoration: underline; text-underline-offset: 3px; }

.dm-hc-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2.5rem; padding: 1.25rem 1.4rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-soft); }
.dm-hc-vote > b { font: 600 1.05rem/1.3 var(--dm-font-head); letter-spacing: -0.02em; }
.dm-hc-vote-btns { display: flex; gap: 0.5rem; }
.dm-hc-vote-btns button { display: inline-flex; align-items: center; gap: 0.45rem; height: 2.5rem; padding: 0 1.1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r-btn); background: var(--dm-bg); color: var(--dm-text); font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: border-color 0.3s var(--dm-ease), background-color 0.3s var(--dm-ease), color 0.3s var(--dm-ease); }
.dm-hc-vote-btns button:hover { border-color: var(--dm-text); }
.dm-hc-vote-btns button[aria-pressed='true'] { border-color: var(--dm-btn); background: var(--dm-btn); color: var(--dm-on-btn); }
.dm-hc-thanks { color: var(--dm-muted); font-size: 0.88rem; }
.dm-hc-thanks:empty { display: none; }
.dm-hc-vote-more { display: none; align-items: center; gap: 0.35rem; margin-inline-start: auto; font-size: 0.88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dm-hc-vote.is-no .dm-hc-vote-more { display: inline-flex; }

.dm-hc-related { margin-top: 3rem; }
.dm-hc-related h2 { margin: 0 0 1rem; font: 600 1.35rem/1.2 var(--dm-font-head); letter-spacing: -0.03em; }
.dm-hc-relgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.dm-hc-rel { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.1rem 1.15rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); color: inherit; transition: border-color 0.35s var(--dm-ease), transform 0.5s var(--dm-ease); }
.dm-hc-rel small { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--dm-muted); font-size: 0.76rem; }
.dm-hc-rel b { font: 600 1rem/1.3 var(--dm-font-head); letter-spacing: -0.02em; }
.dm-hc-rel-go { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: auto; padding-top: 0.4rem; color: var(--dm-muted); font-size: 0.8rem; font-weight: 600; }
.dm-hc-rel:hover { border-color: var(--dm-text); transform: translateY(-3px); }
.dm-hc-rel:hover .dm-hc-rel-go { color: var(--dm-primary); }

@media (max-width: 980px) {
    .dm-hc-layout { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
    .dm-hc-aside { position: static; }
    .dm-hc-relgrid { grid-template-columns: minmax(0, 1fr); }
    .dm-hc-head { flex-wrap: wrap; align-items: flex-start; }
    .dm-hc-head .dm-hc-search { max-width: none; }
}
@media (max-width: 680px) {
    .dm-hc-rows.is-two { grid-template-columns: minmax(0, 1fr); }
    .dm-hc-rows.is-two li:nth-child(2) { border-top: 0; }
    .dm-hc-rows li > a, .dm-hc-faq > summary { gap: 0.8rem; padding-block: 1rem; }
    .dm-hc-mins { display: none; }
    .dm-hc-head-ic { width: 3.25rem; height: 3.25rem; }
    .dm-hc-cats { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
    .dm-hc-cat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0.9rem; padding: 0.9rem 1rem; }
    .dm-hc-cat-ic { grid-row: span 2; width: 2.6rem; height: 2.6rem; margin: 0; }
    .dm-hc-cat b { font-size: 1rem; }
    .dm-hc-cat small { display: none; }
    .dm-hc-cat-n { grid-column: 2; margin: 0; padding: 0; }
    .dm-hc-faq .dm-prose { padding-inline-start: 0.4rem; }
    [dir='rtl'] .dm-hc-faq .dm-prose { padding-inline: 0 0.4rem; }
    .dm-hc-vote-more { margin-inline-start: 0; }
}
@media (hover: none) { .dm-hc-cat:hover, .dm-hc-rel:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .dm-hc-cat, .dm-hc-rel, .dm-hc-rows li > a, .dm-hc-faq > summary, .dm-hc-cat-ic { transition: none; }
    .dm-hc-cat:hover, .dm-hc-rel:hover { transform: none; }
}

/* ── Grids and UI blocks in written content (ForgePanel's writing box: blog posts, Help centre, Content page block) ──
   ForgePanel draws them plainly with "fpc-" classes and --fpc-* variables; Dazzle Monk gives them its colours,
   corners, fonts and buttons here. */
:root { --fpc-accent: var(--dm-primary); --fpc-accent-ink: var(--dm-on-primary, #fff); --fpc-radius: var(--dm-r); --fpc-head: var(--dm-font-head); --fpc-line: var(--dm-line); --fpc-soft: var(--dm-soft); --fpc-muted: var(--dm-muted); --fpc-dark: var(--dm-secondary, #111); --fpc-bg: var(--dm-bg); }
.dm-prose .fp-grid, .dm-prose .fp-ui { max-width: none; }
.dm-prose .fp-ui :where(h3, p) { margin: 0; }
.dm-prose .fp-ui a { color: inherit; text-decoration: none; }
.dm-text .dm-prose > .fp-grid, .dm-text .dm-prose > .fp-ui { margin-block: 0.75rem; }
.dm-text .dm-prose .fp-col > * + * { margin-top: 0.9rem; }
.dm-prose .fp-ui .fpc-title { font-family: var(--dm-font-head); letter-spacing: -0.015em; color: var(--dm-text); }
.dm-prose .fp-ui .fpc-text { color: var(--dm-muted); }
.dm-prose .fp-ui .fpc-kicker { font-family: var(--dm-font-sub, var(--dm-font-head)); }
/* Buttons are Dazzle Monk's buttons. */
.dm-prose .fp-ui .fpc-btn { height: auto; min-height: 2.75rem; border-color: var(--dm-btn); border-radius: var(--dm-r-btn); background: var(--dm-btn); color: var(--dm-on-btn); font-size: 0.9rem; text-decoration: none !important; transition: background-color 0.45s var(--dm-ease), color 0.45s var(--dm-ease), border-color 0.45s var(--dm-ease), transform 0.55s var(--dm-ease); }
.dm-prose .fp-ui .fpc-btn:hover { opacity: 1; border-color: var(--dm-btn-hover, var(--dm-primary)); background: var(--dm-btn-hover, var(--dm-primary)); color: var(--dm-on-btn-hover, #fff); }
.dm-prose .fp-ui .fpc-btn.is-ghost, .dm-prose .fp-ui.is-look-outline .fpc-btn, .dm-prose .fp-ui .fpc-buttons .fpc-btn + .fpc-btn { background: transparent; color: var(--dm-btn); }
.dm-prose .fp-ui.is-look-soft .fpc-btn { border-color: transparent; background: var(--dm-primary-soft); color: var(--dm-text); }
.dm-prose .fp-ui.is-look-link .fpc-btn { min-height: 0; padding: 0.15rem 0; border: 0; border-radius: 0; background: none; color: var(--dm-text); text-decoration: underline !important; text-decoration-color: var(--dm-primary) !important; text-decoration-thickness: 2px !important; text-underline-offset: 5px; }
.dm-prose .fp-ui .fpc-banner .fpc-btn { border-color: #fff; background: #fff; color: #111; }
.dm-prose .fp-ui .fpc-banner .fpc-btn:hover { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary, #fff); }
.dm-prose .fp-ui.is-look-outline .fpc-banner .fpc-btn { border-color: var(--dm-btn); background: var(--dm-btn); color: var(--dm-on-btn); }
/* Cards, boxes and banners: Dazzle Monk's corners and lines, a lift on pointing. */
.dm-prose .fp-ui .fpc-card, .dm-prose .fp-ui .fpc-feat, .dm-prose .fp-ui .fpc-quote { border-color: var(--dm-line); }
.dm-prose .fp-ui a.fpc-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--dm-text) 25%, transparent); }
.dm-prose .fp-ui.is-look-raised .fpc-card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 14px 34px -14px rgb(0 0 0 / 0.22); }
.dm-prose .fp-ui .fpc-feat .fpc-i { background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-prose .fp-ui .fpc-num b { color: var(--dm-text); }
.dm-prose .fp-ui .fpc-num b::after { content: ""; display: block; width: 1.75rem; height: 3px; margin-top: 0.45rem; border-radius: 2px; background: var(--dm-primary); }
.dm-prose .fp-ui.is-look-band .fpc-num b { color: #fff; }
.dm-prose .fp-ui.is-look-band .fpc-num b::after { margin-inline: auto; }
.dm-prose .fp-ui .fpc-faq summary { font-family: var(--dm-font-sub, var(--dm-font-head)); }
.dm-prose .fp-ui .fpc-faq summary::after { border-color: var(--dm-primary); opacity: 1; }
.dm-prose .fp-ui .fpc-banner { background: var(--dm-secondary, #111); }
.dm-prose .fp-ui .fpc-banner .fpc-title { color: inherit; }
.dm-prose .fp-ui .fpc-banner .fpc-text { color: color-mix(in srgb, currentColor 75%, transparent); }
.dm-prose .fp-ui.is-look-accent .fpc-banner { background: var(--dm-primary); color: var(--dm-on-primary, #fff); }
.dm-prose .fp-ui.is-look-outline .fpc-banner { border-color: var(--dm-line); background: var(--dm-soft); color: var(--dm-text); }
.dm-prose .fp-ui.is-look-outline .fpc-banner .fpc-text { color: var(--dm-muted); }
.dm-prose .fp-ui .fpc-callout .fpc-title { font-size: 1rem; }
.dm-prose .fp-ui .fpc-quote blockquote { margin: 0; padding: 0; border: 0; background: none; color: var(--dm-text); font-style: normal; }
.dm-prose .fp-ui .fpc-video-box { border-radius: var(--dm-r); }
.dm-prose .fp-ui .fpc-play span { background: var(--dm-primary); color: var(--dm-on-primary, #fff); }
.dm-prose .fp-ui .fpc-products { gap: var(--dm-gap, 1rem); }
.dm-prose .fp-ui .fpc-products > * { min-width: 0; }
/* Page block "Divider" (core Divider, Dazzle Monk spacing) */
.dm-divider-block { padding-block: 1.25rem; }
.dm-divider-block .fp-ui { margin: 0; }

/* ── Promo banners: Mughal frame (words in the hand-drawn flower frame; no box behind them) ── */
.dm-mf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dm-mf { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.75rem; }
.dm-mf-card { --mf-ink: var(--dm-text); --mf-text: var(--dm-text); --mf-flower: #f26322; position: relative; display: block; border-radius: calc((var(--mf-rx, 0) + 6) / 1200 * 100%) / calc((var(--mf-rx, 0) + 5) / 880 * 100%); aspect-ratio: 1200 / 880; color: var(--mf-text); text-decoration: none; container-type: inline-size; isolation: isolate; }
.dm-mf.is-night .dm-mf-card { --mf-ink: #f4e9d2; --mf-text: #f4e9d2; --mf-flower: #f47a3a; background: #12100e; }
.dm-mf.is-ivory .dm-mf-card { --mf-ink: #1b1712; --mf-text: #1b1712; background: #fbf4e6; }
.dm-mf-frame { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; color: var(--mf-ink); }
.dm-mf-orn { fill: currentColor; }
.dm-mf-v { transform-box: fill-box; transform-origin: center; }
/* Flowers: one small picture each above the frame, so moving one never redraws the frame. */
.dm-mf-fl { position: absolute; inset: 0; z-index: -1; fill: var(--mf-flower); pointer-events: none; }
.dm-mf-f { position: absolute; display: block; overflow: visible; transform-origin: center; backface-visibility: hidden; }
.dm-mf-shine { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dm-mf-line { fill: none; stroke: currentColor; stroke-width: 3.8; }
.dm-mf-line.is-inner { stroke-width: 4; }
.dm-mf-sweep { opacity: 0; }
/* The words sit in the frame's inner panel (98–1102 × 109–772 of 1200 × 880). */
.dm-mf-text { position: absolute; inset: 12.35% 8.2% 12.3%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.55em; padding: 0 7cqi; }
.dm-mf.is-center .dm-mf-text { align-items: center; text-align: center; }
.dm-mf-kicker { font-family: var(--dm-font-sub, var(--dm-font-head)); font-size: clamp(0.82rem, 3.1cqi, 1.6rem); font-weight: 500; line-height: 1.2; }
.dm-mf-title { display: flex; flex-direction: column; font-family: var(--dm-font-head); font-size: clamp(1.1rem, 6cqi, 3.2rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; }
.dm-mf.is-center .dm-mf-title { align-items: center; }
.dm-mf-up { display: block; }
.dm-mf-btn { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.35em; padding-bottom: 0.15em; border-bottom: 2px solid var(--mf-flower); font-size: clamp(0.8rem, 2.6cqi, 1.05rem); font-weight: 600; }
.dm-mf-btn.dm-mf-up { display: inline-flex; }
.dm-mf-btn svg { transition: transform 0.35s var(--dm-ease); }
.dm-mf-card:hover .dm-mf-btn svg, .dm-mf-card:focus-visible .dm-mf-btn svg { transform: translateX(4px); }
[dir='rtl'] .dm-mf-btn svg { transform: scaleX(-1); }
[dir='rtl'] .dm-mf-card:hover .dm-mf-btn svg { transform: translateX(-4px) scaleX(-1); }
.dm-mf-card:focus-visible { outline-offset: 4px; }
/* Royal shimmer: armed by the block's script only (no JS or less motion: the finished banners) */
@keyframes dm-mf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-mf-sweep { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(2200px); } }
@keyframes dm-mf-slide { from { opacity: 0; transform: translateX(-1.2em); } to { opacity: 1; transform: none; } }
@keyframes dm-mf-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes dm-mf-breathe-v { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
.dm-mf.is-armed:not(.is-in) :is(.dm-mf-line, .dm-mf-orn, .dm-mf-fl, .dm-mf-up) { opacity: 0; }
.dm-mf.is-in :is(.dm-mf-line, .dm-mf-orn, .dm-mf-fl) { animation: dm-mf-fade 0.7s ease calc(var(--i) * 0.15s) both; }
.dm-mf.is-in .dm-mf-sweep { animation: dm-mf-sweep 1.6s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--i) * 0.15s + 0.6s) both; }
.dm-mf.is-in .dm-mf-up { animation: dm-mf-slide 0.7s var(--dm-ease) calc(var(--i) * 0.15s + 0.35s + var(--d) * 0.08s) both; }
[dir='rtl'] .dm-mf.is-in .dm-mf-up { animation-name: dm-mf-fade; }
/* Breathing bloom: each flower opens a little and closes again, in a wave around the frame; the vines breathe lightly. */
.dm-mf.is-live .dm-mf-f { will-change: transform; animation: dm-mf-breathe 4.8s ease-in-out calc(var(--p) * -4.8s) infinite; }
/* (The vines stay still: breathing them redrew the whole frame every moment, which lagged on slower computers.) */
.dm-mf.is-resting * { animation-play-state: paused !important; }
/* Bloom on hover: pointing at a banner opens its flowers wide, one after another around the frame, and they close
   again when the pointer leaves (then the breathing carries on). Not with "No motion". */
.dm-mf:not(.is-motion-off) .dm-mf-f { transition: transform 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) calc(var(--p) * 0.12s); }
@media (hover: hover) {
    .dm-mf:not(.is-motion-off) .dm-mf-card:is(:hover, :focus-visible) .dm-mf-f { animation: none; transform: scale(1.18); transition-delay: calc(var(--p) * 0.3s); }
}
@media (prefers-reduced-motion: reduce) {
    .dm-mf *, .dm-mf { animation: none !important; transition: none !important; }
    .dm-mf.is-armed * { opacity: 1 !important; }
}
@media (max-width: 900px) {
    .dm-mf { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* ── Denomination pictures (1 to 1000): Dazzle Monk's own thumbnails for denomination categories ──
   A patterned circle (a light picture) and the number above it, both images, so the hover only moves them and stays
   smooth. Hover (Spin and pop, Chandru 2026-11-06): the circle turns 30° and grows a little, slowly; a beat later the
   number pops with a small bounce. */
.dm-map.is-den { padding: 6%; }
.dm-cat-pic.has-map .dm-map.is-den { padding: 6%; }
.dm-den { position: relative; display: block; width: 100%; height: 100%; }
.dm-den img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Written strongly enough to beat the general picture zoom on cards (e.g. .dm-cat:hover .dm-cat-pic img), which
   otherwise won and left the circle only growing, without turning. */
.dm-den > img.dm-den-c { transform: none; transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
.dm-den > img.dm-den-n { transform: none; transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
:is(a, button, .dm-cat):is(:hover, :focus-visible) .dm-den > img.dm-den-c.dm-den-c { transform: rotate(30deg) scale(1.05); }
:is(a, button, .dm-cat):is(:hover, :focus-visible) .dm-den > img.dm-den-n.dm-den-n { transform: scale(1.11); transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
    .dm-den > img.dm-den-c, .dm-den > img.dm-den-n { transition: none; transform: none !important; }
}
/* Dark mode: the circle is drawn in dark lines, which vanished into the dark page (Chandru, 2026-11-12). It turns light
   and a little faint, so the pattern shows behind the number without outshining it. */
html[data-dm-theme='dark'] .dm-den > img.dm-den-c { filter: invert(1); opacity: 0.5; }
@media (prefers-color-scheme: dark) {
    html:not([data-dm-theme='light']) .dm-den > img.dm-den-c { filter: invert(1); opacity: 0.5; }
}

/* Endless motion rests while off screen (dm.js adds .dm-rest). */
.dm-rest, .dm-rest * { animation-play-state: paused !important; }

/* Menu drawer (Chandru, 2026-11-07): the main menu in the heading font (Unbounded by default); pointed at or the page
   you're on: bold, in the primary colour (#ff6d00 by default). Social icons under the hotline / support links. */
.dm-drawer-nav > a, .dm-drawer-nav summary, .dm-drawer-nav details a { font-family: var(--dm-font-head); font-weight: 400; letter-spacing: -0.01em; transition: color 0.2s; }
.dm-drawer-nav > a, .dm-drawer-nav summary { font-size: 0.95rem; }
.dm-drawer-nav details a { font-size: 0.85rem; }
/* Deeper levels in the phone menu (Banknotes › World Banknotes › Africa): each one opens inside its parent, a step in. */
.dm-drawer-nav details details { margin-inline-start: 1rem; border-top: 1px solid var(--dm-line); border-bottom: 0; }
.dm-drawer-nav details details + a { border-top: 1px solid var(--dm-line); }
.dm-drawer-nav details details > summary { padding: 0.55rem 0; font-size: 0.85rem; }
.dm-drawer-nav details details > summary .dm-i { transition: transform 0.2s; }
.dm-drawer-nav details details:last-child { padding-bottom: 0.4rem; }
.dm-drawer-nav a:hover, .dm-drawer-nav summary:hover, .dm-drawer-nav a.is-on, .dm-drawer-nav details.is-on > summary { color: var(--dm-primary); font-weight: 700; }
.dm-drawer-links + .dm-drawer-social { margin-top: 0; }
.dm-drawer-social { display: flex; flex-wrap: wrap; margin: auto 0 0; padding: 0; list-style: none; }
.dm-drawer-social a { border-color: var(--dm-line); color: var(--dm-text); }
.dm-drawer-social a:hover, .dm-drawer-social a:focus-visible { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-drawer-links .dm-support b { font-family: var(--dm-font-head); font-weight: 700; font-size: 1.05rem; }
.dm-drawer-links .dm-support small { font-size: 0.82rem; }
.dm-drawer-links .dm-support:hover b { color: var(--dm-primary); }

/* Every sideways row (product rails like "You may also like", swipe rows, category rows, tabs, chips, Instagram strips)
   moves only left and right, like an app: no up-and-down wobble inside the row, and a swipe at its end doesn't drag
   the page sideways or trigger back (Chandru, 2026-11-07). The page itself still scrolls up and down over them. */
@media (max-width: 991.98px) {
    .dm-rail, .dm-cats-row, .dm-subcats-row, .dm-sec .dm-grid.is-swipe-m:not(.is-shop), .dm-tabs.is-pd, .dm-acc-nav, .dm-acc .dm-chips, .dm-faq-nav, .dm-rws-ladder,
    .dmig.is-strip .dmig-grid, .dmig.is-slider .dmig-grid, .dma-bar-links {
        overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
    }
}

/* My account on phones: "Picked for you" goes to the end of the page, after the menu and recent orders, so the welcome
   is followed straight away by what the shopper came for (Chandru, 2026-11-07). Computers keep it under the welcome. */
@media (max-width: 47.99em) {
    .dm-acc-main > .dm-welcome-picks { order: 99; }
}

/* A promo banner with its picture as the background: the artwork stays as drawn in dark mode (usually light), so a
   light, tint or soft banner keeps the light-mode text colour instead of turning white (Chandru, 2026-11-07).
   Dark and Brand banners keep their own ink. */
.dm-banner.is-cover:not(.is-dark):not(.is-brand) { color: var(--dm-ink-light, #000000); }
.dm-banner.is-cover:not(.is-dark):not(.is-brand) .dm-link { color: inherit; }
.dm-banner.is-cover:not(.is-dark):not(.is-brand):hover .dm-link { color: var(--dm-primary); }

/* Dropdown menus: the item pointed at (and the page you're on) turns bold as well as orange (Chandru, 2026-11-07).
   A hidden bold copy of each name reserves the bold width, so the dropdown never changes size on hover. */
.dm-sub a:hover, .dm-sub a:focus-visible, .dm-sub a.is-here, .dm-sub li.has-sub:hover > a { color: var(--dm-primary); font-weight: 600; }
.dm-sub .dm-nav-t::after { content: attr(data-t); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; user-select: none; speak: never; }

/* ---- Help centre: answers while typing (dm.js), typo note, quick actions, results with the answering line ---- */
.dm-hc-search { position: relative; }
.dm-hc-suggest { position: absolute; inset-inline: -1.5px; top: calc(100% + 0.5rem); z-index: 40; max-height: min(70vh, 34rem); overflow-y: auto; padding: 0.4rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); background: var(--dm-bg); color: var(--dm-text); box-shadow: 0 18px 44px rgb(0 0 0 / 0.14); animation: dm-hc-sg-in 0.22s var(--dm-ease); }
.dm-hc-suggest[hidden] { display: none; }
@keyframes dm-hc-sg-in { from { opacity: 0; transform: translateY(-4px); } }
.dm-hc-sg-row { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.65rem 0.7rem; border-radius: var(--dm-r-sm); color: inherit; }
.dm-hc-sg-row .dm-hc-kind { width: 2.1rem; height: 2.1rem; margin-top: 0.1rem; }
.dm-hc-sg-row em, .dm-hc-where { display: block; font-style: normal; color: var(--dm-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.dm-hc-sg-row b { font: 600 0.95rem/1.3 var(--dm-font-head); letter-spacing: -0.02em; white-space: normal; }
.dm-hc-sg-row small { display: -webkit-box; margin-top: 0.15rem; overflow: hidden; color: var(--dm-muted); font-size: 0.8rem; line-height: 1.45; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dm-hc-sg-row.is-action .dm-hc-kind { background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-hc-sg-row:hover, .dm-hc-sg-row[aria-selected='true'], .dm-hc-sg-all:hover, .dm-hc-sg-all[aria-selected='true'] { background: var(--dm-soft); }
.dm-hc-sg-all { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.3rem; padding: 0.7rem; border-top: 1px solid var(--dm-line); border-radius: 0 0 var(--dm-r-sm) var(--dm-r-sm); color: var(--dm-text); font-size: 0.85rem; font-weight: 600; }
[dir='rtl'] .dm-hc-sg-all .dm-i { transform: scaleX(-1); }
.dm-hc-sg-fix, .dm-hc-sg-none { margin: 0; padding: 0.55rem 0.7rem; color: var(--dm-muted); font-size: 0.8rem; }
.dm-hc-sg-fix { color: var(--dm-primary); font-weight: 600; }
.dm-hc-fixed { margin: -0.5rem 0 1rem; color: var(--dm-muted); font-size: 0.9rem; }
.dm-hc-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.dm-hc-action { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; border: 1px solid var(--dm-line); border-radius: var(--dm-r); color: inherit; transition: border-color 0.35s var(--dm-ease), transform 0.5s var(--dm-ease); }
.dm-hc-action .dm-hc-kind { background: var(--dm-primary-soft); color: var(--dm-primary); }
.dm-hc-action b { font: 600 1rem/1.25 var(--dm-font-head); letter-spacing: -0.02em; }
.dm-hc-action > .dm-i { flex: none; color: var(--dm-muted); }
.dm-hc-action:hover { border-color: var(--dm-text); transform: translateY(-2px); }
[dir='rtl'] .dm-hc-action > .dm-i { transform: scaleX(-1); }
.dm-hc-rows.is-results small { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; }
.dm-hc-rows.is-results li > a { align-items: flex-start; }
.dm-hc-rows.is-results .dm-hc-kind, .dm-hc-rows.is-results .dm-sp-j-ar { margin-top: 0.2rem; }
@media (max-width: 680px) { .dm-hc-suggest { max-height: 60vh; } .dm-hc-actions { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .dm-hc-suggest { animation: none; } .dm-hc-action { transition: none; } .dm-hc-action:hover { transform: none; } }
.dm-totals .is-pay-state { align-items: center; }
.dm-pay-state { display: inline-flex; white-space: nowrap; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--dm-line); font-size: 0.8rem; font-weight: 600; }
.dm-pay-state.is-ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.dm-pay-state.is-wait { background: color-mix(in srgb, var(--dm-primary) 15%, transparent); color: var(--dm-text); }
.dm-pay-state.is-due { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }

/* Footer: about text alignment and the logos row (Theme options › Footer). */
.dm-foot-about .dm-foot-text { max-width: 46ch; text-wrap: pretty; }
.dm-foot-text.is-justify { text-align: justify; hyphens: auto; }
.dm-foot-text.is-center { text-align: center; align-self: center; }
.dm-foot-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 3rem; margin: 0; padding: 1.75rem 0; border-top: 1px solid var(--dm-line); list-style: none; }
.dm-footer.is-statement .dm-foot-logos { border-top-color: #292524; }
.dm-foot-logos img { display: block; height: 3.25rem; width: auto; max-width: min(100%, 28rem); object-fit: contain; }
.dm-foot-logos.is-tint img { filter: invert(1) grayscale(1); }
.dm-foot-logos a { display: block; transition: opacity 0.2s; }
.dm-foot-logos a:hover { opacity: 0.8; }
@media (max-width: 767.98px) { .dm-foot-logos { gap: 1rem 2rem; padding: 1.25rem 0; } .dm-foot-logos img { height: 2.5rem; } }
/* One picture holding several logos side by side (the default): shown wider. */
.dm-foot-logos li:only-child { width: min(100%, 30rem); }
.dm-foot-logos li:only-child img { width: 100%; height: auto; max-width: none; }
/* Logos under the about text: left-aligned, no rule, as wide as the text. */
.dm-foot-logos.is-about { justify-content: flex-start; gap: 0.75rem 1.5rem; padding: 0; border-top: 0; width: 100%; max-width: 46ch; }
.dm-foot-logos.is-about img { height: 2.75rem; max-width: 100%; }
.dm-foot-logos.is-about li:only-child { width: 100%; }
.dm-foot-logos.is-about li:only-child img { height: auto; }
/* Logos in place of the store logo: top of the about column, left-aligned. */
.dm-foot-logos.is-logo { justify-content: flex-start; gap: 0.75rem 1.5rem; padding: 0; border-top: 0; width: 100%; max-width: 46ch; }
.dm-foot-logos.is-logo img { height: 3rem; max-width: 100%; }
.dm-foot-logos.is-logo li:only-child { width: 100%; }
.dm-foot-logos.is-logo li:only-child img { height: auto; }

/* Pages of text only with fewer than two headings: one reading column, no "On this page" list. */
.dm-doc.is-solo { grid-template-columns: minmax(0, 56rem); }
/* Text sections on other pages (Website › Pages, not the home page): headings sized like the rest of the page, sections closer together. */
.is-page:not(.is-home) .dm-page .dm-text .dm-h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.is-page:not(.is-home) .dm-page:not(.dm-doc-body) .dm-text { padding-top: clamp(2rem, 4vw, 2.75rem); }
/* A category's sub-category pictures: the description lines up with the title above it. */
.dm-cathub-intro { max-width: none; margin: 0 0 2.5rem; text-align: start; }
/* "Even edges" footer text spreads words far apart on a narrow phone column. */
@media (max-width: 600px) { .dm-foot-text.is-justify { text-align: start; hyphens: manual; } }

/* Contact form, "Big type" look: large heading, email as the main link, line fields (black, primary colour when active) whose labels move up. */
.dm-contact.is-big { padding-bottom: 1rem; }
.dm-cbig-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: end; padding-bottom: clamp(1.5rem, 3.5vw, 2.75rem); border-bottom: 2px solid var(--dm-text); }
.dm-cbig-h { font-size: clamp(2.3rem, 6.5vw, 5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.dm-cbig-h i { font-style: normal; color: var(--dm-primary); }
.dm-cbig-mail { justify-self: end; min-width: 0; text-align: end; }
.dm-cbig-mail small { display: block; color: var(--dm-muted); font-size: 0.85rem; }
.dm-cbig-mail a { padding-bottom: 0.2rem; background: linear-gradient(var(--dm-primary), var(--dm-primary)) 0 100% / 100% 2px no-repeat; font: 600 clamp(1rem, 2vw, 1.35rem) var(--dm-font-head); overflow-wrap: anywhere; transition: background-size 0.3s var(--dm-ease), color 0.3s; }
.dm-cbig-mail a:hover, .dm-cbig-mail a:focus-visible { background-size: 100% 100%; color: var(--dm-on-primary); }
.dm-cbig-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); padding-top: clamp(1.75rem, 4vw, 3rem); }
.dm-cbig-main.has-info { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.dm-cbig-info { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.dm-cbig-info b { display: block; margin-bottom: 0.2rem; color: var(--dm-muted); font: 600 0.75rem var(--dm-font-head); letter-spacing: 0.06em; text-transform: uppercase; }
.dm-cbig-info a:hover { color: var(--dm-primary); }
.dm-cbig-lede { color: var(--dm-muted); }
.dm-cbig-social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.dm-cbig-social a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--dm-text); border-radius: 50%; color: var(--dm-text); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.dm-cbig-social a:hover { border-color: var(--dm-primary); background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-cbig-form { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.dm-cbig-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.75rem; }
.dm-cbig-fields .is-full { grid-column: 1 / -1; }
.dm-contact.is-big .dm-contact-form { gap: 1.75rem; }
.dm-fl { position: relative; display: block; min-width: 0; font-weight: 400; }
.dm-contact .dm-fl input, .dm-contact .dm-fl textarea { width: 100%; min-height: 0; padding: 1.35rem 0 0.55rem; border: 0; border-bottom: 1.5px solid var(--dm-text); border-radius: 0; background: transparent; box-shadow: none; color: var(--dm-text); font: inherit; font-size: 1rem; }
.dm-contact .dm-fl textarea { min-height: 7rem; resize: vertical; }
.dm-fl > span { position: absolute; inset-inline-start: 0; top: 1.25rem; color: var(--dm-muted); pointer-events: none; transition: top 0.2s, font-size 0.2s, color 0.2s; }
.dm-fl > span em { font-style: normal; opacity: 0.75; }
.dm-contact .dm-fl input:focus, .dm-contact .dm-fl textarea:focus { outline: none; border-bottom-color: var(--dm-primary); box-shadow: inset 0 -1px 0 var(--dm-primary); }
.dm-fl :is(input, textarea):is(:focus, :not(:placeholder-shown)) + span { top: 0; font-size: 0.75rem; }
.dm-fl :is(input, textarea):focus + span { color: var(--dm-primary); }
.dm-fl > small { display: block; margin-top: 0.35rem; color: var(--fp-danger, #dc2626); font-size: 0.8rem; }
.dm-contact .dm-fl.is-bad :is(input, textarea) { border-bottom-color: var(--fp-danger, #dc2626); }
.dm-contact.is-big .dm-contact-send { display: inline-flex; align-items: center; gap: 0.7rem; transition: background-color 0.25s, gap 0.25s; }
.dm-contact.is-big .dm-contact-send:hover { gap: 1rem; }
@media (max-width: 860px) { .dm-cbig-head, .dm-cbig-main.has-info { grid-template-columns: minmax(0, 1fr); } .dm-cbig-mail { justify-self: start; text-align: start; } }
@media (max-width: 560px) { .dm-cbig-fields { grid-template-columns: minmax(0, 1fr); } .dm-contact.is-big .dm-contact-send { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .dm-fl > span, .dm-cbig-mail a, .dm-contact.is-big .dm-contact-send { transition: none; } }

/* Back-in-stock popup: the spam check sits inside the popup, so Cloudflare's "Verify you are human" box shows under
   the email (it stays out of sight for most shoppers, and then takes almost no room). */
.dm-notify-check { display: contents; }
.dm-notify-check .cf-turnstile { justify-self: center; width: 100%; max-width: 100%; margin-block-start: -0.5rem; }
.dm-notify-check .cf-turnstile iframe { max-width: 100%; }