/* Dominer theme: dark, bold, fast. One stylesheet, no framework. */

:root {
  --ink: #0a0a0a;
  --surface: #141414;
  --paper: #f5f5f2;
  --muted: #9a9a96;
  --accent: #62bb46;
  --glass: rgba(16, 16, 16, 0.52);
  --glass-strong: rgba(12, 12, 12, 0.95);
  --glass-rim: rgba(255, 255, 255, 0.16);
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Archivo', system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gutter: clamp(16px, 3vw, 48px);
  --logo-h: 52px;
  --bar-pad: 8px;
  --on-accent: #0a0a0a;
  --line: rgba(255, 255, 255, 0.28);
  --line-soft: rgba(255, 255, 255, 0.16);
  --text-soft: rgba(245, 245, 242, 0.8);
  --accent-text: #62bb46;
  /* one size, border and corner for every text box and dropdown (forms, checkout, cart) */
  --field-h: 52px;
  --field-radius: 10px;
  --field-pad: 0 16px;
  --field-focus: 0 0 0 3px rgba(98, 187, 70, 0.35);
  --field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M1 1.5l5.5 5 5.5-5' stroke='%23101010' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Every page except the landing page uses a light scheme; header and footer stay dark. */
body:not(.home) {
  --ink: #f3f3f1; --surface: #e7e7e4; --paper: #101010; --muted: #6a6a67;
  --line: rgba(0, 0, 0, 0.26); --line-soft: rgba(0, 0, 0, 0.14); --text-soft: rgba(16, 16, 16, 0.78); --accent-text: #2e7d1c;
}
/* declared on body so it picks up the light-page --line above */
body { --field-border: 1px solid var(--line); }
.dm-header, .dm-footer {
  --hv: rgba(255, 255, 255, 0.12); --hv2: rgba(255, 255, 255, 0.24);
  --ink: #0a0a0a; --surface: #141414; --paper: #f5f5f2; --muted: #9a9a96;
  --line: rgba(255, 255, 255, 0.28); --line-soft: rgba(255, 255, 255, 0.16); --text-soft: rgba(245, 245, 242, 0.8);
}
/* On light pages the header becomes light frosted glass (dark text, dark logo). On the dark landing page it stays dark glass. */
body:not(.home) .dm-header {
  --ink: #f3f3f1; --paper: #111111; --muted: #5d5d5a; --line: rgba(0, 0, 0, 0.2);
  --glass: rgba(255, 255, 255, 0.55); --glass-strong: rgba(250, 250, 247, 0.93); --glass-rim: rgba(255, 255, 255, 0.8);
  --hv: rgba(0, 0, 0, 0.07); --hv2: rgba(0, 0, 0, 0.13);
}
.dm-header, .dm-footer { color: var(--paper); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > *, .dm-main > * { margin-block: 0 !important; max-width: none; }
.dm-accent { color: var(--accent); font-style: normal; }

/* ---------- Buttons ---------- */
.dm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95em 1.9em; border-radius: 999px; border: 0;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform 0.35s var(--ease), background 0.25s, color 0.25s;
}
.dm-btn:hover { transform: translateY(-3px); }
.dm-btn--light { background: var(--paper); color: var(--ink); }
.dm-btn--light:hover { background: var(--accent); }
.dm-btn--accent { background: var(--accent); color: var(--on-accent); }
.dm-link { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* =====================================================================
   Header: one universal frosted-glass bar on every page
   ===================================================================== */
.dm-header { position: fixed; inset: 14px 0 auto 0; z-index: 60; padding: 0 var(--gutter); pointer-events: none; }
/* Keep the header below the WordPress admin bar for logged-in staff */
.admin-bar .dm-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .dm-header { top: 46px; } }
.dm-header__inner { position: relative; max-width: 1400px; margin: 0 auto; }

.dm-header__bar {
  position: static; pointer-events: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: var(--bar-pad) 14px var(--bar-pad) 18px; border-radius: 26px;
  background: var(--glass); border: 1px solid var(--glass-rim);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
@supports (corner-shape: squircle) { .dm-header__bar { corner-shape: squircle; border-radius: 40px; } }

.dm-logo { display: block; justify-self: start; height: var(--logo-h); }
.dm-logo__img--dark { display: none; }
body:not(.home) .dm-logo__img--light { display: none; }
body:not(.home) .dm-logo__img--dark { display: block; }
.dm-logo img { height: 100%; width: auto; max-width: none; }

.dm-nav__list { display: flex; gap: 4px; justify-content: center; }
.dm-nav__item > a {
  display: block; padding: 13px 20px; border-radius: 13px; font-family: var(--display); font-weight: 700; font-size: 1.2rem;
  letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.25s;
}
@supports (corner-shape: squircle) { .dm-nav__item > a { corner-shape: squircle; border-radius: 20px; } }
.dm-nav__item:hover > a, .dm-nav__item.is-open > a, .dm-nav__item:focus-within > a { background: var(--hv); }
.dm-nav__item > a.is-current { background: var(--hv2); box-shadow: inset 0 0 0 1px var(--glass-rim); }
@media (min-width: 961px) and (max-width: 1180px) { .dm-nav__item > a { padding: 13px 13px; font-size: 1.1rem; } }

/* ---------- Mega menu ---------- */
/* The dropdown panel and the phone drawer are always light frosted glass with pitch-black type, on every page. */
.dm-mega__inner, .dm-drawer { --paper: #000; --ink: #fff; --muted: #4a4a47; --glass-strong: rgba(250, 250, 247, 0.95); --glass-rim: rgba(0, 0, 0, 0.12); --hv: rgba(0, 0, 0, 0.06); --hv2: rgba(0, 0, 0, 0.12); color: #000; }
.dm-mega {
  position: absolute; left: 0; right: 0; top: 100%; padding-top: 10px; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s 0.4s;
}
.dm-mega.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.dm-mega__inner {
  display: block; padding: clamp(24px, 3vw, 44px) clamp(24px, 4vw, 60px); border-radius: 30px;
  background: var(--glass-strong); border: 1px solid var(--glass-rim);
  -webkit-backdrop-filter: blur(34px) saturate(170%); backdrop-filter: blur(34px) saturate(170%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.dm-mega__list { columns: 3; column-gap: clamp(20px, 4vw, 64px); }
.dm-mega__list li { break-inside: avoid; }
.dm-mega__list a {
  display: inline-block; padding: 2px 0; font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.3vw, 2.4rem); line-height: 1; letter-spacing: 0.005em; color: color-mix(in srgb, var(--paper) 55%, transparent);
  transition: color 0.2s, transform 0.4s var(--ease);
}
.dm-mega__list a:hover { color: var(--paper); transform: translateX(10px); }
.dm-mega__list .dm-mega__all a { font-weight: 800; font-size: clamp(2rem, 3.8vw, 4rem); }
.dm-mega__all a, .dm-mega__all a:hover { color: #000; }
/* Dropdown with headed columns (Men, Women): the panel is exactly as wide as the navbar; room to breathe, readable type. */
.dm-mega--cols .dm-mega__inner { padding: clamp(24px, 2.2vw, 36px) clamp(28px, 3.2vw, 52px); }
.dm-mega__cols { display: grid; grid-template-columns: minmax(200px, 0.9fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 60px); align-items: start; }
/* The big "All Men / All Women" card: first cell, as tall as the columns, ready for a picture. */
.dm-mega__allbtn { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; gap: 22px; min-height: 180px; padding: 26px 24px 22px; border-radius: 24px; background: var(--paper); color: var(--ink); font: 800 clamp(1.9rem, 2.5vw, 2.7rem)/0.95 var(--display); letter-spacing: 0.02em; text-transform: uppercase; transition: background 0.25s, color 0.25s, transform 0.4s var(--ease); }
.dm-mega__allbtn svg { align-self: flex-end; transition: transform 0.4s var(--ease); }
.dm-mega__allbtn:hover { background: var(--accent); color: #101010; }
.dm-mega__allbtn:hover svg { transform: translateX(8px); }
/* with a tile picture (Settings > Dominer > Header menu tiles): the picture fills the card under a dark veil */
.dm-mega__allbtn.has-img { background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.7) 100%), var(--dm-menu-img) center / cover no-repeat; color: #fff; }
.dm-mega__allbtn.has-img:hover { background: linear-gradient(180deg, rgba(98, 187, 70, 0.25) 30%, rgba(0, 0, 0, 0.75) 100%), var(--dm-menu-img) center / cover no-repeat; color: #fff; }
.dm-mega__head { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.14); font: 800 clamp(1.3rem, 1.5vw, 1.6rem)/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: #000; }
.dm-mega__links li { break-inside: avoid; }
/* Collection and Customize: the big tile, then one list of links in up to three columns (same width as the Men / Women columns) */
.dm-mega--tile .dm-mega__cols { grid-template-columns: minmax(250px, 1.2fr) minmax(0, 3fr); }
/* these two have few links, so their tile is bigger than the Men / Women one: wider, taller, larger text */
.dm-mega--tile .dm-mega__allbtn { min-height: clamp(260px, 20vw, 340px); padding: 36px 34px 32px; font-size: clamp(2.2rem, 3vw, 3.4rem); gap: 28px; border-radius: 28px; min-width: 0; overflow-wrap: anywhere; }
.dm-mega--tile .dm-mega__allbtn span { text-wrap: balance; }
.dm-mega--tile .dm-mega__allbtn svg { width: 44px; height: 44px; }
.dm-mega__links--flat { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(28px, 3.4vw, 60px); }
/* few links, so they are set big (the Men / Women columns have many and use the small size) */
.dm-mega__links.dm-mega__links--flat li { padding: 0 0 10px; }
.dm-mega__links.dm-mega__links--flat a { font-size: clamp(1.7rem, 2.5vw, 2.7rem); line-height: 1.05; letter-spacing: 0.02em; }
/* Collection and Customize: the window is just as wide as its tile plus its links (no empty space), centred in the navbar (left edge set in main.js) */
.dm-mega--narrow { right: auto; width: max-content; max-width: 100%; }
.dm-mega--narrow .dm-mega__cols { grid-template-columns: clamp(300px, 24vw, 420px) auto; align-items: center; }
.dm-mega--narrow .dm-mega__links--flat { columns: 1; padding-right: 12px; }
.dm-mega--twocol .dm-mega__links--flat { columns: 2; column-gap: clamp(36px, 4vw, 64px); }
.dm-mega__links a {
  display: inline-block; padding: 2px 0; font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.02rem, 1.1vw, 1.15rem); line-height: 1.2; letter-spacing: 0.05em; color: rgba(0, 0, 0, 0.7);
  transition: color 0.2s, transform 0.4s var(--ease);
}
.dm-mega__links a:hover { color: #000; transform: translateX(6px); }

/* ---------- Tools: search, account, cart ---------- */
.dm-tools { display: flex; align-items: center; justify-content: flex-end; gap: 2px; justify-self: end; }
.dm-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 0; background: none; padding: 0; color: inherit; cursor: pointer; transition: background 0.25s; }
.dm-icon:hover, .dm-icon[aria-expanded="true"] { background: var(--hv); }
.dm-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font: 700 11px/18px var(--body); text-align: center; }
.dm-burger { display: none; width: 44px; height: 44px; background: none; border: 0; position: relative; }
.dm-burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--paper); transition: transform 0.35s var(--ease), top 0.35s var(--ease); }
.dm-burger span:first-child { top: 17px; }
.dm-burger span:last-child { top: 25px; }
.dm-burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.dm-burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }


/* ---------- Search panel ---------- */
.dm-search { position: absolute; left: 0; right: 0; top: 100%; margin-top: 10px; padding: clamp(18px, 2.4vw, 32px) clamp(20px, 3.4vw, 52px); border-radius: 30px; background: var(--glass-strong); border: 1px solid var(--glass-rim); -webkit-backdrop-filter: blur(34px) saturate(170%); backdrop-filter: blur(34px) saturate(170%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); pointer-events: auto; animation: dm-drop 0.35s var(--ease); }
.dm-search[hidden] { display: none; }
@keyframes dm-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.dm-search__form { display: flex; align-items: center; gap: 14px; }
.dm-search__input { flex: 1; min-width: 0; height: 68px; background: transparent; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; color: var(--paper); font: 800 clamp(1.8rem, 3.4vw, 3rem) var(--display); letter-spacing: 0.02em; text-transform: uppercase; padding: 0 4px; }
.dm-search__input::placeholder { color: color-mix(in srgb, var(--paper) 40%, transparent); }
.dm-search__input:focus { outline: 0; border-bottom-color: var(--accent); }
body:not(.home) .dm-header__bar { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.dm-search__input::-webkit-search-cancel-button, .dm-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.dm-search__close { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--glass-rim); background: transparent; color: inherit; cursor: pointer; }
.dm-search__close:hover { background: var(--hv); }
.dm-search__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.dm-search__suggest span { color: var(--muted); font: 700 1rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; }
.dm-search__suggest a { padding: 10px 18px; border-radius: 999px; background: var(--hv); font: 700 1.1rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s, color 0.2s; }
.dm-search__suggest a:hover { background: var(--paper); color: var(--ink); }

/* ---------- Mobile drawer (accordion) ---------- */
.dm-drawer { pointer-events: auto; margin-top: 10px; border-radius: 26px; max-height: calc(100svh - 112px); overflow-y: auto; background: var(--glass-strong); border: 1px solid var(--glass-rim); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); display: none; }
.dm-drawer:not([hidden]) { display: block; animation: dm-drop 0.3s var(--ease); }
.dm-acc__item { border-bottom: 1px solid var(--glass-rim); }
.dm-acc__row { display: flex; align-items: stretch; }
.dm-acc__link { flex: 1; display: flex; align-items: center; min-height: 64px; padding: 0 22px; font: 800 2rem var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
.dm-acc__toggle { flex: none; display: grid; place-items: center; width: 64px; border: 0; border-left: 1px solid var(--glass-rim); background: transparent; color: inherit; cursor: pointer; }
.dm-acc__toggle svg { transition: transform 0.3s var(--ease); }
.dm-acc__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.dm-acc__toggle[aria-expanded="true"] { background: var(--hv); }
.dm-acc__sub { padding: 4px 0 14px; background: var(--hv); }
.dm-acc__sub[hidden] { display: none; }
.dm-acc__sub a { display: flex; align-items: center; min-height: 48px; padding: 0 22px 0 38px; font: 500 1.1rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 85%, transparent); }
.dm-acc__sub > li:first-child > a, .dm-acc__links li.is-all a { color: #000; font: 700 1.25rem var(--display); letter-spacing: 0.06em; }
.dm-acc__sub a:active { background: var(--hv2); }
.dm-acc__ghead { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 0 22px 0 38px; border: 0; background: transparent; color: #000; font: 800 1.15rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; text-align: left; cursor: pointer; }
.dm-acc__ghead svg { flex: none; transition: transform 0.3s var(--ease); }
.dm-acc__ghead[aria-expanded="true"] svg { transform: rotate(180deg); }
.dm-acc__ghead[aria-expanded="true"] { background: var(--hv2); }
.dm-acc__links[hidden] { display: none; }
.dm-acc__head { display: block; padding: 14px 22px 4px 38px; font: 800 1rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dm-acc__links { margin: 0; padding: 0; list-style: none; }
.dm-acc__group + .dm-acc__group { border-top: 1px solid var(--glass-rim); margin-top: 6px; }
.dm-drawer__foot { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 18px 22px 22px; }
.dm-drawer__small { flex-basis: 100%; padding: 10px 0 0; color: var(--muted); font: 600 1.05rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 960px) {
  :root { --logo-h: 44px; }
  .dm-header__bar { grid-template-columns: auto 1fr; padding-left: 14px; }
  .dm-nav { display: none; }
  .dm-burger { display: block; }
  .dm-search { padding: 18px 18px 22px; }
  .dm-search__form { flex-wrap: wrap; gap: 10px 10px; }
  .dm-search__input { flex: 1 1 100%; height: 60px; font-size: clamp(1.25rem, 5.6vw, 1.8rem); }
  .dm-search__form .dm-btn { flex: 0 0 auto; padding: 0.7em 1.5em; font-size: 1.05rem; min-height: 46px; }
  .dm-search__close { width: 46px; height: 46px; margin-left: auto; }
}

/* =====================================================================
   Campaign banner block (hero / tile / wide)
   ===================================================================== */
.dm-banner { color: #f5f5f2; position: relative; overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; background: var(--surface); }
.dm-banner picture, .dm-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dm-banner__img { object-fit: cover; }
.dm-banner__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, calc(var(--dm-overlay, 0.35) * 0.8)) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, calc(var(--dm-overlay, 0.35) * 0.4)) 58%, rgba(0, 0, 0, calc(var(--dm-overlay, 0.35) + 0.45)) 100%); }
.dm-banner__copy { position: relative; z-index: 2; width: 100%; }
.dm-banner__title { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.dm-banner__sub { margin: 0; color: rgba(245, 245, 242, 0.92); }

/* Hero: cinematic settle + slow drift, vignette, centered title revealed by a wipe, then a silver sheen (ported from the old site) */
.dm-hero { height: 100vh; height: 100svh; min-height: 560px; align-items: center; justify-content: flex-start; text-align: left; }
.dm-hero .dm-banner__img { transform: scale(1.04); transform-origin: 62% 60%; }
.dm-hero.is-playing .dm-banner__img { animation: dm-lux-settle 3.6s cubic-bezier(0.16, 1, 0.3, 1) both, dm-lux-drift 30s ease-in-out 3.6s infinite alternate; will-change: transform, filter; }
.dm-hero .dm-banner__shade {
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.35) 100%);
}
.dm-hero.is-playing .dm-banner__shade { animation: dm-lux-fade 2.4s ease-out both; }
.dm-hero .dm-banner__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; width: 100%; max-width: none; margin: 0; padding: 0 var(--gutter) 4vh; }
.dm-hero .dm-banner__title {
  max-width: 100%; font-size: clamp(56px, 15vw, 290px); line-height: 0.9; letter-spacing: 0.01em; text-wrap: balance;
  color: transparent;
  background: linear-gradient(100deg, #ececec 0%, #ececec 40%, #ffffff 47%, #ffffff 53%, #ececec 60%, #ececec 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
}
.dm-hero.is-playing .dm-banner__title { animation: dm-lux-reveal 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s backwards, dm-lux-sheen 2.8s ease-in-out 3.4s 1 both, dm-lux-sheen-loop 10s ease-in-out 6.2s infinite; }
.dm-hero .dm-banner__title--long { font-size: clamp(44px, min(9vw, 15vh), 200px); line-height: 0.92; max-width: 14ch; }
.dm-hero .dm-banner__sub { margin: clamp(10px, 2vh, 22px) 0 clamp(18px, 3vh, 30px); max-width: 40ch; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.6rem); }
.dm-hero.is-playing .dm-banner__sub { animation: dm-fade 0.9s ease-out 1.5s both; }
.dm-hero.is-playing .dm-banner__cta { animation: dm-fade 0.9s ease-out 1.65s both; }
.dm-banner__cta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
.dm-statement--center .dm-banner__cta { justify-content: center; }
.dm-tile .dm-banner__cta { justify-content: flex-start; }
@keyframes dm-lux-settle { from { transform: scale(1.14); filter: brightness(0.55) saturate(0.85); } to { transform: scale(1.04); filter: brightness(1) saturate(1); } }
@keyframes dm-lux-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.2%, -0.8%, 0); } }
@keyframes dm-lux-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-lux-reveal {
  from { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: translateY(4%) scale(1.03); }
  to { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 0% 0; mask-position: 0% 0; transform: none; }
}
@keyframes dm-lux-sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes dm-lux-sheen-loop { 0% { background-position: 100% 0; } 28% { background-position: 0% 0; } 100% { background-position: 0% 0; } }
@keyframes dm-fade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: scroll()) {
  .dm-hero .dm-banner__copy { animation: dm-copy linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  @keyframes dm-copy { to { opacity: 0; translate: 0 -8vh; } }
}

/* Hero slideshow */
.dm-slider { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); }
.dm-slider__track { position: absolute; inset: 0; }
.dm-slider .dm-banner { height: 100%; min-height: 0; }
.dm-slider:not(.is-ready) .dm-banner:not(:first-child) { display: none; }
.dm-slider.is-ready .dm-banner { position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 0; transition: opacity 1.1s ease, visibility 0s 1.1s; }
.dm-slider.is-ready .dm-banner.is-leaving { opacity: 1; visibility: visible; z-index: 1; transition: none; }
.dm-slider.is-ready .dm-banner.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity 1.1s ease, visibility 0s; }
.dm-slider__arrows { position: absolute; z-index: 5; right: var(--gutter); bottom: clamp(24px, 5vh, 56px); display: flex; gap: 10px; }
.dm-slider__dots { position: absolute; z-index: 5; left: 50%; bottom: clamp(30px, 5.5vh, 62px); transform: translateX(-50%); display: flex; gap: 10px; }
.dm-slider__dot { width: 36px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background 0.3s, width 0.3s var(--ease); }
.dm-slider__dot:hover { background: rgba(255, 255, 255, 0.7); }
.dm-slider__dot.is-active { background: #fff; width: 56px; }
@media (max-width: 720px) { .dm-slider__arrows { display: none; } .dm-slider__dots { bottom: 26px; } }
.dm-slider-editor .dm-banner { position: relative; opacity: 1; visibility: visible; margin-bottom: 12px; }

/* Tiles and wide strips */
.dm-tile { min-height: 74vh; border-radius: 6px; }
.dm-tile .dm-banner__img { transition: transform 1.4s var(--ease); }
.dm-tile:hover .dm-banner__img { transform: scale(1.06); }
.dm-tile .dm-banner__copy { padding: 0 clamp(18px, 3vw, 44px) clamp(18px, 2.4vw, 34px); }
.dm-tile .dm-banner__title { font-size: clamp(4.5rem, 14vw, 15rem); line-height: 0.8; margin-bottom: clamp(14px, 2vw, 28px); }
.dm-tile .dm-banner__sub { margin-bottom: 12px; font-size: 1.1rem; }
.dm-banner--wide { min-height: 62vh; }
.dm-banner__link { font-family: var(--display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 1.15rem; padding-bottom: 3px; border-bottom: 2px solid var(--accent); }
.dm-banner__link::after { content: ''; position: absolute; inset: 0; z-index: 3; } /* whole tile is clickable */

.dm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 0.8vw, 12px); padding: 0 clamp(6px, 0.8vw, 12px); }
.dm-tiles > .dm-banner--wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .dm-tiles { grid-template-columns: 1fr; } .dm-tile { min-height: 64vh; } }

