.dc-th {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Subtle warm gradient bg ── */
.dc-th .dth-bg-wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 10% 90%, rgba(167,130,120,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 85% 15%, rgba(167,130,120,0.03) 0%, transparent 60%);
    pointer-events: none;
}

/* ── Grid layout ── */
.dc-th .dth-grid {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    padding: clamp(48px, 6vw, 100px) clamp(24px, 4vw, 60px) clamp(40px, 5vw, 80px);
    min-height: clamp(480px, 60vh, 680px);
}

/* TEXT COLUMN */
.dc-th .dth-text {
    position: relative;
    z-index: 2;
}

/* Breadcrumbs */
.dc-th .dth-bc {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: clamp(20px, 2.5vw, 36px);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3px;
}
.dc-th .dth-bc a {
    color: #999;
    text-decoration: none;
    transition: color 0.25s;
}
.dc-th .dth-bc a:hover { color: #A78278; }
.dc-th .dth-bc__sep {
    color: #ccc;
    margin: 0 10px;
    font-size: 9px;
}
.dc-th .dth-bc__cur {
    color: #1a1a2e;
    font-weight: 600;
}

/* Badge / Subtitle */
.dc-th .dth-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(16px, 2vw, 26px);
}
.dc-th .dth-badge__line {
    width: 36px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #A78278);
    flex-shrink: 0;
}
.dc-th .dth-badge__line--r {
    background: linear-gradient(90deg, #A78278, transparent);
}
.dc-th .dth-badge__text {
    font-family: 'Trajan Pro', 'Cinzel', serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: #8B6B62;
}

/* Title */
.dc-th .dth-title {
    font-size: clamp(30px, 4.2vw, 52px);
    font-weight: 300;
    color: #1a1a2e;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 clamp(14px, 1.5vw, 22px);
    text-wrap: balance;
}

/* Description */
.dc-th .dth-desc {
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.8;
    color: #666;
    font-weight: 350;
    max-width: 520px;
    margin: 0 0 clamp(20px, 2vw, 30px);
}

/* Price teaser badge */
.dc-th .dth-price {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(20px, 2.5vw, 30px);
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(167,130,120,0.06) 0%, rgba(167,130,120,0.02) 100%);
    border: 1px solid rgba(167,130,120,0.15);
    border-radius: 14px;
    max-width: fit-content;
}
.dc-th .dth-price__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    background: #A78278;
    border-radius: 10px;
    line-height: 1;
    flex-shrink: 0;
}
.dc-th .dth-price__prefix {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
}
.dc-th .dth-price__amount {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
}
.dc-th .dth-price__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dc-th .dth-price__note {
    font-size: 12px;
    color: #666;
    font-weight: 400;
}
.dc-th .dth-price__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #A78278;
    text-decoration: none;
    transition: gap 0.3s ease;
}
.dc-th .dth-price__link:hover {
    gap: 8px;
    color: #967269;
}
.dc-th .dth-price__link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* USP chips – compact with unique SVG icons */
.dc-th .dth-usps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-top: clamp(16px, 1.8vw, 24px);
    padding-top: clamp(16px, 1.8vw, 24px);
    border-top: 1px solid rgba(167,130,120,0.10);
}
.dc-th .dth-usp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 450;
    color: #666;
    letter-spacing: 0.1px;
}
.dc-th .dth-usp__ico {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(167,130,120,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dc-th .dth-usp__ico svg {
    width: 13px;
    height: 13px;
    color: #A78278;
}

/* CTA Buttons */
.dc-th .dth-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: clamp(18px, 2vw, 28px);
}
.dc-th .dth-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    font-family: 'Inter', sans-serif;
}
.dc-th .dth-btn--primary {
    padding: 14px 28px 14px 16px;
    background: #A78278;
    color: #fff;
    box-shadow: 0 4px 20px rgba(167,130,120,0.30);
    overflow: hidden;
}
.dc-th .dth-btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}
.dc-th .dth-btn--primary:hover {
    background: #967269;
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(167,130,120,0.40);
    color: #fff;
}
.dc-th .dth-btn--primary:hover::before { opacity: 1; }
.dc-th .dth-btn__ico {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s;
}
.dc-th .dth-btn--primary:hover .dth-btn__ico { background: rgba(255,255,255,0.28); }
.dc-th .dth-btn__ico svg { width: 14px; height: 14px; color: #fff; }
.dc-th .dth-btn--outline {
    padding: 14px 26px;
    background: transparent;
    color: #1a1a2e;
    border: 1.5px solid rgba(26,26,46,0.15);
    gap: 8px;
}
.dc-th .dth-btn--outline svg {
    width: 14px;
    height: 14px;
    color: #A78278;
    flex-shrink: 0;
    transition: transform 0.3s;
}
.dc-th .dth-btn--outline:hover {
    background: rgba(167,130,120,0.06);
    border-color: #A78278;
    color: #1a1a2e;
    transform: translateY(-2px);
}
.dc-th .dth-btn--outline:hover svg { transform: translateX(3px); }

/* (trust block removed) */

/* MEDIA COLUMN – Bento Mosaic */
.dc-th .dth-media {
    position: relative;
}

.dc-th .dth-bento {
    display: grid;
    grid-template-columns: 1fr 1fr 0.7fr;
    grid-template-rows: auto auto auto;
    gap: 6px;
    max-width: 520px;
}

/* Shared block style */
.dc-th .dth-b {
    overflow: hidden;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.dc-th .dth-b:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(26,26,46,0.08);
}

/* B1: Main image */
.dc-th .dth-b--img {
    grid-column: 1 / 3;
    grid-row: 1 / 4;
    border-radius: 20px;
    min-height: 380px;
}
.dc-th .dth-b--img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 8s cubic-bezier(0.16,1,0.3,1);
}
.dc-th.dth--vis .dth-b--img img { transform: scale(1.05); }

