/* =====================================================================
   Layout preset "dkhoni" (Admin → Storefront → General → Layout preset)
   Warm beige / espresso palette, centred-logo header, cinematic homepage.
   Scoped to body.preset-dkhoni so the other presets are untouched.
   ===================================================================== */

body.preset-dkhoni {
    --dk-bg: #f9f5f2;
    --dk-bg-soft: #f3ece6;
    --dk-surface: #ffffff;
    --dk-text: #2e2727;
    --dk-muted: #776d69;
    --dk-line: #e6dcd4;
    --dk-header: #d5bdad;
    --dk-header-text: #2e2727;
    --dk-announce-bg: #2e2727;
    --dk-announce-text: #ffffff;
    --dk-btn-bg: #2e2727;
    --dk-btn-text: #ffffff;
    --dk-btn-hover: #000000;
    --dk-dark: #2e2727;
    --dk-sale: #c8102e;
    --dk-badge: #e2462b;
    --dk-badge-text: #ffffff;
    --dk-stars: #d9b04a;
    --dk-footer-bg: #2e2727;
    --dk-footer-text: #ffffff;
    --dk-accent: #c9a46a;
    --dk-gold-1: #f7e7c1;
    --dk-gold-2: var(--dk-accent);
    --dk-gold-3: #8a6a3d;
    /* Smart Design style gradients, built from the admin colours (Settings → Colours) */
    --dk-btn-grad: linear-gradient(135deg, color-mix(in srgb, var(--dk-btn-bg) 60%, #ff7a95) 0%, var(--dk-btn-bg) 55%, color-mix(in srgb, var(--dk-btn-bg) 62%, #000) 100%);
    --dk-badge-grad: linear-gradient(135deg, color-mix(in srgb, var(--dk-badge) 60%, #ff7a95), color-mix(in srgb, var(--dk-badge) 70%, #000));
    --dk-announce-grad: linear-gradient(100deg, var(--dk-announce-bg) 0%, color-mix(in srgb, var(--dk-announce-bg) 55%, var(--dk-accent)) 50%, var(--dk-announce-bg) 100%);
    --dk-glow: color-mix(in srgb, var(--dk-btn-bg) 55%, transparent);
    --dk-radius: 18px;
    --dk-radius-lg: 28px;
    --dk-font: "Figtree", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --dk-font-ar: "IBM Plex Sans Arabic", "Figtree", system-ui, sans-serif;
    --dk-font-logo: "Aref Ruqaa", "IBM Plex Sans Arabic", serif;
    --dk-font-serif: "Cormorant Garamond", Georgia, serif;
    --dk-header-h: 72px;
    --dk-announce-h: 34px;

    background: var(--dk-bg);
    color: var(--dk-text);
    font-family: var(--dk-font);
}

body.preset-dkhoni.rtl {
    --dk-font: var(--dk-font-ar);
}

body.preset-dkhoni .wrapper {
    background: var(--dk-bg);
}

body.preset-dkhoni h1,
body.preset-dkhoni h2,
body.preset-dkhoni h3,
body.preset-dkhoni h4,
body.preset-dkhoni h5,
body.preset-dkhoni h6 {
    font-family: var(--dk-font);
    color: inherit;
}

body.preset-dkhoni [x-cloak] {
    display: none !important;
}

.dk-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
}

.dk-center {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.dk-section-title {
    margin: 0 0 32px;
    text-align: center;
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: var(--dk-text);
}

/* Buttons --------------------------------------------------------------- */
.dk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 30px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
    cursor: pointer;
}

.rtl .dk-btn {
    letter-spacing: 0;
    font-size: 14px;
}

.dk-btn-dark {
    background: var(--dk-btn-grad), var(--dk-btn-bg);
    color: var(--dk-btn-text);
}

.dk-btn-dark:hover {
    background: var(--dk-btn-hover);
    color: var(--dk-btn-text);
}

.dk-btn-light {
    background: #fff;
    color: var(--dk-text);
}

.dk-btn-light:hover {
    background: var(--dk-btn-grad), var(--dk-btn-bg);
    color: var(--dk-btn-text);
}

/* Reveal on scroll (preset-dkhoni.js adds .is-visible) ------------------- */
.dk-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--dk-delay, 0ms);
}

.dk-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .dk-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =====================================================================
   Announcement bar
   ===================================================================== */
.dk-announcement {
    position: relative;
    z-index: 60;
    height: var(--dk-announce-h);
    overflow: hidden;
    background: var(--dk-announce-grad), var(--dk-announce-bg);
    color: var(--dk-announce-text);
    font-size: 12.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.dk-announcement-track {
    display: flex;
    width: max-content;
    animation: dk-marquee 38s linear infinite;
}

.rtl .dk-announcement-track {
    animation-name: dk-marquee-rtl;
}

.dk-announcement:hover .dk-announcement-track {
    animation-play-state: paused;
}

.dk-announcement-group {
    display: flex;
    flex-shrink: 0;
}

.dk-announcement-item {
    padding: 0 70px;
    white-space: nowrap;
}

@keyframes dk-marquee {
    to { transform: translateX(-50%); }
}

@keyframes dk-marquee-rtl {
    to { transform: translateX(50%); }
}

/* =====================================================================
   Header
   ===================================================================== */
.dk-header {
    position: sticky;
    top: 0;
    z-index: 55;
    height: var(--dk-header-h);
    background: var(--dk-header);
    color: var(--dk-header-text);
    transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}

.dk-header.is-scrolled {
    box-shadow: 0 6px 24px rgba(46, 39, 39, .08);
}

.dk-header.is-hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

.dk-header.is-hidden .dk-retailer {
    opacity: 0;
    pointer-events: none;
}

.dk-header {
    transition: background-color .35s ease, color .35s ease, box-shadow .35s ease, transform .4s ease;
}

.dk-retailer {
    transition: opacity .3s ease;
}

/* On the homepage the header overlays the hero until the page scrolls. */
body.dk-home .dk-header {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--dk-announce-offset, var(--dk-announce-h));
    background: transparent;
    color: #fff;
}

body.dk-home .dk-header.is-scrolled,
body.dk-home .dk-header.is-solid {
    top: 0;
    background: var(--dk-header);
    color: var(--dk-header-text);
}

body.dk-home.dk-no-announcement .dk-header {
    top: 0;
}

.dk-header-inner {
    height: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.dk-header-side {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dk-header-end {
    justify-content: flex-end;
}

.dk-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color .2s ease;
}

.dk-icon-btn:hover {
    background: rgba(255, 255, 255, .18);
    color: inherit;
}

.dk-cart-count {
    position: absolute;
    top: 3px;
    inset-inline-end: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--dk-header-text);
    color: var(--dk-header);
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
}

body.dk-home .dk-header:not(.is-scrolled):not(.is-solid) .dk-cart-count {
    background: #fff;
    color: var(--dk-dark);
}

.dk-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-inline-start: 10px;
    overflow: hidden;
}

.dk-nav-link {
    position: relative;
    color: inherit;
    font-size: 15.5px;
    white-space: nowrap;
    text-decoration: none;
}

.dk-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .3s ease;
}

.dk-nav-link:hover {
    color: inherit;
}

.dk-nav-link:hover::after {
    transform: scaleX(1);
}

.dk-search-toggle {
    display: none;
}

.dk-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}

.dk-logo:hover {
    color: inherit;
}

.dk-logo img {
    max-height: 48px;
    max-width: 220px;
}

.dk-logo-text {
    font-family: var(--dk-font-logo);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Search panel */
.dk-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 18px 24px 26px;
    background: var(--dk-header);
    box-shadow: 0 18px 40px rgba(46, 39, 39, .12);
}