/* ---------- Statement (Campaign banner, Statement style) ---------- */
.dm-banner--statement { min-height: 46vh; align-items: center; background: var(--ink); color: #f5f5f2; }
.dm-banner--statement .dm-banner__shade { background: rgba(0, 0, 0, var(--dm-overlay, 0.5)); }
.dm-banner--statement:not(.has-image) .dm-banner__shade { display: none; }
.dm-statement .dm-banner__copy { max-width: 1400px; margin: 0 auto; padding: clamp(56px, 9vw, 120px) var(--gutter); }
.dm-statement--center .dm-banner__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dm-statement .dm-banner__title { max-width: 16ch; font-size: clamp(2.6rem, 7.2vw, 7.5rem); line-height: 0.92; text-wrap: balance; }
.dm-statement .dm-banner__sub { margin-top: 18px; max-width: 46ch; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.4rem); }
.dm-statement .dm-banner__cta { margin-top: 28px; }

/* ---------- Product rail + cards ---------- */
.dm-rail { padding: clamp(56px, 9vw, 130px) 0; }
.dm-rail__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; padding: 0 var(--gutter); margin-bottom: 28px; }
.dm-rail__title { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.8rem, 8vw, 8rem); line-height: 0.88; flex: 1 1 100%; }
.dm-rail__sub { margin: 0; color: var(--muted); flex: 1; font-size: 1.1rem; }
.dm-rail__nav { display: flex; gap: 10px; margin-left: auto; }
.dm-rail__btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; padding: 0; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.72); color: #111; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); cursor: pointer; transition: background 0.25s, transform 0.25s var(--ease), opacity 0.25s; }
.dm-rail__btn:hover { background: #fff; transform: scale(1.06); }
.dm-rail__btn:disabled { opacity: 0.3; pointer-events: none; }
.dm-rail__track { scroll-padding-inline: var(--gutter); display: flex; gap: clamp(10px, 1.4vw, 22px); overflow-x: auto; padding: 0 var(--gutter) 10px; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
/* The rail scrolls sideways inside itself. Its absolutely positioned bits (the hidden price text for screen readers) were positioned against the whole page, so the scrolling did not clip them and the page became thousands of pixels wide on phones (the navbar drifted to the right). The track is their containing block now. */
.dm-rail__track { position: relative; }
.dm-rail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.dm-rail__track.is-dragging a { pointer-events: none; }
.dm-rail__track::-webkit-scrollbar { display: none; }
.dm-rail__track img { -webkit-user-drag: none; user-select: none; }

.dm-card { flex: 0 0 clamp(250px, 27vw, 440px); scroll-snap-align: start; }
.dm-card__media { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface); border-radius: 6px; }
.dm-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s var(--ease), transform 1.1s var(--ease); }
.dm-card__img--b { opacity: 0; }
.dm-card:hover .dm-card__img--b, .dm-card:focus-within .dm-card__img--b { opacity: 1; }
.dm-card.is-previewing:hover .dm-card__img--b, .dm-card.is-previewing:focus-within .dm-card__img--b { opacity: 0; }
.dm-card:hover .dm-card__img { transform: scale(1.04); }
.dm-card__flag { position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 0.8rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; z-index: 2; }
.dm-card__body { padding: 14px 2px 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: start; }
.dm-card__name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; }
.dm-card__price { margin: 0; font-weight: 600; white-space: nowrap; }
.dm-card__price del { color: var(--muted); font-weight: 400; margin-right: 6px; }
.dm-card__price ins { text-decoration: none; color: var(--accent); }
/* Narrow cards (phones, and small laptops where the filter column takes space: 3 columns of about 180px): let the name shrink, let the price wrap, and put the old price above the sale price (a nowrap price pushed the card out of the screen). */
@media (max-width: 1180px) {
  .dm-card__body { grid-template-columns: minmax(0, 1fr) auto; }
  .dm-card__name { overflow-wrap: anywhere; }
  .dm-card__price { white-space: normal; text-align: right; }
}
@media (max-width: 600px), (min-width: 961px) and (max-width: 1180px) {
  .dm-card__price del { display: block; margin: 0; }
}
/* Phones: the price goes under the name (side by side the name was squeezed into a column of about 70px). */
@media (max-width: 600px) {
  .dm-card__body { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dm-card__price { text-align: left; }
  .dm-card__price del { display: inline; margin-right: 6px; }
}
.dm-card__swatches { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
/* Colour chips are mini photos of the colour (first picture); the colour shows only until the photo loads. */
.dm-swatch { position: relative; width: 46px; height: 60px; border-radius: 8px; border: 2px solid transparent; background: var(--c); box-shadow: 0 0 0 1px var(--line); padding: 0; overflow: hidden; cursor: pointer; transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s; }
.dm-swatch__img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dm-swatch:hover { transform: translateY(-2px); }
/* Photo chips: the transparent border used to show the colour behind it as a coloured ring. Drop the background, ring only on the selected chip. */
.dm-swatch:has(.dm-swatch__img) { box-shadow: none; background: transparent; }
.dm-swatch.is-active { border-color: var(--paper); box-shadow: none; }
@media (max-width: 640px) { .dm-card__swatches { gap: 6px; } .dm-swatch { width: 38px; height: 50px; border-radius: 7px; } }

/* ---------- Footer ---------- */
.dm-footer { background: var(--surface); padding: clamp(56px, 8vw, 120px) var(--gutter) 28px; margin-top: clamp(48px, 8vw, 120px); }
.dm-footer__top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; padding-bottom: clamp(40px, 6vw, 90px); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.dm-footer__big { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(3.6rem, 15vw, 15rem); line-height: 0.8; }
.dm-news label { display: block; margin-bottom: 14px; font-size: 1.05rem; color: var(--muted); }
.dm-news__row { display: flex; gap: 10px; }
.dm-news input { flex: 1; min-width: 0; padding: 0 22px; height: 56px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: var(--paper); font: inherit; }
.dm-news input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 32px; padding: 48px 0; }
.dm-footer h3 { margin: 0 0 14px; font: 700 1.2rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.dm-footer__cols a { display: block; padding: 5px 0; color: rgba(245, 245, 242, 0.8); transition: color 0.2s, transform 0.3s var(--ease); }
.dm-footer__cols a:hover { color: #fff; transform: translateX(4px); }
.dm-footer__brand { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.dm-footer__brand img { width: 120px; height: auto; opacity: 0.95; }
.dm-footer__social { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; }
.dm-footer__social a { padding: 4px 0; font: 700 1.05rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245, 245, 242, 0.8); }
.dm-footer__social a:hover { color: var(--accent); }
.dm-footer__legal { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: var(--muted); font-size: 0.9rem; }
.dm-footer__legal a { margin-left: 18px; }
@media (max-width: 860px) { .dm-footer__top { grid-template-columns: minmax(0, 1fr); } .dm-footer__cols { grid-template-columns: 1fr 1fr; } .dm-footer__brand { align-items: flex-start; } .dm-footer__social { justify-content: flex-start; } }

/* ---------- Generic pages ---------- */
.dm-main--page { padding: 140px var(--gutter) 80px; }

/* ---------- Scroll reveal (only when JS runs) ---------- */
@media (scripting: enabled) {
  [data-dm-reveal] { opacity: 0; transform: translateY(48px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  [data-dm-reveal].is-in { opacity: 1; transform: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  .dm-hero__scroll { display: none; }
  .dm-hero .dm-banner__title { font-size: clamp(5rem, 27vw, 9rem); }
  .dm-hero .dm-banner__title--long { font-size: clamp(2.6rem, 13vw, 5rem); line-height: 0.95; max-width: 100%; overflow-wrap: anywhere; }
  .dm-hero .dm-banner__sub { max-width: 30ch; }
  .dm-card { flex-basis: 68vw; }
  .dm-rail__track { gap: 12px; padding-inline: 12px; scroll-padding-inline: 12px; }
  .dm-rail__nav { display: none; }
}

/* ---------- Block editor preview ---------- */
.editor-styles-wrapper .dm-hero { height: 70vh; min-height: 420px; }
.editor-styles-wrapper [data-dm-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-dm-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Landing page: a strip of the black page background between the hero and the statement banner */
.dm-main > .dm-slider + .dm-banner--statement, .dm-main > .dm-hero + .dm-banner--statement, .dm-main .dm-slider + .dm-banner--statement { margin-top: clamp(14px, 2vw, 32px) !important; }

/* ---- Content pages (about, FAQ, delivery, size guide, legal): editable in Pages ---------------------------- */
.dm-prose { max-width: 1400px; }
.dm-prose > .wp-block-post-content > * { max-width: 760px; }
.dm-prose > .wp-block-post-content > .alignwide, .dm-prose > .wp-block-post-content > .wp-block-table { max-width: 1100px; }
.dm-prose p, .dm-prose li { font-size: 1.1rem; line-height: 1.65; color: var(--text-soft); }
.dm-prose h2 { margin: 2.2em 0 0.5em; font: 800 clamp(2rem, 4vw, 3.2rem)/0.95 var(--display); text-transform: uppercase; color: var(--paper); }
.dm-prose h3 { margin: 1.8em 0 0.4em; font: 700 1.5rem/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--paper); }
.dm-prose a { color: var(--accent-text); text-underline-offset: 3px; }
.dm-prose .dm-lead, .dm-prose .dm-lead p { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.7rem); line-height: 1.4; color: var(--paper); }
.dm-prose .wp-block-table table { width: 100%; border-collapse: collapse; }
.dm-prose .wp-block-table th, .dm-prose .wp-block-table td { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 1rem; }
.dm-prose .wp-block-table th { font: 700 1.05rem var(--display); text-transform: uppercase; letter-spacing: 0.05em; }
.dm-prose .wp-block-table { overflow-x: auto; }
.dm-prose .wp-block-details { border-bottom: 1px solid var(--line); }
.dm-prose .wp-block-details summary { cursor: pointer; padding: 18px 0; font: 700 1.35rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--paper); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.dm-prose .wp-block-details summary::-webkit-details-marker { display: none; }
.dm-prose .wp-block-details summary::after { content: '+'; font-size: 1.6rem; line-height: 1; }
.dm-prose .wp-block-details[open] summary::after { content: '\2212'; }
.dm-prose .wp-block-details > :not(summary) { margin-top: 0; padding-bottom: 12px; }
.dm-prose .wp-block-buttons .wp-block-button__link, .dm-404 .wp-block-button__link { background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0.8em 1.8em; font: 800 1.1rem var(--display); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; }
.dm-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 1100px !important; margin-block: 2em; }
.dm-steps > .wp-block-group { border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.dm-steps h3 { margin-top: 0; }
.dm-steps p { margin-bottom: 0; }

/* ---- 404 ------------------------------------------------------------------------------------------------- */
.dm-404 { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.dm-404__code { margin: 0; font: 800 clamp(8rem, 28vw, 24rem)/0.8 var(--display); color: var(--accent-text); }
.dm-404 .dm-page-title { margin-top: 0.1em; }
.dm-404 p:not(.dm-404__code) { max-width: 52ch; font-size: 1.2rem; color: var(--text-soft); }

/* ---- Page titles (moved from shop.css: used by every page) ---- */
.dm-page-title { margin: 0 0 clamp(20px, 3vw, 40px); font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(3.5rem, 9vw, 9rem); line-height: 0.85; }
.dm-main--page { max-width: 1400px; margin-inline: auto !important; }
.dm-page-title { padding-bottom: clamp(20px, 3vw, 44px); }


/* Landing page: the dropdown follows the dark bar */

/* Card badges: discount in percent (green) or a label from a product tag (dark) */
.dm-card__flag--label { background: #101010; color: #f5f5f2; }

/* ---------- One card per colour (Settings > Dominer > Each colour as its own card) ---------- */
.dm-card__colour { grid-column: 1 / -1; margin: 2px 0 0; font: 600 0.82rem/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
a.dm-swatch--link { display: block; text-decoration: none; }
.dm-card--colour .dm-swatch--link:not(.is-active) { opacity: 0.85; }
.dm-card--colour .dm-swatch--link:hover { opacity: 1; }

/* ---------- News (blog posts of the old site) ---------- */
.dm-news .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(24px, 3vw, 40px); }
.dm-news .wp-block-post { padding-top: 22px; border-top: 1px solid var(--line); }
.dm-news .wp-block-post-title { margin: 6px 0 10px; font: 800 clamp(1.7rem, 3vw, 2.6rem)/1 var(--display); text-transform: uppercase; }
.dm-news .wp-block-post-title a:hover { color: var(--accent); }
.dm-post-date, .dm-news .wp-block-post-date { margin: 0; color: var(--muted); font: 600 1rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.dm-news .wp-block-post-excerpt { margin: 0; max-width: 70ch; }
.dm-news .wp-block-query-pagination { margin-top: 32px; gap: 16px; font: 700 1.1rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; }

/* forms: newsletter consent, contact form, job applications */
.dm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dm-check { display: flex !important; gap: 10px; align-items: flex-start; margin: 12px 0 0 !important; font: 400 0.95rem/1.4 var(--body, inherit) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted); }
.dm-check input[type="checkbox"], .dm-news .dm-check input { flex: none; width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 2px 0 0; border-radius: 3px; accent-color: var(--accent); }
.dm-check a { color: inherit; text-decoration: underline; }
.dm-form__msg { min-height: 1.4em; margin: 10px 0 0; font-weight: 600; }
.dm-form__msg.is-ok { color: var(--accent-text); }
.dm-form__msg.is-error { color: #ff6b5e; }
.dm-form { max-width: 760px; margin: 24px 0; }
.dm-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.dm-form label { display: block; margin: 0 0 6px; font: 700 0.95rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.dm-form input[type="text"], .dm-form input[type="email"], .dm-form input[type="tel"], .dm-form input[type="file"], .dm-form textarea { box-sizing: border-box; width: 100%; min-height: var(--field-h); padding: var(--field-pad); border-radius: var(--field-radius); border: var(--field-border); background: transparent; color: var(--paper); font: 400 1rem/1.3 var(--body); }
.dm-form textarea { padding-block: 14px; min-height: 130px; resize: vertical; }
.dm-form input[type="file"] { padding: 10px; }
.dm-form input:focus, .dm-form textarea:focus { outline: 0; border-color: var(--paper); box-shadow: var(--field-focus); }
.dm-jobs { display: grid; gap: 30px; }
.dm-job { border-top: 1px solid var(--line); padding-top: 22px; }
.dm-job__title { margin: 0 0 6px; font: 800 clamp(1.6rem, 3vw, 2.4rem)/1 var(--display); text-transform: uppercase; }
.dm-job__meta { margin: 0 0 14px; color: var(--muted); font: 600 1rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.dm-job__apply > summary { display: inline-block; cursor: pointer; list-style: none; }
.dm-job__apply > summary::-webkit-details-marker { display: none; }
.dm-job__apply[open] > summary { margin-bottom: 18px; }
@media (max-width: 640px) { .dm-form__grid { grid-template-columns: 1fr; } }