/*
 * DHLMS Theme - premium minimalism, light and dark.
 * Every colour is a token: the admin changes them in Admin > Themes > Colours (palette in config.json), the visitor switches
 * light / dark (html[data-theme]). Text and background tokens are chosen in pairs so text always stays readable on its background.
 */

/* ------------------------------------------------------------------ tokens */
:root {
    --dh-light-bg: #FFFFFF;
    --dh-light-surface: #F6F6F7;
    --dh-light-text: #0B0B0E;
    --dh-light-muted: #585B63;
    --dh-light-border: #E5E5E8;
    --dh-dark-bg: #0A0A0C;
    --dh-dark-surface: #141417;
    --dh-dark-text: #F4F4F5;
    --dh-dark-muted: #A3A3AD;
    --dh-dark-border: #27272C;
    --dh-accent: var(--base-color);
    --dh-on-accent: #FFFFFF;

    --dh-radius: 14px;
    --dh-radius-sm: 10px;
    --dh-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --dh-max: 1180px;
}
:root, html[data-theme="light"] {
    --dh-bg: var(--dh-light-bg);
    --dh-surface: var(--dh-light-surface);
    --dh-elevated: var(--dh-light-bg);
    --dh-text: var(--dh-light-text);
    --dh-muted: var(--dh-light-muted);
    --dh-border: var(--dh-light-border);
    --dh-shadow: 0 1px 2px color-mix(in srgb, var(--dh-text) 6%, transparent), 0 12px 32px color-mix(in srgb, var(--dh-text) 7%, transparent);
    color-scheme: light;
}
html[data-theme="dark"] {
    --dh-bg: var(--dh-dark-bg);
    --dh-surface: var(--dh-dark-surface);
    --dh-elevated: color-mix(in srgb, var(--dh-dark-surface) 95%, var(--dh-dark-text));
    --dh-text: var(--dh-dark-text);
    --dh-muted: var(--dh-dark-muted);
    --dh-border: var(--dh-dark-border);
    --dh-shadow: 0 1px 2px color-mix(in srgb, black 40%, transparent), 0 16px 40px color-mix(in srgb, black 45%, transparent);
    color-scheme: dark;
}
:root {
    /* derived: links and accents are mixed toward the text colour, so they stay readable in both modes */
    --dh-link: color-mix(in srgb, var(--dh-accent) 78%, var(--dh-text));
    --dh-accent-soft: color-mix(in srgb, var(--dh-accent) 12%, var(--dh-bg));
    --dh-accent-line: color-mix(in srgb, var(--dh-accent) 35%, var(--dh-border));
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.dh {
    background: var(--dh-bg);
    color: var(--dh-text);
    font-family: var(--dh-font);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    transition: background-color .25s ease, color .25s ease;
}
.dh h1, .dh h2, .dh h3, .dh h4, .dh h5, .dh h6 { color: var(--dh-text); font-family: var(--dh-font); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .5em; }
.dh p { color: var(--dh-muted); margin: 0 0 1em; }
.dh a { color: var(--dh-link); text-decoration: none; }
.dh a:hover { color: var(--dh-text); }
.dh img { max-width: 100%; }
.dh ::selection { background: var(--dh-accent); color: var(--dh-on-accent); }
.dh :focus-visible { outline: 2px solid var(--dh-accent); outline-offset: 2px; border-radius: 6px; }

.dh-container { margin: 0 auto; max-width: var(--dh-max); padding: 0 24px; width: 100%; }
.dh-section { padding: 96px 0; }
.dh-section--tight { padding: 64px 0; }
.dh-section--surface { background: var(--dh-surface); border-bottom: 1px solid var(--dh-border); border-top: 1px solid var(--dh-border); }
.dh-head { margin: 0 auto 56px; max-width: 680px; text-align: center; }
.dh-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.dh-head p { font-size: 1.075rem; }
.dh-eyebrow { color: var(--dh-link); display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .12em; margin-bottom: 14px; text-transform: uppercase; }
.dh-muted { color: var(--dh-muted) !important; }
@media (max-width: 767px) { .dh-section { padding: 64px 0; } .dh-head { margin-bottom: 40px; } }

/* ------------------------------------------------------------------ buttons */
.dh-btn {
    align-items: center; background: var(--dh-accent); border: 1px solid var(--dh-accent); border-radius: 999px; color: var(--dh-on-accent) !important;
    cursor: pointer; display: inline-flex; font-size: .95rem; font-weight: 600; gap: 8px; justify-content: center; line-height: 1;
    padding: 14px 24px; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; white-space: nowrap;
}
.dh-btn:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--dh-accent) 35%, transparent); transform: translateY(-1px); }
.dh-btn--ghost { background: transparent; border-color: var(--dh-border); color: var(--dh-text) !important; }
.dh-btn--ghost:hover { background: var(--dh-surface); box-shadow: none; }
.dh-btn--sm { font-size: .875rem; padding: 10px 16px; }
.dh-btn--block { width: 100%; }

