/* Sombra do Litoral - Premium Stylesheet */



:root {

    --bg-primary: #FAF8F3; /* Off-white */

    --bg-secondary: #F4EFE6; /* Areia clara */

    --text-primary: #061A2B; /* Azul marinho sofisticado */

    --text-secondary: #374151; /* Cinza texto */

    --text-muted: #6B7280;

    --accent: #C9A76A; /* Champagne/dourado suave */

    --accent-hover: #B08E51;

    --accent-light: #FDFBF7;

    --white: #FFFFFF;

    --black: #061A2B; /* Azul marinho sofisticado */

    --border: #E2DDD5;

    --border-dark: #9CA3AF;

    

    /* Brand Palette Specifics */

    --petroleum-deep: #082C3F;

    --navy-sophisticated: #061A2B;

    --ocean-dark: #0E3A4F;

    --sand-light: #F4EFE6;

    --champagne-gold: #C9A76A;

    --off-white: #FAF8F3;

    --text-gray: #374151;

    

    --navy-primary: #082C3F;

    --navy-dark: #061A2B;

    --navy-medium: #0E3A4F;

    --yellow-accent: #C9A76A;

    --yellow-soft: #F4EFE6;

    --gray-light: #FAF8F3;

    

    --font-serif: 'Playfair Display', Georgia, serif;

    --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;

    

    --shadow-sm: 0 4px 12px rgba(6, 21, 46, 0.03);

    --shadow-md: 0 12px 32px rgba(6, 21, 46, 0.05);

    --shadow-lg: 0 24px 64px rgba(6, 21, 46, 0.08);

    

    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    --transition-fast: all 0.2s ease-out;

}



/* Global Reset & Base */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    background-color: var(--bg-primary);

    color: var(--text-primary);

    font-family: var(--font-sans);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    overflow-x: hidden;

}



/* Typography & Editorial Scale */

h1, h2, h3, h4, h5, h6 {

    font-weight: 600;

    line-height: 1.3;

    color: var(--navy-dark);

    letter-spacing: -0.01em;

}



.section-title-serif, .section-title {

    font-family: var(--font-serif);

    font-size: 2.6rem;

    font-weight: 400;

    margin-bottom: 1.25rem;

    letter-spacing: -0.015em;

    color: var(--navy-dark);

    line-height: 1.25;

}



.section-subtitle {

    display: inline-block;

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.2em;

    color: var(--accent); /* champagne gold */

    margin-bottom: 0.85rem;

}



.section-desc {

    font-size: 1.05rem;

    color: var(--text-secondary);

    max-width: 650px;

    margin: 0 auto;

    line-height: 1.7;

    font-weight: 400;

}



p {

    color: var(--text-secondary);

    font-weight: 400;

    line-height: 1.75;

}



/* Container */

.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 2rem;

}



/* Flex / Center helpers */

.flex-center {

    display: flex;

    align-items: center;

    justify-content: center;

}



.flex-center-left {

    display: flex;

    align-items: center;

    justify-content: flex-start;

}



.w-full {

    width: 100%;

}



.hidden {

    display: none !important;

}



/* Buttons */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.85rem 1.8rem;

    font-size: 0.9rem;

    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase; /* Uppercase buttons look very premium when tracked out */

    border-radius: 4px;

    cursor: pointer;

    transition: var(--transition-smooth);

    text-decoration: none;

    gap: 0.5rem;

    border: 1px solid transparent;

}



.btn-sm {

    padding: 0.5rem 1.2rem;

    font-size: 0.85rem;

}



.btn-lg {

    padding: 1.1rem 2.4rem;

    font-size: 1.05rem;

}



.btn-primary {

    background-color: var(--navy-primary);

    color: var(--white);

}



.btn-primary:hover {

    background-color: var(--accent);

    color: var(--black);

    transform: translateY(-2px);

}



.btn-outline {

    background-color: transparent;

    border-color: var(--navy-primary);

    color: var(--navy-primary);

}



.btn-outline:hover {

    background-color: var(--navy-primary);

    border-color: var(--navy-primary);

    color: var(--white);

    transform: translateY(-2px);

}



.btn-outline-white {

    background-color: transparent;

    border-color: var(--white);

    color: var(--white);

}



.btn-outline-white:hover {

    background-color: var(--accent);

    border-color: var(--accent);

    color: var(--black);

    transform: translateY(-2px);

}



/* Top bar banner */

.top-bar {

    background-color: var(--black);

    color: var(--white);

    text-align: center;

    padding: 0.5rem;

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.1em;

}



/* Navigation Navbar */

.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    background-color: rgba(250, 248, 243, 0.92);

    backdrop-filter: blur(12px);

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

    height: 94px;

    display: flex;

    align-items: center;

    transition: var(--transition-smooth);

}



.navbar.scrolled {

    height: 82px;

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

}



.nav-container {

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;

    padding: 0 1.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 100%;

}



.logo-area {

    display: flex;

    flex-direction: column;

    text-decoration: none;

    max-width: 190px;

    flex-shrink: 0;

}



.logo-title {

    font-family: var(--font-sans);

    font-size: 1.15rem;

    font-weight: 800;

    letter-spacing: 0.05em;

    color: var(--navy-primary);

    line-height: 1.1;

}



.logo-subtitle {

    font-size: 0.58rem;

    font-weight: 600;

    letter-spacing: 0.22em;

    color: var(--accent);

    text-transform: uppercase;

    margin-top: 1px;

}



