/* "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; }
.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-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); }
.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 .dm-mainbar { position: fixed; top: 0; 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 .dm-mainbar { box-shadow: 0 2px 6px rgb(1 15 28 / 0.16); }
.dm-header.is-compact .dm-mainbar .dm-wrap { padding-block: 1rem; }
@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; }
.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 { --dm-hub-cols: 5; }
/* Sub-category pictures per row (Theme options › Products, 5 by default); tablets up to 4, phones 3. */
.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(min(var(--dm-hub-cols), 4), minmax(0, 1fr)); } }
.dm-cathub-grid .dm-cat-pic { width: 100%; max-width: 13rem; }
@media (max-width: 575px) {
    .dm-cathub-grid { grid-template-columns: repeat(3, 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)); }
}

/* 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; will-change: transform; }
.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); }
.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; }
.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)); }
/* 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); }

/* 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); }
.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; }
}
@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; }
    .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-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); }
.dm-gal-main img { width: 100%; height: 100%; object-fit: contain; padding: 6%; 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: 3%; }
    .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 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; }

@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); }
.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: 0.6rem; 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); }
@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); background: var(--dm-bg); box-shadow: 0 30px 70px rgb(1 15 28 / 0.1); }
.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-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; }
    .has-tabs .dm-mainbar .dm-burger, .has-tabs .dm-mainbar .dm-account { display: none; }
    .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) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); transition: transform 0.3s var(--dm-ease); }
    .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; }
    .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 (not the shop): one row you swipe along. */
    .dm-sec .dm-grid: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:not(.is-shop)::-webkit-scrollbar { display: none; }
    .dm-sec .dm-grid:not(.is-shop) > * { scroll-snap-align: start; }
    .dm-sec .dm-grid.is-deals { 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; }
}

/* ── 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); }
.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%; }
.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; }

/* ---- 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; } }

/* 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); }
@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; } }