/* =====================================================================
 *  DIZEN — CATALOG UI  (product grid, sidebar, product detail)
 * =====================================================================
 *  Loaded AFTER css/style.css on:
 *      product-list.php, category.php, product.php
 *  Everything is namespaced under .dz-* so it cannot leak into the rest
 *  of the theme. Brand accent is the theme's own #d7b39a.
 * ===================================================================== */

:root {
    --dz-accent: #d7b39a;
    --dz-accent-dk: #c19a7d;
    --dz-ink: #14161a;
    --dz-ink-2: #5b6270;
    --dz-line: #e8e8e6;
    --dz-surface: #f6f5f3;
    --dz-radius: 16px;
    --dz-shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 8px 28px rgba(20, 22, 26, .06);
    --dz-shadow-lg: 0 2px 6px rgba(20, 22, 26, .06), 0 22px 48px rgba(20, 22, 26, .14);
}


/* =====================================================================
 *  0. CATALOG LAYOUT  (grid column + sidebar column)
 * =====================================================================
 *  Bootstrap's 9/3 split left the sidebar at ~262px, which forced long
 *  category names onto three lines. These rules widen the page and give
 *  the sidebar 28% instead of 25% — enough for names like
 *  "Facade & Architectural Lighting" to sit on two lines — while the
 *  product grid still holds three comfortable cards.
 * ===================================================================== */

@media (min-width: 1200px) {
    .dz-catalog .container { max-width: 1400px; }

    .dz-catalog__main { flex: 0 0 72%; max-width: 72%; }
    .dz-catalog__side { flex: 0 0 28%; max-width: 28%; }
}


/* =====================================================================
 *  1. PRODUCT CARD
 * ===================================================================== */

.dz-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

@media (max-width: 1199px) {
    .dz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

@media (max-width: 575px) {
    .dz-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* The whole card is one anchor — click anywhere goes to the detail page */
a.dz-card,
a.dz-card:hover,
a.dz-card:focus {
    text-decoration: none;
    color: inherit;
}

.dz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--dz-line);
    border-radius: var(--dz-radius);
    overflow: hidden;
    height: 100%;
    transition: transform .35s cubic-bezier(.2, .8, .3, 1),
                box-shadow .35s cubic-bezier(.2, .8, .3, 1),
                border-color .35s ease;
}

.dz-card:hover,
.dz-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--dz-shadow-lg);
    border-color: transparent;
}

.dz-card:focus-visible {
    outline: 2px solid var(--dz-accent);
    outline-offset: 3px;
}

/* ---- media ---- */
.dz-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--dz-surface);
    overflow: hidden;
    flex: none;
}

/* older browsers without aspect-ratio */
@supports not (aspect-ratio: 4 / 3) {
    .dz-card__media { height: 260px; }
}

.dz-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}

.dz-card:hover .dz-card__media img {
    transform: scale(1.06);
}

/* soft veil so the badges stay readable on any photo */
.dz-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.dz-card__badges {
    position: absolute;
    top: 14px;
    left: 14px;
    /* leaves room for .dz-card__zoom, which now docks in this same
       top-right corner of the image — otherwise a full row of badges
       (New + Featured + Offer) wraps right under the zoom icon. */
    right: 54px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dz-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--dz-ink);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.dz-badge--accent { background: var(--dz-accent); color: var(--dz-ink); }
.dz-badge--dark   { background: rgba(20, 22, 26, .82); color: #fff; }

/* ---- body ---- */
.dz-card__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.dz-card__cat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dz-accent-dk);
    margin: 0 0 8px;
}

.dz-card__title {
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--dz-ink);
    margin: 0 0 8px;
    /* clamped to two lines AND reserved at two lines, so the spec pills
       and price row sit on the same baseline across the whole row */
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .25s ease;
}

.dz-card:hover .dz-card__title { color: var(--dz-accent-dk); }

/* the little spec pills (wattage, IP rating, CCT …) */
.dz-specrow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 16px;
    padding: 0;
    list-style: none;
}

.dz-specrow li {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--dz-ink-2);
    background: var(--dz-surface);
    border: 1px solid var(--dz-line);
    border-radius: 6px;
    padding: 6px 9px;
}

.dz-card__foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--dz-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dz-card__price {
    font-size: 16px;
    font-weight: 600;
    color: var(--dz-ink);
}

.dz-card__price .price-was {
    font-size: 13px;
    font-weight: 400;
    color: #9aa0aa;
    margin-left: 6px;
}