.nav-links {

    display: flex;

    gap: 1.5rem;

    align-items: center;

    margin: 0 auto 0 2rem; /* Pull it slightly to the left but centralize relative to space */

}



.nav-item {

    font-size: 0.72rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--text-secondary);

    text-decoration: none;

    transition: var(--transition-fast);

    padding: 0.5rem 0;

    position: relative;

    white-space: nowrap;

}



.nav-item::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 1.5px;

    background-color: var(--accent);

    transition: var(--transition-fast);

}



.nav-item:hover {

    color: var(--navy-primary);

}



.nav-item:hover::after {

    width: 100%;

}



.nav-actions {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}



.nav-actions .btn {

    white-space: nowrap;

}



.icon-sm {

    width: 16px;

    height: 16px;

}



.mobile-menu-toggle {

    display: none;

    background: none;

    border: none;

    color: var(--navy-primary);

    cursor: pointer;

}



/* Mobile Drawer */

.mobile-drawer {

    position: fixed;

    top: 0;

    right: -100%;

    width: 80%;

    max-width: 320px;

    height: 100vh;

    background-color: var(--bg-primary);

    z-index: 1100;

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

    padding: 2rem;

    display: flex;

    flex-direction: column;

    gap: 3rem;

    transition: cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;

}



.mobile-drawer.open {

    right: 0;

}



.drawer-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.close-drawer {

    background: none;

    border: none;

    cursor: pointer;

    color: var(--black);

}



.drawer-links {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.drawer-item {

    font-size: 1.1rem;

    font-weight: 500;

    color: var(--text-primary);

    text-decoration: none;

    padding-bottom: 0.5rem;

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

}



/* Hero Section */

.hero-section {

    position: relative;

    height: calc(100vh - 94px);

    min-height: 600px;

    display: flex;

    align-items: center;

    padding-bottom: 0;

    overflow: hidden;

}



.hero-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.hero-img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    opacity: 0;

    transition: opacity 1s ease-in-out;

    z-index: 1;

}



.hero-img.active {

    opacity: 1;

    z-index: 2;

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(6, 26, 43, 0.8) 20%, rgba(8, 44, 63, 0.35) 100%);

    z-index: 3;

}



.hero-container {

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;

    padding: 0 1.5rem;

    position: relative;

    z-index: 4;

}



.hero-content {

    max-width: 580px;

    color: var(--white);

    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.hero-content.align-left {

    margin-left: 0;

    margin-right: auto;

    text-align: left;

}



.hero-content.align-right {

    margin-left: auto;

    margin-right: 0;

    text-align: right;

}



.hero-content.align-right .hero-ctas,

.hero-content.align-right .hero-metrics {

    justify-content: flex-end;

}



.hero-badge {

    display: inline-block;

    background-color: rgba(201, 167, 106, 0.15);

    border: 1px solid rgba(201, 167, 106, 0.4);

    color: var(--accent);

    font-size: 0.72rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    padding: 0.45rem 1rem;

    border-radius: 2px;

    margin-bottom: 1.5rem;

}



.hero-title {

    font-family: var(--font-serif);

    font-size: 4rem;

    font-weight: 400;

    color: var(--white);

    margin-bottom: 1.5rem;

    line-height: 1.2;

    letter-spacing: -0.02em;

}



.hero-desc {

    color: rgba(250, 248, 243, 0.85);

    font-size: 1.1rem;

    margin-bottom: 2.5rem;

    font-weight: 300;

}



.hero-badge, .hero-title, .hero-desc {

    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    transform: translateY(0);

}



/* Staggered entrance delays */

.hero-content:not(.hero-fade-out) .hero-badge { transition-delay: 0.05s; }

.hero-content:not(.hero-fade-out) .hero-title { transition-delay: 0.15s; }

.hero-content:not(.hero-fade-out) .hero-desc  { transition-delay: 0.25s; }



.hero-fade-out .hero-badge,

.hero-fade-out .hero-title,

.hero-fade-out .hero-desc {

    opacity: 0 !important;

    transform: translateY(15px);

    transition-delay: 0s !important;

}



.hero-ctas {

    display: flex;

    gap: 1.2rem;

    margin-bottom: 4rem;

}



.hero-metrics {

    display: flex;

    align-items: center;

    gap: 2rem;

}



.metric-item {

    display: flex;

    flex-direction: column;

}



.metric-num {

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--accent);

    line-height: 1;

}



.metric-text {

    font-size: 0.75rem;

    color: rgba(250, 248, 243, 0.75);

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-top: 0.35rem;

}



.metric-divider {

    width: 1px;

    height: 35px;

    background-color: rgba(201, 167, 106, 0.25);

}



/* Premium Benefits Showcase Bar */

.benefits-premium-section {

    padding: 5rem 0;

    background-color: var(--white);

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

}



.benefits-premium-grid {

    display: grid;

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

    gap: 3.5rem;

}



.benefit-premium-card {

    display: flex;

    align-items: flex-start;

    gap: 1.5rem;

    padding: 1.5rem;

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

    transition: var(--transition-smooth);

}



.benefit-premium-card:hover {

    border-left-color: var(--accent);

    transform: translateX(6px);

}



.benefit-icon-premium {

    color: var(--accent);

    display: flex;

    align-items: center;

    justify-content: center;

    padding-top: 0.15rem;

    transition: var(--transition-smooth);

}



.benefit-icon-premium svg {

    width: 24px !important;

    height: 24px !important;

    stroke-width: 1.5;

}



.benefit-premium-card:hover .benefit-icon-premium {

    transform: scale(1.1);

}