.dk-search-panel-inner {
    max-width: 760px;
    margin: 0 auto;
    color: var(--dk-text);
}

.dk-search-panel .header-search-wrap-parent,
.dk-search-panel .header-search-wrap {
    width: 100%;
    max-width: none;
}

.dk-search-panel .header-search-wrap-overlay {
    display: none;
}

/* Wholesale pill (floats under the header on the right) */
.dk-retailer {
    position: absolute;
    top: calc(100% + 14px);
    inset-inline-end: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 14px;
    border-radius: 999px;
    background: rgba(46, 39, 39, .92);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    backdrop-filter: blur(6px);
}

.rtl .dk-retailer {
    padding: 6px 14px 6px 6px;
    letter-spacing: 0;
}

.dk-retailer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.dk-retailer-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5fd47d;
    box-shadow: 0 0 0 3px rgba(95, 212, 125, .25);
}

.dk-retailer-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--dk-bg);
    color: var(--dk-text);
    white-space: nowrap;
    text-decoration: none;
}

.dk-retailer-link:hover {
    background: #fff;
    color: var(--dk-text);
}

/* Old header pieces never render with this preset */
body.preset-dkhoni .top-nav-wrap,
body.preset-dkhoni .navigation-wrap {
    display: none !important;
}

@media (max-width: 991px) {
    body.preset-dkhoni {
        --dk-header-h: 60px;
    }

    .dk-nav,
    .dk-search-desktop,
    .dk-lang-btn {
        display: none;
    }

    .dk-search-toggle {
        display: inline-flex;
    }

    .dk-header-inner {
        padding: 0 12px;
        gap: 6px;
    }

    .dk-logo-text {
        font-size: 28px;
    }

    .dk-retailer {
        inset-inline-end: 12px;
        font-size: 9.5px;
    }

    .dk-retailer-badge {
        display: none;
    }
}

/* =====================================================================
   Page
   ===================================================================== */
.dk-page > section {
    position: relative;
}

.dk-page > section + section {
    margin-top: clamp(56px, 7vw, 110px);
}

/* breadcrumb strip of inner pages */
body.preset-dkhoni .breadcrumb {
    background: transparent;
}

/* =====================================================================
   Hero
   ===================================================================== */
.dk-hero {
    position: relative;
    height: 100vh;
    min-height: 560px;
    max-height: 1100px;
    overflow: hidden;
    background: #120d0c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.dk-hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.dk-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, .18) 70%, rgba(0, 0, 0, .5) 100%);
}

.dk-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dk-hero-video-mobile {
    display: none;
}

@media (max-width: 767px) {
    .dk-hero-video-desktop {
        display: none;
    }

    .dk-hero-video-mobile {
        display: block;
    }
}

.dk-hero-content {
    text-align: center;
    padding: 0 20px;
    animation: dk-hero-in 1.6s cubic-bezier(.2, .7, .2, 1) both .2s;
}

@keyframes dk-hero-in {
    from { opacity: 0; filter: blur(6px); }
    to { opacity: 1; filter: none; }
}

.dk-hero-logo {
    width: min(440px, 70vw);
    height: auto;
}

.dk-hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.dk-hero-title-ar {
    font-family: var(--dk-font-logo);
    font-size: clamp(76px, 13vw, 190px);
    font-weight: 700;
    line-height: 1.1;
    background: linear-gradient(170deg, var(--dk-gold-1) 10%, var(--dk-gold-2) 45%, #fff3d6 60%, var(--dk-gold-3) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .45));
}

/* subtitle under the hero logo (Storefront → Hero → subtitle): one plain white line, smaller than the logo */
.dk-hero-title-latin {
    margin-top: 10px;
    font-family: var(--dk-font-serif);
    font-size: clamp(15px, 1.6vw, 22px);
    font-weight: 500;
    letter-spacing: .22em;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.rtl .dk-hero-title-latin {
    font-family: "Alexandria", var(--dk-font-ar);
    letter-spacing: 0;
}

.dk-hero-caption {
    position: absolute;
    bottom: 64px;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.dk-hero-down {
    position: absolute;
    bottom: 18px;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    animation: dk-bounce 2.2s ease-in-out infinite;
}

@keyframes dk-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(7px); }
}

/* =====================================================================
   Intro verse
   ===================================================================== */
.dk-intro {
    padding-top: clamp(40px, 6vw, 80px);
    text-align: center;
}

.dk-page > .dk-hero + .dk-intro {
    margin-top: 0;
}

.dk-intro-verse p {
    margin: 0 0 6px;
    font-family: var(--dk-font-ar);
    font-size: clamp(18px, 1.7vw, 22px);
    color: var(--dk-muted);
}

.dk-intro-title {
    max-width: 900px;
    margin: 22px auto 0;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .3px;
}

/* =====================================================================
   Reels
   ===================================================================== */
.dk-reels-viewport {
    position: relative;
}

.dk-reels-track {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 10px calc(50% - 180px) 20px;
}

.dk-reels-track::-webkit-scrollbar {
    display: none;
}

.dk-reel {
    /* every reel has the same layout box, so switching never shifts the row; the smaller, cropped
       side reels are drawn with transform + clip-path only (GPU, no layout) */
    flex: 0 0 360px;
    min-width: 0;
    scroll-snap-align: center;
    transition: opacity .5s ease;
    opacity: .75;
}

.dk-reel.is-active {
    opacity: 1;
}

.dk-reel-video {
    position: relative;
    aspect-ratio: 9 / 16;
    max-height: 640px;
    overflow: hidden;
    border-radius: var(--dk-radius);
    background: #1a1413;
    transform: scale(.87);
    transform-origin: 50% 35%;
    clip-path: inset(9.5% 0 round var(--dk-radius));
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), clip-path .5s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
}

.dk-reel.is-active .dk-reel-video {
    transform: none;
    clip-path: inset(0 round var(--dk-radius));
}

.dk-reel-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dk-reel-sound {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    cursor: pointer;
}

.dk-reel.is-active .dk-reel-sound {
    display: inline-flex;
}

.dk-reel-sound .dk-sound-on,
.dk-reel.is-unmuted .dk-reel-sound .dk-sound-off {
    display: none;
}

.dk-reel.is-unmuted .dk-reel-sound .dk-sound-on {
    display: block;
}

.dk-reel-product {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 14px;
    background: var(--dk-surface);
    box-shadow: 0 8px 24px rgba(46, 39, 39, .07);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}

.dk-reel.is-active .dk-reel-product {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.dk-reel-product-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--dk-bg-soft);
}

.dk-reel-product-info {
    flex: 1;
    min-width: 0;
}

.dk-reel-product-name {
    display: block;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dk-text);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dk-reel-product .dk-card-price {
    justify-content: flex-start;
    margin-top: 2px;
    font-size: 13px;
}

.dk-reel-product-cart {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--dk-line);
    border-radius: 10px;
    background: transparent;
    color: var(--dk-text);
    cursor: pointer;
}

.dk-reel-product-cart:hover {
    background: var(--dk-btn-grad), var(--dk-btn-bg);
    border-color: var(--dk-btn-bg);
    color: var(--dk-btn-text);
}

.dk-arrow {
    position: absolute;
    top: 42%;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--dk-text);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    cursor: pointer;
}

.dk-arrow-prev { left: 18px; }
.dk-arrow-next { right: 18px; }

.rtl .dk-arrow svg { transform: scaleX(-1); }
.rtl .dk-arrow-prev { left: auto; right: 18px; }
.rtl .dk-arrow-next { right: auto; left: 18px; }