.dz-card__price--muted {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dz-ink-2);
}

.dz-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--dz-ink);
    white-space: nowrap;
}

.dz-card__cta i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dz-surface);
    color: var(--dz-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.dz-card:hover .dz-card__cta i {
    background: var(--dz-accent);
    color: #fff;
    transform: translateX(3px);
}

/* zoom button — a small icon docked in the top-right corner of the
   IMAGE, not the card footer. It used to sit at the bottom-right of the
   whole `.dz-cardwrap` (`bottom: 14px`), which put it directly on top
   of the "View" arrow in `.dz-card__foot`: two overlapping clickable
   targets in the same corner, and — because it stayed at `opacity: 0`
   with no `pointer-events: none` — it kept silently intercepting clicks
   meant for "View" even while invisible, which is what made a single
   click sometimes fire both the lightbox AND the card's own link
   underneath (reported as "opens two images"). Docking it on the image
   corner, sized down, and always visible (no more opacity-0 hit trap)
   removes the overlap entirely. */
.dz-card__zoom {
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--dz-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    opacity: .92;
    transform: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .25s ease, color .25s ease, opacity .25s ease, transform .25s ease;
}

.dz-cardwrap:hover .dz-card__zoom,
.dz-card__zoom:focus-visible {
    opacity: 1;
    transform: scale(1.08);
}

.dz-card__zoom:hover { background: var(--dz-accent); color: #fff; }
.dz-card__zoom:focus-visible { outline: 2px solid var(--dz-accent); outline-offset: 2px; }

.dz-cardwrap { position: relative; height: 100%; }


/* =====================================================================
 *  2. SIDEBAR — category list (fixes the count/label overlap)
 * ===================================================================== */

.dz-side { position: relative; }

.dz-side .widget { margin-bottom: 28px; }

.dz-side .widget-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.dz-catlist {
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--dz-line);
    border-radius: 12px;
    /* a 20-item subcategory list would otherwise be twice the height of
       the product grid next to it — cap it and let it scroll */
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dz-catlist::-webkit-scrollbar { width: 6px; }
.dz-catlist::-webkit-scrollbar-thumb { background: #dcdcd8; border-radius: 3px; }
.dz-catlist::-webkit-scrollbar-track { background: transparent; }

.dz-catlist li { border: 0; padding: 0; margin: 0; line-height: normal; }
.dz-catlist li::before { content: none; }

/* Flex row: the label wraps freely, the count keeps its own column.
   This is what the old `float: right` span could not do. */
.dz-catlist li > a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 13px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dz-ink);
    transition: background .2s ease, color .2s ease;
}

.dz-catlist li + li > a { box-shadow: inset 0 1px 0 var(--dz-line); }

.dz-catlist li > a:hover,
.dz-catlist li > a:focus {
    background: var(--dz-surface);
    color: var(--dz-accent-dk);
    box-shadow: none;
}

.dz-catlist li > a:hover + a { box-shadow: none; }

.dz-catlist .dz-cat-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dz-catlist .dz-cat-count {
    flex: 0 0 auto;
    float: none;          /* kill the theme rule */
    display: inline-block;
    min-width: 30px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--dz-surface);
    color: var(--dz-ink-2);
    margin-top: 1px;
}

.dz-catlist li > a:hover .dz-cat-count {
    background: var(--dz-accent);
    color: #fff;
}

.dz-catlist li.is-active > a {
    background: var(--dz-surface);
    color: var(--dz-accent-dk);
    font-weight: 600;
}

/* Toolbar above the grid */
.dz-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 2px 22px;
}

.dz-toolbar__count {
    font-size: 13px;
    color: var(--dz-ink-2);
    margin: 0;
}

.dz-toolbar__count strong { color: var(--dz-ink); font-weight: 600; }

.dz-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dz-ink-2);
}

.dz-sort select {
    font-size: 13px;
    color: var(--dz-ink);
    border: 1px solid var(--dz-line);
    border-radius: 8px;
    padding: 8px 30px 8px 12px;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%235b6270' d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right 10px center/10px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.dz-sort select:focus { outline: 2px solid var(--dz-accent); outline-offset: 1px; }

/* empty state */
.dz-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 24px;
    border: 1px dashed var(--dz-line);
    border-radius: var(--dz-radius);
    background: var(--dz-surface);
}

.dz-empty i { font-size: 34px; color: var(--dz-accent); margin-bottom: 14px; display: block; }
.dz-empty h4 { margin: 0 0 8px; font-size: 19px; }
.dz-empty p { margin: 0; color: var(--dz-ink-2); }