.benefit-content h4 {

    font-family: var(--font-primary);

    font-size: 0.9rem;

    font-weight: 700;

    color: var(--navy-primary);

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 0.4rem;

}



.benefit-content p {

    font-family: var(--font-primary);

    font-size: 0.85rem;

    color: var(--text-secondary);

    margin: 0;

    line-height: 1.4;

}



@media (max-width: 992px) {

    .benefits-premium-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    .benefit-premium-card {

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

        border-bottom: none;

        padding: 1rem 0 1rem 1.5rem;

    }

}



/* Interactive Customizer Section */

.customizer-section {

    padding: 8rem 0;

    background-color: var(--bg-secondary);

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

}



.text-center {

    text-align: center;

}



.section-header {

    margin-bottom: 4rem;

}



.customizer-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 4rem;

    align-items: stretch;

}



/* Visualizer Preview Container */

.visualizer-preview-container {

    background-color: var(--white);

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

    border-radius: 8px;

    padding: 2rem;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    min-height: 480px;

}



.visualizer-preview {

    width: 100%;

    height: 100%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}



.visualizer-bg-scene {

    position: absolute;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle, rgba(244,243,239,0.8) 0%, rgba(229,227,221,0.2) 100%);

    border-radius: 6px;

    z-index: 1;

}



.ombrelone-svg-render {

    width: 80%;

    max-width: 380px;

    height: auto;

    z-index: 2;

    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.06));

    transition: var(--transition-smooth);

}



.canopy-part {

    transition: fill 0.5s ease;

}



#ombrelonePole, #ombreloneCap {

    transition: fill 0.3s ease;

}



/* Floating Branding Logo Overlay */

.visualizer-logo-overlay {

    position: absolute;

    top: 40%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 3;

    pointer-events: none;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.logo-preview-img {

    max-width: 60px;

    max-height: 60px;

    object-fit: contain;

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));

    opacity: 0.85;

    transition: transform 0.2s ease, margin-top 0.2s ease;

}



.logo-placeholder-text {

    font-size: 0.65rem;

    font-weight: 600;

    color: rgba(0, 0, 0, 0.25);

    border: 1px dashed rgba(0, 0, 0, 0.2);

    padding: 0.3rem 0.6rem;

    border-radius: 2px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    transform: rotate(-10deg);

    background-color: rgba(255,255,255,0.4);

    transition: var(--transition-fast);

}



.visualizer-spec-badge {

    position: absolute;

    bottom: 0;

    background-color: var(--black);

    color: var(--white);

    padding: 0.4rem 1rem;

    font-size: 0.75rem;

    font-weight: 500;

    border-radius: 30px;

    z-index: 4;

    letter-spacing: 0.02em;

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

}



/* Configurator Panel Controls */

.configurator-controls {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background-color: var(--white);

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

    border-radius: 8px;

    padding: 2.5rem;

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

}



.control-group {

    margin-bottom: 2rem;

}



.control-label {

    display: block;

    font-size: 0.9rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--black);

    margin-bottom: 0.9rem;

}



.control-label-sm {

    display: block;

    font-size: 0.85rem;

    font-weight: 500;

    color: var(--black);

    margin-bottom: 0.5rem;

}



/* Model Selector Cards */

.model-selector-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

}



.model-card {

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

    border-radius: 6px;

    padding: 1rem;

    cursor: pointer;

    transition: var(--transition-smooth);

}



.model-card h5 {

    font-size: 0.95rem;

    font-weight: 600;

    margin-bottom: 0.25rem;

}



.model-card p {

    font-size: 0.75rem;

    color: var(--text-secondary);

    line-height: 1.3;

}



.model-card.active {

    border-color: var(--accent);

    background-color: var(--accent-light);

}



/* Color Picker */

.color-picker-flex {

    display: flex;

    flex-wrap: wrap;

    gap: 0.8rem;

    margin-bottom: 0.5rem;

}



.color-btn {

    width: 36px;

    height: 36px;

    border-radius: 50%;

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

    cursor: pointer;

    position: relative;

    transition: var(--transition-fast);

}



.color-btn.active {

    transform: scale(1.15);

    border: 2px solid var(--black);

    box-shadow: 0 0 0 2px var(--accent);

}



.color-name-display {

    font-size: 0.85rem;

    color: var(--text-secondary);

    font-style: italic;

}



/* Material Picker */

.material-picker-grid {

    display: grid;

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

    gap: 0.8rem;

    margin-bottom: 0.5rem;

}



.material-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    padding: 0.7rem 0.5rem;

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

    border-radius: 6px;

    background-color: var(--white);

    cursor: pointer;

    font-family: var(--font-sans);

    font-size: 0.8rem;

    font-weight: 500;

    transition: var(--transition-fast);

}



.material-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    border: 1px solid rgba(0,0,0,0.1);

}



.material-btn.active {

    border-color: var(--accent);

    background-color: var(--accent-light);

}



.material-name-display {

    font-size: 0.85rem;

    color: var(--text-secondary);

    font-style: italic;

}



/* Branding Controls & File Upload */

.file-upload-wrapper {

    position: relative;

    width: 100%;

}



.file-upload-input {

    display: none;

}



.file-upload-label {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    padding: 0.8rem 1rem;

    border: 1px dashed var(--border-dark);

    border-radius: 6px;

    cursor: pointer;

    font-size: 0.85rem;

    color: var(--text-secondary);

    background-color: var(--bg-primary);

    transition: var(--transition-fast);

}