@media (max-width: 767px) {
    .dk-reels-track {
        gap: 12px;
        padding-inline: calc(50% - 115px);
    }

    .dk-reel { flex-basis: 200px; }
    .dk-reel.is-active { flex-basis: 230px; }
    .dk-arrow { display: none; }
}

/* =====================================================================
   Celebrity cards
   ===================================================================== */
.dk-celebs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.dk-celeb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 4.6;
    overflow: hidden;
    border-radius: var(--dk-radius);
    color: #ececec;
    text-decoration: none;
}

.dk-celeb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.dk-celeb:hover img {
    transform: scale(1.05);
}

.dk-celeb-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55) 100%);
}

.dk-celeb-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.dk-celeb-name {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 500;
    letter-spacing: -.5px;
}

.dk-celeb .dk-btn {
    min-height: 40px;
    padding: 0 24px;
    font-size: 12px;
}

@media (max-width: 767px) {
    .dk-celebs-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 -24px;
        padding: 0 24px;
    }

    .dk-celeb {
        scroll-snap-align: center;
    }
}

/* =====================================================================
   Category chips
   ===================================================================== */
.dk-page > .dk-celebs + .dk-chips {
    margin-top: 36px;
}

.dk-chips {
    background: var(--dk-bg-soft);
}

.dk-chips-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 22px 24px;
}

.dk-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--dk-line);
    border-radius: 999px;
    background: var(--dk-surface);
    color: var(--dk-text);
    font-size: 13.5px;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.dk-chip i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dk-gold-2);
}

.dk-chip:hover {
    background: var(--dk-btn-grad), var(--dk-btn-bg);
    border-color: var(--dk-btn-bg);
    color: var(--dk-btn-text);
}

/* =====================================================================
   Product cards
   ===================================================================== */
.dk-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 22px;
}

@media (max-width: 991px) {
    .dk-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .dk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 12px;
    }
}

.dk-grid > *,
.dk-card {
    min-width: 0;
}

.dk-card {
    position: relative;
    height: 100%;
}

.dk-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--dk-radius);
    background: transparent;
}

.dk-card-image {
    display: block;
    width: 100%;
    height: 100%;
}

.dk-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.dk-card:hover .dk-card-image img {
    transform: scale(1.04);
}

.dk-card-soldout {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--dk-sale);
    color: var(--dk-badge-text);
    font-size: 12px;
    font-weight: 600;
}

.dk-card-wishlist {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--dk-text);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease, transform .3s ease, color .2s ease;
    cursor: pointer;
}

.dk-card:hover .dk-card-wishlist,
.dk-card-wishlist.is-active {
    opacity: 1;
    transform: none;
}

.dk-card-wishlist.is-active {
    color: var(--dk-sale);
}

.dk-card-atc {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--dk-btn-grad), var(--dk-btn-bg);
    color: var(--dk-btn-text);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
    cursor: pointer;
}

.rtl .dk-card-atc {
    letter-spacing: 0;
    font-size: 13.5px;
}

.dk-card:hover .dk-card-atc {
    opacity: 1;
    transform: none;
}

.dk-card-atc:hover {
    background: var(--dk-btn-hover);
    color: var(--dk-btn-text);
}

.dk-card-atc.is-loading,
.dk-reel-product-cart.is-loading {
    opacity: .6;
    pointer-events: none;
}

/* Touch screens / phones: like the reference shop the "Add to cart" button is an outlined pill under the
   card (the media wrapper dissolves so the button can move below the name and price). */
@media (hover: none), (max-width: 767px) {
    .dk-card {
        display: flex;
        flex-direction: column;
    }

    .dk-card-media {
        display: contents;
    }

    .dk-card-image {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: var(--dk-radius);
    }

    .dk-card-wishlist {
        opacity: 1;
        transform: none;
    }

    .dk-card-body {
        flex: 1;
    }

    .dk-card-atc {
        position: static;
        order: 3;
        margin-top: 14px;
        min-height: 40px;
        opacity: 1;
        transform: none;
        border: 1px solid var(--dk-line);
        background: var(--dk-surface);
        color: var(--dk-text);
        font-size: 11px;
        letter-spacing: 2.5px;
    }

    .dk-card-atc:hover,
    .dk-card-atc:active {
        background: var(--dk-btn-grad), var(--dk-btn-bg);
        border-color: var(--dk-btn-bg);
        color: var(--dk-btn-text);
    }
}

.dk-card-body {
    padding-top: 14px;
    text-align: center;
}

.dk-card-name {
    display: block;
    color: var(--dk-text);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
}

.dk-card-name:hover {
    color: var(--dk-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dk-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 500;
}

.dk-price-old {
    color: var(--dk-muted);
    text-decoration: line-through;
    font-weight: 400;
}

.dk-price-now.is-sale {
    color: var(--dk-sale);
}

.dk-price-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--dk-badge-grad), var(--dk-badge);
    color: var(--dk-badge-text);
    font-size: 11px;
    font-weight: 600;
    direction: ltr;
}

.dk-card-rating {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--dk-muted);
}

.dk-stars {
    position: relative;
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 1px;
}

.dk-stars::before {
    content: "\2606\2606\2606\2606\2606";
    color: var(--dk-stars);
}

.dk-stars::after {
    content: "\2605\2605\2605\2605\2605";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--rating, 0%);
    overflow: hidden;
    color: var(--dk-stars);
}

/* Slider card (bestsellers): left aligned with a brand line */
.dk-card-slider .dk-card-body {
    text-align: start;
}

.dk-card-slider .dk-card-price {
    justify-content: flex-start;
}

.dk-card-slider .dk-card-media {
    aspect-ratio: 1 / 1.1;
}

.dk-card-brand {
    display: block;
    margin-bottom: 4px;
    color: var(--dk-muted);
    font-size: 11.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* =====================================================================
   Slider (bestsellers)
   ===================================================================== */
.dk-slider-track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
    cursor: grab;
}

.dk-slider-track::-webkit-scrollbar {
    display: none;
}

.dk-slider-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.dk-slider-item {
    flex: 0 0 calc((100% - 22px * 3.5) / 4.5);
    scroll-snap-align: start;
}

@media (max-width: 991px) {
    .dk-slider-item { flex-basis: calc((100% - 22px * 2.3) / 2.6); }
}

@media (max-width: 575px) {
    .dk-slider-item { flex-basis: 66%; }
}

.dk-slider-progress {
    position: relative;
    height: 2px;
    margin-top: 28px;
    background: var(--dk-line);
    border-radius: 2px;
    overflow: hidden;
}

.dk-slider-progress span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 25%;
    background: var(--dk-text);
    border-radius: 2px;
    transition: transform .15s linear;
}

.rtl .dk-slider-progress span {
    left: auto;
    right: 0;
}

/* =====================================================================
   Fragrance explorer
   ===================================================================== */
.dk-frag {
    height: calc(100vh * (var(--dk-frag-steps, 3) + .6));
    background: var(--dk-bg-soft);
}

.dk-frag-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 680px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dk-frag-frame {
    position: relative;
    width: calc(100% - 52px);
    max-width: 1380px;
    height: 91vh;
    min-height: 640px;
    max-height: 900px;
    overflow: hidden;
    border-radius: var(--dk-radius-lg);
    background: #181210;
    color: #fff;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .17);
}

.dk-frag-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 60%, var(--end) 0%, var(--start) 75%);
    opacity: 0;
    transition: opacity .9s ease;
}

.dk-frag-frame[data-layer="0"] .dk-frag-bg[data-bg="0"],
.dk-frag-frame[data-layer="1"] .dk-frag-bg[data-bg="1"],
.dk-frag-frame[data-layer="2"] .dk-frag-bg[data-bg="2"] {
    opacity: 1;
}