/* ------------------------------------------------------------------ announcement + header */
.dh-announce { background: var(--dh-text); color: var(--dh-bg); font-size: .85rem; padding: 9px 0; text-align: center; }
.dh-announce a { color: var(--dh-bg); font-weight: 600; text-decoration: underline; }
.dh-header { backdrop-filter: saturate(180%) blur(14px); background: color-mix(in srgb, var(--dh-bg) 82%, transparent); border-bottom: 1px solid var(--dh-border); position: sticky; top: 0; z-index: 1000; }
.dh-header__row { align-items: center; display: flex; gap: 28px; height: 68px; }
.dh-logo img { display: block; max-height: 34px; width: auto; }
.dh-logo .dh-logo--dark { display: none; }
html[data-theme="dark"] .dh-logo .dh-logo--light { display: none; }
html[data-theme="dark"] .dh-logo .dh-logo--dark { display: block; }
.dh-nav { align-items: center; display: flex; flex: 1; gap: 4px; list-style: none; margin: 0; padding: 0; }
.dh-nav > li { position: relative; }
.dh-nav > li > a { border-radius: 8px; color: var(--dh-muted); display: block; font-size: .93rem; font-weight: 500; padding: 8px 12px; }
.dh-nav > li > a:hover, .dh-nav > li > a.is-active { color: var(--dh-text); }
.dh-nav .dh-drop { background: var(--dh-elevated); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); box-shadow: var(--dh-shadow); left: 0; list-style: none; min-width: 280px; opacity: 0; padding: 8px; pointer-events: none; position: absolute; top: calc(100% + 8px); transform: translateY(4px); transition: .18s ease; }
.dh-nav > li:hover .dh-drop, .dh-nav > li:focus-within .dh-drop { opacity: 1; pointer-events: auto; transform: none; }
.dh-drop a { border-radius: 10px; display: block; padding: 10px 12px; }
.dh-drop a:hover { background: var(--dh-surface); }
.dh-drop b { color: var(--dh-text); display: block; font-size: .92rem; font-weight: 600; }
.dh-drop small { color: var(--dh-muted); display: block; font-size: .8rem; }
.dh-actions { align-items: center; display: flex; gap: 10px; margin-left: auto; }
.dh-icon-btn { align-items: center; background: transparent; border: 1px solid var(--dh-border); border-radius: 999px; color: var(--dh-text); cursor: pointer; display: inline-flex; height: 38px; justify-content: center; width: 38px; }
.dh-icon-btn:hover { background: var(--dh-surface); }
.dh-theme-toggle .bi-sun { display: none; }
html[data-theme="dark"] .dh-theme-toggle .bi-sun { display: inline; }
html[data-theme="dark"] .dh-theme-toggle .bi-moon-stars { display: none; }
.dh-signin { color: var(--dh-text) !important; font-size: .93rem; font-weight: 500; padding: 8px 10px; }
.dh-burger { display: none; }
@media (max-width: 991px) {
    .dh-nav, .dh-actions .dh-signin, .dh-actions .dh-btn { display: none; }
    .dh-burger { display: inline-flex; }
}
.dh-mobile { background: var(--dh-bg); border-left: 1px solid var(--dh-border); bottom: 0; max-width: 360px; overflow-y: auto; padding: 20px 24px; position: fixed; right: 0; top: 0; transform: translateX(105%); transition: transform .25s ease; width: 86%; z-index: 1100; }
.dh-mobile.is-open { transform: none; }
.dh-mobile__shade { background: color-mix(in srgb, black 45%, transparent); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .25s; z-index: 1090; }
.dh-mobile.is-open + .dh-mobile__shade { opacity: 1; pointer-events: auto; }
.dh-mobile ul { list-style: none; margin: 18px 0; padding: 0; }
.dh-mobile li a { border-bottom: 1px solid var(--dh-border); color: var(--dh-text); display: block; font-weight: 500; padding: 12px 0; }
.dh-mobile li li a { color: var(--dh-muted); font-weight: 400; padding-left: 14px; }