.file-upload-label:hover {

    background-color: var(--accent-light);

    border-color: var(--accent);

    color: var(--black);

}



.logo-adjustments {

    margin-top: 1.2rem;

    background-color: var(--bg-secondary);

    padding: 1rem;

    border-radius: 6px;

    display: flex;

    flex-direction: column;

    gap: 0.8rem;

}



.slider-control {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

}



.slider-label {

    font-size: 0.8rem;

    font-weight: 500;

    color: var(--text-secondary);

    width: 110px;

}



.slider-control input[type="range"] {

    flex: 1;

    height: 4px;

    border-radius: 2px;

    background: var(--border-dark);

    outline: none;

    -webkit-appearance: none;

}



.slider-control input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: var(--black);

    cursor: pointer;

}



.btn-remove-logo {

    align-self: flex-end;

    background: none;

    border: none;

    color: #cc3737;

    font-size: 0.75rem;

    font-weight: 600;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 0.25rem;

    margin-top: 0.25rem;

}



/* Customizer Footer */

.customizer-footer {

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

    padding-top: 1.5rem;

    margin-top: 1rem;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.price-estimate {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.price-estimate span {

    font-size: 0.85rem;

    color: var(--text-secondary);

}



.price-estimate h4 {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--accent);

}



/* Products Section */

.products-section {

    padding: 8rem 0;

    background-color: var(--bg-secondary);

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

}



.section-header-side {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: flex-end;

    margin-bottom: 4rem;

}



.section-desc-side {

    font-size: 1.1rem;

    color: var(--text-secondary);

    line-height: 1.6;

}



.products-grid {

    display: block;

    max-width: 950px;

    margin: 0 auto;

}



.product-card {

    background-color: var(--white);

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

    border-radius: 12px;

    overflow: hidden;

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

    display: flex;

    flex-direction: row;

    transition: var(--transition-smooth);

    width: 100%;

    max-width: 950px;

    margin: 0 auto;

}



.product-card:hover {

    transform: translateY(-4px);

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

}



.product-image-wrapper {

    position: relative;

    flex: 0 0 50%;

    min-height: 450px;

    overflow: hidden;

    background-color: #EFEFEF;

}



.product-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

}



.product-card:hover .product-image {

    transform: scale(1.03);

}



.product-badge {

    position: absolute;

    top: 1.25rem;

    left: 1.25rem;

    background-color: var(--white);

    color: var(--black);

    padding: 0.35rem 0.8rem;

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    border-radius: 20px;

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

}



.product-badge.accent-badge {

    background-color: var(--accent);

    color: var(--black);

}



.product-info {

    flex: 0 0 50%;

    padding: 3.5rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    box-sizing: border-box;

}



.product-title {

    font-size: 1.35rem;

    font-weight: 700;

    margin-bottom: 0.75rem;

}



.product-description {

    font-size: 0.9rem;

    color: var(--text-secondary);

    margin-bottom: 1.5rem;

    line-height: 1.5;

}



.product-specs {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.spec-line {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.spec-line.full-width {
    grid-column: span 2;
}

.spec-line span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.spec-line strong {
    font-size: 0.85rem;
    color: var(--black);
    font-weight: 500;
    line-height: 1.3;
}



.product-actions {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 0.75rem;

    margin-top: auto;

}



/* Lifestyle/Details (Tecnologia Exclusiva) Section */

.lifestyle-section {

    background-color: var(--bg-secondary);

    color: var(--navy-primary);

    overflow: hidden;

    padding: 8rem 0;

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

}



.lifestyle-container {

    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

}



.lifestyle-content {

    padding: 0 4rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.lifestyle-badge {

    color: var(--accent);

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 0.15em;

    margin-bottom: 1rem;

}



.lifestyle-title {

    font-family: var(--font-serif);

    font-size: 3rem;

    font-weight: 400;

    color: var(--navy-primary);

    margin-bottom: 1.5rem;

    line-height: 1.25;

    letter-spacing: -0.015em;

}



.lifestyle-text {

    color: var(--navy-medium);

    font-size: 1.05rem;

    margin-bottom: 3rem;

}



.benefits-grid-mini {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

}



.b-item {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.b-icon {

    width: 32px;

    height: 32px;

    color: var(--accent);

}



.b-item h5 {

    color: var(--navy-primary);

    font-size: 1rem;

    font-weight: 600;

}



.b-item p {

    color: var(--navy-medium);

    font-size: 0.85rem;

    line-height: 1.4;

}



.lifestyle-visual {

    position: relative;

    overflow: hidden;

    border-radius: 12px;

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

    max-height: 600px;

    aspect-ratio: 4 / 5;

    width: 90%;

    margin: 0 auto;

}



.lifestyle-side-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* PVC Colors Sub-section */

.pvc-colors-container {

    margin-top: 2rem;

    padding-top: 4rem;

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

}



.pvc-colors-header {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 3.5rem auto;

}



.pvc-subtitle {

    display: block;

    color: var(--navy-medium);

    font-family: var(--font-primary);

    font-size: 0.85rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 0.5rem;

}



.pvc-title {

    font-family: var(--font-serif);

    font-size: 2.2rem;

    font-weight: 400;

    color: var(--navy-primary);

    margin-bottom: 1rem;

}



.pvc-desc {

    color: var(--navy-medium);

    font-size: 0.95rem;

    line-height: 1.6;

}



.pvc-colors-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

    gap: 1.5rem;

}



.color-card {

    background-color: var(--white);

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

    border-radius: 8px;

    padding: 0.6rem;

    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

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

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.color-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

}



.color-swatch {

    position: relative;

    width: 100%;

    height: 70px;

    border-radius: 5px;

    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);

    overflow: hidden;

}



.color-swatch::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    opacity: 0.06;

    background-image: 

        linear-gradient(90deg, rgba(0,0,0,0.5) 1px, transparent 1px),

        linear-gradient(rgba(0,0,0,0.5) 1px, transparent 1px);

    background-size: 4px 4px;

    pointer-events: none;

}



.color-name {

    font-family: var(--font-primary);

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--navy-primary);

}