.dk-frag-selector {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px 16px;
    padding: 18px 22px 16px;
    background: linear-gradient(rgba(38, 29, 25, .94), rgba(21, 15, 13, .91));
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.dk-frag-eyebrow {
    grid-column: 1 / 3;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

.dk-frag-eyebrow i {
    width: 22px;
    height: 1px;
    background: currentColor;
}

.dk-frag-arrows {
    grid-row: 1;
    grid-column: 3;
    display: flex;
    gap: 8px;
}

.dk-frag-arrows button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.rtl .dk-frag-arrows button {
    transform: scaleX(-1);
}

.dk-frag-tabs {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.dk-frag-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 200px;
    padding: 7px 14px 7px 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .067), rgba(255, 255, 255, .024));
    color: rgba(255, 255, 255, .85);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: start;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease;
}

.rtl .dk-frag-tab {
    letter-spacing: 0;
    padding: 7px 8px 7px 14px;
}

.dk-frag-tab img {
    width: 30px;
    height: 36px;
    object-fit: contain;
}

.dk-frag-tab span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.dk-frag-tab.is-active {
    border-color: rgba(255, 255, 255, .45);
    background: linear-gradient(135deg, rgba(255, 255, 255, .27), rgba(255, 255, 255, .12));
    color: #fff;
}

.dk-frag-perfume {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    padding: 150px 40px 34px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s;
}

.dk-frag-perfume.is-active {
    opacity: 1;
    visibility: visible;
}

.dk-frag-intro {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.dk-frag-kicker {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.dk-frag-name {
    margin: 14px 0 16px;
    font-size: clamp(30px, 3.4vw, 50px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -1px;
    color: #fff;
}

.dk-frag-text {
    max-width: 300px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

.dk-frag-hint {
    margin-top: auto;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.dk-frag-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dk-frag-bottle {
    position: relative;
    z-index: 2;
    max-height: 60%;
    max-width: 46%;
    object-fit: contain;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
}

.dk-frag-notes-visual {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dk-frag-note-img {
    position: absolute;
    width: 30%;
    max-width: 170px;
    aspect-ratio: 1;
    object-fit: contain;
    opacity: 0;
    transform: scale(.6) rotate(-8deg);
    transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35));
}

.dk-pos-1 { top: 6%; left: 6%; }
.dk-pos-2 { top: 4%; right: 6%; }
.dk-pos-3 { bottom: 6%; left: 8%; }
.dk-pos-4 { bottom: 4%; right: 8%; }
.dk-pos-5 { top: 40%; left: -2%; width: 22%; }
.dk-pos-6 { top: 42%; right: -2%; width: 22%; }

.dk-frag-frame[data-layer="0"] [data-visual="0"] .dk-frag-note-img,
.dk-frag-frame[data-layer="1"] [data-visual="1"] .dk-frag-note-img,
.dk-frag-frame[data-layer="2"] [data-visual="2"] .dk-frag-note-img {
    opacity: 1;
    transform: none;
}

.dk-frag-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-inline-start: 34px;
    border-inline-start: 1px solid rgba(255, 255, 255, .14);
}

.dk-frag-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, .6);
}

.dk-frag-progress-bar {
    position: relative;
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, .15);
}

.dk-frag-progress-bar::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc((var(--dk-layer, 0) + 1) / 3 * 100%);
    background: #fff;
    transition: width .6s ease;
}

.dk-frag-nav {
    display: flex;
    gap: 8px;
    margin: 16px 0 34px;
}

.dk-frag-nav button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.dk-frag-nav small {
    font-size: 9.5px;
    opacity: .7;
}

.dk-frag-frame[data-layer="0"] .dk-frag-nav [data-dk-frag-layer="0"],
.dk-frag-frame[data-layer="1"] .dk-frag-nav [data-dk-frag-layer="1"],
.dk-frag-frame[data-layer="2"] .dk-frag-nav [data-dk-frag-layer="2"] {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.dk-frag-copy {
    position: absolute;
    top: 120px;
    inset-inline: 34px 0;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
}

.dk-frag-frame[data-layer="0"] [data-copy="0"],
.dk-frag-frame[data-layer="1"] [data-copy="1"],
.dk-frag-frame[data-layer="2"] [data-copy="2"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.dk-frag-ghost {
    position: absolute;
    top: -40px;
    inset-inline-end: -10px;
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, .05);
    text-transform: uppercase;
    pointer-events: none;
}

.dk-frag-layer-type {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}

.dk-frag-layer-type b {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    font-size: 11px;
    letter-spacing: 0;
}

.dk-frag-layer-title {
    margin: 18px 0 18px;
    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1px;
    color: #fff;
}

.dk-frag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.dk-frag-chips li {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
}

.dk-frag-layer-text {
    max-width: 320px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .75);
}

.dk-frag-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
}

.dk-frag-cta:hover {
    color: var(--dk-gold-1);
}

.rtl .dk-frag-kicker,
.rtl .dk-frag-layer-type,
.rtl .dk-frag-chips li,
.rtl .dk-frag-cta,
.rtl .dk-frag-nav button,
.rtl .dk-frag-eyebrow {
    letter-spacing: 0;
}

@media (max-width: 991px) {
    .dk-frag {
        height: calc(100vh * (var(--dk-frag-steps, 3) + .4));
    }

    .dk-frag-frame {
        width: calc(100% - 20px);
        height: 92vh;
        min-height: 600px;
        border-radius: 20px;
    }

    .dk-frag-perfume {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        padding: 128px 18px 18px;
        gap: 6px;
    }

    .dk-frag-text,
    .dk-frag-hint,
    .dk-frag-ghost {
        display: none;
    }

    .dk-frag-name {
        margin: 6px 0 0;
        font-size: 26px;
    }

    .dk-frag-bottle {
        max-height: 70%;
    }

    .dk-frag-panel {
        padding: 0;
        border: 0;
        min-height: 230px;
    }

    .dk-frag-nav {
        margin: 10px 0 0;
    }

    .dk-frag-copy {
        top: 84px;
        inset-inline: 0;
    }

    .dk-frag-layer-title {
        margin: 10px 0;
        font-size: 26px;
    }

    .dk-frag-layer-text {
        display: none;
    }

    .dk-frag-tab span {
        display: none;
    }

    .dk-frag-tab {
        padding: 6px;
    }
}

/* =====================================================================
   Before / after
   ===================================================================== */
.dk-ba-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(28px, 5vw, 80px);
}

.dk-ba-compare {
    position: relative;
    aspect-ratio: 1 / 1.05;
    overflow: hidden;
    border-radius: var(--dk-radius);
    user-select: none;
}

.dk-ba-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dk-ba-before-wrap {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.dk-ba-handle {
    position: absolute;
    top: 50%;
    left: var(--pos);
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--dk-text);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
    pointer-events: none;
}

.dk-ba-handle::before {
    content: "";
    position: absolute;
    top: -2000px;
    bottom: -2000px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, .85);
    z-index: -1;
}

.dk-ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

.dk-ba-text {
    text-align: center;
    padding: 0 6%;
}

.dk-ba-text h3 {
    margin: 0 0 14px;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 500;
}

