/* ==========================================================================
DANMOINDIA theme
========================================================================== */
:root {
--ink: #0d0d0d;
--ink-2: #2a2a2a;
--paper: #ffffff;
--white: #fff;
--sand: #d0d2cc;
--sale: #e2323a;
--tan: #939d83;
--line: rgba(13, 13, 13, .12);
--muted: #6b6862;
--f-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--gutter: clamp(16px, 2.9vw, 56px);
--topbar-h: 44px;
--header-h: 84px;
--ease: cubic-bezier(.2, .7, .1, 1);
}
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--f-sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px; overflow: hidden;
clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.dm-skip {
position: absolute; left: 12px; top: -60px; z-index: 100;
background: var(--ink); color: var(--white); padding: 10px 16px;
font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.dm-skip:focus { top: 12px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.dm-icon { width: 24px; height: 24px; flex: none; }
.dm-container { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
/* --------------------------------------------------------------------------
Announcement bar
-------------------------------------------------------------------------- */
.dm-topbar {
position: relative;
height: var(--topbar-h);
background: var(--ink);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
padding: 0 96px;
z-index: 60;
}
.dm-topbar__track {
display: flex;
align-items: center;
justify-content: center;
}
.dm-topbar__item {
margin: 0;
display: flex;
align-items: center;
gap: 14px;
padding: 0 clamp(24px, 2.6vw, 50px);
font-family: var(--f-mono);
font-size: 13.5px;
font-weight: 400;
letter-spacing: .09em;
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
}
.dm-topbar__item + .dm-topbar__item { border-left: 1px solid rgba(255, 255, 255, .55); }
.dm-topbar__item .dm-icon { width: 22px; height: 22px; stroke-width: 1.4; }
.dm-topbar__ctrl {
position: absolute;
right: calc(var(--gutter) - 8px);
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
}
.dm-topbar__ctrl button {
width: 34px; height: 30px;
display: grid; place-items: center;
opacity: .75;
transition: opacity .2s;
}
.dm-topbar__ctrl button:hover { opacity: 1; }
.dm-topbar__ctrl button + button { border-left: 1px solid rgba(255, 255, 255, .25); }
.dm-topbar__ctrl .dm-icon { width: 16px; height: 16px; }
/* Desktop wide: all messages visible, arrows scroll nothing, so hide them. */
@media (min-width: 1361px) {
.dm-topbar__ctrl { display: none; }
}
/* Narrower: one message at a time. */
@media (max-width: 1360px) {
.dm-topbar { padding: 0 72px; }
.dm-topbar__track { position: relative; width: 100%; height: 100%; }
.dm-topbar__item {
position: absolute; inset: 0;
justify-content: center;
padding: 0;
border: 0 !important;
opacity: 0;
transform: translateY(8px);
transition: opacity .45s var(--ease), transform .45s var(--ease);
pointer-events: none;
}
.dm-topbar__item.is-active { opacity: 1; transform: none; pointer-events: auto; }
}
@media (max-width: 560px) {
:root { --topbar-h: 38px; }
.dm-topbar { padding: 0 12px; }
.dm-topbar__item { font-size: 11px; gap: 9px; letter-spacing: .06em; }
.dm-topbar__item .dm-icon { width: 17px; height: 17px; }
.dm-topbar__ctrl { display: none; }
}
/* --------------------------------------------------------------------------
Header
-------------------------------------------------------------------------- */
.dm-header {
position: sticky;
top: 0;
z-index: 50;
height: var(--header-h);
background: var(--paper);
color: var(--ink);
border-bottom: 1px solid var(--line);
transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.admin-bar .dm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .dm-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .dm-header { top: 0; } }
.dm-header__inner {
height: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding: 0 var(--gutter);
}
.dm-header .dm-header__burger { display: none; }
/* Logo */
.dm-logo {
display: inline-flex;
align-items: flex-start;
font-family: var(--f-sans);
font-weight: 800;
font-stretch: 125%;
font-size: 34px;
line-height: 1;
letter-spacing: .005em;
text-transform: uppercase;
white-space: nowrap;
}
.dm-logo sup {
font-size: 13px;
font-weight: 700;
font-stretch: 100%;
margin: -4px 0 0 2px;
line-height: 1;
}
.custom-logo-link img { max-height: 44px; width: auto; }
/* Nav */
.dm-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: clamp(22px, 2.6vw, 64px);
}
.dm-nav a {
position: relative;
display: block;
padding: 8px 0;
font-family: var(--f-mono);
font-weight: 500;
font-size: 16px;
letter-spacing: .05em;
text-transform: uppercase;
white-space: nowrap;
}
.dm-nav a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 2px;
height: 1.5px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform .35s var(--ease);
}
.dm-nav a:hover::after,
.dm-nav .current-menu-item > a::after,
.dm-nav .current-product_cat-ancestor > a::after { transform: scaleX(1); transform-origin: left; }
.dm-nav .is-sale > a { color: var(--sale); }
/* Actions */
.dm-header__actions {
justify-self: end;
display: flex;
align-items: center;
gap: clamp(10px, 1.6vw, 34px);
}
.dm-iconbtn {
position: relative;
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 50%;
transition: opacity .2s;
}
.dm-iconbtn:hover { opacity: .65; }
.dm-iconbtn .dm-icon { width: 30px; height: 30px; stroke-width: 1.35; }
.dm-cart-count {
position: absolute;
top: -2px; right: -6px;
min-width: 24px; height: 24px;
padding: 0 6px;
border-radius: 12px;
background: var(--ink);
color: var(--white);
border: 2px solid var(--paper);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 700;
line-height: 20px;
text-align: center;
transition: transform .3s var(--ease), background-color .35s, color .35s, border-color .35s;
}
.dm-cart-count.is-bump { animation: dm-bump .5s var(--ease); }
@keyframes dm-bump { 40% { transform: scale(1.3); } }
/* Search: a pill on solid headers, an icon over the hero */
.dm-search {
position: relative;
display: flex;
align-items: center;
width: clamp(190px, 14vw, 344px);
height: 54px;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(255, 255, 255, .55);
transition: width .45s var(--ease), background-color .35s, border-color .35s;
margin-right: clamp(0px, 1.2vw, 24px);
}
.dm-search:focus-within { border-color: var(--ink); background: var(--white); }
.dm-search__toggle {
position: absolute; left: 0; top: 0;
width: 54px; height: 100%;
display: grid; place-items: center;
cursor: default;
}
.dm-search__toggle .dm-icon { width: 24px; height: 24px; stroke-width: 1.6; }
.dm-search__input {
width: 100%;
height: 100%;
padding: 0 16px 0 54px;
border: 0;
background: transparent;
outline: 0;
font-size: 17px;
-webkit-appearance: none;
appearance: none;
}
.dm-search__input::placeholder { color: var(--muted); opacity: 1; }
.dm-search__input::-webkit-search-cancel-button { display: none; }
/* ---- Overlay mode: home page, before scrolling ---- */
.has-overlay-header .dm-header:not(.is-solid) {
background: transparent;
color: var(--white);
border-bottom-color: transparent;
}
.has-overlay-header .dm-header:not(.is-solid) .dm-cart-count {
background: var(--white);
color: var(--ink);
border-color: transparent;
}
.has-overlay-header .dm-header:not(.is-solid) .dm-nav .is-sale > a { color: var(--white); }
.has-overlay-header .dm-header:not(.is-solid) .dm-search:not(.is-open) {
width: 44px;
height: 44px;
border-color: transparent;
background: transparent;
margin-right: 0;
}
.has-overlay-header .dm-header:not(.is-solid) .dm-search:not(.is-open) .dm-search__toggle { width: 44px; cursor: pointer; }
.has-overlay-header .dm-header:not(.is-solid) .dm-search:not(.is-open) .dm-search__toggle .dm-icon { width: 28px; height: 28px; stroke-width: 1.4; }
.has-overlay-header .dm-header:not(.is-solid) .dm-search:not(.is-open) .dm-search__input { opacity: 0; pointer-events: none; }
.has-overlay-header .dm-header:not(.is-solid) .dm-search.is-open {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .45);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.has-overlay-header .dm-header:not(.is-solid) .dm-search__input::placeholder { color: rgba(255, 255, 255, .75); }
.dm-header.is-solid { box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(0, 0, 0, .25); }
/* Pull the hero up under the transparent header */
.has-overlay-header .dm-main > .dm-hero:first-child { margin-top: calc(-1 * var(--header-h)); }
/* Header: responsive */
@media (max-width: 1500px) {
.dm-nav a { font-size: 14.5px; }
.dm-logo { font-size: 28px; }
.dm-header__actions { gap: 8px; }
.dm-search { margin-right: 8px; }
}
@media (max-width: 1280px) {
.dm-nav a { font-size: 13.5px; letter-spacing: .03em; }
.dm-logo { font-size: 24px; }
.dm-logo sup { font-size: 10px; }
.dm-search { width: 170px; }
.dm-search__input { font-size: 15px; }
}
@media (max-width: 1080px) {
:root { --header-h: 68px; }
.dm-header__inner { grid-template-columns: 1fr auto 1fr; gap: 8px; }
.dm-header .dm-header__burger { display: grid; justify-self: start; margin-left: -10px; }
.dm-nav { display: none; }
.dm-hide-sm { display: none; }
.dm-logo { font-size: 24px; }
.dm-logo sup { font-size: 10px; }
.dm-header__actions { gap: 4px; margin-right: -6px; }
.dm-iconbtn .dm-icon { width: 26px; height: 26px; }
.dm-cart-count { min-width: 20px; height: 20px; line-height: 16px; font-size: 11px; top: 0; right: -2px; }
.dm-search,
.has-overlay-header .dm-header .dm-search {
width: 44px; height: 44px; border-color: transparent !important; background: transparent !important; margin: 0;
}
.dm-search .dm-search__toggle { width: 44px; cursor: pointer; }
.dm-search .dm-search__input { opacity: 0; pointer-events: none; }
.dm-search.is-open { position: static; }
.dm-search.is-open .dm-search__input {
position: absolute;
left: var(--gutter); right: var(--gutter);
top: calc(100% + 8px);
width: auto;
height: 52px;
padding-left: 18px;
opacity: 1;
pointer-events: auto;
background: var(--white);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .35);
}
.dm-search.is-open .dm-search__input::placeholder { color: var(--muted) !important; }
.dm-header__inner { position: relative; }
.dm-header__actions { position: static; }
}
@media (max-width: 420px) {
.dm-logo { font-size: 20px; }
}
/* --------------------------------------------------------------------------
Mobile drawer
-------------------------------------------------------------------------- */
.dm-drawer { position: fixed; inset: 0; z-index: 90; }
.dm-drawer[hidden] { display: none; }
.dm-drawer__backdrop {
position: absolute; inset: 0;
background: rgba(13, 13, 13, .45);
opacity: 0;
transition: opacity .35s var(--ease);
}
.dm-drawer__panel {
position: absolute;
top: 0; bottom: 0; left: 0;
width: min(88vw, 400px);
background: var(--paper);
display: flex;
flex-direction: column;
padding: 18px var(--gutter) 28px;
transform: translateX(-100%);
transition: transform .45s var(--ease);
overflow-y: auto;
}
.dm-drawer.is-open .dm-drawer__backdrop { opacity: 1; }
.dm-drawer.is-open .dm-drawer__panel { transform: none; }
.dm-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dm-drawer__head .dm-logo { font-size: 22px; }
.dm-drawer__search {
display: flex; align-items: center; gap: 10px;
height: 52px; padding: 0 16px;
border: 1px solid var(--line); border-radius: 14px; background: var(--white);
margin-bottom: 18px;
}
.dm-drawer__search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; min-width: 0; }
.dm-drawer__nav .dm-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.dm-drawer__nav a {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 0;
border-bottom: 1px solid var(--line);
font-family: var(--f-sans);
font-weight: 800;
font-size: 26px;
letter-spacing: -.01em;
text-transform: uppercase;
}
.dm-drawer__nav .is-sale > a { color: var(--sale); }
.dm-drawer__foot { margin-top: auto; padding-top: 24px; display: grid; gap: 14px; }
.dm-drawer__foot a {
display: flex; align-items: center; gap: 12px;
font-family: var(--f-mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
}
.dm-drawer__foot .dm-icon { width: 22px; height: 22px; }
body.dm-lock { overflow: hidden; }
/* --------------------------------------------------------------------------
Hero
-------------------------------------------------------------------------- */
.dm-hero {
--hero-h: clamp(620px, calc(100svh - var(--topbar-h)), 940px);
position: relative;
min-height: var(--hero-h);
display: flex;
flex-direction: column;
justify-content: center;
color: var(--white);
background: #1c1c1c;
overflow: hidden;
isolation: isolate;
}
.dm-hero__media { position: absolute; inset: 0; z-index: -1; }
.dm-hero__img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 68% 30%;
transform: scale(1.06);
animation: dm-settle 2.2s var(--ease) .05s forwards;
}
@keyframes dm-settle { to { transform: scale(1); } }
/* Legibility: dark on the left and at the top (for the header) */
.dm-hero__media::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, 0) 22%),
linear-gradient(90deg, rgba(0, 0, 0, .58) 0, rgba(0, 0, 0, .34) 34%, rgba(0, 0, 0, 0) 62%),
linear-gradient(0deg, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 26%);
}
/* No photo yet: soft studio gradient, like a backdrop */
.dm-hero.is-empty .dm-hero__media {
background:
radial-gradient(90% 80% at 78% 40%, #474544 0, #2d2c2b 45%, #1d1c1c 100%);
}
.dm-hero.is-empty .dm-hero__media::after {
background:
radial-gradient(40% 35% at 72% 42%, rgba(208, 210, 204, .08), transparent 70%),
url("data:image/svg+xml;utf8,");
}
.dm-hero__content {
position: relative;
padding: calc(var(--header-h) + 40px) var(--gutter) 150px;
padding-left: calc(var(--gutter) + 12px);
max-width: 1000px;
}
.dm-hero__eyebrow {
margin: 0 0 18px;
font-family: var(--f-mono);
font-size: clamp(12px, 1vw, 16px);
font-weight: 400;
letter-spacing: .24em;
text-transform: uppercase;
opacity: .92;
}
.dm-hero__title {
margin: 0;
font-family: var(--f-sans);
font-weight: 900;
font-stretch: 100%;
font-size: clamp(54px, 7.6vw, 148px);
line-height: .86;
letter-spacing: -.012em;
word-spacing: .06em;
text-transform: uppercase;
}
.dm-hero__line { display: block; }
@media (min-width: 901px) and (max-width: 1280px) {
.dm-hero__img { object-position: 92% 30%; }
}
@media (min-width: 901px) {
.dm-hero__content { max-width: none; }
.dm-hero__line { white-space: nowrap; }
}
.dm-hero__line--accent { color: var(--sand); margin-top: .1em; }
.dm-hero__text {
margin: clamp(18px, 1.8vw, 30px) 0 0;
max-width: 460px;
font-size: clamp(17px, 1.45vw, 27px);
font-weight: 400;
line-height: 1.24;
letter-spacing: .005em;
color: rgba(255, 255, 255, .95);
}
.dm-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: clamp(14px, 1.8vw, 34px);
margin-top: clamp(28px, 2.6vw, 46px);
}
.dm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: clamp(200px, 13.5vw, 262px);
height: clamp(54px, 3.4vw, 66px);
padding: 0 28px;
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(14px, .95vw, 17px);
letter-spacing: .13em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: 2px;
transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.dm-btn .dm-icon { width: 18px; height: 18px; stroke-width: 2; transition: transform .35s var(--ease); }
.dm-btn:hover .dm-icon { transform: translateX(4px); }
.dm-btn--solid { background: var(--white); color: var(--ink); }
.dm-btn--solid:hover { background: var(--sand); }
.dm-btn--ghost { border-color: rgba(255, 255, 255, .8); color: var(--white); }
.dm-btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.dm-hero__feats {
position: absolute;
left: calc(var(--gutter) + 12px);
bottom: clamp(28px, 4vw, 64px);
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
border-right: 1px solid rgba(255, 255, 255, .7);
}
.dm-hero__feats li {
padding: 2px clamp(16px, 1.7vw, 30px);
border-left: 1px solid rgba(255, 255, 255, .7);
font-family: var(--f-mono);
font-size: clamp(10.5px, .72vw, 13px);
letter-spacing: .2em;
text-transform: uppercase;
line-height: 1.6;
white-space: nowrap;
}
/* Hero: tablet & mobile. Content sits low, image shows the people up top. */
@media (max-width: 900px) {
.dm-hero {
--hero-h: calc(100svh - var(--topbar-h));
min-height: max(var(--hero-h), 640px);
justify-content: flex-end;
}
.dm-hero__img { object-position: 84% 30%; }
.dm-hero__media::after {
background:
linear-gradient(180deg, rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, 0) 20%),
linear-gradient(0deg, rgba(0, 0, 0, .82) 0, rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, 0) 72%);
}
.dm-hero__content { padding: 0 var(--gutter) 108px; }
.dm-hero__feats { left: var(--gutter); right: var(--gutter); bottom: 28px; }
}
@media (max-width: 560px) {
.dm-hero__title { font-size: clamp(46px, 14.2vw, 72px); }
.dm-hero__ctas { gap: 12px; }
.dm-btn { min-width: 0; flex: 1 1 0; padding: 0 12px; font-size: 13px; letter-spacing: .1em; gap: 8px; }
.dm-hero__feats { border-right: 0; flex-wrap: nowrap; justify-content: space-between; }
.dm-hero__feats li { padding: 0 0 0 9px; font-size: 9px; letter-spacing: .1em; }
.dm-hero__feats li:first-child { border-left: 0; padding-left: 0; }
}
/* Entrance */
.dm-rise {
opacity: 0;
transform: translateY(26px);
animation: dm-rise .9s var(--ease) forwards;
animation-delay: calc(.12s + var(--d, 0) * .09s);
}
@keyframes dm-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
.dm-rise { opacity: 1; transform: none; }
.dm-hero__img { transform: none; }
}
/* --------------------------------------------------------------------------
Generic pages + temporary footer
-------------------------------------------------------------------------- */
.dm-page { padding-top: 56px; padding-bottom: 96px; }
.dm-page__title { font-weight: 900; font-size: clamp(32px, 4vw, 56px); line-height: 1; text-transform: uppercase; margin: 0 0 24px; }
/* --------------------------------------------------------------------------
Sections (shared)
-------------------------------------------------------------------------- */
.dm-section { padding: clamp(64px, 7vw, 120px) 0; }
.dm-section__head {
text-align: center;
max-width: 1280px;
margin: 0 auto clamp(36px, 3.6vw, 56px);
padding: 0 var(--gutter);
}
.dm-eyebrow {
margin: 0 0 14px;
font-family: var(--f-mono);
font-size: clamp(13px, 1vw, 17px);
letter-spacing: .26em;
text-transform: uppercase;
}
.dm-section__title {
margin: 0;
font-weight: 900;
font-size: clamp(42px, 5.6vw, 96px);
line-height: .9;
letter-spacing: -.01em;
word-spacing: .06em;
text-transform: uppercase;
}
.dm-section__text {
margin: clamp(14px, 1.4vw, 22px) 0 0;
font-size: clamp(16px, 1.3vw, 21px);
letter-spacing: .045em;
color: var(--ink-2);
}
.dm-section__foot { display: flex; justify-content: center; margin-top: clamp(36px, 3.6vw, 56px); padding: 0 var(--gutter); }
.dm-btn--outline { border-color: var(--ink); color: var(--ink); min-width: clamp(260px, 22vw, 340px); }
.dm-btn--outline:hover { background: var(--ink); color: var(--white); }
/* --------------------------------------------------------------------------
Carousel
-------------------------------------------------------------------------- */
.dm-carousel { position: relative; }
.dm-carousel__track {
--cols: 4;
--gap: clamp(14px, 1.3vw, 22px);
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
gap: var(--gap);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-inline: var(--gutter);
padding: 4px var(--gutter) 24px;
scrollbar-width: none;
}
.dm-carousel__track::-webkit-scrollbar { display: none; }
.dm-carousel__track > * { scroll-snap-align: start; }
.dm-carousel__track:focus-visible { outline-offset: -2px; }
@media (max-width: 1100px) { .dm-carousel__track { --cols: 2.4; } }
@media (max-width: 640px) { .dm-carousel__track { --cols: 1.25; } }
.dm-carousel__nav {
position: absolute;
z-index: 3;
top: var(--nav-top, 40%);
width: 58px; height: 58px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--white);
color: var(--ink);
box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .35);
transform: translateY(-50%);
transition: opacity .25s, background-color .25s, color .25s;
}
.dm-carousel__nav:hover { background: var(--ink); color: var(--white); }
.dm-carousel__nav .dm-icon { width: 24px; height: 24px; stroke-width: 1.8; }
.dm-carousel__nav--prev { left: calc(var(--gutter) - 29px); }
.dm-carousel__nav--next { right: calc(var(--gutter) - 29px); }
.dm-carousel__nav[disabled] { opacity: 0; pointer-events: none; }
.dm-carousel.is-static .dm-carousel__nav { display: none; }
@media (max-width: 1100px) {
.dm-carousel__nav--prev { left: 8px; }
.dm-carousel__nav--next { right: 8px; }
}
@media (max-width: 640px) { .dm-carousel__nav { display: none; } }
/* --------------------------------------------------------------------------
Product card
-------------------------------------------------------------------------- */
.dm-card {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--white);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 32px -22px rgba(0, 0, 0, .22);
}
.dm-card__media {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: #d3d5cf;
}
.dm-card__media > a { display: block; height: 100%; }
.dm-card__img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 20%;
transition: transform 1.1s var(--ease);
}
.dm-card:hover .dm-card__img { transform: scale(1.045); }
.dm-badge {
position: absolute;
top: clamp(10px, 1vw, 16px);
left: clamp(10px, 1vw, 16px);
padding: 7px 12px 6px;
border-radius: 2px;
font-family: var(--f-mono);
font-size: 12.5px;
font-weight: 500;
letter-spacing: .08em;
line-height: 1.2;
text-transform: uppercase;
background: var(--ink);
color: var(--white);
pointer-events: none;
}
.dm-badge--bestseller { background: var(--sand); color: var(--ink); }
.dm-badge--trending { background: #414a35; color: #eef0e6; }
.dm-badge--limited { background: #a2ac92; color: #fff; }
.dm-card__wish {
position: absolute;
top: clamp(6px, .7vw, 10px);
right: clamp(6px, .7vw, 10px);
width: 46px; height: 46px;
display: grid; place-items: center;
color: var(--white);
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
transition: transform .25s var(--ease);
}
.dm-card__wish .dm-icon { width: 28px; height: 28px; stroke-width: 1.5; transition: fill .2s; }
.dm-card__wish:hover { transform: scale(1.08); }
.dm-card__wish[aria-pressed="true"] .dm-icon { fill: var(--white); }
.dm-card__wish.is-pop { animation: dm-bump .45s var(--ease); }
.dm-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: clamp(16px, 1.3vw, 22px) clamp(14px, 1.2vw, 20px) clamp(14px, 1.2vw, 18px);
}
.dm-card__title {
margin: 0;
font-size: clamp(16px, 1.15vw, 18.5px);
font-weight: 500;
line-height: 1.3;
letter-spacing: .005em;
}
.dm-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dm-card__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
.dm-card__price { font-size: clamp(16px, 1.2vw, 19px); font-weight: 700; white-space: nowrap; }
.dm-card__price del { font-weight: 400; color: var(--muted); margin-right: 6px; font-size: .85em; }
.dm-card__price ins { text-decoration: none; }
.dm-swatches { display: flex; align-items: center; gap: 7px; }
.dm-swatch {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--sw);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
transition: box-shadow .2s, transform .2s var(--ease);
}
.dm-swatch:hover { transform: scale(1.12); }
.dm-swatch.is-active { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px var(--white), 0 0 0 3.5px var(--ink); }
.dm-swatches__more { font-size: 14px; color: var(--ink-2); margin-left: 2px; }
.dm-swatches__more:hover { text-decoration: underline; }
.dm-card__buy { position: relative; margin-top: clamp(16px, 1.4vw, 24px); }
.dm-atc {
position: relative;
width: 100%;
height: clamp(48px, 3.5vw, 54px);
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--ink);
border-radius: 2px;
background: transparent;
color: var(--ink);
font-family: var(--f-sans);
font-weight: 500;
font-size: clamp(13px, .95vw, 15.5px);
letter-spacing: .12em;
text-transform: uppercase;
transition: background-color .25s var(--ease), color .25s var(--ease);
}
.dm-atc .dm-icon { position: absolute; right: 18px; width: 24px; height: 24px; stroke-width: 1.5; }
.dm-card:hover .dm-atc,
.dm-atc:focus-visible,
.dm-atc.is-done { background: var(--ink); color: var(--white); }
.dm-atc.is-busy { opacity: .7; pointer-events: none; }
.dm-atc.is-disabled { border-color: var(--line); color: var(--muted); background: transparent !important; }
/* Size picker takes the button's place */
.dm-sizes {
position: absolute;
inset: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 0 4px 0 12px;
background: var(--white);
border: 1px solid var(--ink);
border-radius: 2px;
animation: dm-fade .25s var(--ease);
}
.dm-sizes[hidden] { display: none; }
@keyframes dm-fade { from { opacity: 0; transform: translateY(4px); } }
.dm-sizes__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dm-sizes__list { display: flex; flex: 1; justify-content: center; gap: 2px; }
.dm-size {
min-width: 34px; height: 34px;
padding: 0 4px;
border-radius: 2px;
font-family: var(--f-mono);
font-size: 13px;
font-weight: 500;
transition: background-color .2s, color .2s;
}
.dm-size:hover { background: var(--ink); color: var(--white); }
.dm-size:disabled { opacity: .3; text-decoration: line-through; pointer-events: none; }
.dm-sizes__close { width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); }
.dm-sizes__close .dm-icon { width: 18px; height: 18px; }
.dm-card__msg { margin: 8px 0 0; font-size: 13px; color: var(--sale); }
/* Two sections in a row don't need double padding */
.dm-section + .dm-section { padding-top: clamp(16px, 2vw, 40px); }
/* --------------------------------------------------------------------------
Shop by category
-------------------------------------------------------------------------- */
.dm-cats__grid {
display: grid;
grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
gap: clamp(8px, .8vw, 14px);
padding: 0 clamp(12px, 1.1vw, 20px);
}
.dm-cat {
position: relative;
display: block;
aspect-ratio: 10 / 11;
overflow: hidden;
background: #2a2826;
color: var(--white);
isolation: isolate;
}
.dm-cat__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 30%;
z-index: -2;
transition: transform 1.2s var(--ease);
}
.dm-cat::after {
content: "";
position: absolute; inset: 0;
z-index: -1;
background: linear-gradient(0deg, rgba(0, 0, 0, .72) 0, rgba(0, 0, 0, .38) 30%, rgba(0, 0, 0, 0) 58%);
transition: opacity .5s var(--ease);
}
.dm-cat:hover .dm-cat__img { transform: scale(1.05); }
.dm-cat__body {
position: absolute;
left: clamp(20px, 2.4vw, 44px);
right: clamp(20px, 2.4vw, 44px);
bottom: clamp(20px, 2.2vw, 40px);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.dm-cat__title {
font-weight: 900;
font-size: clamp(40px, 4.1vw, 76px);
line-height: .9;
letter-spacing: -.01em;
text-transform: uppercase;
}
.dm-cat__text {
margin-top: clamp(10px, 1vw, 18px);
max-width: 24ch;
font-size: clamp(15px, 1.1vw, 19px);
line-height: 1.35;
letter-spacing: .02em;
color: rgba(255, 255, 255, .92);
}
.dm-cat__cta {
display: inline-flex;
align-items: center;
gap: clamp(16px, 1.7vw, 30px);
margin-top: clamp(16px, 1.5vw, 26px);
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(13px, .95vw, 16px);
letter-spacing: .12em;
text-transform: uppercase;
}
.dm-cat__arrow {
width: 42px; height: 42px;
display: grid; place-items: center;
border: 1.5px solid currentColor;
border-radius: 50%;
transition: background-color .3s var(--ease), color .3s var(--ease);
}
.dm-cat__arrow .dm-icon { width: 18px; height: 18px; stroke-width: 2; transition: transform .35s var(--ease); }
.dm-cat:hover .dm-cat__arrow { background: var(--white); color: var(--ink); }
.dm-cat:hover .dm-cat__arrow .dm-icon { transform: translateX(2px); }
@media (max-width: 900px) {
.dm-cats__grid { grid-template-columns: 1fr; padding: 0 var(--gutter); gap: 12px; }
.dm-cat { aspect-ratio: 5 / 4; }
.dm-cat__img { object-position: 50% 25%; }
}
@media (max-width: 560px) {
.dm-cat { aspect-ratio: 4 / 4.4; }
}
/* --------------------------------------------------------------------------
Our story
-------------------------------------------------------------------------- */
.dm-story {
display: grid;
grid-template-columns: 59.4fr 40.6fr;
min-height: clamp(460px, 36vw, 680px);
margin-top: clamp(64px, 7vw, 120px);
background: #121212;
color: var(--white);
}
.dm-story__media { position: relative; overflow: hidden; background: #c2ccb2; }
.dm-story__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 22%;
}
.dm-story__panel {
position: relative;
display: flex;
align-items: center;
padding: clamp(40px, 5vw, 96px) clamp(24px, 4.2vw, 88px);
background:
radial-gradient(120% 90% at 100% 0, rgba(255, 255, 255, .05), transparent 60%),
#121212;
}
.dm-story__panel::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
opacity: .5;
background: url("data:image/svg+xml;utf8,");
}
.dm-story__inner { position: relative; max-width: 620px; }
.dm-story .dm-eyebrow { opacity: .9; margin-bottom: clamp(14px, 1.4vw, 24px); }
.dm-story__title {
margin: 0;
font-weight: 900;
font-stretch: 86%;
font-size: clamp(40px, 3.9vw, 80px);
line-height: .92;
letter-spacing: -.01em;
word-spacing: .05em;
text-transform: uppercase;
}
.dm-story__title span { display: block; }
@media (min-width: 901px) { .dm-story__title span { white-space: nowrap; } }
.dm-story__title .is-accent { color: var(--sand); }
.dm-story__text {
margin: clamp(20px, 2vw, 34px) 0 0;
font-size: clamp(15px, 1.12vw, 19px);
line-height: 1.5;
letter-spacing: .01em;
color: rgba(255, 255, 255, .88);
}
.dm-story__btn { margin-top: clamp(26px, 2.4vw, 40px); min-width: clamp(240px, 16vw, 292px); }
@media (max-width: 900px) {
.dm-story { grid-template-columns: 1fr; }
.dm-story__media { aspect-ratio: 5 / 4; }
.dm-story__img { object-position: 50% 0; }
.dm-story__panel { padding: 48px var(--gutter) 56px; }
}
/* --------------------------------------------------------------------------
Brand promises strip
-------------------------------------------------------------------------- */
.dm-promises { background: var(--paper); padding: clamp(40px, 3.6vw, 64px) var(--gutter); }
.dm-promises__list {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 1640px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dm-promise {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 6px clamp(12px, 2vw, 32px);
}
.dm-promise + .dm-promise { border-left: 1px solid rgba(13, 13, 13, .25); }
.dm-promise__icon { width: clamp(48px, 3.6vw, 62px); height: clamp(48px, 3.6vw, 62px); stroke-width: 1.1; margin-bottom: clamp(14px, 1.3vw, 22px); }
.dm-promise__title {
margin: 0;
font-size: clamp(15px, 1.2vw, 21px);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.dm-promise__text {
margin: 8px 0 0;
max-width: 26ch;
font-size: clamp(14px, 1.05vw, 18.5px);
line-height: 1.35;
letter-spacing: .03em;
color: var(--ink-2);
}
@media (max-width: 900px) {
.dm-promises__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
.dm-promise:nth-child(3) { border-left: 0; }
}
@media (max-width: 420px) {
.dm-promise { padding: 0 8px; }
.dm-promise__title { letter-spacing: .06em; }
}
/* --------------------------------------------------------------------------
In store (product types)
-------------------------------------------------------------------------- */
.dm-instore__head {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
padding: 0 var(--gutter);
margin-bottom: clamp(20px, 2vw, 32px);
text-align: center;
}
.dm-instore .dm-eyebrow { letter-spacing: .34em; margin-bottom: 10px; }
.dm-instore .dm-section__text { margin-top: 10px; }
.dm-instore__all {
position: absolute;
right: var(--gutter);
bottom: 12px;
display: inline-flex;
align-items: center;
gap: 14px;
padding-bottom: 6px;
border-bottom: 1.5px solid currentColor;
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(13px, .95vw, 16px);
letter-spacing: .14em;
text-transform: uppercase;
}
.dm-instore__all .dm-icon { width: 20px; height: 20px; stroke-width: 1.8; transition: transform .35s var(--ease); }
.dm-instore__all:hover .dm-icon { transform: translateX(4px); }
.dm-instore__track { --cols: 5; --gap: clamp(8px, .7vw, 14px); padding-inline: 0; scroll-padding-inline: 0; }
@media (max-width: 1100px) { .dm-instore__track { --cols: 2.6; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } }
@media (max-width: 640px) { .dm-instore__track { --cols: 1.55; } }
.dm-tile {
position: relative;
display: block;
aspect-ratio: 2 / 3;
overflow: hidden;
background: #2a2826;
color: var(--white);
isolation: isolate;
}
.dm-tile__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 18%;
z-index: -2;
transition: transform 1.2s var(--ease);
}
.dm-tile::after {
content: "";
position: absolute; inset: 0;
z-index: -1;
background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0, rgba(0, 0, 0, .45) 26%, rgba(0, 0, 0, 0) 52%);
}
.dm-tile:hover .dm-tile__img { transform: scale(1.05); }
.dm-tile__body {
position: absolute;
left: clamp(16px, 2.2vw, 44px);
right: 16px;
bottom: clamp(18px, 2vw, 30px);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.dm-tile__name {
font-weight: 900;
font-stretch: 112%;
font-size: clamp(22px, 1.75vw, 34px);
line-height: 1;
text-transform: uppercase;
}
.dm-tile__count {
margin-top: 10px;
font-family: var(--f-mono);
font-size: clamp(11.5px, .8vw, 14px);
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .88);
}
.dm-tile__btn {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: clamp(14px, 1.3vw, 22px);
padding: 0 clamp(18px, 1.7vw, 32px);
height: clamp(44px, 2.8vw, 54px);
border: 1.5px solid rgba(255, 255, 255, .9);
border-radius: 2px;
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(12.5px, .9vw, 16px);
letter-spacing: .14em;
text-transform: uppercase;
transition: background-color .3s var(--ease), color .3s var(--ease);
}
.dm-tile__btn .dm-icon { width: 18px; height: 18px; stroke-width: 2; transition: transform .35s var(--ease); }
.dm-tile:hover .dm-tile__btn { background: var(--white); color: var(--ink); }
.dm-tile:hover .dm-tile__btn .dm-icon { transform: translateX(3px); }
@media (max-width: 900px) {
.dm-instore__head { flex-direction: column; align-items: center; }
.dm-instore__all { position: static; margin-top: 18px; }
}
/* --------------------------------------------------------------------------
Oversized collection banner
-------------------------------------------------------------------------- */
.dm-ov {
position: relative;
display: grid;
grid-template-columns: minmax(0, 34%) minmax(0, 32%) minmax(0, 34%);
min-height: clamp(520px, 34vw, 700px);
margin-top: clamp(56px, 6vw, 110px);
overflow: hidden;
isolation: isolate;
background: linear-gradient(90deg, #edefe9 0, #e7e9e3 26%, #939d83 46%, #535353 62%, #303030 78%, #272727 100%);
}
/* Concrete texture on the dark side */
.dm-ov::before {
content: "";
position: absolute; inset: 0;
z-index: -1;
opacity: .55;
background:
linear-gradient(90deg, transparent 55%, rgba(0, 0, 0, .25) 100%),
url("data:image/svg+xml;utf8,");
}
/* Copy */
.dm-ov__copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(40px, 4vw, 80px) 0 clamp(40px, 4vw, 72px) clamp(20px, 4vw, 82px);
color: var(--ink);
}
.dm-ov__eyebrow {
display: flex;
align-items: center;
gap: 22px;
margin: 0 0 clamp(16px, 1.6vw, 28px);
font-family: var(--f-mono);
font-size: clamp(16px, 1.3vw, 26px);
letter-spacing: .24em;
text-transform: uppercase;
}
.dm-ov__eyebrow::after { content: ""; width: clamp(80px, 10vw, 200px); height: 1px; background: rgba(0, 0, 0, .55); }
.dm-ov__title {
margin: 0;
font-weight: 900;
font-stretch: 116%;
font-size: clamp(46px, 5.2vw, 108px);
line-height: .86;
letter-spacing: -.015em;
text-transform: uppercase;
white-space: nowrap;
}
.dm-ov__title span { display: block; }
.dm-ov__title .is-tan { color: #9aa48a; }
.dm-ov__text { margin: clamp(18px, 1.6vw, 28px) 0 0; max-width: 30ch; font-size: clamp(15px, 1.2vw, 21px); line-height: 1.45; color: var(--ink-2); }
.dm-ov__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
align-self: flex-start;
min-width: clamp(200px, 14vw, 272px);
height: clamp(52px, 3.6vw, 66px);
margin-top: clamp(26px, 2.4vw, 42px);
padding: 0 28px;
background: var(--ink);
color: var(--white);
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(14px, 1vw, 18px);
letter-spacing: .16em;
text-transform: uppercase;
border-radius: 2px;
transition: background-color .3s var(--ease);
}
.dm-ov__btn .dm-icon { width: 20px; height: 20px; stroke-width: 1.8; transition: transform .35s var(--ease); }
.dm-ov__btn:hover { background: #2b2b2b; }
.dm-ov__btn:hover .dm-icon { transform: translateX(4px); }
.dm-ov__feats { list-style: none; margin: clamp(30px, 3vw, 54px) 0 0; padding: 0; display: flex; }
.dm-ov__feats li {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 0 clamp(16px, 2.2vw, 44px);
text-align: center;
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(11px, .8vw, 14px);
letter-spacing: .08em;
line-height: 1.4;
text-transform: uppercase;
max-width: 13ch;
box-sizing: content-box;
}
.dm-ov__feats li:first-child { padding-left: 0; }
.dm-ov__feats li + li { border-left: 1px solid rgba(0, 0, 0, .3); }
.dm-ov__feats .dm-icon { width: clamp(30px, 2.2vw, 42px); height: clamp(30px, 2.2vw, 42px); stroke-width: 1.2; }
/* Photo */
.dm-ov__media { position: relative; z-index: 1; margin: 0 -14%; }
.dm-ov__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 42% 8%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
/* Right: ring, cards, caption */
.dm-ov__side {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(24px, 2.2vw, 40px) clamp(20px, 2.2vw, 44px) clamp(24px, 2.4vw, 44px) 0;
color: var(--white);
}
.dm-ov__ring {
position: absolute;
top: clamp(18px, 2vw, 36px);
right: clamp(20px, 2.2vw, 44px);
width: clamp(110px, 8vw, 170px);
height: auto;
overflow: visible;
}
.dm-ov__ring text { fill: #fff; font-family: var(--f-mono); font-size: 13px; letter-spacing: .18em; }
.dm-ov__ring-text { transform-origin: 100px 100px; animation: dm-spin 22s linear infinite; }
.dm-ov__star { fill: #fff; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
.dm-ov__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, .8vw, 14px); }
.dm-ov__card { display: flex; flex-direction: column; background: #eff1eb; color: var(--ink); padding: 3px; }
.dm-ov__card-media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #d3d5cf; }
.dm-ov__card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform 1s var(--ease); }
.dm-ov__card:hover .dm-ov__card-media img { transform: scale(1.06); }
.dm-ov__card-name {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: clamp(10px, .9vw, 16px) 4px;
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(9.5px, .72vw, 14px);
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
.dm-ov__card-name .dm-icon { width: 14px; height: 14px; stroke-width: 2; transition: transform .3s var(--ease); }
.dm-ov__card:hover .dm-ov__card-name .dm-icon { transform: translateX(3px); }
.dm-ov__foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-top: clamp(36px, 4vw, 90px);
padding-top: clamp(14px, 1.4vw, 24px);
border-top: 1px solid rgba(255, 255, 255, .5);
font-family: var(--f-mono);
font-size: clamp(11px, .8vw, 14.5px);
letter-spacing: .2em;
text-transform: uppercase;
}
.dm-ov__brand { font-size: clamp(13px, 1vw, 18px); letter-spacing: .24em; }
/* Banner: responsive */
@media (max-width: 1200px) {
.dm-ov { grid-template-columns: minmax(0, 44%) minmax(0, 56%); background: linear-gradient(90deg, #edefe9 0, #e7e9e3 36%, #848484 60%, #272727 100%); }
.dm-ov__media { grid-column: 2; grid-row: 1; margin: 0; }
.dm-ov__side { grid-column: 1 / -1; grid-row: 2; padding: 28px var(--gutter) 32px; background: #272727; }
.dm-ov__ring { top: auto; bottom: calc(100% + 18px); }
}
@media (max-width: 700px) {
.dm-ov { grid-template-columns: 1fr; background: #e7e9e3; }
.dm-ov__copy { grid-row: 1; padding: 44px var(--gutter) 28px; }
.dm-ov__title { white-space: normal; font-size: clamp(36px, 11.6vw, 64px); }
.dm-ov__media { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 4.2; }
.dm-ov__img { -webkit-mask-image: none; mask-image: none; }
.dm-ov__side { grid-row: 3; }
.dm-ov__ring { display: none; }
.dm-ov__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-ov__feats li { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .dm-ov__ring-text { animation: none; } }
/* --------------------------------------------------------------------------
Reviews
-------------------------------------------------------------------------- */
.dm-reviews__track { --cols: 3; }
@media (max-width: 1100px) { .dm-reviews__track { --cols: 2.2; } }
@media (max-width: 640px) { .dm-reviews__track { --cols: 1.15; } }
.dm-review {
margin: 0;
display: flex;
flex-direction: column;
padding: clamp(24px, 2.2vw, 36px);
background: var(--white);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 32px -22px rgba(0, 0, 0, .22);
}
.dm-stars { display: flex; gap: 4px; }
.dm-star {
width: 18px; height: 18px;
background: #cfd1cb;
clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.dm-star.is-on { background: var(--ink); }
.dm-review__text {
margin: 18px 0 0;
font-size: clamp(16px, 1.2vw, 19px);
line-height: 1.5;
flex: 1;
}
.dm-review__by {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--line);
font-size: 14px;
}
.dm-review__name { font-weight: 700; }
.dm-review__verified { display: inline-flex; align-items: center; gap: 4px; color: #3f6b3a; font-size: 13px; }
.dm-review__verified .dm-icon { width: 15px; height: 15px; stroke-width: 2.2; }
.dm-review__product { width: 100%; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dm-review__product:hover { color: var(--ink); }
/* --------------------------------------------------------------------------
Split sections (photo left, content right): FAQ
-------------------------------------------------------------------------- */
.dm-split {
display: grid;
grid-template-columns: 29.5% minmax(0, 1fr);
background: var(--paper);
}
.dm-split--faq { grid-template-columns: 34% minmax(0, 1fr); }
.dm-split + .dm-split { border-top: 1px solid var(--line); }
.dm-split__media { position: relative; overflow: hidden; background: #2a2826; min-height: 420px; }
.dm-split__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 20%;
}
.dm-split__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 32%);
pointer-events: none;
}
.dm-split__caption {
position: absolute;
z-index: 1;
left: clamp(20px, 2vw, 34px);
right: 20px;
bottom: clamp(24px, 3vw, 52px);
margin: 0;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255, 255, 255, .8);
padding-left: 46px;
}
.dm-split__caption span { display: block; position: relative; margin-bottom: 8px; font-size: 13.5px; letter-spacing: .12em; color: var(--white); }
.dm-split__caption span::before { content: ""; position: absolute; left: -46px; top: 50%; width: 32px; height: 1px; background: currentColor; }
.dm-split__script {
position: absolute;
z-index: 1;
left: clamp(20px, 2vw, 34px);
bottom: clamp(40px, 5vw, 90px);
margin: 0;
max-width: 4.2em;
font-family: "Mrs Saint Delafield", "Brush Script MT", cursive;
font-size: clamp(52px, 4.8vw, 84px);
line-height: .82;
color: var(--white);
transform: rotate(-9deg);
transform-origin: left bottom;
}
.dm-split__script::after { content: ""; display: block; width: 1.1em; height: 2px; margin: .18em 0 0 1.4em; background: currentColor; transform: rotate(-6deg); }
.dm-split__body { padding: clamp(40px, 3.6vw, 72px) clamp(20px, 3vw, 56px) clamp(40px, 3.6vw, 64px); min-width: 0; }
.dm-split .dm-eyebrow { margin-bottom: 10px; letter-spacing: .34em; }
.dm-split__title {
margin: 0;
font-weight: 900;
font-stretch: 116%;
font-size: clamp(42px, 4.4vw, 88px);
line-height: .9;
letter-spacing: -.015em;
text-transform: uppercase;
}
.is-tan { color: var(--tan); }
/* ---- FAQ ---- */
.dm-faq__head { text-align: center; margin-bottom: clamp(24px, 2.4vw, 40px); }
.dm-faq .dm-split__title { font-size: clamp(38px, 3.5vw, 72px); }
.dm-faq__lead {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0 6px;
margin: 14px 0 0;
font-size: clamp(15px, 1.05vw, 18px);
color: var(--ink-2);
}
.dm-faq__lead a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dm-faq__lead .dm-icon { width: 20px; height: 20px; stroke-width: 1.7; }
.dm-faq__list { display: grid; gap: 10px; max-width: 980px; margin: 24px 0 0; }
.dm-faq__item {
border: 1px solid #d6d8d2;
border-radius: 4px;
background: rgba(255, 255, 255, .35);
transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.dm-faq__item:hover { border-color: #afb99f; }
.dm-faq__item[open] { background: var(--white); border-color: #c1cbb1; }
.dm-faq__item summary {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) 20px;
align-items: center;
gap: clamp(14px, 1.8vw, 36px);
padding: 10px clamp(16px, 1.6vw, 26px) 10px clamp(12px, 1.2vw, 20px);
cursor: pointer;
list-style: none;
}
.dm-faq__item summary::-webkit-details-marker { display: none; }
.dm-faq__badge { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #e4e6e0; }
.dm-faq__badge .dm-icon { width: 27px; height: 27px; stroke-width: 1.35; }
.dm-faq__q { margin: 0; font-size: clamp(16px, 1.25vw, 20px); font-weight: 700; line-height: 1.3; }
.dm-faq__item summary:hover .dm-faq__q { text-decoration: underline; text-underline-offset: 4px; }
.dm-faq__icon { position: relative; width: 16px; height: 16px; }
.dm-faq__icon::before,
.dm-faq__icon::after {
content: "";
position: absolute;
left: 0; right: 0; top: 50%;
height: 1.6px;
background: currentColor;
transition: transform .3s var(--ease);
}
.dm-faq__icon::after { transform: rotate(90deg); }
.dm-faq__item[open] .dm-faq__icon::after { transform: rotate(0); }
.dm-faq__a { padding: 0 clamp(14px, 1.2vw, 20px) 16px calc(58px + clamp(12px, 1.2vw, 20px) + clamp(14px, 1.8vw, 36px) - 20px); }
.dm-faq__a p {
margin: 0;
padding: 14px 20px;
background: #eceee8;
border-radius: 3px;
font-size: clamp(15px, 1.05vw, 17.5px);
line-height: 1.55;
color: var(--ink-2);
}
.dm-faq__help { margin: 22px auto 0; max-width: 980px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 16px; color: var(--ink-2); }
.dm-faq__help a { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* ---- Split: tablet & mobile ---- */
@media (max-width: 1000px) {
.dm-split, .dm-split--faq { grid-template-columns: 1fr; }
.dm-split__media { min-height: 0; aspect-ratio: 16 / 12; }
}
@media (max-width: 640px) {
.dm-split__body { padding-left: var(--gutter); padding-right: var(--gutter); }
.dm-split__title { font-size: clamp(36px, 11vw, 56px); }
.dm-faq__item summary { grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 14px; }
.dm-faq__badge { width: 42px; height: 42px; }
.dm-faq__badge .dm-icon { width: 21px; height: 21px; }
.dm-faq__a { padding-left: 14px; }
}
/* --------------------------------------------------------------------------
Journal
-------------------------------------------------------------------------- */
.dm-journal__grid {
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2vw, 32px);
}
.dm-post__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #d3d5cf; }
.dm-post__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.dm-post:hover .dm-post__img { transform: scale(1.04); }
.dm-post__date { margin: 16px 0 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dm-post__title { margin: 8px 0 0; font-size: clamp(18px, 1.4vw, 23px); font-weight: 700; line-height: 1.25; }
.dm-post__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dm-post__excerpt { margin: 8px 0 0; color: var(--ink-2); }
@media (max-width: 900px) { .dm-journal__grid { grid-template-columns: 1fr; } }
/* --------------------------------------------------------------------------
Instagram strip
-------------------------------------------------------------------------- */
.dm-ig .dm-eyebrow a { text-decoration: underline; text-underline-offset: 4px; }
.dm-ig__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 0 4px; }
.dm-ig__tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #d3d5cf; }
.dm-ig__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), opacity .3s; }
.dm-ig__tile:hover .dm-ig__img { transform: scale(1.06); opacity: .85; }
@media (max-width: 900px) { .dm-ig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* --------------------------------------------------------------------------
Page content
-------------------------------------------------------------------------- */
.dm-prose h2 { margin: 0 0 14px; font-weight: 900; font-size: clamp(28px, 2.6vw, 42px); line-height: 1; text-transform: uppercase; }
.dm-prose h3 { margin: 28px 0 8px; font-size: clamp(17px, 1.3vw, 21px); font-weight: 700; }
.dm-prose p { margin: 0 0 12px; font-size: clamp(15px, 1.1vw, 17.5px); line-height: 1.7; color: var(--ink-2); }
.dm-prose a { text-decoration: underline; text-underline-offset: 3px; }
/* --------------------------------------------------------------------------
Breadcrumbs (shop pages)
-------------------------------------------------------------------------- */
.dm-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dm-crumbs a:hover { color: var(--ink); }
/* --------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------- */
.dm-footer {
position: relative;
background: #141414;
color: rgba(255, 255, 255, .74);
overflow: hidden;
}
.dm-footer::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
opacity: .5;
background: url("data:image/svg+xml;utf8,");
}
.dm-footer a { transition: color .2s; }
.dm-footer a:hover { color: var(--white); }
.dm-footer__main {
position: relative;
display: grid;
grid-template-columns: minmax(0, 27%) minmax(0, 1fr);
gap: clamp(24px, 3vw, 56px);
max-width: 1920px;
margin: 0 auto;
padding: clamp(48px, 3.8vw, 72px) clamp(20px, 3.4vw, 64px) 0 clamp(20px, 4.8vw, 96px);
}
/* Brand column */
.dm-footer__brand { position: relative; min-height: 0; padding-bottom: 0; }
.dm-footer__name {
display: inline-block;
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(24px, 1.8vw, 34px);
letter-spacing: .26em;
line-height: 1;
color: var(--white);
}
.dm-footer__tagline {
margin: 18px 0 0;
font-family: var(--f-mono);
font-size: clamp(11px, .75vw, 13.5px);
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(255, 255, 255, .45);
}
.dm-footer__about { position: relative; z-index: 1; margin: 26px 0 0; font-size: clamp(15px, .95vw, 17.5px); line-height: 1.6; }
.dm-footer__script {
position: relative;
z-index: 2;
margin: 34px 0 0 6px;
font-family: "Mrs Saint Delafield", "Brush Script MT", cursive;
font-size: clamp(46px, 3.4vw, 64px);
line-height: .8;
color: var(--white);
transform: rotate(-12deg);
transform-origin: left bottom;
}
.dm-footer__script span { display: block; padding-left: .45em; }
.dm-footer__script::after { content: ""; display: block; width: 1em; height: 2px; margin: .16em 0 0 1.6em; background: currentColor; transform: rotate(-8deg); }
.dm-footer__brand { display: flex; flex-direction: column; }
/* Big, cropped photo like the reference: heads just under the script line,
people cut off by the bottom bar, spilling right towards the trust strip. */
.dm-footer__photo {
position: relative;
z-index: 0;
flex: 1 1 0;
min-height: 260px;
margin: -120px -26% 0 -10%;
pointer-events: none;
overflow: hidden;
}
.dm-footer__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 30% 0;
-webkit-mask-image: linear-gradient(90deg, #000 58%, transparent 96%), linear-gradient(180deg, transparent 0, #000 14%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, #000 58%, transparent 96%), linear-gradient(180deg, transparent 0, #000 14%);
mask-composite: intersect;
}
.dm-footer__script { z-index: 2; }
.dm-footer__right { position: relative; z-index: 1; }
/* Right side */
.dm-footer__top {
display: grid;
/* Shop, Help, About equal; Join the community a little wider. */
grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
gap: clamp(20px, 2.4vw, 48px);
}
.dm-footer__title {
margin: 0 0 26px;
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(15px, 1vw, 19px);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--white);
}
.dm-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1vw, 20px); font-size: clamp(15px, 1vw, 18.5px); }
.dm-footer__nltext { margin: -8px 0 26px; font-size: clamp(15px, 1vw, 18.5px); line-height: 1.6; color: rgba(255, 255, 255, .85); }
.dm-nl__row {
display: flex;
height: clamp(56px, 3.8vw, 72px);
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 3px;
overflow: hidden;
transition: border-color .2s;
}
.dm-nl__row:focus-within { border-color: var(--white); }
.dm-nl__input {
flex: 1;
min-width: 0;
padding: 0 16px;
border: 0;
background: transparent;
color: var(--white);
font-size: clamp(15px, 1vw, 18px);
outline: 0;
}
.dm-nl__input::placeholder { color: rgba(255, 255, 255, .55); }
.dm-nl__btn { width: clamp(64px, 4.2vw, 80px); display: grid; place-items: center; background: #a2ac92; color: var(--ink); transition: background-color .2s; }
.dm-nl__btn:hover { background: var(--sand); }
.dm-nl__btn .dm-icon { width: 26px; height: 26px; stroke-width: 1.8; }
.dm-nl.is-busy .dm-nl__btn { opacity: .6; pointer-events: none; }
.dm-nl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dm-nl__consent { display: flex; align-items: center; gap: 14px; margin-top: 20px; font-size: clamp(14px, .95vw, 17px); cursor: pointer; }
.dm-nl__consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dm-nl__box {
flex: none;
width: 26px; height: 26px;
display: grid; place-items: center;
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 3px;
color: transparent;
transition: background-color .2s, color .2s;
}
.dm-nl__box .dm-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.dm-nl__consent input:checked + .dm-nl__box { background: var(--white); color: var(--ink); }
.dm-nl__consent input:focus-visible + .dm-nl__box { outline: 2px solid var(--white); outline-offset: 3px; }
.dm-nl__msg { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--sand); }
.dm-nl__msg.is-error { color: #ff8b8b; }
.dm-footer__social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; justify-content: space-between; max-width: 320px; gap: 12px; }
.dm-footer__social a { color: var(--white); display: block; }
.dm-footer__social .dm-icon { width: 34px; height: 34px; stroke-width: 1.5; }
.dm-footer__social a:hover { opacity: .7; }
.dm-footer__trust {
list-style: none;
margin: clamp(40px, 3.4vw, 64px) 0 0;
padding: clamp(24px, 2vw, 38px) 0 clamp(18px, 1.4vw, 26px);
border-top: 1px solid rgba(255, 255, 255, .22);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dm-footer__trust li { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.2vw, 24px); padding: 4px clamp(8px, 1vw, 16px); }
.dm-footer__trust li:first-child { position: relative; z-index: 1; }
.dm-footer__trust li + li { border-left: 1px solid rgba(255, 255, 255, .22); }
.dm-footer__trust li:first-child { justify-content: flex-start; }
.dm-footer__trust .dm-icon { flex: none; width: clamp(40px, 3vw, 58px); height: clamp(40px, 3vw, 58px); stroke-width: 1.1; color: var(--white); }
.dm-footer__trust span { display: flex; flex-direction: column; gap: 6px; font-size: clamp(13.5px, .92vw, 17px); }
.dm-footer__trust strong {
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(12px, .82vw, 16px);
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
color: var(--white);
}
/* Bottom bar */
.dm-footer__bottom {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px 32px;
padding: 26px clamp(20px, 3.4vw, 64px) 26px clamp(20px, 3.9vw, 78px);
border-top: 1px solid rgba(255, 255, 255, .16);
}
.dm-footer__copy { margin: 0; font-family: var(--f-mono); font-size: clamp(13px, .85vw, 16px); color: var(--white); }
.dm-footer__legal { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; }
.dm-footer__legal > ul:not(.dm-pay) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; font-size: clamp(13px, .8vw, 15px); }
.dm-footer__legal > ul:not(.dm-pay) li { display: flex; align-items: center; }
.dm-footer__legal > ul:not(.dm-pay) li + li::before { content: "|"; margin: 0 clamp(14px, 1.4vw, 28px); color: rgba(255, 255, 255, .45); }
.dm-footer__legal > ul:not(.dm-pay) { margin-right: clamp(4px, 1vw, 16px) !important; }
.dm-pay { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.dm-pay__badge {
width: 50px;
height: 32px;
display: grid;
place-items: center;
border-radius: 4px;
background: var(--white);
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
line-height: 1;
}
.dm-pay__badge--upi { color: #4a4a4a; font-style: italic; font-size: 13px; letter-spacing: -.02em; }
.dm-pay__badge--upi span::after { content: ""; display: inline-block; width: 5px; height: 9px; margin-left: 2px; background: linear-gradient(135deg, #f47b20 50%, #0e9b48 50%); transform: skewX(-18deg); }
.dm-pay__badge--visa { color: #1a1f71; font-style: italic; font-size: 14px; letter-spacing: -.01em; }
.dm-mc { position: relative; display: block; width: 30px; height: 18px; }
.dm-mc i { position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%; }
.dm-mc i:first-child { left: 0; background: #eb001b; }
.dm-mc i:last-child { right: 0; background: #f79e1b; mix-blend-mode: multiply; }
.dm-pay__badge--rupay { color: #0b6db7; font-style: italic; font-size: 10.5px; }
.dm-pay__badge--rupay b { color: #f47b20; }
.dm-pay__badge--cod { background: #d4d4d4; color: #1b1b1b; font-size: 12.5px; letter-spacing: .02em; }
.dm-footer__social span { display: block; color: var(--white); }
/* Footer: responsive */
/* Mid-size screens: keep all four columns in one row, just tighter. */
@media (max-width: 1500px) {
.dm-footer__main { grid-template-columns: minmax(0, 24%) minmax(0, 1fr); gap: 28px; padding-left: clamp(20px, 3vw, 56px); padding-right: clamp(20px, 2.4vw, 40px); }
.dm-footer__top { gap: clamp(18px, 2vw, 36px); }
.dm-footer__col ul { font-size: 15px; gap: 13px; }
.dm-footer__nltext { font-size: 15px; }
.dm-footer__title { font-size: 14px; margin-bottom: 20px; }
.dm-footer__name { font-size: 22px; letter-spacing: .2em; }
.dm-footer__tagline { font-size: 10.5px; letter-spacing: .16em; }
.dm-footer__about { font-size: 14.5px; }
.dm-nl__consent { font-size: 13.5px; gap: 10px; }
.dm-nl__box { width: 22px; height: 22px; }
.dm-footer__social .dm-icon { width: 28px; height: 28px; }
.dm-footer__trust .dm-icon { width: 36px; height: 36px; }
.dm-footer__trust strong { font-size: 12px; letter-spacing: .08em; }
.dm-footer__trust span { font-size: 13px; }
.dm-footer__trust li { gap: 12px; padding: 4px 10px; }
}
@media (max-width: 1180px) {
.dm-footer__main { grid-template-columns: minmax(0, 22%) minmax(0, 1fr); gap: 20px; }
.dm-footer__top { gap: 18px; }
.dm-footer__col ul { font-size: 14px; }
.dm-footer__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
.dm-footer__trust li { justify-content: flex-start !important; }
.dm-footer__trust li:nth-child(3) { border-left: 0; }
}
@media (max-width: 1000px) {
.dm-footer__main { grid-template-columns: 1fr; padding: 48px var(--gutter) 0; }
.dm-footer__brand { min-height: 0; padding-bottom: 0; }
.dm-footer__photo { display: none; }
.dm-footer__script { margin-top: 20px; font-size: 44px; }
.dm-footer__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
.dm-footer__trust li { justify-content: flex-start !important; }
.dm-footer__trust li:nth-child(3) { border-left: 0; }
.dm-footer__bottom { padding: 22px var(--gutter); }
}
@media (max-width: 560px) {
.dm-footer__top { grid-template-columns: 1fr 1fr; row-gap: 36px; }
.dm-footer__col:nth-child(3) { grid-column: 1 / -1; }
.dm-footer__trust { grid-template-columns: 1fr; }
.dm-footer__trust li { border-left: 0 !important; padding-left: 0; }
.dm-footer__legal { flex-direction: column; align-items: flex-start; }
}
/* --------------------------------------------------------------------------
Page head (cart, checkout, account)
-------------------------------------------------------------------------- */
.dm-pagehead {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
padding: clamp(32px, 3vw, 48px) 0 clamp(24px, 2.4vw, 36px);
}
.dm-pagehead__title {
margin: 0;
font-weight: 900;
font-stretch: 116%;
font-size: clamp(40px, 4.2vw, 72px);
line-height: .9;
letter-spacing: -.015em;
text-transform: uppercase;
}
.dm-pagehead__text { margin: 12px 0 0; font-size: clamp(15px, 1.15vw, 19px); color: var(--ink-2); }
.dm-pagehead__crumbs { display: flex; align-items: center; gap: 8px; padding-top: 14px; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.dm-pagehead__crumbs .dm-icon { width: 14px; height: 14px; stroke-width: 2; }
.dm-pagehead__crumbs a:hover { color: var(--ink); text-decoration: underline; }
.dm-cartpage { padding-bottom: clamp(48px, 5vw, 96px); }
.dm-cartpage > .woocommerce { margin: 0; }
.dm-icon.is-flip { transform: scaleX(-1); }
/* WooCommerce notices on the cart page */
.dm-cartpage .woocommerce-message,
.dm-cartpage .woocommerce-info,
.dm-cartpage .woocommerce-error {
list-style: none;
margin: 0 0 20px;
padding: 14px 18px;
background: var(--white);
border-left: 3px solid var(--ink);
font-size: 15px;
}
.dm-cartpage .woocommerce-error { border-left-color: var(--sale); }
.dm-cartpage .woocommerce-message a,
.dm-cartpage .woocommerce-info a { text-decoration: underline; }
/* --------------------------------------------------------------------------
Cart layout
-------------------------------------------------------------------------- */
div.dm-cart {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 448px);
gap: clamp(24px, 3.4vw, 64px);
align-items: start;
}
.dm-cart__side { position: sticky; top: calc(var(--header-h) + 24px); }
.dm-cart__head,
.dm-line { display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px 110px; align-items: center; gap: 16px; }
.dm-cart__head {
padding: 0 6px 14px;
border-bottom: 1px solid var(--line);
font-family: var(--f-mono);
font-size: 12.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-2);
}
.dm-cart__head span:nth-child(2) { text-align: left; }
.dm-cart__head span:last-child,
.dm-line__total { text-align: right; }
.dm-cart__items { list-style: none; margin: 0; padding: 0; }
.dm-line { padding: 16px 6px; border-bottom: 1px solid var(--line); }
.dm-line__product { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); min-width: 0; }
.dm-line__img { flex: none; width: clamp(96px, 11vw, 176px); aspect-ratio: 176 / 152; overflow: hidden; background: #d3d5cf; }
.dm-line__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.dm-line__info { min-width: 0; }
.dm-line__name { margin: 0; font-size: clamp(16px, 1.2vw, 19px); font-weight: 700; line-height: 1.3; }
.dm-line__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dm-line__variant { margin: 8px 0 0; font-size: clamp(15px, 1.05vw, 17px); color: var(--muted); }
.dm-line__fit {
display: inline-block;
margin-top: 10px;
padding: 5px 10px;
background: #e0e2dc;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
}
.dm-line__links { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-size: 14.5px; color: var(--ink-2); }
.dm-line__links a { text-decoration: underline; text-underline-offset: 3px; }
.dm-line__links a:hover { color: var(--ink); }
.dm-line__links span { color: var(--muted); }
.dm-line__price,
.dm-line__total { font-size: clamp(16px, 1.15vw, 18px); font-weight: 700; }
.dm-line__price del, .dm-line__total del { font-weight: 400; color: var(--muted); }
.dm-qty {
display: inline-flex;
align-items: center;
height: 46px;
border: 1px solid #c2ccb2;
background: var(--white);
}
.dm-qty__btn { width: 40px; height: 100%; font-size: 20px; line-height: 1; color: var(--ink); transition: background-color .2s; }
.dm-qty__btn:hover { background: var(--paper); }
.dm-qty__btn:disabled { color: #b6c0a6; pointer-events: none; }
.dm-qty__input {
width: 40px;
height: 100%;
border: 0;
background: transparent;
text-align: center;
font-size: 16px;
-moz-appearance: textfield;
appearance: textfield;
}
.dm-qty__input::-webkit-outer-spin-button,
.dm-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dm-qty__input:focus { outline: 0; }
.dm-qty:focus-within { border-color: var(--ink); }
.dm-cart__actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 6px 0; }
.dm-cart__link { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; text-decoration: underline; text-underline-offset: 4px; }
.dm-cart__link .dm-icon { width: 20px; height: 20px; stroke-width: 1.6; }
.dm-cart__update { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Busy state while WooCommerce refreshes the cart */
.dm-cart .blockUI.blockOverlay { background: rgba(242, 244, 238, .6) !important; }
/* --------------------------------------------------------------------------
Order summary
-------------------------------------------------------------------------- */
.dm-summary {
padding: clamp(22px, 1.8vw, 30px);
background: #e8eae4;
box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.dm-summary__title { margin: 0 0 18px; font-weight: 900; font-stretch: 112%; font-size: clamp(19px, 1.4vw, 23px); text-transform: uppercase; }
.dm-summary__rows { margin: 0; }
.dm-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; font-size: clamp(15px, 1.1vw, 17.5px); }
.dm-summary__row dt { color: var(--ink-2); }
.dm-summary__row dd { margin: 0; text-align: right; }
.dm-free { color: #2f7d32; font-weight: 600; letter-spacing: .04em; }
.dm-summary__total { margin-top: 12px; padding-top: 22px; border-top: 1px solid rgba(0, 0, 0, .14); align-items: flex-start; }
.dm-summary__total dt { color: var(--ink); font-weight: 900; font-stretch: 110%; font-size: clamp(19px, 1.4vw, 23px); }
.dm-summary__total dd { font-weight: 900; font-stretch: 110%; font-size: clamp(24px, 1.9vw, 30px); line-height: 1; }
.dm-summary__total small { display: block; margin-top: 10px; font-weight: 400; font-stretch: 100%; font-size: 14px; color: var(--ink-2); }
.dm-summary__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
height: clamp(52px, 3.6vw, 56px);
margin-top: 22px;
background: var(--ink);
color: var(--white);
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(14px, 1.05vw, 17px);
letter-spacing: .14em;
text-transform: uppercase;
border-radius: 2px;
transition: background-color .3s var(--ease);
}
.dm-summary__cta .dm-icon { width: 20px; height: 20px; stroke-width: 1.8; transition: transform .35s var(--ease); }
.dm-summary__cta:hover { background: #2b2b2b; }
.dm-summary__cta:hover .dm-icon { transform: translateX(4px); }
.dm-summary__trust { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.dm-summary__trust li { display: flex; align-items: center; gap: 14px; padding: 16px 10px; }
.dm-summary__trust li:nth-child(odd) { padding-left: 0; border-right: 1px solid rgba(0, 0, 0, .12); }
.dm-summary__trust li:nth-child(even) { padding-right: 0; padding-left: 18px; }
.dm-summary__trust li:nth-child(-n+2) { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.dm-summary__trust .dm-icon { flex: none; width: 38px; height: 38px; stroke-width: 1.2; }
.dm-summary__trust span { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--ink-2); }
.dm-summary__trust strong { font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
/* --------------------------------------------------------------------------
You may also like
-------------------------------------------------------------------------- */
.dm-suggest { margin-top: clamp(48px, 5vw, 80px); }
.dm-suggest__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dm-suggest__head .dm-instore__all { position: static; }
.dm-suggest__title { margin: 0; font-weight: 900; font-stretch: 112%; font-size: clamp(24px, 2vw, 34px); text-transform: uppercase; }
.dm-suggest__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 26px); }
.dm-suggest .dm-card__media { aspect-ratio: 335 / 180; }
/* Empty cart */
.dm-cart-empty { max-width: 520px; margin: 24px auto 40px; padding: 48px 24px; text-align: center; background: var(--white); }
.dm-cart-empty > .dm-icon { width: 56px; height: 56px; stroke-width: 1.1; }
.dm-cart-empty h2 { margin: 16px 0 8px; font-weight: 900; font-stretch: 112%; font-size: 26px; text-transform: uppercase; }
.dm-cart-empty p { margin: 0; color: var(--ink-2); }
.dm-cart-empty .return-to-shop { margin-top: 24px; }
.dm-cart-empty .dm-ov__btn { display: inline-flex; }
/* Cart: responsive */
@media (max-width: 1100px) {
div.dm-cart { grid-template-columns: 1fr; }
.dm-cart__side { position: static; }
.dm-suggest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.dm-pagehead { flex-direction: column; gap: 8px; }
.dm-pagehead__crumbs { order: -1; padding-top: 0; font-size: 13px; }
.dm-cart__head { display: none; }
.dm-line { grid-template-columns: 1fr auto; grid-template-areas: "p p" "q t"; row-gap: 14px; padding: 18px 0; }
.dm-line__product { grid-area: p; align-items: flex-start; }
.dm-line__price { display: none; }
.dm-line__qty { grid-area: q; }
.dm-line__total { grid-area: t; }
.dm-line__img { width: 104px; }
.dm-cart__actions { padding-left: 0; padding-right: 0; }
.dm-summary__trust { grid-template-columns: 1fr; }
.dm-summary__trust li { padding: 12px 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.dm-summary__trust li:last-child { border-bottom: 0; }
.dm-suggest .dm-card__media { aspect-ratio: 3 / 4; }
}
/* Cart: override WooCommerce's default cart styles */
.dm-cartpage .cart-collaterals,
.dm-cartpage .cart-collaterals .cart_totals { float: none; width: 100%; }
.dm-cartpage .dm-line a.remove {
display: inline;
width: auto;
height: auto;
border-radius: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit !important;
background: none !important;
text-decoration: underline;
text-underline-offset: 3px;
}
.dm-cartpage .dm-line a.remove:hover { color: var(--sale) !important; }
.dm-cartpage .wc-proceed-to-checkout { padding: 0; }
.dm-cartpage .wc-proceed-to-checkout a.checkout-button {
display: flex;
margin: 22px 0 0;
padding: 0 16px;
font-size: clamp(14px, 1.05vw, 17px);
white-space: nowrap;
background: var(--ink);
color: var(--white);
}
.dm-cartpage .woocommerce-message,
.dm-cartpage .woocommerce-info,
.dm-cartpage .woocommerce-error { position: relative; padding-left: 48px; border-top: 0; outline: 0; }
.dm-cartpage .woocommerce-message::before,
.dm-cartpage .woocommerce-info::before,
.dm-cartpage .woocommerce-error::before { left: 16px; top: 50%; transform: translateY(-50%); }
.dm-suggest .dm-card { min-width: 0; }
@media (max-width: 720px) {
.dm-suggest__head { flex-wrap: wrap; gap: 10px; }
.dm-suggest__title { font-size: 24px; }
.dm-suggest .dm-swatches { display: none; }
.dm-suggest .dm-card__body { padding: 12px; }
.dm-suggest .dm-atc { font-size: 12px; letter-spacing: .06em; }
.dm-suggest .dm-atc .dm-icon { display: none; }
}
/* --------------------------------------------------------------------------
Forms (checkout, account)
-------------------------------------------------------------------------- */
.dm-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 14px; }
.dm-fields .form-row { grid-column: span 12; margin: 0; padding: 0; width: auto; float: none; }
.dm-fields .dm-col-6 { grid-column: span 6; }
.dm-fields .dm-col-4 { grid-column: span 4; }
.dm-fields .dm-hide { display: none !important; }
.dm-copage .form-row label,
.dm-accpage .form-row label,
.dm-accpage fieldset legend { display: block; margin: 0 0 6px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.dm-copage .form-row .required,
.dm-accpage .form-row .required { color: var(--sale); text-decoration: none; }
.dm-copage .form-row .optional,
.dm-accpage .form-row .optional { color: var(--muted); font-weight: 400; }
.dm-copage input.input-text,
.dm-copage select,
.dm-copage textarea,
.dm-accpage input.input-text,
.dm-accpage select,
.dm-accpage textarea {
width: 100%;
height: 46px;
padding: 0 14px;
border: 1px solid #ced0ca;
border-radius: 2px;
background: rgba(255, 255, 255, .6);
font-size: 15px;
color: var(--ink);
transition: border-color .2s, background-color .2s;
}
.dm-copage textarea, .dm-accpage textarea { height: auto; min-height: 100px; padding: 12px 14px; }
.dm-copage input.input-text:focus,
.dm-accpage input.input-text:focus { outline: 0; border-color: var(--ink); background: var(--white); }
.dm-copage input::placeholder, .dm-accpage input::placeholder { color: #96a086; }
.dm-copage .woocommerce-invalid input.input-text,
.dm-accpage .woocommerce-invalid input.input-text { border-color: var(--sale); }
.dm-copage .select2-container .select2-selection--single,
.dm-accpage .select2-container .select2-selection--single {
height: 46px;
border: 1px solid #ced0ca;
border-radius: 2px;
background: rgba(255, 255, 255, .6);
}
.dm-copage .select2-container .select2-selection--single .select2-selection__rendered,
.dm-accpage .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 14px; font-size: 15px; color: var(--ink); }
.dm-copage .select2-container .select2-selection--single .select2-selection__arrow,
.dm-accpage .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }
.dm-check { display: flex !important; align-items: center; gap: 10px; font-weight: 400 !important; cursor: pointer; }
.dm-check input { width: 18px; height: 18px; accent-color: var(--ink); }
/* --------------------------------------------------------------------------
Checkout
-------------------------------------------------------------------------- */
.dm-pagehead--co { align-items: center; }
.dm-pagehead__title--split .is-tan { color: #9aa48a; }
.dm-steps { list-style: none; margin: 0 auto 0 0; padding: 0 0 0 clamp(24px, 10vw, 220px); display: flex; align-items: flex-start; }
.dm-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 140px; font-size: 14.5px; color: var(--ink-2); }
.dm-steps li + li::before { content: ""; position: absolute; top: 14px; right: calc(50% + 22px); width: calc(100% - 44px); height: 1px; background: #c2ccb2; }
.dm-steps span {
display: grid; place-items: center;
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid #aab49a;
background: var(--paper);
font-size: 13px;
transition: background-color .3s, color .3s, border-color .3s;
}
.dm-steps li.is-active { color: var(--ink); font-weight: 600; }
.dm-steps li.is-active span { background: #878787; border-color: #878787; color: var(--white); }
.dm-steps li.is-done span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.dm-co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 534px); gap: clamp(20px, 2.2vw, 32px); align-items: start; }
.dm-co__main { display: grid; gap: 10px; }
.dm-co__card { padding: clamp(18px, 1.6vw, 24px); background: rgba(255, 255, 255, .35); border: 1px solid #dcded8; }
.dm-co__card + .dm-co__card { margin-top: 0; }
#customer_details { display: grid; gap: 10px; }
.dm-co__cardhead { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.dm-co__cardhead h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(17px, 1.3vw, 20px); font-weight: 700; }
.dm-co__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 700; }
.dm-co__login { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.dm-co__login a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.dm-co__account { margin-top: 16px; }
/* Payment methods */
.dm-pay-methods { background: none !important; border-radius: 0 !important; }
.dm-pay-methods ul.payment_methods { list-style: none; margin: 0 !important; padding: 0 !important; border: 0 !important; display: grid; gap: 0; }
.dm-pm { margin: 0 !important; border: 1px solid #dcded8; border-bottom-width: 0; }
.dm-pm:last-child { border-bottom-width: 1px; }
.dm-pm__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dm-pm__label { display: flex !important; align-items: center; gap: 18px; padding: 14px 18px; margin: 0 !important; cursor: pointer; transition: background-color .2s; }
.dm-pm__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink); position: relative; }
.dm-pm__radio:checked + .dm-pm__label { background: #e4e6e0; }
.dm-pm:has(.dm-pm__radio:checked) { border-color: #adb79d; }
.dm-pm__radio:checked + .dm-pm__label .dm-pm__dot::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--ink); }
.dm-pm__radio:focus-visible + .dm-pm__label { outline: 2px solid var(--ink); outline-offset: -2px; }
.dm-pm__text { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; color: var(--ink-2); }
.dm-pm__text strong { font-size: 16px; color: var(--ink); }
.dm-pm__icon { display: flex; align-items: center; gap: 6px; }
.dm-pm__icon .dm-icon { width: 34px; height: 34px; stroke-width: 1.2; }
.dm-pm__icon img { max-height: 28px; width: auto; }
.dm-pay-methods .payment_box { padding: 0 18px 16px 56px; background: #e4e6e0 !important; margin: 0 !important; }
.dm-pay-methods .payment_box::before { display: none !important; }
/* Order summary (checkout) */
.dm-co__side { position: sticky; top: calc(var(--header-h) + 24px); }
.dm-summary--co { padding: clamp(18px, 1.6vw, 24px); }
.dm-review__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.dm-review__head .dm-summary__title { margin: 0; }
.dm-review__head span { font-size: 15px; color: var(--ink-2); }
.dm-review__items { list-style: none; margin: 0; padding: 0; }
.dm-ri { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.dm-ri__img { display: block; aspect-ratio: 118 / 124; overflow: hidden; background: #d3d5cf; }
.dm-ri__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.dm-ri__info { min-width: 0; padding-right: 28px; }
.dm-ri__name { margin: 0; font-size: 15.5px; font-weight: 700; }
.dm-ri__variant { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.dm-ri .dm-line__fit { margin-top: 8px; padding: 3px 8px; font-size: 11px; }
.dm-ri__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.dm-ri__price { font-size: 17px; font-weight: 700; }
.dm-ri__remove { position: absolute; top: 12px; right: 0; width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink-2); }
.dm-ri__remove:hover { color: var(--sale); }
.dm-ri__remove .dm-icon { width: 18px; height: 18px; }
.dm-qty--sm { height: 36px; }
.dm-qty--sm .dm-qty__btn { width: 38px; font-size: 18px; }
.dm-qty__val { min-width: 36px; text-align: center; font-size: 15px; }
.dm-coupon { display: flex; gap: 14px; margin-top: 18px; }
.dm-coupon__input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid #ced0ca; background: rgba(255, 255, 255, .5); font-size: 15px; }
.dm-coupon__input:focus { outline: 0; border-color: var(--ink); }
.dm-coupon__btn { min-width: 132px; height: 46px; background: var(--ink); color: var(--white); font-family: var(--f-mono); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; }
.dm-coupon__btn:hover { background: #2b2b2b; }
.dm-coupon__msg:empty { display: none; }
.dm-coupon__msg { margin-top: 10px; font-size: 14px; }
.dm-coupon__msg ul, .dm-coupon__msg .woocommerce-error, .dm-coupon__msg .woocommerce-message { list-style: none; margin: 0 !important; padding: 8px 12px !important; border-top: 0 !important; background: var(--white); }
.dm-coupon__msg .woocommerce-error::before, .dm-coupon__msg .woocommerce-message::before { display: none; }
.dm-summary--co .dm-summary__rows { margin-top: 12px; }
.dm-summary--co .woocommerce-remove-coupon { margin-left: 6px; font-size: 13px; text-decoration: underline; }
.dm-co__trust { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(0, 0, 0, .1); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-co__trust li { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.dm-co__trust li:first-child { padding-left: 0; }
.dm-co__trust li + li { border-left: 1px solid rgba(0, 0, 0, .12); }
.dm-co__trust .dm-icon { flex: none; width: 32px; height: 32px; stroke-width: 1.2; }
.dm-co__trust span { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-2); }
.dm-co__trust strong { font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.dm-co__place { margin: 0 !important; padding: 0 !important; }
.dm-copage #place_order.dm-co__btn {
display: flex; align-items: center; justify-content: center; gap: 14px;
width: 100%; height: 54px; margin-top: 22px; padding: 0 16px;
background: var(--ink); color: var(--white);
font-family: var(--f-mono); font-weight: 500; font-size: 16px; letter-spacing: .14em; text-transform: uppercase;
border: 0; border-radius: 2px; float: none;
}
.dm-copage #place_order.dm-co__btn::after { content: "\2192"; font-family: var(--f-sans); letter-spacing: 0; }
.dm-copage #place_order.dm-co__btn:hover { background: #2b2b2b; }
.dm-co__legal { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--ink-2); }
.dm-co__legal a { text-decoration: underline; text-underline-offset: 2px; }
.dm-copage .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.dm-copage .woocommerce-NoticeGroup ul { list-style: none; margin: 0 0 12px; padding: 12px 16px; background: var(--white); border-left: 3px solid var(--sale); }
.dm-copage .blockUI.blockOverlay { background: rgba(242, 244, 238, .6) !important; }
@media (max-width: 1100px) {
.dm-co { grid-template-columns: 1fr; }
.dm-co__side { position: static; }
.dm-steps { padding-left: 0; margin: 0; }
.dm-pagehead--co { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
.dm-fields .dm-col-6, .dm-fields .dm-col-4 { grid-column: span 12; }
.dm-steps li { width: 96px; font-size: 13px; }
.dm-co__cardhead { flex-direction: column; align-items: flex-start; gap: 6px; }
.dm-ri { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
.dm-co__trust { grid-template-columns: 1fr; gap: 12px; }
.dm-co__trust li { padding: 0 !important; border: 0 !important; }
.dm-pm__label { gap: 12px; padding: 12px; }
.dm-pm__icon { display: none; }
}
/* --------------------------------------------------------------------------
My account
-------------------------------------------------------------------------- */
.dm-acc-hero {
position: relative;
display: flex;
align-items: center;
min-height: clamp(200px, 17.5vw, 270px);
overflow: hidden;
background: linear-gradient(90deg, #eaece6 0, #e0e2dc 45%, #cccec8 100%);
isolation: isolate;
}
.dm-acc-hero__copy { position: relative; z-index: 2; padding: 32px var(--gutter); max-width: 720px; }
.dm-acc-hero .dm-eyebrow { font-size: clamp(14px, 1.1vw, 18px); letter-spacing: .3em; margin-bottom: 12px; }
.dm-acc-hero__title { margin: 0; font-weight: 900; font-stretch: 116%; font-size: clamp(36px, 3.5vw, 58px); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; }
.dm-acc-hero__title span { display: block; }
.dm-acc-hero__title .is-tan { color: #8b957b; }
.dm-acc-hero__text { margin: 14px 0 0; font-size: clamp(14.5px, 1vw, 17px); color: var(--ink-2); }
.dm-acc-hero__media { position: absolute; inset: 0 0 0 38%; z-index: 1; }
.dm-acc-hero__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 70% 18%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%);
mask-image: linear-gradient(90deg, transparent 0, #000 40%);
}
.dm-accpage { padding-top: clamp(16px, 1.6vw, 24px); padding-bottom: clamp(48px, 5vw, 96px); }
.dm-accpage > .woocommerce { margin: 0; }
.dm-acc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(20px, 2vw, 32px); align-items: start; }
.dm-acc__nav { position: sticky; top: calc(var(--header-h) + 20px); float: none !important; width: auto !important; }
.dm-acc__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dm-acc__nav a { display: flex; align-items: center; gap: 16px; padding: 13px 14px; border-radius: 3px; font-size: 16px; color: var(--ink); transition: background-color .2s; }
.dm-acc__nav a:hover { background: #e4e6e0; }
.dm-acc__nav .is-active a { background: #dcded8; font-weight: 500; }
.dm-acc__nav .dm-icon { width: 24px; height: 24px; stroke-width: 1.4; }
.dm-acc__content { float: none !important; width: auto !important; min-width: 0; }
.dm-stats { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dm-stats a { display: flex; align-items: center; gap: 18px; height: 100%; padding: 20px 22px; background: rgba(255, 255, 255, .5); border: 1px solid #dee0da; transition: border-color .2s, background-color .2s; }
.dm-stats a:hover { border-color: #bac4aa; background: var(--white); }
.dm-stats .dm-icon { flex: none; width: 32px; height: 32px; stroke-width: 1.3; }
.dm-stats span { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink-2); }
.dm-stats strong { font-size: 19px; font-weight: 700; color: var(--ink); }
.dm-stats .dm-stats__go { width: 20px; height: 20px; stroke-width: 1.8; }
.dm-dash { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dm-dash__main, .dm-dash__side { display: grid; gap: 18px; }
.dm-acc-panel { padding: clamp(18px, 1.6vw, 24px); background: rgba(255, 255, 255, .5); border: 1px solid #dee0da; }
.dm-acc-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.dm-acc-panel__head h2 { margin: 0; font-weight: 900; font-stretch: 110%; font-size: 16px; text-transform: uppercase; letter-spacing: .01em; }
.dm-acc-panel__head a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.dm-acc-panel__head a .dm-icon { width: 16px; height: 16px; stroke-width: 1.8; }
.dm-acc-empty { margin: 0; color: var(--ink-2); }
.dm-acc-empty a { color: var(--ink); text-decoration: underline; }
.dm-acc-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.dm-orows { list-style: none; margin: 0; padding: 0; }
.dm-orow { display: grid; grid-template-columns: 98px minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 10px 0; border-top: 1px solid #e4e6e0; }
.dm-orow:first-child { border-top: 0; padding-top: 0; }
.dm-orow__img { display: block; aspect-ratio: 98 / 86; overflow: hidden; background: #d3d5cf; }
.dm-orow__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.dm-orow__info { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-2); }
.dm-orow__info strong { font-size: 15px; color: var(--ink); }
.dm-pill { padding: 5px 10px; border-radius: 3px; font-size: 13.5px; white-space: nowrap; }
.dm-pill--ok { background: #e2efdf; color: #2f6b2c; }
.dm-pill--warn { background: #e4e6e0; color: #5e5e5e; }
.dm-pill--info { background: #dfeaf4; color: #245b87; }
.dm-pill--bad { background: #e8eae4; color: #9b2222; }
.dm-pill--mute { background: #e5e7e1; color: #5d5953; }
.dm-orow__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; height: 36px; padding: 0 16px; background: var(--ink); color: var(--white); font-size: 13.5px; border-radius: 2px; white-space: nowrap; }
.dm-orow__btn:hover { background: #2b2b2b; }
.dm-acc-pages { display: flex; gap: 10px; margin-top: 16px; }
.dm-minis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dm-mini { position: relative; display: flex; flex-direction: column; min-width: 0; }
.dm-mini__img { display: block; aspect-ratio: 160 / 135; overflow: hidden; background: #d3d5cf; }
.dm-mini__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.dm-mini__wish { top: 6px; right: 6px; width: 30px; height: 30px; background: var(--white); color: var(--ink); border-radius: 3px; filter: none; }
.dm-mini__wish .dm-icon { width: 18px; height: 18px; }
.dm-mini__wish[aria-pressed="true"] .dm-icon { fill: var(--ink); }
.dm-mini__name { margin-top: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.dm-mini__price { margin-top: 4px; font-size: 14px; font-weight: 700; }
.dm-addr { padding: 16px; border: 1px solid #dee0da; background: rgba(255, 255, 255, .5); }
.dm-addr__top { display: flex; align-items: center; gap: 12px; }
.dm-addr__radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 3px var(--white); background: var(--ink); }
.dm-addr__top strong { font-size: 15px; }
.dm-addr__tag { padding: 3px 9px; background: #e1e3dd; font-family: var(--f-mono); font-size: 12.5px; }
.dm-addr__edit { margin-left: auto; }
.dm-addr__edit .dm-icon { width: 20px; height: 20px; }
.dm-addr address { margin: 10px 0 0 28px; font-style: normal; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.dm-addr address strong { color: var(--ink); font-weight: 600; }
.dm-acc-add { display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 12px; border: 1px solid var(--ink); font-family: var(--f-mono); font-weight: 500; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; }
.dm-acc-add:hover { background: var(--ink); color: var(--white); }
.dm-acc-details { list-style: none; margin: 0; padding: 0; }
.dm-acc-details li { display: flex; align-items: center; gap: 18px; padding: 12px 0; border-top: 1px solid #e4e6e0; font-size: 14.5px; }
.dm-acc-details li:first-child { border-top: 0; padding-top: 0; }
.dm-acc-details .dm-icon { flex: none; width: 22px; height: 22px; stroke-width: 1.4; }
.dm-acc-details span { flex: 1; display: flex; flex-direction: column; gap: 2px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.dm-acc-details strong { color: var(--ink); }
.dm-acc-details a { font-size: 13px; text-decoration: underline; color: var(--ink-2); white-space: nowrap; }
.dm-acc-line { display: flex; align-items: center; gap: 16px; }
.dm-acc-line__icon .dm-icon { width: 26px; height: 26px; stroke-width: 1.4; }
.dm-acc-line__text { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; color: var(--ink-2); }
.dm-acc-line__text strong { color: var(--ink); font-size: 15.5px; }
.dm-switch { position: relative; flex: none; width: 36px; height: 20px; border-radius: 20px; background: #bcc6ac; transition: background-color .25s; }
.dm-switch span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); transition: transform .25s var(--ease); }
.dm-switch[aria-checked="true"] { background: var(--ink); }
.dm-switch[aria-checked="true"] span { transform: translateX(16px); }
.dm-acc-wish--full { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* Default WooCommerce account screens (orders detail, address and account forms) */
.dm-acc__content > .woocommerce-notices-wrapper:empty { display: none; }
.dm-acc__content .woocommerce-Addresses,
.dm-acc__content .woocommerce-address-fields,
.dm-acc__content .woocommerce-EditAccountForm,
.dm-acc__content .woocommerce-order-details,
.dm-acc__content .woocommerce-customer-details,
.dm-acc__content > p { background: rgba(255, 255, 255, .5); border: 1px solid #dee0da; padding: clamp(18px, 1.6vw, 24px); margin: 0 0 18px; }
.dm-acc__content .woocommerce-address-fields__field-wrapper,
.dm-acc__content .woocommerce-EditAccountForm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 14px; }
.dm-acc__content .woocommerce-address-fields__field-wrapper .form-row,
.dm-acc__content .woocommerce-EditAccountForm > * { grid-column: span 12; margin: 0; padding: 0; width: auto; float: none; }
.dm-acc__content .woocommerce-address-fields__field-wrapper .dm-col-6,
.dm-acc__content .woocommerce-EditAccountForm .form-row-first,
.dm-acc__content .woocommerce-EditAccountForm .form-row-last { grid-column: span 6; }
.dm-acc__content .woocommerce-address-fields__field-wrapper .dm-col-4 { grid-column: span 4; }
.dm-acc__content .dm-hide { display: none !important; }
.dm-acc__content .woocommerce-EditAccountForm fieldset { border: 1px solid #dee0da; padding: 16px; display: grid; gap: 12px; }
.dm-acc__content .woocommerce-EditAccountForm .clear { display: none; }
.dm-accpage .woocommerce-Button,
.dm-accpage button.button,
.dm-accpage .woocommerce-button { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 26px; background: var(--ink) !important; color: var(--white) !important; border: 0; border-radius: 2px; font-family: var(--f-mono); font-weight: 500; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.dm-accpage .woocommerce-Button:hover, .dm-accpage button.button:hover { background: #2b2b2b !important; }
.dm-acc__content table.shop_table { width: 100%; border-collapse: collapse; background: transparent; border: 0; }
.dm-acc__content table.shop_table th, .dm-acc__content table.shop_table td { padding: 12px 8px; border-top: 1px solid #e4e6e0; text-align: left; }
.dm-acc__content .woocommerce-Address-title h2, .dm-acc__content h2 { font-weight: 900; font-stretch: 110%; font-size: 18px; text-transform: uppercase; margin: 0 0 12px; }
.dm-acc__content address { font-style: normal; line-height: 1.6; }
.dm-accpage .woocommerce-message, .dm-accpage .woocommerce-info, .dm-accpage .woocommerce-error { list-style: none; margin: 0 0 18px; padding: 14px 18px 14px 48px; background: var(--white); border-top: 0; border-left: 3px solid var(--ink); outline: 0; }
.dm-accpage .woocommerce-error { border-left-color: var(--sale); }
/* Login / register */
.dm-accpage #customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1040px; margin: 0 auto; }
.dm-accpage #customer_login::before, .dm-accpage #customer_login::after { display: none; }
.dm-accpage #customer_login > div { float: none; width: auto; padding: clamp(20px, 2vw, 32px); background: rgba(255, 255, 255, .55); border: 1px solid #dee0da; }
.dm-accpage #customer_login h2 { margin: 0 0 18px; font-weight: 900; font-stretch: 112%; font-size: 24px; text-transform: uppercase; }
.dm-accpage form.login, .dm-accpage form.register { margin: 0; padding: 0; border: 0; display: grid; gap: 14px; }
.dm-accpage form.login .form-row, .dm-accpage form.register .form-row { margin: 0; padding: 0; }
.dm-accpage .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin-right: 16px; }
.dm-accpage .lost_password a { text-decoration: underline; font-size: 14px; }
.dm-accpage form.login > .woocommerce-form-login > * { vertical-align: middle; }
.dm-accpage .show-password-input { top: 50%; transform: translateY(-50%); }
@media (max-width: 1200px) {
.dm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-dash { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.dm-acc { grid-template-columns: 1fr; }
.dm-acc__nav { position: static; }
.dm-acc__nav ul { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
.dm-acc__nav ul::-webkit-scrollbar { display: none; }
.dm-acc__nav a { white-space: nowrap; padding: 10px 12px; font-size: 14.5px; gap: 8px; background: rgba(255, 255, 255, .5); }
.dm-acc__nav .dm-icon { width: 18px; height: 18px; }
.dm-acc-hero__media { inset: 0 0 0 30%; opacity: .55; }
.dm-accpage #customer_login { grid-template-columns: 1fr; }
.dm-acc-wish--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.dm-stats { gap: 10px; }
.dm-stats a { padding: 14px; gap: 10px; }
.dm-stats .dm-stats__go { display: none; }
.dm-orow { grid-template-columns: 72px minmax(0, 1fr); row-gap: 10px; }
.dm-orow .dm-pill { justify-self: start; grid-column: 2; }
.dm-orow__btn { grid-column: 1 / -1; }
.dm-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-acc__content .woocommerce-address-fields__field-wrapper .dm-col-6,
.dm-acc__content .woocommerce-address-fields__field-wrapper .dm-col-4,
.dm-acc__content .woocommerce-EditAccountForm .form-row-first,
.dm-acc__content .woocommerce-EditAccountForm .form-row-last { grid-column: span 12; }
}
/* Checkout: beat WooCommerce's default form + table styles */
.dm-copage .dm-review.shop_table { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.dm-copage .form-row input.input-text,
.dm-accpage .form-row input.input-text { height: 46px; padding: 0 14px; line-height: normal; }
.dm-copage .form-row.woocommerce-validated input.input-text,
.dm-accpage .form-row.woocommerce-validated input.input-text,
.dm-copage .form-row.woocommerce-validated .select2-selection { border-color: #ced0ca; }
.dm-copage .form-row.woocommerce-invalid input.input-text,
.dm-copage .form-row.woocommerce-invalid .select2-selection { border-color: var(--sale); }
.dm-co__trust strong { letter-spacing: .02em; }
.dm-copage .woocommerce-order { max-width: 980px; }
.dm-copage .woocommerce-order-overview { list-style: none; margin: 0 0 24px; padding: 18px; display: flex; flex-wrap: wrap; gap: 12px 32px; background: rgba(255, 255, 255, .5); border: 1px solid #dee0da; }
.dm-copage .woocommerce-order-overview li { margin: 0; padding: 0; border: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.dm-copage .woocommerce-order-overview strong { display: block; margin-top: 4px; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.dm-copage .woocommerce-order-details,
.dm-copage .woocommerce-customer-details { padding: clamp(18px, 1.6vw, 24px); margin: 0 0 18px; background: rgba(255, 255, 255, .5); border: 1px solid #dee0da; }
.dm-copage .woocommerce-order h2 { font-weight: 900; font-stretch: 110%; font-size: 18px; text-transform: uppercase; margin: 0 0 12px; }
.dm-copage .woocommerce-order table.shop_table { width: 100%; border: 0; border-collapse: collapse; }
.dm-copage .woocommerce-order table.shop_table th,
.dm-copage .woocommerce-order table.shop_table td { padding: 12px 6px; border-top: 1px solid #e4e6e0; text-align: left; }
.dm-copage .woocommerce-order address { font-style: normal; line-height: 1.6; border: 0; padding: 0; }
.dm-copage .woocommerce-thankyou-order-received { font-size: 18px; font-weight: 600; margin: 0 0 18px; }
@media (max-width: 900px) {
.dm-acc { grid-template-columns: minmax(0, 1fr); }
.dm-acc__nav { min-width: 0; max-width: 100%; }
}
@media (max-width: 1100px) {
.dm-co { grid-template-columns: minmax(0, 1fr); }
.dm-co__main, .dm-co__side, .dm-co__card, #customer_details { min-width: 0; }
}
@media (max-width: 640px) {
.dm-acc-hero__media { inset: 0 0 0 20%; opacity: .28; }
}
/* --------------------------------------------------------------------------
Product card v2: size chips + add-to-cart states
-------------------------------------------------------------------------- */
.dm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dm-chip {
min-width: 40px;
height: 32px;
padding: 0 8px;
border: 1px solid #cccec8;
background: var(--white);
font-size: 13px;
font-weight: 500;
color: var(--ink);
transition: border-color .2s, background-color .2s, color .2s;
}
.dm-chip:hover { border-color: var(--ink); }
.dm-chip[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.dm-chip:disabled { color: #b0baa0; background: #eff1eb; text-decoration: line-through; pointer-events: none; }
.is-needsize .dm-chips { animation: dm-shake .45s var(--ease); }
.is-needsize .dm-chip:not(:disabled) { border-color: var(--sale); }
@keyframes dm-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.dm-card .dm-card__buy { margin-top: 14px; }
.dm-card .dm-atc,
.dm-atc {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
height: clamp(46px, 3.3vw, 52px);
background: var(--ink);
color: var(--white);
border: 0;
border-radius: 2px;
font-family: var(--f-mono);
font-weight: 500;
font-size: clamp(13px, .95vw, 15px);
letter-spacing: .12em;
text-transform: uppercase;
transition: background-color .3s var(--ease), color .3s;
}
.dm-card:hover .dm-atc, .dm-atc:hover { background: #2b2b2b; color: var(--white); }
.dm-atc .dm-icon, .dm-atc > .dm-icon { position: static; width: 20px; height: 20px; stroke-width: 1.6; }
.dm-atc__ico, .dm-atc__spin, .dm-atc__ok { display: inline-flex; }
.dm-atc__spin, .dm-atc__ok { display: none; }
.dm-atc__spin { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--white); border-radius: 50%; animation: dm-spin .7s linear infinite; }
.dm-atc.is-busy { background: #5e5a55 !important; pointer-events: none; }
.dm-atc.is-busy .dm-atc__ico { display: none; }
.dm-atc.is-busy .dm-atc__spin { display: inline-flex; }
.dm-atc.is-done { background: #4b5a36 !important; }
.dm-atc.is-done .dm-atc__ico { display: none; }
.dm-atc.is-done .dm-atc__ok { display: inline-flex; animation: dm-pop .4s var(--ease); }
.dm-atc.is-done .dm-atc__ok .dm-icon { stroke-width: 2.4; }
@keyframes dm-pop { from { transform: scale(.3); opacity: 0; } }
.dm-atc.is-disabled { background: #e0e2dc; color: var(--muted); }
/* Flying product photo */
.dm-fly {
position: fixed;
z-index: 200;
object-fit: cover;
border: 3px solid var(--white);
border-radius: 4px;
box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
pointer-events: none;
transform-origin: center;
will-change: transform, opacity;
}
/* Cart icon bounce with a small burst */
.dm-cart.is-bounce > .dm-icon,
.dm-cart.is-bounce .dm-bottombar__bag { animation: dm-bounce .8s var(--ease); }
.dm-cart.is-bounce .dm-cart-count { animation: dm-bump .6s var(--ease) .15s; }
.dm-cart { position: relative; }
.dm-cart::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 58px; height: 58px;
margin: -29px 0 0 -29px;
border-radius: 50%;
background:
linear-gradient(#9aa48a, #9aa48a) 50% 0 / 2px 9px no-repeat,
linear-gradient(#9aa48a, #9aa48a) 50% 100% / 2px 9px no-repeat,
linear-gradient(#9aa48a, #9aa48a) 0 50% / 9px 2px no-repeat,
linear-gradient(#9aa48a, #9aa48a) 100% 50% / 9px 2px no-repeat;
opacity: 0;
transform: scale(.5) rotate(45deg);
pointer-events: none;
}
.dm-cart.is-bounce::after { animation: dm-burst .7s var(--ease) .2s; }
@keyframes dm-bounce { 0% { transform: scale(1); } 30% { transform: scale(1.28) rotate(-8deg); } 55% { transform: scale(.92) rotate(4deg); } 75% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes dm-burst { 0% { opacity: 1; transform: scale(.5) rotate(45deg); } 100% { opacity: 0; transform: scale(1.35) rotate(45deg); } }
/* --------------------------------------------------------------------------
Toast
-------------------------------------------------------------------------- */
.dm-toasts { position: fixed; z-index: 120; top: calc(var(--header-h) + 18px); right: clamp(12px, 2vw, 28px); display: grid; gap: 10px; width: min(380px, calc(100vw - 24px)); pointer-events: none; }
.dm-toast {
display: grid;
grid-template-columns: auto auto 1fr auto auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--white);
border-radius: 4px;
box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .35);
opacity: 0;
transform: translateY(-10px);
transition: opacity .3s var(--ease), transform .35s var(--ease);
pointer-events: auto;
}
.dm-toast.is-in { opacity: 1; transform: none; }
.dm-toast__ok { width: 26px; height: 26px; border-radius: 50%; background: #2f8a3b; position: relative; }
.dm-toast__ok::after { content: ""; position: absolute; left: 9px; top: 6px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dm-toast__img { width: 46px; height: 46px; object-fit: cover; border-radius: 2px; }
.dm-toast__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.dm-toast__text small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-toast__link { font-size: 12.5px; text-decoration: underline; white-space: nowrap; }
.dm-toast__x { font-size: 22px; line-height: 1; color: var(--ink-2); padding: 0 2px; }
/* --------------------------------------------------------------------------
Cart sidebar
-------------------------------------------------------------------------- */
.dm-cartdrawer { position: fixed; inset: 0; z-index: 110; }
.dm-cartdrawer[hidden] { display: none; }
.dm-cartdrawer__backdrop { position: absolute; inset: 0; background: rgba(13, 13, 13, .45); opacity: 0; transition: opacity .35s var(--ease); }
.dm-cartdrawer__panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(100vw, 420px);
background: var(--paper);
transform: translateX(100%);
transition: transform .45s var(--ease);
box-shadow: -20px 0 50px -30px rgba(0, 0, 0, .5);
outline: 0;
}
.dm-cartdrawer.is-open .dm-cartdrawer__backdrop { opacity: 1; }
.dm-cartdrawer.is-open .dm-cartdrawer__panel { transform: none; }
.dm-cartdrawer__body { height: 100%; display: flex; flex-direction: column; overflow-y: auto; padding: 22px 22px 18px; overscroll-behavior: contain; }
.dm-cartdrawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dm-cartdrawer__head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.dm-cartdrawer__x { width: 36px; height: 36px; display: grid; place-items: center; margin-right: -8px; }
.dm-cartdrawer__x .dm-icon { width: 22px; height: 22px; }
.dm-cartdrawer__empty { margin: auto 0; text-align: center; color: var(--ink-2); }
.dm-cartdrawer__empty > .dm-icon { width: 48px; height: 48px; stroke-width: 1.1; }
.dm-ship { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dm-ship p { margin: 0 0 8px; font-size: 14px; }
.dm-ship__bar { height: 6px; border-radius: 6px; background: #dadcd6; overflow: hidden; }
.dm-ship__bar span { display: block; height: 100%; background: var(--ink); border-radius: 6px; transition: width .6s var(--ease); }
.dm-ship__nums { display: block; margin-top: 6px; text-align: right; font-size: 12.5px; color: var(--muted); }
.dm-dl { list-style: none; margin: 0; padding: 0; }
.dm-dl__item { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: opacity .2s; }
.dm-dl__item.is-busy { opacity: .45; pointer-events: none; }
.dm-dl__img { display: block; aspect-ratio: 90 / 96; overflow: hidden; background: #d3d5cf; }
.dm-dl__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.dm-dl__info { min-width: 0; }
.dm-dl__name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.dm-dl__var { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.dm-dl__price { margin: 6px 0 8px; font-size: 14px; font-weight: 700; }
.dm-dl__rm { align-self: center; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-2); }
.dm-dl__rm:hover { color: var(--sale); }
.dm-dl__rm .dm-icon { width: 18px; height: 18px; }
.dm-dl .dm-qty--sm { height: 32px; }
.dm-dl .dm-qty__btn { width: 32px; }
.dm-dsug { padding: 16px 0 6px; }
.dm-dsug h3 { margin: 0 0 12px; font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.dm-dsug ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dm-dsug__item { position: relative; min-width: 0; }
.dm-dsug__img { display: block; aspect-ratio: 1; overflow: hidden; background: #d3d5cf; }
.dm-dsug__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.dm-dsug__name { margin: 6px 0 2px; font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-dsug__row { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; }
.dm-atc--mini { width: 24px !important; height: 24px !important; padding: 0; background: var(--white) !important; color: var(--ink) !important; border: 1px solid #c2ccb2 !important; font-family: var(--f-sans); font-size: 16px; letter-spacing: 0; gap: 0; }
.dm-atc--mini .dm-atc__ico { display: none; }
.dm-atc--mini.is-busy .dm-atc__label, .dm-atc--mini.is-done .dm-atc__label { display: none; }
.dm-atc--mini .dm-atc__spin { width: 12px; height: 12px; border-color: #ccc; border-top-color: var(--ink); }
.dm-atc--mini.is-done { background: #4b5a36 !important; color: var(--white) !important; }
.dm-atc--mini .dm-icon { width: 14px !important; height: 14px !important; }
.dm-chips--mini { display: none; gap: 4px; margin-top: 6px; }
.dm-chips--mini .dm-chip { min-width: 0; flex: 1 1 26%; height: 24px; padding: 0 2px; font-size: 11px; }
.dm-dsug__item.is-picking .dm-chips--mini { display: flex; }
.dm-dsug__item .dm-card__msg { margin: 4px 0 0; font-size: 11px; }
.dm-cartdrawer__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.dm-cartdrawer__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 15px; }
.dm-cartdrawer__row strong { font-size: 17px; }
.dm-cartdrawer__row--muted { font-size: 14px; color: var(--ink-2); }
.dm-cartdrawer__cta {
display: flex; align-items: center; justify-content: center; gap: 12px;
height: 50px; margin-top: 14px;
background: var(--ink); color: var(--white);
font-family: var(--f-mono); font-weight: 500; font-size: 14.5px; letter-spacing: .12em; text-transform: uppercase;
border-radius: 2px;
}
.dm-cartdrawer__cta:hover { background: #2b2b2b; }
.dm-cartdrawer__cta .dm-icon { width: 18px; height: 18px; }
.dm-cartdrawer__empty .dm-cartdrawer__cta { display: inline-flex; padding: 0 24px; }
.dm-cartdrawer__ghost { display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 10px; border: 1px solid var(--ink); font-family: var(--f-mono); font-weight: 500; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.dm-cartdrawer__ghost:hover { background: var(--ink); color: var(--white); }
.dm-cartdrawer__trust { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dm-cartdrawer__trust li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.25; }
.dm-cartdrawer__trust .dm-icon { flex: none; width: 20px; height: 20px; stroke-width: 1.4; }
.dm-cartdrawer__trust span { display: flex; flex-direction: column; }
.dm-cartdrawer__trust small { color: var(--muted); font-size: 10.5px; }
/* --------------------------------------------------------------------------
Mobile bottom bar
-------------------------------------------------------------------------- */
.dm-bottombar { display: none; }
@media (max-width: 900px) {
body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
.dm-bottombar {
position: fixed; z-index: 90; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
display: grid; grid-template-columns: repeat(4, 1fr);
height: 60px;
background: rgba(255, 255, 255, .96);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 30px;
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35);
}
.dm-bottombar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--ink-2); }
.dm-bottombar a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.dm-bottombar .dm-icon { width: 22px; height: 22px; stroke-width: 1.5; }
.dm-bottombar__bag { position: relative; display: inline-flex; }
.dm-bottombar .dm-cart-count { top: -8px; right: -12px; min-width: 18px; height: 18px; line-height: 14px; font-size: 10px; border-color: var(--white); }
.dm-bottombar__cart::after { width: 44px; height: 44px; margin: -30px 0 0 -22px; }
.dm-toasts { top: auto; bottom: calc(82px + env(safe-area-inset-bottom)); left: 12px; right: 12px; width: auto; }
.dm-cartdrawer__panel { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
.dm-cart.is-bounce > .dm-icon, .dm-cart.is-bounce .dm-bottombar__bag, .dm-cart.is-bounce::after, .is-needsize .dm-chips { animation: none !important; }
}
/* --------------------------------------------------------------------------
Quick view
-------------------------------------------------------------------------- */
.dm-qvbtn {
position: absolute;
left: 12px; right: 12px; bottom: 12px;
z-index: 2;
display: flex; align-items: center; justify-content: center; gap: 10px;
height: 42px;
background: rgba(255, 255, 255, .94);
color: var(--ink);
font-family: var(--f-mono); font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
border-radius: 2px;
opacity: 0;
transform: translateY(10px);
transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .2s;
}
.dm-qvbtn .dm-icon { width: 18px; height: 18px; }
.dm-card:hover .dm-qvbtn, .dm-qvbtn:focus-visible { opacity: 1; transform: none; }
.dm-qvbtn:hover { background: var(--ink); color: var(--white); }
@media (hover: none) {
.dm-qvbtn { left: auto; right: 10px; bottom: 10px; width: 40px; height: 40px; padding: 0; border-radius: 50%; opacity: 1; transform: none; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .4); }
.dm-qvbtn span { display: none; }
}
.dm-qv { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px; }
.dm-qv[hidden] { display: none; }
.dm-qv__backdrop { position: absolute; inset: 0; background: rgba(13, 13, 13, .55); opacity: 0; transition: opacity .3s var(--ease); }
.dm-qv__panel {
position: relative;
width: min(1080px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--paper);
border-radius: 6px;
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
padding: clamp(18px, 2vw, 30px);
opacity: 0;
transform: translateY(18px) scale(.98);
transition: opacity .3s var(--ease), transform .35s var(--ease);
outline: 0;
}
.dm-qv.is-open .dm-qv__backdrop { opacity: 1; }
.dm-qv.is-open .dm-qv__panel { opacity: 1; transform: none; }
.dm-qv.is-loading .dm-qv__body { min-height: 420px; background: linear-gradient(90deg, #e5e7e1 25%, #eff1eb 50%, #e5e7e1 75%) 0 0 / 200% 100%; animation: dm-shimmer 1.2s linear infinite; border-radius: 4px; }
@keyframes dm-shimmer { to { background-position: -200% 0; } }
.dm-qv__x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
.dm-qv__x:hover { background: #e3e5df; }
.dm-qv__x .dm-icon { width: 24px; height: 24px; }
.dm-qv__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); }
.dm-qv__gallery { display: grid; grid-template-columns: 1fr; gap: 14px; }
.dm-qv__gallery.has-thumbs { grid-template-columns: 84px minmax(0, 1fr); }
.dm-qv__thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 580px; overflow-y: auto; }
.dm-qv__thumbs button { display: block; width: 100%; aspect-ratio: 84 / 92; overflow: hidden; border: 1px solid transparent; border-radius: 3px; opacity: .7; transition: opacity .2s, border-color .2s; }
.dm-qv__thumbs button.is-active, .dm-qv__thumbs button:hover { opacity: 1; border-color: var(--ink); }
.dm-qv__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.dm-qv__main { position: relative; aspect-ratio: 470 / 580; overflow: hidden; background: #d3d5cf; border-radius: 3px; }
.dm-qv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; opacity: 0; transition: opacity .35s var(--ease), transform .3s var(--ease); }
.dm-qv__img.is-active { opacity: 1; }
.dm-qv__main.is-zoom { cursor: zoom-out; }
.dm-qv__main.is-zoom .dm-qv__img.is-active { transform: scale(1.9); transform-origin: var(--zx, 50%) var(--zy, 30%); }
.dm-qv__main .dm-badge { top: 16px; left: 16px; }
.dm-qv__nav { position: absolute; top: 50%; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center; border-radius: 50%; background: var(--white); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .4); }
.dm-qv__nav--prev { left: 12px; }
.dm-qv__nav--next { right: 12px; }
.dm-qv__nav .dm-icon { width: 18px; height: 18px; stroke-width: 2; }
.dm-qv__zoom { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--white); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .4); }
.dm-qv__zoom .dm-icon { width: 18px; height: 18px; stroke-width: 1.8; }
.dm-qv__info { min-width: 0; padding-right: 30px; }
.dm-qv__title { margin: 4px 0 0; font-size: clamp(20px, 1.7vw, 25px); font-weight: 700; line-height: 1.2; }
.dm-qv__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; font-size: 22px; font-weight: 800; }
.dm-qv__price del { font-size: 16px; font-weight: 400; color: var(--muted); }
.dm-qv__price ins { text-decoration: none; }
.dm-qv__off { padding: 3px 9px; background: #e6e8e2; color: #b3261e; font-size: 13px; font-weight: 600; border-radius: 2px; letter-spacing: .03em; }
.dm-qv__rating { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; }
.dm-qv__rating .dm-star { width: 16px; height: 16px; }
.dm-qv__rating .dm-star.is-on { background: #e5a322; }
.dm-qv__desc { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.dm-qv__desc p { margin: 0; }
.dm-qv__lights { list-style: none; margin: 18px 0 0; padding: 0 0 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-bottom: 1px solid var(--line); }
.dm-qv__lights li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.3; }
.dm-qv__lights .dm-icon { width: 28px; height: 28px; stroke-width: 1.3; }
.dm-qv__opt { margin-top: 18px; }
.dm-qv__label { margin: 0 0 10px; font-size: 15px; font-weight: 500; }
.dm-qv__label span { font-weight: 400; }
.dm-qv__labelrow { display: flex; justify-content: space-between; align-items: baseline; }
.dm-qv__guide { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.dm-qv__guide .dm-icon { width: 16px; height: 16px; }
.dm-swatches--lg { gap: 12px; flex-wrap: wrap; }
.dm-swatches--lg .dm-swatch { width: 32px; height: 32px; }
.dm-chips--lg .dm-chip { min-width: 52px; height: 36px; font-size: 14px; }
.dm-qv__buy { display: grid; gap: 10px; margin-top: 20px; }
.dm-qv__buy .dm-atc { height: 48px; }
.dm-qv__now { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border: 1px solid var(--ink); background: var(--white); font-family: var(--f-mono); font-weight: 500; font-size: 14.5px; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; transition: background-color .2s, color .2s; }
.dm-qv__now:hover { background: var(--ink); color: var(--white); }
.dm-qv__now .dm-icon { width: 16px; height: 16px; }
.dm-qv__more { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); }
.dm-qv__more .dm-icon { width: 14px; height: 14px; }
.dm-qv__soldout { margin: 0; padding: 14px; text-align: center; background: #e5e7e1; font-family: var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.dm-qv__trust { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dm-qv__trust li { display: flex; align-items: center; gap: 8px; }
.dm-qv__trust .dm-icon { flex: none; width: 26px; height: 26px; stroke-width: 1.3; }
.dm-qv__trust span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--ink-2); }
.dm-qv__trust strong { font-size: 12px; color: var(--ink); font-weight: 600; }
.dm-qv .dm-card__msg { margin: 8px 0 0; }
@media (max-width: 900px) {
.dm-qv { padding: 0; align-items: end; }
.dm-qv__panel { max-height: 92vh; border-radius: 14px 14px 0 0; padding: 16px 16px 24px; transform: translateY(40px); }
.dm-qv__grid { grid-template-columns: 1fr; }
.dm-qv__gallery.has-thumbs { grid-template-columns: 1fr; }
.dm-qv__thumbs { order: 2; flex-direction: row; max-height: none; overflow-x: auto; }
.dm-qv__thumbs button { width: 64px; }
.dm-qv__main { aspect-ratio: 4 / 4.2; }
.dm-qv__info { padding-right: 0; }
.dm-qv__lights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-qv__trust { grid-template-columns: 1fr; }
.dm-qv__x { background: var(--white); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .4); }
}
/* --------------------------------------------------------------------------
Shop / category listing
-------------------------------------------------------------------------- */
.dm-shophero {
position: relative;
display: flex;
align-items: center;
min-height: clamp(220px, 17vw, 262px);
overflow: hidden;
background: linear-gradient(90deg, #eaece6 0, #dee0da 45%, #bdc7ad 100%);
isolation: isolate;
}
.dm-shophero__media { position: absolute; inset: 0 0 0 40%; z-index: -1; }
.dm-shophero__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 60% 22%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%);
mask-image: linear-gradient(90deg, transparent 0, #000 32%);
}
.dm-shophero__copy { padding: 26px var(--gutter); max-width: 760px; }
.dm-shophero__crumbs { margin: 0 0 14px; font-family: var(--f-sans); letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--ink-2); align-items: center; }
.dm-shophero__crumbs .dm-icon { width: 13px; height: 13px; stroke-width: 2; }
.dm-shophero__title { margin: 0; font-weight: 900; font-stretch: 116%; font-size: clamp(42px, 4.6vw, 76px); line-height: .9; letter-spacing: -.015em; text-transform: uppercase; }
.dm-shophero__title .is-tan { color: #7a7a7a; }
.dm-shophero__text { margin: 14px 0 0; max-width: 44ch; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.45; color: var(--ink-2); }
.dm-shophero__feats { list-style: none; margin: 18px 0 0; padding: 0; display: flex; }
.dm-shophero__feats li { display: flex; align-items: center; gap: 10px; padding: 0 18px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; max-width: 16ch; }
.dm-shophero__feats li:first-child { padding-left: 0; }
.dm-shophero__feats li + li { border-left: 1px solid rgba(0, 0, 0, .2); }
.dm-shophero__feats .dm-icon { flex: none; width: 28px; height: 28px; stroke-width: 1.3; }
.dm-shophero__script {
position: absolute;
right: clamp(20px, 3vw, 56px);
top: 50%;
margin: 0;
font-family: "Mrs Saint Delafield", "Brush Script MT", cursive;
font-size: clamp(44px, 3.8vw, 66px);
line-height: .82;
color: var(--white);
max-width: 3.4em;
transform: translateY(-50%) rotate(-12deg);
text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}
.dm-shop { display: grid; grid-template-columns: 282px minmax(0, 1fr); max-width: 1920px; margin: 0 auto; }
.dm-filters { padding: 24px clamp(20px, 2.4vw, 40px) 40px var(--gutter); border-right: 1px solid var(--line); }
.dm-filters__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dm-filters__head h2 { margin: 0; font-family: var(--f-mono); font-weight: 500; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; }
.dm-filters__head a { font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.dm-filters__x, .dm-filters__apply { display: none !important; }
.dm-fgroup { border-bottom: 1px solid var(--line); padding: 14px 0; }
.dm-fgroup summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; }
.dm-fgroup summary::-webkit-details-marker { display: none; }
.dm-fgroup summary .dm-icon { width: 14px; height: 14px; stroke-width: 2; transform: rotate(90deg); transition: transform .25s var(--ease); }
.dm-fgroup[open] summary .dm-icon { transform: rotate(-90deg); }
.dm-fchecks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.dm-fchecks label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; color: var(--ink-2); }
.dm-fchecks input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); }
.dm-fchecks input:checked + span { color: var(--ink); font-weight: 500; }
.dm-fchecks small { color: var(--muted); font-size: 13px; }
.dm-fcolors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.dm-fcolor { position: relative; cursor: pointer; }
.dm-fcolor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dm-fcolor span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); transition: box-shadow .2s; }
.dm-fcolor input:checked + span { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.dm-fcolor input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.dm-price { margin-top: 10px; }
.dm-price__vals { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.dm-price__track { position: relative; height: 18px; }
.dm-price__track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: #ced0ca; }
.dm-price__fill { position: absolute; top: 8px; height: 2px; background: var(--ink); }
.dm-price__track input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dm-price__track input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); cursor: pointer; }
.dm-price__track input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); cursor: pointer; }
.dm-price__track input::-webkit-slider-runnable-track { background: none; }
.dm-shop__main { min-width: 0; padding: 22px var(--gutter) 60px clamp(20px, 2vw, 30px); }
.dm-shop__bar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.dm-shop__count { margin: 0 auto 0 0; font-size: 15.5px; }
.dm-shop__filterbtn { display: none; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid #c2ccb2; font-size: 14px; background: var(--white); }
.dm-shop__filterbtn .dm-icon { width: 18px; height: 18px; }
.dm-shop__filterbtn b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--ink); color: var(--white); font-size: 11px; }
.dm-shop__sort { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.dm-shop__sort select { height: 40px; min-width: 150px; padding: 0 34px 0 12px; border: 1px solid #c2ccb2; background: var(--white) url("data:image/svg+xml;utf8,") no-repeat right 12px center; font-size: 14.5px; color: var(--ink); -webkit-appearance: none; appearance: none; border-radius: 2px; cursor: pointer; }
.dm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.dm-grid .dm-card__media { aspect-ratio: 260 / 248; }
body.is-filtering .dm-grid { opacity: .45; transition: opacity .2s; }
.dm-shop__empty { padding: 48px 20px; text-align: center; background: rgba(255, 255, 255, .5); border: 1px solid #dee0da; }
.dm-shop__empty .dm-cartdrawer__ghost { display: inline-flex; padding: 0 26px; }
.dm-pages { margin-top: 32px; display: flex; justify-content: center; }
.dm-pages ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.dm-pages a, .dm-pages span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border: 1px solid #ced0ca; font-size: 14.5px; }
.dm-pages .current { background: var(--ink); color: var(--white); border-color: var(--ink); }
.dm-pages a:hover { border-color: var(--ink); }
.dm-pages .dm-icon { width: 16px; height: 16px; stroke-width: 2; }
@media (max-width: 1280px) { .dm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
.dm-shop { grid-template-columns: minmax(0, 1fr); }
.dm-shop__main { padding-left: var(--gutter); }
.dm-shop__filterbtn { display: inline-flex; }
.dm-filters {
position: fixed; z-index: 115; top: 0; bottom: 0; left: 0;
width: min(88vw, 360px);
overflow-y: auto;
background: var(--paper);
border-right: 0;
padding: 18px 20px 24px;
transform: translateX(-100%);
transition: transform .4s var(--ease);
}
.dm-filters.is-open { transform: none; box-shadow: 20px 0 50px -30px rgba(0, 0, 0, .5); }
.dm-filters__x { display: grid !important; place-items: center; width: 36px; height: 36px; }
.dm-filters__x .dm-icon { width: 20px; height: 20px; }
.dm-filters__apply { display: flex !important; width: 100%; }
.dm-filters__backdrop { position: fixed; inset: 0; z-index: 114; background: rgba(13, 13, 13, .45); }
.dm-filters__backdrop[hidden] { display: none; }
.dm-shophero__media { inset: 0 0 0 25%; opacity: .5; }
.dm-shophero__script { display: none; }
}
@media (max-width: 700px) {
.dm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dm-grid .dm-card__body { padding: 10px; }
.dm-grid .dm-swatches { display: none; }
.dm-grid .dm-chips { gap: 4px; }
.dm-grid .dm-chip { min-width: 0; flex: 1 1 18%; height: 28px; padding: 0 2px; font-size: 11.5px; }
.dm-grid .dm-atc { font-size: 11.5px; letter-spacing: .06em; gap: 6px; }
.dm-grid .dm-atc__ico { display: none; }
.dm-shop__sort span { display: none; }
.dm-shop__sort select { min-width: 0; }
.dm-shop__bar { flex-wrap: wrap; }
.dm-shop__count { flex-basis: 100%; }
.dm-shophero__feats { flex-wrap: wrap; row-gap: 10px; }
.dm-shophero__feats li { padding: 0 12px; }
}
.dm-shophero__media { inset: 0 0 0 36%; }
.dm-shophero__media img { object-position: 50% 30%; }
.dm-shophero__script { font-size: clamp(38px, 3vw, 54px); right: clamp(14px, 1.6vw, 30px); top: 58%; }
.dm-shophero__feats li { max-width: 18ch; }
@media (max-width: 700px) {
.dm-grid .dm-chips { flex-wrap: nowrap; }
.dm-grid .dm-chip { flex: 1 1 0; min-width: 0; }
.dm-grid .dm-card__title { font-size: 14.5px; }
}
.dm-shophero__title .is-tan, .dm-split__title .is-tan { white-space: nowrap; }
/* --------------------------------------------------------------------------
Single product page
-------------------------------------------------------------------------- */
.dm-pdp { padding-top: 18px; padding-bottom: 60px; max-width: 1440px; }
.dm-pdp__crumbs { font-family: var(--f-sans); text-transform: none; letter-spacing: 0; font-size: 13px; align-items: center; margin-bottom: 18px; }
.dm-pdp__crumbs .dm-icon { width: 12px; height: 12px; stroke-width: 2; }
.dm-pdp__top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.dm-pdp__gallery { display: grid; grid-template-columns: 1fr; gap: 14px; }
.dm-pdp__gallery.has-thumbs { grid-template-columns: 88px minmax(0, 1fr); }
.dm-pdp__thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dm-pdp__thumbs button { display: block; width: 100%; aspect-ratio: 88 / 92; overflow: hidden; border: 2px solid transparent; border-radius: 3px; opacity: .75; transition: opacity .2s, border-color .2s, transform .25s var(--ease); }
.dm-pdp__thumbs button:hover { opacity: 1; transform: translateX(3px); }
.dm-pdp__thumbs button.is-active { opacity: 1; border-color: #c44a3f; }
.dm-pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.dm-pdp__stage { position: relative; aspect-ratio: 660 / 620; overflow: hidden; background: #d3d5cf; border-radius: 3px; }
.dm-pdp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; opacity: 0; transform: scale(1.03); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.dm-pdp__img.is-active { opacity: 1; transform: none; }
.dm-pdp__stage.is-zoom { cursor: zoom-out; }
.dm-pdp__stage.is-zoom .dm-pdp__img.is-active { transform: scale(2); transform-origin: var(--zx, 50%) var(--zy, 35%); transition: transform .2s; }
.dm-pdp__script {
position: absolute; z-index: 2; left: 5%; top: 7%; margin: 0;
font-family: "Mrs Saint Delafield", "Brush Script MT", cursive;
font-size: clamp(40px, 4vw, 66px); line-height: .85; color: rgba(255, 255, 255, .92);
max-width: 5em; transform: rotate(-8deg); pointer-events: none;
text-shadow: 0 2px 20px rgba(0, 0, 0, .25);
}
.dm-pdp__stage.is-zoom .dm-pdp__script { opacity: 0; }
.dm-cmp { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.dm-cmp__clip { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut, 62%)); transition: clip-path .5s var(--ease); }
.dm-cmp.is-used .dm-cmp__clip { transition: none; }
.dm-cmp__handle { pointer-events: auto; }
.dm-cmp[hidden] { display: none; }
.dm-cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dm-cmp::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--cut, 62%); width: 2px; margin-left: -1px; background: var(--white); z-index: 1; }
.dm-cmp__handle {
position: absolute; z-index: 2; top: 50%; left: var(--cut, 62%);
width: 44px; height: 44px; margin: -22px 0 0 -22px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: var(--ink); color: var(--white);
box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5); cursor: ew-resize; touch-action: none;
}
.dm-cmp__handle .dm-icon { width: 13px; height: 13px; stroke-width: 2.4; }
.dm-cmp.is-used { transition: none; }
.dm-cmp.is-used .dm-cmp__handle, .dm-cmp.is-used::before { transition: none; }
.dm-cmp__handle, .dm-cmp::before { transition: left .5s var(--ease); }
.dm-cmp__hint {
position: absolute; z-index: 2; right: 5%; bottom: 6%; margin: 0; max-width: 11em;
font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(22px, 1.9vw, 30px); line-height: 1; color: var(--ink);
transform: rotate(-6deg);
}
.dm-360 { position: absolute; inset: 0; z-index: 4; background: #e2e4de; cursor: grab; touch-action: pan-y; }
.dm-360[hidden] { display: none; }
.dm-360__img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.dm-360__hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; background: rgba(0, 0, 0, .6); color: var(--white); border-radius: 20px; font-size: 13px; }
.dm-360__hint .dm-icon { width: 16px; height: 16px; }
.dm-pdp__stage .dm-qv__zoom { z-index: 5; top: 14px; right: 14px; bottom: auto; }
.dm-pdp__tiles { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dm-pdp__gallery.has-thumbs .dm-pdp__tiles { grid-column: 2; }
.dm-pdp__tiles button { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; font-size: 13.5px; font-weight: 500; }
.dm-pdp__tiles img { width: 100%; aspect-ratio: 138 / 94; object-fit: cover; border-radius: 3px; transition: transform .35s var(--ease), box-shadow .3s; }
.dm-pdp__tiles button:hover img, .dm-pdp__tiles button.is-active img { transform: translateY(-3px); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5); }
.dm-pdp__info { position: sticky; top: calc(var(--header-h) + 20px); }
.dm-pdp__badge { display: inline-block; padding: 5px 12px; border-radius: 12px; background: var(--ink); color: var(--white); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.dm-pdp__title { margin: 14px 0 0; font-size: clamp(22px, 1.7vw, 28px); font-weight: 700; line-height: 1.2; }
.dm-pdp__price { font-size: 26px; }
.dm-pdp__short { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.dm-pdp__short p { margin: 0; }
.dm-pdp__stock { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; }
.dm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.dm-dot.is-ok { background: #2f8a3b; box-shadow: 0 0 0 4px rgba(47, 138, 59, .15); }
.dm-pdp__ship { margin-left: 28px; color: var(--ink-2); }
.dm-pdp__buy { display: grid; grid-template-columns: 1fr 52px; gap: 12px; margin-top: 16px; }
.dm-pdp__buy .dm-atc { height: 52px; font-size: 15px; }
.dm-pdp__wish { display: grid; place-items: center; height: 52px; border: 1px solid #c2ccb2; background: var(--white); border-radius: 2px; transition: border-color .2s; }
.dm-pdp__wish:hover { border-color: var(--ink); }
.dm-pdp__wish .dm-icon { width: 24px; height: 24px; }
.dm-pdp__wish[aria-pressed="true"] .dm-icon { fill: var(--sale); stroke: var(--sale); }
.dm-pdp__wish.is-pop { animation: dm-bump .45s var(--ease); }
.dm-pdp__now { width: 100%; margin-top: 10px; }
.dm-pdp__trust { margin-top: 18px; }
.dm-pin { margin-top: 18px; padding: 14px 16px; border: 1px solid #d8dad4; background: rgba(255, 255, 255, .6); border-radius: 3px; }
.dm-pin label { display: block; font-size: 14px; }
.dm-pin__row { display: flex; gap: 10px; margin-top: 6px; }
.dm-pin__row input { flex: 1; min-width: 0; height: 40px; padding: 0 2px; border: 0; border-bottom: 1px solid #c2ccb2; background: transparent; font-size: 15px; letter-spacing: .06em; }
.dm-pin__row input:focus { outline: 0; border-bottom-color: var(--ink); }
.dm-pin__row button { height: 40px; padding: 0 22px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 500; border-radius: 2px; }
.dm-pin__msg { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); }
.dm-pin__msg:empty { display: none; }
.dm-pin__msg.is-ok { color: #2f6b2c; }
.dm-pin__msg.is-error { color: var(--sale); }
/* See it in action + fabric */
.dm-action {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px;
margin: clamp(40px, 5vw, 72px) calc(-1 * var(--gutter)) 0; padding: 24px var(--gutter) 28px;
background: #e5e7e1;
}
.dm-action__main { min-width: 0; }
.dm-action h2 { margin: 0; font-size: 26px; font-weight: 700; }
.dm-action__main > p { margin: 4px 0 16px; color: var(--ink-2); }
.dm-action__track { --cols: 4; --gap: 12px; padding: 0; scroll-padding-inline: 0; }
.dm-action__item { margin: 0; aspect-ratio: 188 / 172; overflow: hidden; border-radius: 3px; }
.dm-action__item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .8s var(--ease); }
.dm-action__item:hover img { transform: scale(1.06); }
.dm-action .dm-carousel__nav { width: 42px; height: 42px; }
.dm-action .dm-carousel__nav--prev { left: -12px; }
.dm-action .dm-carousel__nav--next { right: -12px; }
.dm-fabric { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dm-fabric__card { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 26px; overflow: hidden; background: #111; color: var(--white); border-radius: 3px; min-height: 230px; isolation: isolate; }
.dm-fabric__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .45; }
.dm-fabric__card h3 { margin: 0; font-size: 24px; font-weight: 700; }
.dm-fabric__card p { margin: 6px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .85); }
.dm-fabric__play { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 14px; }
.dm-fabric__play span { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--white); border-radius: 50%; }
.dm-fabric__play .dm-icon { width: 16px; height: 16px; }
.dm-fabric__zoom { position: relative; overflow: hidden; border-radius: 3px; cursor: zoom-in; min-height: 230px; }
.dm-fabric__zoom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); transform-origin: var(--zx, 50%) var(--zy, 50%); }
.dm-fabric__zoom:hover img { transform: scale(1.8); }
.dm-fabric__lens { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--white); border-radius: 50%; color: var(--white); }
.dm-fabric__lens .dm-icon { width: 20px; height: 20px; }
/* Tabs */
.dm-tabs { margin-top: 0; }
.dm-tabs__list { display: flex; justify-content: center; gap: clamp(20px, 5vw, 72px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.dm-tabs__list button { position: relative; padding: 22px 0 18px; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.dm-tabs__list button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.dm-tabs__list button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.dm-tabs__panel { max-width: 860px; margin: 0 auto; padding: 28px 0 8px; }
.dm-tabs__panel ul { padding-left: 20px; line-height: 1.8; color: var(--ink-2); }
.dm-specs { margin: 18px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.dm-specs div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.dm-specs dt { font-weight: 600; }
.dm-specs dd { margin: 0; color: var(--ink-2); }
#panel-reviews #reviews { margin: 0; }
#panel-reviews .woocommerce-Reviews-title { font-size: 18px; }
#panel-reviews .comment-form input[type=text], #panel-reviews .comment-form input[type=email], #panel-reviews .comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #ced0ca; background: var(--white); font-size: 15px; }
#panel-reviews .comment-form .submit { height: 46px; padding: 0 24px; background: var(--ink); color: var(--white); border: 0; font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
#panel-reviews p.stars a { color: #e5a322; }
.dm-pdp__related { margin-top: 48px; }
@media (max-width: 1100px) {
.dm-pdp__top { grid-template-columns: minmax(0, 1fr); }
.dm-pdp__info { position: static; }
.dm-action { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
.dm-pdp__gallery.has-thumbs { grid-template-columns: minmax(0, 1fr); }
.dm-pdp__thumbs { order: 2; flex-direction: row; overflow-x: auto; }
.dm-pdp__thumbs button { width: 64px; flex: none; }
.dm-pdp__gallery.has-thumbs .dm-pdp__tiles { grid-column: 1; order: 3; }
.dm-pdp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-pdp__stage { aspect-ratio: 4 / 4.6; }
.dm-action__track { --cols: 2.2; }
.dm-fabric { grid-template-columns: 1fr; }
.dm-tabs__list { justify-content: flex-start; }
.dm-specs div { grid-template-columns: 100px 1fr; }
}
/* --------------------------------------------------------------------------
Lookbook scroll story
-------------------------------------------------------------------------- */
.dm-lookbook .dm-main { background: #0e0d0c; }
.dm-sst { position: relative; height: calc(var(--scenes) * 100vh); background: #0e0d0c; color: var(--white); }
.dm-sst__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.admin-bar .dm-sst__stage { top: 32px; height: calc(100vh - 32px); }
.dm-scene {
position: absolute; inset: 0;
opacity: 0; visibility: hidden;
transition: opacity .7s var(--ease), visibility 0s linear .7s;
isolation: isolate;
}
.dm-scene.is-active { opacity: 1; visibility: visible; transition: opacity .7s var(--ease), visibility 0s; }
.dm-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0, rgba(0, 0, 0, .35) 42%, rgba(0, 0, 0, .05) 75%), linear-gradient(0deg, rgba(0, 0, 0, .45) 0, transparent 30%); }
.dm-scene__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 65% 25%; transform: scale(calc(1.12 - var(--t, 0) * .12)); will-change: transform; }
.dm-scene__bg--walk { object-position: 60% 40%; transform: translateX(calc(4% - var(--t, 0) * 8%)) scale(1.1); }
.dm-scene__bg--zoom { transform: scale(calc(1 + var(--t, 0) * .35)); transform-origin: 62% 30%; }
.dm-scene__copy { position: absolute; left: var(--gutter); top: 50%; z-index: 2; max-width: 560px; transform: translateY(-50%); }
.dm-scene__copy > * { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.dm-scene.is-active .dm-scene__copy > * { opacity: 1; transform: none; }
.dm-scene.is-active .dm-scene__copy > *:nth-child(2) { transition-delay: .1s; }
.dm-scene.is-active .dm-scene__copy > *:nth-child(3) { transition-delay: .2s; }
.dm-scene.is-active .dm-scene__copy > *:nth-child(4) { transition-delay: .3s; }
.dm-scene .dm-eyebrow { color: rgba(255, 255, 255, .85); letter-spacing: .36em; }
.dm-scene__title { margin: 0; font-weight: 900; font-stretch: 116%; font-size: clamp(44px, 5.8vw, 104px); line-height: .88; letter-spacing: -.01em; text-transform: uppercase; }
.dm-scene__title span, .dm-scene__title em { display: block; font-style: normal; }
.dm-scene__title em, .dm-scene--1 .dm-scene__title span em { display: inline; color: transparent; -webkit-text-stroke: 1.6px var(--white); }
.dm-scene__title--mix em { display: block; }
.dm-scene__title--dark { color: var(--ink); font-size: clamp(38px, 4.6vw, 80px); }
.dm-scene__text { margin: 18px 0 0; max-width: 34ch; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.45; color: rgba(255, 255, 255, .88); }
.dm-scene__btn { display: inline-flex; align-items: center; gap: 12px; height: 50px; margin-top: 28px; padding: 0 26px; background: var(--white); color: var(--ink); font-family: var(--f-mono); font-weight: 500; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; }
.dm-scene__btn .dm-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.dm-scene__btn:hover .dm-icon { transform: translateX(4px); }
.dm-scene__script { position: absolute; z-index: 2; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(44px, 4.4vw, 78px); line-height: .9; color: var(--white); max-width: 5.5em; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .9s var(--ease) .35s, transform 1s var(--ease) .35s; }
.dm-scene__script::after { content: ""; display: block; width: 1.4em; height: 2px; margin: .2em 0 0 1.8em; background: currentColor; transform: rotate(-10deg); }
.dm-scene__script--r { right: clamp(20px, 6vw, 110px); top: 42%; transform: translateY(20px) rotate(-12deg); }
.dm-scene__script--l { left: var(--gutter); top: 45%; transform: translateY(20px) rotate(-8deg); }
.dm-scene.is-active .dm-scene__script--r { opacity: 1; transform: rotate(-12deg); }
.dm-scene.is-active .dm-scene__script--l { opacity: 1; transform: rotate(-8deg); }
/* 2: product cards float in */
.dm-scene__floats { position: absolute; right: 16%; top: 22%; width: min(22vw, 300px); height: 56%; z-index: 2; }
.dm-float { position: absolute; width: 76%; aspect-ratio: 3 / 4; overflow: hidden; border: 3px solid rgba(255, 255, 255, .9); border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); transition: transform .9s var(--ease), opacity .7s; opacity: 0; }
.dm-float img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.dm-float--1 { left: 0; top: 14%; transform: translate(-40px, 60px) rotate(-10deg) scale(.9); }
.dm-float--2 { right: 0; top: 0; transform: translate(60px, -40px) rotate(8deg) scale(.9); }
.dm-scene--2.is-active .dm-float { opacity: 1; }
.dm-scene--2.is-active .dm-float--1 { transform: translateY(calc(var(--t, 0) * -40px)) rotate(-6deg); transition-delay: .15s; }
.dm-scene--2.is-active .dm-float--2 { transform: translateY(calc(var(--t, 0) * 30px)) rotate(4deg); transition-delay: .3s; }
.dm-scene__side { position: absolute; right: clamp(16px, 3vw, 48px); top: 30%; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 6em; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(32px, 2.8vw, 48px); line-height: .9; transform: rotate(-12deg); }
.dm-scene__side i { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--white); border-radius: 50%; transform: rotate(12deg); }
.dm-scene__side .dm-icon { width: 18px; height: 18px; }
/* 3: hotspots */
.dm-spot { position: absolute; left: var(--x); top: var(--y); z-index: 3; }
.dm-spot__dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation: dm-ping 2s infinite; }
@keyframes dm-ping { 70% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.dm-spot__card { position: absolute; left: 34px; top: -34px; display: flex; align-items: center; gap: 12px; width: 250px; padding: 8px 12px 8px 8px; background: var(--white); color: var(--ink); border-radius: 4px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(.35s + var(--d) * .2s); }
.dm-spot__card::before { content: ""; position: absolute; right: 100%; top: 34px; width: 26px; border-top: 1px dashed rgba(255, 255, 255, .8); }
.dm-spot__card img { width: 54px; height: 54px; object-fit: cover; border-radius: 2px; }
.dm-spot__card > span { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; min-width: 0; }
.dm-spot__card strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-spot__card .dm-icon { width: 16px; height: 16px; }
.dm-scene--3.is-active .dm-spot__card { opacity: 1; transform: none; }
/* 4: thumbnails stack */
.dm-scene__thumbs { list-style: none; margin: 0; padding: 0; position: absolute; right: clamp(16px, 3vw, 48px); top: 50%; z-index: 2; display: grid; gap: 10px; transform: translateY(-50%); }
.dm-scene__thumbs li { width: clamp(70px, 6vw, 96px); aspect-ratio: 1; overflow: hidden; border: 2px solid rgba(255, 255, 255, .8); border-radius: 4px; opacity: 0; transform: translateX(30px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(.2s + var(--d) * .1s); }
.dm-scene__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.dm-scene--4.is-active .dm-scene__thumbs li { opacity: 1; transform: none; }
.dm-scene__play { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.dm-scene__play span { display: grid; place-items: center; width: 56px; height: 56px; border: 1.5px solid var(--white); border-radius: 50%; }
/* 5: collection cards */
.dm-scene--5 { background: radial-gradient(80% 90% at 70% 40%, #272727, #0e0d0c); }
.dm-scene__cols { list-style: none; margin: 0; padding: 0; position: absolute; right: var(--gutter); top: 50%; width: min(60vw, 900px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; transform: translateY(-50%); }
.dm-scene__cols li { opacity: 0; transform: translateY(60px) skewX(-6deg); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(.1s + var(--d) * .1s); }
.dm-scene--5.is-active .dm-scene__cols li { opacity: 1; transform: translateY(calc(var(--t, 0) * -24px * (var(--d) - 2))) skewX(-6deg); }
.dm-scene__cols a { position: relative; display: block; aspect-ratio: 3 / 4.4; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; }
.dm-scene__cols img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: skewX(6deg) scale(1.15); transition: transform .8s var(--ease); }
.dm-scene__cols a:hover img { transform: skewX(6deg) scale(1.25); }
.dm-scene__cols span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px; background: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent); font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transform: skewX(6deg); }
.dm-scene__cols .dm-icon { width: 14px; height: 14px; }
/* 6: sky */
.dm-scene--6::after { background: linear-gradient(90deg, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, .1) 40%, transparent 65%); }
.dm-scene--6 .dm-scene__text { color: var(--ink); }
.dm-scene--6 .dm-scene__btn { background: var(--ink); color: var(--white); }
.dm-scene--6 .dm-scene__bg { object-position: 55% 30%; }
/* progress */
.dm-sst__progress { position: absolute; left: var(--gutter); bottom: 28px; z-index: 5; display: flex; align-items: center; gap: 16px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .8); mix-blend-mode: difference; }
.dm-sst__bar { position: relative; width: 150px; height: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.dm-sst__bar i { position: absolute; inset: 0; background: var(--white); transform-origin: left; transform: scaleX(0); }
.dm-sst__num b { color: var(--white); }
@media (max-width: 900px) {
.dm-scene__copy { top: auto; bottom: 90px; transform: none; right: var(--gutter); }
.dm-scene__floats { right: 6%; top: 12%; width: 42vw; height: 40%; }
.dm-scene__side, .dm-scene__script--r { display: none; }
.dm-scene__script--l { top: 16%; }
.dm-spot__card { width: 190px; }
.dm-scene__cols { top: 14%; transform: none; width: auto; left: var(--gutter); grid-template-columns: repeat(5, 40vw); overflow-x: auto; }
.dm-scene--5 .dm-scene__copy { bottom: 80px; }
.dm-scene__thumbs { top: 14%; transform: none; grid-auto-flow: column; }
.dm-sst__progress { bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) {
.dm-sst { height: auto; }
.dm-sst__stage { position: static; height: auto; }
.dm-scene { position: relative; height: 100vh; opacity: 1; visibility: visible; }
.dm-scene * { transition: none !important; opacity: 1 !important; transform: none !important; }
.dm-sst__progress { display: none; }
}
.dm-cmp__hint { color: var(--white); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.dm-scene--1 .dm-scene__bg { object-position: 60% 8%; }
.dm-scene__floats { right: 24%; }
.dm-spot__card b { white-space: nowrap; font-weight: 700; }
.dm-spot--left .dm-spot__card { left: auto; right: 34px; }
.dm-spot--left .dm-spot__card::before { right: auto; left: 100%; }
@media (max-width: 900px) {
.dm-spot__card { width: 150px; gap: 8px; padding: 6px 8px 6px 6px; }
.dm-spot__card img { width: 40px; height: 40px; }
.dm-spot__card .dm-icon { display: none; }
.dm-scene--3 .dm-scene__copy { bottom: 120px; }
.dm-scene__copy { bottom: 130px; }
.dm-sst__progress { bottom: 92px; }
.dm-scene--3 .dm-scene__title { font-size: 40px; }
}
@media (max-width: 900px) { .dm-scene--3 .dm-spot:nth-of-type(n+4) { display: none; } }
/* --------------------------------------------------------------------------
Wishlist page
-------------------------------------------------------------------------- */
.dm-wl { padding-top: 20px; padding-bottom: 64px; max-width: 1440px; }
.dm-wl__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.dm-wl__title { margin: 6px 0 0; font-weight: 900; font-stretch: 105%; font-size: clamp(32px, 3vw, 46px); line-height: 1; }
.dm-wl__sub { margin: 8px 0 0; font-size: 16px; color: var(--ink-2); }
.dm-wl__share { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border: 1px solid #ced0ca; background: #eaece6; font-size: 14.5px; font-weight: 600; border-radius: 3px; }
.dm-wl__share:hover { border-color: var(--ink); }
.dm-wl__share .dm-icon { width: 18px; height: 18px; }
.dm-wl__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.dm-wl__grid.is-loading { min-height: 300px; background: linear-gradient(90deg, #e5e7e1 25%, #eff1eb 50%, #e5e7e1 75%) 0 0 / 200% 100%; animation: dm-shimmer 1.2s linear infinite; }
.dm-wl__item { display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.dm-wl__item.is-leaving { opacity: 0; transform: scale(.94); }
.dm-wl__item .dm-card { flex: 1; }
.dm-wl__item .dm-card__media { aspect-ratio: 264 / 218; }
.dm-wl__item .dm-card__wish[aria-pressed="true"] { color: #e0312a; filter: none; }
.dm-wl__item .dm-card__wish[aria-pressed="true"] .dm-icon { fill: #e0312a; stroke: #fff; stroke-width: 1.2; }
.dm-wl__item .dm-card__wish { background: var(--white); border-radius: 50%; width: 36px; height: 36px; }
.dm-wl__item .dm-card__wish .dm-icon { width: 22px; height: 22px; }
.dm-wl__remove { height: 40px; border: 1px solid #ced0ca; background: var(--white); font-size: 14px; border-radius: 2px; transition: border-color .2s, color .2s; }
.dm-wl__remove:hover { border-color: var(--sale); color: var(--sale); }
[data-wl-mode="shared"] .dm-wl__remove { display: none; }
.dm-wl__empty { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(24px, 4vw, 60px); margin-top: 32px; padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px); background: #e6e8e2; border-radius: 8px; overflow: hidden; }
.dm-wl__empty[hidden] { display: none; }
.dm-wl__emptyicon { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: #d8dad4; color: #8e8a84; }
.dm-wl__emptyicon .dm-icon { width: 44px; height: 44px; fill: currentColor; stroke: none; }
.dm-wl__emptytext h2 { margin: 0; font-size: 26px; font-weight: 700; }
.dm-wl__emptytext p { margin: 10px 0 0; font-size: 16px; color: var(--ink-2); }
.dm-wl__emptytext .dm-cartdrawer__cta { display: inline-flex; margin-top: 22px; padding: 0 30px; font-family: var(--f-sans); letter-spacing: 0; text-transform: none; font-size: 15px; font-weight: 600; }
.dm-wl__collage { position: relative; width: 340px; height: 210px; margin-right: 140px; }
.dm-wl__collage span { position: absolute; top: 10px; width: 150px; height: 190px; padding: 6px; background: var(--white); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .4); left: calc(var(--i) * 95px); transform: rotate(calc((var(--i) - 1) * 6deg)) translateY(calc(var(--i) * 6px - 6px)); transition: transform .5s var(--ease); }
.dm-wl__collage span:nth-child(2) { z-index: 2; }
.dm-wl__empty:hover .dm-wl__collage span { transform: rotate(calc((var(--i) - 1) * 9deg)) translateY(-6px); }
.dm-wl__collage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.dm-wl__script { position: absolute; right: clamp(20px, 3vw, 44px); top: 50%; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: 46px; line-height: .9; max-width: 3.4em; transform: translateY(-50%) rotate(-12deg); }
.dm-wl__script::after { content: ""; display: block; width: 1.4em; height: 2px; margin: .2em 0 0 .8em; background: currentColor; transform: rotate(-10deg); }
.dm-wishlink { position: relative; }
.dm-wish-count[hidden] { display: none; }
@media (max-width: 1280px) { .dm-wl__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dm-wl__collage { display: none; } .dm-wl__empty { grid-template-columns: auto 1fr; } }
@media (max-width: 1000px) { .dm-wl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
.dm-wl__head { flex-direction: column; align-items: flex-start; }
.dm-wl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dm-wl__grid .dm-card__body { padding: 10px; }
.dm-wl__grid .dm-swatches { display: none; }
.dm-wl__grid .dm-chips { flex-wrap: nowrap; gap: 4px; }
.dm-wl__grid .dm-chip { flex: 1 1 0; min-width: 0; height: 28px; font-size: 11.5px; }
.dm-wl__grid .dm-atc { font-size: 11.5px; letter-spacing: .06em; }
.dm-wl__grid .dm-atc__ico { display: none; }
.dm-wl__empty { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.dm-wl__script { display: none; }
}
.dm-wish-count { position: absolute; top: -2px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--ink); color: var(--white); border: 2px solid var(--paper); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.has-overlay-header .dm-header:not(.is-solid) .dm-wish-count { background: var(--white); color: var(--ink); border-color: transparent; }
.dm-wl__share[hidden] { display: none; }
.dm-wl__collage { margin-right: 190px; }
.dm-wl__grid .dm-chips { flex-wrap: nowrap; gap: 5px; }
.dm-wl__grid .dm-chip { flex: 1 1 0; min-width: 0; padding: 0 2px; font-size: 12.5px; }
/* --------------------------------------------------------------------------
Trending now + Build your own look
-------------------------------------------------------------------------- */
.dm-tr { padding-left: 0; padding-right: 0; }
.dm-tr__head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 360px); align-items: center; gap: 28px; padding: 0 var(--gutter); max-width: 1640px; margin: 0 auto 22px; }
.dm-tr__head .dm-ov__eyebrow { font-size: 14px; margin-bottom: 10px; }
.dm-tr__head .dm-ov__eyebrow::after { width: 40px; }
.dm-tr__title { margin: 0; font-weight: 900; font-stretch: 116%; font-size: clamp(42px, 4.6vw, 80px); line-height: .9; letter-spacing: -.015em; text-transform: uppercase; }
.dm-tr__title .is-tan { color: #474c38; }
.dm-tr__text { margin: 12px 0 0; font-size: clamp(15px, 1.2vw, 19px); color: var(--ink-2); }
.dm-tr__script { margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(40px, 3.2vw, 56px); line-height: .9; max-width: 4.6em; transform: rotate(-10deg); }
.dm-tr__script::after { content: ""; display: block; width: 1.8em; height: 2px; margin: .15em 0 0 1.2em; background: currentColor; transform: rotate(-12deg); }
.dm-tr__side { padding-left: 24px; border-left: 1px solid var(--line); }
.dm-tr__side p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.dm-tr__side .dm-ov__btn { margin-top: 0; height: 46px; min-width: 0; font-size: 13px; }
.dm-tr__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); max-width: 1640px; margin: 0 auto 18px; }
.dm-tr__tabs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.dm-tr__tabs::-webkit-scrollbar { display: none; }
.dm-tr__tabs button { flex: none; height: 38px; padding: 0 20px; border: 1px solid #d6d8d2; background: rgba(255, 255, 255, .6); border-radius: 6px; font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); transition: background-color .25s, color .25s, border-color .25s; }
.dm-tr__tabs button:hover { border-color: var(--ink); color: var(--ink); }
.dm-tr__tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.dm-tr__sort select { min-width: 150px; }
.dm-tr__track { --cols: 4; transition: opacity .25s; }
.dm-tr__track.is-loading { opacity: .35; pointer-events: none; }
.dm-tr__track .dm-card { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.dm-tr__track .dm-card:hover { transform: translateY(-10px); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .45); }
.dm-tr__track .dm-card__media { aspect-ratio: 330 / 380; }
.dm-tr__none { padding: 40px; color: var(--ink-2); }
@media (max-width: 1100px) { .dm-tr__track { --cols: 2.4; } }
@media (max-width: 640px) { .dm-tr__track { --cols: 1.3; } }
@media (max-width: 1200px) {
.dm-tr__head { grid-template-columns: 1fr; }
.dm-tr__script { display: none; }
.dm-tr__side { padding-left: 0; border-left: 0; display: flex; align-items: center; gap: 18px; }
.dm-tr__side p { margin: 0; }
}
@media (max-width: 700px) {
.dm-tr__side { flex-direction: column; align-items: flex-start; }
.dm-tr__bar { flex-direction: column; align-items: stretch; }
.dm-tr__tabs { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
}
/* Test: one colour per heading on the home page (no tan/olive/sand accent word) */
body.home .is-tan,
body.home .dm-hero__line--accent,
body.home .dm-story__title .is-accent,
body.home .dm-ov__title .is-tan,
body.home .dm-tr__title .is-tan { color: inherit; }
/* Product cards: lifted white cards with an inset, rounded photo (owner ref) */
.dm-card {
background: #fff;
border: 1px solid rgba(17, 17, 17, .06);
border-radius: 12px;
padding: 6px;
box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 10px 28px -14px rgba(17, 17, 17, .18);
transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.dm-card:hover { transform: translateY(-8px); box-shadow: 0 2px 4px rgba(17, 17, 17, .04), 0 30px 50px -24px rgba(17, 17, 17, .32); }
.dm-card .dm-card__media { border-radius: 8px; }
.dm-card .dm-card__body { padding: 16px 12px 10px; }
.dm-card .dm-atc { border-radius: 6px; }
.dm-card .dm-chip { border-radius: 4px; }
.dm-card .dm-badge { border-radius: 20px; padding: 6px 12px 5px; }
.dm-card .dm-card__wish { background: #fff; border-radius: 50%; width: 38px; height: 38px; color: var(--ink); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .15)); }
.dm-card .dm-card__wish .dm-icon { width: 20px; height: 20px; }
.dm-card .dm-card__wish[aria-pressed="true"] { color: #e0312a; }
.dm-card .dm-card__wish[aria-pressed="true"] .dm-icon { fill: #e0312a; }
.dm-card .dm-qvbtn { border-radius: 6px; }
/* carousels need room for the lift + shadow */
.dm-carousel__track { padding-top: 12px; padding-bottom: 36px; }
/* --------------------------------------------------------------------------
Add to cart: a different style per home section
-------------------------------------------------------------------------- */
/* The New Drop: solid black, rounded; bag slides out and an arrow slides in on hover */
.dm-drop .dm-atc { border-radius: 8px; overflow: hidden; }
.dm-drop .dm-atc::after { content: "\2192"; position: absolute; right: 18px; font-family: var(--f-sans); font-size: 18px; letter-spacing: 0; opacity: 0; transform: translateX(-12px); transition: opacity .3s var(--ease), transform .35s var(--ease); }
.dm-drop .dm-atc .dm-atc__ico { transition: transform .35s var(--ease), opacity .3s; }
.dm-drop .dm-card:hover .dm-atc::after { opacity: 1; transform: none; }
.dm-drop .dm-card:hover .dm-atc .dm-atc__ico { transform: translateX(-10px); opacity: 0; }
.dm-drop .dm-atc.is-busy::after, .dm-drop .dm-atc.is-done::after { opacity: 0; }
/* Bestsellers: outline pill, black fill sweeps in from the left on hover */
.dm-bestsellers .dm-atc { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 40px; overflow: hidden; isolation: isolate; }
.dm-bestsellers .dm-atc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.dm-bestsellers .dm-card:hover .dm-atc, .dm-bestsellers .dm-atc:focus-visible { background: transparent; color: var(--white); }
.dm-bestsellers .dm-card:hover .dm-atc::before, .dm-bestsellers .dm-atc:focus-visible::before { transform: scaleX(1); }
.dm-bestsellers .dm-atc.is-busy, .dm-bestsellers .dm-atc.is-done { color: var(--white); border-color: transparent; }
/* Oversized banner heading: plain black, sized to stay on the light side */
.dm-ov .dm-ov__title { font-size: clamp(38px, 3.55vw, 74px); color: var(--ink); }
.dm-ov .dm-ov__copy { position: relative; z-index: 3; }
/* Footer photo: below the text, sitting on the bottom edge and cropped by it */
.dm-footer__brand { display: flex; flex-direction: column; }
.dm-footer__photo { position: relative; flex: 1 1 auto; min-height: 240px; margin: 28px -12% 0 -6%; overflow: hidden; }
.dm-footer__photo img { position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: auto; min-height: 118%; object-fit: cover; object-position: 30% 0; -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 98%); mask-image: linear-gradient(90deg, #000 60%, transparent 98%); }
/* Trending now: white button, black block with the bag on the right that
grows to fill the whole button on hover */
.dm-tr .dm-atc { justify-content: flex-start; padding: 0 70px 0 20px; background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; isolation: isolate; }
.dm-tr .dm-atc::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; width: 52px; background: var(--ink); transition: width .5s var(--ease); }
.dm-tr .dm-atc .dm-atc__ico, .dm-tr .dm-atc .dm-atc__ok, .dm-tr .dm-atc .dm-atc__spin { position: absolute; right: 16px; color: var(--white); }
.dm-tr .dm-atc .dm-atc__spin { right: 17px; }
.dm-tr .dm-card:hover .dm-atc, .dm-tr .dm-atc:focus-visible { background: var(--white); color: var(--white); }
.dm-tr .dm-card:hover .dm-atc::before, .dm-tr .dm-atc:focus-visible::before, .dm-tr .dm-atc.is-busy::before, .dm-tr .dm-atc.is-done::before { width: 100%; }
.dm-tr .dm-atc.is-busy, .dm-tr .dm-atc.is-done { background: var(--white) !important; color: var(--white); }
.dm-tr .dm-card .dm-atc.is-busy { background: var(--ink) !important; }
/* Footer photo, fitted like the owner's reference: large, heads just under the
script line, spilling under the Shop column, cropped by the bottom bar line. */
@media (min-width: 1001px) {
.dm-footer__main { position: relative; }
.dm-footer__brand { position: static; }
.dm-footer__brand > :not(.dm-footer__photo) { position: relative; z-index: 2; }
.dm-footer__right { position: relative; z-index: 2; }
.dm-footer__photo {
position: absolute; z-index: 1;
left: 0; bottom: 0;
width: clamp(400px, 31vw, 640px);
height: clamp(300px, 22vw, 430px);
margin: 0; min-height: 0; flex: none;
overflow: hidden;
pointer-events: none;
}
.dm-footer__photo img {
position: absolute; inset: 0;
width: 100%; height: auto; min-height: 0;
object-fit: contain; object-position: left top;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, #000 70%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, #000 70%, transparent 100%);
mask-composite: intersect;
}
}
@media (max-width: 900px) { .dm-hero__img { object-position: 88% 30%; } }
/* Footer photo: a bit smaller and pushed down so the bottom is cut by the bar */
@media (min-width: 1001px) {
.dm-footer__photo { width: clamp(340px, 26vw, 540px); height: clamp(240px, 17vw, 330px); }
.dm-footer__photo img { top: 18%; }
}
/* --------------------------------------------------------------------------
Hero slider
-------------------------------------------------------------------------- */
.dm-hs { position: relative; height: clamp(560px, 37vw, 760px); overflow: hidden; background: #fff; isolation: isolate; }
.dm-hs__track { position: absolute; inset: 0; }
.dm-hs__slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr minmax(420px, 34%) 1fr; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s linear .7s; }
.dm-hs__slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s var(--ease), visibility 0s; }
.dm-hs__side { position: relative; height: 100%; }
.dm-hs__ghost { position: absolute; top: 2%; width: 44%; height: 58%; opacity: .16; filter: grayscale(1); overflow: hidden; }
.dm-hs__ghost img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.4); transform-origin: 50% 0; }
.dm-hs__side--l .dm-hs__ghost { left: 6%; }
.dm-hs__side--r .dm-hs__ghost { right: 4%; }
.dm-hs__arch { position: absolute; bottom: -4%; width: 56%; height: 86%; border-radius: 50% 50% 0 0 / 34% 34% 0 0; background: var(--tint); }
.dm-hs__side--l .dm-hs__arch { left: 24%; }
.dm-hs__side--r .dm-hs__arch { right: 24%; }
.dm-hs__dot { position: absolute; bottom: 18%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--tint); filter: brightness(.94); }
.dm-hs__side--l .dm-hs__dot { left: 66%; }
.dm-hs__side--r .dm-hs__dot { right: 66%; }
.dm-hs__lotus { position: absolute; right: 52%; top: 12%; width: 34%; color: #b8c2a8; opacity: .7; }
.dm-hs__model { position: absolute; bottom: 0; height: 96%; width: auto; max-width: none; z-index: 2; filter: drop-shadow(0 20px 30px rgba(0,0,0,.12)); }
.dm-hs__side--l .dm-hs__model { left: 50%; transform: translateX(-38%); }
.dm-hs__side--r .dm-hs__model { right: 50%; transform: translateX(36%); }
.dm-hs__badge { position: absolute; z-index: 3; top: 30%; display: flex; flex-direction: column; justify-content: center; gap: 2px; width: clamp(110px, 8.6vw, 160px); aspect-ratio: 1; padding: 0 22px; border-radius: 50%; background: color-mix(in srgb, var(--tint) 75%, #fff); box-shadow: 0 16px 34px -20px rgba(0,0,0,.35); transition: transform .35s var(--ease); }
.dm-hs__badge:hover { transform: scale(1.05); }
.dm-hs__badge strong { font-weight: 900; font-stretch: 112%; font-size: clamp(16px, 1.25vw, 22px); text-transform: uppercase; }
.dm-hs__badge span { font-size: 13.5px; color: var(--ink-2); }
.dm-hs__badge .dm-icon { width: 22px; height: 22px; margin-top: 6px; stroke-width: 1.4; transition: transform .3s var(--ease); }
.dm-hs__badge:hover .dm-icon { transform: translateX(4px); }
.dm-hs__side--l .dm-hs__badge { left: 5%; }
.dm-hs__side--r .dm-hs__badge { right: 5%; }
.dm-hs__script { position: absolute; z-index: 3; left: 4%; bottom: 10%; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(40px, 3.4vw, 64px); line-height: .85; max-width: 3.6em; transform: rotate(-12deg); }
.dm-hs__copy { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 0 110px; }
.dm-hs__eyebrow { display: flex; align-items: center; gap: 20px; margin: 0 0 18px; font-family: var(--f-mono); font-size: clamp(12px, .95vw, 16px); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); }
.dm-hs__eyebrow::before, .dm-hs__eyebrow::after { content: ""; width: 56px; height: 1px; background: #bcc6ac; }
.dm-hs__title { margin: 0; font-weight: 900; font-stretch: 105%; font-size: clamp(44px, 4.6vw, 92px); line-height: .98; letter-spacing: -.01em; text-transform: uppercase; }
.dm-hs__title span { display: block; white-space: nowrap; }
.dm-hs__title em { font-style: italic; background: linear-gradient(90deg, #9aa48a, #bec8ae); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.dm-hs__text { margin: 16px 0 0; max-width: 40ch; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.45; color: var(--ink-2); }
.dm-hs__btn { display: inline-flex; align-items: center; gap: 16px; height: 54px; margin-top: 26px; padding: 0 44px; background: var(--ink); color: #fff; border-radius: 6px; font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; transition: background-color .25s; }
.dm-hs__btn:hover { background: #2b2b2b; }
.dm-hs__btn .dm-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.dm-hs__btn:hover .dm-icon { transform: translateX(4px); }
/* entrance per slide */
.dm-hs__slide .dm-hs__copy > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.dm-hs__slide.is-active .dm-hs__copy > * { opacity: 1; transform: none; }
.dm-hs__slide.is-active .dm-hs__copy > :nth-child(2) { transition-delay: .08s; }
.dm-hs__slide.is-active .dm-hs__copy > :nth-child(3) { transition-delay: .16s; }
.dm-hs__slide.is-active .dm-hs__copy > :nth-child(4) { transition-delay: .24s; }
.dm-hs__slide .dm-hs__model { opacity: 0; transition: opacity .8s var(--ease), transform 1s var(--ease); }
.dm-hs__slide .dm-hs__side--l .dm-hs__model { transform: translateX(-60%); }
.dm-hs__slide .dm-hs__side--r .dm-hs__model { transform: translateX(58%); }
.dm-hs__slide.is-active .dm-hs__model { opacity: 1; transition-delay: .1s; }
.dm-hs__slide.is-active .dm-hs__side--l .dm-hs__model { transform: translateX(-38%); }
.dm-hs__slide.is-active .dm-hs__side--r .dm-hs__model { transform: translateX(36%); }
.dm-hs__arch { transform: scaleY(.9); transform-origin: bottom; transition: transform 1s var(--ease); }
.dm-hs__slide.is-active .dm-hs__arch { transform: none; }
.dm-hs__trust { position: absolute; z-index: 5; left: 50%; bottom: 62px; transform: translateX(-50%); list-style: none; margin: 0; padding: 0; display: flex; }
.dm-hs__trust li { display: flex; align-items: center; gap: 12px; padding: 0 22px; white-space: nowrap; }
.dm-hs__trust li + li { border-left: 1px solid #d6d8d2; }
.dm-hs__trust .dm-icon { width: 30px; height: 30px; stroke-width: 1.2; }
.dm-hs__trust span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); }
.dm-hs__trust strong { font-size: 14px; color: var(--ink); font-weight: 600; }
.dm-hs__nav { position: absolute; z-index: 6; top: 50%; width: 56px; height: 56px; margin-top: -28px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 8px 24px -10px rgba(0,0,0,.35); transition: background-color .2s, color .2s; }
.dm-hs__nav:hover { background: var(--ink); color: #fff; }
.dm-hs__nav .dm-icon { width: 22px; height: 22px; stroke-width: 1.8; }
.dm-hs__nav--prev { left: 24px; }
.dm-hs__nav--next { right: 24px; }
.dm-hs__dots { position: absolute; z-index: 6; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 12px; }
.dm-hs__dots button { width: 11px; height: 11px; border-radius: 50%; background: #ced0ca; transition: background-color .25s, transform .25s; }
.dm-hs__dots button[aria-current="true"] { background: var(--ink); transform: scale(1.15); }
@media (max-width: 1200px) {
.dm-hs__slide { grid-template-columns: 1fr minmax(380px, 40%) 1fr; }
.dm-hs__trust li { padding: 0 12px; }
.dm-hs__trust span { display: none; }
.dm-hs__badge { display: none; }
.dm-hs__script { display: none; }
}
@media (max-width: 900px) {
.dm-hs { height: auto; min-height: 0; }
.dm-hs__track { position: relative; display: grid; }
.dm-hs__slide { position: relative; grid-area: 1 / 1; grid-template-columns: 1fr 1fr; grid-template-rows: auto 380px; }
.dm-hs__copy { grid-column: 1 / -1; grid-row: 1; padding: 36px var(--gutter) 10px; }
.dm-hs__title { font-size: clamp(38px, 11vw, 60px); }
.dm-hs__title span { white-space: normal; }
.dm-hs__side { grid-row: 2; }
.dm-hs__side--l { grid-column: 1; }
.dm-hs__side--r { grid-column: 2; }
.dm-hs__ghost, .dm-hs__lotus { display: none; }
.dm-hs__arch { width: 80%; height: 82%; }
.dm-hs__side--l .dm-hs__arch { left: 12%; } .dm-hs__side--r .dm-hs__arch { right: 12%; }
.dm-hs__dot { display: none; }
.dm-hs__model { height: 92%; }
.dm-hs__slide.is-active .dm-hs__side--l .dm-hs__model { transform: translateX(-50%); }
.dm-hs__slide.is-active .dm-hs__side--r .dm-hs__model { transform: translateX(50%); }
.dm-hs__trust { position: relative; left: auto; bottom: auto; transform: none; justify-content: center; padding: 16px var(--gutter) 44px; border-top: 1px solid var(--line); }
.dm-hs__trust span { display: flex; }
.dm-hs__trust li { flex-direction: column; text-align: center; gap: 6px; padding: 0 8px; white-space: normal; }
.dm-hs__trust span small, .dm-hs__trust span { font-size: 11px; }
.dm-hs__nav { top: auto; bottom: 170px; width: 42px; height: 42px; }
.dm-hs__nav--prev { left: 10px; } .dm-hs__nav--next { right: 10px; }
.dm-hs__dots { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.dm-hs__slide, .dm-hs__slide * { transition: none !important; }
}
.dm-hs__badge { top: 14%; padding: 0 16px; }
.dm-hs__badge strong { font-size: clamp(13px, 1.05vw, 19px); line-height: 1.05; }
.dm-hs__nav { top: 62%; }
.dm-hs__title { font-size: clamp(44px, 4.1vw, 80px); }
@media (max-width: 900px) { .dm-hs__nav { top: auto; } }
/* ==========================================================================
Shop v2 + category v2
========================================================================== */
/* ---- Shop hero ---- */
.dm-sh { position: relative; display: grid; grid-template-columns: 1fr minmax(360px, 32%) 1fr; height: clamp(360px, 25vw, 470px); overflow: hidden; background: radial-gradient(60% 90% at 18% 60%, #f2f4ee 0, transparent 70%), radial-gradient(55% 90% at 82% 55%, #eaece6 0, transparent 70%), #fff; isolation: isolate; }
.dm-sh__side { position: relative; }
.dm-sh__blob { position: absolute; bottom: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; }
.dm-sh__side--l .dm-sh__blob { left: 16%; background: #e6e8e2; }
.dm-sh__side--r .dm-sh__blob { right: 16%; background: #dee0da; }
.dm-sh__model { position: absolute; bottom: 0; height: 104%; width: auto; max-width: none; z-index: 2; filter: drop-shadow(0 18px 30px rgba(0,0,0,.12)); animation: dm-sh-in 1s var(--ease) both; }
.dm-sh__side--l .dm-sh__model { left: 50%; transform: translateX(-45%); --from: -60%; --to: -45%; }
.dm-sh__side--r .dm-sh__model { right: 50%; transform: translateX(45%); --from: 60%; --to: 45%; }
@keyframes dm-sh-in { from { opacity: 0; transform: translateX(var(--from)); } to { opacity: 1; transform: translateX(var(--to)); } }
.dm-sh__leaf { position: absolute; z-index: 1; width: 90px; color: #bac4aa; opacity: .8; animation: dm-sway 6s ease-in-out infinite; transform-origin: 50% 100%; }
.dm-sh__leaf--a { left: 2%; bottom: 10%; }
.dm-sh__leaf--b { right: 4%; top: 8%; width: 70px; animation-delay: -2s; }
.dm-sh__leaf--c { left: 6%; top: 10%; color: #b2bca2; }
@keyframes dm-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.dm-sh__script { position: absolute; z-index: 3; top: 8%; left: 4%; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(34px, 2.8vw, 54px); line-height: .85; max-width: 3.4em; transform: rotate(-10deg); }
.dm-sh__script .dm-icon { width: 26px; height: 26px; color: #b6fa0e; vertical-align: middle; }
.dm-sh__script--r { left: auto; right: 4%; }
.dm-sh__copy { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dm-sh__copy > * { animation: dm-rise .9s var(--ease) both; }
.dm-sh__copy > :nth-child(2) { animation-delay: .1s; } .dm-sh__copy > :nth-child(3) { animation-delay: .2s; } .dm-sh__copy > :nth-child(4) { animation-delay: .3s; }
.dm-sh__brand { margin: 0; font-family: var(--f-mono); font-size: 15px; letter-spacing: .3em; }
.dm-sh__brand sup { font-size: 9px; }
.dm-sh__title { position: relative; margin: 6px 0 0; font-weight: 900; font-size: clamp(64px, 6.4vw, 118px); line-height: .95; letter-spacing: -.02em; }
.dm-sh__title::before { content: ""; position: absolute; z-index: -1; left: -14%; right: -8%; top: 44%; height: 34%; background: #e5e7e1; border-radius: 40px 10px 40px 10px; transform: rotate(-3deg) scaleX(0); transform-origin: left; animation: dm-brush .8s var(--ease) .5s forwards; }
@keyframes dm-brush { to { transform: rotate(-3deg) scaleX(1); } }
.dm-sh__spark { position: absolute; right: -44px; top: -6px; width: 40px; height: 40px; }
.dm-sh__spark i { position: absolute; left: 0; width: 26px; height: 4px; border-radius: 4px; background: #b6fa0e; transform-origin: left; }
.dm-sh__spark i:nth-child(1) { top: 4px; transform: rotate(-60deg); } .dm-sh__spark i:nth-child(2) { top: 16px; transform: rotate(-25deg); } .dm-sh__spark i:nth-child(3) { top: 28px; transform: rotate(8deg); }
.dm-sh__text { margin: 12px 0 0; font-size: clamp(16px, 1.3vw, 22px); color: var(--ink-2); }
.dm-sh__btn { display: inline-flex; align-items: center; gap: 12px; height: 50px; margin-top: 22px; padding: 0 30px; background: var(--ink); color: #fff; border-radius: 30px; font-size: 15px; font-weight: 600; transition: transform .25s var(--ease), background-color .2s; }
.dm-sh__btn:hover { transform: translateY(-2px); background: #2b2b2b; }
.dm-sh__btn .dm-icon { width: 18px; height: 18px; }
/* ---- Category circles ---- */
.dm-circles { margin-top: -54px; position: relative; z-index: 5; padding: 0 var(--gutter); }
.dm-circles ul, .dm-cb__circles ul { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; gap: clamp(12px, 1.6vw, 28px); justify-content: center; overflow-x: auto; scrollbar-width: none; }
.dm-circles ul::-webkit-scrollbar, .dm-cb__circles ul::-webkit-scrollbar { display: none; }
.dm-circ { flex: none; animation: dm-pop .6s var(--ease) both; }
.dm-circles .dm-circ:nth-child(n) { animation-delay: calc(.3s + var(--i, 0) * .05s); }
.dm-circ a { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; }
.dm-circ__img { display: grid; place-items: center; width: 86px; height: 86px; overflow: hidden; border-radius: 50%; background: #eef0ea; box-shadow: 0 0 0 4px #fff, 0 10px 22px -12px rgba(0,0,0,.35); transition: transform .35s var(--ease), box-shadow .3s; }
.dm-circ__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .6s var(--ease); }
.dm-circ a:hover .dm-circ__img { transform: translateY(-5px); }
.dm-circ a:hover .dm-circ__img img { transform: scale(1.1); }
.dm-circ__name { font-size: 13.5px; font-weight: 500; text-align: center; line-height: 1.2; }
.dm-circ.is-active .dm-circ__img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #b6fa0e, 0 10px 22px -12px rgba(0,0,0,.35); }
.dm-circ--all .dm-circ__img { background: #fff; }
.dm-circ--all .dm-icon { width: 30px; height: 30px; stroke-width: 1.6; }
.dm-circ--offer .dm-circ__img { background: #eff1eb; color: #b6fa0e; font-size: 38px; font-weight: 800; }
/* ---- Filter bar (shop) ---- */
.dm-shop2 { max-width: 1680px; margin: 0 auto; padding: 26px var(--gutter) 48px; }
.dm-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dm-fbar .dm-filters__head, .dm-fbar .dm-filters__apply { display: none; }
.dm-fbar__label { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border: 1.5px solid #d2d4ce; border-radius: 8px; background: #fff; font-size: 14.5px; font-weight: 500; }
.dm-fbar__label .dm-icon { width: 18px; height: 18px; }
.dm-fdrop { position: relative; }
.dm-fdrop > summary { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid #dcded8; border-radius: 8px; background: #fff; font-size: 14.5px; cursor: pointer; list-style: none; transition: border-color .2s; }
.dm-fdrop > summary::-webkit-details-marker { display: none; }
.dm-fdrop > summary:hover, .dm-fdrop[open] > summary { border-color: var(--ink); }
.dm-fdrop > summary .dm-icon { width: 13px; height: 13px; stroke-width: 2.2; transform: rotate(90deg); transition: transform .25s; }
.dm-fdrop[open] > summary .dm-icon { transform: rotate(-90deg); }
.dm-fdrop .dm-fpanel { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 240px; padding: 16px; background: #fff; border: 1px solid #e5e7e1; border-radius: 10px; box-shadow: 0 24px 40px -20px rgba(0,0,0,.3); animation: dm-fade .25s var(--ease); }
.dm-fdots { display: flex; }
.dm-fdots i { width: 16px; height: 16px; margin-left: -4px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px #fff; }
.dm-fdots i:first-child { margin-left: 0; }
.dm-fcount { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #b6fa0e; color: #fff; font-size: 11px; font-weight: 700; }
.dm-fchecks--grid { grid-template-columns: repeat(3, 1fr); }
.dm-price__vals { display: flex; justify-content: space-between; margin: 12px 0 0; }
.dm-price__fill { background: #b6fa0e; }
.dm-price__track input::-webkit-slider-thumb { background: #b6fa0e; box-shadow: 0 0 0 1px #b6fa0e; }
.dm-fbar__clear { font-size: 14px; text-decoration: underline; }
.dm-fbar__end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.dm-sortbox { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 14px; border: 1px solid #dcded8; border-radius: 8px; background: #fff; font-size: 14px; color: var(--ink-2); }
.dm-sortbox select { height: 40px; border: 0; background: transparent; font-size: 14px; color: var(--ink); cursor: pointer; }
.dm-viewtoggle { display: flex; border: 1px solid #dcded8; border-radius: 8px; overflow: hidden; }
.dm-viewtoggle button { display: grid; place-items: center; width: 44px; height: 42px; background: #fff; }
.dm-viewtoggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.dm-viewtoggle .dm-icon { width: 18px; height: 18px; }
.dm-shop2__count { margin: 16px 0 14px; font-size: 14px; color: var(--muted); }
/* ---- Compact product cards ---- */
.dm-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.dm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dm-grid--compact .dm-card { border-radius: 14px; }
.dm-grid--compact .dm-card__media { aspect-ratio: 230 / 232; border-radius: 10px; }
.dm-grid--compact .dm-card__body { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "sw sw" "title title" "price buy" "rate buy"; column-gap: 8px; padding: 12px 10px 8px; }
.dm-grid--compact .dm-card__title { grid-area: title; font-size: 14.5px; font-weight: 500; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-grid--compact .dm-card__row { display: contents; }
.dm-grid--compact .dm-swatches { grid-area: sw; order: -1; }
.dm-grid--compact .dm-swatch { width: 15px; height: 15px; }
.dm-grid--compact .dm-card__price { grid-area: price; margin-top: 6px; font-size: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; white-space: normal; }
.dm-grid--compact .dm-card__rating { grid-area: rate; }
.dm-grid--compact .dm-chips { display: none; }
.dm-grid--compact .dm-card__buy { grid-area: buy; align-self: end; margin: 0; }
.dm-grid--compact .dm-atc { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--ink); color: #fff; }
.dm-grid--compact .dm-atc__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dm-grid--compact .dm-atc .dm-icon { width: 18px; height: 18px; }
.dm-grid--compact .dm-atc.is-done { background: #2f8a3b !important; }
.dm-grid--compact .dm-card .dm-card__msg { grid-column: 1 / -1; }
.dm-card__off { display: inline-block; padding: 2px 6px; background: #eff1eb; color: #d23b52; font-size: 11.5px; font-weight: 700; border-radius: 3px; }
.dm-card__rating { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.dm-card__rating .dm-star { width: 13px; height: 13px; }
.dm-card__rating .dm-star.is-on { background: #f0a51c; }
.dm-grid--compact .dm-qvbtn { left: 50%; right: auto; bottom: 14px; width: auto; padding: 0 16px; transform: translate(-50%, 10px); border-radius: 20px; background: rgba(0,0,0,.72); color: #fff; }
.dm-grid--compact .dm-card:hover .dm-qvbtn { transform: translate(-50%, 0); }
.dm-grid--compact .dm-badge { font-family: var(--f-sans); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
.dm-grid--compact .dm-badge--new { background: #b6fa0e; }
.dm-grid--compact .dm-badge--bestseller { background: #9ca68c; color: #fff; }
.dm-grid--compact .dm-badge--trending { background: #4d7a4a; }
/* list view */
.dm-grid.is-list { grid-template-columns: 1fr !important; }
.dm-grid.is-list .dm-card { flex-direction: row; }
.dm-grid.is-list .dm-card__media { width: 220px; flex: none; aspect-ratio: 1; }
.dm-grid.is-list .dm-card__body { display: flex; flex-direction: column; padding: 16px 20px; }
.dm-grid.is-list .dm-chips { display: flex; }
.dm-grid.is-list .dm-card__buy { margin-top: 14px; max-width: 280px; }
.dm-grid.is-list .dm-atc { width: 100%; border-radius: 6px; }
.dm-grid.is-list .dm-atc__label { position: static; width: auto; height: auto; clip: auto; }
/* reveal */
.dm-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * .05s); }
.dm-reveal.is-in { opacity: 1; transform: none; }
.dm-reveal > .dm-card { height: 100%; }
/* ---- Shop trust strip ---- */
.dm-shtrust { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1680px; margin: 0 auto; padding: 28px calc(var(--gutter) + 80px); background: linear-gradient(90deg, #f6f8f2, #fff 40%, #f6f8f2); overflow: hidden; }
.dm-shtrust ul { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; }
.dm-shtrust li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; }
.dm-shtrust li + li { border-left: 1px solid #dfe1db; }
.dm-shtrust .dm-icon { width: 36px; height: 36px; stroke-width: 1.2; }
.dm-shtrust span { display: flex; flex-direction: column; font-size: 13.5px; color: var(--muted); }
.dm-shtrust strong { font-size: 15px; color: var(--ink); font-weight: 600; }
.dm-shtrust__offer { display: flex; align-items: center; gap: 14px; padding: 14px 24px; background: #eff1eb; border-radius: 40px; color: #d23b52; }
.dm-shtrust__offer strong { color: #d23b52; }
.dm-shtrust__offer span { color: #b6fa0e; }
.dm-shtrust__offer .dm-icon:first-child { width: 30px; height: 30px; }
.dm-shtrust__offer .dm-icon:last-child { width: 20px; height: 20px; transition: transform .3s; }
.dm-shtrust__offer:hover .dm-icon:last-child { transform: translateX(4px); }
.dm-shtrust__leaf { position: absolute; bottom: -20px; width: 80px; color: #d0d2cc; animation: dm-sway 7s ease-in-out infinite; }
.dm-shtrust__leaf--l { left: 10px; } .dm-shtrust__leaf--r { right: 10px; animation-delay: -3s; }
/* ---- Category banner ---- */
.dm-catwrap { max-width: 1680px; padding-top: 16px; padding-bottom: 60px; }
.dm-cb { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr) minmax(0, 1.25fr); align-items: center; height: clamp(230px, 15vw, 280px); padding: 0 34px 0 60px; overflow: hidden; border-radius: 18px; background: linear-gradient(100deg, color-mix(in srgb, var(--tint) 55%, #fff) 0, var(--tint) 45%, color-mix(in srgb, var(--tint) 70%, #fff) 100%); isolation: isolate; }
.dm-cb__leaf { position: absolute; z-index: -1; width: 100px; color: color-mix(in srgb, var(--tint) 55%, #959f85); opacity: .7; animation: dm-sway 7s ease-in-out infinite; }
.dm-cb__leaf--a { left: -10px; top: 20px; } .dm-cb__leaf--b { left: 44%; bottom: -30px; animation-delay: -3s; }
.dm-cb__copy > * { animation: dm-rise .8s var(--ease) both; }
.dm-cb__copy > :nth-child(2) { animation-delay: .1s; } .dm-cb__copy > :nth-child(3) { animation-delay: .2s; }
.dm-cb__title { margin: 0; font-weight: 900; font-stretch: 112%; font-size: clamp(34px, 3.1vw, 56px); line-height: .98; text-transform: uppercase; }
.dm-cb__title span { display: block; }
.dm-cb__title .is-tan { color: #7c7c7c; }
.dm-cb__text { margin: 12px 0 0; font-size: clamp(14.5px, 1.1vw, 18px); color: var(--ink-2); max-width: 30ch; }
.dm-cb__btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; margin-top: 18px; padding: 0 22px; border-radius: 22px; background: #7c7c7c; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.dm-cb__btn .dm-icon { width: 16px; height: 16px; }
.dm-cb__media { position: relative; align-self: stretch; }
.dm-cb__blob { position: absolute; left: 50%; bottom: -20%; width: 80%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: rgba(255,255,255,.45); }
.dm-cb__model { position: absolute; left: 50%; bottom: 0; height: 108%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 16px 26px rgba(0,0,0,.14)); animation: dm-cb-in 1s var(--ease) both; }
@keyframes dm-cb-in { from { opacity: 0; transform: translate(-50%, 30px); } to { opacity: 1; transform: translate(-50%, 0); } }
.dm-cb__script { position: absolute; left: 55%; top: 16%; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(34px, 2.6vw, 48px); line-height: .9; max-width: 3.6em; transform: rotate(-10deg); z-index: 2; }
.dm-cb__script .dm-icon { width: 22px; height: 22px; color: #b6fa0e; vertical-align: middle; }
.dm-cb__circles { position: relative; min-width: 0; padding-left: 90px; }
.dm-cb__circles ul { justify-content: flex-start; gap: 18px; scroll-behavior: smooth; }
.dm-cb__circles .dm-circ a { width: 84px; }
.dm-cb__circles .dm-circ__img { width: 78px; height: 78px; }
.dm-cb__more { position: absolute; right: -14px; top: 30px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); }
.dm-cb__more .dm-icon { width: 16px; height: 16px; stroke-width: 2; }
/* ---- Category layout ---- */
.dm-cl { display: grid; grid-template-columns: 250px minmax(0, 1fr) 250px; gap: 28px; margin-top: 22px; align-items: start; }
.dm-cl__side { position: sticky; top: calc(var(--header-h) + 16px); padding: 18px; background: #fff; border: 1px solid #e8eae4; border-radius: 14px; box-shadow: 0 16px 30px -24px rgba(0,0,0,.25); }
.dm-cl__side .dm-filters__head { display: none; }
.dm-cl__side .dm-filters__apply { display: none; }
.dm-cl__treehead { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.dm-cl__treehead .dm-icon { width: 16px; height: 16px; stroke-width: 2; }
.dm-cl__tree ul { list-style: none; margin: 0; padding: 0; }
.dm-cl__tree li a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 14.5px; color: var(--ink-2); transition: background-color .2s; }
.dm-cl__tree li a:hover { background: #f3f5ef; }
.dm-cl__tree > ul > li.is-active > a { background: #eef0ea; color: #b6fa0e; font-weight: 600; }
.dm-cl__tree li ul { padding-left: 12px; margin: 4px 0; }
.dm-cl__tree li ul li.is-active a { background: #f5f7f1; color: var(--ink); font-weight: 600; }
.dm-cl__side .dm-fgroup:first-of-type { margin-top: 10px; }
.dm-cl__side .dm-fchecks--grid { grid-template-columns: repeat(3, 1fr); }
.dm-cl__main { min-width: 0; }
.dm-cl__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 8px 0 16px; }
.dm-cl__title { margin: 0; font-size: clamp(28px, 2.4vw, 38px); font-weight: 800; }
.dm-cl__title small { font-size: 15px; font-weight: 400; color: var(--muted); }
.dm-cl__desc { margin-top: 6px; max-width: 64ch; font-size: 15px; color: var(--ink-2); }
.dm-cl__desc p { margin: 0; }
.dm-cl__filterbtn { display: none; }
.dm-chiprow { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.dm-chiprow a { display: block; white-space: nowrap; padding: 9px 18px; border: 1px solid #e3e5df; border-radius: 22px; background: #fff; font-size: 13.5px; transition: background-color .2s, color .2s, border-color .2s; }
.dm-chiprow a:hover { border-color: #b6fa0e; }
.dm-chiprow a.is-active { background: #b6fa0e; border-color: #b6fa0e; color: #fff; }
.dm-cl__promo { display: grid; gap: 14px; position: sticky; top: calc(var(--header-h) + 16px); }
.dm-promo { position: relative; display: block; height: 186px; overflow: hidden; border-radius: 14px; background: var(--tint); isolation: isolate; }
.dm-promo__text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; max-width: 60%; padding: 20px 0 0 18px; }
.dm-promo__text strong { font-weight: 900; font-stretch: 110%; font-size: 21px; line-height: 1; text-transform: uppercase; }
.dm-promo__text span { font-size: 13.5px; color: var(--ink-2); }
.dm-promo__text em { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 8px; padding: 6px 14px; border-radius: 16px; background: #7c7c7c; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dm-promo__text em .dm-icon { width: 13px; height: 13px; }
.dm-promo__img { position: absolute; right: -6px; bottom: 0; height: 112%; width: auto; transition: transform .6s var(--ease); }
.dm-promo:hover .dm-promo__img { transform: scale(1.05) translateY(-4px); }
.dm-cl__trust { list-style: none; margin: 10px 0 0; padding: 0 6px; display: grid; gap: 18px; }
.dm-cl__trust li { display: flex; align-items: center; gap: 14px; }
.dm-cl__trust .dm-icon { width: 32px; height: 32px; stroke-width: 1.2; }
.dm-cl__trust span { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.dm-cl__trust strong { font-size: 14.5px; color: var(--ink); font-weight: 600; }
/* ---- Responsive ---- */
@media (max-width: 1500px) { .dm-grid--6 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dm-cl { grid-template-columns: 240px minmax(0, 1fr) 220px; } .dm-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .dm-grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dm-cl { grid-template-columns: 240px minmax(0, 1fr); } .dm-cl__promo { display: none; } .dm-cb { grid-template-columns: 1fr .8fr; } .dm-cb__circles { display: none; } .dm-cb__script { left: auto; right: 4%; } }
@media (max-width: 1000px) {
.dm-sh { grid-template-columns: 1fr 1fr; grid-template-rows: auto 260px; height: auto; }
.dm-sh__copy { grid-column: 1 / -1; grid-row: 1; padding: 34px var(--gutter) 10px; }
.dm-sh__side { grid-row: 2; }
.dm-sh__script { display: none; }
.dm-circles { margin-top: 18px; }
.dm-circles ul { justify-content: flex-start; }
.dm-fbar .dm-fdrop, .dm-fbar .dm-fbar__clear { display: none; }
.dm-fbar.is-open .dm-fdrop { display: block; }
.dm-grid--6, .dm-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-cl { grid-template-columns: minmax(0, 1fr); }
.dm-cl__filterbtn { display: inline-flex; }
.dm-cl__side { position: fixed; z-index: 115; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); overflow-y: auto; border-radius: 0; transform: translateX(-100%); transition: transform .4s var(--ease); }
.dm-cl__side.is-open, .dm-cl__side:has(.is-open) { transform: none; }
.dm-cl__side .dm-filters__head, .dm-cl__side .dm-filters__apply { display: flex; }
.dm-cb { grid-template-columns: 1.1fr .9fr; padding: 0 20px 0 26px; height: 230px; }
.dm-shtrust { padding: 22px var(--gutter); flex-direction: column; }
.dm-shtrust ul { flex-wrap: wrap; gap: 14px 0; }
.dm-shtrust li { flex: 1 1 33%; flex-direction: column; text-align: center; gap: 6px; }
.dm-shtrust__leaf { display: none; }
.dm-cl__head { flex-direction: column; }
.dm-fbar__end { margin-left: 0; }
}
@media (max-width: 700px) {
.dm-sh__title { font-size: 64px; }
.dm-grid--6, .dm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dm-cb { grid-template-columns: 1.2fr .8fr; padding: 0 12px 0 18px; height: 200px; }
.dm-cb__title { font-size: 26px; }
.dm-cb__text { display: none; }
.dm-cb__script, .dm-cb__leaf { display: none; }
.dm-sortbox span { display: none; }
.dm-viewtoggle { display: none; }
.dm-fbar__end { width: 100%; justify-content: flex-end; }
.dm-shop2 { padding-top: 18px; }
.dm-grid.is-list .dm-card__media { width: 120px; }
}
@media (max-width: 1000px) {
.dm-fbar.is-open { position: fixed; z-index: 115; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 18px 20px 24px; overflow-y: auto; background: #fff; }
.dm-fbar.is-open .dm-filters__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dm-fbar.is-open .dm-filters__head h2 { margin: 0; font-size: 16px; }
.dm-fbar.is-open .dm-filters__x { display: grid !important; }
.dm-fbar.is-open .dm-fbar__label, .dm-fbar.is-open .dm-fbar__end { display: none; }
.dm-fbar.is-open .dm-fdrop { border-bottom: 1px solid var(--line); }
.dm-fbar.is-open .dm-fdrop > summary { border: 0; padding: 0; height: 50px; justify-content: space-between; }
.dm-fbar.is-open .dm-fdrop .dm-fpanel { position: static; box-shadow: none; border: 0; padding: 0 0 14px; min-width: 0; }
.dm-fbar.is-open .dm-fbar__clear { display: block; margin: 14px 0; }
.dm-fbar.is-open .dm-filters__apply { display: flex; margin-top: 16px; }
}
/* v2 fixes: show heads, readable promos, quick-view pill */
.dm-sh { height: clamp(400px, 28vw, 520px); }
.dm-sh__model { top: 4%; bottom: auto; height: 150%; }
.dm-cb { height: clamp(250px, 17vw, 300px); }
.dm-cb__model { top: 6%; bottom: auto; height: 160%; }
@keyframes dm-cb-in { from { opacity: 0; transform: translate(-50%, 30px); } to { opacity: 1; transform: translate(-50%, 0); } }
.dm-promo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--tint) 0, var(--tint) 42%, transparent 75%); }
.dm-promo__img { right: -18px; height: 125%; top: 6%; bottom: auto; }
.dm-grid--compact .dm-qvbtn { font-family: var(--f-sans); letter-spacing: 0; text-transform: none; font-size: 13px; height: 34px; white-space: nowrap; }
.dm-grid--compact .dm-card { display: flex; flex-direction: column; }
.dm-grid--compact .dm-card__body { flex: 1; align-content: start; }
@media (max-width: 1000px) { .dm-sh__model { height: 135%; } }
.dm-fbar:not(.is-open) .dm-filters__apply, .dm-fbar:not(.is-open) .dm-filters__head { display: none !important; }
@media (max-width: 700px) {
.dm-cb__media { position: static; }
.dm-cb__model { left: auto; right: 4%; top: 10%; height: 135%; transform: none; animation: none; }
.dm-cb__blob { left: auto; right: -10%; transform: none; width: 60%; }
}
.dm-grid--compact .dm-atc .dm-atc__ico { display: inline-flex !important; }
/* Hero v2 background: richer, like the reference */
.dm-hs { background:
radial-gradient(38% 70% at 16% 55%, #eaece6 0, rgba(234, 236, 230, 0) 70%),
radial-gradient(38% 70% at 84% 50%, #f0f2ec 0, rgba(240, 242, 236, 0) 70%),
radial-gradient(30% 40% at 50% 100%, #f4f6f0 0, rgba(244, 246, 240, 0) 70%),
#fff; }
.dm-hs__ghost { opacity: .22; width: 52%; height: 64%; top: 0; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.dm-hs__side--l .dm-hs__ghost { left: 2%; }
.dm-hs__side--r .dm-hs__ghost { right: 0; }
.dm-hs__lotus { width: 46%; top: 14%; opacity: .85; stroke-width: 1; }
.dm-hs__side--l .dm-hs__lotus { right: auto; left: -6%; top: 46%; width: 36%; color: #b2bca2; transform: rotate(-18deg); }
.dm-hs__side--r .dm-hs__lotus { right: 50%; color: #bec8ae; }
.dm-hs__leaf { position: absolute; z-index: 1; color: #c2ccb2; opacity: .75; animation: dm-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.dm-hs__side--l .dm-hs__leaf--a { left: 58%; top: 6%; width: 70px; color: #bec8ae; }
.dm-hs__side--l .dm-hs__leaf--b { display: none; }
.dm-hs__side--r .dm-hs__leaf--a { right: 6%; bottom: 6%; width: 110px; color: #cbcdc7; }
.dm-hs__side--r .dm-hs__leaf--b { right: 62%; top: 8%; width: 80px; color: #d4d6d0; animation-delay: -3s; }
.dm-hs__badge { top: 34%; width: clamp(130px, 9.6vw, 170px); padding: 0 24px; background: color-mix(in srgb, var(--tint) 65%, #fff); box-shadow: 0 20px 40px -22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.6); }
.dm-hs__badge strong { font-size: clamp(16px, 1.25vw, 22px); }
.dm-hs__side--l .dm-hs__badge { left: 4%; }
.dm-hs__side--r .dm-hs__badge { right: 4%; }
.dm-hs__nav { top: 50%; }
.dm-hs__side--l .dm-hs__badge { animation: dm-float 5s ease-in-out infinite; }
.dm-hs__side--r .dm-hs__badge { animation: dm-float 5s ease-in-out infinite -2.5s; }
@keyframes dm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.dm-hs__copy { padding-bottom: 130px; }
.dm-hs__title em { font-style: normal; }
/* Compact cards: size picker slides over the photo when the cart button is pressed */
.dm-grid--compact .dm-card { position: relative; }
.dm-grid--compact .dm-card.is-picking .dm-chips { display: flex; position: absolute; z-index: 4; left: 6px; right: 6px; top: auto; bottom: 0; margin: 0; padding: 12px 10px 14px; flex-wrap: wrap; gap: 6px; justify-content: center; background: rgba(255,255,255,.96); border-radius: 0 0 14px 14px; box-shadow: 0 -12px 24px -14px rgba(0,0,0,.4); animation: dm-fade .25s var(--ease); }
.dm-grid--compact .dm-card.is-picking .dm-chips::before { content: "Select size"; width: 100%; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.dm-grid--compact .dm-card.is-picking .dm-chip { min-width: 38px; height: 32px; }
.dm-grid--compact .dm-card.is-picking .dm-qvbtn { opacity: 0; }
/* Category page: filters and the right column scroll on their own */
@media (min-width: 1001px) {
.dm-cl__side, .dm-cl__promo { max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d8dad4 transparent; }
}
/* Hero: arrows below the badges */
.dm-hs__nav { top: 76%; }
.dm-grid--compact .dm-card.is-picking .dm-chips { left: 0; right: 0; }
/* --------------------------------------------------------------------------
Home: category-page look (tinted cards, cut-outs, rounded)
-------------------------------------------------------------------------- */
.dm-cat { border-radius: 18px; }
.dm-cat.has-cut { background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 45%, #fff) 0, var(--tint) 55%, color-mix(in srgb, var(--tint) 80%, #787878) 100%); color: var(--ink); }
.dm-cat.has-cut::after { display: none; }
.dm-cat__leaf { position: absolute; z-index: -1; width: 92px; color: color-mix(in srgb, var(--tint) 50%, #959f85); opacity: .75; animation: dm-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.dm-cat__leaf--a { right: 6%; top: 8%; }
.dm-cat__leaf--b { right: 34%; bottom: -24px; width: 70px; animation-delay: -3s; }
.dm-cat__blob { position: absolute; z-index: -1; right: -6%; bottom: -14%; width: 74%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: transform .9s var(--ease); }
.dm-cat__model { position: absolute; z-index: -1; right: -4%; bottom: 0; height: 88%; width: auto; max-width: 72%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .16)); transition: transform 1s var(--ease); transform-origin: 50% 100%; }
.dm-cat.has-cut:hover .dm-cat__model { transform: translateY(-6px) scale(1.03); }
.dm-cat.has-cut:hover .dm-cat__blob { transform: scale(1.08); }
.dm-cat.has-cut .dm-cat__body { top: clamp(24px, 2.6vw, 48px); bottom: auto; right: 48%; }
.dm-cat.has-cut .dm-cat__title { font-stretch: 112%; font-size: clamp(34px, 3.3vw, 60px); }
.dm-cat__sub { margin-top: 6px; font-family: var(--f-mono); font-size: clamp(12px, .85vw, 15px); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.dm-cat:not(.has-cut) .dm-cat__sub { color: rgba(255, 255, 255, .85); }
.dm-cat.has-cut .dm-cat__text { color: var(--ink-2); max-width: 20ch; }
.dm-cat.has-cut .dm-cat__cta { gap: 12px; height: 44px; padding: 0 8px 0 20px; border-radius: 24px; background: var(--ink); color: #fff; font-size: 12px; transition: padding .35s var(--ease); }
.dm-cat.has-cut .dm-cat__arrow { width: 30px; height: 30px; border: 0; background: #fff; color: var(--ink); }
.dm-cat.has-cut .dm-cat__arrow .dm-icon { width: 15px; height: 15px; }
.dm-cat.has-cut:hover .dm-cat__cta { padding-right: 12px; }
.dm-cat.has-cut:hover .dm-cat__arrow { background: #fff; color: var(--ink); }
.dm-cats__grid { gap: clamp(12px, 1.2vw, 22px); padding: 0 var(--gutter); }
.dm-cats .dm-reveal { transition-delay: calc(var(--d, 0) * .05s); }
@media (max-width: 900px) {
.dm-cat.has-cut { aspect-ratio: 16 / 11; }
.dm-cat.has-cut .dm-cat__body { right: 46%; }
}
@media (max-width: 560px) {
.dm-cat.has-cut { aspect-ratio: 4 / 3.6; }
.dm-cat.has-cut .dm-cat__text { display: none; }
}
/* In Store + Oversized: rounded like the category page */
.dm-tile { border-radius: 16px; }
.dm-tile__btn { border-radius: 24px; }
.dm-ov { margin-inline: var(--gutter); border-radius: 18px; }
.dm-cat__cta { white-space: nowrap; }
@media (min-width: 1101px) { .dm-instore__track { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } }
.dm-ov__card { border-radius: 10px; overflow: hidden; }
/* Home: Our story + promises in the category-page look */
.dm-story { margin-inline: var(--gutter); border-radius: 18px; overflow: hidden; background: #e5e7e1; color: var(--ink); }
.dm-story__media { background: #dadcd6; }
.dm-story__img { transition: transform 1.4s var(--ease); }
.dm-story:hover .dm-story__img { transform: scale(1.03); }
.dm-story__panel { overflow: hidden; isolation: isolate; background: radial-gradient(90% 80% at 100% 100%, rgba(255, 255, 255, .6), transparent 60%), linear-gradient(150deg, #eef0ea 0, #e2e4de 55%, #d7d9d3 100%); }
.dm-story__panel::before { display: none; }
.dm-story__leaf { position: absolute; z-index: -1; width: 110px; color: #b4bea4; opacity: .8; animation: dm-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.dm-story__leaf--a { right: 4%; top: 6%; }
.dm-story__leaf--b { right: 22%; bottom: -34px; width: 80px; animation-delay: -3s; }
.dm-story__script { position: absolute; right: 7%; bottom: 10%; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(34px, 2.6vw, 50px); line-height: .9; transform: rotate(-8deg); color: var(--ink); z-index: 1; }
.dm-story__script .dm-icon { width: 20px; height: 20px; color: #b6fa0e; vertical-align: middle; }
.dm-story .dm-eyebrow { color: var(--ink-2); }
.dm-story__title, body.home .dm-story__title .is-accent { color: var(--ink); }
.dm-story__text { color: var(--ink-2); }
.dm-story__btn.dm-btn--ghost { border: 0; border-radius: 26px; background: var(--ink); color: #fff; min-width: 0; padding-inline: 26px; }
.dm-story__btn.dm-btn--ghost:hover { background: #2b2b2b; color: #fff; }
.dm-story__btn .dm-icon { transition: transform .35s var(--ease); }
.dm-story__btn:hover .dm-icon { transform: translateX(4px); }
.dm-promises { background: transparent; padding-top: clamp(20px, 2vw, 32px); }
.dm-promises__list { gap: clamp(12px, 1.2vw, 20px); max-width: none; }
.dm-promise { padding: clamp(22px, 2vw, 34px) clamp(14px, 1.4vw, 24px); border-radius: 16px; background: linear-gradient(160deg, #f5f7f1 0, #e8eae4 100%); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.dm-promise + .dm-promise { border-left: 0; }
.dm-promise:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .35); }
.dm-promise__icon { box-sizing: content-box; width: 30px; height: 30px; padding: 14px; border-radius: 50%; background: #fff; stroke-width: 1.4; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .25); }
@media (max-width: 900px) {
.dm-story__script { right: 6%; bottom: 5%; font-size: 34px; }
.dm-story__panel { padding-bottom: 88px; }
}
/* --------------------------------------------------------------------------
Cart page + cart sidebar in the category-page look
-------------------------------------------------------------------------- */
.dm-pagehead--tint { position: relative; isolation: isolate; overflow: hidden; align-items: center; margin-top: clamp(18px, 1.8vw, 28px); margin-bottom: clamp(20px, 2vw, 32px); padding: clamp(28px, 2.8vw, 46px) clamp(24px, 3.6vw, 60px); border-radius: 18px; background: linear-gradient(100deg, #eef0ea 0, #e0e2dc 45%, #e9ebe5 100%); }
.dm-pagehead--tint .dm-pagehead__title > * { animation: dm-rise .8s var(--ease) both; }
.dm-pagehead--tint .is-tan { color: #7c7c7c; }
.dm-pagehead__leaf { position: absolute; z-index: -1; width: 96px; color: #b2bca2; opacity: .75; animation: dm-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.dm-pagehead__leaf--a { left: -14px; top: 10px; }
.dm-pagehead__leaf--b { right: 30%; bottom: -40px; width: 80px; animation-delay: -3s; }
.dm-pagehead__script { position: absolute; left: 52%; top: 50%; margin: 0; transform: translate(-50%, -50%) rotate(-8deg); font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(36px, 3vw, 56px); line-height: 1; white-space: nowrap; }
.dm-pagehead__script .dm-icon { width: 22px; height: 22px; color: #b6fa0e; vertical-align: middle; }
.dm-pagehead--tint .dm-pagehead__crumbs { padding: 8px 16px; border-radius: 22px; background: rgba(255, 255, 255, .7); }
@media (max-width: 900px) { .dm-pagehead__script { display: none; } .dm-pagehead--tint { flex-direction: column; align-items: flex-start; } }
.dm-cartpage .dm-cart__form { padding: clamp(10px, 1.2vw, 18px) clamp(14px, 1.6vw, 24px) clamp(18px, 1.6vw, 24px); border: 1px solid rgba(17, 17, 17, .07); border-radius: 18px; background: #fff; box-shadow: 0 10px 30px -24px rgba(45, 45, 45, .35); }
.dm-cartpage .dm-line:last-child { border-bottom: 0; }
.dm-line__img { border-radius: 12px; overflow: hidden; }
.dm-line__fit { border-radius: 20px; padding-inline: 12px; }
.dm-qty { border-radius: 24px; overflow: hidden; }
.dm-cartpage .dm-summary { border-radius: 18px; background: linear-gradient(160deg, #eff1eb 0, #e2e4de 60%, #d9dbd5 100%); box-shadow: none; }
.dm-summary__cta { border-radius: 30px; }
.dm-summary__trust { gap: 10px; }
.dm-summary__trust li { border: 0 !important; border-radius: 14px; background: rgba(255, 255, 255, .7); }
.dm-cartdrawer__panel { background: #fff; border-radius: 18px 0 0 18px; overflow: hidden; }
.dm-cartdrawer__head { position: relative; isolation: isolate; overflow: hidden; margin: -22px -22px 14px; padding: 22px; background: linear-gradient(100deg, #eef0ea 0, #e0e2dc 60%, #e9ebe5 100%); }
.dm-cartdrawer__leaf { position: absolute; z-index: -1; right: 64px; top: -6px; width: 64px; color: #b2bca2; opacity: .8; animation: dm-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.dm-cartdrawer__x { border-radius: 50%; background: #fff; margin-right: 0; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3); }
.dm-cartdrawer__x .dm-icon { width: 18px; height: 18px; }
.dm-ship { border-bottom: 0; padding: 12px 14px; border-radius: 14px; background: #f4f6f0; margin-bottom: 4px; }
.dm-ship__bar { background: #dcded8; }
.dm-dl__item { border-bottom-color: #e8eae4; }
.dm-dl__img, .dm-dsug__img { border-radius: 12px; }
.dm-dl__rm { border-radius: 50%; background: #f4f6f0; }
.dm-dsug ul { gap: 8px; }
.dm-dsug__item { padding: 6px 6px 8px; border-radius: 14px; background: #f4f6f0; }
.dm-dsug__img { border-radius: 10px; }
.dm-atc--mini { border-radius: 50% !important; }
.dm-cartdrawer__foot { margin-inline: -22px; margin-bottom: -18px; padding: 16px 22px 18px; border-top: 0; background: linear-gradient(160deg, #eff1eb 0, #e2e4de 100%); border-radius: 18px 18px 0 0; }
.dm-cartdrawer__cta { border-radius: 30px; }
.dm-cartdrawer__cta .dm-icon { transition: transform .35s var(--ease); }
.dm-cartdrawer__cta:hover .dm-icon { transform: translateX(4px); }
.dm-cartdrawer__ghost { border-radius: 30px; background: #fff; }
.dm-cartdrawer__ghost:hover { background: var(--ink); color: #fff; }
/* ==========================================================================
Cart page v2 (owner ref 27)
========================================================================== */
.dm-cp2, .dm-co2 { --tc: #858585; --tc-d: #727272; --tc-grad: linear-gradient(180deg, #8f997f 0, #7c7c7c 100%); --pink: #f2f4ee; --pink-2: #e8eae4; --green: #2f8a4a; --serif: "Playfair Display", Georgia, serif; }
/* Banner */
.dm-cb2 { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 24%) minmax(0, 1fr) auto auto; align-items: center; gap: clamp(16px, 2vw, 36px); min-height: clamp(150px, 11vw, 190px); margin: clamp(14px, 1.4vw, 22px) 0 clamp(18px, 1.8vw, 28px); padding-right: clamp(20px, 2.4vw, 40px); overflow: hidden; border-radius: 22px; background: radial-gradient(60% 120% at 12% 50%, #e4e6e0 0, transparent 70%), linear-gradient(100deg, #eceee8 0, #f3f5ef 40%, #e9ebe5 100%); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .45); }
.dm-cb2__media { position: relative; align-self: stretch; }
.dm-cb2__model { position: absolute; left: 24%; bottom: -44%; height: 185%; width: auto; max-width: none; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .18)); animation: dm-cb-in 1s var(--ease) both; }
.dm-cb2__leaf { position: absolute; z-index: -1; width: 110px; color: #a6b096; opacity: .55; animation: dm-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.dm-cb2__leaf--a { left: -8px; top: -10px; } .dm-cb2__leaf--b { right: -10px; bottom: -40px; width: 90px; animation-delay: -3s; }
.dm-cb2__copy > * { animation: dm-rise .8s var(--ease) both; }
.dm-cb2__title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 3.4vw, 58px); line-height: 1.05; color: #1d1a18; }
.dm-cb2__title span { color: var(--tc); }
.dm-cb2__text { margin: 8px 0 0; font-size: clamp(15px, 1.2vw, 20px); color: #5b5552; animation-delay: .1s; }
.dm-cb2__script { margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(34px, 2.8vw, 52px); line-height: .95; max-width: 4.4em; transform: rotate(-10deg); color: #262626; }
.dm-cb2__script .dm-icon { width: 24px; height: 24px; color: #b6fa0e; vertical-align: middle; }
.dm-cb2__trust { list-style: none; display: flex; margin: 0; padding: 0 0 0 clamp(16px, 1.6vw, 28px); border-left: 1px solid rgba(0, 0, 0, .25); }
.dm-cb2__trust li { display: flex; flex-direction: column; align-items: center; gap: 8px; width: clamp(96px, 7.6vw, 140px); text-align: center; font-size: 14.5px; font-weight: 500; line-height: 1.25; }
.dm-cb2__trust li + li { border-left: 1px solid rgba(0, 0, 0, .25); }
.dm-cb2__trust span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .5); }
.dm-cb2__trust .dm-icon { width: 24px; height: 24px; stroke-width: 1.5; }
/* Layout */
.dm-cp2 div.dm-cart2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 31%); gap: clamp(16px, 1.6vw, 28px); align-items: start; }
.dm-cp2 .dm-cart2__main { min-width: 0; }
.dm-cp2 .dm-cart2__card { padding: clamp(16px, 1.6vw, 26px) clamp(16px, 1.8vw, 28px) 8px; border: 1px solid #e8eae4; border-radius: 18px; background: #fff; box-shadow: 0 14px 34px -26px rgba(0, 0, 0, .4); }
.dm-cart2__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; }
.dm-cart2__head h2 { margin: 0; font-size: clamp(20px, 1.5vw, 24px); font-weight: 700; }
.dm-cart2__head small { font-size: .8em; font-weight: 400; color: #6d6663; }
.dm-cart2__clear { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--tc); }
.dm-cart2__clear .dm-icon { width: 17px; height: 17px; }
.dm-cart2__clear:hover { color: var(--tc-d); text-decoration: underline; }
.dm-line2 { display: grid; grid-template-columns: clamp(84px, 8vw, 120px) minmax(0, 1fr) auto clamp(80px, 7vw, 110px); align-items: center; gap: clamp(12px, 1.6vw, 26px); padding: 14px 0; border-top: 1px solid #eceee8; }
.dm-line2__img { display: block; aspect-ratio: 1 / .9; overflow: hidden; border-radius: 12px; background: #f0f2ec; }
.dm-line2__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform .6s var(--ease); }
.dm-line2:hover .dm-line2__img img { transform: scale(1.05); }
.dm-line2__info { min-width: 0; }
.dm-line2__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: clamp(15.5px, 1.1vw, 18px); font-weight: 600; }
.dm-line2__name a:hover { color: var(--tc); }
.dm-line2__badge { padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; background: #f0f2ec; color: #d4574a; }
.dm-line2__badge.is-trending { background: #e3f4e5; color: #2f8a4a; }
.dm-line2__badge.is-new { background: #f0f2ec; color: #b6fa0e; }
.dm-line2__badge.is-limited { background: #eaece6; color: #9a6b37; }
.dm-line2__attrs { margin: 5px 0 0; font-size: 13.5px; color: #8a827e; }
.dm-line2__attrs i { font-style: normal; margin: 0 6px; color: #c2ccb2; }
.dm-line2__price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 7px 0 0; }
.dm-line2__price strong { font-size: 17px; font-weight: 700; }
.dm-line2__price del { font-size: 14px; color: #9b938f; }
.dm-line2__off { padding: 2px 8px; border-radius: 6px; background: #eff1eb; color: #d4574a; font-size: 12.5px; font-weight: 600; }
.dm-line2__links { display: flex; gap: 22px; margin: 9px 0 0; font-size: 13.5px; }
.dm-line2__links a { display: inline-flex; align-items: center; gap: 6px; color: #6f6865; text-decoration: none !important; }
.dm-line2__links a:hover { color: var(--tc); }
.dm-line2__links .dm-icon { width: 16px; height: 16px; }
.dm-cp2 .dm-line2 a.remove { width: auto; height: auto; font-size: 13.5px; font-weight: 400; line-height: inherit; border-radius: 0; color: #6f6865 !important; background: none !important; }
.dm-cp2 .dm-line2 a.remove:hover { color: var(--tc) !important; }
.dm-line2__qty .dm-qty { height: 40px; border: 1px solid #dadcd6; border-radius: 10px; box-shadow: 0 4px 10px -8px rgba(0, 0, 0, .3); }
.dm-line2__qty .dm-qty__btn { width: 38px; font-size: 18px; }
.dm-line2__qty .dm-qty__input { width: 34px; font-weight: 600; }
.dm-line2__total { text-align: right; font-size: 17px; font-weight: 700; }
.dm-cart2__actions { padding: 0; }
/* You may also like */
.dm-suggest2 { margin-top: clamp(22px, 2.2vw, 34px); }
.dm-suggest2__head h2 { margin: 0; font-size: clamp(19px, 1.4vw, 23px); font-weight: 700; }
.dm-suggest2__head p { margin: 4px 0 14px; font-size: 14.5px; color: #6d6663; }
.dm-suggest2 .dm-carousel__track { --cols: 4; --gap: 16px; padding: 4px 2px 18px; scroll-padding-inline: 2px; }
.dm-suggest2 .dm-carousel__nav { width: 44px; height: 44px; }
.dm-suggest2 .dm-carousel__nav--prev { left: -16px; } .dm-suggest2 .dm-carousel__nav--next { right: -16px; }
@media (max-width: 1100px) { .dm-suggest2 .dm-carousel__track { --cols: 2.3; } }
/* Summary column */
.dm-cp2 .dm-cart2__side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--header-h) + 16px); }
.dm-cp2 .dm-sum2 { padding: clamp(18px, 1.6vw, 24px); border: 1px solid #e6e8e2; border-radius: 18px; background: linear-gradient(180deg, #f7f9f3 0, #f2f4ee 100%); box-shadow: 0 14px 34px -26px rgba(0, 0, 0, .45); }
.dm-sum2__title { margin: 0 0 14px; font-size: clamp(19px, 1.4vw, 22px); font-weight: 700; }
.dm-sum2__box { padding: 14px 16px 12px; border-radius: 14px; background: #fff; }
.dm-sum2__rows { margin: 0; }
.dm-sum2__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 15.5px; }
.dm-sum2__row dt { color: #363636; }
.dm-sum2__row dd { margin: 0; text-align: right; }
.dm-sum2__row.is-green dt, .dm-sum2__row.is-green dd { color: var(--green); font-weight: 600; }
.dm-sum2 .dm-free { color: var(--green); font-weight: 700; letter-spacing: .02em; }
.dm-sum2__total { margin-top: 10px; padding-top: 14px; border-top: 1px solid #e8eae4; align-items: baseline; }
.dm-sum2__total dt { font-size: 17px; font-weight: 700; color: #1d1a18; }
.dm-sum2__total dd { font-size: clamp(22px, 1.7vw, 27px); font-weight: 800; }
.dm-sum2__save { margin: 2px 0 0; text-align: right; font-size: 14px; color: var(--green); }
.dm-sum2__cta { display: flex; align-items: center; justify-content: center; gap: 12px; height: 54px; margin-top: 14px; border-radius: 12px; background: var(--tc-grad); color: #fff !important; font-size: 17px; font-weight: 600; box-shadow: 0 12px 24px -14px rgba(110, 110, 110, .8); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.dm-sum2__cta .dm-icon { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.dm-sum2__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(110, 110, 110, .9); }
.dm-sum2__cta:hover .dm-icon { transform: translateX(4px); }
.dm-cp2 .wc-proceed-to-checkout a.checkout-button { padding: 0; margin: 14px 0 0; font-size: 17px; }
.dm-sum2__coupon { margin-top: 14px; padding: 0 16px; border-radius: 14px; background: #fff; }
.dm-sum2__coupon summary { display: flex; align-items: center; gap: 10px; padding: 14px 0; font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; }
.dm-sum2__coupon summary::-webkit-details-marker { display: none; }
.dm-sum2__coupon summary .dm-icon { width: 20px; height: 20px; }
.dm-sum2__chev { margin-left: auto; transform: rotate(90deg); transition: transform .3s; width: 16px !important; }
.dm-sum2__coupon[open] .dm-sum2__chev { transform: rotate(-90deg); }
.dm-sum2__cform { display: flex; gap: 10px; padding: 0 0 16px 30px; }
.dm-sum2__cform input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #dadcd6; border-radius: 8px; font-size: 14.5px; }
.dm-sum2__cform input:focus { outline: 0; border-color: var(--tc); }
.dm-sum2__cform button, .dm-co2 .dm-coupon__btn { height: 42px; padding: 0 22px; border-radius: 8px; background: var(--tc-grad); color: #fff; font-weight: 600; font-size: 15px; }
.dm-sum2__cform button:hover, .dm-co2 .dm-coupon__btn:hover { filter: brightness(1.06); }
.dm-sum2__trust { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; padding: 12px 6px; border-radius: 14px; background: #fff; }
.dm-sum2__trust li { display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 11.5px; line-height: 1.3; color: #7a726e; }
.dm-sum2__trust li + li { border-left: 1px solid #e7e9e3; }
.dm-sum2__trust .dm-icon { flex: none; width: 26px; height: 26px; stroke-width: 1.4; color: #262626; }
.dm-sum2__trust strong { display: block; font-size: 12.5px; font-weight: 600; color: #262626; }
.dm-cart2__help { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid #e8eae4; border-radius: 16px; background: #fff; }
.dm-cart2__helpico .dm-icon { width: 34px; height: 34px; stroke-width: 1.3; }
.dm-cart2__help p { flex: 1; margin: 0; font-size: 14px; color: #6d6663; }
.dm-cart2__help strong { display: block; font-size: 17px; color: #1d1a18; }
.dm-cart2__help a { flex: none; padding: 10px 20px; border: 1px solid var(--tc); border-radius: 8px; color: var(--tc); font-weight: 500; font-size: 14.5px; transition: background .25s, color .25s; }
.dm-cart2__help a:hover { background: var(--tc); color: #fff; }
.dm-cart2__promo { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; min-height: 230px; padding: 26px 28px; overflow: hidden; border-radius: 18px; background: linear-gradient(110deg, #eceee8 0, #e3e5df 100%); }
.dm-cart2__pimg { position: absolute; z-index: -1; right: -2%; bottom: -60%; height: 175%; width: auto; max-width: none; transition: transform .8s var(--ease); }
.dm-cart2__promo:hover .dm-cart2__pimg { transform: translateY(-6px); }
.dm-cart2__pleaf { position: absolute; z-index: -1; width: 120px; color: #b0baa0; opacity: .7; animation: dm-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.dm-cart2__pleaf--a { left: 36%; top: -4px; } .dm-cart2__pleaf--b { left: -20px; bottom: -40px; width: 90px; animation-delay: -3s; }
.dm-cart2__ptitle { max-width: 5.2em; font-family: var(--serif); font-size: clamp(30px, 2.4vw, 40px); font-weight: 600; line-height: 1.02; color: var(--tc); }
.dm-cart2__pbtn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 24px; background: var(--tc-grad); color: #fff; font-size: 13.5px; font-weight: 500; box-shadow: 0 10px 20px -12px rgba(110, 110, 110, .8); }
.dm-cart2__pbtn .dm-icon { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.dm-cart2__promo:hover .dm-cart2__pbtn .dm-icon { transform: translateX(4px); }
@media (max-width: 1100px) {
.dm-cb2 { grid-template-columns: minmax(0, 26%) minmax(0, 1fr) auto; }
.dm-cb2__script { display: none; }
.dm-cp2 div.dm-cart2 { grid-template-columns: 1fr; }
.dm-cp2 .dm-cart2__side { position: static; }
}
@media (max-width: 760px) {
.dm-cb2 { grid-template-columns: 34% minmax(0, 1fr); padding: 18px 14px 0 0; row-gap: 12px; }
.dm-cb2__trust { grid-column: 1 / -1; justify-content: space-around; padding: 12px 0 14px; border-left: 0; border-top: 1px solid rgba(0, 0, 0, .2); background: rgba(255, 255, 255, .55); }
.dm-cb2__media { grid-row: 1; min-height: 130px; }
.dm-cb2__model { left: 10%; bottom: -30%; height: 150%; }
.dm-line2 { grid-template-columns: 84px minmax(0, 1fr); row-gap: 10px; }
.dm-line2__qty { grid-column: 2; }
.dm-line2__total { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
.dm-suggest2 .dm-carousel__track { --cols: 1.6; }
.dm-sum2__trust li { flex-direction: column; text-align: center; }
}
.dm-cb2__model { left: 30%; top: -6%; bottom: auto; height: 330%; }
.dm-cp2 .wc-proceed-to-checkout a.checkout-button.dm-sum2__cta { display: flex; height: 54px; border-radius: 12px; background: var(--tc-grad); color: #fff; font-family: inherit; font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.dm-cp2 .wc-proceed-to-checkout a.checkout-button.dm-sum2__cta:hover { background: var(--tc-grad); }
.dm-cart2__pimg { top: 8%; bottom: auto; right: -4%; height: 210%; }
@media (max-width: 760px) { .dm-cb2__model { left: 14%; top: -4%; height: 300%; } }
.dm-cart2__pimg { top: 5%; right: 0; height: 150%; } .dm-cart2__ptitle, .dm-cart2__pbtn { position: relative; z-index: 1; }
.dm-cart2__promo .dm-cart2__pimg { height: 340px; top: 12px; right: 0; }
/* ==========================================================================
Checkout v2 (owner ref 26)
========================================================================== */
.dm-co2 { position: relative; display: grid; grid-template-columns: minmax(0, 17.5%) minmax(0, 1fr); gap: clamp(14px, 1.4vw, 24px); padding: clamp(14px, 1.2vw, 20px) var(--gutter) clamp(48px, 5vw, 90px) 0; overflow: hidden; background: radial-gradient(40% 50% at 0 10%, #eef0ea 0, transparent 70%), radial-gradient(30% 40% at 100% 20%, #f1f3ed 0, transparent 70%), #fff; }
.dm-co2__body { min-width: 0; }
.dm-co2__body > .woocommerce { margin: 0; }
/* Left decoration */
.dm-co2__deco { position: relative; display: flex; flex-direction: column; min-width: 0; }
.dm-co2__photo { position: relative; isolation: isolate; height: clamp(560px, 50vw, 780px); overflow: hidden; border-radius: 0 0 60% 0 / 0 0 12% 0; background: radial-gradient(90% 60% at 30% 40%, #eaece6 0, #f4f6f0 60%, transparent 100%); }
.dm-co2__model { position: absolute; left: -8%; bottom: 0; height: 92%; width: auto; max-width: none; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); animation: dm-cb-in 1s var(--ease) both; }
.dm-co2__leaf { position: absolute; z-index: -1; width: 120px; color: #b5bfa5; opacity: .75; animation: dm-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.dm-co2__leaf--a { left: 4px; top: 10px; } .dm-co2__leaf--b { right: -10px; top: 38%; width: 90px; animation-delay: -3s; }
.dm-co2__script { position: absolute; z-index: 2; left: 22%; top: 2.5%; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(30px, 2.3vw, 44px); line-height: .95; max-width: 4em; transform: rotate(-16deg); color: #262626; }
.dm-co2__script .dm-icon { width: 20px; height: 20px; color: #b6fa0e; vertical-align: middle; }
.dm-co2__perks { list-style: none; margin: 18px 0 0; padding: 0 0 0 clamp(16px, 2.4vw, 56px); display: grid; gap: 14px; }
.dm-co2__perks li { display: flex; align-items: center; gap: 14px; }
.dm-co2__perks span { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #dee0da; background: #fff; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .5); }
.dm-co2__perks .dm-icon { width: 24px; height: 24px; stroke-width: 1.4; }
.dm-co2__perks p { margin: 0; font-size: 14px; color: #7a726e; line-height: 1.3; }
.dm-co2__perks strong { display: block; font-size: 16px; font-weight: 500; color: #1d1a18; }
.dm-co2__right { display: none; }
@media (min-width: 1500px) {
.dm-co2 { grid-template-columns: minmax(0, 17%) minmax(0, 1fr) 90px; padding-right: 0; }
.dm-co2__right { display: block; position: relative; }
.dm-co2__script--r { left: -10px; top: 10px; transform: rotate(-14deg); font-size: 40px; }
.dm-co2__leaf--c { left: 10px; top: 220px; width: 90px; }
}
/* Form grid: middle + summary */
.dm-co2 form.dm-co2__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); gap: clamp(14px, 1.4vw, 22px); align-items: start; }
.dm-co2 .dm-co__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dm-co2 .dm-co__side { position: sticky; top: calc(var(--header-h) + 14px); min-width: 0; }
.dm-steps2 { list-style: none; display: flex; justify-content: space-between; margin: 0 0 4px; padding: 0 5%; }
.dm-steps2 li, .dm-steps2 a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; font-size: 15px; font-weight: 500; color: #9a938f; }
.dm-steps2 li + li::before { content: ""; position: absolute; top: 18px; right: calc(50% + 28px); width: calc(100% - 56px); height: 2px; background: #e0e2dc; }
.dm-steps2 li.is-active::before { background: linear-gradient(90deg, #9ca68c, #e0e2dc); }
.dm-steps2 span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #dadcd6; background: #fff; font-size: 15px; color: #7c7470; }
.dm-steps2 .is-done, .dm-steps2 .is-done a, .dm-steps2 .is-active { color: #1d1a18; }
.dm-steps2 .is-done span { border-color: var(--tc); background: var(--tc-grad); color: #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7); }
.dm-steps2 .is-active span { border-color: #1d1a18; color: #1d1a18; }
.dm-co2__card { padding: clamp(18px, 1.6vw, 26px); border: 1px solid #eceee8; border-radius: 16px; background: #fff; box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .45); }
.dm-co2__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.dm-co2__head h2 { margin: 0; font-size: clamp(19px, 1.45vw, 23px); font-weight: 700; }
.dm-co2__login { margin: 0; font-size: 14px; color: #464646; }
.dm-co2__login a { color: var(--tc); text-decoration: underline; text-underline-offset: 3px; }
.dm-co2 .dm-fields { column-gap: 14px; row-gap: 14px; }
.dm-co2 .dm-fields .dm-col-3 { grid-column: span 3; } .dm-co2 .dm-fields .dm-col-5 { grid-column: span 5; } .dm-co2 .dm-fields .dm-col-7 { grid-column: span 7; } .dm-co2 .dm-fields .dm-col-4 { grid-column: span 4; }
.dm-co2 .form-row label { margin-bottom: 6px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #2b2b2b; }
.dm-co2 .form-row .required { color: #d4574a; text-decoration: none; }
.dm-co2 input.input-text, .dm-co2 select, .dm-co2 .select2-container .select2-selection--single { height: 46px; border: 1px solid #dee0da; border-radius: 8px; background: #fff; font-size: 15px; }
.dm-co2 input.input-text:focus { border-color: var(--tc); box-shadow: 0 0 0 3px rgba(0, 0, 0, .14); }
.dm-co2 .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px; }
.dm-co2 .dm-pinfield input.input-text { padding-right: 40px; background: #fff url("data:image/svg+xml;utf8,") no-repeat right 12px center / 18px; }
.dm-co2__pinmsg { margin: 8px 0 0; font-size: 13.5px; color: var(--green); }
.dm-co2__pinmsg:empty { display: none; }
.dm-co2__pinmsg.is-error { color: #c0392b; }
.dm-co2 .dm-co__account { margin-top: 14px; }
.dm-co2 .dm-check { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.dm-co2 .dm-check input { width: 20px; height: 20px; accent-color: var(--tc); }
/* Delivery cards */
.dm-delivery__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0; padding: 0; }
.dm-dcard { position: relative; }
.dm-dcard input { position: absolute; opacity: 0; pointer-events: none; }
.dm-dcard label { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px 14px 44px; border: 1px solid #e4e6e0; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .25s, background .25s, box-shadow .25s; }
.dm-dcard label > .dm-icon { flex: none; width: 30px; height: 30px; stroke-width: 1.4; }
.dm-dcard__txt { flex: 1; display: flex; flex-direction: column; font-size: 13.5px; color: #8a827e; }
.dm-dcard__txt strong { font-size: 15px; font-weight: 600; color: #1d1a18; }
.dm-dcard__cost { font-weight: 700; font-size: 15px; }
.dm-dcard__tick { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cfd1cb; background: #fff; }
.dm-dcard__tick .dm-icon { width: 13px; height: 13px; stroke-width: 3; color: #fff; opacity: 0; }
.dm-dcard input:checked + label { border-color: var(--tc); background: #f6f8f2; box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .7); }
.dm-dcard input:checked + label .dm-dcard__tick { border-color: var(--tc); background: var(--tc); }
.dm-dcard input:checked + label .dm-dcard__tick .dm-icon { opacity: 1; }
.dm-dcard input:focus-visible + label { outline: 2px solid var(--tc); outline-offset: 2px; }
.dm-delivery__none { margin: 0; font-size: 14.5px; color: #7a726e; }
/* Payment rows */
.dm-co2 .dm-pay-methods ul.payment_methods { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; list-style: none; }
.dm-co2 .dm-pm2 { position: relative; margin: 0; padding: 0; border: 0; background: none; }
.dm-co2 .dm-pm2 > input { position: absolute; opacity: 0; pointer-events: none; }
.dm-pm2__label { display: flex !important; align-items: center; gap: 16px; min-height: 58px; margin: 0 !important; padding: 10px 16px; border: 1px solid #e4e6e0; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .25s, background .25s; }
.dm-pm2__dot { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #c1cbb1; }
.dm-pm2__dot .dm-icon { width: 13px; height: 13px; stroke-width: 3; color: #fff; opacity: 0; }
.dm-pm2__ico .dm-icon { width: 28px; height: 28px; stroke-width: 1.4; }
.dm-pm2__text { flex: 1; display: flex; flex-direction: column; font-size: 13.5px; color: #8a827e; }
.dm-pm2__text strong { font-size: 15.5px; font-weight: 600; color: #1d1a18; }
.dm-pm2__logos { display: flex; gap: 6px; }
.dm-pm2__logos i { display: grid; place-items: center; min-width: 44px; height: 30px; padding: 0 6px; border: 1px solid #e6e8e2; border-radius: 6px; font-style: normal; font-weight: 800; font-size: 11.5px; letter-spacing: .02em; background: #fff; }
.dm-pm2__logos .is-upi { color: #5b2b88; } .dm-pm2__logos .is-visa { color: #1a1f71; font-style: italic; } .dm-pm2__logos .is-rupay { color: #0a6b3c; font-style: italic; }
.dm-pm2__chev { width: 16px !important; height: 16px !important; color: #6d6663; }
.dm-co2 .dm-pm2 > input:checked + .dm-pm2__label { border-color: var(--tc); background: #f6f8f2; }
.dm-co2 .dm-pm2 > input:checked + .dm-pm2__label .dm-pm2__dot { border-color: var(--tc); background: var(--tc); }
.dm-co2 .dm-pm2 > input:checked + .dm-pm2__label .dm-pm2__dot .dm-icon { opacity: 1; }
.dm-co2 .dm-pm2 .payment_box { margin: 8px 0 0; padding: 12px 16px; border-radius: 10px; background: #f6f8f2; font-size: 14px; }
.dm-co2 .dm-pm2 .payment_box::before { display: none; }
/* Summary */
.dm-co2__sum { padding: clamp(16px, 1.4vw, 22px); border: 1px solid #e8eae4; border-radius: 18px; background: linear-gradient(180deg, #f6f8f2 0, #f2f4ee 100%); box-shadow: 0 14px 34px -26px rgba(0, 0, 0, .45); }
.dm-co2 .dm-rv2 { border: 0; margin: 0; }
.dm-rv2__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.dm-rv2__head h2 { margin: 0; font-size: clamp(19px, 1.45vw, 23px); font-weight: 700; }
.dm-rv2__head small { font-size: .78em; font-weight: 400; color: #7a726e; }
.dm-rv2__head a { font-size: 14.5px; color: var(--tc); }
.dm-rv2__head a:hover { text-decoration: underline; }
.dm-rv2__items { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.dm-rv2__item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; background: #fff; }
.dm-rv2__img { display: block; aspect-ratio: 1 / .92; overflow: hidden; border-radius: 10px; background: #f0f2ec; }
.dm-rv2__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.dm-rv2__name { margin: 0; font-size: 15px; font-weight: 500; }
.dm-rv2__attrs { margin: 3px 0 0; font-size: 12.5px; color: #8a827e; }
.dm-rv2__attrs i { font-style: normal; margin: 0 5px; color: #c4ceb4; }
.dm-rv2__row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.dm-rv2 .dm-qty--sm { height: 36px; border: 1px solid #dee0da; border-radius: 8px; }
.dm-rv2 .dm-qty__btn { width: 32px; font-size: 17px; }
.dm-rv2 .dm-qty__val { min-width: 26px; text-align: center; font-weight: 600; }
.dm-rv2__rm { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #363636; transition: color .2s, background .2s; }
.dm-rv2__rm:hover { color: #c0392b; background: #f2f4ee; }
.dm-rv2__rm .dm-icon { width: 18px; height: 18px; }
.dm-rv2__price { padding-right: 6px; font-size: 16.5px; font-weight: 700; }
.dm-rv2__coupon { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; }
.dm-rv2__clabel { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14.5px; font-weight: 600; }
.dm-rv2__clabel .dm-icon { width: 18px; height: 18px; }
.dm-co2 .dm-coupon { display: flex; gap: 10px; margin: 0; }
.dm-co2 .dm-coupon__input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #dee0da; border-radius: 8px; font-size: 14px; }
.dm-co2 .dm-coupon__btn { height: 40px; }
.dm-rv2__rows { margin: 12px 0 0; padding: 4px 6px 0; }
.dm-rv2__rows .dm-sum2__row { font-size: 15px; padding: 3px 0; }
.dm-rv2__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding: 12px 10px; border-radius: 10px; background: #ebede7; }
.dm-rv2__total dt { font-size: 17px; font-weight: 700; }
.dm-rv2__total dd { margin: 0; font-size: 22px; font-weight: 800; }
.dm-co2 .dm-co__place { margin: 14px 0 0; padding: 0; }
.dm-co2 #place_order.dm-co2__place { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 56px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--tc-grad); color: #fff; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: 0 14px 26px -14px rgba(110, 110, 110, .9); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.dm-co2 #place_order.dm-co2__place::before, .dm-co2 #place_order.dm-co2__place::after { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--m) no-repeat center / contain; mask: var(--m) no-repeat center / contain; }
.dm-co2 #place_order.dm-co2__place::before { --m: url("data:image/svg+xml;utf8,"); }
.dm-co2 #place_order.dm-co2__place::after { --m: url("data:image/svg+xml;utf8,"); transition: transform .3s var(--ease); }
.dm-co2 #place_order.dm-co2__place:hover { transform: translateY(-2px); }
.dm-co2 #place_order.dm-co2__place:hover::after { transform: translateX(4px); }
.dm-co2 .dm-co__legal { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: #7a726e; }
.dm-co2 .dm-co__legal a { color: var(--tc); }
.dm-co2__trust { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; padding: 0; }
.dm-co2__trust li { display: flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 13.5px; font-weight: 500; line-height: 1.25; }
.dm-co2__trust li + li { border-left: 1px solid #e4e6e0; }
.dm-co2__trust .dm-icon { flex: none; width: 30px; height: 30px; stroke-width: 1.4; }
@media (max-width: 1280px) {
.dm-co2 { grid-template-columns: minmax(0, 1fr); padding-left: var(--gutter); }
.dm-co2__deco { display: none; }
}
@media (max-width: 1000px) {
.dm-co2 form.dm-co2__form { grid-template-columns: 1fr; }
.dm-co2 .dm-co__side { position: static; }
}
@media (max-width: 640px) {
.dm-co2 .dm-fields .form-row { grid-column: span 12 !important; }
.dm-co2 .dm-fields .dm-col-hide { display: none; }
.dm-rv2__item { grid-template-columns: 72px minmax(0, 1fr); }
.dm-rv2__price { grid-column: 2; }
.dm-co2__trust li { flex-direction: column; text-align: center; font-size: 12px; }
.dm-pm2__logos { display: none; }
.dm-steps2 { padding: 0; }
}
.dm-co2 #billing_first_name_field { grid-column: span 5; } .dm-co2 #billing_phone_field { grid-column: span 4; } .dm-co2 #billing_postcode_field { grid-column: span 3; }
.dm-co2 #billing_address_1_field { grid-column: span 7; } .dm-co2 #billing_address_2_field { grid-column: span 5; }
.dm-co2 #billing_city_field, .dm-co2 #billing_state_field, .dm-co2 #billing_email_field { grid-column: span 4; }
@media (max-width: 640px) { .dm-co2 .dm-fields > .form-row[id] { grid-column: span 12; } }
.dm-co2 ul#shipping_method.dm-delivery__list { display: grid; margin: 0; padding: 0; }
.dm-co2 ul#shipping_method li.dm-dcard { margin: 0; padding: 0; text-indent: 0; line-height: 1.3; }
.dm-co2 ul#shipping_method li.dm-dcard label { display: flex; margin: 0; }
.dm-co2 ul#shipping_method li.dm-dcard input { position: absolute; margin: 0; opacity: 0; }
.dm-co2 .dm-co2__photo .dm-co2__model { left: -20px; bottom: 0; height: 660px; }
.dm-co2 .dm-coupon__btn { text-transform: none; letter-spacing: 0; font-family: inherit; }
@keyframes dm-co2-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.dm-co2 .dm-co2__photo .dm-co2__model { animation: dm-co2-in 1s var(--ease) both; left: 0; }
/* Owner: cart + checkout buttons stay black */
.dm-cp2 .wc-proceed-to-checkout a.checkout-button.dm-sum2__cta, .dm-cp2 .wc-proceed-to-checkout a.checkout-button.dm-sum2__cta:hover,
.dm-sum2__cform button, .dm-co2 .dm-coupon__btn, .dm-cart2__pbtn, .dm-co2 #place_order.dm-co2__place { background: #111; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6); }
.dm-cp2 .wc-proceed-to-checkout a.checkout-button.dm-sum2__cta:hover, .dm-sum2__cform button:hover, .dm-co2 .dm-coupon__btn:hover, .dm-cart2__promo:hover .dm-cart2__pbtn, .dm-co2 #place_order.dm-co2__place:hover { background: #2b2b2b; filter: none; }
.dm-cart2__help a { border-color: #111; color: #111; }
.dm-cart2__help a:hover { background: #111; color: #fff; }
/* ==========================================================================
Home: Explore our collections (owner ref)
========================================================================== */
.dm-cats2 { position: relative; isolation: isolate; overflow: hidden; margin: clamp(24px, 3vw, 56px) var(--gutter) 0; padding: clamp(36px, 3.4vw, 60px) clamp(16px, 2vw, 36px) clamp(30px, 3vw, 50px); border-radius: 22px; background: radial-gradient(60% 50% at 50% 0, #f4f6f0 0, transparent 70%), #f8faf4; }
.dm-cats2__leaf { position: absolute; z-index: -1; left: 4%; top: 18px; width: 150px; color: #b2bca2; transform: rotate(-24deg); animation: dm-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.dm-cats2__script { position: absolute; right: 5%; top: 30px; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(34px, 3vw, 56px); line-height: .95; max-width: 4em; transform: rotate(-12deg); color: #1d1a18; }
.dm-cats2__script .dm-icon { width: 24px; height: 24px; color: #b6fa0e; vertical-align: middle; }
.dm-cats2__head { max-width: 760px; margin: 0 auto clamp(24px, 2.4vw, 40px); text-align: center; }
.dm-cats2__eyebrow { display: inline-flex; align-items: center; gap: 14px; margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #363636; }
.dm-cats2__eyebrow::before, .dm-cats2__eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.dm-cats2__title { margin: 10px 0 0; font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: clamp(36px, 3.8vw, 66px); line-height: 1.05; color: #111; }
.dm-cats2__text { margin: 10px 0 0; font-size: clamp(15px, 1.2vw, 19px); color: #5b5552; }
.dm-cats2__big { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.dm-ccard { position: relative; isolation: isolate; display: block; aspect-ratio: 36 / 39; overflow: hidden; border-radius: 18px; background: linear-gradient(170deg, color-mix(in srgb, var(--tint) 55%, #fff) 0, var(--tint) 100%); box-shadow: 0 16px 34px -26px rgba(0, 0, 0, .55); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.dm-ccard:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6); }
.dm-ccard__arch { position: absolute; z-index: -1; left: 16%; right: 16%; top: 7%; bottom: 0; border-radius: 999px 999px 0 0; background: rgba(255, 255, 255, .38); }
.dm-ccard__leaf { position: absolute; z-index: -1; right: 6%; top: 34%; width: 80px; color: color-mix(in srgb, var(--tint) 45%, #767676); opacity: .5; animation: dm-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.dm-ccard__model { position: absolute; z-index: 0; left: 50%; top: 4%; width: auto; max-width: none; height: 118%; transform: translateX(-50%); filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .2)); transition: transform .8s var(--ease); }
.dm-ccard:hover .dm-ccard__model { transform: translateX(-50%) scale(1.04); }
.dm-ccard__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .8s var(--ease); }
.dm-ccard:hover .dm-ccard__photo { transform: scale(1.05); }
.dm-ccard__wave { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; width: 100%; height: 36%; fill: color-mix(in srgb, var(--tint) 35%, #fff); opacity: .96; }
.dm-ccard__foot { position: absolute; z-index: 2; left: clamp(16px, 1.6vw, 26px); bottom: clamp(16px, 1.6vw, 26px); display: flex; flex-direction: column; }
.dm-ccard__name { font-family: "Playfair Display", Georgia, serif; font-size: clamp(20px, 1.7vw, 28px); font-weight: 600; line-height: 1.1; color: #1d1a18; }
.dm-ccard__count { margin-top: 4px; font-size: clamp(13.5px, 1vw, 16px); color: color-mix(in srgb, var(--tint) 25%, #6b6b6b); }
.dm-ccard__go, .dm-scard__go { position: absolute; z-index: 2; display: grid; place-items: center; border-radius: 50%; background: #111; color: #fff; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); transition: transform .35s var(--ease), background .3s; }
.dm-ccard__go { right: clamp(14px, 1.4vw, 22px); bottom: clamp(16px, 1.6vw, 26px); width: clamp(44px, 3.6vw, 56px); height: clamp(44px, 3.6vw, 56px); }
.dm-ccard__go .dm-icon { width: 22px; height: 22px; stroke-width: 1.8; transition: transform .35s var(--ease); }
.dm-ccard:hover .dm-ccard__go .dm-icon, .dm-scard:hover .dm-scard__go .dm-icon { transform: translateX(3px); }
.dm-cats2__small { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 18px); margin-top: clamp(14px, 1.4vw, 22px); }
.dm-scard { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .55); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.dm-scard:hover { transform: translateY(-5px); box-shadow: 0 22px 36px -24px rgba(0, 0, 0, .6); }
.dm-scard__media { display: block; aspect-ratio: 23 / 19; overflow: hidden; background: #eceee8; }
.dm-scard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .8s var(--ease); }
.dm-scard:hover .dm-scard__media img { transform: scale(1.06); }
.dm-scard__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 14px 18px; }
.dm-scard__foot > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.dm-scard__name { font-size: clamp(14.5px, 1.1vw, 17px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-scard__count { margin-top: 2px; font-size: 13px; color: #8a827e; }
.dm-scard__go { position: static; flex: none; width: 40px; height: 40px; }
.dm-scard__go .dm-icon { width: 18px; height: 18px; stroke-width: 1.8; transition: transform .35s var(--ease); }
.dm-cats2__more { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 34px); margin-top: clamp(24px, 2.4vw, 40px); }
.dm-cats2__swirl { width: min(28vw, 360px); height: 40px; fill: none; stroke: #bdc7ad; stroke-width: 1.2; }
.dm-cats2__swirl.is-flip { transform: scaleX(-1); }
.dm-cats2__btn { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 34px; border-radius: 30px; background: #111; color: #fff; font-size: 16.5px; font-weight: 500; box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .6); transition: background .3s, transform .3s var(--ease); }
.dm-cats2__btn .dm-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.dm-cats2__btn:hover { background: #2b2b2b; transform: translateY(-2px); }
.dm-cats2__btn:hover .dm-icon { transform: translateX(4px); }
@media (max-width: 1100px) {
.dm-cats2__big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-cats2__small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-cats2__script { display: none; }
}
@media (max-width: 640px) {
.dm-cats2 { margin-inline: 0; border-radius: 0; padding-inline: var(--gutter); }
.dm-cats2__leaf { width: 90px; left: -10px; }
.dm-cats2__small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-ccard__go { width: 38px; height: 38px; }
.dm-cats2__swirl { display: none; }
}
@media (max-width: 640px) {
.dm-ccard__name { font-size: 18px; max-width: calc(100% - 44px); }
.dm-ccard__go { right: 10px; bottom: 14px; width: 34px; height: 34px; }
.dm-ccard__go .dm-icon { width: 16px; height: 16px; }
.dm-scard__foot { padding: 10px 10px 12px 12px; }
.dm-scard__name { font-size: 14px; }
.dm-scard__go { width: 30px; height: 30px; }
.dm-scard__go .dm-icon { width: 14px; height: 14px; }
}
/* Owner: keep the theme's own fonts (no serif) */
.dm-cp2, .dm-co2 { --serif: var(--f-sans, "Archivo", sans-serif); }
.dm-cats2__title { margin-top: 12px; font-family: inherit; font-weight: 900; font-size: clamp(42px, 5.6vw, 96px); line-height: .9; color: var(--ink); }
.dm-ccard__name { font-family: inherit; font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: clamp(20px, 1.8vw, 30px); }
.dm-cb2__title { font-weight: 900; font-stretch: 112%; text-transform: uppercase; line-height: .95; }
.dm-cart2__ptitle { font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: clamp(26px, 2.1vw, 34px); line-height: .98; }
.dm-cats2__eyebrow { font-family: var(--f-mono); font-weight: 500; }
/* ==========================================================================
Product reviews
========================================================================== */
.dm-card__rating.is-empty .dm-star { background: #d4d6d0; }
.dm-qv__rating.is-empty { color: var(--muted); font-size: 14px; }
.dm-qv__rating.is-empty .dm-star { background: #d4d6d0; }
.dm-rvw { margin-top: clamp(40px, 4vw, 72px); padding: clamp(22px, 2.4vw, 40px); border: 1px solid #e8eae4; border-radius: 20px; background: linear-gradient(180deg, #f9fbf5 0, #fff 60%); }
.dm-rvw__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: clamp(18px, 2vw, 30px); }
.dm-rvw__head h2 { margin: 0; font-weight: 900; font-stretch: 112%; font-size: clamp(24px, 2.2vw, 36px); text-transform: uppercase; }
.dm-rvw__write { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 24px; border-radius: 26px; background: #111; color: #fff; font-weight: 500; font-size: 15px; transition: background .25s; }
.dm-rvw__write:hover { background: #2b2b2b; }
.dm-rvw__write .dm-icon { width: 17px; height: 17px; }
.dm-rvw__grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); align-items: start; }
.dm-rvw__sum { padding: 22px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -26px rgba(0, 0, 0, .5); }
.dm-rvw__avg { margin: 0; font-size: 54px; font-weight: 800; line-height: 1; }
.dm-rvw__avg small { font-size: 20px; font-weight: 500; color: var(--muted); }
.dm-rvw__stars { margin-top: 10px; }
.dm-rvw__stars .dm-star, .dm-rcard__stars .dm-star, .dm-rvw__empty .dm-star { width: 20px; height: 20px; }
.dm-rvw__stars .dm-star.is-on, .dm-rcard__stars .dm-star.is-on, .dm-qv__rating .dm-star.is-on { background: #f0a51c; }
.dm-rvw__based { margin: 8px 0 16px; font-size: 14px; color: var(--muted); }
.dm-rvw__bars { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.dm-rvw__bars li { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 10px; font-size: 13.5px; }
.dm-rvw__bars span { color: #363636; white-space: nowrap; }
.dm-rvw__bars i { height: 8px; border-radius: 8px; background: #e8eae4; overflow: hidden; }
.dm-rvw__bars b { display: block; height: 100%; border-radius: 8px; background: #f0a51c; transition: width .8s var(--ease); }
.dm-rvw__bars em { font-style: normal; text-align: right; color: var(--muted); }
.dm-rvw__list { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.dm-rcard { padding: 18px 20px; border: 1px solid #e9ebe5; border-radius: 14px; background: #fff; }
.dm-rcard__top { display: flex; align-items: center; gap: 12px; }
.dm-rcard__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #e7e9e3; color: #6b6b6b; font-weight: 700; }
.dm-rcard__who { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.dm-rcard__ver { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #2f8a4a; }
.dm-rcard__ver .dm-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.dm-rcard time { font-size: 13px; color: var(--muted); }
.dm-rcard__stars { margin: 12px 0 0; }
.dm-rcard__wait { margin: 8px 0 0; font-size: 13px; color: #9a6b37; }
.dm-rcard__text { margin-top: 8px; font-size: 15px; line-height: 1.6; color: #363636; }
.dm-rcard__text p { margin: 0; }
.dm-rcard .children { display: none; }
.dm-rvw__empty { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px dashed #d9dbd5; border-radius: 14px; background: #fff; }
.dm-rvw__empty .dm-star { background: #d4d6d0; }
.dm-rvw__empty p { margin: 0; font-size: 14.5px; color: var(--muted); }
.dm-rvw__empty strong { display: block; font-size: 16px; color: var(--ink); }
.dm-rvw__form { margin-top: 18px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid #e9ebe5; }
.dm-rvw__form[hidden] { display: none; }
.dm-rvw__ftitle { margin: 0 0 14px; font-size: 20px; font-weight: 700; }
.dm-rvw__form .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dm-rvw__form .comment-form > * { margin: 0; }
.dm-rvw__form .dm-rate, .dm-rvw__form .comment-form-comment, .dm-rvw__form .form-submit, .dm-rvw__form .comment-form-cookies-consent, .dm-rvw__form .comment-notes { grid-column: 1 / -1; }
.dm-rvw__form label, .dm-rate legend { display: block; margin-bottom: 6px; font-size: 14px; color: #2b2b2b; }
.dm-rvw__form .required { color: #d4574a; }
.dm-rvw__form input[type="text"], .dm-rvw__form input[type="email"], .dm-rvw__form textarea { width: 100%; padding: 11px 14px; border: 1px solid #dee0da; border-radius: 8px; font: inherit; font-size: 15px; background: #fff; }
.dm-rvw__form input:focus, .dm-rvw__form textarea:focus { outline: 0; border-color: #111; }
.dm-rate { margin: 0; padding: 0; border: 0; }
.dm-rate__row { display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.dm-rate__row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dm-rate__row label { width: 30px; height: 30px; margin: 0; cursor: pointer; background: #d4d6d0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transition: background .15s, transform .15s; }
.dm-rate__row label:hover, .dm-rate__row label:hover ~ label, .dm-rate__row input:checked ~ label { background: #f0a51c; }
.dm-rate__row label:hover { transform: scale(1.12); }
.dm-rate__row input:focus-visible + label { outline: 2px solid #111; outline-offset: 2px; }
.dm-rvw__submit { height: 48px; padding: 0 30px; border: 0; border-radius: 26px; background: #111; color: #fff; font: inherit; font-weight: 500; font-size: 15px; cursor: pointer; }
.dm-rvw__submit:hover { background: #2b2b2b; }
@media (max-width: 900px) {
.dm-rvw__grid { grid-template-columns: 1fr; }
.dm-rvw__form .comment-form { grid-template-columns: 1fr; }
.dm-rvw__head { flex-direction: column; align-items: flex-start; }
}
/* Oversized banner: same gap above it as the other home sections */
body.home .dm-ov { margin-top: clamp(24px, 3vw, 56px); }
#reviews #respond input#submit.dm-rvw__submit { height: 48px; padding: 0 30px; border-radius: 26px; background: #111; color: #fff; font-weight: 500; font-size: 15px; }
#reviews #respond input#submit.dm-rvw__submit:hover { background: #2b2b2b; }
.dm-rvw__form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.dm-rvw__form .comment-form-cookies-consent label { margin: 0; }
/* The section above already ends with its own bottom padding */
body.home .dm-section + .dm-ov, body.home .dm-section + .dm-story { margin-top: 0; }
/* ==========================================================================
Quick login: mobile OTP + Google (Firebase)
========================================================================== */
.dm-qlogin { max-width: 1040px; margin: clamp(22px, 2.4vw, 36px) auto 0; padding: 0 var(--gutter); }
.dm-qlogin__admin { margin: 0 0 12px; padding: 12px 16px; border-left: 3px solid #f0a51c; background: #f3f5ef; font-size: 14px; }
.dm-qlogin__admin a { text-decoration: underline; }
.dm-qlogin__card { padding: clamp(20px, 2.4vw, 34px); border: 1px solid #e7e9e3; border-radius: 18px; background: linear-gradient(180deg, #f9fbf5 0, #fff 70%); box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .5); }
.dm-qlogin__head h2 { margin: 0; font-weight: 900; font-stretch: 112%; font-size: clamp(22px, 1.8vw, 28px); text-transform: uppercase; }
.dm-qlogin__head p { margin: 6px 0 18px; font-size: 14.5px; color: var(--muted); }
.dm-qlogin label { display: block; margin-bottom: 8px; font-size: 14.5px; }
.dm-qlogin__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.dm-qlogin__cc { display: grid; place-items: center; padding: 0 14px; border: 1px solid #dadcd6; border-radius: 10px; background: #f2f4ee; font-weight: 600; }
.dm-qlogin__row input[type="tel"] { flex: 1; min-width: 180px; height: 52px; padding: 0 16px; border: 1px solid #dadcd6; border-radius: 10px; font-size: 17px; letter-spacing: .06em; }
.dm-qlogin__row input:focus { outline: 0; border-color: #111; box-shadow: 0 0 0 3px rgba(0, 0, 0, .08); }
.dm-qlogin__btn { height: 52px; padding: 0 28px; border-radius: 10px; background: #111; color: #fff; font-weight: 600; font-size: 15.5px; transition: background .25s, opacity .25s; }
.dm-qlogin__btn:hover { background: #2b2b2b; }
.dm-qlogin__btn:disabled, .dm-qlogin__google:disabled { opacity: .5; cursor: not-allowed; }
.dm-qlogin__btn.is-busy, .dm-qlogin__google.is-busy { opacity: .7; cursor: progress; }
.dm-qlogin__otp { display: flex; gap: 8px; }
.dm-qlogin__otp input { width: 50px; height: 56px; border: 1px solid #dadcd6; border-radius: 10px; text-align: center; font-size: 22px; font-weight: 700; }
.dm-qlogin__otp input:focus { outline: 0; border-color: #111; box-shadow: 0 0 0 3px rgba(0, 0, 0, .08); }
.dm-qlogin__link { padding: 0; background: none; color: #111; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dm-qlogin__link:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.dm-qlogin__resend { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.dm-qlogin__or, .dm-qlogin__email { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dm-qlogin__or::before, .dm-qlogin__or::after, .dm-qlogin__email::before, .dm-qlogin__email::after { content: ""; flex: 1; height: 1px; background: #e3e5df; }
.dm-qlogin__email { margin: 26px 0 0; }
.dm-qlogin__google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; border: 1px solid #d4d6d0; border-radius: 10px; background: #fff; font-weight: 600; font-size: 15.5px; transition: border-color .25s, box-shadow .25s; }
.dm-qlogin__google:hover { border-color: #111; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .35); }
.dm-qlogin__google svg { width: 22px; height: 22px; }
.dm-qlogin__msg { margin: 12px 0 0; font-size: 14px; color: #2f8a4a; }
.dm-qlogin__msg:empty { display: none; }
.dm-qlogin__msg.is-error { color: #c0392b; }
@media (max-width: 560px) {
.dm-qlogin__otp input { width: 42px; height: 50px; font-size: 19px; }
.dm-qlogin__row .dm-qlogin__btn { width: 100%; }
}
/* ==========================================================================
DANMO brand palette (client logo): black, white, neon lime
========================================================================== */
:root { --lime: #b6fa0e; --lime-d: #7fb800; --tan: #0d0d0d; --sand: #b6fa0e; }
.dm-cp2, .dm-co2 { --tc: #111; --tc-d: #000; --tc-grad: #111; --pink: #f4f6f0; --pink-2: #eceee8; }
/* Logo */
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo-link img, .dm-header .custom-logo { max-height: 34px; width: auto; }
.dm-footer__logo { display: block; width: min(240px, 100%); height: auto; }
@media (max-width: 760px) { .custom-logo-link img, .dm-header .custom-logo { max-height: 26px; } }
/* Accent words: black text on a lime marker stroke (lime text is unreadable on white) */
.is-tan, .dm-cb__title .is-tan, .dm-pagehead__title .is-tan, .dm-pagehead__title--split .is-tan, .dm-cb2__title span, .dm-ov__title .is-tan, .dm-tr__title .is-tan, .dm-hs__title em, .dm-suggest__title .is-tan {
color: var(--ink) !important;
-webkit-text-fill-color: var(--ink) !important;
background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%) !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
padding: 0 .06em;
}
body.home .is-tan, body.home .dm-hs__title em, body.home .dm-ov__title .is-tan, body.home .dm-tr__title .is-tan { background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%) !important; }
/* Lime used as a fill: text on it is black */
.dm-fcount, .dm-chiprow a.is-active, .dm-grid--compact .dm-badge--new, .dm-badge--new { background: var(--lime); color: #0d0d0d; border-color: var(--lime); }
.dm-circ--offer .dm-circ__img, .dm-shtrust__offer span, .dm-cl__tree > ul > li.is-active > a, .dm-line2__badge.is-new { color: #0d0d0d; }
.dm-cl__tree > ul > li.is-active > a { background: var(--lime); }
.dm-line2__badge.is-new, .dm-line2__badge { background: var(--lime); color: #0d0d0d; }
.dm-line2__badge.is-trending { background: #0d0d0d; color: var(--lime); }
.dm-chiprow a:hover { border-color: #0d0d0d; }
.dm-price__fill { background: #0d0d0d; }
.dm-price__track input::-webkit-slider-thumb { background: #0d0d0d; box-shadow: 0 0 0 3px var(--lime); }
/* Selected states: black outline + lime tick */
.dm-dcard input:checked + label, .dm-co2 .dm-pm2 > input:checked + .dm-pm2__label { border-color: #0d0d0d; background: #f7fbea; }
.dm-dcard input:checked + label .dm-dcard__tick, .dm-co2 .dm-pm2 > input:checked + .dm-pm2__label .dm-pm2__dot { background: var(--lime); border-color: #0d0d0d; }
.dm-dcard__tick .dm-icon, .dm-pm2__dot .dm-icon { color: #0d0d0d !important; }
.dm-steps2 .is-done span { background: var(--lime); border-color: #0d0d0d; color: #0d0d0d; box-shadow: none; }
.dm-steps2 li.is-active::before { background: linear-gradient(90deg, var(--lime), #e2e4de); }
.dm-rv2__total { background: var(--lime); }
.dm-rv2__head a, .dm-cart2__clear, .dm-co2__login a, .dm-co2 .dm-co__legal a { color: #0d0d0d; text-decoration: underline; text-underline-offset: 3px; }
.dm-sum2__row.is-green dt, .dm-sum2__row.is-green dd, .dm-sum2__save { color: #2f8a4a; }
/* Buttons: black, lime on hover */
.dm-hs__btn:hover, .dm-cats2__btn:hover, .dm-rvw__write:hover, .dm-qlogin__btn:hover,
.dm-cp2 .wc-proceed-to-checkout a.checkout-button.dm-sum2__cta:hover, .dm-co2 #place_order.dm-co2__place:hover, .dm-cart2__promo:hover .dm-cart2__pbtn {
background: var(--lime) !important; color: #0d0d0d !important;
}
.dm-ccard__go, .dm-scard__go { transition: background .3s, color .3s, transform .35s var(--ease); }
.dm-ccard:hover .dm-ccard__go, .dm-scard:hover .dm-scard__go { background: var(--lime); color: #0d0d0d; }
/* Stars and hearts in the brand colour */
.dm-rate__row label:hover, .dm-rate__row label:hover ~ label, .dm-rate__row input:checked ~ label { background: #0d0d0d; }
/* Leaves / decorative line art: soft grey-lime */
.dm-hs__leaf, .dm-hs__lotus, .dm-sh__leaf, .dm-cb__leaf, .dm-cat__leaf, .dm-story__leaf, .dm-pagehead__leaf, .dm-cb2__leaf, .dm-cart2__pleaf, .dm-co2__leaf, .dm-cats2__leaf, .dm-ccard__leaf, .dm-cartdrawer__leaf, .dm-shtrust__leaf { color: #b9cf86 !important; }
.dm-cats2__swirl { stroke: #b9cf86; }
/* ==========================================================================
DANMO header + topbar (client ref)
========================================================================== */
.dm-hide { display: none !important; }
.dm-topbar { background: #0d0d0d; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dm-topbar__item { font-family: var(--f-sans); letter-spacing: .01em; text-transform: none; font-size: 14px; }
.dm-topbar__item strong { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin-right: 3px; }
.dm-topbar__item .dm-icon { color: var(--lime); width: 20px; height: 20px; stroke-width: 1.8; }
@media (min-width: 901px) {
.dm-topbar__track { display: flex !important; justify-content: space-around; width: 100%; max-width: 1400px; margin: 0 auto; transform: none !important; }
.dm-topbar__item { position: static !important; opacity: 1 !important; transform: none !important; visibility: visible !important; flex: 0 1 auto; }
.dm-topbar__ctrl { display: none; }
.dm-topbar__item + .dm-topbar__item::before { display: none; }
}
.dm-header { background: #0d0d0d; color: #fff; border-bottom: 0; height: 72px; }
body { --header-h: 72px; }
.dm-header .dm-nav__list a { color: #fff; font-family: var(--f-sans); font-size: 15.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.dm-header .dm-nav__list a:hover, .dm-header .dm-nav__list .current-menu-item > a { color: var(--lime); }
.dm-header .dm-nav__list a::after { background: var(--lime); }
.dm-header .dm-iconbtn, .dm-header .dm-search__toggle { color: #fff; }
.dm-header .dm-iconbtn:hover { color: var(--lime); }
.dm-header .dm-cart-count { background: var(--lime); color: #0d0d0d; font-weight: 800; }
.dm-header .dm-search { background: #fff; border: 0; border-radius: 26px; height: 46px; }
.dm-header .dm-search__input { color: #0d0d0d; font-size: 14.5px; }
.dm-header .dm-search__input::placeholder { color: #8a8a8a; }
.dm-header .dm-search__toggle { color: #0d0d0d; order: 2; }
@media (min-width: 1101px) { .dm-header .dm-search { width: clamp(240px, 22vw, 330px); flex-direction: row; } }
.dm-header .custom-logo-link img { max-height: 38px; }
.dm-drawer__head { background: #0d0d0d; color: #fff; margin: -1px -1px 0; padding: 14px 18px; }
.dm-drawer__head .dm-iconbtn { color: #fff; }
.dm-drawer__head .custom-logo-link img { max-height: 28px; }
/* ==========================================================================
DANMO hero
========================================================================== */
.dm-h2 { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); min-height: clamp(520px, 40vw, 700px); background:
radial-gradient(60% 80% at 50% 45%, #2a2a2a 0, #151515 70%),
#151515; color: #fff; }
/* Concrete texture on the two photo sides */
.dm-h2::before, .dm-h2::after { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; width: 38%; background:
url("data:image/svg+xml;utf8,"),
linear-gradient(160deg, #8d8d8b 0, #5f5f5d 55%, #3b3b3a 100%); }
.dm-h2::before { left: 0; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
.dm-h2::after { right: 0; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); background:
url("data:image/svg+xml;utf8,"),
linear-gradient(200deg, #9a9a98 0, #686866 55%, #3e3e3d 100%); }
.dm-h2__slash { position: absolute; z-index: -1; background: var(--lime); transform: skewX(-24deg); }
.dm-h2__slash--a { left: -60px; top: 0; width: 120px; height: 34%; }
.dm-h2__slash--b { left: 31%; top: 0; width: 7%; height: 62%; clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); animation: dm-h2-slash 1s var(--ease) both .1s; transform-origin: top; }
.dm-h2__slash--c { right: 30%; top: 0; width: 26px; height: 36%; background: rgba(255, 255, 255, .06); }
@keyframes dm-h2-slash { from { transform: skewX(-24deg) scaleY(0); } to { transform: skewX(-24deg) scaleY(1); } }
.dm-h2__side { position: relative; min-width: 0; }
.dm-h2__model { position: absolute; bottom: 0; height: 104%; width: auto; max-width: none; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .45)); animation: dm-h2-in 1.1s var(--ease) both; }
.dm-h2__side--l .dm-h2__model { left: 50%; transform: translateX(-38%); }
.dm-h2__side--r .dm-h2__model { right: 50%; transform: translateX(42%); height: 100%; animation-delay: .15s; }
@keyframes dm-h2-in { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
.dm-h2__label { position: absolute; z-index: 2; top: 22%; display: flex; flex-direction: column; gap: 4px; text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
.dm-h2__side--l .dm-h2__label { left: clamp(18px, 2.6vw, 44px); }
.dm-h2__side--r .dm-h2__label { right: clamp(18px, 2.6vw, 44px); text-align: right; align-items: flex-end; }
.dm-h2__ltitle { margin: 0 0 12px; font-weight: 900; font-stretch: 112%; font-size: clamp(26px, 2.4vw, 40px); line-height: 1; text-transform: uppercase; }
.dm-h2__words { list-style: none; margin: 0; padding: 0; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
.dm-h2__lbtn { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dm-h2__lbtn .dm-icon { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .3s var(--ease); }
.dm-h2__lbtn:hover { color: var(--lime); }
.dm-h2__side--l .dm-h2__lbtn:hover .dm-icon { transform: translateX(-3px); }
.dm-h2__side--r .dm-h2__lbtn:hover .dm-icon { transform: translateX(3px); }
.dm-h2__copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(40px, 4vw, 70px) 12px; text-align: center; }
.dm-h2__copy > * { animation: dm-rise .9s var(--ease) both; }
.dm-h2__copy > :nth-child(2) { animation-delay: .08s; } .dm-h2__copy > :nth-child(3) { animation-delay: .16s; } .dm-h2__copy > :nth-child(4) { animation-delay: .24s; } .dm-h2__copy > :nth-child(5) { animation-delay: .32s; }
.dm-h2__brand { width: clamp(150px, 14vw, 220px); height: auto; margin-bottom: clamp(14px, 1.4vw, 22px); }
.dm-h2__title { margin: 0; font-weight: 900; font-stretch: 125%; font-style: italic; font-size: clamp(44px, 5vw, 86px); line-height: .92; letter-spacing: -.01em; text-transform: uppercase; }
.dm-h2__title span { display: block; white-space: nowrap; }
.dm-h2__title .is-lime { color: var(--lime); }
.dm-h2__text { margin: clamp(14px, 1.4vw, 22px) 0 0; max-width: 17em; font-size: clamp(16px, 1.4vw, 22px); line-height: 1.3; color: #f1f1f1; }
.dm-h2__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: clamp(18px, 1.8vw, 28px); }
.dm-h2__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 190px; height: 54px; padding: 0 26px; border-radius: 4px; font-weight: 800; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.dm-h2__btn .dm-icon { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .3s var(--ease); }
.dm-h2__btn:hover { transform: translateY(-2px); }
.dm-h2__btn:hover .dm-icon { transform: translateX(4px); }
.dm-h2__btn--white { background: #fff; color: #0d0d0d; }
.dm-h2__btn--white:hover { box-shadow: 0 12px 24px -12px rgba(255, 255, 255, .5); }
.dm-h2__btn--lime { background: var(--lime); color: #0d0d0d; }
.dm-h2__btn--lime:hover { box-shadow: 0 12px 26px -10px rgba(182, 250, 14, .6); }
.dm-h2__feats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: min(100%, 520px); margin: clamp(22px, 2.4vw, 38px) 0 0; padding: 0; }
.dm-h2__feats li { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; }
.dm-h2__feats .dm-icon { width: 34px; height: 34px; stroke-width: 1.2; }
@media (max-width: 1100px) {
.dm-h2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.dm-h2__copy { grid-column: 1 / -1; grid-row: 1; padding-top: 44px; }
.dm-h2__side { grid-row: 2; min-height: 420px; }
.dm-h2::before, .dm-h2::after { top: auto; height: 420px; width: 50%; clip-path: none; }
.dm-h2__slash--b { left: 44%; top: auto; bottom: 0; height: 420px; }
}
@media (max-width: 640px) {
.dm-h2__side { min-height: 330px; }
.dm-h2::before, .dm-h2::after { height: 330px; }
.dm-h2__slash--b { height: 330px; }
.dm-h2__label { top: 16px; }
.dm-h2__ltitle { font-size: 22px; margin-bottom: 6px; }
.dm-h2__words { font-size: 12.5px; }
.dm-h2__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
.dm-h2__btn { min-width: 0; flex: 1 1 140px; }
.dm-h2__title { font-size: clamp(40px, 12vw, 56px); }
}
.dm-h2__side--l { grid-column: 1; grid-row: 1; } .dm-h2__copy { grid-column: 2; grid-row: 1; } .dm-h2__side--r { grid-column: 3; grid-row: 1; }
.dm-h2__title { font-size: clamp(40px, 4.3vw, 76px); font-stretch: 115%; }
@media (max-width: 1100px) {
.dm-h2__copy { grid-column: 1 / -1; grid-row: 1; }
.dm-h2__side--l { grid-column: 1; grid-row: 2; } .dm-h2__side--r { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1101px) {
.dm-h2__side--l .dm-h2__model { transform: translateX(-22%); }
.dm-h2__side--r .dm-h2__model { transform: translateX(12%); }
}
.dm-h2__label { text-shadow: 0 2px 18px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .5); }
@media (max-width: 640px) {
.dm-h2__btn { height: 48px; padding: 0 14px; gap: 8px; font-size: 14px; white-space: nowrap; }
.dm-h2__words { display: none; }
.dm-h2__label { top: auto; bottom: 14px; }
.dm-h2__lbtn { margin-top: 4px; }
.dm-h2__slash--a { height: 180px; }
}
/* ==========================================================================
DANMO hero v3 (ref 28): photo background + model slider
========================================================================== */
.dm-h3 { --pink: #ec7fa3; position: relative; background: #111; color: #fff; }
.dm-h3__stage { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(540px, 42vw, 720px); }
.dm-h3__bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: grayscale(.25) brightness(.8); transform: scale(1.04); animation: dm-h3-zoom 18s ease-in-out infinite alternate; }
@keyframes dm-h3-zoom { to { transform: scale(1.12); } }
.dm-h3__shade { position: absolute; inset: 0; z-index: -2; background: radial-gradient(38% 60% at 50% 45%, rgba(10, 10, 10, .78) 0, rgba(10, 10, 10, .35) 70%, transparent 100%), linear-gradient(90deg, rgba(0, 0, 0, .55) 0, transparent 22%, transparent 78%, rgba(0, 0, 0, .55) 100%), linear-gradient(0deg, rgba(0, 0, 0, .45) 0, transparent 35%); }
/* Models */
.dm-h3__models { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dm-h3__slide { position: absolute; inset: 0; visibility: hidden; }
.dm-h3__slide.is-active, .dm-h3__slide.is-leaving { visibility: visible; }
.dm-h3__model { position: absolute; bottom: 0; height: 96%; width: auto; max-width: 44%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); opacity: 0; transition: opacity .8s var(--ease), transform .9s var(--ease); }
.dm-h3__model--l { left: 11%; transform: translateX(-70px); object-position: 0 100%; }
.dm-h3__model--r { right: 11%; transform: translateX(70px); object-position: 100% 100%; }
.dm-h3__slide.is-active .dm-h3__model { opacity: 1; transform: none; }
.dm-h3__slide.is-active .dm-h3__model--r { transition-delay: .12s; }
.dm-h3__slide.is-leaving .dm-h3__model--l { opacity: 0; transform: translateX(-40px) scale(.98); transition-duration: .6s; }
.dm-h3__slide.is-leaving .dm-h3__model--r { opacity: 0; transform: translateX(40px) scale(.98); transition-duration: .6s; }
/* Side labels */
.dm-h3__label { position: absolute; z-index: 2; top: 13%; display: flex; flex-direction: column; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.dm-h3__label--l { left: clamp(18px, 2.6vw, 44px); }
.dm-h3__label--r { right: clamp(18px, 2.6vw, 44px); align-items: flex-end; text-align: right; }
.dm-h3__ltitle { margin: 0 0 18px; font-weight: 900; font-stretch: 125%; font-style: italic; font-size: clamp(26px, 2.3vw, 38px); line-height: .95; text-transform: uppercase; }
.dm-h3__ltitle span { display: block; font-size: 1.55em; color: var(--lime); }
.dm-h3__label--r .dm-h3__ltitle span { color: var(--pink); }
.dm-h3__words { list-style: none; margin: 0; padding: 0 0 16px; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
.dm-h3__words::after { content: ""; display: block; width: 26px; height: 3px; margin-top: 14px; background: var(--pink); }
.dm-h3__label--r .dm-h3__words::after { margin-left: auto; }
.dm-h3__lbtn { display: inline-flex; align-items: flex-end; gap: 8px; max-width: 6.5em; font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; }
.dm-h3__lbtn .dm-icon { width: 17px; height: 17px; stroke-width: 2.2; transition: transform .3s var(--ease); }
.dm-h3__lbtn:hover { color: var(--lime); }
.dm-h3__lbtn:hover .dm-icon { transform: translateX(3px); }
/* Centre */
.dm-h3__copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; width: min(460px, 36%); margin: 0 auto; padding: clamp(24px, 2.4vw, 40px) 0 clamp(26px, 2.4vw, 40px); text-align: center; }
.dm-h3__copy > * { animation: dm-rise .9s var(--ease) both; }
.dm-h3__copy > :nth-child(2) { animation-delay: .06s; } .dm-h3__copy > :nth-child(3) { animation-delay: .12s; } .dm-h3__copy > :nth-child(4) { animation-delay: .2s; } .dm-h3__copy > :nth-child(5) { animation-delay: .28s; }
.dm-h3__brand { width: clamp(130px, 11vw, 170px); height: auto; }
.dm-h3__tag { margin: 10px 0 0; font-family: var(--f-mono); font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: #e9e9e9; }
.dm-h3__title { margin: clamp(14px, 1.4vw, 22px) 0 0; font-weight: 900; font-stretch: 125%; font-style: italic; font-size: clamp(38px, 3.9vw, 66px); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; transform: rotate(-4deg); }
.dm-h3__title span { display: block; white-space: nowrap; }
.dm-h3__brush { position: relative; margin-top: .06em; font-size: 1.55em; color: var(--lime); text-shadow: 3px 3px 0 rgba(0, 0, 0, .25); }
.dm-h3__brush::after { content: ""; position: absolute; left: 4%; right: -6%; bottom: .05em; height: .12em; border-radius: 50%; background: var(--lime); transform: rotate(-3deg); opacity: .9; }
.dm-h3__feats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; margin: clamp(22px, 2.2vw, 34px) 0 0; padding: 0; }
.dm-h3__feats li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; }
.dm-h3__feats .dm-icon { width: 32px; height: 32px; stroke-width: 1.2; }
.dm-h3__btns { display: flex; gap: 16px; margin-top: clamp(18px, 1.8vw, 26px); }
.dm-h3__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 170px; height: 50px; padding: 0 22px; border-radius: 3px; font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.dm-h3__btn .dm-icon { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .3s var(--ease); }
.dm-h3__btn:hover { transform: translateY(-2px); }
.dm-h3__btn:hover .dm-icon { transform: translateX(4px); }
.dm-h3__btn--white { background: #fff; color: #0d0d0d; }
.dm-h3__btn--lime { background: var(--lime); color: #0d0d0d; }
.dm-h3__btn--lime:hover { box-shadow: 0 12px 26px -10px rgba(182, 250, 14, .6); }
/* Arrows + dots */
.dm-h3__nav { position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; backdrop-filter: blur(4px); transition: background .25s, color .25s, border-color .25s; }
.dm-h3__nav:hover { background: var(--lime); border-color: var(--lime); color: #0d0d0d; }
.dm-h3__nav .dm-icon { width: 20px; height: 20px; stroke-width: 2; }
.dm-h3__nav--prev { left: 34%; } .dm-h3__nav--next { right: 34%; }
.dm-h3__dots { position: absolute; z-index: 4; left: 50%; bottom: 16px; display: flex; gap: 8px; transform: translateX(-50%); }
.dm-h3__dots button { width: 9px; height: 9px; padding: 0; border-radius: 9px; background: rgba(255, 255, 255, .45); transition: width .35s var(--ease), background .3s; }
.dm-h3__dots button[aria-current="true"] { width: 26px; background: var(--lime); }
/* Made for real life strip */
.dm-h3__strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2vw, 40px); padding: clamp(18px, 1.8vw, 26px) var(--gutter); background: linear-gradient(90deg, #1a1a1a, #242424 50%, #1a1a1a); border-top: 1px solid rgba(255, 255, 255, .06); }
.dm-h3__stitle { margin: 0; font-weight: 900; font-stretch: 120%; font-style: italic; line-height: .9; text-transform: uppercase; transform: rotate(-4deg); }
.dm-h3__stitle span { display: block; font-size: clamp(18px, 1.5vw, 24px); }
.dm-h3__stitle strong { display: block; font-size: clamp(28px, 2.6vw, 42px); color: var(--lime); }
.dm-h3__sfeats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; }
.dm-h3__sfeats li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 10px; text-align: center; font-size: 13px; color: #cfcfcf; }
.dm-h3__sfeats li + li { border-left: 1px solid rgba(255, 255, 255, .14); }
.dm-h3__sfeats .dm-icon { width: 30px; height: 30px; stroke-width: 1.2; color: #fff; margin-bottom: 4px; }
.dm-h3__sfeats strong { color: #fff; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; }
.dm-h3__sbtn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 3px; background: var(--lime); color: #0d0d0d; font-weight: 800; font-size: 15px; text-transform: uppercase; white-space: nowrap; transition: transform .25s var(--ease); }
.dm-h3__sbtn .dm-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.dm-h3__sbtn:hover { transform: translateY(-2px); }
@media (max-width: 1100px) {
.dm-h3__stage { min-height: 0; padding-bottom: 440px; }
.dm-h3__copy { width: auto; padding: 36px var(--gutter) 20px; }
.dm-h3__models { top: auto; height: 440px; }
.dm-h3__model { max-width: 50%; height: 100%; }
.dm-h3__model--l { left: 0; } .dm-h3__model--r { right: 0; }
.dm-h3__label { top: auto; bottom: 20px; }
.dm-h3__words { display: none; }
.dm-h3__ltitle { margin-bottom: 6px; }
.dm-h3__nav { top: auto; bottom: 200px; }
.dm-h3__nav--prev { left: 10px; } .dm-h3__nav--next { right: 10px; }
.dm-h3__dots { bottom: auto; top: calc(100% - 440px - 14px); }
.dm-h3__strip { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 640px) {
.dm-h3__stage { padding-bottom: 330px; }
.dm-h3__models { height: 330px; }
.dm-h3__dots { top: calc(100% - 330px - 14px); }
.dm-h3__nav { bottom: 140px; width: 38px; height: 38px; }
.dm-h3__title { font-size: clamp(34px, 10vw, 46px); }
.dm-h3__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
.dm-h3__btns { width: 100%; gap: 10px; }
.dm-h3__btn { flex: 1; min-width: 0; padding: 0 12px; font-size: 13.5px; }
.dm-h3__ltitle { font-size: 18px; }
.dm-h3__lbtn { font-size: 12px; }
.dm-h3__sfeats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
.dm-h3__sfeats li:nth-child(3) { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .dm-h3__bg { animation: none; } }
@media (min-width: 1101px) {
.dm-h3__nav { top: auto; bottom: 4px; margin: 0; width: 36px; height: 36px; }
.dm-h3__nav--prev { left: calc(50% - 96px); } .dm-h3__nav--next { right: calc(50% - 96px); }
.dm-h3__dots { bottom: 18px; }
.dm-h3__model--l { left: 13%; } .dm-h3__model--r { right: 14%; }
.dm-h3__copy { padding-bottom: 56px; }
}
@media (min-width: 1101px) { .dm-h3__model--r { max-width: 36%; } .dm-h3__model--l { max-width: 36%; } }
/* ==========================================================================
DANMO hero v4 (ref 28, exact): two scene photos, centre copy, collection cards
========================================================================== */
.dm-h4 { --pink: #ec7fa3; position: relative; background: #151515; color: #fff; }
.dm-h4__stage { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; height: clamp(560px, 40vw, 640px); overflow: hidden; }
.dm-h4__side { position: relative; overflow: hidden; }
.dm-h4__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); transform: scale(1.06); animation: dm-h4-in 1.4s var(--ease) both; }
.dm-h4__side--l .dm-h4__photo { object-position: 18% 30%; }
.dm-h4__side--r .dm-h4__photo { object-position: 30% 22%; animation-delay: .1s; }
@keyframes dm-h4-in { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: scale(1.06); } }
/* Dark fade toward the middle so the copy reads, and a soft fade at the outer edges for the labels */
.dm-h4__side::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.dm-h4__side--l::after { background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .05) 22%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 78%, rgba(12, 12, 12, .95) 100%), linear-gradient(0deg, rgba(0, 0, 0, .35) 0, transparent 30%); }
.dm-h4__side--r::after { background: linear-gradient(270deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .05) 22%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 78%, rgba(12, 12, 12, .95) 100%), linear-gradient(0deg, rgba(0, 0, 0, .35) 0, transparent 30%); }
.dm-h4__label { position: absolute; z-index: 2; top: 13%; display: flex; flex-direction: column; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.dm-h4__side--l .dm-h4__label { left: clamp(18px, 2.4vw, 40px); }
.dm-h4__side--r .dm-h4__label { right: clamp(18px, 2.4vw, 40px); align-items: flex-end; text-align: right; }
.dm-h4__ltitle { margin: 0 0 20px; font-weight: 900; font-stretch: 125%; font-style: italic; font-size: clamp(26px, 2.2vw, 36px); line-height: .92; text-transform: uppercase; }
.dm-h4__ltitle span { display: block; font-size: 1.45em; color: var(--lime); }
.dm-h4__side--r .dm-h4__ltitle span { color: var(--pink); }
.dm-h4__words { list-style: none; margin: 0; padding: 0 0 16px; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; }
.dm-h4__words::after { content: ""; display: block; width: 24px; height: 3px; margin-top: 14px; background: var(--pink); }
.dm-h4__side--r .dm-h4__words::after { margin-left: auto; }
.dm-h4__lbtn { font-size: 14.5px; font-weight: 800; line-height: 1.35; letter-spacing: .03em; text-transform: uppercase; }
.dm-h4__lbtn .dm-icon { width: 16px; height: 16px; stroke-width: 2.4; vertical-align: -2px; transition: transform .3s var(--ease); }
.dm-h4__lbtn:hover { color: var(--lime); }
.dm-h4__lbtn:hover .dm-icon { transform: translateX(3px); }
.dm-h4__copy { position: absolute; z-index: 3; left: 50%; top: 0; bottom: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(430px, 32%); transform: translateX(-50%); text-align: center; }
.dm-h4__copy::before { content: ""; position: absolute; z-index: -1; inset: -20% -35%; background: radial-gradient(closest-side, rgba(12, 12, 12, .9), rgba(12, 12, 12, .55) 60%, transparent); }
.dm-h4__copy > * { animation: dm-rise .9s var(--ease) both; }
.dm-h4__copy > :nth-child(2) { animation-delay: .06s; } .dm-h4__copy > :nth-child(3) { animation-delay: .12s; } .dm-h4__copy > :nth-child(4) { animation-delay: .2s; } .dm-h4__copy > :nth-child(5) { animation-delay: .28s; }
.dm-h4__brand { width: clamp(130px, 10.5vw, 160px); height: auto; }
.dm-h4__tag { margin: 12px 0 0; font-size: 12.5px; letter-spacing: .34em; text-transform: uppercase; color: #eee; }
.dm-h4__title { margin: clamp(16px, 1.6vw, 24px) 0 0; font-weight: 900; font-stretch: 125%; font-style: italic; font-size: clamp(36px, 3.6vw, 60px); line-height: .9; text-transform: uppercase; transform: rotate(-5deg); }
.dm-h4__title span { display: block; white-space: nowrap; }
.dm-h4__brush { position: relative; font-size: 1.6em; color: var(--lime); letter-spacing: -.02em; }
.dm-h4__brush::after { content: ""; position: absolute; left: 0; right: -8%; bottom: .06em; height: .1em; background: linear-gradient(90deg, transparent, var(--lime) 15%, var(--lime) 85%, transparent); transform: rotate(-4deg); border-radius: 50%; }
.dm-h4__feats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; margin: clamp(22px, 2vw, 32px) 0 0; padding: 0; }
.dm-h4__feats li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; }
.dm-h4__feats .dm-icon { width: 30px; height: 30px; stroke-width: 1.2; }
.dm-h4__btns { display: flex; gap: 14px; margin-top: clamp(18px, 1.6vw, 24px); }
.dm-h4__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 175px; height: 48px; padding: 0 20px; border-radius: 3px; font-weight: 800; font-size: 15px; text-transform: uppercase; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.dm-h4__btn .dm-icon { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .3s var(--ease); }
.dm-h4__btn:hover { transform: translateY(-2px); }
.dm-h4__btn:hover .dm-icon { transform: translateX(4px); }
.dm-h4__btn--white { background: #fff; color: #0d0d0d; }
.dm-h4__btn--lime { background: var(--lime); color: #0d0d0d; }
/* Collection cards overlapping the photo */
.dm-h4__cols { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: -48px clamp(12px, 1.2vw, 20px) 0; color: #0d0d0d; }
.dm-h4__col { padding: 20px 22px 22px; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .5); }
.dm-h4__chead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.dm-h4__chead h2 { margin: 0; font-size: clamp(19px, 1.6vw, 25px); font-weight: 500; text-transform: uppercase; }
.dm-h4__chead strong { font-weight: 900; font-style: italic; background: linear-gradient(transparent 82%, var(--lime) 82%); }
.dm-h4__col--r .dm-h4__chead strong { background: linear-gradient(transparent 82%, var(--pink) 82%); }
.dm-h4__chead span { color: #9a9a9a; }
.dm-h4__chead a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.dm-h4__chead a .dm-icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.dm-h4__chead a:hover .dm-icon { transform: translateX(3px); }
.dm-h4__cards { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; }
.dm-h4__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ececec; border-radius: 6px; background: #fff; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.dm-h4__card:hover { transform: translateY(-4px); border-color: #0d0d0d; box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .5); }
.dm-h4__cimg { display: block; aspect-ratio: 1 / 1.03; overflow: hidden; background: #efefef; }
.dm-h4__cimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dm-h4__card:hover .dm-h4__cimg img { transform: scale(1.06); }
.dm-h4__cname { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 12px 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.dm-h4__cname .dm-icon { flex: none; width: 15px; height: 15px; stroke-width: 2; transition: transform .3s var(--ease); }
.dm-h4__card:hover .dm-h4__cname .dm-icon { transform: translateX(3px); }
/* Made for real life */
.dm-h4__strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2.4vw, 48px); padding: clamp(22px, 2vw, 30px) clamp(24px, 6vw, 110px); background:
url("data:image/svg+xml;utf8,"),
linear-gradient(90deg, #2b2b2b, #3a3a3a 50%, #2b2b2b); }
.dm-h4__stitle { margin: 0; font-weight: 900; font-stretch: 120%; font-style: italic; line-height: .9; text-transform: uppercase; transform: rotate(-5deg); }
.dm-h4__stitle span { display: block; font-size: clamp(18px, 1.5vw, 24px); }
.dm-h4__stitle strong { display: block; font-size: clamp(30px, 2.8vw, 46px); color: var(--lime); }
.dm-h4__sfeats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; }
.dm-h4__sfeats li { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 10px; text-align: center; font-size: 13px; color: #d0d0d0; }
.dm-h4__sfeats li + li { border-left: 1px solid rgba(255, 255, 255, .2); }
.dm-h4__sfeats .dm-icon { width: 30px; height: 30px; stroke-width: 1.2; color: #fff; margin-bottom: 6px; }
.dm-h4__sfeats strong { color: #fff; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; }
.dm-h4__sbtn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 28px; border-radius: 3px; background: var(--lime); color: #0d0d0d; font-weight: 800; font-size: 15px; text-transform: uppercase; white-space: nowrap; transition: transform .25s var(--ease); }
.dm-h4__sbtn .dm-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.dm-h4__sbtn:hover { transform: translateY(-2px); }
@media (max-width: 1100px) {
.dm-h4__stage { display: flex; flex-direction: column; height: auto; }
.dm-h4__copy { position: relative; order: -1; left: auto; bottom: auto; width: auto; transform: none; padding: 34px var(--gutter) 30px; background: #111; }
.dm-h4__copy::before { display: none; }
.dm-h4__stage { display: grid; grid-template-columns: 1fr 1fr; }
.dm-h4__copy { grid-column: 1 / -1; grid-row: 1; }
.dm-h4__side { grid-row: 2; height: 420px; }
.dm-h4__words { display: none; }
.dm-h4__label { top: auto; bottom: 64px; }
.dm-h4__cols { grid-template-columns: 1fr; margin-top: -40px; }
.dm-h4__col { border-radius: 12px; }
.dm-h4__strip { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 640px) {
.dm-h4__side { height: 320px; }
.dm-h4__ltitle { font-size: 18px; margin-bottom: 8px; }
.dm-h4__lbtn { font-size: 12px; }
.dm-h4__title { font-size: clamp(32px, 9.5vw, 44px); }
.dm-h4__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
.dm-h4__btns { width: 100%; gap: 10px; }
.dm-h4__btn { flex: 1; min-width: 0; padding: 0 10px; font-size: 13.5px; }
.dm-h4__cols { margin-inline: 10px; }
.dm-h4__col { padding: 16px 14px; }
.dm-h4__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 4px; }
.dm-h4__card { flex: 0 0 38%; scroll-snap-align: start; }
.dm-h4__chead h2 { font-size: 17px; }
.dm-h4__sfeats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
.dm-h4__sfeats li:nth-child(3) { border-left: 0; }
}
@keyframes dm-h4-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
.dm-h4__photo { transform: none; }
.dm-h4__side--l .dm-h4__photo { object-position: 30% 0; }
.dm-h4__side--r .dm-h4__photo { object-position: 40% 0; }
.dm-h4__side--l::after { background: linear-gradient(90deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 62%, rgba(12, 12, 12, .7) 92%, rgba(12, 12, 12, .85) 100%), linear-gradient(0deg, rgba(0, 0, 0, .3) 0, transparent 25%); }
.dm-h4__side--r::after { background: linear-gradient(270deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 62%, rgba(12, 12, 12, .7) 92%, rgba(12, 12, 12, .85) 100%), linear-gradient(0deg, rgba(0, 0, 0, .3) 0, transparent 25%); }
.dm-h4__copy::before { inset: -10% -18%; background: radial-gradient(closest-side, rgba(12, 12, 12, .8), rgba(12, 12, 12, .4) 65%, transparent); }
.dm-h4__cimg { aspect-ratio: auto; height: clamp(130px, 11vw, 170px); }
.dm-h4__card { min-width: 0; }
@media (max-width: 640px) {
.dm-h4__card { flex: 0 0 40%; width: 40%; }
.dm-h4__cimg { height: 150px; }
.dm-h4__chead { flex-wrap: wrap; row-gap: 4px; }
.dm-h4__chead h2 { font-size: 16px; }
.dm-h4__cname { font-size: 12px; padding: 10px; }
}
.dm-h4__col { min-width: 0; } .dm-h4__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1100px) { .dm-h4__cols { grid-template-columns: minmax(0, 1fr); } }
/* Header search: icon at the top of the page, grows into the field on scroll (or on click) */
@media (min-width: 1101px) {
.dm-header .dm-search { transition: width .55s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease); }
.dm-header .dm-search__input { transition: opacity .3s var(--ease) .15s; }
.dm-header .dm-search__toggle .dm-icon { transition: color .3s, transform .45s var(--ease); }
.dm-header:not(.is-scrolled) .dm-search:not(.is-open) { width: 46px; background: transparent; box-shadow: none; }
.dm-header:not(.is-scrolled) .dm-search:not(.is-open) .dm-search__toggle { width: 44px; color: #fff; cursor: pointer; }
.dm-header:not(.is-scrolled) .dm-search:not(.is-open) .dm-search__toggle .dm-icon { width: 26px; height: 26px; }
.dm-header:not(.is-scrolled) .dm-search:not(.is-open) .dm-search__toggle:hover { color: var(--lime); }
.dm-header:not(.is-scrolled) .dm-search:not(.is-open) .dm-search__input { opacity: 0; pointer-events: none; transition-delay: 0s; }
.dm-header.is-scrolled .dm-search, .dm-header .dm-search.is-open { box-shadow: 0 0 0 3px rgba(182, 250, 14, 0); }
.dm-header .dm-search:focus-within { box-shadow: 0 0 0 3px rgba(182, 250, 14, .55); }
}
/* Fonts to match the DANMO reference: Poppins everywhere, brush marker for the lime accents */
:root { --f-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --f-brush: "Permanent Marker", "Brush Script MT", cursive; }
body, button, input, select, textarea { font-family: var(--f-sans); }
.dm-header .dm-nav__list a { font-family: var(--f-sans); font-weight: 500; font-size: 15px; }
.dm-topbar__item { font-family: var(--f-sans); font-size: 13.5px; font-weight: 400; }
.dm-topbar__item strong { font-weight: 600; text-transform: none; letter-spacing: 0; }
.dm-h4__ltitle, .dm-h4__title, .dm-h4__stitle, .dm-h4__chead strong { font-family: var(--f-sans); font-weight: 900; font-style: italic; font-stretch: normal; letter-spacing: -.01em; }
.dm-h4__title span:not(.dm-h4__brush) { transform: skewX(-4deg); }
.dm-h4__brush { font-family: var(--f-brush); font-weight: 400; font-style: normal; font-size: 1.75em; letter-spacing: 0; line-height: 1; transform: rotate(-6deg); }
.dm-h4__brush::after { display: none; }
.dm-h4__stitle strong { font-family: var(--f-brush); font-weight: 400; font-style: normal; font-size: clamp(32px, 3vw, 48px); }
.dm-h4__words { font-family: var(--f-sans); font-weight: 400; letter-spacing: .02em; }
.dm-h4__tag { font-family: var(--f-sans); font-weight: 400; }
.dm-h4__btn, .dm-h4__sbtn, .dm-h4__lbtn, .dm-h4__cname, .dm-h4__feats li, .dm-h4__sfeats strong { font-family: var(--f-sans); font-weight: 700; }
.dm-h4__chead h2 { font-family: var(--f-sans); font-weight: 500; }
.dm-h4__copy { bottom: 0; }
/* Hero headline: heavy sporty italic, rising on a slant, brush MOVE with a lime swash */
.dm-h4__title { font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(44px, 4.3vw, 72px); line-height: .86; letter-spacing: -.005em; transform: rotate(-7deg) skewX(-6deg); transform-origin: 50% 50%; text-shadow: 0 4px 18px rgba(0, 0, 0, .45); }
.dm-h4__title span:not(.dm-h4__brush) { transform: none; }
.dm-h4__title span:nth-child(2) { margin-left: .5em; }
.dm-h4__brush { position: relative; display: inline-block !important; margin: -.02em 0 0 .7em; font-family: var(--f-brush); font-weight: 400; font-style: normal; font-size: 1.85em; line-height: .95; letter-spacing: .01em; color: var(--lime); transform: rotate(-3deg) skewX(-10deg);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 300px 120px; mask-size: 300px 120px; }
.dm-h4__swash { position: absolute; left: -12%; right: -14%; bottom: -.08em; width: 126%; height: .34em; fill: var(--lime); stroke: var(--lime); transform: rotate(-2deg); transform-origin: left center; animation: dm-h4-swash .9s var(--ease) .5s both; }
@keyframes dm-h4-swash { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 640px) { .dm-h4__title { font-size: clamp(38px, 11vw, 52px); } }
.dm-h4__copy > .dm-h4__title { animation: dm-h4-title .9s var(--ease) .12s both; }
@keyframes dm-h4-title { from { opacity: 0; transform: translateY(26px) rotate(-8deg) skewX(-8deg); } to { opacity: 1; transform: rotate(-8deg) skewX(-8deg); } }
.dm-h4__title { transform: rotate(-8deg) skewX(-8deg); }
.dm-h4__brush { -webkit-mask-image: none; mask-image: none; text-shadow: 2px 2px 0 rgba(0, 0, 0, .25); }
.dm-h4__swash { height: .3em; bottom: -.12em; }
.dm-h4__swash { display: none; }
/* ==========================================================================
Home: Collections / Find Your Style (owner ref 31)
========================================================================== */
.dm-fys { --pink: #ec7fa3; position: relative; padding: clamp(40px, 4vw, 70px) clamp(12px, 1.4vw, 24px) clamp(30px, 3vw, 50px); background: radial-gradient(60% 70% at 85% 0, #fff 0, transparent 70%), linear-gradient(180deg, #f5f3f0 0, #f1efec 100%); }
.dm-fys__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(16px, 3vw, 60px); padding: 0 clamp(12px, 2vw, 36px); margin-bottom: clamp(22px, 2.4vw, 36px); }
.dm-fys__eyebrow { display: flex; align-items: center; gap: 18px; margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.dm-fys__eyebrow::before { content: ""; width: 44px; height: 4px; background: var(--lime); }
.dm-fys__title { margin: 10px 0 0; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(46px, 5.4vw, 92px); line-height: .95; letter-spacing: -.01em; color: #0d0d0d; }
.dm-fys__title span { color: var(--lime); -webkit-text-stroke: 0; }
.dm-fys__text { margin: 10px 0 0; font-size: clamp(15px, 1.3vw, 21px); color: #6a6a6a; }
.dm-fys__script { position: relative; margin: 0; max-width: 5.6em; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(38px, 3.2vw, 56px); line-height: .9; color: #2a2a2a; transform: rotate(-14deg); }
.dm-fys__script svg { position: absolute; right: -58%; bottom: -30%; width: 70%; fill: none; stroke: var(--lime); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(14deg); }
.dm-fys__all { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 30px; border-radius: 8px; background: #111; color: #fff; font-weight: 600; font-size: 15.5px; text-transform: uppercase; white-space: nowrap; transition: background .25s, color .25s; }
.dm-fys__all .dm-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.dm-fys__all:hover { background: var(--lime); color: #0d0d0d; }
.dm-fys__all:hover .dm-icon { transform: translateX(4px); }
.dm-fys__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); }
.dm-fys__col { position: relative; min-width: 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .5); }
.dm-fys__banner { position: relative; isolation: isolate; height: clamp(320px, 25vw, 400px); overflow: hidden; }
.dm-fys__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 18%; transition: transform 1.2s var(--ease); }
.dm-fys__col--women .dm-fys__photo { object-position: 70% 14%; }
.dm-fys__col:hover .dm-fys__photo { transform: scale(1.04); }
.dm-fys__banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 20, 20, .85) 0, rgba(20, 20, 20, .55) 38%, rgba(20, 20, 20, 0) 65%), linear-gradient(0deg, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, 0) 30%); }
.dm-fys__copy { position: absolute; left: clamp(20px, 2.4vw, 40px); top: clamp(40px, 4vw, 70px); color: #fff; }
.dm-fys__label { display: flex; align-items: center; gap: 14px; margin: 0; font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; text-transform: uppercase; }
.dm-fys__label::before { content: ""; width: 40px; height: 4px; background: var(--lime); }
.dm-fys__col--women .dm-fys__label::before { background: var(--pink); }
.dm-fys__ctitle { margin: 0; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(38px, 3.6vw, 60px); line-height: 1; text-transform: uppercase; letter-spacing: -.01em; }
.dm-fys__ctext { margin: 14px 0 0; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.35; color: #f0f0f0; }
.dm-fys__btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; margin-top: 22px; padding: 0 26px; border-radius: 26px; background: #fff; color: #0d0d0d; font-weight: 700; font-size: 15px; text-transform: uppercase; transition: background .25s, transform .25s var(--ease); }
.dm-fys__btn .dm-icon { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.dm-fys__btn:hover { background: var(--lime); transform: translateY(-2px); }
.dm-fys__btn:hover .dm-icon { transform: translateX(4px); }
.dm-fys__cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; margin-top: -90px; padding: 0 14px 16px; }
.dm-fys__card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 3px solid #fff; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .45); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.dm-fys__card:hover { transform: translateY(-5px); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .55); }
.dm-fys__cimg { display: block; height: clamp(150px, 12vw, 200px); overflow: hidden; background: #eee; border-radius: 5px; }
.dm-fys__cimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dm-fys__card:hover .dm-fys__cimg img { transform: scale(1.06); }
.dm-fys__cname { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 14px 8px 10px 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.dm-fys__cname i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1.5px solid #0d0d0d; border-radius: 50%; transition: background .25s, border-color .25s; }
.dm-fys__cname .dm-icon { width: 14px; height: 14px; stroke-width: 2.2; }
.dm-fys__card:hover .dm-fys__cname i { background: var(--lime); border-color: var(--lime); }
@media (max-width: 1100px) {
.dm-fys__head { grid-template-columns: 1fr auto; }
.dm-fys__script { display: none; }
.dm-fys__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.dm-fys__head { grid-template-columns: 1fr; }
.dm-fys__all { justify-self: start; height: 48px; padding: 0 22px; font-size: 14px; }
.dm-fys__banner { height: 360px; }
.dm-fys__banner::after { background: linear-gradient(90deg, rgba(20, 20, 20, .85) 0, rgba(20, 20, 20, .4) 70%, rgba(20, 20, 20, .1) 100%), linear-gradient(0deg, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, 0) 30%); }
.dm-fys__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.dm-fys__card { flex: 0 0 42%; scroll-snap-align: start; }
}
/* Owner: no logo inside the hero; header logo a little smaller */
.dm-h4__brand { display: none; }
.dm-header .custom-logo-link img { max-height: 32px; }
@media (max-width: 760px) { .dm-header .custom-logo-link img { max-height: 24px; } }
.dm-fys__script svg { right: -40%; bottom: -55%; width: 55%; }
/* Home: The New Drop header (owner ref 32) — cards untouched */
.dm-drop2 { background: #f6f6f5; }
.dm-drop2__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--gutter); margin-bottom: clamp(20px, 2vw, 32px); }
.dm-drop2__eyebrow { display: flex; align-items: center; gap: 18px; margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.dm-drop2__eyebrow::before { content: ""; width: 44px; height: 4px; background: var(--lime); }
.dm-drop2__title { margin: 8px 0 0; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(44px, 5vw, 84px); line-height: .95; letter-spacing: -.01em; color: #0d0d0d; text-transform: none; }
.dm-drop2__title::first-letter { text-transform: uppercase; }
.dm-drop2__title span { color: var(--lime); }
.dm-drop2__text { margin: 8px 0 0; font-size: clamp(15px, 1.3vw, 21px); color: #6a6a6a; }
.dm-drop2__ctrl { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 50px); padding-bottom: 34px; }
.dm-drop2__all { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px; border: 1.5px solid #0d0d0d; border-radius: 8px; font-weight: 600; font-size: 17px; transition: background .25s, color .25s; }
.dm-drop2__all .dm-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.dm-drop2__all:hover { background: #0d0d0d; color: #fff; }
.dm-drop2__all:hover .dm-icon { transform: translateX(4px); }
.dm-drop2__ctrl .dm-drop2__nav + .dm-drop2__nav { margin-left: calc(-1 * clamp(14px, 2.4vw, 50px) + 20px); }
.dm-drop2__nav { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #0d0d0d; transition: background .25s, color .25s, opacity .25s, border-color .25s; }
.dm-drop2__nav--next { background: #0d0d0d; border-color: #0d0d0d; color: #fff; }
.dm-drop2__nav:hover { background: var(--lime); border-color: var(--lime); color: #0d0d0d; }
.dm-drop2__nav .dm-icon { width: 24px; height: 24px; stroke-width: 1.8; }
.dm-drop2__nav[disabled] { opacity: .35; pointer-events: none; }
.dm-drop2.is-static .dm-drop2__nav { display: none; }
@media (max-width: 760px) {
.dm-drop2__head { flex-direction: column; align-items: flex-start; }
.dm-drop2__ctrl { padding-bottom: 0; }
.dm-drop2__nav { width: 48px; height: 48px; }
.dm-drop2__all { height: 48px; padding: 0 20px; font-size: 15px; }
}
.dm-h4__side--l .dm-h4__photo { object-position: 60% 0; }
.dm-fys__col--men .dm-fys__photo { object-position: 70% 20%; }
/* Collections banner grows with its text so the cards never cover the button */
.dm-fys__banner { height: auto; min-height: clamp(320px, 25vw, 400px); padding: clamp(34px, 3.4vw, 64px) clamp(20px, 2.4vw, 40px) 118px; }
.dm-fys__copy { position: relative; left: auto; top: auto; }
.dm-fys__cards { margin-top: -96px; }
/* ==========================================================================
One heading style for every home section (owner: "heading sari ek jaise")
eyebrow with lime bar · Kanit black italic · last word lime · grey sub text
========================================================================== */
body.home .dm-eyebrow, body.home .dm-ov__eyebrow, .dm-kicker, .dm-drop2__eyebrow, .dm-fys__eyebrow {
display: flex; align-items: center; justify-content: flex-start; gap: 18px; margin: 0; opacity: 1;
font-family: var(--f-sans); font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: #0d0d0d;
}
body.home .dm-eyebrow::before, body.home .dm-ov__eyebrow::before, .dm-kicker::before { content: ""; flex: none; width: 44px; height: 4px; background: var(--lime); }
body.home .dm-ov__eyebrow::after { display: none; }
body.home .dm-section__title, body.home .dm-tr__title, body.home .dm-ov__title, body.home .dm-story__title, .dm-htitle, .dm-drop2__title, .dm-fys__title {
margin: 8px 0 0; font-family: "Kanit", var(--f-sans) !important; font-weight: 900; font-style: italic; font-stretch: normal;
font-size: clamp(44px, 5vw, 84px) !important; line-height: .95; letter-spacing: -.01em; word-spacing: 0; text-transform: none; color: #0d0d0d;
}
body.home .dm-section__title::first-letter, body.home .dm-tr__title::first-letter, .dm-htitle::first-letter { text-transform: uppercase; }
body.home .dm-section__title .is-tan, body.home .dm-tr__title .is-tan, body.home .dm-ov__title .is-tan, body.home .dm-story__title .is-accent, .dm-htitle .is-tan, .dm-drop2__title span, .dm-fys__title span {
color: #0d0d0d !important; -webkit-text-fill-color: #0d0d0d !important; background: none !important; padding: 0;
}
body.home .dm-story__title span { white-space: normal; }
body.home .dm-story__title { font-size: clamp(40px, 4vw, 68px) !important; }
body.home .dm-section__text, body.home .dm-tr__text, .dm-htext, .dm-drop2__text, .dm-fys__text { margin: 10px 0 0; font-size: clamp(15px, 1.3vw, 21px); color: #6a6a6a; letter-spacing: 0; }
/* Left-aligned like The New Drop */
body.home .dm-section__head { max-width: none; margin-left: 0; margin-right: 0; padding: 0 var(--gutter); text-align: left; align-items: flex-start; }
body.home .dm-bestsellers .dm-section__head, body.home .dm-drop .dm-section__head { display: flex; flex-direction: column; }
/* ==========================================================================
Home: In store (owner ref 34)
========================================================================== */
.dm-is2 { padding-top: 0 !important; background: #f6f6f5; }
.dm-is2__banner { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(380px, 30vw, 520px); padding: clamp(40px, 4.4vw, 80px) var(--gutter) 150px; }
.dm-is2__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.dm-is2__banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(246, 246, 245, .96) 0, rgba(246, 246, 245, .85) 30%, rgba(246, 246, 245, .15) 55%, rgba(246, 246, 245, 0) 70%), linear-gradient(0deg, #f6f6f5 0, rgba(246, 246, 245, 0) 38%); }
.dm-is2__copy { position: relative; max-width: 640px; }
.dm-is2__btn { display: inline-flex; align-items: center; gap: 12px; height: 52px; margin-top: 26px; padding: 0 30px; border-radius: 8px; background: #111; color: #fff; font-weight: 600; font-size: 16.5px; transition: background .25s, color .25s; }
.dm-is2__btn .dm-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.dm-is2__btn:hover { background: var(--lime); color: #0d0d0d; }
.dm-is2__btn:hover .dm-icon { transform: translateX(4px); }
.dm-is2__script { position: absolute; right: clamp(20px, 4vw, 80px); top: clamp(40px, 5vw, 90px); margin: 0; max-width: 4.6em; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(44px, 4.2vw, 76px); line-height: .9; color: #111; transform: rotate(-16deg); }
.dm-is2__script::after { content: ""; display: block; width: 110%; height: 6px; margin-top: 4px; background: var(--lime); border-radius: 50%; transform: rotate(-4deg); }
.dm-is2__row { position: relative; margin-top: -120px; }
.dm-is2__rowhead { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 var(--gutter); margin-bottom: 14px; }
.dm-is2__rowhead h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(19px, 1.6vw, 25px); font-weight: 500; text-transform: uppercase; color: #9a9a9a; }
.dm-is2__rowhead h3::before { content: ""; width: 44px; height: 4px; background: var(--lime); }
.dm-is2__rowhead strong { font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; color: #0d0d0d; }
.dm-is2__rowhead a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.dm-is2__rowhead a .dm-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.dm-is2__rowhead a:hover .dm-icon { transform: translateX(4px); }
.dm-is2 .dm-carousel__track { --cols: 5; }
@media (max-width: 1100px) { .dm-is2 .dm-carousel__track { --cols: 2.4; } .dm-is2__script { display: none; } }
@media (max-width: 640px) {
.dm-is2 .dm-carousel__track { --cols: 1.4; }
.dm-is2__banner { padding-bottom: 130px; }
.dm-is2__banner::after { background: linear-gradient(90deg, rgba(246, 246, 245, .95) 0, rgba(246, 246, 245, .7) 60%, rgba(246, 246, 245, .3) 100%), linear-gradient(0deg, #f6f6f5 0, rgba(246, 246, 245, 0) 38%); }
}
html body.home h2 .is-tan, html body.home h2 .is-accent { background: none !important; background-image: none !important; color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; }
/* In store: photo sits on the right so the model's face shows */
.dm-is2__photo { left: auto; right: 0; width: 62%; object-position: 50% 12%; }
.dm-is2__banner::after { background: linear-gradient(90deg, #f6f6f5 0, #f6f6f5 38%, rgba(246, 246, 245, .6) 46%, rgba(246, 246, 245, 0) 58%), linear-gradient(0deg, #f6f6f5 0, rgba(246, 246, 245, 0) 38%); }
.dm-is2__script { right: clamp(12px, 2vw, 40px); }
@media (max-width: 640px) { .dm-is2__photo { width: 100%; } }
.dm-is2__photo { object-position: 50% 0; }
@media (max-width: 760px) {
.dm-is2__banner { min-height: 0; padding: 0 0 20px; }
.dm-is2__photo { position: relative; inset: auto; display: block; width: 100%; height: 300px; z-index: 0; object-position: 60% 0; }
.dm-is2__banner::after { display: none; }
.dm-is2__copy { padding: 22px var(--gutter) 0; }
.dm-is2__row { margin-top: 0; }
}
/* ==========================================================================
DANMO hero v5 (ref 34)
========================================================================== */
.dm-h5 { position: relative; background: #0b0b0b; color: #fff; }
.dm-h5__stage { position: relative; isolation: isolate; overflow: hidden; height: clamp(560px, 45vw, 780px); }
.dm-h5__bg { position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%; object-fit: cover; }
.dm-h5__stage::before { content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(40% 55% at 50% 50%, rgba(8, 8, 8, .92) 0, rgba(8, 8, 8, .6) 60%, rgba(8, 8, 8, .35) 100%); }
/* Lime slanted panels behind the models */
.dm-h5__panel { position: absolute; z-index: -2; top: 0; height: 88%; width: 21%; background: linear-gradient(180deg, #b6fa0e 0, #8fd600 100%); box-shadow: 0 0 80px rgba(182, 250, 14, .35); }
.dm-h5__panel--l { left: 17%; clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }
.dm-h5__panel--r { right: 7%; clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); }
.dm-h5__panel { animation: dm-h5-panel 1s var(--ease) both; }
@keyframes dm-h5-panel { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Outlined MEN / WOMEN */
.dm-h5__word { position: absolute; z-index: -1; top: 50%; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(90px, 8.6vw, 150px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .45); white-space: nowrap; }
.dm-h5__word--l { left: 3.4%; transform: translateY(-50%) rotate(90deg) translateX(-15%); transform-origin: left center; left: 7.5%; top: 6%; transform: rotate(90deg) translateY(-100%); transform-origin: left top; }
.dm-h5__word--r { right: 2%; top: 10%; transform: rotate(90deg) translateY(0); transform-origin: right top; -webkit-text-stroke-color: rgba(182, 250, 14, .7); right: calc(2% + .98em); }
/* Models */
.dm-h5__models { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dm-h5__slide { position: absolute; inset: 0; visibility: hidden; }
.dm-h5__slide.is-active, .dm-h5__slide.is-leaving { visibility: visible; }
.dm-h5__model { position: absolute; bottom: 0; height: 100%; width: auto; max-width: 42%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); opacity: 0; transition: opacity .8s var(--ease), transform .9s var(--ease); }
.dm-h5__model--l { left: 1%; transform: translateX(-80px); object-position: 0 100%; }
.dm-h5__model--r { right: 5%; transform: translateX(80px); object-position: 100% 100%; }
.dm-h5__slide.is-active .dm-h5__model { opacity: 1; transform: none; }
.dm-h5__slide.is-active .dm-h5__model--r { transition-delay: .12s; }
.dm-h5__slide.is-leaving .dm-h5__model--l { opacity: 0; transform: translateX(-50px); transition-duration: .55s; }
.dm-h5__slide.is-leaving .dm-h5__model--r { opacity: 0; transform: translateX(50px); transition-duration: .55s; }
/* Fade the bottom of the models into the dark so the links read */
.dm-h5__stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 1; background: linear-gradient(0deg, rgba(8, 8, 8, .92) 0, rgba(8, 8, 8, 0) 100%); pointer-events: none; }
/* Centre */
.dm-h5__copy { position: absolute; z-index: 3; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; width: min(560px, 38%); transform: translate(-50%, -54%); text-align: center; }
.dm-h5__copy > * { animation: dm-rise .9s var(--ease) both; }
.dm-h5__copy > :nth-child(2) { animation-delay: .08s; } .dm-h5__copy > :nth-child(3) { animation-delay: .16s; } .dm-h5__copy > :nth-child(4) { animation-delay: .22s; } .dm-h5__copy > :nth-child(5) { animation-delay: .3s; }
.dm-h5__kicker { margin: 0; font-size: clamp(12px, .95vw, 15px); font-weight: 500; letter-spacing: .5em; text-transform: uppercase; }
.dm-h5__title { margin: clamp(16px, 1.6vw, 26px) 0 0; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(64px, 7.6vw, 132px); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.dm-h5__title span { display: block; white-space: nowrap; }
.dm-h5__title .is-lime { color: var(--lime); text-shadow: 0 0 40px rgba(182, 250, 14, .25); }
.dm-h5__swash { width: 70%; height: 22px; margin-top: 8px; fill: var(--lime); animation: dm-h4-swash .9s var(--ease) .5s both; }
.dm-h5__tags { margin: clamp(18px, 1.8vw, 28px) 0 0; font-size: clamp(11px, .85vw, 14px); font-weight: 500; letter-spacing: .38em; text-transform: uppercase; white-space: nowrap; }
.dm-h5__tags i { font-style: normal; margin: 0 1em; color: var(--lime); letter-spacing: 0; }
.dm-h5__btn { display: inline-flex; align-items: center; gap: 22px; height: 56px; margin-top: clamp(22px, 2.4vw, 40px); padding: 0 46px; border-radius: 30px; background: #fff; color: #0d0d0d; font-weight: 700; font-size: 16.5px; text-transform: uppercase; box-shadow: 0 0 30px rgba(182, 250, 14, .45), 0 0 0 1px rgba(182, 250, 14, .5); transition: background .25s, transform .25s var(--ease); }
.dm-h5__btn .dm-icon { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.dm-h5__btn:hover { background: var(--lime); transform: translateY(-2px); }
.dm-h5__btn:hover .dm-icon { transform: translateX(4px); }
/* Category links along the bottom */
.dm-h5__cats { position: absolute; z-index: 3; bottom: clamp(40px, 4vw, 64px); }
.dm-h5__cats--l { left: clamp(20px, 3.8vw, 66px); }
.dm-h5__cats--r { right: clamp(20px, 3.8vw, 66px); }
.dm-h5__clabel { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .25); font-size: clamp(26px, 2.1vw, 36px); font-weight: 800; }
.dm-h5__cats ul { list-style: none; display: flex; margin: 0; padding: 0; }
.dm-h5__cats li + li::before { content: "|"; margin: 0 clamp(12px, 1.4vw, 24px); color: rgba(255, 255, 255, .6); }
.dm-h5__cats a { font-size: clamp(12.5px, 1vw, 16px); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; transition: color .2s; }
.dm-h5__cats a:hover { color: var(--lime); }
/* Arrows + dots */
.dm-h5__nav { position: absolute; z-index: 4; top: 66%; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .2); color: #fff; transition: background .25s, color .25s, border-color .25s; }
.dm-h5__nav--prev { left: clamp(14px, 1.6vw, 28px); }
.dm-h5__nav--next { right: clamp(14px, 3.2vw, 56px); border-color: var(--lime); color: var(--lime); box-shadow: 0 0 20px rgba(182, 250, 14, .4); }
.dm-h5__nav:hover { background: var(--lime); border-color: var(--lime); color: #0d0d0d; }
.dm-h5__nav .dm-icon { width: 24px; height: 24px; stroke-width: 1.6; }
.dm-h5__dots { position: absolute; z-index: 4; left: 50%; bottom: 30px; display: flex; gap: 12px; transform: translateX(-50%); }
.dm-h5__dots button { width: 40px; height: 5px; padding: 0; border-radius: 4px; background: rgba(255, 255, 255, .3); transition: background .3s; }
.dm-h5__dots button[aria-current="true"] { background: var(--lime); }
/* Feature bar */
.dm-h5__feats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 22px var(--gutter); background: #0e0e0e; border-top: 1px solid rgba(255, 255, 255, .08); }
.dm-h5__feats li { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 4px 12px; }
.dm-h5__feats li + li { border-left: 1px solid rgba(255, 255, 255, .22); }
.dm-h5__feats .dm-icon { flex: none; width: 40px; height: 40px; stroke-width: 1.2; }
.dm-h5__feats span { display: flex; flex-direction: column; font-size: 14.5px; color: #cfcfcf; }
.dm-h5__feats strong { font-size: 16.5px; font-weight: 500; color: #fff; }
@media (max-width: 1100px) {
.dm-h5__stage { height: auto; padding-bottom: 0; display: flex; flex-direction: column; }
.dm-h5__copy { position: relative; left: auto; top: auto; width: auto; transform: none; padding: 40px var(--gutter) 30px; }
.dm-h5__models { position: relative; inset: auto; height: 460px; }
.dm-h5__panel { top: auto; bottom: 0; height: 460px; }
.dm-h5__word { display: none; }
.dm-h5__model { max-width: 50%; }
.dm-h5__cats { position: relative; bottom: auto; left: auto !important; right: auto !important; padding: 18px var(--gutter) 0; }
.dm-h5__cats ul { flex-wrap: wrap; row-gap: 8px; }
.dm-h5__nav { top: auto; bottom: 330px; }
.dm-h5__dots { position: relative; left: auto; bottom: auto; transform: none; justify-content: center; padding: 20px 0 24px; }
.dm-h5__stage::after { display: none; }
.dm-h5__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
.dm-h5__feats li:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
.dm-h5__models, .dm-h5__panel { height: 340px; }
.dm-h5__nav { width: 42px; height: 42px; bottom: 250px; }
.dm-h5__title { font-size: clamp(56px, 17vw, 76px); }
.dm-h5__tags { white-space: normal; letter-spacing: .24em; }
.dm-h5__tags i { margin: 0 .5em; }
.dm-h5__btn { padding: 0 34px; }
.dm-h5__clabel { font-size: 22px; margin-bottom: 8px; padding-bottom: 8px; }
.dm-h5__feats li { justify-content: flex-start; gap: 10px; }
.dm-h5__feats .dm-icon { width: 30px; height: 30px; }
.dm-h5__feats strong { font-size: 14px; } .dm-h5__feats span { font-size: 12.5px; }
}
.dm-h5__word { writing-mode: vertical-rl; text-orientation: mixed; top: 4%; transform: none !important; font-size: clamp(110px, 10vw, 180px); -webkit-text-stroke: 2px rgba(255, 255, 255, .35); }
.dm-h5__word--l { left: 2.2%; right: auto; }
.dm-h5__word--r { right: 1.6%; left: auto; -webkit-text-stroke-color: rgba(182, 250, 14, .55); }
.dm-h5__bg { filter: brightness(1.9) contrast(1.05); }
.dm-h5__stage::before { background: radial-gradient(34% 58% at 50% 52%, rgba(8, 8, 8, .9) 0, rgba(8, 8, 8, .55) 65%, rgba(8, 8, 8, .15) 100%); }
.dm-h5__tags { font-size: clamp(11px, .8vw, 13px); letter-spacing: .3em; }
.dm-h5__tags i { margin: 0 .7em; }
@media (max-width: 1100px) {
.dm-h5__copy { order: 1; }
.dm-h5__models { order: 2; overflow: hidden; }
.dm-h5__models::before { content: ""; position: absolute; left: 30%; top: 0; bottom: 0; width: 22%; background: linear-gradient(180deg, #b6fa0e, #8fd600); transform: skewX(-18deg); box-shadow: 0 0 60px rgba(182, 250, 14, .35); }
.dm-h5__slide { z-index: 1; }
.dm-h5__panel { display: none; }
.dm-h5__cats--l { order: 3; } .dm-h5__cats--r { order: 4; }
.dm-h5__dots { order: 5; }
.dm-h5__nav { top: auto; bottom: auto; }
.dm-h5__nav { display: none; }
}
@media (max-width: 640px) {
.dm-h5__model--l { left: -6%; max-width: 60%; }
.dm-h5__model--r { right: -6%; max-width: 60%; }
.dm-h5__cats ul { font-size: 12px; }
.dm-h5__cats li + li::before { margin: 0 8px; }
}
/* Hero v5: closer match to ref 35 */
.dm-h5__stage { height: clamp(580px, 45.4vw, 800px); }
.dm-h5__bg { filter: none; object-position: 50% 30%; }
.dm-h5__stage::before { background: radial-gradient(26% 50% at 50% 50%, rgba(6, 6, 6, .75) 0, rgba(6, 6, 6, .25) 70%, rgba(6, 6, 6, 0) 100%), linear-gradient(0deg, rgba(6, 6, 6, .6) 0, rgba(6, 6, 6, 0) 35%); }
/* Panels: tall parallelograms leaning right, behind each model */
.dm-h5__panel { top: 0; height: 78%; width: 17%; background: linear-gradient(170deg, #c4ff2e 0, #9be000 60%, #7cc000 100%); box-shadow: none; filter: drop-shadow(0 0 40px rgba(182, 250, 14, .45)); }
.dm-h5__panel--l { left: 17.5%; clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); }
.dm-h5__panel--r { right: 9%; width: 22%; height: 94%; top: 0; clip-path: polygon(48% 0, 100% 0, 52% 100%, 0 100%); }
/* Outlined words: MEN reads bottom-to-top, WOMEN top-to-bottom */
.dm-h5__word { font-size: clamp(120px, 11vw, 190px); -webkit-text-stroke: 2px rgba(255, 255, 255, .4); letter-spacing: .01em; }
.dm-h5__word--l { left: 1.6%; top: 3%; writing-mode: vertical-rl; transform: rotate(180deg) !important; }
.dm-h5__word--r { right: 1.2%; top: 6%; -webkit-text-stroke: 2px rgba(182, 250, 14, .5); }
/* Models: bigger and closer, like the ref */
.dm-h5__model { height: 112%; bottom: -12%; max-width: 46%; filter: contrast(1.06) saturate(1.08) drop-shadow(0 30px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 1px rgba(182, 250, 14, .3)); }
.dm-h5__model--l { left: 0; }
.dm-h5__model--r { right: 4%; }
/* Title: much bigger */
.dm-h5__copy { width: min(640px, 40%); transform: translate(-50%, -56%); }
.dm-h5__title { font-size: clamp(76px, 9.4vw, 164px); line-height: .86; transform: skewX(-4deg); }
.dm-h5__title .is-lime { text-shadow: 0 0 30px rgba(182, 250, 14, .35); }
.dm-h5__swash { width: 62%; height: 18px; margin-top: 14px; transform: rotate(-2deg); }
.dm-h5__kicker { font-size: clamp(12px, .95vw, 15.5px); letter-spacing: .55em; }
.dm-h5__tags { margin-top: clamp(22px, 2.2vw, 34px); }
.dm-h5__btn { height: 54px; padding: 0 40px; font-size: 16px; }
/* Bottom labels */
.dm-h5__clabel { font-weight: 800; font-size: clamp(28px, 2.1vw, 36px); border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
.dm-h5__cats--r .dm-h5__clabel { padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.dm-h5__cats--l { bottom: clamp(44px, 4.4vw, 70px); }
.dm-h5__cats--r { bottom: clamp(44px, 4.4vw, 70px); }
@media (max-width: 1100px) {
.dm-h5__stage { height: auto; }
.dm-h5__model { height: 100%; bottom: 0; }
.dm-h5__copy { width: auto; transform: none; }
.dm-h5__title { font-size: clamp(64px, 16vw, 110px); }
}
/* Header to ref 35: dropdowns, dark search, wishlist */
.dm-header .dm-nav__list > li { position: relative; }
.dm-header .dm-nav__list > li.menu-item-has-children > a { display: inline-flex; align-items: center; gap: 6px; }
.dm-header .dm-nav__list > li.menu-item-has-children > a::after { content: ""; position: static; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; background: none; transform: rotate(45deg) translateY(-3px); transition: transform .25s; }
.dm-header .dm-nav__list > li:hover > a::after { transform: rotate(-135deg) translate(-2px, -1px); }
.dm-header .dm-nav__list .sub-menu { position: absolute; left: -16px; top: 100%; z-index: 60; min-width: 200px; margin: 0; padding: 10px 0; list-style: none; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: #141414; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
.dm-header .dm-nav__list > li:hover > .sub-menu, .dm-header .dm-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.dm-header .dm-nav__list .sub-menu a { display: block; padding: 9px 20px; font-size: 14.5px; color: #e8e8e8; }
.dm-header .dm-nav__list .sub-menu a::after { display: none; }
.dm-header .dm-nav__list .sub-menu a:hover { color: var(--lime); background: rgba(255, 255, 255, .04); }
.dm-header .dm-nav__list > li { padding: 22px 0; }
.dm-header .dm-search, .dm-header.is-scrolled .dm-search, .dm-header .dm-search.is-open { background: #111; border: 1px solid rgba(255, 255, 255, .35); }
.dm-header .dm-search__input { color: #fff; }
.dm-header .dm-search__input::placeholder { color: #9a9a9a; }
.dm-header .dm-search__toggle { color: #fff; order: 0; }
@media (min-width: 1101px) { .dm-header .dm-search { flex-direction: row-reverse; } .dm-header .dm-search__input { padding: 0 16px 0 50px; } .dm-header .dm-search__toggle { left: 0; right: auto; } }
.dm-header .dm-wish-count:not([hidden]), .dm-header .dm-wish-count { background: var(--lime); color: #0d0d0d; }
.dm-header .custom-logo-link img { max-height: 40px; }
/* Hero: keep MEN outline visible beside the man */
.dm-h5__model--l { left: 5%; }
.dm-h5__word--l { z-index: 0; }
.dm-h5__bg { filter: brightness(.85); }
.dm-h5__word--l { transform-origin: 50% 50% !important; top: 8%; left: 2%; }
/* Hero copy: tighter + softer, like ref 36 */
.dm-h5__copy { transform: translate(-50%, -57%); }
.dm-h5__title { margin-top: 18px; line-height: .8; font-size: clamp(72px, 8.8vw, 152px); }
.dm-h5__title span + span { margin-top: .02em; }
.dm-h5__title .is-lime { text-shadow: none; }
.dm-h5__swash { margin-top: 10px; width: 56%; height: 14px; }
.dm-h5__tags { margin-top: 18px; }
.dm-h5__btn { margin-top: 30px; height: 52px; padding: 0 44px; box-shadow: 0 0 18px rgba(182, 250, 14, .28); }
/* Hero copy a size smaller (owner) */
.dm-h5__title { font-size: clamp(60px, 7vw, 122px); }
.dm-h5__kicker { font-size: clamp(11px, .8vw, 13.5px); }
.dm-h5__swash { width: 50%; height: 12px; }
.dm-h5__btn { height: 46px; padding: 0 32px; gap: 16px; margin-top: 26px; font-size: 14.5px; }
.dm-h5__btn .dm-icon { width: 17px; height: 17px; }
/* Header: smaller logo, menu on the same line as the icons */
.dm-header .custom-logo-link img { max-height: 28px; }
@media (max-width: 760px) { .dm-header .custom-logo-link img { max-height: 22px; } }
.dm-header .dm-nav__list > li { padding: 0; height: var(--header-h, 72px); display: flex; align-items: center; }
.dm-header .dm-nav__list { gap: clamp(20px, 2.4vw, 44px); }
.dm-header .dm-nav__list > li > a { font-size: 15px; font-weight: 500; }
.dm-header .dm-nav__list > li.has-mega > .sub-menu { display: none !important; }
/* ==========================================================================
Mega menu
========================================================================== */
@media (min-width: 1101px) {
.dm-header .dm-nav, .dm-header .dm-nav__list, .dm-header .dm-nav__list > li.has-mega { position: static; }
.dm-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; padding: 28px var(--gutter) 34px; background: #111; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 3px solid var(--lime); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s, transform .3s var(--ease), visibility .22s; }
.dm-header .dm-nav__list > li.has-mega:hover > .dm-mega, .dm-header .dm-nav__list > li.has-mega:focus-within > .dm-mega { opacity: 1; visibility: visible; transform: none; }
.dm-header .dm-nav__list > li.has-mega:hover > a::after { transform: rotate(-135deg) translate(-2px, -1px); }
}
.dm-mega__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 48px); max-width: 1500px; margin: 0 auto; }
.dm-mega__title { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #9a9a9a; }
.dm-mega__title::before { content: ""; width: 26px; height: 3px; background: var(--lime); }
.dm-mega__cats ul, .dm-mega__feat ul { list-style: none; margin: 0; padding: 0; }
.dm-mega__cats li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.dm-header .dm-mega a::after { display: none !important; }
.dm-mega__cats a { display: flex !important; align-items: center; gap: 14px; padding: 9px 6px !important; color: #fff; border-radius: 8px; transition: background .2s; }
.dm-mega__cats a:hover { background: rgba(255, 255, 255, .05); }
.dm-mega__thumb { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 8px; background: #222; }
.dm-mega__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dm-mega__name { flex: 1; display: flex; flex-direction: column; font-size: 15px; font-weight: 600; }
.dm-mega__name small { font-size: 12.5px; font-weight: 400; color: #8a8a8a; }
.dm-mega__cats a > .dm-icon { width: 16px; height: 16px; color: #666; transition: transform .25s, color .25s; }
.dm-mega__cats a:hover > .dm-icon { color: var(--lime); transform: translateX(3px); }
.dm-mega__cats a:hover .dm-mega__name { color: var(--lime); }
.dm-mega__all { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 16px; padding: 0 !important; color: var(--lime) !important; font-weight: 600; font-size: 14px; }
.dm-mega__all .dm-icon { width: 15px; height: 15px; }
.dm-mega__feat ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dm-mega__feat a { display: flex !important; flex-direction: column; gap: 6px; padding: 0 !important; color: #fff; }
.dm-mega__pimg { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: #222; }
.dm-mega__pimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dm-mega__feat a:hover .dm-mega__pimg img { transform: scale(1.05); }
.dm-mega__pname { margin-top: 4px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.dm-mega__price { font-size: 14px; font-weight: 700; color: var(--lime); }
.dm-mega__price del { color: #777; font-weight: 400; margin-right: 4px; }
.dm-mega__soon { margin: 0; color: #9a9a9a; font-size: 14px; }
.dm-mega__promo { position: relative; display: block !important; min-height: 300px; overflow: hidden; border-radius: 14px; padding: 0 !important; background: #1b1b1b; }
.dm-mega__pbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 20%; transition: transform .8s var(--ease); }
.dm-mega__promo:hover .dm-mega__pbg { transform: scale(1.05); }
.dm-mega__promo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0, rgba(0, 0, 0, 0) 60%); }
.dm-mega__pcopy { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; display: flex; flex-direction: column; color: #fff; }
.dm-mega__pcopy small { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.dm-mega__pcopy strong { font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: 34px; line-height: 1; text-transform: uppercase; }
.dm-mega__pcopy em { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-style: normal; font-size: 14px; font-weight: 600; }
.dm-mega__pcopy .dm-icon { width: 15px; height: 15px; }
@media (max-width: 1100px) { .dm-mega { display: none; } }
.dm-mega__feat a, .dm-mega__pname, .dm-mega__name { white-space: normal; } .dm-mega__pname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Hero: copy a little higher; lime panels measured from ref 35 */
.dm-h5__copy { transform: translate(-50%, -64%); }
@media (min-width: 1101px) {
.dm-h5__panel { top: 0; background: linear-gradient(175deg, #c8ff3a 0, #a6ec06 45%, #86cc00 100%); filter: drop-shadow(0 0 28px rgba(182, 250, 14, .55)); animation: dm-h5-panel 1s var(--ease) both; }
.dm-h5__panel--l { left: 17.3%; width: 17.4%; height: 69%; clip-path: polygon(57% 0, 100% 0, 43% 100%, 0 100%); }
.dm-h5__panel--r { left: auto; right: 10.3%; width: 28.1%; height: 87%; clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); }
}
/* Ref 37: panels show clearly beside the models, with a neon halo and the model's shadow falling on them */
@media (min-width: 1101px) {
.dm-h5__panel { filter: drop-shadow(0 0 22px rgba(182, 250, 14, .7)) drop-shadow(0 0 60px rgba(182, 250, 14, .35));
background: linear-gradient(90deg, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, 0) 35%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, rgba(0, 0, 0, 0) 2px 9px), linear-gradient(175deg, #c8ff3a 0, #a6ec06 45%, #7fc000 100%); }
.dm-h5__panel--l { left: 19%; width: 17%; height: 78%; }
.dm-h5__panel--r { right: 9.5%; width: 27%; height: 90%; }
.dm-h5__model--l { left: -1%; height: 106%; bottom: -6%; }
.dm-h5__model { filter: contrast(1.06) saturate(1.08) drop-shadow(26px 10px 30px rgba(0, 0, 0, .75)); }
.dm-h5__model--r { filter: contrast(1.06) saturate(1.08) drop-shadow(-26px 10px 30px rgba(0, 0, 0, .75)); }
}
/* Panels: exact geometry from ref 37 (1672px frame) — narrower, gentler slant */
@media (min-width: 1101px) {
.dm-h5__panel--l { left: 24.5%; right: auto; width: 10.5%; height: 79%; clip-path: polygon(29% 0, 97% 0, 51% 100%, 0 100%); }
.dm-h5__panel--r { left: 66.4%; right: auto; width: 23.3%; height: 88%; clip-path: polygon(36% 0, 100% 0, 69% 100%, 0 100%); }
.dm-h5__model--l { left: 2%; height: 104%; bottom: -4%; }
}
/* Ref 38 close-up: panels are wider, a deeper lime (not neon), bright at the top
and fading see-through toward the bottom so the concrete shows through */
@media (min-width: 1101px) {
.dm-h5__panel { opacity: 1; filter: drop-shadow(0 0 18px rgba(160, 230, 20, .45));
background: linear-gradient(180deg, #b4ef22 0, #93cc18 22%, #78ad14 48%, rgba(104, 150, 18, .72) 70%, rgba(80, 118, 16, .25) 88%, rgba(60, 90, 12, 0) 100%); }
.dm-h5__panel::after { content: none; }
.dm-h5__panel--l { left: 8.8%; width: 25.9%; height: 83%; clip-path: polygon(42% 0, 100% 0, 58% 100%, 0 100%); }
.dm-h5__panel--r { left: 63.4%; width: 26.6%; height: 88%; clip-path: polygon(43% 0, 100% 0, 57% 100%, 0 100%); }
}
/* Mega menu: compact dropdown under the item (owner: not full width) */
@media (min-width: 1101px) {
.dm-header .dm-nav__list > li.has-mega { position: relative; }
.dm-mega { left: -24px; right: auto; top: calc(100% - 6px); width: 540px; padding: 16px; border: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .85); }
.dm-mega::before { content: ""; position: absolute; left: 44px; top: -7px; width: 12px; height: 12px; background: #111; border-left: 1px solid rgba(255, 255, 255, .1); border-top: 1px solid rgba(255, 255, 255, .1); transform: rotate(45deg); }
}
.dm-mega__inner { grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; max-width: none; }
.dm-mega__title { margin-bottom: 8px; font-size: 11px; letter-spacing: .2em; }
.dm-mega__title::before { width: 18px; height: 2px; }
.dm-mega__cats li + li { border-top: 0; }
.dm-mega__cats a { gap: 12px; padding: 6px !important; }
.dm-mega__thumb { width: 36px; height: 36px; border-radius: 7px; }
.dm-mega__name { font-size: 14px; }
.dm-mega__name small { font-size: 11.5px; }
.dm-mega__all { margin-top: 8px; padding-left: 6px !important; font-size: 13px; }
.dm-mega__promo { min-height: 0; height: 100%; border-radius: 10px; }
.dm-mega__pcopy { left: 14px; right: 14px; bottom: 14px; }
.dm-mega__pcopy small { font-size: 11.5px; }
.dm-mega__pcopy strong { font-size: 24px; }
.dm-mega__pcopy em { font-size: 12.5px; margin-top: 6px; }
@media (min-width: 1101px) {
.dm-header .dm-nav__list > li.has-mega.is-open > .dm-mega { opacity: 1; visibility: visible; transform: none; }
.dm-header .dm-nav__list > li.has-mega.is-open > a { color: var(--lime); }
.dm-header .dm-nav__list > li.has-mega.is-open > a::after { transform: rotate(-135deg) translate(-2px, -1px); }
/* invisible bridge so the panel doesn't close while the mouse crosses the gap */
.dm-mega::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
}
/* ==========================================================================
Collections in the hero look: dark concrete, lime slanted panel, outlined word
========================================================================== */
.dm-fys--dark { background: radial-gradient(60% 60% at 50% 0, #1b1b1b 0, #0b0b0b 70%); color: #fff; }
.dm-fys--dark .dm-fys__eyebrow, .dm-fys--dark .dm-fys__title { color: #fff; }
.dm-fys--dark .dm-fys__text { color: #a9a9a9; }
.dm-fys--dark .dm-fys__script { color: #e9e9e9; }
.dm-fys--dark .dm-fys__all { background: #fff; color: #0d0d0d; }
.dm-fys--dark .dm-fys__all:hover { background: var(--lime); }
.dm-fys--dark .dm-fys__col { background: #141414; border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .9); }
.dm-fys__banner { background: #0b0b0b; }
.dm-fys__bg { position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%; object-fit: cover; object-position: 30% 20%; }
.dm-fys__col--women .dm-fys__bg { object-position: 80% 20%; }
.dm-fys__banner::after { z-index: -3; background: linear-gradient(90deg, rgba(8, 8, 8, .9) 0, rgba(8, 8, 8, .55) 42%, rgba(8, 8, 8, .15) 70%, rgba(8, 8, 8, .35) 100%), linear-gradient(0deg, #141414 0, rgba(20, 20, 20, 0) 34%); }
.dm-fys__panel { position: absolute; z-index: -2; top: 0; left: 52%; width: 34%; height: 84%; clip-path: polygon(42% 0, 100% 0, 58% 100%, 0 100%); background: linear-gradient(180deg, #b4ef22 0, #93cc18 24%, #78ad14 50%, rgba(104, 150, 18, .7) 72%, rgba(80, 118, 16, 0) 100%); filter: drop-shadow(0 0 18px rgba(160, 230, 20, .45)); }
.dm-fys__word { position: absolute; z-index: -2; right: 3%; top: 6%; writing-mode: vertical-rl; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(80px, 7vw, 120px); line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .35); }
.dm-fys__col--women .dm-fys__word { -webkit-text-stroke-color: rgba(182, 250, 14, .5); }
.dm-fys__model { position: absolute; z-index: -1; bottom: 0; right: 14%; height: 100%; width: auto; max-width: 52%; object-fit: contain; object-position: 50% 100%; filter: contrast(1.06) drop-shadow(-22px 10px 26px rgba(0, 0, 0, .7)); transition: transform .8s var(--ease); }
.dm-fys__col:hover .dm-fys__model { transform: translateY(-6px); }
.dm-fys__cards { margin-top: -80px; }
.dm-fys--dark .dm-fys__card { border-color: #1e1e1e; background: #1b1b1b; color: #fff; }
.dm-fys--dark .dm-fys__cimg { background: #222; }
.dm-fys--dark .dm-fys__cname i { border-color: #fff; }
.dm-fys--dark .dm-fys__card:hover .dm-fys__cname i { color: #0d0d0d; }
@media (max-width: 640px) {
.dm-fys__panel { left: 40%; width: 50%; }
.dm-fys__model { right: 0; max-width: 62%; }
.dm-fys__word { display: none; }
}
.dm-fys__col--women .dm-fys__model { height: 136%; bottom: -36%; max-width: 44%; right: 17%; }
.dm-fys__word { font-size: clamp(64px, 5.4vw, 96px); top: 5%; }
/* Owner: no cards under the collection banners; every heading fully black; white page */
body, .dm-main { background: #fff; }
.dm-fys, .dm-drop2, .dm-is2, .dm-is2__banner::after { background-color: #fff; }
.dm-fys { background: #fff; }
.dm-is2 { background: #fff; }
.dm-is2__banner::after { background: linear-gradient(90deg, #fff 0, #fff 38%, rgba(255, 255, 255, .6) 46%, rgba(255, 255, 255, 0) 58%), linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0) 38%); }
@media (max-width: 760px) { .dm-is2__banner::after { display: none; } }
.dm-fys__banner { padding-bottom: clamp(34px, 3.4vw, 64px); min-height: clamp(360px, 27vw, 440px); }
.dm-fys__banner::after { background: linear-gradient(90deg, rgba(8, 8, 8, .9) 0, rgba(8, 8, 8, .55) 42%, rgba(8, 8, 8, .15) 70%, rgba(8, 8, 8, .35) 100%); }
.dm-fys__col { box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .6); }
.dm-fys__panel { height: 90%; }
.dm-fys__col--women .dm-fys__model { height: 120%; bottom: -20%; }
html body.home h2 .is-tan, html body.home h2 .is-accent, html body.home h2 span,
.dm-drop2__title span, .dm-fys__title span, .dm-htitle .is-tan, .dm-tr__title .is-tan, .dm-ov__title .is-tan {
color: #0d0d0d !important; -webkit-text-fill-color: #0d0d0d !important; background: none !important;
}
body.home .dm-section__title, body.home .dm-tr__title, body.home .dm-ov__title, .dm-htitle, .dm-drop2__title, .dm-fys__title { color: #0d0d0d !important; }
html body.home main h2 span.is-tan, html body.home main h2 span.is-accent, html body.home main h2 span { color: #0d0d0d !important; -webkit-text-fill-color: #0d0d0d !important; background: none !important; }
html body.home main .dm-h5 h1 span.is-lime { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; }
/* Collection models: hero-style half-body action poses */
.dm-fys__model, .dm-fys__col--women .dm-fys__model { height: 108%; bottom: -8%; right: 12%; max-width: 52%; }
.dm-fys__col--men .dm-fys__model { right: 16%; }
.dm-fys__col--men .dm-fys__model { right: 8%; } .dm-fys__col--women .dm-fys__model { right: 5%; } .dm-fys__copy { z-index: 2; }
/* ==========================================================================
Footer (ref 39)
========================================================================== */
.dm-ft { background: #0b0b0b; color: #d6d6d6; padding: 0; }
.dm-ft a { color: inherit; }
.dm-ft__nl { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 28%) minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 60px); min-height: 280px; padding: 0 var(--gutter); background: radial-gradient(40% 90% at 85% 50%, #1d1d1d 0, #111 60%), #111; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dm-ft__nlpanel { position: absolute; z-index: -2; top: -10%; right: 12%; width: 20%; height: 130%; clip-path: polygon(52% 0, 100% 0, 48% 100%, 0 100%); background: linear-gradient(180deg, #b4ef22 0, #8fcf16 40%, rgba(110, 160, 20, .5) 80%, rgba(80, 120, 16, 0) 100%); filter: drop-shadow(0 0 22px rgba(160, 230, 20, .5)); }
.dm-ft__nlword { position: absolute; z-index: -2; right: 2%; top: 8%; writing-mode: vertical-rl; transform: rotate(180deg); font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: 110px; line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .3); }
.dm-ft__nlimg { position: absolute; z-index: -1; right: 6%; bottom: 0; height: 118%; width: auto; max-width: 36%; object-fit: contain; object-position: 50% 0; filter: contrast(1.05) drop-shadow(-20px 10px 30px rgba(0, 0, 0, .7)); }
.dm-ft__kicker { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
.dm-ft__nltitle { margin: 8px 0 0; font-family: var(--f-sans); font-weight: 800; font-size: clamp(28px, 2.4vw, 40px); line-height: 1.05; text-transform: uppercase; color: #fff; }
.dm-ft__nltitle span { display: block; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: 1.35em; color: var(--lime); }
.dm-ft__nltext { margin: 12px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.45; color: #bdbdbd; }
.dm-ft .dm-nl { margin: 0; }
.dm-ft .dm-nl__row { position: relative; display: flex; align-items: center; height: 62px; padding: 0 5px 0 22px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 32px; background: transparent; }
.dm-ft .dm-nl__ico { flex: none; width: 22px; height: 22px; color: #eee; }
.dm-ft .dm-nl__input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: 0; background: transparent; color: #fff; font-size: 15.5px; }
.dm-ft .dm-nl__input::placeholder { color: #9a9a9a; }
.dm-ft .dm-nl__input:focus { outline: 0; }
.dm-ft .dm-nl__btn { display: inline-flex; align-items: center; gap: 10px; width: auto; height: 52px; padding: 0 30px; border-radius: 28px; background: var(--lime); color: #0d0d0d; font-weight: 700; font-size: 16.5px; transition: filter .2s, transform .2s var(--ease); }
.dm-ft .dm-nl__btn:hover { filter: brightness(1.08); transform: translateX(2px); }
.dm-ft .dm-nl__btn .dm-icon { width: 18px; height: 18px; }
.dm-ft .dm-nl__msg { margin: 8px 0 0 20px; font-size: 13.5px; color: var(--lime); }
.dm-ft .dm-nl__msg.is-error { color: #ff7b7b; }
.dm-ft__perks { list-style: none; display: flex; flex-wrap: wrap; margin: 22px 0 0; padding: 0; }
.dm-ft__perks li { display: flex; align-items: center; gap: 10px; padding: 0 22px; font-size: 14.5px; color: #eee; }
.dm-ft__perks li:first-child { padding-left: 0; }
.dm-ft__perks li + li { border-left: 1px solid rgba(255, 255, 255, .25); }
.dm-ft__perks .dm-icon { width: 22px; height: 22px; color: var(--lime); }
.dm-ft__main { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 60px); padding: clamp(40px, 4vw, 64px) var(--gutter) clamp(30px, 3vw, 44px); }
.dm-ft__logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.dm-ft__mark { width: 92px; height: auto; }
.dm-ft__word { font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: 46px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.dm-ft__word b { color: var(--lime); font-weight: 900; }
.dm-ft__about { margin: 18px 0 0; max-width: 30ch; font-size: 17px; line-height: 1.55; color: #c9c9c9; }
.dm-ft__social { list-style: none; display: flex; gap: 14px; margin: 26px 0 0; padding: 0; }
.dm-ft__social a, .dm-ft__social span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; color: #fff; transition: background .2s, color .2s, border-color .2s; }
.dm-ft__social a:hover { background: var(--lime); border-color: var(--lime); color: #0d0d0d; }
.dm-ft__social .dm-icon { width: 18px; height: 18px; }
.dm-ft__title { position: relative; margin: 0 0 24px; padding-bottom: 12px; font-family: var(--f-sans); font-size: 19px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: #fff; }
.dm-ft__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px; border-radius: 3px; background: var(--lime); }
.dm-ft__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.dm-ft__col a { display: flex; justify-content: space-between; align-items: center; gap: 10px; max-width: 230px; font-size: 16.5px; color: #d6d6d6; transition: color .2s; }
.dm-ft__col a:hover { color: var(--lime); }
.dm-ft__chev { flex: none; width: 15px; height: 15px; stroke-width: 2; transition: transform .25s; }
.dm-ft__col a:hover .dm-ft__chev { transform: translateX(3px); }
.dm-ft__trust { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 var(--gutter); padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.dm-ft__trust li { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 12px; }
.dm-ft__trust li + li { border-left: 1px solid rgba(255, 255, 255, .18); }
.dm-ft__trust .dm-icon { flex: none; width: 42px; height: 42px; stroke-width: 1.3; color: var(--lime); }
.dm-ft__trust span { display: flex; flex-direction: column; font-size: 15px; color: #c9c9c9; }
.dm-ft__trust strong { font-size: 17px; font-weight: 700; color: #fff; }
.dm-ft__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px var(--gutter) 30px; }
.dm-ft__copy { margin: 0; font-size: 14.5px; color: #bdbdbd; }
.dm-ft__legal { list-style: none; display: flex; margin: 0 0 0 auto; padding: 0; }
.dm-ft__legal li + li::before { content: "|"; margin: 0 24px; color: #666; }
.dm-ft__legal a { font-size: 14.5px; color: #d6d6d6; }
.dm-ft__legal a:hover { color: var(--lime); }
.dm-ft .dm-pay { margin: 0 0 0 40px; }
@media (max-width: 1100px) {
.dm-ft__nl { grid-template-columns: 1fr; padding-top: 36px; padding-bottom: 300px; }
.dm-ft__nlimg { right: 50%; transform: translateX(50%); height: 300px; max-width: 80%; }
.dm-ft__nlpanel { right: 30%; top: auto; bottom: 0; height: 300px; width: 40%; }
.dm-ft__nlword { display: none; }
.dm-ft__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-ft__brand { grid-column: 1 / -1; }
.dm-ft__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
.dm-ft__trust li:nth-child(3) { border-left: 0; }
.dm-ft__bottom { flex-wrap: wrap; justify-content: center; text-align: center; }
.dm-ft__legal { margin: 0; }
.dm-ft .dm-pay { margin: 0; }
}
@media (max-width: 640px) {
.dm-ft .dm-nl__row { height: 56px; padding-left: 16px; }
.dm-ft .dm-nl__btn { padding: 0 18px; height: 46px; font-size: 15px; }
.dm-ft__perks li { padding: 6px 12px; font-size: 13px; }
.dm-ft__trust li { justify-content: flex-start; gap: 10px; }
.dm-ft__trust .dm-icon { width: 30px; height: 30px; }
.dm-ft__trust strong { font-size: 14.5px; }
.dm-ft__trust span { font-size: 12.5px; }
.dm-ft__legal li + li::before { margin: 0 10px; }
.dm-ft { padding-bottom: 80px; }
}
html body footer.dm-ft h2.dm-ft__nltitle span { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; }
.dm-ft__nlimg { top: 6%; bottom: auto; height: 128%; object-position: 50% 0; }
@media (max-width: 1100px) { .dm-ft__nlimg { top: auto; bottom: -40px; height: 340px; } }
.dm-ft__nlform, .dm-ft__nlcopy { min-width: 0; }
@media (max-width: 640px) {
.dm-ft .dm-nl__row { padding: 0 4px 0 14px; }
.dm-ft .dm-nl__input { padding: 0 8px; font-size: 14px; }
.dm-ft .dm-nl__btn { flex: none; padding: 0 16px; font-size: 14px; }
.dm-ft .dm-nl__btn .dm-icon { display: none; }
}
.dm-fys__script svg { right: auto; left: 62%; bottom: -30%; width: 50%; } .dm-fys__head { column-gap: clamp(40px, 5vw, 96px); }
/* Footer perks: always one tidy row of three */
.dm-ft__perks { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
.dm-ft__perks li { white-space: nowrap; padding: 0 20px; }
.dm-ft__perks li:first-child { padding-left: 0; }
@media (max-width: 1400px) { .dm-ft__perks li { padding: 0 14px; font-size: 13.5px; gap: 8px; } .dm-ft__perks .dm-icon { width: 19px; height: 19px; } }
@media (max-width: 640px) {
.dm-ft__perks { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.dm-ft__perks li { flex-direction: column; justify-content: center; gap: 6px; padding: 0 6px; font-size: 12px; text-align: center; white-space: normal; }
.dm-ft__perks li:first-child { padding-left: 6px; }
}
/* Footer duo: soft left edge (no hard cut on the arm), a little more centred, never over the form */
@media (min-width: 1101px) {
.dm-ft__nl { grid-template-columns: minmax(0, 26%) minmax(0, 38%) minmax(0, 1fr); }
.dm-ft__nlimg { right: 9%; max-width: 31%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%); }
.dm-ft__nlpanel { right: 15%; }
}
@media (min-width: 1101px) and (max-width: 1440px) { .dm-ft__nlimg { max-width: 27%; right: 7%; height: 112%; } .dm-ft__nl { grid-template-columns: minmax(0, 27%) minmax(0, 41%) minmax(0, 1fr); } }
/* ==========================================================================
In store in the hero look (dark concrete, lime panel, outlined word, cut-out)
========================================================================== */
.dm-is2--dark .dm-is2__banner { background: #0b0b0b; min-height: clamp(420px, 32vw, 540px); padding: clamp(50px, 5vw, 90px) var(--gutter); display: flex; align-items: center; }
.dm-is2--dark .dm-is2__banner::after { display: block !important; z-index: -3; background: linear-gradient(90deg, rgba(8, 8, 8, .92) 0, rgba(8, 8, 8, .7) 35%, rgba(8, 8, 8, .2) 60%, rgba(8, 8, 8, .45) 100%) !important; }
.dm-is2__bg { position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.dm-is2__panel { position: absolute; z-index: -2; top: 0; left: 55%; width: 22%; height: 92%; clip-path: polygon(42% 0, 100% 0, 58% 100%, 0 100%); background: linear-gradient(180deg, #b4ef22 0, #93cc18 24%, #78ad14 50%, rgba(104, 150, 18, .7) 72%, rgba(80, 118, 16, 0) 100%); filter: drop-shadow(0 0 20px rgba(160, 230, 20, .45)); }
.dm-is2__word { position: absolute; z-index: -2; right: 2.5%; top: 8%; writing-mode: vertical-rl; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(90px, 8vw, 150px); line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(182, 250, 14, .5); }
.dm-is2__model { position: absolute; z-index: -1; bottom: 0; left: 50%; height: 94%; width: auto; max-width: 48%; object-fit: contain; object-position: 50% 100%; filter: contrast(1.06) drop-shadow(-24px 12px 30px rgba(0, 0, 0, .7)); }
.dm-is2--dark .dm-is2__copy { z-index: 1; }
html body.home main .dm-is2--dark .dm-kicker { color: #fff; }
html body.home main .dm-is2--dark h2.dm-htitle, html body.home main .dm-is2--dark h2.dm-htitle span { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.dm-is2--dark .dm-htext { color: #bdbdbd; }
.dm-is2--dark .dm-is2__btn { background: #fff; color: #0d0d0d; }
.dm-is2--dark .dm-is2__btn:hover { background: var(--lime); }
.dm-is2--dark .dm-is2__script { color: #fff; z-index: 1; right: clamp(40px, 8vw, 150px); }
.dm-is2--dark .dm-is2__row { margin-top: clamp(30px, 3vw, 48px); }
@media (max-width: 760px) {
.dm-is2--dark .dm-is2__banner { display: block; padding: 30px var(--gutter) 360px; }
.dm-is2__model { left: 50%; transform: translateX(-50%); height: 340px; max-width: 90%; }
.dm-is2__panel { left: 30%; width: 45%; top: auto; bottom: 0; height: 360px; }
.dm-is2__word { display: none; }
.dm-is2--dark .dm-is2__copy { padding: 0; }
}
.dm-is2__ledge { position: absolute; z-index: -1; left: 46%; bottom: 0; width: 36%; height: 17%; background: linear-gradient(180deg, #6b6b69 0, #4a4a48 8%, #333331 40%, #1c1c1b 100%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .12), 0 -12px 30px rgba(0, 0, 0, .5); clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); }
.dm-is2__model { z-index: 0; bottom: 12%; height: 84%; }
.dm-is2--dark .dm-is2__copy { z-index: 2; }
@media (max-width: 760px) {
.dm-is2__ledge { left: 5%; width: 90%; height: 60px; }
.dm-is2__model { bottom: 44px; height: 300px; }
}
/* He sits ON the block: block top at hip height, feet down in front of it */
.dm-is2__model { bottom: 0; height: 94%; }
.dm-is2__ledge { left: 51%; width: 26%; height: 40%; z-index: -1; clip-path: none; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #7a7a78 0, #5c5c5a 5%, #3d3d3b 30%, #232322 100%); }
@media (max-width: 760px) {
.dm-is2__model { bottom: 0; height: 330px; }
.dm-is2__ledge { left: 22%; width: 56%; height: 140px; }
}
/* ==========================================================================
Home: About us (ref 40)
========================================================================== */
.dm-ab { position: relative; margin-top: clamp(40px, 4vw, 80px); background: #fff; overflow: hidden; }
.dm-ab__top { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); min-height: clamp(560px, 42vw, 720px); }
.dm-ab__copy { position: relative; z-index: 2; padding: clamp(40px, 4vw, 80px) 0 clamp(40px, 4vw, 70px) var(--gutter); }
.dm-ab__kicker { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .5em; text-transform: uppercase; color: #0d0d0d; }
.dm-ab__title { margin: 16px 0 0; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(44px, 4.6vw, 80px); line-height: .92; letter-spacing: -.01em; text-transform: uppercase; color: #0d0d0d; }
.dm-ab__title span { display: block; white-space: nowrap; }
html body.home main h2.dm-ab__title span.is-lime { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; }
.dm-ab__sub { margin: 18px 0 0; font-size: 14px; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; color: #0d0d0d; }
.dm-ab__text { margin: 18px 0 0; max-width: 58ch; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.6; color: #555; }
.dm-ab__vals { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(26px, 2.6vw, 42px) 0 0; padding: 0; }
.dm-ab__vals li { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; font-size: 13.5px; color: #777; line-height: 1.4; }
.dm-ab__vals li:first-child { padding-left: 0; }
.dm-ab__vals li + li { border-left: 1px solid #e3e3e3; }
.dm-ab__ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .25); color: #0d0d0d; }
.dm-ab__ico .dm-icon { width: 28px; height: 28px; stroke-width: 1.5; }
.dm-ab__vals strong { font-size: 16.5px; font-weight: 700; line-height: 1.25; color: #0d0d0d; }
.dm-ab__media { position: relative; margin-left: -6%; }
.dm-ab__photo { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.dm-ab__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.dm-ab__photo:hover img { transform: scale(1.04); }
.dm-ab__photo--m { left: 0; width: 60%; clip-path: polygon(18% 0, 100% 0, 88% 100%, 0 100%); }
.dm-ab__photo--m img { object-position: 30% 20%; }
.dm-ab__photo--w { right: 0; width: 50%; clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.dm-ab__photo--w img { object-position: 45% 15%; }
.dm-ab__script { position: absolute; top: 20%; left: 20%; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(38px, 3.4vw, 60px); line-height: .9; color: #fff; transform: rotate(-12deg); text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.dm-ab__script span { display: block; padding-left: .4em; color: var(--lime); }
.dm-ab__script::after { content: ""; display: block; width: 110%; height: 3px; margin-top: 10px; background: #fff; border-radius: 50%; }
.dm-ab__script--r { left: auto; right: 5%; top: 44%; font-size: clamp(30px, 2.4vw, 44px); }
.dm-ab__script--r span { color: #fff; }
.dm-ab__script--r::after { background: var(--lime); }
.dm-ab__card { position: absolute; z-index: 3; left: 50%; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: clamp(200px, 17vw, 300px); padding: 44px 30px 34px 46px; clip-path: polygon(10% 0, 100% 4%, 90% 100%, 0 100%); background: var(--lime); color: #0d0d0d; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(20px, 1.6vw, 28px); line-height: 1.05; text-transform: uppercase; transition: filter .25s; }
.dm-ab__card .dm-icon { width: 26px; height: 26px; stroke-width: 1.6; transition: transform .3s var(--ease); }
.dm-ab__card:hover { filter: brightness(1.06); }
.dm-ab__card:hover .dm-icon { transform: translateX(5px); }
.dm-ab__stats { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: clamp(30px, 3vw, 48px) var(--gutter); background: #0d0d0d; }
.dm-ab__stats::before { content: ""; position: absolute; left: 0; top: -1px; width: 12%; height: 60%; background: var(--lime); clip-path: polygon(0 0, 100% 0, 0 100%); }
.dm-ab__stats::after { content: "DANMO"; position: absolute; right: 0; bottom: -18px; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: 140px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .06); pointer-events: none; }
.dm-ab__stats li { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 0 16px; }
.dm-ab__stats li + li { border-left: 1px solid rgba(255, 255, 255, .2); }
.dm-ab__sico { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border: 1.5px solid var(--lime); border-radius: 50%; color: var(--lime); }
.dm-ab__sico .dm-icon { width: 28px; height: 28px; stroke-width: 1.4; }
.dm-ab__stats li > span:last-child { display: flex; flex-direction: column; font-size: 16px; color: #fff; }
.dm-ab__stats strong { font-size: clamp(28px, 2.4vw, 38px); font-weight: 800; line-height: 1.05; color: #fff; }
.dm-ab__stats small { font-size: 14.5px; color: #bdbdbd; }
.dm-ab__stats li:last-child strong { font-size: clamp(24px, 2vw, 32px); }
@media (max-width: 1100px) {
.dm-ab__top { grid-template-columns: 1fr; }
.dm-ab__copy { padding-right: var(--gutter); }
.dm-ab__media { margin: 0; height: 520px; }
.dm-ab__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
.dm-ab__stats li:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
.dm-ab__vals { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
.dm-ab__vals li:nth-child(3) { border-left: 0; padding-left: 0; }
.dm-ab__media { height: 420px; }
.dm-ab__card { left: auto; right: 0; width: 200px; padding: 28px 22px 24px 32px; font-size: 18px; }
.dm-ab__stats li { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.dm-ab__sico { width: 46px; height: 46px; }
.dm-ab__stats::after { font-size: 80px; }
.dm-ab__sub { letter-spacing: .2em; }
.dm-ab__title span { white-space: normal; }
}
.dm-ab__stats::before { width: 11%; height: 46%; top: -1px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.dm-ab__stats strong i { font-style: normal; color: var(--lime); font-size: .8em; }
.dm-ab__vals li { overflow-wrap: anywhere; }
@media (max-width: 640px) { .dm-ab__stats::before { width: 18%; height: 60px; } }
/* ==========================================================================
Home: In store v3 (ref 41)
========================================================================== */
.dm-is3 { margin-top: clamp(30px, 3vw, 60px); background: #f4f4f3; padding-bottom: clamp(24px, 2.4vw, 40px); }
.dm-is3__banner { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(380px, 26vw, 460px); display: flex; align-items: center; padding: clamp(40px, 3.6vw, 64px) var(--gutter); background: #0b0b0b; }
.dm-is3__bg { position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.dm-is3__banner::after { content: ""; position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(8, 8, 8, .95) 0, rgba(8, 8, 8, .8) 38%, rgba(8, 8, 8, .15) 70%, rgba(8, 8, 8, .35) 100%); }
.dm-is3__panel { position: absolute; z-index: -2; top: 0; left: 52%; width: 40%; height: 100%; background: linear-gradient(180deg, #b4ef22 0, #93cc18 30%, #78ad14 60%, rgba(104, 150, 18, .5) 85%, rgba(80, 118, 16, .2) 100%); clip-path: polygon(40% 0, 88% 0, 100% 22%, 62% 100%, 0 100%); filter: drop-shadow(0 0 22px rgba(160, 230, 20, .45)); }
.dm-is3__duo { position: absolute; z-index: -1; right: 13%; bottom: -18%; height: 128%; width: auto; max-width: 48%; object-fit: contain; object-position: 50% 0; filter: contrast(1.05) drop-shadow(-24px 12px 30px rgba(0, 0, 0, .6)); }
.dm-is3__script { position: absolute; right: 3%; top: 22%; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(42px, 3.6vw, 66px); line-height: .9; color: #fff; transform: rotate(-12deg); }
.dm-is3__script span { display: block; padding-left: .4em; color: var(--lime); }
.dm-is3__script::after { content: ""; display: block; width: 100%; height: 3px; margin-top: 12px; background: #fff; border-radius: 50%; }
.dm-is3__copy { position: relative; z-index: 2; max-width: 620px; }
.dm-is3__kicker { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; color: var(--lime); }
html body.home main h2.dm-is3__title { margin: 14px 0 0; font-family: var(--f-sans); font-weight: 800; font-style: italic; font-size: clamp(44px, 4.2vw, 76px); line-height: .98; letter-spacing: -.01em; color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body.home main h2.dm-is3__title span { display: block; font-size: 1.12em; color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; }
.dm-is3__text { margin: 16px 0 0; max-width: 42ch; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.45; color: #e2e2e2; }
.dm-is3__btn { display: inline-flex; align-items: center; gap: 22px; height: 54px; margin-top: 26px; padding: 0 5px 0 30px; border-radius: 30px; background: #fff; color: #0d0d0d; font-weight: 700; font-size: 16px; text-transform: uppercase; transition: background .25s; }
.dm-is3__btn span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0d0d0d; color: #fff; transition: transform .3s var(--ease); }
.dm-is3__btn .dm-icon { width: 20px; height: 20px; }
.dm-is3__btn:hover { background: var(--lime); }
.dm-is3__btn:hover span { transform: translateX(3px); }
.dm-is3__cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, .9vw, 14px); padding: clamp(14px, 1.4vw, 22px) var(--gutter) 0; }
.dm-is3__card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 7 / 10; padding: 18px 18px 20px; overflow: hidden; border-radius: 10px; background: #1a1a1a; color: #fff; }
.dm-is3__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .8s var(--ease); }
.dm-is3__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, 0) 62%); }
.dm-is3__card:hover img { transform: scale(1.07); }
.dm-is3__cname { font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.1; text-transform: uppercase; }
.dm-is3__csub { margin-top: 6px; font-size: clamp(12px, .85vw, 14px); letter-spacing: .04em; text-transform: uppercase; color: #cfcfcf; }
.dm-is3__cgo { display: grid; place-items: center; width: 36px; height: 36px; margin-top: 14px; border: 1.5px solid #fff; border-radius: 50%; transition: background .25s, color .25s, border-color .25s; }
.dm-is3__cgo .dm-icon { width: 17px; height: 17px; }
.dm-is3__card:hover .dm-is3__cgo { background: var(--lime); border-color: var(--lime); color: #0d0d0d; }
.dm-is3__strip { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; margin: clamp(14px, 1.4vw, 22px) var(--gutter) 0; overflow: hidden; border-radius: 12px; background: #111; color: #fff; }
.dm-is3__sleft { position: relative; isolation: isolate; display: flex; align-items: center; gap: 22px; min-height: 114px; padding: 16px 20px 16px 38%; overflow: hidden; }
.dm-is3__spanel { position: absolute; z-index: -2; left: 0; top: 0; bottom: 0; width: 36%; background: linear-gradient(120deg, #b4ef22, #7fc000); clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%); opacity: .95; }
.dm-is3__srun { position: absolute; z-index: -1; left: 6%; bottom: -30%; height: 170%; width: auto; filter: grayscale(.6) contrast(1.1); }
.dm-is3__stitle { display: flex; flex-direction: column; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(28px, 2.4vw, 42px); line-height: 1; text-transform: uppercase; }
.dm-is3__stitle small { font-family: var(--f-sans); font-style: normal; font-weight: 500; font-size: 14px; letter-spacing: .24em; margin-bottom: 4px; }
.dm-is3__stitle b { color: var(--lime); font-weight: 900; }
.dm-is3__sgo { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1.5px solid #fff; border-radius: 50%; transition: background .25s, color .25s, border-color .25s; }
.dm-is3__sgo .dm-icon { width: 18px; height: 18px; }
.dm-is3__sleft:hover .dm-is3__sgo { background: var(--lime); border-color: var(--lime); color: #0d0d0d; }
.dm-is3__feats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0 18px 0 0; }
.dm-is3__feats li { display: flex; align-items: center; gap: 14px; padding: 6px 18px; }
.dm-is3__feats li + li, .dm-is3__feats li:first-child { border-left: 1px solid rgba(255, 255, 255, .2); }
.dm-is3__feats .dm-icon { flex: none; width: 36px; height: 36px; stroke-width: 1.3; color: var(--lime); }
.dm-is3__feats span { display: flex; flex-direction: column; font-size: 13.5px; color: #bdbdbd; }
.dm-is3__feats strong { font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
@media (max-width: 1100px) {
.dm-is3__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.dm-is3__card { flex: 0 0 30%; scroll-snap-align: start; }
.dm-is3__strip { grid-template-columns: 1fr; }
.dm-is3__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; padding: 18px; }
.dm-is3__feats li:nth-child(3) { border-left: 1px solid rgba(255, 255, 255, .2); }
.dm-is3__script { display: none; }
}
@media (max-width: 760px) {
.dm-is3__banner { display: block; padding: 34px var(--gutter) 330px; }
.dm-is3__banner::after { background: linear-gradient(180deg, rgba(8, 8, 8, .92) 0, rgba(8, 8, 8, .7) 45%, rgba(8, 8, 8, .1) 70%); }
.dm-is3__duo { right: 50%; transform: translateX(50%); bottom: 0; height: 320px; max-width: 100%; }
.dm-is3__panel { left: 20%; width: 70%; top: auto; bottom: 0; height: 330px; }
.dm-is3__card { flex-basis: 44%; }
.dm-is3__sleft { padding-left: 42%; }
.dm-is3__feats li { padding: 4px 10px; gap: 8px; }
.dm-is3__feats .dm-icon { width: 26px; height: 26px; }
}
.dm-is3__duo { top: 5%; bottom: auto; height: 118%; }
.dm-is3__stitle { display: block; white-space: nowrap; }
.dm-is3__stitle small { display: block; }
.dm-is3__strip { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
.dm-is3__sleft { padding-left: 34%; }
@media (max-width: 760px) { .dm-is3__duo { top: auto; bottom: 0; height: 320px; } .dm-is3__sleft { padding-left: 40%; } }
@media (max-width: 1100px) {
.dm-is3__strip { grid-template-columns: 1fr; }
.dm-is3__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
.dm-is3__feats li { border-left: 0 !important; }
}
@media (max-width: 760px) {
.dm-is3__cards { padding-left: var(--gutter); }
.dm-is3__sleft { min-height: 100px; padding-left: 38%; }
.dm-is3__stitle { font-size: 26px; }
.dm-is3__feats strong { font-size: 12px; } .dm-is3__feats span { font-size: 12px; }
}
@media (max-width: 760px) { .dm-is3__sleft { padding-right: 70px; } .dm-is3__sgo { position: absolute; right: 16px; } }
/* ==========================================================================
Home: Women's collection (ref 42)
========================================================================== */
.dm-wc { --rose: #b6fa0e; position: relative; padding-bottom: clamp(20px, 2vw, 34px); background: linear-gradient(180deg, #f6f7f3 0, #fff 100%); overflow: hidden; }
.dm-wc__banner { position: relative; isolation: isolate; min-height: clamp(460px, 34vw, 600px); padding: clamp(34px, 3vw, 54px) var(--gutter) 150px; }
.dm-wc__photo { position: absolute; z-index: -2; top: 0; right: 0; width: 64%; height: 100%; object-fit: cover; object-position: 12% 25%; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.dm-wc__banner::before { content: ""; position: absolute; z-index: -1; left: 30%; top: 0; bottom: 0; width: 22%; background: linear-gradient(90deg, #faf6f5 0, rgba(250, 246, 245, .7) 45%, rgba(250, 246, 245, 0) 100%); }
.dm-wc__script { position: absolute; left: 48%; top: 20%; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(44px, 3.8vw, 70px); line-height: .9; color: #fff; transform: rotate(-14deg); text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.dm-wc__script span { display: block; padding-left: .4em; color: var(--rose); }
.dm-wc__script::after { content: ""; display: block; width: 100%; height: 3px; margin-top: 10px; border-radius: 50%; background: #fff; }
.dm-wc__words { position: absolute; right: var(--gutter); top: 36px; list-style: none; margin: 0; padding: 4px 0 4px 24px; border-left: 1px solid rgba(0, 0, 0, .35); display: grid; gap: 14px; }
.dm-wc__words li { font-size: 13px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: #1d1a18; }
.dm-wc__copy { position: relative; z-index: 2; max-width: 660px; }
.dm-wc__kicker { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: .44em; text-transform: uppercase; color: #1d1a18; }
html body.home main h2.dm-wc__title { margin: 14px 0 0; font-family: "Kanit", var(--f-sans) !important; font-weight: 900; font-style: italic; font-size: clamp(40px, 4vw, 72px) !important; line-height: .95; letter-spacing: -.01em; text-transform: uppercase; color: #0d0d0d !important; }
.dm-wc__title span { display: block; white-space: nowrap; }
html body.home main h2.dm-wc__title span.is-rose { color: var(--rose) !important; -webkit-text-fill-color: var(--rose) !important; }
.dm-wc__text { margin: 16px 0 0; max-width: 46ch; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.45; color: #555; }
.dm-wc__btn { display: inline-flex; align-items: center; gap: 22px; height: 54px; margin-top: 22px; padding: 0 28px; border-radius: 30px; background: #0d0d0d; color: #fff; font-weight: 700; font-size: 15px; text-transform: uppercase; transition: background .25s, transform .25s var(--ease); }
.dm-wc__btn .dm-icon { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.dm-wc__btn:hover { background: var(--rose); transform: translateY(-2px); }
.dm-wc__btn:hover .dm-icon { transform: translateX(4px); }
.dm-wc__vals { list-style: none; display: flex; margin: 26px 0 0; padding: 0; }
.dm-wc__vals li { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 120px; padding: 0 10px; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.3; text-transform: uppercase; color: #1d1a18; }
.dm-wc__vals li + li { border-left: 1px solid #ddd; }
.dm-wc__vals .dm-icon { width: 34px; height: 34px; stroke-width: 1.2; }
.dm-wc__cards { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, .8vw, 14px); margin-top: -128px; padding: 0 var(--gutter); }
.dm-wc__card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 27 / 26; padding: 18px; overflow: hidden; border: 3px solid #fff; border-radius: 10px; background: #2a2224; color: #fff; box-shadow: 0 18px 34px -20px rgba(80, 30, 40, .55); }
.dm-wc__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .8s var(--ease); }
.dm-wc__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20, 10, 12, .88) 0, rgba(20, 10, 12, .4) 42%, rgba(20, 10, 12, 0) 66%); }
.dm-wc__card:hover img { transform: scale(1.07); }
.dm-wc__cname { font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(16px, 1.3vw, 22px); line-height: 1.05; text-transform: uppercase; }
.dm-wc__csub { margin-top: 5px; font-size: clamp(11.5px, .85vw, 14px); color: #e8e0e2; }
.dm-wc__cgo { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 14px; border: 1.5px solid #fff; border-radius: 50%; transition: background .25s, border-color .25s; }
.dm-wc__cgo .dm-icon { width: 17px; height: 17px; }
.dm-wc__card:hover .dm-wc__cgo { background: var(--rose); border-color: var(--rose); }
@media (max-width: 1100px) {
.dm-wc__banner { padding-bottom: 40px; min-height: 0; }
.dm-wc__photo { position: relative; display: block; width: calc(100% + 2 * var(--gutter)); height: 380px; margin: 26px calc(-1 * var(--gutter)) 0; clip-path: none; order: 2; }
.dm-wc__banner { display: flex; flex-direction: column; }
.dm-wc__banner::before, .dm-wc__words { display: none; }
.dm-wc__script { left: auto; right: 8%; top: auto; bottom: 90px; }
.dm-wc__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 0; }
.dm-wc__card { flex: 0 0 30%; scroll-snap-align: start; }
}
@media (max-width: 640px) {
.dm-wc__title span { white-space: normal; }
.dm-wc__kicker { letter-spacing: .24em; font-size: 14px; }
.dm-wc__vals li { width: 25%; padding: 0 4px; font-size: 10.5px; }
.dm-wc__vals .dm-icon { width: 26px; height: 26px; }
.dm-wc__btn { padding: 0 20px; font-size: 13.5px; gap: 12px; }
.dm-wc__card { flex-basis: 46%; aspect-ratio: 3 / 4; }
.dm-wc__photo { height: 320px; }
}
@media (min-width: 1101px) {
.dm-wc__card { aspect-ratio: 3 / 4; }
.dm-wc__banner { padding-bottom: 210px; }
.dm-wc__cards { margin-top: -190px; }
.dm-wc__photo { right: 11%; width: 56%; object-position: 30% 30%; -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 12%); mask-image: linear-gradient(270deg, transparent 0, #000 12%); }
.dm-wc__script { left: 40%; }
}
/* Women's banner: richer, like the ref */
@media (min-width: 1101px) { .dm-wc__photo { object-position: 60% 22%; } }
.dm-wc__photo { filter: contrast(1.08) saturate(1.12); }
.dm-wc__card img { filter: contrast(1.1) saturate(1.15) brightness(.97); }
@media (min-width: 1101px) {
.dm-wc__photo { right: 0; width: 64%; -webkit-mask-image: none; mask-image: none; object-position: 55% 22%; }
.dm-wc__words { border-left-color: rgba(255, 255, 255, .7); }
.dm-wc__words li { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
}
/* TEST 2026-09-30: hero Men's/Women's category lists hidden. Delete this line to bring them back. */
.dm-h5__cats { display: none !important; }
/* TEST 2026-09-30: top announcement bar hidden. Delete these 2 lines to bring it back. */
.dm-topbar { display: none !important; }
:root, :root body { --topbar-h: 0px !important; }
/* Women's: "Move Better" sits on the darker concrete, left of her face */
@media (min-width: 1101px) {
.dm-wc__script { left: 50%; top: 16%; z-index: 1; font-size: clamp(52px, 4.4vw, 80px); text-shadow: 0 2px 18px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .4); }
.dm-wc__script span { text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.dm-wc__script::after { box-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
}
@media (min-width: 1101px) { .dm-wc__script { left: 45%; top: 30%; } }
@media (max-width: 1100px) {
.dm-wc__photo { width: 100vw; max-width: none; align-self: flex-start; }
.dm-wc__script { right: 5%; bottom: auto; top: auto; bottom: calc(40px + 380px - 150px); font-size: 48px; text-shadow: 0 2px 16px rgba(0, 0, 0, .7); }
}
@media (max-width: 640px) { .dm-wc__script { bottom: calc(40px + 320px - 130px); font-size: 44px; } }
/* ==========================================================================
Home: Men's collection (ref 43) — dark twin of .dm-wc
========================================================================== */
.dm-men { --lime: #b4f000; position: relative; padding-bottom: clamp(20px, 2vw, 34px); background: linear-gradient(180deg, #0b0c0b 0, #0b0c0b 72%, #fff 72%); color: #fff; overflow: hidden; }
.dm-men__banner { position: relative; isolation: isolate; min-height: clamp(460px, 34vw, 600px); padding: clamp(34px, 3vw, 54px) var(--gutter) 210px; }
.dm-men__banner::after { content: ""; position: absolute; z-index: -3; inset: 0; background: radial-gradient(60% 80% at 20% 30%, #1a1d17 0, #0b0c0b 70%); }
.dm-men__photo { position: absolute; z-index: -2; top: 0; right: 0; width: 64%; height: 100%; object-fit: cover; object-position: 35% 30%; filter: contrast(1.08) saturate(1.05); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.dm-men__slash { position: absolute; z-index: -1; left: 38%; top: 8%; width: 34%; height: 78%; border: 26px solid var(--lime); border-left: 0; border-bottom: 0; transform: skewX(-24deg); opacity: .85; box-shadow: 0 0 40px rgba(180, 240, 0, .35); -webkit-mask-image: linear-gradient(200deg, #000 45%, transparent 90%); mask-image: linear-gradient(200deg, #000 45%, transparent 90%); }
.dm-men__banner::before { content: ""; position: absolute; z-index: -1; left: -40px; top: 0; width: 70px; height: 70%; background: var(--lime); transform: skewX(-24deg); box-shadow: 0 0 40px rgba(180, 240, 0, .4); }
.dm-men__script { position: absolute; left: 70%; top: 14%; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(52px, 4.4vw, 80px); line-height: .9; color: #fff; transform: rotate(-14deg); text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.dm-men__script span { display: block; padding-left: .4em; color: var(--lime); }
.dm-men__script::after { content: ""; display: block; width: 100%; height: 3px; margin-top: 10px; border-radius: 50%; background: #fff; }
.dm-men__words { position: absolute; right: var(--gutter); top: 36px; list-style: none; margin: 0; padding: 4px 0 4px 24px; border-left: 1px solid var(--lime); display: grid; gap: 14px; }
.dm-men__words li { font-size: 13px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.dm-men__badge { position: absolute; right: calc(var(--gutter) + 10px); top: 42%; width: 118px; height: 118px; color: #fff; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6)); animation: dm-spin 22s linear infinite; }
.dm-men__badge text { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; fill: #fff; }
.dm-men__badge-d { fill: var(--lime); animation: dm-spin 22s linear infinite reverse; transform-origin: 60px 60px; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
.dm-men__copy { position: relative; z-index: 2; max-width: 680px; }
.dm-men__kicker { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: .44em; text-transform: uppercase; color: #fff; }
html body.home main h2.dm-men__title { margin: 14px 0 0; font-family: "Kanit", var(--f-sans) !important; font-weight: 900; font-style: italic; font-size: clamp(40px, 4.3vw, 78px) !important; line-height: .95; letter-spacing: -.01em; text-transform: uppercase; color: #fff !important; }
.dm-men__title span { display: block; white-space: nowrap; }
html body.home main h2.dm-men__title span.is-lime { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; }
.dm-men__text { margin: 16px 0 0; max-width: 46ch; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.45; color: #d6d6d6; }
.dm-men__btn { display: inline-flex; align-items: center; gap: 22px; height: 54px; margin-top: 22px; padding: 0 28px; border-radius: 30px; background: #fff; color: #0d0d0d; font-weight: 700; font-size: 15px; text-transform: uppercase; transition: background .25s, transform .25s var(--ease); }
.dm-men__btn .dm-icon { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.dm-men__btn:hover { background: var(--lime); transform: translateY(-2px); }
.dm-men__btn:hover .dm-icon { transform: translateX(4px); }
.dm-men__vals { list-style: none; display: flex; margin: 26px 0 0; padding: 0; }
.dm-men__vals li { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 120px; padding: 0 10px; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.3; text-transform: uppercase; color: #fff; }
.dm-men__vals li + li { border-left: 1px solid rgba(255, 255, 255, .22); }
.dm-men__vals .dm-icon { width: 34px; height: 34px; stroke-width: 1.2; }
.dm-men__cards { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, .8vw, 14px); margin-top: -190px; padding: 0 var(--gutter); }
.dm-men__card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; padding: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; background: #1b1c1a; color: #fff; box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .7); }
.dm-men__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: contrast(1.08); transition: transform .8s var(--ease); }
.dm-men__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0, rgba(0, 0, 0, .45) 40%, rgba(0, 0, 0, 0) 66%); }
.dm-men__card:hover img { transform: scale(1.07); }
.dm-men__cname { font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(16px, 1.3vw, 22px); line-height: 1.05; text-transform: uppercase; }
.dm-men__csub { margin-top: 5px; font-size: clamp(11.5px, .85vw, 14px); color: #cfcfcf; }
.dm-men__cgo { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 14px; border: 1.5px solid #fff; border-radius: 50%; transition: background .25s, border-color .25s, color .25s; }
.dm-men__cgo .dm-icon { width: 17px; height: 17px; }
.dm-men__card:hover .dm-men__cgo { background: var(--lime); border-color: var(--lime); color: #0d0d0d; }
@media (max-width: 1100px) {
.dm-men { background: #0b0c0b; }
.dm-men__banner { display: flex; flex-direction: column; min-height: 0; padding-bottom: 40px; }
.dm-men__photo { position: relative; order: 2; display: block; width: 100vw; max-width: none; height: 400px; margin: 26px calc(-1 * var(--gutter)) 0; -webkit-mask-image: none; mask-image: none; }
.dm-men__slash, .dm-men__words, .dm-men__banner::before { display: none; }
.dm-men__script { left: auto; right: 5%; top: auto; bottom: calc(40px + 400px - 150px); font-size: 48px; }
.dm-men__badge { top: auto; bottom: 60px; right: 16px; width: 90px; height: 90px; }
.dm-men__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 0; }
.dm-men__card { flex: 0 0 30%; scroll-snap-align: start; }
}
@media (max-width: 640px) {
.dm-men__title span { white-space: normal; }
.dm-men__kicker { letter-spacing: .24em; font-size: 14px; }
.dm-men__vals li { width: 25%; padding: 0 4px; font-size: 10.5px; }
.dm-men__vals .dm-icon { width: 26px; height: 26px; }
.dm-men__btn { padding: 0 20px; font-size: 13.5px; gap: 12px; }
.dm-men__card { flex-basis: 46%; }
.dm-men__photo { height: 340px; }
.dm-men__script { bottom: calc(40px + 340px - 130px); font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { .dm-men__badge, .dm-men__badge-d { animation: none; } }
/* Men's fixes: white first title line, stripe off the text, full head, script off the face */
html body.home main h2.dm-men__title span:first-child { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.dm-men__banner::before { left: -64px; width: 56px; }
.dm-men__photo { object-position: 50% 4%; }
.dm-men__badge text { font-size: 9.6px; letter-spacing: .08em; }
@media (min-width: 1101px) {
.dm-men__slash { left: 40%; top: 7%; width: 24%; height: 62%; border-width: 20px; opacity: .7; }
.dm-men__script { left: 72%; top: 50%; }
.dm-men__badge { top: 36%; }
}
@media (min-width: 1101px) { .dm-men__script { left: 36%; top: 24%; } .dm-men__banner::before { left: -80px; } }
@media (max-width: 1100px) { .dm-men__script { right: auto; left: 6%; } }
/* Men banner: the lime "7" slash crossed over the model; removed */
.dm-men__slash { display: none !important; }
@media (min-width: 1101px) { .dm-men__banner::before { left: -84px; width: 40px; } }
/* Newsletter duo: the cutout's arm meets the file edge; fade the right side too */
@media (min-width: 1101px) { .dm-ft__nlimg { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); } }
/* In-store strip: keep every feature title on one line so the four line up */
.dm-is3__feats strong { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1440px) { .dm-is3__feats li { padding: 6px 12px; gap: 10px; } .dm-is3__feats .dm-icon { width: 30px; height: 30px; } .dm-is3__feats strong, .dm-is3__feats span { font-size: 12.5px; } }
/* ==========================================================================
Mega menu polish (2026-10-01): steady chevron, no click line, tidy rows
========================================================================== */
/* Chevron: translate first, then rotate, so it flips in place instead of jumping onto the label */
.dm-header .dm-nav__list > li.menu-item-has-children > a { gap: 9px; }
.dm-header .dm-nav__list > li.menu-item-has-children > a::after { flex: none; transform: translateY(-2px) rotate(45deg) !important; transform-origin: 50% 50%; }
.dm-header .dm-nav__list > li.menu-item-has-children:hover > a::after,
.dm-header .dm-nav__list > li.menu-item-has-children.is-open > a::after { transform: translateY(2px) rotate(-135deg) !important; }
/* No outline / underline left behind after a mouse click; keyboard focus still shows */
.dm-header .dm-nav__list a:focus:not(:focus-visible) { outline: none; }
.dm-header .dm-nav__list a:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; border-radius: 4px; }
.dm-header .dm-nav__list > li:not(.menu-item-has-children) > a:focus:not(:hover)::after { transform: scaleX(0); }
/* Panel and rows */
@media (min-width: 1101px) {
.dm-mega { width: 580px; padding: 18px; }
}
.dm-mega__inner { grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; }
.dm-mega__cats ul { display: grid; gap: 4px; }
.dm-mega__cats a { gap: 14px; padding: 8px 10px !important; border: 1px solid transparent; border-radius: 10px; }
.dm-mega__cats a:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); }
.dm-mega__thumb { flex: none; width: 44px; height: 44px; border-radius: 9px; overflow: hidden; background: #1d1d1d; }
.dm-mega__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dm-mega__name { font-size: 14.5px; line-height: 1.25; }
.dm-mega__name small { margin-top: 2px; font-weight: 500; color: #8d8d8d; }
.dm-mega__cats a > .dm-icon { flex: none; width: 28px; height: 28px; padding: 6px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; color: #bdbdbd; }
.dm-mega__cats a:hover > .dm-icon { color: #0d0d0d; background: var(--lime); border-color: var(--lime); transform: translateX(2px); }
.dm-mega__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding-left: 10px !important; }
/* One accent site-wide (owner 2026-10-01): Women's banner uses the brand green too */
html body.home main h2.dm-wc__title span.is-rose { color: #5f9e00 !important; -webkit-text-fill-color: #5f9e00 !important; }
.dm-wc__banner::before { background: linear-gradient(90deg, #f6f7f3 0, rgba(246, 247, 243, .7) 45%, rgba(246, 247, 243, 0) 100%); }
.dm-wc__btn:hover { color: #0d0d0d; }
.dm-wc__card:hover .dm-wc__cgo { color: #0d0d0d; }
/* Product tags (New / Bestseller / Trending / Limited): white chip, dark text, everywhere */
.dm-badge, .dm-badge--new, .dm-badge--bestseller, .dm-badge--trending, .dm-badge--limited,
.dm-grid--compact .dm-badge--new, .dm-grid--compact .dm-badge--bestseller, .dm-grid--compact .dm-badge--trending { background: #fff !important; color: #0d0d0d !important; border-color: #fff !important; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .25); }
/* Women's banner: same brand green as everywhere else */
html body.home main h2.dm-wc__title span.is-rose { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; }
/* Owner: page body stays pure white (no off-white / grey section fills) */
.dm-wc { background: #fff !important; }
.dm-wc__banner::before { background: linear-gradient(90deg, #fff 0, rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, 0) 100%) !important; }
.dm-is3 { background: #fff !important; }
/* Nav: the chevron-flip hover rule also rotated plain items' underline into a slanted line. Plain items keep a straight underline. */
.dm-header .dm-nav__list > li:not(.menu-item-has-children) > a::after { transform: scaleX(0) !important; transform-origin: right center; }
.dm-header .dm-nav__list > li:not(.menu-item-has-children):hover > a::after,
.dm-header .dm-nav__list > li:not(.menu-item-has-children).current-menu-item > a::after { transform: scaleX(1) !important; transform-origin: left center; }
/* Owner 2026-10-01: Women's banner back to the original warm cream */
.dm-wc { background: linear-gradient(180deg, #faf6f5 0, #fff 100%) !important; }
.dm-wc__banner::before { background: linear-gradient(90deg, #faf6f5 0, rgba(250, 246, 245, .7) 45%, rgba(250, 246, 245, 0) 100%) !important; }
/* ==========================================================================
Cart sidebar: old sage palette -> current theme (black / white / lime), 2026-10-01
========================================================================== */
[data-cartdrawer] { --lime: #b6fa0e; --soft: #f5f5f3; --hair: #e6e6e3; }
/* Head: black band, white title, lime count */
[data-cartdrawer] .dm-cartdrawer__head { background: #0d0d0d !important; color: #fff; }
[data-cartdrawer] .dm-cartdrawer__head h2 { color: #fff; }
[data-cartdrawer] .dm-cartdrawer__leaf { display: none !important; }
[data-cartdrawer] .dm-cartdrawer__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lime); }
[data-cartdrawer] .dm-cartdrawer__x { background: #1f1f1f !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .14); }
[data-cartdrawer] .dm-cartdrawer__x:hover { background: var(--lime) !important; color: #0d0d0d !important; border-color: var(--lime); }
/* Free-shipping note + bar */
[data-cartdrawer] .dm-ship { background: var(--soft) !important; border-left: 4px solid var(--lime); }
[data-cartdrawer] .dm-ship__bar { background: var(--hair) !important; }
[data-cartdrawer] .dm-ship__bar span { background: var(--lime) !important; }
/* Line items */
[data-cartdrawer] .dm-dl__img, [data-cartdrawer] .dm-dsug__img { background: #eeeeec !important; }
[data-cartdrawer] .dm-dl__var, [data-cartdrawer] small { color: #6b6b6b; }
[data-cartdrawer] .dm-dl__rm { background: var(--soft) !important; color: #0d0d0d !important; }
[data-cartdrawer] .dm-dl__rm:hover { background: #0d0d0d !important; color: var(--lime) !important; }
[data-cartdrawer] .dm-qty { border-color: #d6d6d3 !important; }
[data-cartdrawer] .dm-qty__btn { color: #0d0d0d !important; }
[data-cartdrawer] .dm-qty__btn:hover:not(:disabled) { background: var(--lime); }
[data-cartdrawer] .dm-qty__btn:disabled { color: #bdbdbd !important; }
/* "You may also like" */
[data-cartdrawer] .dm-dsug__item { background: var(--soft) !important; border: 1px solid transparent; transition: border-color .2s; }
[data-cartdrawer] .dm-dsug__item:hover { border-color: var(--lime); }
[data-cartdrawer] .dm-dsug__item .dm-atc { border-color: #d6d6d3 !important; }
[data-cartdrawer] .dm-dsug__item .dm-atc:hover { background: var(--lime) !important; border-color: var(--lime) !important; color: #0d0d0d !important; }
/* Foot: white, hairline, lime FREE chip, checkout hover lime */
[data-cartdrawer] .dm-cartdrawer__foot { background: #fff !important; border-top: 1px solid var(--hair); }
[data-cartdrawer] .dm-free { display: inline-block; padding: 3px 10px; border-radius: 20px; background: var(--lime); color: #0d0d0d !important; font-weight: 800; }
[data-cartdrawer] .dm-cartdrawer__row svg, [data-cartdrawer] .dm-cartdrawer__foot li .dm-icon { color: #0d0d0d; }
[data-cartdrawer] .dm-cartdrawer__foot a[href*="checkout"]:hover, [data-cartdrawer] .dm-cartdrawer__checkout:hover { background: var(--lime) !important; border-color: var(--lime) !important; color: #0d0d0d !important; }
[data-cartdrawer] .dm-cartdrawer__ghost:hover { background: #0d0d0d !important; color: #fff !important; }
/* Empty cart */
[data-cartdrawer] .dm-cartdrawer__cta:hover { background: var(--lime) !important; color: #0d0d0d !important; }
/* Women's collection now uses the Men's dark banner (.dm-men--women): 7 cards, photo framing for the reclining shot */
.dm-men--women .dm-men__cards { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dm-men--women .dm-men__photo { object-position: 60% 20%; }
@media (min-width: 1101px) { .dm-men--women .dm-men__script { left: 45%; top: 38%; } }
/* ==========================================================================
Shop page in the current theme (2026-10-01): dark banner, lime, Kanit
========================================================================== */
.dm-sh2 { --lime: #b6fa0e; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; min-height: clamp(420px, 34vw, 560px); padding: 0 var(--gutter); background: radial-gradient(70% 90% at 75% 60%, #1c2016 0, #0b0c0b 65%); color: #fff; }
.dm-sh2__slash { position: absolute; z-index: -1; right: 18%; top: 0; bottom: 0; width: 22%; background: linear-gradient(170deg, #c4ff2e 0, #9be000 60%, #7cc000 100%); clip-path: polygon(46% 0, 100% 0, 54% 100%, 0 100%); filter: drop-shadow(0 0 40px rgba(182, 250, 14, .35)); }
.dm-sh2__word { position: absolute; z-index: -1; right: 1.5%; top: 6%; writing-mode: vertical-rl; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(90px, 9vw, 160px); line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(182, 250, 14, .45); }
.dm-sh2__copy { align-self: center; padding: clamp(40px, 5vw, 80px) 0; }
.dm-sh2__kicker { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .4em; text-transform: uppercase; color: #cfcfcf; }
html body main h1.dm-sh2__title { margin: 14px 0 0; font-family: "Kanit", var(--f-sans) !important; font-weight: 900; font-style: italic; font-size: clamp(46px, 5.6vw, 96px) !important; line-height: .92; letter-spacing: -.01em; text-transform: uppercase; color: #fff !important; }
.dm-sh2__title span { display: block; }
html body main h1.dm-sh2__title span.is-lime { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; }
.dm-sh2__text { margin: 18px 0 0; max-width: 44ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: #d0d0d0; }
.dm-sh2__row { display: flex; align-items: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.dm-sh2__btn { display: inline-flex; align-items: center; gap: 18px; height: 54px; padding: 0 28px; border-radius: 30px; background: var(--lime); color: #0d0d0d; font-weight: 700; font-size: 15px; text-transform: uppercase; transition: background .25s, transform .25s var(--ease); }
.dm-sh2__btn .dm-icon { width: 20px; height: 20px; }
.dm-sh2__btn:hover { background: #fff; transform: translateY(-2px); }
.dm-sh2__count { margin: 0; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .2); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #bdbdbd; }
.dm-sh2__count strong { display: block; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: 30px; line-height: 1; letter-spacing: 0; color: #fff; }
.dm-sh2__media { position: relative; align-self: end; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.dm-sh2__model { position: relative; z-index: 1; display: block; width: auto; height: clamp(380px, 32vw, 540px); max-width: 100%; object-fit: contain; object-position: 50% 100%; filter: contrast(1.05) drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 10%); mask-image: linear-gradient(0deg, transparent 0, #000 10%); }
.dm-sh2__script { position: absolute; z-index: 2; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(34px, 2.8vw, 50px); line-height: 1; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); transform: rotate(-10deg); white-space: nowrap; }
.dm-sh2__script--l { left: 0; top: 18%; }
.dm-sh2__script--r { right: 4%; top: 10%; color: var(--lime); }
/* Category circles under the banner */
.dm-circles { position: relative; z-index: 2; margin-top: -46px !important; }
.dm-circ__img { background: #fff !important; border: 3px solid #fff !important; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45) !important; }
.dm-circ.is-active .dm-circ__img, .dm-circ a:hover .dm-circ__img { border-color: var(--lime, #b6fa0e) !important; }
.dm-circ--all .dm-circ__img, .dm-circ--offer .dm-circ__img { background: #0d0d0d !important; color: #b6fa0e !important; }
.dm-circ__name { font-weight: 600; }
/* Trust strip at the bottom of the shop */
.dm-shtrust { background: #0d0d0d !important; color: #fff; }
.dm-shtrust__leaf { display: none !important; }
.dm-shtrust li strong, .dm-shtrust__offer strong { color: #fff !important; }
.dm-shtrust li span, .dm-shtrust__offer span { color: #bdbdbd; }
.dm-shtrust .dm-icon { color: #b6fa0e !important; }
.dm-shtrust li + li { border-color: rgba(255, 255, 255, .15) !important; }
.dm-shtrust__offer { background: #b6fa0e !important; color: #0d0d0d !important; }
.dm-shtrust__offer strong, .dm-shtrust__offer span, .dm-shtrust__offer .dm-icon { color: #0d0d0d !important; }
@media (max-width: 900px) {
.dm-sh2 { grid-template-columns: 1fr; min-height: 0; }
.dm-sh2__copy { padding: 34px 0 10px; }
.dm-sh2__media { height: auto; }
.dm-sh2__model { height: 340px; }
.dm-sh2__slash { right: 10%; width: 40%; top: auto; height: 380px; }
.dm-sh2__word { display: none; }
.dm-sh2__script--l { top: 30%; }
.dm-circles { margin-top: 18px !important; }
}
/* Shop banner fixes: scripts over the right person, fade the cut-out's right edge, mobile slash shorter */
.dm-sh2__script--r { right: 14%; top: 16%; }
.dm-sh2__model { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 10%), linear-gradient(270deg, transparent 0, #000 10%); -webkit-mask-composite: source-in; mask-image: linear-gradient(0deg, transparent 0, #000 10%), linear-gradient(270deg, transparent 0, #000 10%); mask-composite: intersect; }
@media (max-width: 900px) { .dm-sh2__slash { height: 320px; } .dm-sh2__script--r { right: 4%; top: 12%; } }
.dm-sh2__script--l { color: var(--lime, #b6fa0e); }
.dm-sh2__script--r { color: #fff; }
/* ==========================================================================
Mobile navigation (owner 2026-10-01): top = logo + search + wishlist only;
the bottom bar carries Home / Shop / Menu / Cart / Profile, and "Menu"
opens the full menu as a bottom sheet.
========================================================================== */
@media (max-width: 900px) {
/* Top header */
.dm-header .dm-header__burger, .dm-header .dm-header__actions > .dm-cart { display: none !important; }
.dm-header__inner { grid-template-columns: auto 1fr auto !important; }
.dm-header__brand { justify-self: start; }
.dm-header .dm-wishlink { display: grid !important; }
/* Bottom bar: 5 slots, lime Menu button raised in the middle */
.dm-bottombar { grid-template-columns: repeat(5, 1fr) !important; background: rgba(13, 13, 13, .96) !important; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .6) !important; }
.dm-bottombar a, .dm-bottombar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; border: 0; background: none; font: 500 11px/1 var(--f-sans); color: #bdbdbd !important; cursor: pointer; }
.dm-bottombar a[aria-current="page"] { color: #b6fa0e !important; font-weight: 700; }
.dm-bottombar .dm-cart-count { border-color: #0d0d0d !important; }
.dm-bottombar__menuico { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -30px; border: 4px solid #fff; border-radius: 50%; background: #b6fa0e; color: #0d0d0d; box-shadow: 0 8px 20px -6px rgba(182, 250, 14, .7); transition: transform .25s; }
.dm-bottombar__menu[aria-expanded="true"] .dm-bottombar__menuico { transform: rotate(90deg); }
.dm-bottombar__menu > span:last-child { color: #fff; font-weight: 700; }
/* Menu = bottom sheet */
.dm-drawer__panel { top: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; max-height: 86vh; padding: 10px 20px calc(100px + env(safe-area-inset-bottom)) !important; border-radius: 26px 26px 0 0; transform: translateY(100%) !important; }
.dm-drawer.is-open .dm-drawer__panel { transform: none !important; }
.dm-drawer__panel::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto 14px; border-radius: 5px; background: #d9d9d6; flex: none; }
.dm-drawer__head { margin-bottom: 14px; }
.dm-drawer__nav a { padding: 14px 0; font-family: "Kanit", var(--f-sans); font-style: italic; font-weight: 900; font-size: 24px; }
.dm-drawer__nav .dm-nav__list > li > a:hover, .dm-drawer__nav .current-menu-item > a { color: #5f9e00; }
.dm-drawer__nav .sub-menu { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 0 16px; list-style: none; border-bottom: 1px solid var(--line); }
.dm-drawer__nav .sub-menu a { padding: 9px 14px; border: 1px solid #e3e3e0; border-radius: 30px; font-family: var(--f-sans); font-style: normal; font-weight: 600; font-size: 14px; text-transform: none; }
.dm-drawer__nav .sub-menu a:hover { background: #b6fa0e; border-color: #b6fa0e; color: #0d0d0d; }
.dm-drawer__nav .menu-item-has-children > a { border-bottom: 0; }
.dm-drawer__nav .is-sale > a { color: inherit; }
}
/* Mobile hero: later desktop-only centring transforms (-57% / -64%) leaked into the stacked mobile layout and pushed the copy off-screen */
@media (max-width: 1100px) { .dm-h5__copy { position: relative !important; left: auto !important; top: auto !important; transform: none !important; } }
/* Mobile menu sheet: dark, like the bottom bar */
@media (max-width: 900px) {
.dm-drawer__panel { background: #0d0d0d !important; color: #fff; }
.dm-drawer__panel::before { background: #3a3a3a; }
.dm-drawer__head { background: none !important; }
.dm-drawer__head .dm-iconbtn { color: #fff; }
.dm-drawer__search { background: #1b1b1b !important; border-color: #2e2e2e !important; color: #fff; }
.dm-drawer__search input { color: #fff; }
.dm-drawer__search input::placeholder { color: #8a8a8a; }
.dm-drawer__nav a { color: #fff; border-color: #262626 !important; }
.dm-drawer__nav .dm-nav__list > li > a:hover, .dm-drawer__nav .current-menu-item > a { color: #b6fa0e; }
.dm-drawer__nav .sub-menu { border-color: #262626 !important; }
.dm-drawer__nav .sub-menu a { border-color: #333 !important; color: #e6e6e6; }
.dm-drawer__foot a { color: #e6e6e6; border-color: #262626 !important; }
}
/* Tablets (901-1080px) use the same mobile navigation: bottom bar + menu sheet, no burger/cart on top */
@media (min-width: 901px) and (max-width: 1080px) {
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.dm-bottombar { position: fixed; z-index: 90; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100% - 40px)); height: 62px; display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 32px; background: rgba(13, 13, 13, .96); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .6); }
.dm-bottombar a, .dm-bottombar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; border: 0; background: none; font: 500 11.5px/1 var(--f-sans); color: #bdbdbd; cursor: pointer; }
.dm-bottombar a[aria-current="page"] { color: #b6fa0e; font-weight: 700; }
.dm-bottombar .dm-icon { width: 22px; height: 22px; stroke-width: 1.5; }
.dm-bottombar__bag { position: relative; display: inline-flex; }
.dm-bottombar .dm-cart-count { top: -8px; right: -12px; min-width: 18px; height: 18px; line-height: 14px; font-size: 10px; border-color: #0d0d0d; }
.dm-bottombar__menuico { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -30px; border: 4px solid #fff; border-radius: 50%; background: #b6fa0e; color: #0d0d0d; box-shadow: 0 8px 20px -6px rgba(182, 250, 14, .7); }
.dm-bottombar__menu > span:last-child { color: #fff; font-weight: 700; }
.dm-header .dm-header__burger, .dm-header .dm-header__actions > .dm-cart { display: none !important; }
.dm-header__inner { grid-template-columns: auto 1fr auto !important; }
.dm-header__brand { justify-self: start; }
.dm-toasts { top: auto; bottom: calc(90px + env(safe-area-inset-bottom)); }
}
/* "View All" never wraps */
.dm-drop2__all { white-space: nowrap; }
/* Shop banner v2 fixes: soft edges on all sides of the cut-out, scripts off the faces, slash runs full height */
@media (min-width: 901px) {
.dm-sh2__model { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 88%, transparent 100%), linear-gradient(0deg, transparent 0, #000 14%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 88%, transparent 100%), linear-gradient(0deg, transparent 0, #000 14%); mask-composite: intersect; }
.dm-sh2__slash { right: 22%; width: 26%; top: 0; bottom: 0; }
.dm-sh2__script--l { left: -2%; top: auto; bottom: 30%; }
.dm-sh2__script--r { right: -2%; top: auto; bottom: 22%; }
.dm-sh2__word { -webkit-text-stroke-color: rgba(182, 250, 14, .28); }
}
/* ==========================================================================
Category pages in the current theme (2026-10-01): dark banner like the shop
========================================================================== */
.dm-cb.dm-cb2 { --lime: #b6fa0e; position: relative; isolation: isolate; overflow: hidden; min-height: clamp(300px, 24vw, 380px); padding: clamp(28px, 3vw, 46px) clamp(24px, 3.4vw, 60px) 110px !important; border-radius: 18px; background: radial-gradient(70% 100% at 78% 55%, #1c2016 0, #0b0c0b 65%) !important; color: #fff; }
.dm-cb2 .dm-cb__leaf, .dm-cb2 .dm-cb__blob { display: none !important; }
.dm-cb2__slash { position: absolute; z-index: -1; right: 16%; top: 0; bottom: 0; width: 20%; background: linear-gradient(170deg, #c4ff2e 0, #9be000 60%, #7cc000 100%); clip-path: polygon(46% 0, 100% 0, 54% 100%, 0 100%); filter: drop-shadow(0 0 30px rgba(182, 250, 14, .35)); }
.dm-cb2__word { position: absolute; z-index: -1; right: 1.5%; top: 8%; writing-mode: vertical-rl; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(70px, 7vw, 120px); line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(182, 250, 14, .3); }
.dm-cb2 .dm-cb__copy { position: relative; z-index: 2; max-width: 560px; }
.dm-cb2__kicker { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; color: #bdbdbd; }
.dm-cb2 .dm-cb__title { margin: 0; font-family: "Kanit", var(--f-sans) !important; font-weight: 900; font-style: italic; font-size: clamp(40px, 4.4vw, 74px) !important; line-height: .92; text-transform: uppercase; color: #fff !important; }
.dm-cb2 .dm-cb__title span { display: block; background: none !important; box-shadow: none !important; }
.dm-cb2 .dm-cb__title span::before, .dm-cb2 .dm-cb__title span::after { display: none !important; }
.dm-cb2 .dm-cb__title .is-lime { color: var(--lime) !important; -webkit-text-fill-color: var(--lime); }
.dm-cb2 .dm-cb__text { display: block !important; margin: 14px 0 0; max-width: 42ch; font-size: 16px; line-height: 1.5; color: #d0d0d0 !important; }
.dm-cb2 .dm-cb__btn { display: inline-flex; align-items: center; gap: 16px; margin-top: 22px; height: 50px; padding: 0 26px; border-radius: 30px; background: var(--lime) !important; color: #0d0d0d !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; transition: background .25s, transform .25s var(--ease); }
.dm-cb2 .dm-cb__btn:hover { background: #fff !important; transform: translateY(-2px); }
.dm-cb2 .dm-cb__media { position: absolute; z-index: 1; right: 12%; bottom: 0; top: 0; width: 34%; display: flex; align-items: flex-end; justify-content: center; }
.dm-cb2 .dm-cb__model { width: auto !important; height: 100% !important; max-width: none; object-fit: contain; object-position: 50% 100%; filter: contrast(1.05) drop-shadow(0 16px 30px rgba(0, 0, 0, .6)); -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 16%); mask-image: linear-gradient(0deg, transparent 0, #000 16%); }
.dm-cb2 .dm-cb__script { position: absolute; z-index: 2; right: 4%; bottom: 128px; top: auto !important; left: auto !important; margin: 0; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(30px, 2.4vw, 44px); line-height: 1; color: var(--lime) !important; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); transform: rotate(-8deg); }
.dm-cb2 .dm-cb__script .dm-icon { display: none; }
/* category circles sit inside the banner's bottom edge */
.dm-cb2 .dm-cb__circles { position: absolute; z-index: 3; left: clamp(24px, 3.4vw, 60px); right: 22%; bottom: 14px; }
.dm-cb2 .dm-circ__img { background: #fff !important; border: 3px solid #2a2a2a !important; }
.dm-cb2 .dm-circ.is-active .dm-circ__img, .dm-cb2 .dm-circ a:hover .dm-circ__img { border-color: var(--lime) !important; }
.dm-cb2 .dm-circ__name { color: #fff !important; }
.dm-cb2 .dm-cb__more { background: #1f1f1f !important; color: #fff !important; border-color: #333 !important; }
/* side promo tiles + trust: dark / lime instead of sage tints */
.dm-promo { --tint: #0d0d0d !important; background: #0d0d0d !important; color: #fff !important; }
.dm-promo__text strong { color: #fff !important; }
.dm-promo__text span { color: #bdbdbd !important; }
.dm-promo__text em { color: #b6fa0e !important; }
.dm-promo + .dm-promo { background: #b6fa0e !important; }
.dm-promo + .dm-promo .dm-promo__text strong, .dm-promo + .dm-promo .dm-promo__text span, .dm-promo + .dm-promo .dm-promo__text em { color: #0d0d0d !important; }
.dm-cl__trust .dm-icon { color: #0d0d0d; }
@media (max-width: 900px) {
.dm-cb.dm-cb2 { min-height: 0; padding: 26px 20px 20px !important; border-radius: 0; }
.dm-cb2 .dm-cb__media { position: relative; right: auto; width: 100%; height: 260px; margin-top: 10px; }
.dm-cb2__slash { right: 20%; width: 40%; top: auto; height: 300px; bottom: 90px; }
.dm-cb2__word { display: none; }
.dm-cb2 .dm-cb__script { bottom: 110px; }
.dm-cb2 .dm-cb__circles { position: relative; left: auto; right: auto; bottom: auto; margin-top: 14px; }
}
/* Category banner: no old entrance/tint on the model; mobile = natural height, stacked */
.dm-cb2 .dm-cb__model { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; animation: none !important; opacity: 1 !important; }
@media (max-width: 900px) {
.dm-cb.dm-cb2 { display: block !important; height: auto !important; }
.dm-cb2__kicker { letter-spacing: .24em; }
.dm-cb2 .dm-cb__copy { max-width: none; }
.dm-cb2 .dm-cb__media { position: relative !important; right: auto !important; top: auto !important; width: 100% !important; height: 280px !important; }
.dm-cb2__slash { height: 300px; bottom: 0; right: 25%; }
.dm-cb2 .dm-cb__script { bottom: 40px; right: 6%; }
}
/* ==========================================================================
My Account + Checkout in the current theme (2026-10-01)
========================================================================== */
:root { --lime: #b6fa0e; }
/* ---- Account hero: dark, Kanit, lime ---- */
.dm-acc-hero { position: relative; isolation: isolate; background: radial-gradient(60% 120% at 80% 50%, #1c2016 0, #0b0c0b 65%) !important; color: #fff; overflow: hidden; }
.dm-acc-hero::after { content: ""; position: absolute; z-index: 0; right: 30%; top: 0; bottom: 0; width: 14%; background: linear-gradient(170deg, #c4ff2e 0, #8fd600 100%); clip-path: polygon(46% 0, 100% 0, 54% 100%, 0 100%); opacity: .9; pointer-events: none; }
.dm-acc-hero__copy { position: relative; z-index: 2; }
.dm-acc-hero__media { z-index: 1 !important; }
.dm-acc-hero__media img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); filter: contrast(1.05); }
.dm-acc-hero .dm-eyebrow { color: #bdbdbd !important; }
html body main .dm-acc-hero__title { font-family: "Kanit", var(--f-sans) !important; font-weight: 900 !important; font-style: italic; text-transform: uppercase; color: #fff !important; background: none !important; }
.dm-acc-hero__title .is-tan, .dm-acc-hero__title span:last-child { color: var(--lime) !important; -webkit-text-fill-color: var(--lime); background: none !important; box-shadow: none !important; }
.dm-acc-hero__title *::before, .dm-acc-hero__title *::after, .dm-acc-hero__title::after { display: none !important; }
.dm-acc-hero__text { color: #cfcfcf !important; }
/* ---- Login / register ---- */
.dm-accpage .u-columns .u-column1, .dm-accpage .u-columns .u-column2, .dm-accpage form.login, .dm-accpage form.register { border-radius: 18px !important; border: 1px solid #ececea !important; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .35); background: #fff; }
.dm-accpage h2 { font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900; text-transform: uppercase; }
.dm-accpage h2::after { content: ""; display: block; width: 36px; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--lime); }
.dm-accpage .input-text, .dm-accpage input[type="email"], .dm-accpage input[type="password"], .dm-accpage input[type="text"], .dm-accpage input[type="tel"], .dm-accpage select, .dm-accpage textarea { border-radius: 12px !important; border: 1.5px solid #dcdcd9 !important; background: #fafaf8 !important; transition: border-color .2s, box-shadow .2s, background .2s; }
.dm-accpage .input-text:focus, .dm-accpage input:focus, .dm-accpage select:focus, .dm-accpage textarea:focus { outline: 0; border-color: #0d0d0d !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(182, 250, 14, .45) !important; }
.dm-accpage .woocommerce-form-login__submit, .dm-accpage .woocommerce-form-register__submit, .dm-accpage .woocommerce-Button, .dm-accpage button.button { border-radius: 30px !important; padding: 0 30px !important; height: 50px; background: #0d0d0d !important; color: #fff !important; border: 0 !important; font-family: var(--f-sans) !important; font-weight: 700; letter-spacing: .06em; transition: background .25s, color .25s, transform .25s; }
.dm-accpage .woocommerce-form-login__submit:hover, .dm-accpage .woocommerce-form-register__submit:hover, .dm-accpage .woocommerce-Button:hover, .dm-accpage button.button:hover { background: var(--lime) !important; color: #0d0d0d !important; transform: translateY(-2px); }
.dm-accpage .woocommerce-form-register__submit { background: var(--lime) !important; color: #0d0d0d !important; }
.dm-accpage .woocommerce-form-register__submit:hover { background: #0d0d0d !important; color: #fff !important; }
.dm-accpage .lost_password a { color: #0d0d0d; text-decoration-color: var(--lime); text-decoration-thickness: 2px; }
.dm-accpage input[type="checkbox"] { accent-color: #0d0d0d; }
/* ---- Dashboard ---- */
.dm-acc__nav a { border-radius: 12px !important; transition: background .2s, color .2s; }
.dm-acc__nav .is-active a, .dm-acc__nav li.is-active > a, .dm-acc__nav a[aria-current="page"] { background: #0d0d0d !important; color: #fff !important; }
.dm-acc__nav .is-active a .dm-icon, .dm-acc__nav a[aria-current="page"] .dm-icon { color: var(--lime) !important; }
.dm-acc__nav a:hover { background: #f2f2ef !important; }
.dm-acc__nav .is-active a:hover { background: #0d0d0d !important; }
.dm-acc .dm-stats > * { border-radius: 16px !important; border: 1px solid #ececea !important; background: #fff !important; transition: transform .25s, box-shadow .25s, border-color .25s; }
.dm-acc .dm-stats > *:hover { transform: translateY(-3px); border-color: var(--lime) !important; box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .4); }
.dm-acc .dm-stats > * > .dm-icon:first-child, .dm-acc .dm-stats .dm-icon:not(.dm-stats__go) { color: #0d0d0d; background: var(--lime); border-radius: 50%; padding: 8px; width: 40px !important; height: 40px !important; }
.dm-acc .dm-stats strong, .dm-acc .dm-stats b { font-family: "Kanit", var(--f-sans); font-style: italic; font-weight: 900; }
.dm-acc-panel, .dm-acc-add, .dm-acc-details { border-radius: 16px !important; border: 1px solid #ececea !important; }
.dm-acc-panel__head h2, .dm-acc-panel__head h3, .dm-acc-add h2, .dm-acc-add h3, .dm-acc-details h2, .dm-acc-details h3 { font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900; }
.dm-acc a[href]:not(.button):not([class*="dm-stats"]) { text-decoration-color: var(--lime); }
.dm-switch input:checked + *, .dm-switch.is-on, .dm-switch[aria-checked="true"] { background: var(--lime) !important; }
/* ---- Checkout ---- */
.dm-co2 { background: #fff !important; }
.dm-co2__leaf { display: none !important; }
.dm-co2__card, .dm-co2__sum { border-radius: 18px !important; border: 1px solid #ececea !important; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .35) !important; background: #fff !important; }
.dm-co2__head h2, .dm-co2__card h2, .dm-rv2__head h2, .dm-rv2__head h3 { font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
.dm-co2 input.input-text, .dm-co2 input[type="text"], .dm-co2 input[type="tel"], .dm-co2 input[type="email"], .dm-co2 select, .dm-co2 .select2-selection { border-radius: 12px !important; border: 1.5px solid #dcdcd9 !important; background: #fafaf8 !important; }
.dm-co2 input:focus, .dm-co2 select:focus { outline: 0; border-color: #0d0d0d !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(182, 250, 14, .45) !important; }
.dm-dcard, .dm-pm2__label { border-radius: 14px !important; background: #fff !important; border: 1.5px solid #dcdcd9 !important; transition: border-color .2s, box-shadow .2s; }
.dm-dcard.is-active, .dm-dcard:has(input:checked), .dm-pm__radio:checked + .dm-pm2__label { border-color: #0d0d0d !important; box-shadow: 0 0 0 3px var(--lime) !important; background: #fff !important; }
.dm-dcard__tick, .dm-pm2__dot { background: var(--lime) !important; border-color: #0d0d0d !important; color: #0d0d0d !important; }
.dm-steps2 li.is-done > span:first-child, .dm-steps2 .is-active > span:first-child { background: var(--lime) !important; border-color: #0d0d0d !important; color: #0d0d0d !important; }
.dm-rv2__item { background: #f7f7f5 !important; border-radius: 14px !important; }
.dm-rv2__coupon { background: #f7f7f5 !important; border-radius: 14px !important; }
.dm-coupon__input { border-radius: 12px !important; }
.dm-coupon__btn { border-radius: 12px !important; background: #0d0d0d !important; color: #fff !important; transition: background .2s, color .2s; }
.dm-coupon__btn:hover { background: var(--lime) !important; color: #0d0d0d !important; }
.dm-rv2__total { border-radius: 14px !important; }
.dm-rv2__total strong, .dm-rv2__total b, .dm-rv2__total span:last-child { font-family: "Kanit", var(--f-sans); font-style: italic; font-weight: 900; }
.dm-co2__place, .dm-co__place { border-radius: 40px !important; transition: background .25s, color .25s, transform .25s !important; }
.dm-co2__place:hover, .dm-co__place:hover { background: var(--lime) !important; color: #0d0d0d !important; transform: translateY(-2px); }
.dm-co2__trust .dm-icon { color: #0d0d0d; }
.dm-co2 .dm-free { display: inline-block; padding: 2px 10px; border-radius: 20px; background: var(--lime); color: #0d0d0d !important; }
.dm-co2__script { color: #5f9e00 !important; }
html body main .dm-acc-hero__title span.is-tan { display: block !important; color: #b6fa0e !important; -webkit-text-fill-color: #b6fa0e !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; opacity: 1 !important; visibility: visible !important; }
/* one card per column (no nested form box) */
.dm-accpage form.login, .dm-accpage form.register { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; }
.dm-accpage button.button.woocommerce-form-register__submit { background: #b6fa0e !important; color: #0d0d0d !important; }
.dm-accpage button.button.woocommerce-form-register__submit:hover { background: #0d0d0d !important; color: #fff !important; }
/* Card count comes from the Customizer (--cards) */
@media (min-width: 1101px) { .dm-men .dm-men__cards { grid-template-columns: repeat(var(--cards, 6), minmax(0, 1fr)) !important; } }
/* ==========================================================================
Cart page in the current theme (2026-10-01)
========================================================================== */
.dm-cp2 div.dm-cart2 { grid-template-columns: minmax(0, 1fr) minmax(0, 31%); }
@media (max-width: 1100px) { .dm-cp2 div.dm-cart2 { grid-template-columns: minmax(0, 1fr) !important; } }
.dm-cp2 .dm-cb2 { background: radial-gradient(60% 140% at 80% 50%, #1c2016 0, #0b0c0b 65%) !important; color: #fff; border-radius: 18px !important; overflow: hidden; }
.dm-cp2 .dm-cb2__leaf, .dm-cart2__pleaf { display: none !important; }
.dm-cp2 .dm-cb2__title { font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900 !important; color: #fff !important; }
.dm-cp2 .dm-cb2__title *, .dm-cp2 .dm-cb2__title .is-tan { color: #b6fa0e !important; -webkit-text-fill-color: #b6fa0e !important; background: none !important; box-shadow: none !important; }
.dm-cp2 .dm-cb2__title *::before, .dm-cp2 .dm-cb2__title *::after { display: none !important; }
.dm-cp2 .dm-cb2__text { color: #cfcfcf !important; }
.dm-cp2 .dm-cb2__script { color: #b6fa0e !important; }
.dm-cp2 .dm-cb2__script .dm-icon { color: #b6fa0e; }
.dm-cp2 .dm-cb2__model { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .6)); }
.dm-cp2 .dm-cb2__trust, .dm-cp2 .dm-cb2__trust * { color: #e6e6e6 !important; border-color: rgba(255, 255, 255, .15) !important; }
.dm-cp2 .dm-cb2__trust .dm-icon { color: #b6fa0e !important; }
.dm-cp2 .dm-cb2__trust span:has(> .dm-icon), .dm-cp2 .dm-cb2__trust i { background: #1f1f1f !important; }
.dm-cart2__card, .dm-sum2, .dm-cart2__help { border-radius: 18px !important; border: 1px solid #ececea !important; background: #fff !important; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .35) !important; }
.dm-sum2__box, .dm-sum2__coupon, .dm-sum2__trust { background: #f7f7f5 !important; border-radius: 14px !important; }
.dm-cart2__head h2, .dm-sum2__title, .dm-cart2 h2 { font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900 !important; text-transform: uppercase; }
.dm-sum2__total strong, .dm-sum2__total span:last-child { font-family: "Kanit", var(--f-sans); font-style: italic; font-weight: 900; }
.dm-cart2 .dm-free { display: inline-block; padding: 2px 10px; border-radius: 20px; background: #b6fa0e; color: #0d0d0d !important; }
.dm-sum2__cta { border-radius: 40px !important; transition: background .25s, color .25s, transform .25s !important; }
.dm-sum2__cta:hover { background: #b6fa0e !important; color: #0d0d0d !important; transform: translateY(-2px); }
.dm-cart2__promo { background: radial-gradient(70% 120% at 80% 60%, #1c2016 0, #0b0c0b 70%) !important; color: #fff; border-radius: 18px !important; }
.dm-cart2__ptitle { font-family: "Kanit", var(--f-sans) !important; font-style: italic; color: #fff !important; }
.dm-cart2__pbtn { background: #b6fa0e !important; color: #0d0d0d !important; }
.dm-cart2__pbtn:hover { background: #fff !important; }
.dm-cart2__helpico { color: #0d0d0d; }
.dm-line2__qty .dm-qty, .dm-line2 .dm-qty { border-radius: 12px !important; }
/* Mobile legibility: nothing under 11px */
@media (max-width: 640px) {
.dm-card__rating small { font-size: 11px !important; }
.dm-men__vals li { font-size: 11px !important; }
}
/* ==========================================================================
Single product page redesign (2026-10-01): black / white / lime, Kanit
========================================================================== */
.dm-pdp { --lime: #b6fa0e; padding-top: 14px; }
.dm-pdp__crumbs { font-size: 13px; }
.dm-pdp__crumbs a:hover { color: #0d0d0d; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; }
/* Gallery */
.dm-pdp__stage { background: #efefec !important; border-radius: 22px !important; }
.dm-pdp__img { border-radius: 22px; }
.dm-pdp__thumbs button { border-radius: 14px !important; overflow: hidden; border: 2px solid transparent !important; opacity: .65; transition: opacity .2s, border-color .2s, transform .2s; }
.dm-pdp__thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.dm-pdp__thumbs button.is-active { opacity: 1; border-color: #0d0d0d !important; box-shadow: 0 0 0 3px var(--lime); }
.dm-pdp__tiles button { border-radius: 14px !important; overflow: hidden; background: #0d0d0d !important; }
.dm-pdp__tiles button span { color: #fff !important; font-weight: 700; }
.dm-pdp__tiles button img { opacity: .85; transition: opacity .2s, transform .5s; }
.dm-pdp__tiles button:hover img { opacity: 1; transform: scale(1.05); }
.dm-cmp__handle { background: var(--lime) !important; color: #0d0d0d !important; box-shadow: 0 0 0 6px rgba(182, 250, 14, .3) !important; }
.dm-cmp__clip { border-left: 3px solid var(--lime) !important; }
.dm-pdp .dm-qv__zoom { background: #0d0d0d !important; color: #fff !important; }
.dm-pdp .dm-qv__zoom:hover { background: var(--lime) !important; color: #0d0d0d !important; }
.dm-pdp__script { color: var(--lime) !important; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
/* Info panel */
.dm-pdp__info { padding: clamp(22px, 2.2vw, 34px); border: 1px solid #ececea; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .45); }
.dm-pdp__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dm-pdp__cat { font-size: 12.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #6b6b6b; }
.dm-pdp__cat:hover { color: #0d0d0d; }
.dm-pdp__badge { margin: 0 !important; padding: 5px 12px !important; border-radius: 20px !important; background: var(--lime) !important; color: #0d0d0d !important; font-size: 11px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
html body main h1.dm-pdp__title { margin: 0; font-family: "Kanit", var(--f-sans) !important; font-weight: 900 !important; font-style: italic; font-size: clamp(30px, 2.8vw, 46px) !important; line-height: 1; letter-spacing: -.005em; text-transform: uppercase; color: #0d0d0d !important; }
.dm-pdp__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px !important; }
.dm-pdp__price, .dm-pdp__price ins, .dm-pdp__price > .amount, .dm-pdp__price bdi { font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(28px, 2.4vw, 38px) !important; color: #0d0d0d; text-decoration: none; }
.dm-pdp__price del, .dm-pdp__price del bdi { font-family: var(--f-sans); font-style: normal; font-weight: 500; font-size: 18px !important; color: #9a9a9a; }
.dm-pdp .dm-qv__off { padding: 4px 10px; border-radius: 20px; background: #0d0d0d; color: var(--lime) !important; font-size: 12px; font-weight: 800; font-style: normal; }
.dm-pdp .dm-qv__rating { font-size: 13.5px; }
.dm-pdp .dm-star.is-on { color: #0d0d0d; }
.dm-pdp__short { margin-top: 14px; color: #4d4d4d; font-size: 15.5px; line-height: 1.6; }
.dm-pdp__lights { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.dm-pdp__lights li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 30px; background: #f3f3f0; font-size: 13px; font-weight: 600; }
.dm-pdp__lights .dm-icon { width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: var(--lime); color: #0d0d0d; stroke-width: 3; }
.dm-pdp .dm-qv__opt { margin-top: 22px; padding-top: 20px; border-top: 1px solid #efefec; }
.dm-pdp .dm-qv__label { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.dm-pdp .dm-qv__label span { letter-spacing: 0; text-transform: none; font-weight: 500; color: #6b6b6b; }
.dm-pdp .dm-qv__guide { font-weight: 600; text-decoration-color: var(--lime) !important; text-decoration-thickness: 2px !important; }
.dm-pdp .dm-swatches--lg .dm-swatch { width: 40px; height: 40px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #dcdcd9; transition: box-shadow .2s, transform .2s; }
.dm-pdp .dm-swatches--lg .dm-swatch:hover { transform: scale(1.08); }
.dm-pdp .dm-swatches--lg .dm-swatch.is-active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0d0d0d, 0 0 0 8px var(--lime); }
.dm-pdp .dm-chips--lg { gap: 10px; }
.dm-pdp .dm-chips--lg .dm-chip { min-width: 58px; height: 48px; border-radius: 12px; border: 1.5px solid #dcdcd9; font-weight: 700; font-size: 14.5px; }
.dm-pdp .dm-chips--lg .dm-chip:hover:not(:disabled) { border-color: #0d0d0d; }
.dm-pdp .dm-chips--lg .dm-pill { border-radius: 12px; }
.dm-pdp__stock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 20px 0 0 !important; padding-top: 18px; border-top: 1px solid #efefec; }
.dm-pdp__stock .dm-dot.is-ok { background: #2bb24c; box-shadow: 0 0 0 0 rgba(43, 178, 76, .5); animation: dm-pulse 1.8s infinite; }
@keyframes dm-pulse { 0% { box-shadow: 0 0 0 0 rgba(43, 178, 76, .55); } 70% { box-shadow: 0 0 0 9px rgba(43, 178, 76, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 178, 76, 0); } }
.dm-pdp__ship { padding: 3px 10px; border-radius: 20px; background: #f3f3f0; font-size: 12.5px; font-weight: 600; }
/* Buy buttons */
.dm-pdp__buy { display: grid !important; grid-template-columns: minmax(0, 1fr) 58px; gap: 10px; margin-top: 16px; }
.dm-pdp__buy .dm-atc { height: 58px !important; border-radius: 40px !important; background: #0d0d0d !important; color: #fff !important; border: 0 !important; font-family: var(--f-sans) !important; font-weight: 800 !important; font-size: 15px !important; letter-spacing: .1em !important; transition: background .25s, color .25s, transform .25s !important; }
.dm-pdp__buy .dm-atc:hover { background: var(--lime) !important; color: #0d0d0d !important; transform: translateY(-2px); }
.dm-pdp__wish { width: 58px !important; height: 58px !important; border-radius: 50% !important; border: 1.5px solid #dcdcd9 !important; background: #fff !important; }
.dm-pdp__wish:hover { border-color: #0d0d0d !important; }
.dm-pdp__wish[aria-pressed="true"] { background: #0d0d0d !important; border-color: #0d0d0d !important; }
.dm-pdp__wish[aria-pressed="true"] .dm-icon { fill: var(--lime); stroke: var(--lime); }
.dm-pdp__now { width: 100%; height: 58px !important; margin-top: 10px !important; border-radius: 40px !important; background: var(--lime) !important; color: #0d0d0d !important; border: 0 !important; font-family: var(--f-sans) !important; font-weight: 800 !important; font-size: 15px !important; letter-spacing: .1em !important; transition: background .25s, color .25s, transform .25s !important; }
.dm-pdp__now:hover { background: #0d0d0d !important; color: var(--lime) !important; transform: translateY(-2px); }
/* Trust + PIN */
.dm-pdp__trust { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; margin-top: 18px !important; }
.dm-pdp__trust li { flex-direction: column; align-items: flex-start !important; gap: 8px !important; padding: 12px !important; border-radius: 14px; background: #f7f7f5; border: 0 !important; }
.dm-pdp__trust .dm-icon { width: 30px !important; height: 30px !important; padding: 6px; border-radius: 50%; background: #0d0d0d; color: var(--lime) !important; }
.dm-pdp__trust strong { font-size: 13px; }
.dm-pdp .dm-pin { margin-top: 14px !important; padding: 16px !important; border: 1.5px dashed #dcdcd9 !important; border-radius: 16px !important; background: #fff !important; }
.dm-pdp .dm-pin__row input { border-radius: 12px !important; border: 1.5px solid #dcdcd9 !important; background: #fafaf8 !important; padding: 0 14px !important; }
.dm-pdp .dm-pin__row input:focus { outline: 0; border-color: #0d0d0d !important; box-shadow: 0 0 0 4px rgba(182, 250, 14, .45); }
.dm-pdp .dm-pin__row button { border-radius: 12px !important; background: #0d0d0d !important; color: #fff !important; transition: background .2s, color .2s; }
.dm-pdp .dm-pin__row button:hover { background: var(--lime) !important; color: #0d0d0d !important; }
.dm-pdp .dm-pin__msg.is-ok { color: #2f7d32; font-weight: 600; }
/* See it in action: dark band */
.dm-pdp .dm-action { margin-top: clamp(40px, 5vw, 70px); padding: clamp(28px, 3vw, 46px); border-radius: 24px; background: radial-gradient(60% 120% at 85% 40%, #1c2016 0, #0b0c0b 65%) !important; color: #fff; }
.dm-pdp .dm-action h2 { font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900; font-size: clamp(30px, 3vw, 48px); text-transform: uppercase; color: #fff !important; }
.dm-pdp .dm-action h2 .is-tan { color: var(--lime) !important; }
.dm-pdp .dm-action p { color: #cfcfcf; }
.dm-pdp .dm-action__item { border-radius: 16px; overflow: hidden; }
.dm-pdp .dm-action__item img { transition: transform .6s var(--ease); }
.dm-pdp .dm-action__item:hover img { transform: scale(1.06); }
.dm-pdp .dm-fabric__card { border-radius: 18px !important; }
.dm-pdp .dm-fabric__play span { background: var(--lime) !important; color: #0d0d0d !important; }
/* Tabs */
.dm-pdp .dm-tabs { margin-top: clamp(40px, 5vw, 70px); }
.dm-pdp .dm-tabs__list { justify-content: center; gap: 8px !important; border: 0 !important; }
.dm-pdp .dm-tabs__list [role="tab"] { padding: 12px 22px !important; border-radius: 40px !important; border: 1.5px solid #e3e3e0 !important; background: #fff; font-weight: 700 !important; color: #4d4d4d; transition: background .2s, color .2s, border-color .2s; }
.dm-pdp .dm-tabs__list [role="tab"]::after { display: none !important; }
.dm-pdp .dm-tabs__list [role="tab"][aria-selected="true"] { background: #0d0d0d !important; border-color: #0d0d0d !important; color: #fff !important; }
.dm-pdp .dm-tabs__list [role="tab"]:hover:not([aria-selected="true"]) { border-color: #0d0d0d !important; color: #0d0d0d; }
.dm-pdp .dm-tabs__panel { max-width: 860px; margin: 24px auto 0; padding: clamp(22px, 2.4vw, 36px); border-radius: 20px; background: #f7f7f5; }
.dm-pdp .dm-tabs__panel ul li::marker { color: #5f9e00; }
.dm-pdp .dm-specs > div { border-color: #e3e3e0 !important; }
.dm-pdp .dm-specs dt { font-weight: 700; }
/* Reviews block */
.dm-pdp #reviews, .dm-pdp .dm-reviews, .dm-pdp .dm-rvw { border-radius: 24px !important; background: #fff !important; border: 1px solid #ececea !important; }
.dm-pdp #reviews h2, .dm-pdp .dm-reviews h2 { font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900; }
.dm-pdp #reviews input[type="text"], .dm-pdp #reviews input[type="email"], .dm-pdp #reviews textarea { border-radius: 12px !important; border: 1.5px solid #dcdcd9 !important; background: #fafaf8 !important; }
.dm-pdp #reviews input:focus, .dm-pdp #reviews textarea:focus { outline: 0; border-color: #0d0d0d !important; box-shadow: 0 0 0 4px rgba(182, 250, 14, .45); }
.dm-pdp #reviews .submit, .dm-pdp #reviews button[type="submit"], .dm-pdp #reviews a.button { border-radius: 40px !important; transition: background .2s, color .2s; }
.dm-pdp #reviews .submit:hover, .dm-pdp #reviews button[type="submit"]:hover, .dm-pdp #reviews a.button:hover { background: var(--lime) !important; color: #0d0d0d !important; }
/* Related */
.dm-pdp__related { margin-top: clamp(40px, 5vw, 70px); }
.dm-pdp__related .dm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Sticky add-to-cart bar */
.dm-sticky { position: fixed; z-index: 85; left: 50%; bottom: 18px; width: min(760px, calc(100% - 32px)); transform: translate(-50%, 140%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.dm-sticky.is-on { transform: translate(-50%, 0); }
.dm-sticky__in { display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 12px; border-radius: 22px; background: rgba(13, 13, 13, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .6); }
.dm-sticky__img { flex: none; width: 50px; height: 50px; border-radius: 12px; object-fit: cover; }
.dm-sticky__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-sticky__txt strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.5px; }
.dm-sticky__txt span, .dm-sticky__txt bdi { font-family: "Kanit", var(--f-sans); font-style: italic; font-weight: 900; color: var(--lime); }
.dm-sticky__txt del, .dm-sticky__txt del bdi { color: #8a8a8a; font-family: var(--f-sans); font-style: normal; font-weight: 500; }
.dm-sticky__btn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; border: 0; border-radius: 40px; background: var(--lime); color: #0d0d0d; font: 800 14px/1 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .2s; }
.dm-sticky__btn:hover { background: #fff; transform: translateY(-1px); }
.dm-sticky__btn .dm-icon { width: 18px; height: 18px; }
@media (max-width: 1100px) {
.dm-pdp__info { padding: 20px; border-radius: 18px; }
.dm-pdp__related .dm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-sticky { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
.dm-pdp__stage, .dm-pdp__img { border-radius: 18px !important; }
.dm-pdp__trust { grid-template-columns: minmax(0, 1fr) !important; }
.dm-pdp__trust li { flex-direction: row; align-items: center !important; }
.dm-pdp .dm-action { padding: 22px 16px; border-radius: 18px; }
.dm-pdp .dm-tabs__list { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; }
.dm-pdp .dm-tabs__list [role="tab"] { flex: none; padding: 10px 16px !important; font-size: 13.5px; }
.dm-sticky__img { display: none; }
.dm-sticky__btn { padding: 0 18px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .dm-pdp__stock .dm-dot.is-ok { animation: none; } .dm-sticky { transition: none; } }
html body .dm-pdp .dm-action h2 .is-tan, html body .dm-pdp__related .dm-section__title .is-tan { background: none !important; box-shadow: none !important; color: #b6fa0e !important; -webkit-text-fill-color: #b6fa0e !important; padding: 0 !important; }
html body .dm-pdp__related .dm-section__title .is-tan { color: #5f9e00 !important; -webkit-text-fill-color: #5f9e00 !important; }
.dm-pdp .dm-action h2 .is-tan::before, .dm-pdp .dm-action h2 .is-tan::after { display: none !important; }
html body .dm-pdp__related .dm-section__title { font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900; font-size: clamp(32px, 3.6vw, 56px) !important; text-transform: none; }
/* ==========================================================================
Product page v2 extras: gallery nav, fit finder, share, tabs2, recent
========================================================================== */
/* Gallery arrows / dots / counter */
.dm-gnav { position: absolute; z-index: 6; top: 50%; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #0d0d0d; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); transform: translateY(-50%); cursor: pointer; opacity: 0; transition: opacity .25s, background .2s, transform .2s; }
.dm-gnav--prev { left: 14px; } .dm-gnav--next { right: 14px; }
.dm-pdp__stage:hover .dm-gnav, .dm-gnav:focus-visible { opacity: 1; }
.dm-gnav:hover { background: #b6fa0e; transform: translateY(-50%) scale(1.06); }
.dm-gnav .dm-icon { width: 20px; height: 20px; }
.dm-gdots { position: absolute; z-index: 6; left: 50%; bottom: 16px; display: flex; gap: 6px; padding: 6px 10px; border-radius: 20px; background: rgba(13, 13, 13, .55); transform: translateX(-50%); }
.dm-gdots i { width: 7px; height: 7px; border-radius: 10px; background: rgba(255, 255, 255, .55); transition: width .3s, background .3s; }
.dm-gdots i.is-on { width: 22px; background: #b6fa0e; }
.dm-gcount { position: absolute; z-index: 6; left: 16px; top: 16px; padding: 5px 11px; border-radius: 20px; background: #0d0d0d; color: #fff; font-size: 12.5px; font-weight: 600; }
.dm-gcount b { color: #b6fa0e; }
@media (hover: none) { .dm-gnav { opacity: 1; width: 40px; height: 40px; } }
/* Fit finder */
.dm-fitf { margin-top: 14px; border-radius: 16px; background: #0d0d0d; color: #fff; overflow: hidden; }
.dm-fitf__toggle { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.dm-fitf__toggle > .dm-icon:first-child { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: #b6fa0e; color: #0d0d0d; }
.dm-fitf__toggle span { flex: 1; display: flex; flex-direction: column; font-size: 13px; color: #bdbdbd; }
.dm-fitf__toggle strong { font-size: 15px; color: #fff; }
.dm-fitf__toggle > .dm-icon:last-child { width: 18px; height: 18px; transition: transform .3s; }
.dm-fitf.is-open .dm-fitf__toggle > .dm-icon:last-child { transform: rotate(90deg); }
.dm-fitf__body { padding: 4px 16px 18px; }
.dm-fitf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dm-fitf__row label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #bdbdbd; }
.dm-fitf__row output { font-family: "Kanit", var(--f-sans); font-style: italic; font-weight: 900; font-size: 18px; letter-spacing: 0; color: #fff; }
.dm-fitf__row input[type="range"] { width: 100%; accent-color: #b6fa0e; }
.dm-fitf__pref { display: flex; gap: 6px; margin-top: 14px; padding: 4px; border-radius: 30px; background: #1f1f1f; }
.dm-fitf__pref button { flex: 1; height: 36px; border: 0; border-radius: 30px; background: none; color: #bdbdbd; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .2s, color .2s; }
.dm-fitf__pref button[aria-pressed="true"] { background: #fff; color: #0d0d0d; }
.dm-fitf__out { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 14px; margin-top: 16px; padding: 14px; border-radius: 14px; background: #1a1a1a; }
.dm-fitf__size { grid-row: span 2; display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 10px; border-radius: 16px; background: #b6fa0e; color: #0d0d0d; font-family: "Kanit", var(--f-sans); font-style: italic; font-weight: 900; font-size: 28px; }
.dm-fitf__size.is-pop { animation: dm-heart .45s cubic-bezier(.3, 1.8, .5, 1); }
.dm-fitf__out p { margin: 0; font-size: 13.5px; color: #d0d0d0; }
.dm-fitf__use { justify-self: start; height: 36px; padding: 0 16px; border: 1.5px solid #fff; border-radius: 30px; background: none; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.dm-fitf__use:hover { background: #b6fa0e; border-color: #b6fa0e; color: #0d0d0d; }
/* Share */
.dm-share { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b6b6b; }
.dm-share a, .dm-share button { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid #e3e3e0; border-radius: 50%; background: #fff; color: #0d0d0d; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.dm-share a:hover, .dm-share button:hover { background: #b6fa0e; border-color: #b6fa0e; transform: translateY(-2px); }
.dm-share svg, .dm-share .dm-icon { width: 18px; height: 18px; }
.dm-share__btn .dm-icon { transform: rotate(-45deg); }
.dm-share__msg { letter-spacing: 0; text-transform: none; font-weight: 600; color: #2f7d32; }
/* Tabs v2 */
.dm-pdp .dm-tabs2 { margin-top: clamp(44px, 5vw, 76px); }
.dm-pdp .dm-tabs2 .dm-tabs__list { display: flex !important; justify-content: center; gap: 6px !important; width: max-content; max-width: 100%; margin: 0 auto; padding: 6px !important; border-radius: 40px; background: #0d0d0d; overflow-x: auto; }
.dm-pdp .dm-tabs2 .dm-tabs__list [role="tab"] { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px !important; border: 0 !important; border-radius: 40px !important; background: none !important; color: #bdbdbd !important; white-space: nowrap; }
.dm-pdp .dm-tabs2 .dm-tabs__list [role="tab"] .dm-icon { width: 18px; height: 18px; }
.dm-pdp .dm-tabs2 .dm-tabs__list [role="tab"]:hover:not([aria-selected="true"]) { color: #fff !important; }
.dm-pdp .dm-tabs2 .dm-tabs__list [role="tab"][aria-selected="true"] { background: #b6fa0e !important; color: #0d0d0d !important; }
.dm-pdp .dm-tabs2 .dm-tabs__panel { max-width: 1100px; margin: 26px auto 0; padding: 0; background: none; animation: dm-rise .45s ease both; }
.dm-tp { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 36px); align-items: start; }
.dm-tp__main { padding: clamp(22px, 2.4vw, 34px); border-radius: 22px; background: #f7f7f5; }
.dm-tp__h { margin: 0 0 12px; font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900; font-size: clamp(22px, 1.9vw, 30px); text-transform: uppercase; }
.dm-tp__ticks { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.dm-tp__ticks li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.dm-tp__ticks .dm-icon { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #b6fa0e; stroke-width: 3; }
.dm-tp__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.dm-tp__specs > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 16px; border: 1px solid #ececea; border-radius: 16px; background: #fff; }
.dm-tp__specs .dm-icon { grid-row: span 2; width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: #0d0d0d; color: #b6fa0e; }
.dm-tp__specs dt { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b6b6b; }
.dm-tp__specs dd { margin: 2px 0 0; font-weight: 700; font-size: 14.5px; }
.dm-tp__steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dm-tp__steps li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #ececea; border-radius: 16px; background: #fff; font-weight: 600; }
.dm-tp__steps b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #0d0d0d; color: #b6fa0e; font-family: "Kanit", var(--f-sans); font-style: italic; font-weight: 900; }
.dm-tp__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dm-tp__card { position: relative; padding: clamp(22px, 2.4vw, 32px); border-radius: 22px; background: radial-gradient(80% 120% at 90% 0, #1c2016 0, #0b0c0b 70%); color: #fff; overflow: hidden; }
.dm-tp__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #b6fa0e; color: #0d0d0d; }
.dm-tp__ico .dm-icon { width: 26px; height: 26px; }
.dm-tp__card h3 { margin: 16px 0 8px; font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900; font-size: 24px; text-transform: uppercase; color: #fff; }
.dm-tp__card p { margin: 0; color: #cfcfcf; line-height: 1.6; }
.dm-tp__card a { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; color: #b6fa0e; }
.dm-tp__card a .dm-icon { width: 16px; height: 16px; transition: transform .2s; }
.dm-tp__card a:hover .dm-icon { transform: translateX(4px); }
/* Recently viewed */
.dm-recent { margin-top: clamp(40px, 5vw, 70px); }
.dm-recent__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.dm-recent__track > * { scroll-snap-align: start; }
html body .dm-recent .dm-section__title { font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900; }
html body .dm-recent .dm-section__title .is-tan { background: none !important; color: #5f9e00 !important; -webkit-text-fill-color: #5f9e00 !important; }
@media (max-width: 900px) {
.dm-tp, .dm-tp__cards { grid-template-columns: minmax(0, 1fr); }
.dm-recent__track { grid-auto-columns: 70%; }
.dm-pdp .dm-tabs2 .dm-tabs__list { justify-content: flex-start; width: 100%; }
}
@media (max-width: 480px) {
.dm-tp__specs { grid-template-columns: minmax(0, 1fr); }
.dm-fitf__row { grid-template-columns: minmax(0, 1fr); }
.dm-pdp .dm-tabs2 .dm-tabs__list [role="tab"] { padding: 10px 14px !important; font-size: 13px; }
.dm-pdp .dm-tabs2 .dm-tabs__list [role="tab"] .dm-icon { display: none; }
}
.dm-sticky { opacity: 0; visibility: hidden; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, visibility .3s; }
.dm-sticky.is-on { opacity: 1; visibility: visible; }
@media (max-width: 900px) { .dm-pdp__gallery.has-thumbs .dm-pdp__tiles { display: none; } }
/* Size guide popup */
.dm-sg { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; padding: 20px; }
.dm-sg__backdrop { position: absolute; inset: 0; background: rgba(13, 13, 13, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.dm-sg__panel { position: relative; width: min(720px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; border-radius: 24px; background: #fff; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); outline: 0; overflow: hidden; }
.dm-sg.is-open .dm-sg__backdrop { opacity: 1; }
.dm-sg.is-open .dm-sg__panel { opacity: 1; transform: none; }
.dm-sg__head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #0d0d0d; color: #fff; }
.dm-sg__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #b6fa0e; color: #0d0d0d; }
.dm-sg__ico .dm-icon { width: 22px; height: 22px; }
.dm-sg__head h2 { flex: 1; margin: 0; font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-weight: 900; font-size: 26px; text-transform: uppercase; color: #fff; }
.dm-sg__x { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: background .2s, color .2s; }
.dm-sg__x:hover { background: #b6fa0e; color: #0d0d0d; border-color: #b6fa0e; }
.dm-sg__body { padding: 22px 24px 26px; overflow-y: auto; }
.dm-sg__body table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 14px; border: 1px solid #ececea; font-size: 15px; }
.dm-sg__body th { background: #0d0d0d; color: #b6fa0e; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; }
.dm-sg__body th, .dm-sg__body td { padding: 12px 14px; text-align: center; }
.dm-sg__body tbody tr:nth-child(even) td { background: #f7f7f5; }
.dm-sg__body tbody td:first-child { font-family: "Kanit", var(--f-sans); font-style: italic; font-weight: 900; font-size: 17px; }
.dm-sg__body figcaption { margin-top: 8px; font-size: 13px; color: #6b6b6b; }
.dm-sg__body h2 { font-family: "Kanit", var(--f-sans) !important; font-style: italic; font-size: 22px; text-transform: uppercase; }
.dm-sg__body li::marker { color: #5f9e00; }
@media (max-width: 640px) {
.dm-sg { align-items: end; padding: 0; }
.dm-sg__panel { width: 100%; max-height: 88vh; border-radius: 24px 24px 0 0; transform: translateY(100%); }
.dm-sg__body { padding: 18px 16px 30px; }
.dm-sg__body table { font-size: 14px; }
.dm-sg__body th, .dm-sg__body td { padding: 10px 6px; }
}
.dm-sg[hidden] { display: none !important; }
/* Product photos: hover lens, fullscreen viewer, colour swap */
.dm-pdp__stage { cursor: zoom-in; }
.dm-lens { position: absolute; z-index: 7; left: 0; top: 0; width: 190px; height: 190px; margin: -95px 0 0 -95px; border: 3px solid #fff; border-radius: 50%; background-color: #efefec; background-repeat: no-repeat; box-shadow: 0 0 0 3px #b6fa0e, 0 18px 40px -10px rgba(0, 0, 0, .55); pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s; }
.dm-lens.is-on { opacity: 1; transform: none; }
.dm-pdp__img { transition: opacity .18s; }
.dm-pdp__img.is-swap { opacity: 0; }
.dm-lb { position: fixed; inset: 0; z-index: 2147482500; background: rgba(8, 8, 8, .96); opacity: 0; transition: opacity .25s; }
.dm-lb[hidden] { display: none !important; }
.dm-lb.is-open { opacity: 1; }
.dm-lb__stage { position: absolute; inset: 60px 70px 64px; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.dm-lb.is-zoomed .dm-lb__stage { cursor: grab; }
.dm-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); user-select: none; -webkit-user-drag: none; }
.dm-lb__img.is-in { animation: dm-lb-in .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes dm-lb-in { from { opacity: 0; } }
.dm-lb__x { position: absolute; right: 18px; top: 14px; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.dm-lb__x:hover { background: #b6fa0e; color: #0d0d0d; border-color: #b6fa0e; }
.dm-lb__nav { position: absolute; top: 50%; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 34px; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.dm-lb__nav:hover { background: #b6fa0e; color: #0d0d0d; }
.dm-lb__nav--prev { left: 12px; }
.dm-lb__nav--next { right: 12px; }
.dm-lb.is-single .dm-lb__nav, .dm-lb.is-single [data-lb-count] { display: none; }
.dm-lb__bar { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 16px; margin: 0; color: #cfcfcf; font-size: 13px; }
.dm-lb__bar [data-lb-count] { color: #b6fa0e; font-weight: 800; }
@media (max-width: 640px) { .dm-lb__stage { inset: 64px 8px 56px; } .dm-lb__nav { display: none; } }
.dm-lb { background: #080808; }
/* ==========================================================================
Star ratings (owner 2026-10-01): white stars with a thin dark outline,
filled stars lime; pop in one by one, wave on card hover
========================================================================== */
.dm-stars { filter: drop-shadow(0 0 .5px #0d0d0d) drop-shadow(0 0 .5px #0d0d0d) drop-shadow(0 0 .3px #0d0d0d); }
.dm-star, .dm-card__rating.is-empty .dm-star, .dm-qv__rating.is-empty .dm-star, .dm-rvw__empty .dm-star { background: #fff !important; }
.dm-star.is-on, .dm-card__rating .dm-star.is-on, .dm-qv__rating .dm-star.is-on, .dm-rvw__stars .dm-star.is-on, .dm-rcard__stars .dm-star.is-on { background: #b6fa0e !important; }
.dm-stars .dm-star { transform-origin: 50% 60%; }
.dm-anim .dm-sr .dm-star { transform: scale(0) rotate(-72deg); }
.dm-anim .dm-sr.is-in .dm-star { animation: dm-star-pop .5s cubic-bezier(.3, 1.7, .5, 1) forwards; }
.dm-stars .dm-star:nth-child(2) { animation-delay: .07s !important; } .dm-stars .dm-star:nth-child(3) { animation-delay: .14s !important; } .dm-stars .dm-star:nth-child(4) { animation-delay: .21s !important; } .dm-stars .dm-star:nth-child(5) { animation-delay: .28s !important; }
@keyframes dm-star-pop { to { transform: none; } }
.dm-card:hover .dm-sr.is-in .dm-star, .dm-card:hover .dm-stars:not(.dm-sr) .dm-star, .dm-qv__rating:hover .dm-star { animation: dm-star-wave .6s ease both; }
@keyframes dm-star-wave { 0%, 100% { transform: none; } 40% { transform: translateY(-4px) scale(1.25) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .dm-anim .dm-sr .dm-star { transform: none !important; animation: none !important; } .dm-star { animation: none !important; } }
/* Checkout / cart: calm, neutral selection + totals (owner: lime blocks looked heavy) */
.dm-dcard label, .dm-co2 .dm-pm2__label { background: #fff !important; border: 1.5px solid #e3e3e0 !important; box-shadow: none !important; }
.dm-dcard input:checked + label, .dm-co2 .dm-pm2 > input:checked + .dm-pm2__label, .dm-dcard.is-active, .dm-dcard:has(input:checked), .dm-pm__radio:checked + .dm-pm2__label { background: #fff !important; border-color: #0d0d0d !important; box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .5) !important; }
.dm-dcard__tick, .dm-pm2__dot { background: #fff !important; border: 1.5px solid #c9c9c6 !important; }
.dm-dcard input:checked + label .dm-dcard__tick, .dm-co2 .dm-pm2 > input:checked + .dm-pm2__label .dm-pm2__dot { background: #0d0d0d !important; border-color: #0d0d0d !important; }
.dm-dcard__tick .dm-icon, .dm-pm2__dot .dm-icon { color: #fff !important; }
.dm-rv2__total, .dm-sum2__total { background: #f5f5f3 !important; color: #0d0d0d !important; border-radius: 12px !important; padding: 14px 14px !important; }
.dm-rv2__total *, .dm-sum2__total * { color: #0d0d0d !important; }
.dm-co2 .dm-free, .dm-cart2 .dm-free, [data-cartdrawer] .dm-free { padding: 0 !important; background: none !important; color: #2f7d32 !important; font-weight: 800; }
.dm-sum2__box .dm-sum2__total { background: #fff !important; }
/* Category banner: long names never clip (owner 2026-10-01) */
.dm-cb.dm-cb2 { display: block !important; height: auto !important; min-height: clamp(300px, 24vw, 360px); }
.dm-cb2 .dm-cb__copy { max-width: min(640px, 56%); overflow: visible !important; }
.dm-cb2 .dm-cb__title { font-size: clamp(34px, 4vw, 66px) !important; overflow: visible !important; white-space: normal; overflow-wrap: anywhere; }
.dm-cb2 .dm-cb__title span { white-space: normal; overflow: visible !important; text-overflow: clip; }
/* Outline word: one column, sized by its own length so it always fits the banner height */
.dm-cb2__word { top: 50% !important; bottom: auto; transform: translateY(-50%); white-space: nowrap; font-size: min(120px, calc(300px / (var(--n, 6) * .66))) !important; line-height: 1; max-height: 92%; }
@media (max-width: 900px) {
.dm-cb2 .dm-cb__copy { max-width: none; }
.dm-cb2 .dm-cb__title { font-size: clamp(30px, 9vw, 44px) !important; }
}
.dm-cb2 .dm-cb__script { right: calc(4% + 70px) !important; bottom: 34px !important; font-size: clamp(26px, 2vw, 36px) !important; white-space: nowrap; }
@media (max-width: 900px) { .dm-cb2 .dm-cb__script { right: 16px !important; bottom: 18px !important; font-size: 28px !important; } }
@media (max-width: 640px) { .dm-cb2 .dm-cb__script { display: none !important; } }
.dm-cb2 .dm-cb__script { display: none !important; }
/* ==========================================================================
Inner pages (privacy, terms, policies, story, contact...): theme header + readable prose
========================================================================== */
.dm-ph { position: relative; isolation: isolate; overflow: hidden; margin: 18px 0 clamp(26px, 3vw, 44px); padding: clamp(28px, 3.4vw, 54px) clamp(22px, 3.4vw, 56px); border-radius: 22px; background: radial-gradient(70% 140% at 80% 50%, #1c2016 0, #0b0c0b 65%); color: #fff; }
.dm-ph__slash { position: absolute; z-index: -1; right: 18%; top: 0; bottom: 0; width: 12%; background: linear-gradient(170deg, #c4ff2e 0, #8fd600 100%); clip-path: polygon(46% 0, 100% 0, 54% 100%, 0 100%); opacity: .9; }
.dm-ph__word { position: absolute; z-index: -1; right: 2%; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; white-space: nowrap; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: min(96px, calc(230px / (var(--n, 6) * .66))); line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(182, 250, 14, .4); }
.dm-ph__crumbs { font-size: 13px; color: #9a9a9a; }
.dm-ph__crumbs a { color: #cfcfcf; } .dm-ph__crumbs a:hover { color: #b6fa0e; }
html body .dm-ph .dm-page__title { max-width: 70%; margin: 12px 0 0 !important; font-family: "Kanit", var(--f-sans) !important; font-weight: 900; font-style: italic; font-size: clamp(32px, 4.4vw, 68px) !important; line-height: .95; text-transform: uppercase; color: #fff !important; overflow-wrap: anywhere; }
.dm-ph .dm-page__title::after { content: ""; display: block; width: 56px; height: 5px; margin-top: 16px; border-radius: 4px; background: #b6fa0e; }
.dm-ph__text { max-width: 60ch; margin: 14px 0 0; color: #cfcfcf; }
.dm-prose--page { max-width: 820px; margin: 0 auto clamp(40px, 5vw, 80px); font-size: 16.5px; line-height: 1.75; color: #2a2a2a; }
.dm-prose--page > * + * { margin-top: 1em; }
.dm-prose--page h2 { margin-top: 1.9em !important; font-family: "Kanit", var(--f-sans) !important; font-weight: 900; font-style: italic; font-size: clamp(22px, 2vw, 30px); text-transform: uppercase; color: #0d0d0d; }
.dm-prose--page h2::before { content: ""; display: block; width: 32px; height: 4px; margin-bottom: 10px; border-radius: 4px; background: #b6fa0e; }
.dm-prose--page ul, .dm-prose--page ol { padding-left: 1.3em; }
.dm-prose--page li + li { margin-top: .45em; }
.dm-prose--page li::marker { color: #5f9e00; font-weight: 800; }
.dm-prose--page a { color: #0d0d0d; text-decoration: underline; text-decoration-color: #b6fa0e; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dm-prose--page figure.wp-block-table { margin: 1.2em 0; overflow-x: auto; }
.dm-prose--page table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #ececea; border-radius: 14px; overflow: hidden; font-size: 15px; }
.dm-prose--page th { background: #0d0d0d; color: #b6fa0e; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.dm-prose--page th, .dm-prose--page td { padding: 12px 14px; text-align: center; border: 0 !important; }
.dm-prose--page tbody tr:nth-child(even) td { background: #f7f7f5; }
.dm-prose--page tbody td:first-child { font-family: "Kanit", var(--f-sans); font-style: italic; font-weight: 900; }
@media (max-width: 640px) {
.dm-ph { border-radius: 18px; }
html body .dm-ph .dm-page__title { max-width: 100%; font-size: clamp(30px, 9vw, 42px) !important; }
.dm-ph__word, .dm-ph__slash { opacity: .35; }
.dm-prose--page { font-size: 16px; }
.dm-prose--page th, .dm-prose--page td { padding: 10px 6px; }
}
.dm-ph__word { writing-mode: horizontal-tb !important; right: 3% !important; font-size: min(110px, calc(420px / (var(--n, 6) * .64))) !important; max-width: 46%; overflow: hidden; }
.dm-ph__slash { right: 34% !important; }
@media (max-width: 640px) { .dm-ph__word { display: none; } .dm-ph__slash { right: 6% !important; width: 18%; } }
.dm-ph__word { font-size: min(110px, calc(420px / (var(--n, 6) * .64)), calc((44vw - 40px) / (var(--n, 6) * .66))) !important; }
/* Owner 2026-10-01: compact page + category banners, smaller titles; the outline word never sets the height */
.dm-ph { margin: 14px 0 clamp(20px, 2.4vw, 34px); padding: clamp(18px, 2vw, 28px) clamp(20px, 3vw, 44px); border-radius: 18px; }
html body .dm-ph .dm-page__title { margin-top: 8px !important; font-size: clamp(24px, 2.6vw, 40px) !important; }
.dm-ph .dm-page__title::after { width: 44px; height: 4px; margin-top: 10px; }
.dm-ph__crumbs { font-size: 12.5px; }
.dm-ph__word { font-size: min(84px, calc(420px / (var(--n, 6) * .64)), calc((44vw - 40px) / (var(--n, 6) * .66))) !important; }
.dm-cb.dm-cb2 { min-height: clamp(220px, 17vw, 270px) !important; padding: clamp(20px, 2.2vw, 32px) clamp(22px, 3vw, 48px) !important; border-radius: 18px; }
.dm-cb2 .dm-cb__title { font-size: clamp(26px, 2.8vw, 44px) !important; }
.dm-cb2 .dm-cb__text { margin-top: 8px !important; font-size: 14.5px !important; }
.dm-cb2 .dm-cb__btn { margin-top: 14px !important; height: 44px !important; padding: 0 22px !important; font-size: 13px; }
.dm-cb2__kicker { margin-bottom: 6px !important; font-size: 12px !important; }
.dm-cb2__word { font-size: min(96px, calc(230px / (var(--n, 6) * .66))) !important; }
@media (max-width: 900px) {
.dm-cb.dm-cb2 { min-height: 0 !important; padding: 20px 18px 0 !important; }
.dm-cb2 .dm-cb__title { font-size: clamp(26px, 7.5vw, 34px) !important; }
.dm-cb2 .dm-cb__media { height: 220px !important; }
.dm-cb2__slash { height: 240px !important; }
}
@media (max-width: 640px) { html body .dm-ph .dm-page__title { font-size: clamp(24px, 7vw, 32px) !important; } }
.dm-cb2__word { font-size: min(70px, calc(200px / (var(--n, 6) * .8))) !important; }
/* Fit picker */
.dm-pdp .dm-chips--fit .dm-chip { min-width: 0; padding: 0 18px; }
.is-needfit .dm-chips--fit { animation: dm-shake .45s var(--ease); }
.is-needfit .dm-chips--fit .dm-chip:not(:disabled) { border-color: var(--sale); }