/* Wizard Section */

.wizard-section {

    padding: 8rem 0;

    background-color: var(--bg-primary);

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

}



.wizard-box {

    background-color: var(--white);

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

    border-radius: 8px;

    max-width: 800px;

    margin: 0 auto;

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

    overflow: hidden;

}



.wizard-header {

    padding: 2.5rem;

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

    background-color: var(--bg-primary);

}



.wizard-header h2 {

    font-size: 1.8rem;

    font-weight: 700;

    margin-bottom: 0.25rem;

}



.wizard-header p {

    font-size: 0.9rem;

    color: var(--text-secondary);

}



.progress-bar-container {

    height: 6px;

    background-color: var(--border);

    border-radius: 3px;

    margin-top: 1.5rem;

    overflow: hidden;

}



.progress-bar {

    height: 100%;

    background-color: var(--accent);

    transition: width 0.4s ease;

}



.progress-steps-labels {

    display: flex;

    justify-content: space-between;

    margin-top: 0.5rem;

}



.step-label {

    font-size: 0.75rem;

    font-weight: 500;

    color: var(--text-muted);

}



.step-label.active {

    color: var(--black);

    font-weight: 600;

}



.wizard-body {

    padding: 2.5rem;

    min-height: 280px;

}



.wizard-step {

    display: none;

}



.wizard-step.active {

    display: block;

    animation: fadeIn 0.4s ease;

}



.wizard-step h4 {

    font-size: 1.15rem;

    font-weight: 600;

    margin-bottom: 1.5rem;

    color: var(--black);

}



.wizard-sub-heading {

    font-size: 0.98rem;

    font-weight: 600;

    color: var(--navy-primary);

    margin-bottom: 1rem;

    padding-top: 1.25rem;

    border-top: 1px solid var(--border-light, #e2e8f0);

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.wizard-sub-heading::before {

    content: "↳";

    color: var(--accent);

    font-weight: 700;

}





.wizard-options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.wizard-opt-card {
    position: relative;
    cursor: pointer;
    flex: 1 1 calc(33.333% - 1rem);
    min-width: 200px;
    max-width: 320px;
}



.wizard-opt-card input[type="radio"] {

    position: absolute;

    opacity: 0;

    width: 0;

    height: 0;

}



.opt-card-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 1.5rem 1rem;

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

    border-radius: 6px;

    background-color: var(--white);

    transition: var(--transition-smooth);

    height: 100%;

}



.opt-card-content i,

.opt-card-content svg.custom-svg-icon {

    width: 28px;

    height: 28px;

    color: var(--accent);

    margin-bottom: 1rem;

}



.opt-card-content strong {

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--black);

    margin-bottom: 0.5rem;

}



.opt-card-content span {

    font-size: 0.75rem;

    color: var(--text-secondary);

    line-height: 1.3;

}



.wizard-opt-card input[type="radio"]:checked + .opt-card-content {

    border-color: var(--accent);

    background-color: var(--accent-light);

}



.wizard-form-two-col {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;

}



.wizard-summary-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;

    background-color: var(--white);

    padding: 2rem;

    border-radius: 8px;

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

    margin-top: 1.5rem;

    text-align: left;

}



@media (max-width: 768px) {

    .wizard-summary-grid {

        grid-template-columns: 1fr;

        gap: 1.25rem;

        padding: 1.5rem;

    }

}



.summary-item {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

    padding-bottom: 0.75rem;

    border-bottom: 1px solid rgba(226, 221, 213, 0.5);

}



.summary-item:last-child,

.summary-item:nth-last-child(2) {

    border-bottom: none;

}



@media (max-width: 768px) {

    .summary-item:nth-last-child(2) {

        border-bottom: 1px solid rgba(226, 221, 213, 0.5);

    }

}



.summary-label {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--text-muted);

}



.summary-item strong {

    font-size: 1.05rem;

    color: var(--navy-primary);

    font-weight: 600;

}



.wizard-select {

    width: 100%;

    padding: 0.8rem 1rem;

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

    border-radius: 6px;

    background-color: var(--white);

    font-family: var(--font-sans);

    font-size: 0.9rem;

    outline: none;

    cursor: pointer;

}



.wizard-select:focus {

    border-color: var(--accent);

}



.small-grid {

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

}



.wizard-opt-card-sm {

    position: relative;

    cursor: pointer;

    text-align: center;

}



.wizard-opt-card-sm input {

    position: absolute;

    opacity: 0;

    width: 0;

    height: 0;

}



.wizard-opt-card-sm span {

    display: block;

    padding: 0.8rem;

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

    border-radius: 6px;

    font-size: 0.85rem;

    font-weight: 500;

    transition: var(--transition-fast);

}



.wizard-opt-card-sm input:checked + span {

    border-color: var(--accent);

    background-color: var(--accent-light);

    color: var(--black);

}



.wizard-final-form {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1.2rem;

}



.form-group {

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

}



.form-group label {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--black);

}