.dk-ba-text p {
    max-width: 440px;
    margin: 0 auto 26px;
    color: var(--dk-muted);
    font-size: 15px;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .dk-ba-row {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Story (pinned headline, drifting bottles)
   ===================================================================== */
.dk-story {
    height: 260vh;
}

.dk-story-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dk-story-copy {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    padding: 0 24px;
    text-align: center;
}

.dk-story-copy h2 {
    margin: 0 0 20px;
    font-size: clamp(38px, 6vw, 86px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -2px;
}

.rtl .dk-story-copy h2 {
    letter-spacing: 0;
    line-height: 1.3;
}

.dk-story-copy p {
    max-width: 620px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.65;
    color: var(--dk-muted);
}

.dk-story-bottle {
    position: absolute;
    z-index: 3;
    width: clamp(170px, 21vw, 330px);
    height: auto;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 30px 40px rgba(46, 39, 39, .25));
}

.dk-story-bottle-1 {
    left: 8%;
    top: 0;
    transform: translateY(calc(-60vh + var(--p) * 160vh)) rotate(calc(-25deg + var(--p) * 50deg));
}

.dk-story-bottle-2 {
    right: 10%;
    top: 0;
    transform: translateY(calc(110vh - var(--p) * 170vh)) rotate(calc(20deg - var(--p) * 45deg));
}

.dk-story-down {
    position: absolute;
    bottom: 34px;
    left: 50%;
    margin-left: -11px;
    color: var(--dk-text);
    animation: dk-bounce 2.2s ease-in-out infinite;
}

@media (max-width: 767px) {
    .dk-story {
        height: 200vh;
    }

    .dk-story-bottle {
        width: 120px;
    }
}

/* =====================================================================
   Gallery strip
   ===================================================================== */
.dk-gallery {
    overflow: hidden;
}

.dk-gallery-track {
    display: flex;
    gap: 46px;
    width: max-content;
    animation: dk-marquee calc(var(--dk-gallery-count, 12) * 4s) linear infinite;
}

.rtl .dk-gallery-track {
    animation-name: dk-marquee-rtl;
}

.dk-gallery:hover .dk-gallery-track {
    animation-play-state: paused;
}

.dk-gallery-item {
    flex: 0 0 auto;
    display: block;
    width: 168px;
    height: 168px;
    overflow: hidden;
    border-radius: 6px;
}

.dk-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.dk-gallery-item:hover img {
    transform: scale(1.06);
}

@media (max-width: 767px) {
    .dk-gallery-track { gap: 18px; }
    .dk-gallery-item { width: 120px; height: 120px; }
}

/* =====================================================================
   Features
   ===================================================================== */
.dk-features {
    padding-bottom: clamp(50px, 6vw, 90px);
}

.dk-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.dk-feature {
    text-align: center;
}

.dk-feature-icon {
    display: inline-flex;
    margin-bottom: 14px;
    color: var(--dk-text);
}

.dk-feature h3 {
    margin: 0 0 8px;
    font-size: 15.5px;
    font-weight: 600;
}

.dk-feature p {
    max-width: 240px;
    margin: 0 auto;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--dk-muted);
}

@media (max-width: 767px) {
    .dk-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 16px;
    }
}

/* =====================================================================
   Footer
   ===================================================================== */
.dk-footer {
    margin-top: clamp(40px, 5vw, 70px);
    padding: 56px 0 30px;
    background: var(--dk-footer-bg);
    color: color-mix(in srgb, var(--dk-footer-text) 86%, transparent);
}

.dk-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* black at the bottom, fading up into the footer colour (Settings → Colours) */
    background: linear-gradient(0deg, #000 0%, color-mix(in srgb, var(--dk-footer-bg) 45%, #000) 30%, var(--dk-footer-bg) 75%);
}

/* Footer "perfume mist": glowing particles rising like a spray of perfume, pushed away by the mouse.
   The canvas is added by preset-dkhoni.js; colours come from the admin tokens. */
.dk-footer-mist {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dk-footer > .dk-container {
    position: relative;
    z-index: 1;
}

/* thin gold line on top */
.dk-footer::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dk-gold-3) 20%, var(--dk-gold-1) 50%, var(--dk-gold-3) 80%, transparent);
    pointer-events: none;
}

body.dk-home .dk-footer {
    margin-top: 0;
}

.dk-footer a {
    color: color-mix(in srgb, var(--dk-footer-text) 86%, transparent);
    text-decoration: none;
}

.dk-footer a:hover {
    color: var(--dk-footer-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dk-footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.35fr;
    gap: 40px;
}

.dk-footer-col h4 {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dk-footer-text);
}

.dk-footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dk-footer-col li + li {
    margin-top: 9px;
}

.dk-footer-col li a {
    font-size: 14px;
}

.dk-footer-about-text {
    font-size: 14px;
    line-height: 1.65;
}

.dk-footer-about-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.dk-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px 30px;
    margin-top: 56px;
}

.dk-footer-locale {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dk-footer-text);
    font-size: 13px;
    cursor: pointer;
}

.dk-footer-locale .fi {
    width: 18px;
    height: 13px;
    border-radius: 2px;
}

.dk-footer-social {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dk-footer-social a {
    display: inline-flex;
    color: var(--dk-footer-text);
}

.dk-footer-social a:hover {
    opacity: .75;
    text-decoration: none;
}

.dk-footer-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.rtl .dk-footer-payments {
    margin: 0 auto 0 0;
}

.dk-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 28px;
    padding: 0 8px;
    border-radius: 5px;
    background: #fff;
    color: #1b1b1b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2px;
    direction: ltr;
}

