.container.main-content {
    max-width: 100vw !important;
}
.main-content img {
    max-width: none !important;
}

/* Fix 1: Override AOS injecting position:static */
#inquire-form {
    position: relative !important;
}

/* Fix 2 & 3: Ensure sticky works inside the grid */
.section-form {
    align-items: start;
    overflow: visible;
}

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Great+Vibes&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@font-face {
    font-family: 'NeutraTextTF-Book';
    src: url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/fonts/NeutraTextTF-Book.woff2') format('woff2'),
    url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/fonts/NeutraTextTF-Book.woff') format('woff'),
    url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/fonts/NeutraTextTF-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Prevents invisible text while loading */
}
@font-face {
    font-family: 'NeutraTextTF-Bold';
    src: url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/fonts/NeutraTextTF-Bold.woff2') format('woff2'),
    url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/fonts/NeutraTextTF-Bold.woff') format('woff'),
    url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/fonts/NeutraTextTF-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Prevents invisible text while loading */
}
:root {
    --gold-color: #C1964A;
    --primary-color: #0c4b44;
    --text-color: #323232;
    --light-bg: #e4edf1;
    --light-darker-bg: #DCE8ED;
    --light-gray: #f9f9f9;
    --white: #ffffff;
    --black: #000000;
    --font-abril: 'Abril Fatface', serif;
    --font-body: 'NeutraTextTF-Book', sans-serif;
    --font-body-bold: 'NeutraTextTF-Bold', sans-serif;
    --font-body-bold-italic: 'NeutraTextTF-BoldItalic', sans-serif;
    --font-accent: 'Josefin Sans', sans-serif;
    --menu-color: #ffffff;
    --menutop: 0;
    --transition: all 0.3s ease;
    --menu-transition: all 0.01s ease;
    --border-radius: 4px;
    --spacer: 20px;
    --shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    --section-padding: 40px;
    --mobile-section-padding: 50px;

    --main-color: #608B7A;
    --switch-bg: #083632;
    --switch-outline: #083632;

    --gradient-360-first: #608B7A;
    --gradient-360-second: #083632;
    --360-border-color: #379284;
    --hand-hint-svg-bg: #379284;

    --section-360-gradient: radial-gradient(circle at 100% 100%, var(--gradient-360-first) 0%, var(--gradient-360-second) 120%);
    --section-360-gradient-viewer: var(--section-360-gradient);

    /* Font settings will be set by JavaScript */
    --font-heading: 'Abril Fatface', serif; /* Default for Portofino */
    --font-heading-line-height: 1.1;
    --font-heading-size-multiplier: 1;

    /*    BG IMAGES */

    --section-avellaero-global-bg: url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/images/avellaero/hero_bg.webp');
    --section-appliances-audio-global-bg: url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/images/content/background/appliances-audio-bg.webp');

    --pg_gi_img-bg: url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/images/PGI-CTA-mobile.svg');

    --section-avellaero-bg: url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/images/content/mykonos/appliances/avellaero_bg.webp');
    --section-appliances-grills-bg: url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/images/content/mykonos/appliances/grill-bg.webp');
    --section-appliances-stainless-bg: url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/images/content/mykonos/appliances/stainless-bg.webp');
    --section-appliances-audio-bg: url('https://paradisegrillsdirect.com/wp-content/themes/salient-child/POS-485/assets/images/content/mykonos/appliances/entertainment_bg.webp');
}

/* =========================================
   1. ROOT VARIABLES & GLOBAL STYLES
   ========================================= */

* {
    box-sizing: border-box;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body) !important;
    background-color: var(--light-bg);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    body {
        font-size: 0.8rem;
    }

}
@media (min-width: 1024px) {
    .mobile-only {
        display: none !important;
    }
}
@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }
}


/* =========================================
   2. UTILITY & HELPER CLASSES
   ========================================= */

.gold {
    /*background: linear-gradient(to right, #ffae00, #ff8000);*/
    background: #C1964A;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.text-left {
    text-align: left;
}

.bold {
    font-family: var(--font-body-bold);
}

.bold-italic {
    font-weight: bold;
    font-style: italic;
}

/* Add this class when image errors occur */
img.broken-image {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =========================================
   COMMON
   ========================================= */
.mobile-break {
    display: none;
}

@media (max-width: 600px) {
    .mobile-break {
        display: inline;
    }
}

.divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin: 30px 0;
}

@media (max-width: 1024px) {
    .divider {
        display: none;
    }
}

.container-padding {
    margin: 0 auto;
    padding: 0 var(--spacer);
}

.section {
    padding: var(--section-padding) 0;
    overflow-x: clip;
    width: 100vw;
}

.section_p-0 {
    padding: 0;
}

.section__content {
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 30px;
}

.section__title {
    font-family: var(--font-heading);
    font-size: calc(clamp(2.5rem, 5vw, 4.5rem) * var(--font-heading-size-multiplier));
    margin-bottom: 30px;
    margin-top: 0;
    line-height: var(--font-heading-line-height);
    will-change: transform;
}

.section__pretitle {
    font-size: 1.125rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: var(--font-body-bold);
    position: relative;
}