.form-input {

    width: 100%;

    padding: 0.85rem 1.2rem;

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

    border-radius: 6px;

    font-family: var(--font-sans);

    font-size: 0.95rem;

    outline: none;

    transition: var(--transition-fast);

}



.form-input:focus {

    border-color: var(--accent);

    box-shadow: 0 0 0 2px var(--accent-light);

}



.step-subtext {

    font-size: 0.85rem;

    color: var(--text-muted);

    margin-bottom: 1.5rem;

}



.wizard-footer {

    padding: 1.5rem 2.5rem;

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

    display: flex;

    justify-content: space-between;

    background-color: var(--bg-primary);

}



/* Comparison Table Section */

.craft-section {

    padding: 8rem 0;

    background-color: var(--bg-primary);

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

}



.comparison-table-wrapper {

    margin-top: 4rem;

    overflow-x: auto;

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

    border-radius: 8px;

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

}



.comparison-table {

    width: 100%;

    border-collapse: collapse;

    text-align: left;

    background-color: var(--white);

}



.comparison-table th, .comparison-table td {

    padding: 1.5rem 2rem;

    font-size: 0.9rem;

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

}



.comparison-table th {

    background-color: var(--bg-primary);

    font-weight: 600;

    color: var(--black);

    text-transform: uppercase;

    font-size: 0.75rem;

    letter-spacing: 0.05em;

}



.comparison-table td strong {

    color: var(--black);

}



.comparison-table tr:last-child td {

    border-bottom: none;

}



.comparison-table .highlight-column {

    background-color: var(--accent-light);

    font-weight: 500;

    color: var(--black);

    border-left: 2px solid var(--accent);

    border-right: 2px solid var(--accent);

}



.comparison-table tr:first-child .highlight-column {

    border-top: 2px solid var(--accent);

}



.comparison-table tr:last-child .highlight-column {

    border-bottom: 2px solid var(--accent);

}



/* Testimonials */

.testimonials-section {

    padding: 8rem 0;

    background-color: var(--bg-primary);

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

}



.testimonials-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 3rem;

    margin-top: 4rem;

}



.testimonial-card {

    background-color: var(--white);

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

    border-radius: 8px;

    padding: 3rem;

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

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.stars {

    display: flex;

    gap: 0.25rem;

    color: var(--accent);

    margin-bottom: 1.5rem;

}



.stars i,

.stars svg {

    width: 16px;

    height: 16px;

    fill: var(--accent);

    stroke: var(--accent);

}



.testimonial-quote {

    font-family: var(--font-serif);

    font-size: 1.25rem;

    font-style: italic;

    color: var(--text-primary);

    line-height: 1.6;

    margin-bottom: 2rem;

}



.testimonial-author {

    display: flex;

    flex-direction: column;

}



.testimonial-author strong {

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--black);

}



.testimonial-author span {

    font-size: 0.8rem;

    color: var(--text-muted);

}



/* FAQ Accordion Section */

.faq-section {

    padding: 8rem 0;

    background-color: var(--bg-secondary);

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

}