.dk-pay-ideal { color: #cc0066; }
.dk-pay-visa { color: #1a1f71; font-style: italic; font-size: 12px; }
.dk-pay-mastercard { color: #eb001b; }
.dk-pay-paypal { color: #003087; }
.dk-pay-klarna { background: #ffb3c7; color: #17120f; }
.dk-pay-applepay { background: #000; color: #fff; }
.dk-pay-bancontact { color: #005498; }

.dk-footer-payments-image img {
    max-height: 30px;
}

.dk-footer-copyright {
    margin: 28px 0 0;
    text-align: center;
    font-size: 13px;
    color: color-mix(in srgb, var(--dk-footer-text) 60%, transparent);
}

.dk-footer-credit {
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    color: color-mix(in srgb, var(--dk-footer-text) 50%, transparent);
}

.dk-footer-credit a {
    color: var(--dk-gold-1) !important;
    font-weight: 600;
}

.dk-footer-credit a:hover {
    color: var(--dk-footer-text) !important;
}

.dk-footer-copyright a {
    color: inherit !important;
}

.dk-footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 56px auto 0;
    color: var(--dk-footer-text) !important;
    text-decoration: none !important;
}

.dk-footer-logo .dk-logo-text {
    font-size: clamp(64px, 8vw, 110px);
    font-weight: 400;
}

.dk-footer-logo .dk-logo-latin {
    font-family: var(--dk-font-serif);
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 500;
    letter-spacing: .14em;
}

.dk-footer-logo img {
    max-width: 260px;
}

@media (max-width: 991px) {
    .dk-footer-cols {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .dk-footer-cols {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .dk-footer-payments {
        margin: 0;
    }
}

/* =====================================================================
   Inner pages: soften the base theme to the dkhoni palette
   ===================================================================== */
body.preset-dkhoni .btn-primary,
body.preset-dkhoni .btn-add-to-cart,
body.preset-dkhoni .btn-checkout,
body.preset-dkhoni .btn-buy-now {
    background: var(--dk-btn-grad), var(--dk-btn-bg) !important;
    border-color: var(--dk-btn-bg) !important;
    color: var(--dk-btn-text) !important;
}

body.preset-dkhoni .btn-primary:hover,
body.preset-dkhoni .btn-add-to-cart:hover {
    background: var(--dk-btn-hover) !important;
    border-color: var(--dk-btn-hover) !important;
}

body.preset-dkhoni .product-card,
body.preset-dkhoni .product-details-wrap,
body.preset-dkhoni .product-list-wrap {
    background: transparent;
}

body.preset-dkhoni .product-card .product-image,
body.preset-dkhoni .product-card-top {
    border-radius: var(--dk-radius);
}

body.preset-dkhoni .special-price,
body.preset-dkhoni .product-price .special-price {
    color: var(--dk-sale) !important;
}

/* Logos (Storefront → Logo): the header logo on the solid header, the footer/light logo while the
   header floats transparent over the hero video. */
.dk-logo-img {
    max-height: 48px;
    max-width: 220px;
    object-fit: contain;
}

.dk-logo-light {
    display: none;
}

/* Homepage: until the hero logo has travelled into the header ("docked", preset-dkhoni.js) the header
   shows no logo of its own; once docked the hero logo hides and the header logo takes over. */
body.dk-home:not(.dk-logo-docked) .dk-header:not(.is-solid) .dk-logo {
    visibility: hidden;
}

body.dk-logo-docked .dk-hero .dk-hero-logo,
body.dk-logo-docked .dk-hero .dk-hero-title-ar {
    visibility: hidden;
}

.dk-hero .dk-hero-logo,
.dk-hero .dk-hero-title-ar {
    position: relative;
    z-index: 2;
    transform-origin: center center;
    will-change: transform;
}

.dk-hero-logo {
    display: block;
    width: min(440px, 70vw);
    max-height: 46vh;
    height: auto;
    object-fit: contain;
}

.dk-feature-icon i {
    font-size: 36px;
    line-height: 1;
}

/* Inner pages: the classic product cards / product page use the Dkhoni badge + price colours
   (Settings → Colours → Dkhoni layout) instead of the base theme's green sale badge. */
body.preset-dkhoni .product-card .badge-success,
body.preset-dkhoni .product-details-wrap .badge-success,
body.preset-dkhoni .landscape-product-card .badge-success {
    background: var(--dk-badge-grad), var(--dk-badge) !important;
    color: var(--dk-badge-text) !important;
}


/* =====================================================================
   Shop / category / search page
   ===================================================================== */
.dk-shop {
    padding-bottom: clamp(40px, 6vw, 80px);
}

.dk-shop-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 106px;
    padding: 26px 20px;
    background: linear-gradient(90deg, var(--dk-btn-bg) 0%, var(--dk-header) 58%, var(--dk-header) 100%);
    text-align: center;
}

.rtl .dk-shop-hero {
    background: linear-gradient(270deg, var(--dk-btn-bg) 0%, var(--dk-header) 58%, var(--dk-header) 100%);
}

.dk-shop-title {
    margin: 0;
    color: var(--dk-text);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 500;
    letter-spacing: -.5px;
}

.dk-shop-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 26px 0 22px;
    font-size: 14px;
}

.dk-shop-count {
    color: var(--dk-text);
}

.dk-shop-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--dk-muted);
    font-weight: 400;
    cursor: pointer;
}

.dk-shop-sort select {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 22px 6px 2px;
    border: 0;
    background: transparent;
    color: var(--dk-text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.rtl .dk-shop-sort select {
    padding: 6px 2px 6px 22px;
}

.dk-shop-sort svg {
    position: absolute;
    inset-inline-end: 4px;
    pointer-events: none;
    color: var(--dk-text);
}

.dk-shop-results {
    min-height: 300px;
    transition: opacity .2s ease;
}

.dk-shop-results.is-loading {
    opacity: .55;
    pointer-events: none;
}

.dk-card-skeleton span,
.dk-card-skeleton i {
    display: block;
    border-radius: var(--dk-radius);
    background: linear-gradient(90deg, var(--dk-bg-soft) 25%, color-mix(in srgb, var(--dk-bg-soft) 50%, #fff) 50%, var(--dk-bg-soft) 75%);
    background-size: 200% 100%;
    animation: dk-shimmer 1.3s linear infinite;
}

.dk-card-skeleton span {
    aspect-ratio: 1 / 1;
}

.dk-card-skeleton i {
    width: 70%;
    height: 12px;
    margin: 14px auto 0;
    border-radius: 6px;
}

.dk-card-skeleton i + i {
    width: 40%;
    margin-top: 8px;
}

@keyframes dk-shimmer {
    to { background-position: -200% 0; }
}

.dk-shop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--dk-muted);
    text-align: center;
}

.dk-shop-empty h2 {
    margin: 0;
    color: var(--dk-text);
    font-size: 20px;
    font-weight: 500;
}

.dk-shop-pagination {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

.dk-shop .dk-card-brand {
    text-align: center;
}

@media (max-width: 767px) {
    .dk-shop-hero {
        min-height: 82px;
    }

    .dk-shop-bar {
        flex-direction: column;
        gap: 14px;
        margin: 18px 0;
    }

    .dk-shop-sort {
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
        border: 1px solid var(--dk-line);
        border-radius: 8px;
        background: var(--dk-surface);
        font-size: 15px;
    }
}

/* =====================================================================
   Mobile app bar (Home · Categories · Search · Cart · Account)
   ===================================================================== */
.dk-app-bar {
    display: none;
}

@media (max-width: 991px) {
    body.dk-has-app-bar {
        --dk-app-bar-h: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-bottom: var(--dk-app-bar-h);
    }

    .dk-app-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 58;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: var(--dk-app-bar-h);
        padding: 6px 6px env(safe-area-inset-bottom, 0px);
        border-top: 1px solid color-mix(in srgb, var(--dk-line) 70%, transparent);
        background: color-mix(in srgb, var(--dk-surface) 88%, transparent);
        backdrop-filter: saturate(160%) blur(16px);
        -webkit-backdrop-filter: saturate(160%) blur(16px);
        box-shadow: 0 -8px 28px rgba(46, 39, 39, .07);
    }

    .dk-app-bar-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 0;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: var(--dk-muted);
        font: inherit;
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.1;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .2s ease, transform .15s ease;
    }

    .dk-app-bar-item:hover,
    .dk-app-bar-item:focus {
        color: var(--dk-text);
        text-decoration: none;
    }

    .dk-app-bar-item:active {
        transform: scale(.92);
    }

    .dk-app-bar-item.is-active {
        color: var(--dk-text);
    }

    .dk-app-bar-item.is-active::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        width: 22px;
        height: 3px;
        margin-left: -11px;
        border-radius: 0 0 3px 3px;
        background: var(--dk-btn-grad), var(--dk-btn-bg);
    }

    .dk-app-bar-item.is-active svg {
        stroke-width: 1.9;
    }

    .dk-app-bar-icon {
        position: relative;
        display: inline-flex;
    }

    .dk-app-bar-badge {
        position: absolute;
        top: -5px;
        inset-inline-end: -9px;
        box-sizing: content-box;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border: 2px solid var(--dk-surface);
        border-radius: 999px;
        background: var(--dk-btn-grad), var(--dk-btn-bg);
        color: var(--dk-btn-text);
        font-size: 9.5px;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }

    /* Floating bits sit above the bar instead of under it */
    body.dk-has-app-bar .whatsapp-icon-container,
    body.dk-has-app-bar .scroll-to-top {
        bottom: calc(var(--dk-app-bar-h) + 14px) !important;
    }

    /* the stock bar slides in with translateY(-200px) from bottom:-200px; with the bottom pinned
       to the app bar that slide left it floating mid-screen */
    body.dk-has-app-bar .cookie-bar-wrap {
        bottom: var(--dk-app-bar-h) !important;
        transform: translateY(30px);
    }

    body.dk-has-app-bar .cookie-bar-wrap.show {
        transform: translateY(0);
    }

    /* The bar has Account: the header keeps menu · search · logo · cart */
    body.dk-has-app-bar .dk-header-end a[href*="login"],
    body.dk-has-app-bar .dk-header-end a[href*="account"] {
        display: none;
    }
}


/* Shop tools: filter button + sort; the standard filter panel as a side drawer on every screen size */
.dk-shop-tools {
    display: flex;
    align-items: center;
    gap: 22px;
}

.dk-shop-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--dk-line);
    border-radius: 999px;
    background: var(--dk-surface);
    color: var(--dk-text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.dk-shop-filter-btn:hover {
    border-color: var(--dk-text);
}

.dk-filter-drawer .filter-section-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: min(360px, 88vw);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--dk-surface);
    box-shadow: 0 0 40px rgba(46, 39, 39, .18);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility .35s;
}

.rtl .dk-filter-drawer .filter-section-wrap {
    transform: translateX(105%);
}

.dk-filter-drawer .filter-section-wrap.active {
    transform: none;
    visibility: visible;
}

.dk-filter-drawer .filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--dk-line);
}