/* =====================================================================
 *  3. PRODUCT DETAIL PAGE
 * ===================================================================== */

.dz-pd { padding: 70px 0 40px; background: #fff; }

@media (max-width: 767px) { .dz-pd { padding: 44px 0 24px; } }

/* ---- 3a. gallery ---- */
.dz-gallery { position: sticky; top: 100px; }

@media (max-width: 991px) { .dz-gallery { position: static; } }

.dz-gallery__stage {
    position: relative;
    border-radius: var(--dz-radius);
    overflow: hidden;
    background: var(--dz-surface);
    aspect-ratio: 1 / 1;
    border: 1px solid var(--dz-line);
}

@supports not (aspect-ratio: 1 / 1) {
    .dz-gallery__stage { height: 520px; }
}

.dz-gallery__stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .25s ease;
}

.dz-gallery__stage.is-swapping img { opacity: .35; }

.dz-gallery__zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--dz-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.dz-gallery__zoom:hover {
    background: var(--dz-accent);
    color: #fff;
    transform: scale(1.06);
}

.dz-gallery__tag {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
}

.dz-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 12px;
}

@media (max-width: 480px) { .dz-thumbs { grid-template-columns: repeat(4, 1fr); } }

.dz-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--dz-surface);
    cursor: pointer;
    padding: 0;
    transition: border-color .25s ease, transform .25s ease;
}

.dz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-thumb:hover { transform: translateY(-2px); }
.dz-thumb.is-active { border-color: var(--dz-accent); }
.dz-thumb:focus { outline: none; }
.dz-thumb:focus-visible { outline: 2px solid var(--dz-accent-dk); outline-offset: 2px; }

/* ---- 3b. info column ---- */
.dz-pd__info { padding-left: 14px; }

@media (max-width: 991px) { .dz-pd__info { padding-left: 0; margin-top: 34px; } }

.dz-pd__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.dz-pd__title {
    font-size: 34px;
    line-height: 1.22;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--dz-ink);
    margin: 0 0 10px;
}

@media (max-width: 767px) { .dz-pd__title { font-size: 26px; } }

.dz-pd__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: var(--dz-ink-2);
    margin: 0 0 18px;
}

.dz-pd__meta span strong { color: var(--dz-ink); font-weight: 600; }

.dz-pd__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 30px;
    font-weight: 600;
    color: var(--dz-ink);
    margin: 0 0 6px;
}

.dz-pd__price .price-was {
    font-size: 17px;
    font-weight: 400;
    color: #9aa0aa;
}

.dz-pd__lead {
    font-size: 15px;
    line-height: 1.75;
    color: var(--dz-ink-2);
    margin: 0 0 22px;
}

.dz-rule { height: 1px; background: var(--dz-line); border: 0; margin: 24px 0; }

/* quick highlight tiles */
.dz-highlights {
    display: grid;
    /* two per row keeps four values as a tidy 2x2 block */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

@media (min-width: 1200px) {
    .dz-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dz-highlights li {
    background: var(--dz-surface);
    border: 1px solid var(--dz-line);
    border-radius: 12px;
    padding: 14px 15px;
}

.dz-highlights .k {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dz-ink-2);
    margin-bottom: 5px;
}

.dz-highlights .v {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--dz-ink);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* actions */
.dz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 22px;
}

.dz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 15px 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}

.dz-btn:focus-visible { outline: 2px solid var(--dz-accent); outline-offset: 3px; }

.dz-btn--primary {
    background: var(--dz-ink);
    color: #fff;
}

/* The sand accent is light, so text on it is dark ink — white would
   fall below the 4.5:1 contrast floor. */
.dz-btn--primary:hover {
    background: var(--dz-accent);
    color: var(--dz-ink);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(215, 179, 154, .45);
}

.dz-btn--ghost {
    background: #fff;
    color: var(--dz-ink);
    border-color: var(--dz-line);
}

.dz-btn--ghost:hover {
    border-color: var(--dz-ink);
    color: var(--dz-ink);
    transform: translateY(-2px);
}