.btn-container {
    display: flex;
    gap: var(--spacer);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.btn-container_left {
    justify-content: flex-start;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    background-color: var(--white);
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-family: var(--font-body-bold);
}

.btn.black {
    background-color: var(--black);
    color: var(--white);
}

.btn.black img {
    filter: brightness(0) invert(1);
}

.btn:hover {
    color: #323232;
    background-color: #f0f0f0;
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.btn.black:hover {
    color: var(--white);
    background-color: #222222;
}

@media (max-width: 768px) {
    .btn {
        padding: 10px 22px !important;
    }
}

@media (max-width: 600px) {
    .btn {
        padding: 10px !important;
    }
}

/* =========================================
   END COMMON
   ========================================= */

/* =========================================
   SECTION PRODUCT-HERO
   ========================================= */
.hero-container {
    height: auto;
    position: relative;
    overflow: hidden;
}

.hero {
    position: relative;
    width: 100%;
    /* 1920 / 1336 aspect ratio calculation */
    aspect-ratio: 1920 / 1336;
    max-width: 1920px;
    margin: 0 auto;
    /* Safety for smaller screens */
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: 0;
}
.intro-image-element {
    width: 100%;
    height: 100% !important;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-content {
    top: 200px;
    position: absolute;
    z-index: 3;
    text-align: center;
    color: var(--white);
    max-width: 800px;
    padding: 0 20px;
    transition: opacity 0.8s ease, transform 0.8s ease;
    width: fit-content; /* Container shrinks to content width */
}

.hero-title {
    font-family: var(--font-heading);
    margin-bottom: 20px;
    line-height: var(--font-heading-line-height);
    /* Make title match subtitle width */
    max-width: 500px; /* Same as subtitle */
    width: 100%;
    /* Scale font size to fit within 500px */
    font-size: calc(7rem * var(--font-heading-size-multiplier));
    white-space: nowrap;
}

.hero-subtitle {
    font-family: var(--font-accent);
    font-size: 18px;
    max-width: 500px; /* Same as title */
    width: 100%;
    margin: 0 auto 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media (max-width: 1024px) {
    .hero-content img {
        /*width: 80vw;*/
    }
    .hero {
        min-height: 500px;
    }
    .hero-content {
        top: 50px;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 500px;
    }

    .hero-bg {
        height: 100% !important;
    }
}

/* =========================================
   END SECTION PRODUCT-HERO
   ========================================= */

/* =========================================
   SECTION PRODUCT-INTRO
   ========================================= */
.section-intro {
    position: relative;
    height: 100vh;
    background-color: var(--light-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Stacking Context Level 10 */
    width: 100%;
    will-change: transform;
}

.section-text-over-image {
    color: var(--white);
    position: relative;
    height: 100vh;
    background-color: var(--light-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Stacking Context Level 10 */
    width: 100%;
    will-change: transform;
}
.section-text-over-image .overlay {
    position: absolute;
}

.section-intro-expand {
    position: relative;
    height: 100vh;
    background-color: var(--light-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Stacking Context Level 10 */
    width: 100%;
    will-change: transform;
}

/* text must never be wider than video content */
.section-intro-expand .content-on-video {
    max-width: min(90%, 80vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100vh;
}

/* Forced line break */
.section-intro-expand .section__title-intro span {
    display: block;
}

.section-intro-expand .section__content {
    max-width: 60vw;
    margin: 0 auto;
}

/* text must never be wider than video content */
.section-intro .content-on-video {
    max-width: min(90%, 80vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100vh;
}

/* Forced line break */
.section-intro .section__title span {
    display: block;
}

.section-intro .section__content {
    max-width: 60vw;
    margin: 0 auto;
}

.section-intro__video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.video-clipper {
    width: min(90%, 80vw); /* Initial Width */
    height: 70vh; /* Initial Height */
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.video-clipper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-clipper #intro-video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.intro-image-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient: Dark at top, clear at bottom */
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.8) 40%,
            rgba(0, 0, 0, 0.5) 70%
    );
    z-index: 3;
    pointer-events: none;
}

.content-on-video {
    position: relative;
    z-index: 10;
    color: var(--white);
    max-width: 1100px;
    margin-top: 0;
}

.content-on-video .section__pretitle,
.content-on-video .section__title,
.content-on-video .section__content {
    color: var(--white);
}

.section__title-intro {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 4.5rem);
    margin-bottom: 30px;
    margin-top: 0;
}

@media (max-width: 1024px) {
    .content-on-video {
        max-width: 800px;
    }
}

@media (max-width: 768px) {
    .content-on-video .section__content {
        font-size: 1.3rem;
    }
    .content-on-video {
        line-height: 1.5rem;
    }
    .section__title-intro {
        line-height: 2rem;
    }
}

@media (max-width: 600px) {
    .content-on-video .section__content {
        font-size: 1.1rem;
    }
}

/* =========================================
   END SECTION PRODUCT-INTRO
   ========================================= */

/* =========================================
   SECTION PRODUCT-MOOD
   ========================================= */
.section-captured {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.section-captured:after {
    position: absolute;
    z-index: 0;
    content: var(--section-captured-after-content, none);
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(0, 0, 0, 0.65);
}

.section-captured img {
    width: 100%;
    height: auto;
}

.section-captured .image-overlay-content {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    background: rgba(12, 75, 68, 0.85); /* Consider using var(--primary-color) with opacity */
    color: var(--white);
    padding: 60px 50px;
    max-width: 500px;
    width: 90%;
    z-index: 10; /* On top of images */
}

.section-captured .image-overlay-content-auto-top {
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    align-items: end;
}

.section-captured .image-overlay-content h4 {
    font-family: var(--font-heading);
    font-size: calc(2.8125rem * var(--font-heading-size-multiplier));
    line-height: var(--font-heading-line-height);
    margin-bottom: 0px;
    text-align: right;
}

@media (max-width: 1024px) {
    .section-captured .image-overlay-content {
        padding: 30px;
        position: absolute;
        top: auto;
        right: 0;
        transform: none;
        width: 100%;
        margin: 0 auto;
        left: auto;
    }
}

@media (max-width: 768px) {
    .section-captured {
        flex-direction: column;
        overflow: hidden;
        height: 50vh;
    }

    .section-captured img {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .section-captured .image-overlay-content h4 {
        max-width: 30vh !important;
    }

    .section-captured .image-overlay-content h4 {
        max-width: 30vh !important;
        margin-bottom: 0;
        font-size: calc(1.8rem * var(--font-heading-size-multiplier));
        backdrop-filter: blur(1px);
    }

    .section-captured .btn-container {
        margin-top: 15px;
    }
}

@media screen and (max-width: 700px) {
    .section-captured .image-overlay-content {
        padding: 2rem var(--spacer);
        justify-content: flex-end;
    }
}

@media (max-width: 600px) {
    .section-captured {
        padding: 20px;
    }
}

/* =========================================
   END SECTION PRODUCT-MOOD
   ========================================= */

/* =========================================
   SECTION PRODUCT-STORY
   ========================================= */
.section-story {
    padding: 0;
}
.section-story .description-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*gap: 60px;*/
    align-items: center;
}

.section-story .description-image img {
    width: 50vw;
    height: auto;
    display: block;
}
.section-story__content-wrapper {
    padding-right: 60px;
    padding-left: 60px;
}
@media (max-width: 1024px) {
    .section-story .description-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 0;
    }

    .section-story .description-image img {
        width: 100%;
        height: auto;
    }
    .section-story__content-wrapper {
        padding: var(--spacer);
    }

}

@media (max-width: 600px) {
    .section-story .description-grid .section__content {
        font-size: 1.1rem;
        line-height: 1.6;
    }
}

/* =========================================
   END SECTION PRODUCT-STORY
   ========================================= */

/* =========================================
   SECTION FEATURES-GI
   ========================================= */
.configuration {
    background-color: var(--black);
    color: rgba(202, 191, 191, 1);
    padding: 0;
    position: relative;
}

.configuration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 100vh;
    background-color: var(--black);
}

/* Sticky wrapper for desktop - contains both controls */
.sticky-controls-wrapper {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 10px;
    height: fit-content;
    z-index: 10;
    background-color: var(--black);
}

/* Remove individual sticky positioning since wrapper handles it */
.sticky-controls-wrapper .pg_gi_controls {
    position: static;
}

.pg_gi_controls {
    padding: 0 7em;
    text-align: left;
    color: #fff;
    max-width: 100%;
    height: fit-content;
}

.pg_gi_controls:nth-child(1) {
    padding-top: 7em;
}

.pg_gi_controls:nth-child(2) {
    padding-bottom: 7em;
}

.pg_gi_wrapper {
    color: #fff;
    width: 100%;
    font-family: 'NeutraTextTF-Light';
    height: 100%;
    max-width: 1300px;
    margin: auto;
    justify-items: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.pg_gi_wrapper {
    grid-column: 2;
    /*height: 100vh;*/
    overflow-y: auto;
    position: relative;
}

.pg_gi_controls_header {
    color: var(--main-color);
    font-family: 'Neutra Text TF', sans-serif;
    font-size: 30px
}

.toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 30px;
}

.pg_gi_switch {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1em;
    align-items: center;
    justify-content: left;
    margin: 10px 0;
    cursor: pointer;
    text-transform: uppercase;
}

.pg_gi_switch input {
    display: none;
}

.pg_gi_slider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 30px;
    line-height: 100%;
    font-family: "Neutra Text TF";
    padding: 0 0.3em;
    width: 3.5em;
    height: 1em;
    background: #ffffff10;
    border-radius: 1em;
    position: relative;
    transition: background 0.3s;
    outline: #FFFFFF19 solid 0.08em;
}

.pg_gi_slider_i {
    font-size: 30px;
    margin-left: 0.1em;
    width: 0.095em;
    background: #fff;
    height: 0.4em;
}

.pg_gi_slider_o {
    font-size: 30px;
    width: 0.4em;
    height: 0.4em;
    border-radius: 1em;
    border: 0.1em solid #ffffff10;
}

.pg_gi_slider::before {
    content: "";
    position: absolute;
    top: 0.1em;
    left: 0.1em;
    width: 1.75em;
    height: 0.8em;
    background: #D1D1D1;
    border-radius: 1.5em;
    transition: all 0.3s;
    box-shadow: 0.05em 0.1em 4px 0px rgba(0, 0, 0, 0.275)
}

input:checked + .pg_gi_slider {
    background: var(--switch-bg);
    outline-color: var(--switch-outline);
}

input:checked + .pg_gi_slider::before {
    transform: translateX(1em);
    box-shadow: -0.05em 0.1em 4px 0px rgba(0, 0, 0, 0.275);
    background: white;
    left: auto;
    right: 1.1em;
}

.pg_gi_switch > .pg_gi_slider_text {
    color: var(--white);
}

.pg_gi_img-bg {
    z-index: 20;
    opacity: 1; /* Initial state */
    width: 50%;
    position: absolute;
    right: 135px;
    bottom: 200px;
    /* Ensure clicks pass through to the controls underneath */
    pointer-events: none;
    /* Smooth transition for JS changes */
    will-change: opacity;
}

.pg_gi_images {
    aspect-ratio: 456/625;
    position: relative;
    width: 100% !important;
    height: 100%;
    margin: 0;
}

.pg_gi_images img {
    position: absolute;
    opacity: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    transition: all 0.25s ease;
    object-fit: cover;
}

#pg_gi_grill-lighting,
.pg_gi_img-lighter {
    mix-blend-mode: screen;
}

.pg_gi_img_multiply {
    mix-blend-mode: multiply;
}

.pg_gi_images img.pg_gi_active,
.pg_gi_images .pg_gi_active img {
    opacity: 1;
}

.pg_gi_images > img:not(.pg_gi_active) {
    opacity: 0;
}

@keyframes pg_gi_rainbowlogo {
    0% {
        filter: hue-rotate(0deg)
    }
    10% {
        filter: hue-rotate(36deg)
    }
    20% {
        filter: hue-rotate(72deg)
    }
    30% {
        filter: hue-rotate(180deg)
    }
    40% {
        filter: hue-rotate(144deg)
    }
    50% {
        filter: hue-rotate(180deg)
    }
    60% {
        filter: hue-rotate(216deg)
    }
    70% {
        filter: hue-rotate(252deg)
    }
    80% {
        filter: hue-rotate(288deg)
    }
    90% {
        filter: hue-rotate(384deg)
    }
    100% {
        filter: hue-rotate(360deg)
    }
}

@keyframes pg_gi_pulse {
    0% {
        opacity: 0.9
    }
    25% {
        opacity: 0.7
    }
    50% {
        opacity: 0.6
    }
    75% {
        opacity: 0.5
    }
    100% {
        opacity: 0.9
    }
}

.pg_gi_pulse {
    opacity: 0;
    mix-blend-mode: plus-lighter;
    transition: all 0.25s ease;
}

.pg_gi_pulse.pg_gi_active {
    opacity: 1;
}

.pg_gi_img-rainbow {
    animation: pg_gi_pulse 6.5s infinite, pg_gi_rainbowlogo 20s infinite;
}

.pg_gi_description {
    margin-top: 2rem;
    font-size: 0.8rem;
    line-height: 120%;
}

@media (max-width: 1500px) {
    .toggle-grid {
        gap: 5px 30px !important;
        margin-top: 18px !important;
    }

    .pg_gi_slider {
        width: clamp(2em, 8vw, 3.5em) !important;
        font-size: 26px !important;
    }

    .pg_gi_img-bg {
        right: clamp(20px, 4vw, 700px) !important;
        bottom: 150px !important;
    }
}

@media (max-width: 1024px) {
    .configuration-grid {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    /* Break the wrapper on mobile using display: contents */
    .sticky-controls-wrapper {
        display: contents; /* Makes children act as direct children */
        position: static;
        background-color: transparent;
    }

    .pg_gi_wrapper {
        order: 2; /* Image comes between */
        height: auto;
        overflow-y: visible;
    }

    .pg_gi_controls_header {
        font-size: 2em !important;
    }

    .pg_gi_controls:nth-child(1) {
        padding: 4em var(--spacer) 1em var(--spacer)!important;
        order: 1; /* First control comes first */
    }

    .pg_gi_controls:nth-child(2) {
        padding: 3em var(--spacer) !important;
        order: 3; /* Second control comes last */
    }

    .toggle-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0 !important;
        margin-top: 20px !important;
    }

    .pg_gi_slider {
        width: clamp(3.2em, 8vw, 5em) !important;
        font-size: 25px !important;
    }

    .pg_gi_img-bg {
        right: 0 !important;
        bottom: clamp(200px, 500px - 15vw, 540px) !important;
        width: 68px;
        height: 116px;
        right: 0;
        content: "";
        display: none;
    }

    .pg_gi_images {
        height: 70vh;
        width: 144%;
        order: -1;
    }
}

@media (max-width: 768px) {
    .pg_gi_img-bg {
        bottom: clamp(20px, 470px - 15vw, 340px) !important;
        width: 90%;
    }

    .pg_gi_images {
        width: 100%;
        height: 50vh;
    }
}

@media (max-width: 600px) {
    .pg_gi_controls:nth-child(1) {
        padding: 3em var(--spacer) 0 var(--spacer) !important;
    }

    .pg_gi_controls_header {
        font-size: 1.3em !important;
    }

    .pg_gi_switch {
        display: block !important;
    }

    .pg_gi_switch > .pg_gi_slider_text {
        display: block;
        margin-top: 10px;
        line-height: 1.1;
        font-size: 0.72rem !important;
    }

    .pg_gi_img-bg {
        right: 0 !important;
        bottom: clamp(120px, 500px - 25vw, 400px) !important
    }
}

/* Fallback for browsers that don't support display: contents */
@supports not (display: contents) {
    @media (max-width: 1024px) {
        .sticky-controls-wrapper {
            display: block;
            order: 1;
        }

        .sticky-controls-wrapper > .pg_gi_controls:nth-child(2) {
            order: 3;
            margin-top: 0;
        }
    }
}

/* =========================================
   END SECTION FEATURES-GI
   ========================================= */

/* =========================================
   SECTION 360
   ========================================= */
.grid-360-container {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 50px;
    align-items: center;
    position: relative;
    top: 30px;
    margin-top: 100px;
    max-width: 1600px;
}

.description-360 {
    text-align: left;
}

.viewer-360-frame {
    /* Ensure the frame handles content correctly */
    position: relative;
    background-color: var(--light-darker-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 70vh;
}

#viewer360Img {
    /* Ensure image fits within the 80vh container */
    /*max-height: 80vh;*/
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

#viewer360Video {
    /* FIX: Force video to fill the wrapper */
    width: 100%;
    /*height: 100%;*/
    position: absolute;
    /*top: 0;*/
    left: 0;
    z-index: 2;
    display: none;
    /* Changed to cover so it doesn't look tiny, or contain if you want to see edges */
    object-fit: contain;
}

.viewer-wrapper {
    /* FIX: Wrapper must fill the frame so the absolute video knows how big to be */
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Removing negative top margin that might be clipping content */
    top: -60px;
}

.hand-hint-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    pointer-events: none;
    transition: opacity 0.5s, visibility 0.5s;
}

.hand-hint-container.hint-hidden {
    opacity: 0;
    visibility: hidden;
}

.hand-hint-anim {
    width: 180px;
    height: auto;
}
.hand-hint-svg-bg {
    fill: var(--hand-hint-svg-bg, #0C4B44)
}
.color-switcher {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 20px;
    z-index: 5;
}

.color-switcher .color-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    cursor: pointer;
}

.color-switcher .color-btn.white {
    background: #e4e4e4;
}

.color-switcher .color-btn.black {
    background: #2b2928;
}


.color-switcher .color-option .color-label {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.color-btn.active {
    outline:  1px solid;
    outline-offset: 1px;

}
.color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.viewer-360-caption {
    bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    color: var(--text-color);
    opacity: 0.7;
}

.viewer-controls-mobile {
    display: none;
}

.ar-trigger {
    position: absolute;
    bottom: 20px;
    right: 25px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ar-label-mobile {
    display: none;
}

.section-subtitle {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

@media (max-width: 1024px) {
    .grid-360-container {
        grid-template-columns: 1fr;
        margin-top: 0;
        gap: 30px;
    }

    .description-360 .section__pretitle {
        margin-bottom: 0 !important;
    }

    .description-360 p {
        font-size: clamp(1rem, 3vw, 1.2rem);
    }

    .description-360 .btn-container {
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .grid-360-container {
        /*margin-top: 40px;*/
    }

    .viewer-360-frame {
        height: 70vh !important;
    }

    .viewer-360-caption {
        display: none;
    }

    .viewer-controls-desktop {
        display: none;
    }

    .viewer-controls-mobile {
        display: block !important;
        margin-top: 20px;
    }

    .viewer-controls-mobile .ar-trigger {
        background: #000000;
    }

    .ar-label-desktop {
        display: none;
    }

    .ar-label-mobile {
        position: absolute;
        bottom: 5px;
        right: 15px;
        display: block !important;
        font-size: 12px;
    }

    .ar-trigger {
        width: 42px;
        height: 42px;
        border-radius: 50% !important;
        right: 20px !important;
        bottom: 30px !important;
    }

    .ar-trigger img {
        width: 26px;
        height: 26px;
    }

    .color-switcher {
        gap: 5px !important;
        left: 0 !important;
        z-index: 30;
    }

    .color-switcher .color-option .color-label {
        font-size: 10px !important;
    }
}

@media (max-width: 600px) {
    .viewer-360-frame {
        height: 40vh !important;
    }

    .viewer-wrapper {
        top: 0;
    }

    .color-switcher {
        bottom: 0 !important;
        left: 0 !important;
    }

    .viewer-controls-mobile {
        margin-top: 15px;
    }

    .ar-trigger {
        bottom: 25px !important;
    }
}

/* =========================================
   END SECTION 360
   ========================================= */


/* =========================================
   SECTION APPLIANCES-STAINLESS
   ========================================= */

.section-appliances {
    padding: 0;
}

.section-appliances__header {
    background-position: center;
    background-size: cover;
    position: relative;
}
.section-appliances__header:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
}

.section-appliances__content-wrapper {
    padding-top: calc(2 * var(--spacer));
    padding-bottom: calc(2 * var(--spacer));
}


/* =========================================
   END SECTION APPLIANCES-STAINLESS
   ========================================= */


/* =========================================
   SECTION APPLIANCES-GRILLS
   ========================================= */

/* =========================================
   END SECTION APPLIANCES-GRILLS
   ========================================= */


/* =========================================
   SECTION APPLIANCES-ENTERTAINMENT
   ========================================= */

/* =========================================
   END SECTION APPLIANCES-ENTERTAINMENT
   ========================================= */


/* =========================================
   SECTION AvellaerO
   ========================================= */
.section-avellaero {
    position: relative;
    width: 100%;
    min-height: 815px;
    background-image: var(--section-avellaero-global-bg);
    background-size: cover;
    background-position: center;
    color: white;
    z-index: 20; /* Sits ON TOP of the Intro Section when scrolling */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.section-avellaero .section__title {
    font-size: calc(clamp(2.3rem, 3vw, 4.5rem) * var(--font-heading-size-multiplier));
}

.section-avellaero .section__content {
    font-size: 1.2rem;
}


.section-stone-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacer);
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: calc(2* var(--spacer));
    width: 45vw;
    margin-left: 0;

    padding-left: calc(5 * var(--spacer));
    background: rgba(0, 0, 0, 0.9);
}

.configuration2 {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: white;
    z-index: 20;
    padding-top: 0;
}

.stone-text-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    width: 100%;
}

.configuration2-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind text */
}

.configuration2-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
    will-change: opacity, z-index;
}

.configuration2-text-content-desktop {
    display: block;
}

.configuration2-text-content-mobile {
    display: none;
}

.stone-buttons-overlay-desktop {
    display: block;
}

.stone-buttons-overlay-mobile {
    display: none;
}

.stone-buttons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stone-buttons-grid-container {
    opacity: 0;
    visibility: hidden;
}

.stone-buttons-grid.visible, .stone-buttons-grid-container.visible {
    opacity: 1;
    visibility: visible;
}

.feature-item.stone-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 15px 10px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.feature-item.stone-btn.active .feature-icon {
    outline-offset: 4px;
    outline: #979797 auto;
}

.feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-overlay-content {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    padding: 60px 50px;
    max-width: 500px;
    width: 90%;
    z-index: 10; /* On top of images */
}

.image-overlay-content--light {
    background-color: white;
    color: var(--text-color);
    left: 5%;
    right: auto;
}
.configuration2-text-content li {
    margin-left: 20px;
    margin-bottom: 15px;
    padding: 0;
    font-size: 1.375rem;
}

@media (max-width: 1024px) {
    .configuration2 {
        padding-bottom: 120px;
    }
    .section-stone-content {
        width: 100%;
        padding-right: var(--spacer);
        padding-left: var(--spacer);
    }

    .configuration2 .image-overlay-content {
        transform: none;
        padding: 20px;
    }

    .configuration2 h2 {
        margin: 20px 0 10px 0;
    }

    .configuration2-image-container {
        position: relative;
        height: 40%;
    }

    .configuration2-text-content {
        margin-top: 100px !important;
        padding: 0 20px;
    }

    .configuration2-text-content li {
        font-size: 1.2rem;
        margin-bottom: 0;
    }

    .image-overlay-content-configuration2 {
        position: static !important;
    }

    .configuration2-text-content-desktop {
        display: none;
    }

    .configuration2-text-content-mobile {
        display: block;
    }

    .stone-buttons-overlay-mobile .stone-buttons-grid-container {
        position: absolute;
        bottom: 0;
        transform: translate(0, 65%);
        width: 100%;
        z-index: 10;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .stone-buttons-overlay-desktop {
        display: none;
    }

    .stone-buttons-overlay-mobile {
        display: block;
    }

    .feature-item.stone-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .stone-buttons-grid {
        display: flex !important;
        justify-content: center;
    }

    .stone-buttons-grid-container .section__content {
        display: none;
    }

    .section-avellaero {
        height: auto;
        padding: 80px 0;
    }

    .stone-text-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (min-width: 700px) and (max-width: 1023px) {
    .configuration2 .image-overlay-content {
        max-width: 100%;
    }

    .configuration2-text-content {
        margin-top: 140px !important;
    }
}

@media (max-width: 768px) {
    .section-stone-content .section__title {
        font-size: clamp(2.3rem, 5vw, 4.5rem);
        margin-bottom: 0;
    }

    .section-stone-content .section__content {
        margin-bottom: 0;
    }

    .stone-text-grid .section__content {
        color: #CABFBF;
    }

    .stone-text-grid .section__content span {
        color: var(--white);
    }
}

/* =========================================
   END SECTION AvellaerO
   ========================================= */

/* =========================================
   SECTION TRADE-IN
   ========================================= */
.section-trade-in {
    position: relative;
    background: var(--black);
    color: var(--white);
    padding: 80px 0;
    overflow: hidden;
}

.section-trade-in__content {
    max-width: 80vw;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
}

.section-trade-in__bg img {
    max-width: 60vw;
    opacity: 0.9;
    position: absolute;
    top: 0;
    right: 0;
}

.section-trade-in__subtitle {
    font-size: clamp(1.5rem, 2vw + 0.3rem, 2.25rem);
}

.section-trade-in__title {
    /*font-family: var(--font-heading);*/
    font-family: 'Neutra Text TF';
    color: var(--gold-color);
    /*font-weight: bold;*/
    /*font-size: calc(var(--font-heading-size-multiplier) * clamp(26px, 5.2vw, 60px));*/
    /*line-height: 1.25em;*/
    font-size: calc(1 * clamp(26px, 5.2vw, 128px)) !important;
    line-height: 100%;
    font-weight: 400;
}

.section-trade-in__intro {
    font-size: clamp(1rem, 2vw + 0.4rem, 1.4rem);
    font-weight: 600;
    max-width: 40vw;
    color: #CABFBF;
}

.section-trade-in__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: calc(1 * var(--spacer));
    margin-bottom: var(--spacer);
}
.section-trade-in__steps-wrapper  {
    display: grid;
    margin-top: calc(6 * var(--spacer));
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: calc(1 * var(--spacer));
}

.section-trade-in__step-wrapper {
    /*position: relative;*/
    /*display: grid;*/
    /*grid-template-columns: 1fr;*/
    /*gap: calc(1 * var(--spacer));*/
    /*margin-top: calc(1 * var(--spacer));*/
    position: relative;
    display: flex;
    grid-template-columns: 1fr;
    gap: calc(1 * var(--spacer));
    margin-top: calc(1 * var(--spacer));
    align-items: stretch;
    flex-direction: column;
}


.section-trade-in__step {
    position: relative;
    font-family: 'Neutra Text TF';
    font-weight: bold;
    text-transform: uppercase;
    background: #C1964A;
    font-size: clamp(0.6rem, 1vw, 1.3rem);
    text-align: center;
    padding: calc(0.75 * var(--spacer)) calc(0.75 * var(--spacer));
    display: flex;
    justify-content: center;
    align-items: center;

}

.section-trade-in__step span {
    background: #C1964A;
    position: relative;
    padding: 0 calc(0.5 * var(--spacer));
    min-width: 75%;
    display: block;

}

.section-trade-in__step-wrapper:first-child .section-trade-in__step:before {
    content: '';
    z-index: 0;
    width: calc(50%);
    height: 2px;
    left: 50%;
    position: absolute;
    background: #F5BE60;
    top: calc(50% - 1px);
}
.section-trade-in__step-wrapper:last-child .section-trade-in__step:before {
    content: '';
    width: calc(50%);
    height: 2px;
    right: 50%;
    position: absolute;
    background: #F5BE60;
    top: calc(50% - 1px);
}
.section-trade-in__step-wrapper:nth-last-child(2) .section-trade-in__step-content {
    width: calc(200% + var(--spacer));
}

.section-trade-in__step-wrapper:not(:first-child):not(:last-child) .section-trade-in__step:before {
    content: '';
    width: calc(100%);
    height: 2px;
    position: absolute;
    left: 0;
    background: #F5BE60;
    top: calc(50% - 1px);
}

.section-trade-in__step-wrapper:first-child .section-trade-in__step span:before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 9px;
    position: absolute;
    top: calc(50% - 4px);
    right: -4px;
    background: #F5BE60;
}

.section-trade-in__step-wrapper:not(:first-child) .section-trade-in__step span::after {
    content: "";
    position: absolute;
    left: -2px;
    top: calc(50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 13px solid #F5BE60;
    transform: translateY(-50%);
}
.section-trade-in__step-title {
    font-size: clamp(0.95rem, 1.5vw, 1.5rem);
    color: var(--white);
}
.section-trade-in__step-title .bold{
    color: var(--gold-color);
    display: block;
    font-size: 1.3em;
    text-transform: uppercase;
}
.section-trade-in__steps-wrapper img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1.3/1;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: block;
}
.section-trade-in__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-trade-in__card-title {
    font-weight: bold;
    font-size: clamp(1.1rem, 2vw + 0.3rem, 1.25rem);
    margin-bottom: var(--spacer);
}
.section-trade-in__text-wrapper {

}

.section-trade-in__text-wrapper img {
    aspect-ratio: 5/3;
    width: 100%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.section-trade-in__text {
    font-size: clamp(1rem, 2vw + 0.3rem, 1.2rem);
    color: #CABFBF;
    max-width: 620px;
    margin-bottom: var(--spacer);
}

.section-trade-in__images {
    display: flex;
    gap: 15px;
    margin-top: auto;
    margin-bottom: 0;
}

.section-trade-in__images img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}

.section-trade-in__images--right img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
}

.section-trade-in__images--right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    max-height: 450px;
}