/* ------------------------------------------------------------------ hero */
.dh-hero { overflow: hidden; padding: 96px 0 72px; position: relative; text-align: center; }
.dh-hero::before {
    background:
        radial-gradient(600px 300px at 50% -60px, color-mix(in srgb, var(--dh-accent) 22%, transparent), transparent 70%),
        linear-gradient(to right, color-mix(in srgb, var(--dh-text) 5%, transparent) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(to bottom, color-mix(in srgb, var(--dh-text) 5%, transparent) 1px, transparent 1px) 0 0 / 56px 56px;
    content: ""; inset: 0; mask-image: radial-gradient(ellipse at top, black 30%, transparent 75%); pointer-events: none; position: absolute;
}
.dh-hero > * { position: relative; }
.dh-pill { align-items: center; background: var(--dh-elevated); border: 1px solid var(--dh-border); border-radius: 999px; color: var(--dh-text); display: inline-flex; font-size: .85rem; font-weight: 500; gap: 8px; margin-bottom: 26px; padding: 6px 14px 6px 8px; }
.dh-pill::before { background: var(--dh-accent); border-radius: 999px; content: ""; height: 8px; margin-left: 4px; width: 8px; }
.dh-hero h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: -.035em; margin: 0 auto 22px; max-width: 920px; }
.dh-hero h1 span { background: linear-gradient(120deg, var(--dh-text), var(--dh-link)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dh .dh-hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 0 auto 34px; max-width: 640px; }
.dh-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dh .dh-hero__note { color: var(--dh-muted); font-size: .85rem; margin-top: 18px; }
.dh-hero__shot { margin: 64px auto 0; max-width: 1080px; }
.dh-frame { background: var(--dh-elevated); border: 1px solid var(--dh-border); border-radius: 18px; box-shadow: var(--dh-shadow); overflow: hidden; padding: 8px; }
.dh-frame img { border-radius: 12px; display: block; width: 100%; }
.dh-frame .dh-img--dark { display: none; }
html[data-theme="dark"] .dh-frame .dh-img--light.has-dark { display: none; }
html[data-theme="dark"] .dh-frame .dh-img--dark { display: block; }

/* ------------------------------------------------------------------ logos */
.dh-logos { padding: 40px 0 72px; text-align: center; }
.dh .dh-logos p { font-size: .9rem; margin-bottom: 26px; }
.dh-logos__row { align-items: center; display: flex; flex-wrap: wrap; gap: 28px 52px; justify-content: center; }
.dh-logos__row img { filter: grayscale(1); max-height: 30px; opacity: .65; transition: opacity .2s; }
html[data-theme="dark"] .dh-logos__row img { filter: grayscale(1) invert(1); }
.dh-logos__row img:hover { opacity: 1; }
.dh-logos__row span { color: var(--dh-muted); font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; }

/* ------------------------------------------------------------------ cards: products, features */
.dh-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) { .dh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .dh-grid { grid-template-columns: 1fr; } }
.dh-card { background: var(--dh-elevated); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); display: flex; flex-direction: column; padding: 28px; position: relative; transition: border-color .2s, transform .2s, box-shadow .2s; }
.dh-card:hover { border-color: var(--dh-accent-line); box-shadow: var(--dh-shadow); transform: translateY(-2px); }
.dh-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.dh-card p { font-size: .95rem; }
.dh-badge { background: var(--dh-accent-soft); border: 1px solid var(--dh-accent-line); border-radius: 999px; color: var(--dh-text); font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; position: absolute; right: 20px; text-transform: uppercase; top: 20px; }
.dh-card--popular { border-color: var(--dh-accent-line); box-shadow: 0 0 0 1px var(--dh-accent-line), var(--dh-shadow); }
.dh-product__cat { color: var(--dh-muted); font-size: .8rem; font-weight: 500; margin-bottom: 14px; }
.dh-price { align-items: baseline; display: flex; gap: 6px; margin: 18px 0 4px; }
.dh-price strong { color: var(--dh-text); font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.dh-price span { color: var(--dh-muted); font-size: .9rem; }
.dh-price__note { color: var(--dh-muted); font-size: .82rem; margin-bottom: 18px; min-height: 1.3em; }
.dh-product__list { border-top: 1px solid var(--dh-border); color: var(--dh-muted); font-size: .9rem; margin: 18px 0 0; padding-top: 18px; }
.dh-product__list ul { list-style: none; margin: 0; padding: 0; }
.dh-product__list li { padding: 4px 0 4px 26px; position: relative; }
.dh-product__list li::before { color: var(--dh-link); content: "\F26E"; font-family: "bootstrap-icons"; left: 0; position: absolute; }
.dh-card .dh-btn { margin-top: auto; }
.dh-feature__icon { align-items: center; background: var(--dh-accent-soft); border: 1px solid var(--dh-accent-line); border-radius: 12px; color: var(--dh-link); display: inline-flex; font-size: 1.25rem; height: 46px; justify-content: center; margin-bottom: 18px; width: 46px; }
.dh-center { margin-top: 44px; text-align: center; }

/* ------------------------------------------------------------------ showcase */
.dh-show { align-items: center; display: grid; gap: 64px; grid-template-columns: 1fr 1fr; padding: 40px 0; }
.dh-show + .dh-show { margin-top: 32px; }
.dh-show:nth-child(even) .dh-show__media { order: -1; }
.dh-show h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.dh-show ul { list-style: none; margin: 18px 0 26px; padding: 0; }
.dh-show li { color: var(--dh-text); padding: 6px 0 6px 30px; position: relative; }
.dh-show li::before { color: var(--dh-link); content: "\F26E"; font-family: "bootstrap-icons"; left: 0; position: absolute; }
.dh-show__media .dh-frame { aspect-ratio: 10 / 7.2; display: flex; }
.dh-show__media .dh-frame img { object-fit: cover; }
.dh-placeholder { align-items: center; background: linear-gradient(135deg, var(--dh-accent-soft), var(--dh-surface)); border-radius: 12px; color: var(--dh-link); display: flex; font-size: 3rem; height: 100%; justify-content: center; width: 100%; }
@media (max-width: 991px) { .dh-show { gap: 32px; grid-template-columns: 1fr; } .dh-show:nth-child(even) .dh-show__media { order: 0; } }

/* ------------------------------------------------------------------ stats, testimonials, faq, cta */
.dh-stats { display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--dh-border); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); overflow: hidden; }
.dh-stat { background: var(--dh-bg); padding: 32px 24px; text-align: center; }
.dh-stat strong { color: var(--dh-text); display: block; font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.dh-stat span { color: var(--dh-muted); font-size: .92rem; }
@media (max-width: 767px) { .dh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dh-quote p { color: var(--dh-text); font-size: 1.02rem; }
.dh-quote__who { align-items: center; display: flex; gap: 12px; margin-top: auto; padding-top: 16px; }
.dh-quote__who img, .dh-avatar { border-radius: 999px; height: 42px; object-fit: cover; width: 42px; }
.dh-avatar { align-items: center; background: var(--dh-accent-soft); color: var(--dh-text); display: inline-flex; font-weight: 600; justify-content: center; }
.dh-quote__who b { color: var(--dh-text); display: block; font-size: .92rem; }
.dh-quote__who small { color: var(--dh-muted); }
.dh-faq { margin: 0 auto; max-width: 780px; }
.dh-faq details { border-bottom: 1px solid var(--dh-border); padding: 4px 0; }
.dh-faq summary { align-items: center; color: var(--dh-text); cursor: pointer; display: flex; font-size: 1.05rem; font-weight: 600; justify-content: space-between; list-style: none; padding: 18px 0; }
.dh-faq summary::-webkit-details-marker { display: none; }
.dh-faq summary::after { color: var(--dh-muted); content: "\F64D"; font-family: "bootstrap-icons"; transition: transform .2s; }
.dh-faq details[open] summary::after { transform: rotate(45deg); }
.dh-faq details p { margin: 0 0 18px; }
.dh-cta { background: var(--dh-text); border-radius: 24px; color: var(--dh-bg); overflow: hidden; padding: 72px 32px; position: relative; text-align: center; }
.dh-cta::before { background: radial-gradient(500px 220px at 50% 0, color-mix(in srgb, var(--dh-accent) 45%, transparent), transparent 70%); content: ""; inset: 0; position: absolute; }
.dh-cta > * { position: relative; }
.dh .dh-cta h2 { color: var(--dh-bg); font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.dh .dh-cta p { color: color-mix(in srgb, var(--dh-bg) 72%, var(--dh-text)); font-size: 1.08rem; margin: 0 auto 30px; max-width: 560px; }
.dh-cta .dh-btn--ghost { border-color: color-mix(in srgb, var(--dh-bg) 30%, transparent); color: var(--dh-bg) !important; }
.dh-cta .dh-btn--ghost:hover { background: color-mix(in srgb, var(--dh-bg) 10%, transparent); }

/* ------------------------------------------------------------------ page heads, prose, contact, notice */
.dh-pagehead { border-bottom: 1px solid var(--dh-border); padding: 88px 0 56px; text-align: center; }
.dh-pagehead h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.03em; margin: 0 auto 14px; max-width: 820px; }
.dh-pagehead p { font-size: 1.12rem; margin: 0 auto; max-width: 640px; }
.dh-crumbs { color: var(--dh-muted); font-size: .85rem; margin-bottom: 16px; }
.dh-crumbs a { color: var(--dh-muted); }
.dh-prose { color: var(--dh-text); margin: 0 auto; max-width: 760px; }
.dh-prose h1, .dh-prose h2, .dh-prose h3 { margin-top: 1.6em; }
.dh-prose p, .dh-prose li { color: color-mix(in srgb, var(--dh-text) 82%, var(--dh-muted)); }
.dh-prose a { text-decoration: underline; }
.dh-contact { display: grid; gap: 40px; grid-template-columns: 1fr 1.2fr; }
@media (max-width: 991px) { .dh-contact { grid-template-columns: 1fr; } }
.dh-contact__item { align-items: flex-start; border-bottom: 1px solid var(--dh-border); display: flex; gap: 14px; padding: 18px 0; }
.dh-contact__item i { color: var(--dh-link); font-size: 1.2rem; }
.dh-contact__item b { color: var(--dh-text); display: block; }
.dh-field { margin-bottom: 16px; }
.dh-field label { color: var(--dh-text); display: block; font-size: .88rem; font-weight: 500; margin-bottom: 6px; }
.dh-input, .dh textarea.dh-input, .dh select.dh-input {
    background: var(--dh-bg); border: 1px solid var(--dh-border); border-radius: var(--dh-radius-sm); color: var(--dh-text); font: inherit; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; width: 100%;
}
.dh-input::placeholder { color: var(--dh-muted); }
.dh-input:focus { border-color: var(--dh-accent); box-shadow: 0 0 0 4px var(--dh-accent-soft); outline: none; }
.dh-notice { margin: 0 auto; max-width: 560px; padding: 120px 0; text-align: center; }
.dh-notice i { color: var(--dh-link); display: block; font-size: 2.6rem; margin-bottom: 16px; }

/* ------------------------------------------------------------------ store */
.dh-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; }
.dh-filter button { background: var(--dh-bg); border: 1px solid var(--dh-border); border-radius: 999px; color: var(--dh-muted); cursor: pointer; font: inherit; font-size: .9rem; font-weight: 500; padding: 8px 16px; }
.dh-filter button.is-on, .dh-filter button:hover { background: var(--dh-text); border-color: var(--dh-text); color: var(--dh-bg); }
.dh-cycle { background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: 999px; display: inline-flex; gap: 4px; margin: 0 auto 36px; max-width: 100%; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.dh-cycle::-webkit-scrollbar { display: none; }
.dh-cycle button { background: transparent; border: 0; border-radius: 999px; color: var(--dh-muted); cursor: pointer; flex: 0 0 auto; font: inherit; font-size: .88rem; font-weight: 500; padding: 8px 16px; white-space: nowrap; }
.dh-cycle button.is-on { background: var(--dh-elevated); box-shadow: var(--dh-shadow); color: var(--dh-text); }
.dh-empty { color: var(--dh-muted); padding: 48px 0; text-align: center; }

/* ------------------------------------------------------------------ footer */
/* careers: the open roles and one role */
.dh-jobs { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .dh-jobs { grid-template-columns: 1fr; } }
.dh .dh-job { background: var(--dh-elevated); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); color: var(--dh-text); display: flex; flex-direction: column; gap: 16px; padding: 26px; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.dh .dh-job:hover { border-color: var(--dh-accent-line); box-shadow: var(--dh-shadow); transform: translateY(-2px); }
.dh-job__head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.dh-job__head h3 { font-size: 1.15rem; margin: 0; }
.dh .dh-job__facts { color: var(--dh-muted); display: flex; flex-wrap: wrap; font-size: .9rem; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.dh-job__facts i { margin-right: 4px; }
.dh-job__more { color: var(--dh-link); font-size: .9rem; font-weight: 600; margin-top: auto; }
.dh-jobview { align-items: start; display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 991px) { .dh-jobview { grid-template-columns: 1fr; } }
.dh-jobview .dh-prose { margin: 0; }
.dh-jobview__side { background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); display: flex; flex-direction: column; gap: 18px; padding: 24px; position: sticky; top: 96px; }
.dh-jobview__side dl { display: grid; gap: 14px; margin: 0; }
.dh-jobview__side dt { color: var(--dh-muted); font-size: .78rem; font-weight: 500; letter-spacing: .02em; }
.dh-jobview__side dd { color: var(--dh-text); font-weight: 600; margin: 2px 0 0; }
.dh-jobview__share { align-items: center; color: var(--dh-muted); display: flex; font-size: .85rem; gap: 12px; }
.dh-jobview__share a { color: var(--dh-muted); font-size: 1.05rem; }
.dh-jobview__share a:hover, .dh-jobview__back:hover { color: var(--dh-text); }
.dh-jobview__back { color: var(--dh-muted); font-size: .88rem; }
.dh-footer { border-top: 1px solid var(--dh-border); padding: 72px 0 32px; }
.dh-footer__grid { display: grid; gap: 40px; grid-template-columns: 1.6fr repeat(3, 1fr); }
@media (max-width: 991px) { .dh-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .dh-footer__grid { grid-template-columns: 1fr; } }
.dh-footer h6 { color: var(--dh-text); font-size: .85rem; letter-spacing: .02em; margin-bottom: 14px; }
.dh-footer ul { list-style: none; margin: 0; padding: 0; }
.dh-footer li { padding: 5px 0; }
.dh-footer li a { color: var(--dh-muted); font-size: .92rem; }
.dh-footer li a:hover { color: var(--dh-text); }
.dh-footer__about p { font-size: .92rem; max-width: 340px; }
.dh-social { display: flex; gap: 8px; margin-top: 18px; }
.dh-social a { align-items: center; border: 1px solid var(--dh-border); border-radius: 999px; color: var(--dh-text); display: inline-flex; height: 36px; justify-content: center; width: 36px; }
.dh-social a:hover { background: var(--dh-surface); }
/* payment methods (logos keep a light chip in dark mode too, so dark brand marks stay readable) */
.dh-pay { align-items: center; border-top: 1px solid var(--dh-border); display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 48px; padding-top: 24px; }
.dh-pay > span { color: var(--dh-muted); font-size: .85rem; }
.dh .dh-pay__list { display: flex; flex-wrap: wrap; gap: 10px; }
.dh .dh-pay__list li { align-items: center; background: var(--dh-light-bg); border: 1px solid var(--dh-border); border-radius: 8px; display: flex; height: 38px; justify-content: center; padding: 6px 12px; }
.dh-pay__list img { display: block; max-height: 24px; max-width: 86px; object-fit: contain; }
.dh-pay + .dh-footer__bottom { margin-top: 24px; }
.dh-footer__bottom { align-items: center; border-top: 1px solid var(--dh-border); color: var(--dh-muted); display: flex; flex-wrap: wrap; font-size: .85rem; gap: 12px; justify-content: space-between; margin-top: 56px; padding-top: 24px; }
.dh-footer__bottom ul { display: flex; gap: 18px; }

/* ------------------------------------------------------------------ reveal on scroll (only when motion is welcome) */
@media (prefers-reduced-motion: no-preference) {
    .dh-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
    .dh-reveal.is-in { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ pages the theme takes from its parent (cart, product set-up ...):
   always light, and the parent's colour names point to this theme's tokens */
body.dh-legacy {
    --tg-theme-primary: var(--dh-accent);
    --tg-theme-primary-2: var(--dh-accent);
    --tg-theme-secondary: var(--dh-text);
    --tg-heading-color: var(--dh-light-text);
    --tg-body-color: var(--dh-light-muted);
    --tg-heading-font-family: var(--dh-font);
    --tg-body-font-family: var(--dh-font);
    --tg-border-2: var(--dh-light-border);
    --tg-color-gray-3: var(--dh-light-surface);
}
body.dh-legacy .dh-legacy__main { padding: 48px 0 80px; }
body.dh-legacy .tg-btn { border-radius: 999px; }

/* language / currency switchers of the modules (hook header.tools) */
.dh-tools { align-items: center; display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.dh-tools:empty { display: none; }
.dh-tools > li > a, .dh-tools > li > button, .dh-tools .dropdown-toggle { background: transparent; border: 0; border-radius: 8px; color: var(--dh-muted); font-size: .88rem; font-weight: 500; padding: 8px 10px; }
.dh-tools .dropdown-menu { background: var(--dh-elevated); border: 1px solid var(--dh-border); border-radius: var(--dh-radius-sm); box-shadow: var(--dh-shadow); }
.dh-tools .dropdown-menu a { color: var(--dh-text); }
@media (max-width: 991px) { .dh-tools { display: none; } }

/* product descriptions written for another theme (an icon block + a content block per line): one clean line each */
.dh-product__list li > .icon { display: none; }
.dh-product__list li > .content { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 4px; }
.dh-product__list li > .content svg { height: 13px; opacity: .55; width: 13px; }
/* long lists: the first lines, then "show all" */
.dh-product__list.is-clamped li:nth-child(n+7) { display: none; }
.dh-more { background: none; border: 0; color: var(--dh-link); cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; margin-top: 8px; padding: 0; }

/* ------------------------------------------------------------------ products page and product cards (one price per card) */
.dh-shop-head { border-bottom: 1px solid var(--dh-border); padding: 64px 0 40px; }
.dh-shop-head__row { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
.dh-shop-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); letter-spacing: -.03em; margin-bottom: 10px; }
.dh .dh-shop-head p { font-size: 1.05rem; margin: 0; max-width: 560px; }
.dh-shop-head__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.dh-shop-head__facts span { align-items: center; background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: 999px; color: var(--dh-text); display: inline-flex; font-size: .82rem; font-weight: 500; gap: 6px; padding: 6px 12px; }
.dh-shop-head__facts i { color: var(--dh-link); }
.dh-shop { padding: 40px 0 96px; }
.dh-shop__bar { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-bottom: 28px; }
.dh-tabs { border-bottom: 1px solid var(--dh-border); display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dh-tabs::-webkit-scrollbar { display: none; }
.dh-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--dh-muted); cursor: pointer; flex: 0 0 auto; font: inherit; font-size: .93rem; font-weight: 500; margin-bottom: -1px; padding: 10px 14px; white-space: nowrap; }
.dh-tabs button small { background: var(--dh-surface); border-radius: 999px; color: var(--dh-muted); font-size: .72rem; margin-left: 4px; padding: 1px 7px; }
.dh-tabs button:hover { color: var(--dh-text); }
.dh-tabs button.is-on { border-bottom-color: var(--dh-text); color: var(--dh-text); }
.dh-search { align-items: center; background: var(--dh-bg); border: 1px solid var(--dh-border); border-radius: 999px; display: flex; gap: 8px; padding: 0 14px; width: min(280px, 100%); }
.dh-search i { color: var(--dh-muted); }
.dh-search input { background: transparent; border: 0; color: var(--dh-text); font: inherit; font-size: .92rem; outline: none; padding: 10px 0; width: 100%; }
.dh-search:focus-within { border-color: var(--dh-accent); box-shadow: 0 0 0 4px var(--dh-accent-soft); }
.dh-pgrid { align-items: stretch; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.dh-pcard { background: var(--dh-elevated); border: 1px solid var(--dh-border); border-radius: 18px; display: flex; flex-direction: column; padding: 26px; position: relative; transition: border-color .2s, box-shadow .2s, transform .2s; }
.dh-pcard:hover { border-color: var(--dh-accent-line); box-shadow: var(--dh-shadow); transform: translateY(-2px); }
.dh-pcard.is-popular { border-color: var(--dh-accent-line); box-shadow: 0 0 0 1px var(--dh-accent-line); }
.dh-pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; min-height: 24px; }
.dh-tag { align-items: center; background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: 999px; color: var(--dh-muted); display: inline-flex; font-size: .74rem; font-weight: 600; gap: 4px; letter-spacing: .02em; padding: 3px 10px; }
.dh-tag--accent { background: var(--dh-accent-soft); border-color: var(--dh-accent-line); color: var(--dh-text); }
.dh-tag--save, .dh-tag--free { background: var(--dh-text); border-color: var(--dh-text); color: var(--dh-bg); }
.dh .dh-pcard__name { font-size: 1.3rem; margin-bottom: 6px; }
.dh .dh-pcard__sub { font-size: .93rem; margin: 0; }
.dh-pcard__price { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 22px; }
.dh-pcard__price s { color: var(--dh-muted); font-size: 1rem; }
.dh-pcard__price strong { color: var(--dh-text); font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.dh-pcard__price span { color: var(--dh-muted); font-size: .9rem; }
.dh-pcard__note { color: var(--dh-muted); font-size: .82rem; margin: 6px 0 20px; min-height: 1.3em; }
.dh-pcard .dh-btn { margin-top: auto; }
.dh-pcard .dh-product__list { margin-top: 20px; }

/* billing period dropdown of the product lists (theme-styled: no browser list, no hard borders when open) */
.dh-shop__tools { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.dh-period { align-items: center; background: var(--dh-bg); border: 1px solid var(--dh-border); border-radius: 999px; display: inline-flex; gap: 6px; padding: 0 6px 0 14px; position: relative; }
.dh-period__label { color: var(--dh-muted); font-size: .85rem; }
.dh-period__btn { align-items: center; background: transparent; border: 0; border-radius: 999px; color: var(--dh-text); cursor: pointer; display: inline-flex; font: inherit; font-size: .92rem; gap: 8px; padding: 9px 10px; }
.dh-period__btn b { font-weight: 600; }
.dh-period__btn i { color: var(--dh-muted); font-size: .72rem; transition: transform .15s; }
.dh-period__btn[aria-expanded="true"] i { transform: rotate(180deg); }
.dh .dh-period__btn:focus, .dh .dh-period__btn:focus-visible, .dh .dh-period__menu:focus { outline: none; }
.dh-period:focus-within { border-color: var(--dh-accent-line); }
.dh-period__menu { background: var(--dh-elevated); border: 0; border-radius: 14px; box-shadow: 0 1px 2px color-mix(in srgb, var(--dh-text) 6%, transparent), 0 18px 44px color-mix(in srgb, var(--dh-text) 16%, transparent);
    list-style: none; margin: 0; max-height: 320px; min-width: 100%; overflow-y: auto; padding: 6px; position: absolute; right: 0; scrollbar-width: thin; top: calc(100% + 8px); width: max-content; z-index: 30; }
html[data-theme="dark"] .dh-period__menu { box-shadow: 0 0 0 1px color-mix(in srgb, var(--dh-text) 8%, transparent), 0 18px 44px color-mix(in srgb, black 55%, transparent); }
.dh-period__menu li { align-items: center; border-radius: 9px; color: var(--dh-text); cursor: pointer; display: flex; font-size: .92rem; gap: 18px; justify-content: space-between; padding: 8px 12px; white-space: nowrap; }
.dh-period__menu li i { color: var(--dh-link); opacity: 0; }
.dh-period__menu li:hover, .dh-period__menu li.is-active { background: var(--dh-surface); }
.dh-period__menu li[aria-selected="true"] { font-weight: 600; }
.dh-period__menu li[aria-selected="true"] i { opacity: 1; }
.dh-pcard__price .dh-tag--save { align-self: center; }
.dh-shop__tools { flex-wrap: nowrap; margin-left: auto; }
.dh-shop__tools .dh-search { width: 240px; }
@media (max-width: 640px) { .dh-shop__tools { flex-wrap: wrap; width: 100%; } .dh-shop__tools .dh-search, .dh-shop__tools .dh-period { width: 100%; } }

/* ------------------------------------------------------------------ contact page */
.dh-ct-head { background: radial-gradient(60% 120% at 50% 0%, var(--dh-accent-soft), transparent 70%); }
.dh-ct-eyebrow { align-items: center; background: var(--dh-elevated); border: 1px solid var(--dh-accent-line); border-radius: 999px; color: var(--dh-link); display: inline-flex; font-size: .82rem; font-weight: 600; gap: 7px; margin: 18px 0 16px; padding: 6px 14px; }
.dh-ct { padding-top: 72px; }
.dh-ct-grid { align-items: start; display: grid; gap: 48px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); }
@media (max-width: 991px) { .dh-ct-grid { gap: 36px; grid-template-columns: 1fr; } .dh-ct-card { order: -1; } }

.dh-ct-intro h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 10px; }
.dh-ct-intro p { font-size: 1rem; margin-bottom: 28px; }
.dh-ct-methods { display: grid; gap: 12px; }
.dh-ct-method { align-items: center; background: var(--dh-elevated); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); color: var(--dh-text) !important; display: flex; gap: 14px; padding: 16px 18px; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.dh-ct-method:hover { border-color: var(--dh-accent-line); box-shadow: var(--dh-shadow); transform: translateY(-2px); }
.dh-ct-method__icon { align-items: center; background: var(--dh-accent-soft); border-radius: 12px; color: var(--dh-link); display: inline-flex; flex-shrink: 0; font-size: 1.15rem; height: 46px; justify-content: center; width: 46px; }
.dh-ct-method__text { display: flex; flex-direction: column; min-width: 0; }
.dh-ct-method__text small { color: var(--dh-muted); font-size: .78rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.dh-ct-method__text b { font-weight: 600; overflow-wrap: anywhere; }
.dh-ct-method__go { color: var(--dh-muted); margin-left: auto; transition: color .2s, transform .2s; }
a.dh-ct-method:hover .dh-ct-method__go { color: var(--dh-link); transform: translate(2px, -2px); }
.dh-ct-account { background: var(--dh-surface); border: 1px dashed var(--dh-border); border-radius: var(--dh-radius); display: flex; gap: 14px; margin-top: 24px; padding: 18px; }
.dh-ct-account > i { color: var(--dh-link); font-size: 1.4rem; line-height: 1.2; }
.dh-ct-account b { color: var(--dh-text); display: block; }
.dh-ct-account span { color: var(--dh-muted); display: block; font-size: .92rem; margin: 2px 0 6px; }
.dh-ct-account a { font-size: .92rem; font-weight: 600; }

.dh-ct-card { background: var(--dh-elevated); border: 1px solid var(--dh-border); border-radius: calc(var(--dh-radius) + 6px); box-shadow: var(--dh-shadow); padding: 36px; position: relative; }
.dh-ct-card::before { background: linear-gradient(90deg, transparent, var(--dh-accent), transparent); border-radius: 2px; content: ""; height: 2px; left: 15%; position: absolute; right: 15%; top: -1px; }
@media (max-width: 575px) { .dh-ct-card { padding: 24px 18px; } }
.dh-ct-card__head h3 { font-size: 1.4rem; margin-bottom: 4px; }
.dh-ct-card__head p { font-size: .92rem; margin-bottom: 22px; }
.dh-ct-row { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 575px) { .dh-ct-row { grid-template-columns: 1fr; } }
.dh-ct-field { margin-bottom: 18px; }
.dh-ct-field label { align-items: baseline; color: var(--dh-text); display: flex; font-size: .88rem; font-weight: 550; justify-content: space-between; margin-bottom: 7px; }
.dh-ct-control { position: relative; }
.dh-ct-control > i { color: var(--dh-muted); left: 14px; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); transition: color .15s; }
.dh-ct-control .dh-input { padding-left: 42px; }
.dh-ct-control:focus-within > i { color: var(--dh-link); }
.dh-ct-field textarea.dh-input { min-height: 150px; resize: vertical; }
.dh-ct-field .dh-input[readonly] { background: var(--dh-surface); color: var(--dh-muted); }
.dh-ct-count { color: var(--dh-muted); font-size: .78rem; font-weight: 400; }
.dh-ct-error { color: var(--bs-danger, #dc3545); display: block; font-size: .82rem; min-height: 0; padding-top: 5px; }
.dh-ct-error:empty { display: none; }
.dh-ct-field.is-invalid .dh-input { border-color: var(--bs-danger, #dc3545); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-danger, #dc3545) 12%, transparent); }
.dh-ct-field.is-invalid .dh-ct-control > i { color: var(--bs-danger, #dc3545); }
.dh-ct-alert { background: color-mix(in srgb, var(--bs-danger, #dc3545) 9%, var(--dh-elevated)); border: 1px solid color-mix(in srgb, var(--bs-danger, #dc3545) 30%, transparent); border-radius: var(--dh-radius-sm); color: var(--dh-text); font-size: .9rem; margin-bottom: 18px; padding: 12px 14px; }
.dh-ct-submit { align-items: center; display: flex; flex-wrap: wrap; gap: 14px 20px; margin-top: 8px; }
.dh-ct-privacy { color: var(--dh-muted); font-size: .84rem; }
.dh-ct-privacy i { color: var(--dh-link); }
.dh-ct-submit .dh-btn { min-width: 190px; }
.dh-ct-submit .dh-btn:disabled { cursor: progress; opacity: .8; transform: none; }
.dh-ct-spin { animation: dh-ct-spin .7s linear infinite; border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; display: none; height: 16px; width: 16px; }
.dh-btn.is-busy .dh-ct-spin { display: inline-block; }
.dh-btn.is-busy .bi-send { display: none; }
@keyframes dh-ct-spin { to { transform: rotate(360deg); } }

.dh-ct-done { padding: 28px 8px; text-align: center; }
.dh-ct-done__icon { align-items: center; animation: dh-ct-pop .45s cubic-bezier(.2, 1.4, .4, 1); background: var(--dh-accent); border-radius: 50%; box-shadow: 0 0 0 10px var(--dh-accent-soft); color: var(--dh-on-accent); display: inline-flex; font-size: 2rem; height: 72px; justify-content: center; margin-bottom: 22px; width: 72px; }
.dh-ct-done h3 { font-size: 1.5rem; }
.dh-ct-done p { margin: 0 auto 22px; max-width: 420px; }
@keyframes dh-ct-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dh-ct-done__icon, .dh-ct-spin { animation: none; } }

/* ------------------------------------------------------------------ store: product categories */
.dh-catgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dh-catcard { background: var(--dh-elevated); border: 1px solid var(--dh-border); border-radius: 18px; color: var(--dh-text) !important; display: flex; flex-direction: column; gap: 16px; overflow: hidden; padding: 24px; position: relative; transition: border-color .2s, box-shadow .2s, transform .2s; }
.dh-catcard::after { background: radial-gradient(120% 80% at 100% 0%, var(--dh-accent-soft), transparent 60%); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .25s; }
.dh-catcard:hover { border-color: var(--dh-accent-line); box-shadow: var(--dh-shadow); transform: translateY(-3px); }
.dh-catcard:hover::after { opacity: 1; }
.dh-catcard > * { position: relative; z-index: 1; }
.dh-catcard__media { align-items: center; background: var(--dh-accent-soft); border-radius: 14px; color: var(--dh-link); display: inline-flex; font-size: 1.5rem; height: 56px; justify-content: center; overflow: hidden; width: 56px; }
.dh-catcard__media img { height: 100%; object-fit: contain; padding: 6px; width: 100%; }
.dh-catcard__body { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.dh-catcard__name { font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
.dh-catcard__text { color: var(--dh-muted); font-size: .94rem; }
.dh-catcard__packs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dh-catcard__foot { align-items: center; border-top: 1px solid var(--dh-border); color: var(--dh-muted); display: flex; font-size: .88rem; justify-content: space-between; padding-top: 14px; }
.dh-catcard__go { color: var(--dh-link); font-weight: 600; }
.dh-catcard__go i { transition: transform .2s; }
.dh-catcard:hover .dh-catcard__go i { transform: translateX(3px); }
.dh-back { color: var(--dh-link); font-weight: 600; }