.faq-accordion-container {

    max-width: 800px;

    margin: 4rem auto 0;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.faq-item {

    background-color: var(--white);

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

    border-radius: 6px;

    overflow: hidden;

    transition: var(--transition-fast);

}



.faq-trigger {

    width: 100%;

    padding: 1.5rem 2rem;

    background: none;

    border: none;

    display: flex;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

    font-family: var(--font-sans);

    font-size: 1.05rem;

    font-weight: 600;

    color: var(--black);

    text-align: left;

}



.faq-icon {

    width: 20px;

    height: 20px;

    color: var(--text-muted);

    transition: transform 0.3s ease;

}



.faq-content {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.3s ease;

    padding: 0 2rem;

}



.faq-content p {

    font-size: 0.95rem;

    color: var(--text-secondary);

    line-height: 1.6;

    padding-bottom: 1.5rem;

}



.faq-item.active {

    border-color: var(--accent);

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

}



.faq-item.active .faq-trigger {

    color: var(--accent);

}



.faq-item.active .faq-icon {

    transform: rotate(180deg);

    color: var(--accent);

}



.faq-item.active .faq-content {

    max-height: 300px; /* arbitrary height to slide down */

}



/* Main Footer */

.main-footer {

    background-color: var(--black);

    color: var(--white);

    padding: 6rem 0 3rem;

}



.footer-grid {

    display: grid;

    grid-template-columns: 1.2fr 0.8fr 1fr;

    gap: 4rem;

    margin-bottom: 4rem;

    border-bottom: 1px solid rgba(255,255,255,0.1);

    padding-bottom: 4rem;

}



.footer-col-brand {

    display: flex;

    flex-direction: column;

}



.footer-col-brand .logo-title {

    color: var(--white);

}



.footer-about {

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

    font-size: 0.9rem;

    margin: 1.5rem 0;

    line-height: 1.5;

}



.social-links {

    display: flex;

    gap: 1.2rem;

    margin-top: 1rem;

}



.social-links a {

    color: var(--accent);

    transition: var(--transition-fast);

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.social-links a:hover {

    color: var(--white);

    transform: translateY(-2px);

}



/* Footer Icons Standardization */

.main-footer svg,

.main-footer [data-lucide],

.social-links a svg,

.social-links a [data-lucide] {

    width: 18px !important;

    height: 18px !important;

    stroke: var(--accent) !important;

    fill: none !important;

}



/* Hover state for interactive footer icons */

.main-footer a:hover svg,

.main-footer a:hover [data-lucide],

.social-links a:hover svg,

.social-links a:hover [data-lucide] {

    stroke: var(--white) !important;

}



.footer-col h4 {

    color: var(--white);

    font-size: 0.9rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-bottom: 1.5rem;

}



.footer-links {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0.8rem;

}



.footer-links a {

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

    text-decoration: none;

    font-size: 0.9rem;

    transition: var(--transition-fast);

}



.footer-links a:hover {

    color: var(--white);

    padding-left: 5px;

}



.footer-contact {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.footer-contact li {

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

    font-size: 0.9rem;

    gap: 0.75rem;

    align-items: flex-start;

}



.footer-contact li i {

    flex-shrink: 0;

    color: var(--accent);

    margin-top: 2px;

}



.footer-contact a {

    color: var(--accent);

    text-decoration: none;

    transition: var(--transition-fast);

}



.footer-contact a:hover {

    color: var(--white);

    text-decoration: underline;

}



.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.75rem;

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

}



/* Floating WhatsApp Button */

.whatsapp-floating {

    position: fixed;

    bottom: 2rem;

    right: 2rem;

    width: 60px;

    height: 60px;

    background-color: #25d366;

    color: var(--white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);

    z-index: 999;

    text-decoration: none;

    transition: var(--transition-smooth);

}



.whatsapp-floating i {

    width: 32px;

    height: 32px;

}



.whatsapp-floating:hover {

    transform: scale(1.1) rotate(5deg);

    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.6);

}



.whatsapp-tooltip {

    position: absolute;

    right: 75px;

    background-color: var(--white);

    color: var(--black);

    padding: 0.4rem 0.9rem;

    border-radius: 4px;

    font-size: 0.8rem;

    font-weight: 600;

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

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transform: translateX(10px);

    transition: var(--transition-smooth);

}



.whatsapp-floating:hover .whatsapp-tooltip {

    opacity: 1;

    transform: translateX(0);

}



/* Animations */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Services Section */

.services-section {

    padding: 8rem 0;

    background-color: var(--bg-secondary);

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

}

.services-grid {

    display: grid;

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

    gap: 2rem;

    margin-top: 4rem;

}

.service-card {

    background-color: var(--white);

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

    border-radius: 8px;

    padding: 2.5rem;

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

    transition: var(--transition-smooth);

    display: flex;

    flex-direction: column;

    gap: 1.2rem;

}

.service-card:hover {

    transform: translateY(-6px);

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

    border-color: var(--accent);

}

.service-icon {

    width: 50px;

    height: 50px;

    background-color: var(--accent-light);

    color: var(--navy-medium);

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.service-icon i, .service-icon svg {

    width: 24px;

    height: 24px;

}

.service-card h4 {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--navy-primary);

}

.service-card p {

    font-size: 0.9rem;

    color: var(--text-secondary);

    line-height: 1.6;

}



/* Responsive Media Queries */

@media (max-width: 1024px) {

    .navbar {

        height: 80px;

    }

    .nav-links, .nav-actions {

        display: none !important;

    }

    .mobile-menu-toggle {

        display: block !important;

    }

    .hero-title {

        font-size: 3rem;

    }

    .customizer-grid, .products-grid, .footer-grid {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    .services-grid {

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

    }

    .products-grid {

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

    }

    .section-header-side {

        grid-template-columns: 1fr;

        gap: 1rem;

    }

    .lifestyle-container {

        grid-template-columns: 1fr;

    }

    .lifestyle-content {

        padding: 5rem 2rem;

    }

    .lifestyle-visual {

        height: 350px;

    }

}



@media (max-width: 768px) {

    body {

        font-size: 15px;

    }

    .hero-section {

        height: auto;

        padding: 6rem 0;

    }

    .hero-content {

        padding: 0 1.5rem;

    }

    .hero-title {

        font-size: 2.4rem;

    }

    .hero-ctas {

        flex-direction: column;

        gap: 0.8rem;

    }

    .statement-grid {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    .services-grid {

        grid-template-columns: 1fr;

    }

    .products-grid {

        grid-template-columns: 1fr;

    }

    .wizard-options-grid {

        grid-template-columns: 1fr;

    }

    .small-grid {

        grid-template-columns: 1fr;

    }

    .wizard-form-two-col {

        grid-template-columns: 1fr;

    }

    .testimonials-grid {

        grid-template-columns: 1fr;

    }

    .footer-bottom {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

    }

    .comparison-table th, .comparison-table td {

        padding: 1rem;

        font-size: 0.8rem;

    }

}



/* Scroll Reveal Animation Styles */

.reveal {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

    will-change: transform, opacity;

}



.reveal.reveal-active {

    opacity: 1;

    transform: translateY(0);

}



.reveal-delay-1 {

    transition-delay: 0.15s;

}



.reveal-delay-2 {

    transition-delay: 0.3s;

}



.reveal-delay-3 {

    transition-delay: 0.45s;

}



.reveal-delay-4 {

    transition-delay: 0.6s;

}



/* Products Filter Buttons */

.products-filter-container {

    display: flex;

    justify-content: center;

    gap: 1.5rem;

    margin-bottom: 3.5rem;

}



.filter-btn {

    background: none;

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

    color: var(--navy-medium);

    padding: 0.75rem 2rem;

    font-family: var(--font-primary);

    font-size: 0.85rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    border-radius: 30px;

    cursor: pointer;

    transition: var(--transition-smooth);

}



.filter-btn:hover {

    border-color: var(--accent);

    color: var(--accent);

}



.filter-btn.active {

    background-color: var(--navy-primary);

    border-color: var(--navy-primary);

    color: var(--white);

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

}



/* Wizard Colors Grid & Swatch Selection */

.wizard-colors-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));

    gap: 1rem;

    margin: 1.5rem 0;

    max-height: 280px;

    overflow-y: auto;

    padding-right: 0.5rem;

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

    border-radius: 6px;

    padding: 1rem;

    background-color: var(--off-white);

}