@media (min-width: 1024px) {
    .section-trade-in__images--left {
        max-height: 450px;
        max-width: 500px;
    }

}

@media (max-width: 1024px) {

    .section-trade-in__steps-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacer);
        margin-top: calc(4 * var(--spacer));

    }
    .section-trade-in {
        padding: 2rem 0;
    }

    .section-trade-in__content {
        max-width: 100vw;
        width: 100%;
        padding: 0 var(--spacer);
        position: relative;
    }

    .section-trade-in__grid {
        grid-template-columns: 1fr;
    }

    .section-trade-in__text {
        max-width: 100%;
    }

    .section-trade-in__intro {
        max-width: 60vw;
    }

    .section-trade-in__step-title {
        font-size: clamp(0.8rem, 3vw, .2rem);
    }
}

@media (max-width: 768px) {
    .section-trade-in__grid {
        margin-top: 40px;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .section-trade-in__bg img {
        max-width: 90vw;
    }

    .section-trade-in__header .section-trade-in__title {
        line-height: 1.1;
        margin: 30px 0 10px 0;
        font-size: 3rem;
    }
}

/* =========================================
   END SECTION TRADE-IN
   ========================================= */

/* =========================================
   SECTION FORM
   ========================================= */
.section-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
}

.section-introducing {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 20px;
}