.dk-filter-drawer .filter-section-header .section-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 18px;
    font-weight: 500;
}

.dk-filter-drawer .filter-section-header .section-title::after {
    display: none;
}

.dk-filter-drawer .filter-section-header svg {
    cursor: pointer;
}

.dk-filter-drawer .filter-section-inner {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px 40px;
}

.dk-filter-drawer .filter-section h6 {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
}

.dk-filter-drawer .noUi-connect {
    background: var(--dk-btn-grad), var(--dk-btn-bg);
}

@media (max-width: 767px) {
    .dk-shop-tools {
        width: 100%;
        gap: 10px;
    }

    .dk-shop-filter-btn {
        flex-shrink: 0;
        padding: 10px 14px;
        border-radius: 8px;
    }

    .dk-shop-sort {
        flex: 1;
        width: auto;
    }
}

/* Sort control: one line, the select takes the remaining width and never pushes the page wider */
.dk-shop-sort {
    min-width: 0;
}

.dk-shop-sort > span {
    white-space: nowrap;
}

.dk-shop-sort select {
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .dk-shop-sort {
        justify-content: space-between;
    }

    .dk-shop-sort select {
        flex: 1;
    }
}

/* The base theme forces 16px on every button on small screens (iOS zoom guard); the app bar labels keep
   their own size so the button item (Search) matches the link items. */
@media (max-width: 991px) {
    .dk-app-bar .dk-app-bar-item {
        font-size: 10.5px !important;
    }
}

/* Search panel (header search icon + app bar Search): always the full search field with suggestions,
   also on phones (the shop's own search component would show only its mini icon there). */
.dk-search-panel .header-search-sm,
.dk-search-panel .header-search-sm-form {
    display: none !important;
}

.dk-search-panel .header-search-lg {
    display: flex !important;
}

.dk-search-panel .search-input {
    font-size: 16px;
}

@media (max-width: 767px) {
    .dk-search-panel {
        padding: 12px 12px 16px;
    }

    .dk-search-panel .header-search-right .custom-dropdown {
        display: none !important;
    }
}


/* =====================================================================
   All categories (also the Categories tab of the mobile app bar)
   ===================================================================== */
.dk-cats {
    padding-top: 30px;
}

.dk-cats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.dk-cats-grid-sm {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.dk-cat-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--dk-radius);
    background: var(--dk-bg-soft);
    color: var(--dk-text);
    text-decoration: none;
    isolation: isolate;
}

.dk-cat-tile:hover {
    color: var(--dk-text);
    text-decoration: none;
}

.dk-cat-tile-media {
    display: block;
    aspect-ratio: 1 / 1;
}

.dk-cat-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.dk-cat-tile:hover .dk-cat-tile-media img {
    transform: scale(1.05);
}

.dk-cat-tile-body {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--dk-surface) 86%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dk-cat-tile-name {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dk-cat-tile-count {
    color: var(--dk-muted);
    font-size: 12px;
}

.dk-cats-grid-sm .dk-cat-tile-body {
    left: 6px;
    right: 6px;
    bottom: 6px;
    padding: 7px 9px;
}

.dk-cats-grid-sm .dk-cat-tile-name {
    font-size: 13px;
}

.dk-cats-group {
    margin-top: 44px;
}

.dk-cats-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dk-cats-group-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}

.dk-cats-group-head a {
    color: var(--dk-muted);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 991px) {
    .dk-cats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dk-cats-grid-sm {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .dk-cats {
        padding-top: 18px;
    }

    .dk-cats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .dk-cats-grid-sm {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .dk-cats-grid-sm .dk-cat-tile-count {
        display: none;
    }

    .dk-cats-group {
        margin-top: 30px;
    }
}

/* Category tiles: names may take two lines in the small sub-category tiles; no sideways overflow */
.dk-cats {
    overflow-x: clip;
}

.dk-cats-grid-sm .dk-cat-tile-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* Payment methods image (Storefront → Footer): never wider than the screen */
.dk-footer-payments {
    max-width: 100%;
}

.dk-footer-payments-image {
    max-width: 100%;
}

.dk-footer-payments-image img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =====================================================================
   Content pages (terms, privacy, FAQ …) + About page
   ===================================================================== */
.dk-content-page {
    padding-bottom: clamp(40px, 6vw, 90px);
}

.dk-page-body {
    max-width: 820px;
    margin: 40px auto 0;
}

.dk-prose {
    color: var(--dk-text);
    font-size: 16px;
    line-height: 1.8;
}

.dk-prose h1,
.dk-prose h2,
.dk-prose h3,
.dk-prose h4 {
    margin: 1.6em 0 .6em;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.3px;
}

.dk-prose h2 { font-size: clamp(24px, 2.4vw, 32px); }
.dk-prose h3 { font-size: 21px; }
.dk-prose h4 { font-size: 18px; }

.dk-prose > :first-child {
    margin-top: 0;
}

.dk-prose p,
.dk-prose ul,
.dk-prose ol {
    margin: 0 0 1.1em;
    color: color-mix(in srgb, var(--dk-text) 82%, var(--dk-bg));
}

.dk-prose ul,
.dk-prose ol {
    padding-inline-start: 1.3em;
}

.dk-prose a {
    color: var(--dk-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dk-prose blockquote {
    margin: 1.8em 0 0;
    padding: 18px 24px;
    border-inline-start: 3px solid var(--dk-accent);
    border-radius: 0 12px 12px 0;
    background: var(--dk-bg-soft);
    font-family: var(--dk-font-serif);
    font-size: 22px;
    font-style: italic;
    line-height: 1.5;
}

.rtl .dk-prose blockquote {
    border-radius: 12px 0 0 12px;
    font-family: var(--dk-font-ar);
    font-style: normal;
    font-size: 19px;
}

.dk-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--dk-radius);
}

.dk-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2em;
}

.dk-prose th,
.dk-prose td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--dk-line);
    text-align: start;
}

/* About ----------------------------------------------------------------- */
.dk-about > section + section {
    margin-top: clamp(56px, 7vw, 100px);
}

.dk-about-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: min(68vh, 620px);
    overflow: hidden;
    background: var(--dk-dark);
    color: #fff;
    text-align: center;
    isolation: isolate;
}

.dk-about-hero.is-plain {
    min-height: 220px;
    align-items: center;
    background: linear-gradient(90deg, var(--dk-btn-bg), var(--dk-header));
}

.dk-about-hero-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    animation: dk-about-zoom 9s ease-out forwards;
}

@keyframes dk-about-zoom {
    to { transform: none; }
}

.dk-about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(20, 14, 12, .72) 100%);
}

.dk-about-hero-content {
    padding: 0 20px clamp(40px, 7vw, 80px);
}

.dk-about-hero.is-plain .dk-about-hero-content {
    padding: 30px 20px;
}