.wizard-colors-grid::-webkit-scrollbar {

    width: 6px;

}

.wizard-colors-grid::-webkit-scrollbar-track {

    background: transparent;

}

.wizard-colors-grid::-webkit-scrollbar-thumb {

    background-color: rgba(0, 0, 0, 0.1);

    border-radius: 10px;

}



.color-card-wiz {

    position: relative;

    cursor: pointer;

    background-color: var(--white);

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

    border-radius: 6px;

    padding: 0.5rem;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.4rem;

    transition: var(--transition-fast);

}



.color-card-wiz input[type="radio"] {

    position: absolute;

    opacity: 0;

    width: 0;

    height: 0;

}



.color-card-wiz:hover {

    border-color: var(--accent);

}



.color-card-wiz:has(input[type="radio"]:checked) {

    border-color: var(--navy-primary);

    background-color: var(--off-white);

    box-shadow: inset 0 0 0 1px var(--navy-primary);

}



.color-card-wiz.selected {

    border-color: var(--navy-primary);

    background-color: var(--off-white);

}



.color-swatch-wiz {

    position: relative;

    width: 100%;

    height: 45px;

    border-radius: 4px;

    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);

    overflow: hidden;

}



.color-swatch-wiz::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    opacity: 0.06;

    background-image: 

        linear-gradient(90deg, rgba(0,0,0,0.5) 1px, transparent 1px),

        linear-gradient(rgba(0,0,0,0.5) 1px, transparent 1px);

    background-size: 3px 3px;

    pointer-events: none;

}



.color-name-wiz {

    font-family: var(--font-primary);

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--navy-primary);

}



/* Upgraded 3-2 products filter buttons container */

.products-filter-container-new {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 1.25rem;

    margin-top: 1rem;

    margin-bottom: 4rem;

    max-width: 950px;

    margin-left: auto;

    margin-right: auto;

    padding: 0 1rem;

}



.products-filter-container-new .filter-btn {

    flex: 0 1 calc(33.333% - 0.84rem);

    text-align: center;

    box-sizing: border-box;

    padding: 0.9rem 1.5rem;

    font-size: 0.85rem;

    letter-spacing: 0.05em;

}



@media (max-width: 992px) {

    .products-filter-container-new .filter-btn {

        flex: 0 1 calc(50% - 0.63rem);

    }

}



@media (max-width: 576px) {

    .products-filter-container-new .filter-btn {

        flex: 1 1 100%;

    }

}



/* Scroll Margin Adjustment for Navbar Alignment */

.products-section,

.wizard-section,

.craft-section,

.lifestyle-section,

.services-section,

.maintenance-section {

    scroll-margin-top: 94px;

}



@media (max-width: 1024px) {

    .products-section,

    .wizard-section,

    .craft-section,

    .lifestyle-section,

    .services-section,

    .maintenance-section {

        scroll-margin-top: 80px;

    }

}



@media (max-width: 992px) {

    .product-card {

        flex-direction: column !important;

        max-width: 550px;

        margin: 0 auto;

    }

    .product-image-wrapper {

        flex: 0 0 auto !important;

        width: 100% !important;

        height: 320px !important;

        min-height: auto !important;

    }

    .product-info {

        flex: 0 0 auto !important;

        width: 100% !important;

        padding: 2.2rem !important;

    }

}



/* Highlights Flex Layout for Vertical Centering of Odd-count Items */

.highlights-flex-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 2rem;

    margin-top: 3rem;

}



.highlights-flex-container .service-card {

    flex: 0 1 calc(50% - 1rem);

    min-width: 320px;

    box-sizing: border-box;

}



@media (max-width: 1024px) {

    .highlights-flex-container .service-card {

        flex: 0 1 calc(50% - 1rem);

    }

}



@media (max-width: 768px) {

    .highlights-flex-container .service-card {

        flex: 1 1 100%;

    }

}



/* Maintenance Section */

.maintenance-section {

    padding: 8rem 0;

    background-color: var(--bg-primary);

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

}



.maintenance-grid {

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 5rem;

    margin-top: 4rem;

}



.maintenance-subheading {

    font-size: 1.8rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    color: var(--navy-primary);

}



.maintenance-paragraph {

    font-size: 1rem;

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 1.2rem;

}



.evaluation-list {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.evaluation-item {

    display: flex;

    gap: 1.25rem;

    align-items: flex-start;

}



.evaluation-icon {

    flex: 0 0 45px;

    height: 45px;

    background-color: var(--accent-light);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent);

}



.evaluation-icon svg,

.evaluation-icon [data-lucide] {

    width: 20px;

    height: 20px;

}



.evaluation-content h4 {

    font-size: 1.1rem;

    font-weight: 600;

    margin-bottom: 0.4rem;

    color: var(--navy-primary);

}



.evaluation-content p {

    font-size: 0.92rem;

    color: var(--text-secondary);

    line-height: 1.5;

}



@media (max-width: 992px) {

    .maintenance-grid {

        grid-template-columns: 1fr;

        gap: 3.5rem;

    }

}