.dz-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: 12.5px;
    color: var(--dz-ink-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dz-trust li { display: inline-flex; align-items: center; gap: 7px; }
.dz-trust i { color: var(--dz-accent); font-size: 14px; }

.dz-alsoin { font-size: 12.5px; color: var(--dz-ink-2); margin: 18px 0 0; }
.dz-alsoin a { color: var(--dz-ink); border-bottom: 1px solid var(--dz-line); }
.dz-alsoin a:hover { color: var(--dz-accent-dk); border-color: var(--dz-accent); }

/* ---- 3c. tabs ---- */
.dz-tabs { margin-top: 76px; }

@media (max-width: 767px) { .dz-tabs { margin-top: 48px; } }

.dz-tabs__nav {
    /* inline-flex so the pill hugs the tabs instead of stretching
       across the container with dead space on the right */
    display: flex;
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    list-style: none;
    margin: 0 0 28px;
    padding: 5px;
    background: var(--dz-surface);
    border-radius: 999px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.dz-tabs__nav::-webkit-scrollbar { display: none; }

.dz-tabs__nav button {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--dz-ink-2);
    padding: 13px 26px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .28s ease, color .28s ease, box-shadow .28s ease;
}

.dz-tabs__nav button:hover { color: var(--dz-ink); }
.dz-tabs__nav button:focus { outline: none; }
.dz-tabs__nav button:focus-visible { outline: 2px solid var(--dz-accent-dk); outline-offset: 2px; }

.dz-tabs__nav button.is-active {
    background: #fff;
    color: var(--dz-ink);
    box-shadow: var(--dz-shadow);
}

.dz-tabs__panel { display: none; animation: dzFade .35s ease both; }
.dz-tabs__panel.is-active { display: block; }

@keyframes dzFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.dz-prose {
    font-size: 15px;
    line-height: 1.85;
    color: var(--dz-ink-2);
    max-width: 78ch;
}

.dz-prose p { margin-bottom: 16px; }

/* spec table as a two-column definition grid */
.dz-spectable {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    margin: 0;
}

@media (max-width: 767px) { .dz-spectable { grid-template-columns: 1fr; gap: 0; } }

.dz-spectable__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--dz-line);
    font-size: 14px;
}

.dz-spectable__row dt {
    color: var(--dz-ink-2);
    font-weight: 500;
    margin: 0;
    flex: 0 1 auto;
}

.dz-spectable__row dd {
    color: var(--dz-ink);
    font-weight: 600;
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

/* feature / application cards */
.dz-featlist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dz-featlist li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: #fff;
    border: 1px solid var(--dz-line);
    border-radius: 12px;
    padding: 17px 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--dz-ink);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.dz-featlist li:hover {
    border-color: transparent;
    box-shadow: var(--dz-shadow);
    transform: translateY(-2px);
}

.dz-featlist li::before { content: none; }

.dz-featlist .ic {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--dz-ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 1px;
}

/* ---- 3d. enquiry strip ---- */
.dz-cta {
    margin-top: 80px;
    border-radius: 22px;
    background: var(--dz-ink);
    color: #fff;
    padding: 52px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    position: relative;
    overflow: hidden;
}

.dz-cta::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215, 179, 154, .35) 0%, rgba(215, 179, 154, 0) 68%);
    pointer-events: none;
}

@media (max-width: 767px) { .dz-cta { padding: 34px 26px; margin-top: 50px; } }

.dz-cta h3 { color: #fff; font-size: 26px; margin: 0 0 8px; font-weight: 600; }
.dz-cta p { color: rgba(255, 255, 255, .68); margin: 0; font-size: 14px; max-width: 52ch; }
.dz-cta .dz-btn--primary { background: var(--dz-accent); color: var(--dz-ink); }
.dz-cta .dz-btn--primary:hover { background: #fff; color: var(--dz-ink); }

/* ---- 3e. related ---- */
.dz-related { padding: 84px 0 30px; }
@media (max-width: 767px) { .dz-related { padding: 52px 0 10px; } }

.dz-sechead { margin-bottom: 34px; }

.dz-sechead h3 {
    font-size: 28px;
    font-weight: 600;
    color: var(--dz-ink);
    margin: 0 0 8px;
}

.dz-sechead p { color: var(--dz-ink-2); font-size: 14px; margin: 0; }

/* ---- 3f. pagination ---- */
.dz-pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 46px 0 0;
    padding: 0;
}

.dz-pager li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--dz-line);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dz-ink);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.dz-pager li a:hover { border-color: var(--dz-ink); }

.dz-pager li.active a {
    background: var(--dz-ink);
    border-color: var(--dz-ink);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .dz-card, .dz-card__media img, .dz-btn, .dz-featlist li, .dz-tabs__panel {
        transition: none !important;
        animation: none !important;
    }
}