.dk-about-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.rtl .dk-about-eyebrow {
    letter-spacing: 0;
    font-size: 13px;
}

.dk-about-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(40px, 6vw, 78px);
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.05;
}

.dk-about-story {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
}

.dk-about-collage {
    position: relative;
    padding-bottom: 14%;
}

.dk-about-collage img {
    display: block;
    border-radius: var(--dk-radius-lg);
    object-fit: cover;
    box-shadow: 0 24px 60px rgba(46, 39, 39, .14);
}

.dk-about-collage-main {
    width: 82%;
    aspect-ratio: 4 / 5;
}

.dk-about-collage-small {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 46%;
    aspect-ratio: 1 / 1;
    border: 6px solid var(--dk-bg);
}

.dk-about-stats {
    padding: clamp(36px, 5vw, 60px) 0;
    background: var(--dk-bg-soft);
}

.dk-about-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    text-align: center;
}

.dk-about-stat strong {
    display: block;
    color: var(--dk-text);
    font-family: var(--dk-font-serif);
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 600;
    line-height: 1;
}

.dk-about-stat span {
    display: block;
    margin-top: 8px;
    color: var(--dk-muted);
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.rtl .dk-about-stat span {
    letter-spacing: 0;
    font-size: 15px;
}

.dk-about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.dk-about-value {
    padding: 28px 22px;
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius);
    background: var(--dk-surface);
    transition: transform .35s ease, box-shadow .35s ease;
}

.dk-about-value:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(46, 39, 39, .08);
}

.dk-about-value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--dk-bg-soft);
    color: var(--dk-text);
}

.dk-about-value-icon i {
    font-size: 27px;
}

.dk-about-value h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
}

.dk-about-value p {
    margin: 0;
    color: var(--dk-muted);
    font-size: 14px;
    line-height: 1.6;
}

.dk-about-cta {
    padding: clamp(40px, 6vw, 72px) 24px;
    border-radius: var(--dk-radius-lg);
    background: var(--dk-footer-bg);
    color: var(--dk-footer-text);
    text-align: center;
}

.dk-about-cta h2 {
    margin: 0 0 12px;
    color: var(--dk-footer-text);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 500;
}

.dk-about-cta p {
    max-width: 520px;
    margin: 0 auto 26px;
    color: color-mix(in srgb, var(--dk-footer-text) 75%, transparent);
}

.dk-about-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.dk-btn-outline {
    border-color: color-mix(in srgb, var(--dk-footer-text) 55%, transparent);
    background: transparent;
    color: var(--dk-footer-text);
}

.dk-btn-outline:hover {
    background: var(--dk-footer-text);
    color: var(--dk-footer-bg);
}

@media (max-width: 991px) {
    .dk-about-story {
        grid-template-columns: 1fr;
    }

    .dk-about-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .dk-about-hero {
        min-height: 52vh;
    }

    .dk-about-values-grid {
        grid-template-columns: 1fr;
    }

    .dk-about-stats-grid {
        gap: 10px;
    }

    .dk-about-stat span {
        font-size: 12px;
    }

    .dk-page-body {
        margin-top: 26px;
    }
}

/* Content pages: owner placeholders, cookie table code, FAQ questions */
.dk-prose mark {
    padding: 1px 6px;
    border-radius: 4px;
    background: #fff1b8;
    color: #6b4e00;
}

.dk-prose code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--dk-bg-soft);
    font-size: .9em;
    direction: ltr;
    unicode-bidi: isolate;
}

.dk-prose h3 + p {
    margin-top: -.3em;
}

.dk-prose h2 + p:first-of-type,
.dk-prose > p:first-child {
    color: var(--dk-muted);
}

@media (max-width: 575px) {
    .dk-prose table,
    .dk-prose thead,
    .dk-prose tbody,
    .dk-prose tr,
    .dk-prose td {
        display: block;
    }

    .dk-prose thead {
        display: none;
    }

    .dk-prose tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--dk-line);
    }

    .dk-prose td {
        padding: 2px 0;
        border: 0;
    }
}

/* =====================================================================
   Footer polish (same layout): moving colour, gold details, glass card
   ===================================================================== */
.dk-footer a {
    transition: color .2s ease, transform .25s ease, background .25s ease, border-color .25s ease;
}

.dk-footer a:hover {
    color: var(--dk-gold-1);
    text-decoration: none;
}

/* column titles with a small gold bar */
.dk-footer-col h4 {
    position: relative;
    padding-bottom: 12px;
}

.dk-footer-col h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--dk-gold-1), var(--dk-accent));
    transition: width .3s ease;
}

.dk-footer-col:hover h4::after {
    width: 46px;
}

.dk-footer-col li a {
    display: inline-block;
}

.dk-footer-col li a:hover {
    transform: translateX(4px);
}

.rtl .dk-footer-col li a:hover {
    transform: translateX(-4px);
}

/* about column as a frosted card over the grid */
.dk-footer-about {
    padding: 22px 24px;
    border: 1px solid color-mix(in srgb, var(--dk-footer-text) 12%, transparent);
    border-radius: var(--dk-radius);
    background: color-mix(in srgb, var(--dk-footer-text) 5%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.dk-footer-about-link {
    color: var(--dk-gold-1) !important;
    text-decoration: none !important;
}

.dk-footer-about-link::after {
    content: " \2190";
}

.ltr .dk-footer-about-link::after,
body:not(.rtl) .dk-footer-about-link::after {
    content: " \2192";
}

/* social / payments row between two hairlines */
.dk-footer-row {
    padding: 22px 0;
    border-top: 1px solid color-mix(in srgb, var(--dk-footer-text) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--dk-footer-text) 12%, transparent);
}

.dk-footer-social {
    gap: 10px;
}

.dk-footer-social a {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--dk-footer-text) 22%, transparent);
    border-radius: 50%;
}

.dk-footer-social a:hover {
    opacity: 1;
    background: var(--dk-accent);
    border-color: var(--dk-accent);
    color: var(--dk-footer-bg);
    transform: translateY(-3px);
}

.dk-footer-social svg {
    width: 17px;
    height: 17px;
}

.dk-footer-payments-image,
.dk-footer-payments .dk-pay:first-child {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25));
}

/* the brand logo at the bottom, with a soft gold glow */
.dk-footer-logo {
    position: relative;
    margin-top: 44px;
}

.dk-footer-logo img.is-inverted {
    filter: brightness(0) invert(1);
    opacity: .92;
}

.dk-footer-logo:hover img {
    transform: scale(1.03);
}

.dk-footer-logo img {
    transition: transform .4s ease;
}

@media (max-width: 575px) {
    .dk-footer-about {
        padding: 18px;
    }
}

/* Language dropdown in the header (small, under the globe icon) */
.dk-lang {
    position: relative;
}

.dk-lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: -8px;
    z-index: 60;
    min-width: 170px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--dk-line);
    border-radius: 14px;
    background: var(--dk-surface);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .28);
}

.dk-lang-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--dk-text) !important;
    font-size: 14px;
    text-decoration: none !important;
    white-space: nowrap;
}

.dk-lang-menu a:hover {
    background: var(--dk-bg-soft);
}

.dk-lang-menu a.is-active {
    color: var(--dk-btn-bg) !important;
    font-weight: 600;
}

.dk-lang-menu .fi {
    width: 20px;
    height: 15px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Product names in Alexandria (the same face as the hero caption) */
.rtl .dk-card-name,
.rtl .dk-reel-product-name,
.rtl .dk-hero-caption {
    font-family: "Alexandria", var(--dk-font-ar);
    letter-spacing: 0;
}

/* text for screen readers and search engines only */
.dk-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}