@media (max-width: 1024px) {
    .section-introducing {
        grid-template-columns: 1fr; /* stack */
        padding: 0;
    }

    /* swap order */
    .section-introducing > *:first-child {
        order: 2;
    }

    .section-introducing > *:nth-child(2) {
        order: 1;
    }
}

.final-cta-content {
    padding: 100px 20px 100px 150px;
    max-width: 750px;
    position: sticky;
    top: 0;
    height: fit-content;
}

#title-form {
    color: var(--main-color);
}

.fillable-grid-form {
    display: grid;
    /* Defines 2 equal-width columns for the input fields */
    grid-template-columns: 1fr 1fr;
    gap: 20px; /* Space between the grid items */
    max-width: 800px;
    margin: 0 auto;
}

/* Grouping for each label/input pair */
.form-group {
    display: flex;
    flex-direction: column;
}

/* Styling for the labels */
.form-group label {
    margin-bottom: 5px;
    color: var(--text-color);
}

/* Styling for the input fields */
.form-group input {
    font-family: var(--font-body);
    padding: 12px 10px;
    border: 1px solid #A6A6A6;
    border-radius: 1px;
    font-size: 16px;
}

.final-cta-btn-container {
    justify-content: flex-start;
}

@media (max-width: 1200px) {
    .section-form {
        grid-template-columns: 1fr;
    }

    .final-cta-content {
        position: relative;
        padding: var(--section-padding) 20px;
        max-width: 100%;
    }

    .final-cta-btn-container {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .fillable-grid-form {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   END SECTION FORM
   ========================================= */

/* =========================================
   3. 360 VIEWER & VIDEO PLAYER
   ========================================= */
@media (max-width: 1024px) {
    .section-360 .section-subtitle,
    .section-360 .section__title {
        align-self: flex-start;
        text-align: left;
    }

    .section-360 .section-subtitle {
        font-size: clamp(1rem, 3vw, 1.5rem);
        margin-bottom: 10px !important;
        letter-spacing: 1px;
    }

    .section-360 .section__title {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}

.section.section-360 {
    background: var(--section-360-light);
}
.section.section-360 .viewer-360-frame {
    background: var(--section-360-light-viewer);
    border: 1px solid var(--360-border-color-light);
}

/* GREEN THEME */
.section.section-360.section-360_gradient {
    background: var(--section-360-gradient)
}

.section.section-360.section-360_gradient h1,
.section.section-360.section-360_gradient h2,
.section.section-360.section-360_gradient h3,
.section.section-360.section-360_gradient p,
.section.section-360.section-360_gradient span,
.section.section-360.section-360_gradient .section__pretitle,
.section.section-360.section-360_gradient .section__title {
    color: #ffffff !important;
}

.section.section-360.section-360_gradient .viewer-360-frame {
    background: var(--section-360-gradient-viewer);
    border: 1px solid var(--360-border-color);
}

.section.section-360.section-360_gradient .drag-arrow {
    filter: brightness(0) invert(1);
}

/* Specific sections that should ALWAYS use Abril Fatface */
.section__title_fs-70,
.section__title-full-width-centered,
.section-trade-in .cta-title,
.feature-card-title,
.section-appliances_stainless__header .section__title,
.section-appliances_grills__header .section__title,
.section-appliances_audio__header .section__title {
    font-family: var(--font-heading);
    line-height: var(--font-heading-line-height);
    /*font-family: 'Abril Fatface', serif !important;*/
    /*line-height: 1.1 !important;*/
}

.section__title_fs-40 {
    font-size: calc(40px * var(--font-heading-size-multiplier));
}

.section__title_fs-70,
.section-trade-in .cta-title {
    /*font-family: 'Abril Fatface', serif !important;*/
    font-size: calc(70px * var(--font-heading-size-multiplier));
    /*line-height: 1.1 !important;*/
}


/* Typography Fixes for Image Overlay */
.image-overlay-content .section__pretitle {
    font-family: var(--font-body-bold);
    font-size: 1.5rem; /* 24px */
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/*TODO przeniesc do section-mood i gdzie jeszcze trzeba*/
.image-overlay-content h4 {
    font-family: var(--font-heading);
    font-size: calc(2.8125rem * var(--font-heading-size-multiplier)); /* 45px */
    line-height: var(--font-heading-line-height);
    margin-bottom: 30px;
}

/* --- Grids & Cards --- */
.section-360-3-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

.feature-card {
    width: 100%;
    color: white;
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
}

.feature-card-img {
    width: 100%;
    height: auto;
    display: block;
}

.feature-card-body {
    background: linear-gradient(var(--black), #272727);
    text-align: left;
    padding: 35px;
    margin-top: -4px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.feature-card-title {
    font-family: 'Neutra Text TF';
    font-size: 1.5rem;
    line-height: 113% !important;
    margin-bottom: 0.75rem;
}

/* Fix for feature card button alignment */
.feature-card-body p {
    flex-grow: 1;
    margin-bottom: 20px;
}

.feature-card-body .btn {
    margin-top: auto; /* Pushes button to bottom */
    align-self: flex-start; /* Keeps button from stretching full width */
}

/* Text Phases */
.text-phase {
    opacity: 0;
    position: relative;
    width: 100%;
    will-change: opacity, transform;
}

/* Backgrounds */
.section-content-centered-content {
    align-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
}

.section-appliances_stainless__header, .section-appliances_audio__header {
    height: 815px;
    color: white;
}

/* Portofino default background images */
.section-appliances_grills__header {
    background-image: var(--section-appliances-grills-bg);
    height: 815px;
    color: white;
}

.section-appliances_stainless__header {
    background-image: var(--section-appliances-stainless-bg);
    height: 815px;
    color: white;
}

.section-appliances_audio__header {
    background-image: var(--section-appliances-audio-global-bg);
    height: 815px;
    color: white;
}


@media (max-width: 1024px) {
    .section-360-3-col-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stone-buttons-grid, .two-column-grid, .toggle-grid {
        grid-template-columns: 1fr;
    }

    .section__title_fs-70, .section-trade-in .cta-title {
        font-size: clamp(2.5rem, 5vw, 4rem);
    }
}

@media screen and (max-width: 700px) {
    .section-appliances_grills__header, .section-appliances_stainless__header, .section-appliances_audio__header, .section-avellaero {
        height: auto;
        background-size: cover;
        padding-top: 2rem;
        padding-bottom: 2rem;
        background-position: center;
    }

    .section-content-centered-content {
        height: auto;
    }
}

/* ==========================================================================
   AR QR Code Modal Styles
   ========================================================================== */
.ar-qr-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(5px);
}

.ar-qr-content {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.ar-qr-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #000;
    font-size: 1.5rem;
    font-family: 'Montserrat', sans-serif;
}

.ar-qr-close {
    margin-top: 30px;
    cursor: pointer;
    padding: 12px 30px;
    background: #000;
    color: #fff;
    border: none;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    transition: opacity 0.3s;
}

.ar-qr-close:hover {
    opacity: 0.8;
}