/* =========================================================
   D'REALDY PRODUCT DETAIL PAGE
   File: css/product-detail.css
   ========================================================= */


/* =========================================================
   1. PAGE VARIABLES
   ========================================================= */

:root {

    --product-hero-background:
        linear-gradient(
            135deg,
            rgba(10, 58, 128, 0.08),
            rgba(178, 138, 88, 0.12)
        );

    --product-surface: #ffffff;

    --product-surface-soft: #f7f8fa;

    --product-border:
        rgba(10, 58, 128, 0.12);

    --product-text-soft:
        rgba(34, 34, 34, 0.72);

    --product-shadow:
        0 24px 60px rgba(10, 35, 70, 0.10);

    --product-shadow-hover:
        0 30px 70px rgba(10, 35, 70, 0.16);

    --product-radius-large: 32px;

    --product-radius-medium: 22px;

    --product-radius-small: 14px;

}


/* =========================================================
   2. PRODUCT HERO
   ========================================================= */

.product-hero {

    padding:
        calc(var(--header-height, 90px) + var(--space-8, 32px))
        0
        var(--space-12, 48px);

    background: var(--product-hero-background);

    overflow: hidden;

}


/* =========================================================
   3. BREADCRUMB
   ========================================================= */

.breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-2, 8px);

    margin-bottom: var(--space-8, 32px);

    font-size: 0.875rem;

    line-height: 1.5;

    color: var(--product-text-soft);

}

.breadcrumb a {

    color: var(--color-primary, #0a3a80);

    text-decoration: none;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;

}

.breadcrumb a:hover {

    color: var(--color-secondary-dark, #8d6a3f);

}

.breadcrumb a:focus-visible {

    outline:
        2px solid var(--color-primary, #0a3a80);

    outline-offset: 4px;

    border-radius: 4px;

}

.breadcrumb span[aria-current="page"] {

    color: var(--color-text, #222222);

    font-weight: 600;

}


/* =========================================================
   4. HERO LAYOUT
   ========================================================= */

.product-hero-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(280px, 0.85fr);

    align-items: stretch;

    min-height: 620px;

    background: var(--product-surface);

    border:
        1px solid var(--product-border);

    border-radius:
        var(--product-radius-large);

    box-shadow: var(--product-shadow);

    overflow: hidden;

}


/* =========================================================
   5. PRODUCT MEDIA
   ========================================================= */

.product-hero-media {

    position: relative;

    min-height: 620px;

    background:
        linear-gradient(
            145deg,
            #edf2f8,
            #dde6f0
        );

    overflow: hidden;

}

.product-hero-media img {

    display: block;

    width: 100%;

    height: 100%;

    min-height: 620px;

    object-fit: cover;

    transition:
        transform 0.6s ease;

}

.product-hero-layout:hover
.product-hero-media img {

    transform: scale(1.025);

}


/* =========================================================
   6. IMAGE PLACEHOLDER
   ========================================================= */

.image-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    min-height: 620px;

    padding: var(--space-8, 32px);

    text-align: center;

    background:

        linear-gradient(
            135deg,
            rgba(10, 58, 128, 0.08),
            rgba(178, 138, 88, 0.16)
        ),

        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 20px,
            rgba(255, 255, 255, 0.25) 20px,
            rgba(255, 255, 255, 0.25) 40px
        );

}

.image-placeholder span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    max-width: 260px;

    min-height: 90px;

    padding:
        var(--space-4, 16px)
        var(--space-6, 24px);

    border:
        1px dashed rgba(10, 58, 128, 0.35);

    border-radius:
        var(--product-radius-small);

    background:
        rgba(255, 255, 255, 0.76);

    color:
        var(--color-primary, #0a3a80);

    font-size: 0.95rem;

    font-weight: 600;

    line-height: 1.6;

    backdrop-filter: blur(10px);

}


/* =========================================================
   7. HERO CONTENT
   ========================================================= */

.product-hero-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding:
        clamp(40px, 6vw, 84px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfbfc 100%
        );

}

