/* Studio Vivre 3D profile viewer section */

.profile-viewer-section {
    background: #F7F3EF;
}

.profile-viewer-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 40px;
    align-items: start;
}

.viewer-panel {
    background: #FFFFFF;
    padding: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

#stl-viewer {
    width: 100%;
    height: 600px;
    min-height: 600px;
    background: #FFFFFF;
    border: 1px solid rgba(63, 63, 63, 0.08);
    overflow: hidden;
    position: relative;
}

#stl-viewer canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.profile-specifications {
    background: #FFFFFF;
    padding: 40px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.profile-specifications h3 {
    margin-bottom: 30px;
    color: #3F3F3F;
}

.profile-specifications dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0 0 30px;
}

.profile-specifications dt {
    font-weight: 700;
    color: #3F3F3F;
}

.profile-specifications dd {
    margin: 0;
    color: rgba(63, 63, 63, 0.75);
}

.viewer-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3F3F3F;
    font-weight: 700;
    text-align: center;
    background: #FFFFFF;
    padding: 24px;
}

@media (max-width: 900px) {
    .profile-viewer-layout {
        grid-template-columns: 1fr;
    }

    #stl-viewer {
        height: 450px;
        min-height: 450px;
    }

    .profile-specifications {
        padding: 30px;
    }
}

@media (max-width: 560px) {
    #stl-viewer {
        height: 360px;
        min-height: 360px;
    }

    .viewer-panel {
        padding: 12px;
    }
}


/* Full-width heading alignment fix */
.section-heading{
    max-width:none !important;
    width:100% !important;
}

.section-heading h2{
    max-width:none !important;
    width:100% !important;
}

.range-hero .hero-content,
.range-hero .hero-copy{
    max-width:1240px !important;
    width:100% !important;
}


/* Hero width optimisation */
.home-hero .hero-content,
.polished-hero .hero-content,
.why-hero .hero-content{
    max-width: 1100px !important;
    width: 100% !important;
}

.home-hero h1,
.polished-hero h1,
.why-hero h1{
    max-width: 1100px !important;
    width: 100%;
    line-height: 0.9;
}


/* Global hero/header width optimisation across all pages */
.hero .hero-content,
.home-hero .hero-content,
.compact-hero .hero-content,
.page-hero .hero-content,
.range-hero .range-hero-copy,
.why-hero .hero-content,
.polished-hero .hero-content {
    max-width: 1100px !important;
    width: 100% !important;
}

.hero .hero-content h1,
.home-hero .hero-content h1,
.compact-hero .hero-content h1,
.page-hero .hero-content h1,
.range-hero .range-hero-copy h1,
.why-hero .hero-content h1,
.polished-hero .hero-content h1 {
    max-width: 1100px !important;
    width: 100% !important;
    line-height: 0.92;
}

.hero .hero-content p,
.home-hero .hero-content p,
.compact-hero .hero-content p,
.page-hero .hero-content p,
.range-hero .range-hero-copy p,
.why-hero .hero-content p,
.polished-hero .hero-content p {
    max-width: 820px !important;
}

/* Keep button rows aligned with the wider heading */
.hero .button-row,
.home-hero .button-row,
.compact-hero .button-row,
.page-hero .button-row,
.range-hero .button-row {
    max-width: 1100px !important;
}

@media (max-width: 900px) {
    .hero .hero-content,
    .home-hero .hero-content,
    .compact-hero .hero-content,
    .page-hero .hero-content,
    .range-hero .range-hero-copy,
    .why-hero .hero-content,
    .polished-hero .hero-content {
        max-width: 100% !important;
    }

    .hero .hero-content h1,
    .home-hero .hero-content h1,
    .compact-hero .hero-content h1,
    .page-hero .hero-content h1,
    .range-hero .range-hero-copy h1,
    .why-hero .hero-content h1,
    .polished-hero .hero-content h1 {
        line-height: 1.02;
    }
}


/* Aura page cleanup: remove duplicate Kitchen Details layout and make About full width */
.about-range-full {
    display: block !important;
    max-width: var(--site-container, 1240px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.about-range-full .range-story {
    width: 100% !important;
    max-width: none !important;
}

.about-range-full .range-story p {
    max-width: none !important;
}

/* Keep the profile viewer as the primary technical/specification area */
.profile-viewer-section .profile-viewer-layout {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

/* If a page has no duplicated aside, prevent empty grid space */
.range-details.about-range-full > aside.spec-panel {
    display: none !important;
}

@media (max-width: 900px) {
    .profile-viewer-section .profile-viewer-layout {
        grid-template-columns: 1fr;
    }
}


/* Home Office gallery improvement */
.home-office-gallery,
.gallery-grid.home-office-gallery{
    grid-template-columns:repeat(3,1fr) !important;
    gap:24px !important;
}

.home-office-gallery img,
.home-office-gallery .gallery-item img{
    width:100% !important;
    height:450px !important;
    object-fit:cover !important;
    display:block;
}

/* Force final three showcase images to display large */
.home-office-gallery img:nth-last-child(-n+3),
.home-office-gallery .gallery-item:nth-last-child(-n+3) img{
    width:100% !important;
    height:500px !important;
    object-fit:cover !important;
}


/* Home Office gallery structure fix */
.home-office-showcase-fixed {
    max-width: var(--site-container, 1240px) !important;
}

.home-office-showcase-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

.home-office-showcase-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 430px !important;
    overflow: hidden !important;
    background: #3F3F3F !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.10) !important;
}

.home-office-showcase-card:nth-child(1),
.home-office-showcase-card:nth-child(2) {
    grid-column: span 1 !important;
}

.home-office-showcase-card img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Override older rules causing final images to show as vertical strips */
.home-office-gallery img,
.home-office-gallery .image-card img,
.home-office-gallery .gallery-item img,
.home-office-showcase-fixed img {
    width: 100% !important;
    max-width: none !important;
}

@media (min-width: 1000px) {
    .home-office-showcase-card:nth-child(1) {
        grid-column: span 2 !important;
        height: 520px !important;
    }

    .home-office-showcase-card:nth-child(2) {
        height: 520px !important;
    }
}

@media (max-width: 900px) {
    .home-office-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .home-office-showcase-card,
    .home-office-showcase-card:nth-child(1),
    .home-office-showcase-card:nth-child(2) {
        grid-column: span 1 !important;
        height: 320px !important;
    }
}

@media (max-width: 560px) {
    .home-office-showcase-grid {
        grid-template-columns: 1fr !important;
    }

    .home-office-showcase-card {
        height: 300px !important;
    }
}


/* Footer separation spacer for Find a Retailer CTA */
.footer-spacer{
    height:80px;
    background:#F7F3EF;
    width:100%;
}


/* Made to measure viewer + lifestyle image stack */
.profile-viewer-layout {
    align-items: stretch;
}

.profile-viewer-media {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.profile-image-panel {
    display: block;
    background: #FFFFFF;
    padding: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.profile-image-panel img {
    display: block;
    width: 100%;
    height: 600px;
    object-fit: cover;
    border: 1px solid rgba(63, 63, 63, 0.08);
    background: #FFFFFF;
}

.profile-viewer-layout > .profile-specifications {
    height: 100%;
}

@media (max-width: 900px) {
    .profile-image-panel img {
        height: 450px;
    }
}

@media (max-width: 560px) {
    .profile-image-panel {
        padding: 12px;
    }

    .profile-image-panel img {
        height: 360px;
    }
}