/* Gold / copper overlay on image */
.dc-th .dth-b--img::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 20px;
    background:
        linear-gradient(160deg, rgba(167,130,120,0.18) 0%, transparent 45%),
        linear-gradient(340deg, rgba(26,26,46,0.35) 0%, transparent 55%),
        radial-gradient(ellipse 60% 80% at 70% 85%, rgba(167,130,120,0.22) 0%, transparent 70%);
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.dc-th .dth-b:hover .dth-b--img::before,
.dc-th .dth-b--img:hover::before {
    opacity: 0.6;
}

/* B2: Rating card */
.dc-th .dth-b--rating {
    grid-column: 3;
    grid-row: 1;
    border-radius: 16px;
    background: #1a1a2e;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}
.dc-th .dth-b--rating__stars {
    display: flex; gap: 2px;
}
.dc-th .dth-b--rating__stars svg {
    width: 13px; height: 13px; color: #A78278; fill: #A78278;
}
.dc-th .dth-b--rating__num {
    font-size: 26px; font-weight: 700; color: #fff; line-height: 1;
    letter-spacing: -0.03em;
}
.dc-th .dth-b--rating__label {
    font-size: 9px; color: rgba(255,255,255,0.45);
    text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500;
}

/* B3: Shield / BIG card */
.dc-th .dth-b--shield {
    grid-column: 3;
    grid-row: 2;
    border-radius: 16px;
    background: linear-gradient(145deg, #A78278 0%, #c4a49b 100%);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
.dc-th .dth-b--shield svg {
    width: 24px; height: 24px; color: #fff;
}
.dc-th .dth-b--shield__text {
    font-size: 10px; color: rgba(255,255,255,0.9);
    font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    line-height: 1.3;
}

/* B4: Stat block */
.dc-th .dth-b--stat {
    grid-column: 3;
    grid-row: 3;
    border-radius: 16px;
    background: #faf7f4;
    border: 1px solid rgba(167,130,120,0.10);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}
.dc-th .dth-b--stat__num {
    font-size: 22px; font-weight: 700; color: #1a1a2e; line-height: 1;
    letter-spacing: -0.02em;
}
.dc-th .dth-b--stat__label {
    font-size: 9px; color: #888;
    text-transform: uppercase; letter-spacing: 1.2px; font-weight: 500;
}

/* Animated dot-pattern overlay on image */
.dc-th .dth-b--img::after {
    content: '';
    position: absolute;
    bottom: 12px; right: 12px;
    width: 56px; height: 56px;
    z-index: 2;
    background-image: radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 1px);
    background-size: 8px 8px;
    border-radius: 10px;
    pointer-events: none;
    animation: dthDotsFloat 10s ease-in-out infinite;
}

/* Animated accent ring on shield */
.dc-th .dth-b--shield::before {
    content: '';
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    top: -12px; right: -12px;
    animation: dthRingPulse 6s ease-in-out infinite;
}
@keyframes dthRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.15); opacity: 0.8; }
}