.product-brand-logo {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 118px;

    min-height: 72px;

    margin-bottom: var(--space-8, 32px);

    padding:
        var(--space-3, 12px)
        var(--space-5, 20px);

    border:
        1px solid var(--product-border);

    border-radius:
        var(--product-radius-small);

    background: #ffffff;

    color:
        var(--color-primary, #0a3a80);

    box-shadow:
        0 12px 30px rgba(10, 58, 128, 0.08);

    font-size: 1rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}

.product-brand-logo img {

    display: block;

    width: auto;

    max-width: 170px;

    max-height: 72px;

    object-fit: contain;

}

.product-category {

    margin:
        0
        0
        var(--space-3, 12px);

    color:
        var(--color-secondary-dark, #8d6a3f);

    font-size: 0.85rem;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}

.product-hero-content h1 {

    max-width: 520px;

    margin: 0;

    color:
        var(--color-primary-dark, #062b61);

    font-size:
        clamp(2.25rem, 4vw, 4.75rem);

    font-weight: 700;

    line-height: 1.06;

    letter-spacing: -0.04em;

    overflow-wrap: anywhere;

}


/* =========================================================
   8. PRODUCT INTRODUCTION
   ========================================================= */

.product-introduction {

    padding:
        clamp(72px, 9vw, 128px)
        0;

    background:
        var(--product-surface);

}

.product-introduction-content {

    max-width: 920px;

    margin: 0 auto;

    text-align: center;

}

.product-introduction
.section-eyebrow {

    margin-bottom: var(--space-4, 16px);

}

.product-introduction
.section-title {

    max-width: 760px;

    margin:
        0
        auto
        var(--space-7, 28px);

}

.product-description {

    max-width: 880px;

    margin: 0 auto;

    color:
        var(--product-text-soft);

    font-size:
        clamp(1rem, 1.4vw, 1.125rem);

    line-height: 1.9;

}


/* =========================================================
   9. PRODUCT HIGHLIGHTS
   ========================================================= */

.product-highlights {

    padding:
        clamp(72px, 9vw, 128px)
        0;

    background:
        var(--product-surface-soft);

}

.product-highlights
.section-header {

    max-width: 780px;

    margin:
        0
        auto
        var(--space-10, 40px);

    text-align: center;

}

.product-highlights-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        var(--space-6, 24px);

}

.product-highlight-card {

    position: relative;

    min-height: 280px;

    padding:
        clamp(28px, 4vw, 44px);

    background:
        var(--product-surface);

    border:
        1px solid var(--product-border);

    border-radius:
        var(--product-radius-medium);

    box-shadow:
        0 16px 40px rgba(10, 35, 70, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    overflow: hidden;

}

.product-highlight-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary, #0a3a80),
            var(--color-secondary, #b28a58)
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.3s ease;

}

.product-highlight-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(10, 58, 128, 0.24);

    box-shadow:
        var(--product-shadow-hover);

}

.product-highlight-card:hover::before {

    transform: scaleX(1);

}

.product-highlight-number {

    display: block;

    margin-bottom: var(--space-6, 24px);

    color:
        var(--color-secondary, #b28a58);

    font-size: 0.9rem;

    font-weight: 700;

    letter-spacing: 0.14em;

}

.product-highlight-card h3 {

    margin:
        0
        0
        var(--space-4, 16px);

    color:
        var(--color-primary-dark, #062b61);

    font-size:
        clamp(1.25rem, 2vw, 1.5rem);

    line-height: 1.3;

}

.product-highlight-card p {

    margin: 0;

    color:
        var(--product-text-soft);

    font-size: 1rem;

    line-height: 1.75;

}


/* =========================================================
   10. PRODUCT CTA
   ========================================================= */

.product-cta {

    padding:
        clamp(72px, 9vw, 128px)
        0;

    background:
        var(--product-surface);

}

.product-cta-content {

    position: relative;

    max-width: 1040px;

    margin: 0 auto;

    padding:
        clamp(44px, 7vw, 86px);

    text-align: center;

    background:

        linear-gradient(
            135deg,
            rgba(10, 58, 128, 0.96),
            rgba(6, 43, 97, 0.98)
        );

    border-radius:
        var(--product-radius-large);

    box-shadow:
        0 28px 70px rgba(6, 43, 97, 0.24);

    overflow: hidden;

}

.product-cta-content::before {

    content: "";

    position: absolute;

    top: -120px;

    right: -120px;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.07);

}

.product-cta-content::after {

    content: "";

    position: absolute;

    bottom: -150px;

    left: -100px;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background:
        rgba(178, 138, 88, 0.12);

}

.product-cta-content > * {

    position: relative;

    z-index: 1;

}

.product-cta
.section-eyebrow {

    color:
        var(--color-secondary-light, #d8c09f);

}

.product-cta h2 {

    max-width: 700px;

    margin:
        0
        auto
        var(--space-5, 20px);

    color: #ffffff;

    font-size:
        clamp(2rem, 4vw, 3.5rem);

    line-height: 1.15;

    letter-spacing: -0.03em;

}

.product-cta p {

    max-width: 700px;

    margin:
        0
        auto
        var(--space-8, 32px);

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 1rem;

    line-height: 1.8;

}

.product-cta
.btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding:
        14px
        28px;

    border:
        1px solid rgba(255, 255, 255, 0.30);

    border-radius: 999px;

    background: #ffffff;

    color:
        var(--color-primary-dark, #062b61);

    text-decoration: none;

    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;

}

.product-cta
.btn-primary:hover {

    transform: translateY(-3px);

    background:
        var(--color-secondary-light, #d8c09f);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.18);

}

.product-cta
.btn-primary:focus-visible {

    outline:
        3px solid
        var(--color-secondary-light, #d8c09f);

    outline-offset: 5px;

}


/* =========================================================
   11. LARGE TABLET
   ========================================================= */

@media (max-width: 1200px) {

    .product-hero-layout {

        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(300px, 0.85fr);

        min-height: 560px;

    }

    .product-hero-media,
    .product-hero-media img,
    .image-placeholder {

        min-height: 560px;

    }

}


/* =========================================================
   12. TABLET
   ========================================================= */

@media (max-width: 992px) {

    .product-hero {

        padding-top:
            calc(
                var(--header-height, 90px)
                + var(--space-6, 24px)
            );

    }

    .product-hero-layout {

        grid-template-columns: 1fr;

        min-height: auto;

    }

    .product-hero-media,
    .product-hero-media img,
    .image-placeholder {

        min-height: 500px;

    }

    .product-hero-content {

        padding:
            clamp(36px, 7vw, 60px);

    }

    .product-highlights-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .product-highlight-card:last-child {

        grid-column: 1 / -1;

    }

}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .product-hero {

        padding-bottom:
            var(--space-8, 32px);

    }

    .breadcrumb {

        margin-bottom:
            var(--space-5, 20px);

        font-size: 0.8rem;

    }

    .product-hero-layout {

        border-radius:
            var(--product-radius-medium);

    }

    .product-hero-media,
    .product-hero-media img,
    .image-placeholder {

        min-height: 400px;

    }

    .product-hero-content {

        align-items: center;

        padding:
            var(--space-8, 32px)
            var(--space-5, 20px)
            var(--space-10, 40px);

        text-align: center;

    }

    .product-brand-logo {

        margin-bottom:
            var(--space-6, 24px);

    }

    .product-hero-content h1 {

        max-width: 100%;

        font-size:
            clamp(2rem, 10vw, 3.4rem);

    }

    .product-introduction,
    .product-highlights,
    .product-cta {

        padding:
            var(--space-12, 48px)
            0;

    }

    .product-description {

        line-height: 1.8;

    }

    .product-highlights-grid {

        grid-template-columns: 1fr;

    }

    .product-highlight-card:last-child {

        grid-column: auto;

    }

    .product-highlight-card {

        min-height: auto;

    }

    .product-cta-content {

        border-radius:
            var(--product-radius-medium);

    }

}


/* =========================================================
   14. SMALL MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .product-hero {

        padding-top:
            calc(
                var(--header-height, 80px)
                + var(--space-4, 16px)
            );

    }

    .breadcrumb {

        gap: 6px;

    }

    .product-hero-media,
    .product-hero-media img,
    .image-placeholder {

        min-height: 330px;

    }

    .image-placeholder {

        padding:
            var(--space-5, 20px);

    }

    .image-placeholder span {

        min-height: 76px;

        padding:
            var(--space-3, 12px)
            var(--space-4, 16px);

        font-size: 0.85rem;

    }

    .product-brand-logo {

        min-width: 100px;

        min-height: 62px;

    }

    .product-category {

        font-size: 0.78rem;

    }

    .product-description {

        font-size: 0.98rem;

    }

    .product-highlight-card {

        padding:
            var(--space-6, 24px);

    }

    .product-cta-content {

        padding:
            var(--space-10, 40px)
            var(--space-5, 20px);

    }

    .product-cta
    .btn-primary {

        width: 100%;

    }

}


/* =========================================================
   15. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .product-hero-media img,
    .product-highlight-card,
    .product-highlight-card::before,
    .product-cta .btn-primary,
    .breadcrumb a {

        transition: none;

    }

    .product-hero-layout:hover
    .product-hero-media img {

        transform: none;

    }

    .product-highlight-card:hover,
    .product-cta
    .btn-primary:hover {

        transform: none;

    }

}


/* =========================================================
   16. PRINT
   ========================================================= */

@media print {

    .product-hero {

        padding: 24px 0;

        background: #ffffff;

    }

    .breadcrumb,
    .product-cta {

        display: none;

    }

    .product-hero-layout {

        grid-template-columns: 1fr 1fr;

        min-height: auto;

        border:
            1px solid #cccccc;

        box-shadow: none;

    }

    .product-hero-media,
    .product-hero-media img,
    .image-placeholder {

        min-height: 360px;

    }

    .product-introduction,
    .product-highlights {

        padding: 32px 0;

    }

    .product-highlights {

        background: #ffffff;

    }

    .product-highlight-card {

        min-height: auto;

        box-shadow: none;

        break-inside: avoid;

    }

}