/* Float keyframes */
@keyframes dthDotsFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-3px, 3px); }
}

/* Staggered entry per block */
.dc-th .dth-b--img   { animation: dthBlockIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
.dc-th .dth-b--rating { animation: dthBlockIn 0.4s cubic-bezier(0.16,1,0.3,1) 0.25s both; }
.dc-th .dth-b--shield { animation: dthBlockIn 0.4s cubic-bezier(0.16,1,0.3,1) 0.35s both; }
.dc-th .dth-b--stat   { animation: dthBlockIn 0.4s cubic-bezier(0.16,1,0.3,1) 0.45s both; }
@keyframes dthBlockIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scroll-driven entry */
@keyframes dthFadeUp {
    from { opacity: 0; transform: translateY(2rem); }
    to   { opacity: 1; transform: translateY(0); }
}
.dc-th .dth-text { animation: dthFadeUp 0.6s ease both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
.dc-th .dth-media { animation: dthFadeUp 0.6s ease both; animation-timeline: view(); animation-range: entry 5% entry 45%; }

@supports not (animation-timeline: view()) {
    .dc-th .dth-text,
    .dc-th .dth-media { opacity: 0; transform: translateY(24px); }
    .dc-th.dth--vis .dth-text {
        opacity: 1; transform: translateY(0);
        transition: opacity 0.6s ease 0.05s, transform 0.6s ease 0.05s;
    }
    .dc-th.dth--vis .dth-media {
        opacity: 1; transform: translateY(0);
        transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dc-th .dth-text,
    .dc-th .dth-media { animation: none; opacity: 1; transform: none; }
    .dc-th .dth-b--img,
    .dc-th .dth-b--rating,
    .dc-th .dth-b--shield,
    .dc-th .dth-b--stat { animation: none; opacity: 1; transform: none; }
    .dc-th .dth-b--img::after,
    .dc-th .dth-b--shield::before { animation: none; }
    .dc-th.dth--vis .dth-b--img img { transform: none; }
    .dc-th .dth-b:hover { transform: none; }
}

/* Bottom accent */
.dc-th .dth-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(167,130,120,0.15) 30%, rgba(167,130,120,0.15) 70%, transparent 100%);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .dc-th .dth-grid { gap: 28px; }
    .dc-th .dth-bento { max-width: 440px; }
    .dc-th .dth-b--img { min-height: 320px; }
    .dc-th .dth-b--rating__num { font-size: 22px; }
}

@media (max-width: 900px) {
    .dc-th .dth-grid {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 40px 24px 36px;
        min-height: auto;
    }
    .dc-th .dth-text { order: 1; }
    .dc-th .dth-media { order: 2; }
    .dc-th .dth-bc { justify-content: center; }
    .dc-th .dth-badge { justify-content: center; }
    .dc-th .dth-desc { max-width: none; margin-left: auto; margin-right: auto; }
    .dc-th .dth-price { margin-left: auto; margin-right: auto; }
    .dc-th .dth-usps { justify-content: center; }
    .dc-th .dth-actions { justify-content: center; }
    .dc-th .dth-bento { max-width: 420px; margin: 0 auto; }
    .dc-th .dth-b--img { min-height: 300px; }
}

@media (max-width: 640px) {
    .dc-th .dth-grid { padding: 32px 14px 28px; gap: 20px; }
    .dc-th .dth-bc { font-size: 10px; margin-bottom: 14px; }
    .dc-th .dth-bc__sep { margin: 0 6px; font-size: 8px; }
    .dc-th .dth-badge { gap: 8px; margin-bottom: 10px; }
    .dc-th .dth-badge__line { width: 22px; }
    .dc-th .dth-badge__text { font-size: 9px; letter-spacing: 2px; }
    .dc-th .dth-desc { font-size: 13px; }
    .dc-th .dth-usps { gap: 6px 14px; padding-top: 14px; }
    .dc-th .dth-usp { font-size: 11px; gap: 6px; }
    .dc-th .dth-usp__ico { width: 22px; height: 22px; border-radius: 6px; }
    .dc-th .dth-usp__ico svg { width: 11px; height: 11px; }
    .dc-th .dth-actions { flex-direction: column; width: 100%; }
    .dc-th .dth-btn { width: 100%; justify-content: center; font-size: 13px; }
    .dc-th .dth-btn--primary { padding: 12px 22px 12px 14px; }
    .dc-th .dth-btn--outline { padding: 12px 20px; }
    /* Bento stacks */
    .dc-th .dth-bento {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        max-width: 100%;
        gap: 5px;
    }
    .dc-th .dth-b--img {
        grid-column: 1 / 4;
        grid-row: 1;
        min-height: 220px;
        border-radius: 16px;
    }
    .dc-th .dth-b--img::before { border-radius: 16px; }
    .dc-th .dth-b--rating {
        grid-column: 1; grid-row: 2;
        border-radius: 12px;
        padding: 12px 8px;
    }
    .dc-th .dth-b--rating__num { font-size: 18px; }
    .dc-th .dth-b--shield {
        grid-column: 2; grid-row: 2;
        border-radius: 12px;
        padding: 12px 8px;
    }
    .dc-th .dth-b--shield svg { width: 18px; height: 18px; }
    .dc-th .dth-b--shield__text { font-size: 8px; }
    .dc-th .dth-b--stat {
        grid-column: 3; grid-row: 2;
        border-radius: 12px;
        padding: 12px 8px;
    }
    .dc-th .dth-b--stat__num { font-size: 16px; }
    .dc-th .dth-b--shield::before { display: none; }
    .dc-th .dth-b--img::after { width: 40px; height: 40px; bottom: 8px; right: 8px; }
}

/* ═══════════════════════════════════════
   Sticky Footer CTA Bar
   ═══════════════════════════════════════ */
.dth-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: rgba(26, 26, 46, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}
.dth-sticky--visible {
    transform: translateY(0);
}
.dth-sticky__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.dth-sticky__info {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.dth-sticky__title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dth-sticky__price {
    font-size: 16px;
    font-weight: 700;
    color: #A78278;
    white-space: nowrap;
}
.dth-sticky__price-prefix {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 4px;
}
.dth-sticky__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: #A78278;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.dth-sticky__cta:hover {
    background: #96726a;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(167, 130, 120, 0.4);
    color: #fff;
}

@media (max-width: 640px) {
    .dth-sticky__inner { padding: 10px 16px; }
    .dth-sticky__title { font-size: 13px; }
    .dth-sticky__price { font-size: 14px; }
    .dth-sticky__cta { padding: 9px 18px; font-size: 12px; }
}