/* ============================================================
   PRODUCT PAGES — Shared styles for decking/railing product pages
   Imported only by pages that need them (not global)
   ============================================================ */

/* --- Page Hero (generic pages) --- */
.page-hero { position: relative; min-height: 250px; max-height: 400px; display: flex; align-items: flex-end; padding: calc(var(--header-height) + var(--space-xl)) var(--container-pad) var(--space-lg); background-size: cover; background-position: center; background-color: var(--color-dark); overflow: hidden; }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,28,30,0.92) 0%, rgba(28,28,30,0.6) 50%, rgba(28,28,30,0.35) 100%); z-index: 1; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero-title { color: var(--color-white); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1.1; max-width: 700px; }
.page-hero img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* --- Product Intro --- */
.product-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
.product-intro-title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); margin-bottom: var(--space-sm); }
.product-intro-desc { font-size: 1.1rem; line-height: 1.7; color: var(--color-text-light); }
.product-badges { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.product-badge { display: flex; align-items: center; gap: 0.75rem; padding: var(--space-sm) var(--space-md); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 500; color: var(--color-heading); transition: box-shadow var(--transition-base); }
.product-badge:hover { box-shadow: var(--shadow-md); }
.product-badge-highlight { border-color: var(--color-accent); background: linear-gradient(135deg, #fff8f0, #ffffff); }

/* --- Overview Intro (tov-) --- */
.tov-intro-body { text-align: center; }
.tov-intro-lead { font-size: 1.25rem; line-height: 1.7; color: var(--color-text); margin-bottom: var(--space-lg); }
.tov-intro-stats { display: flex; justify-content: center; gap: var(--space-xl); margin-bottom: var(--space-lg); padding: var(--space-lg) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.tov-stat { display: flex; flex-direction: column; gap: 0.25rem; }
.tov-stat-number { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--color-primary); line-height: 1; }
.tov-stat-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); }

/* --- Tier Cards Container --- */
.tier-cards { display: flex !important; flex-wrap: wrap !important; gap: 1rem !important; }

/* --- Feature Cards (tov-) --- */
.tov-feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.tov-feature-card { padding: var(--space-lg); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-align: center; transition: box-shadow var(--transition-base), transform var(--transition-base); }
.tov-feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.tov-feature-icon { margin-bottom: var(--space-sm); display: flex; justify-content: center; }
.tov-feature-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.tov-feature-card p { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.6; }

/* --- Feature Cards (generic) --- */
.feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.feature-card { padding: var(--space-lg); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-align: center; transition: box-shadow var(--transition-base), transform var(--transition-base); }
.feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.feature-card-icon { margin-bottom: var(--space-sm); display: flex; justify-content: center; }
.feature-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.6; }

/* --- Collection Tabs --- */
.collection-tabs { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: var(--space-lg); }
.collection-tab { padding: 0.7rem 1.75rem; background: var(--color-white); border: 2px solid var(--color-border); border-radius: var(--radius-full); font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--color-text-light); cursor: pointer; transition: all var(--transition-fast); }
.collection-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.collection-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.collection-panel { display: none; }
.collection-panel.active { display: block; }

/* --- Board Profiles --- */
.profile-tab-nav { display: flex; gap: 0; margin-bottom: var(--space-lg); border-bottom: 2px solid var(--color-border); justify-content: center; }
.profile-tab { padding: 0.85rem 1.75rem; border: none; background: none; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--color-text-light); cursor: pointer; position: relative; transition: color var(--transition-fast); }
.profile-tab::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transition: transform var(--transition-fast); }
.profile-tab:hover { color: var(--color-primary); }
.profile-tab.active { color: var(--color-primary); }
.profile-tab.active::after { transform: scaleX(1); }
.profile-tab-content { display: none; }
.profile-tab-content.active { display: block; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); }
.profile-card { padding: var(--space-lg); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-align: center; transition: box-shadow var(--transition-base); }
.profile-card:hover { box-shadow: var(--shadow-md); }
.profile-card-image { margin-bottom: var(--space-sm); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-warm); }
.profile-card-image img { width: 100%; height: auto; }
.profile-card h4 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.profile-detail { font-size: 0.85rem; color: var(--color-accent); font-weight: 500; margin-bottom: 0.5rem; }
.profile-dims { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--color-heading); margin-bottom: 0.25rem; }
.profile-lengths { font-size: 0.85rem; color: var(--color-text-light); }

/* --- Cross-Sell --- */
.cross-sell-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; max-width: 700px; margin: 0 auto; box-shadow: var(--shadow-sm); }
.cross-sell-content h3 { font-size: 1.5rem; margin-bottom: var(--space-sm); }
.cross-sell-content p { color: var(--color-text-light); line-height: 1.7; margin-bottom: var(--space-md); }

/* --- Notice Bar --- */
.notice-bar { padding: var(--space-md) var(--container-pad); }
.notice-card { display: flex; align-items: flex-start; gap: var(--space-sm); max-width: 800px; margin: 0 auto; padding: var(--space-md) var(--space-lg); background: #fff8f0; border: 1px solid var(--color-accent-light); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); font-size: 0.9rem; color: var(--color-text); line-height: 1.6; }
.notice-card svg { flex-shrink: 0; margin-top: 0.15rem; }

/* --- Signature Styles (sig-) --- */
.sig-intro { text-align: center; }
.sig-intro-inner { max-width: 700px; margin: 0 auto; }
.sig-intro-title { font-size: clamp(2rem, 4vw, 3.25rem); margin: var(--space-md) 0 var(--space-sm); }
.sig-intro-desc { font-size: 1.15rem; line-height: 1.75; color: var(--color-text-light); }
.sig-features { padding: var(--space-xl) var(--container-pad); }
.sig-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); max-width: 1000px; margin: 0 auto; }
.sig-feature { text-align: center; padding: var(--space-lg); }
.sig-feature-icon { margin-bottom: var(--space-sm); display: flex; justify-content: center; }
.sig-feature h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.sig-feature p { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.65; }

/* Galleries (sig-, trn-) */
.sig-gallery-grid, .trn-gallery-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.sig-gallery-main, .trn-gallery-main { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-dark); }
.sig-gallery-hero, .trn-gallery-hero { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; }
.sig-gallery-thumbs, .trn-gallery-thumbs { display: flex; justify-content: center; gap: 0.75rem; overflow-x: auto; padding-bottom: var(--space-xs); scrollbar-width: thin; }
.sig-gallery-thumb, .trn-gallery-thumb { flex-shrink: 0; width: 120px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; border: 3px solid transparent; cursor: pointer; padding: 0; background: none; transition: border-color var(--transition-fast), opacity var(--transition-fast); opacity: 0.6; }
.sig-gallery-thumb:hover, .sig-gallery-thumb.active, .trn-gallery-thumb:hover, .trn-gallery-thumb.active { opacity: 1; border-color: var(--color-primary); }
.sig-gallery-thumb img, .trn-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Cross-sell cards (sig-, lin-, trn-, sel-, enh-) */
.sig-cross-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.lin-cross-grid, .trn-cross-grid, .sel-cross-grid, .enh-cross-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.sig-cross-card, .lin-cross-card, .trn-cross-card, .sel-cross-card, .enh-cross-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); border: 1px solid var(--color-border); text-decoration: none; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.sig-cross-card:hover, .lin-cross-card:hover, .trn-cross-card:hover, .sel-cross-card:hover, .enh-cross-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sig-cross-card-img, .lin-cross-card-img, .trn-cross-card-img, .sel-cross-card-img, .enh-cross-card-img { height: 180px; background-size: cover; background-position: center; }
.sig-cross-card-img { height: 200px; }
.sig-cross-card-body, .lin-cross-card-body, .trn-cross-card-body, .sel-cross-card-body, .enh-cross-card-body { padding: var(--space-md) var(--space-lg); flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
.sig-cross-card-body h3 { font-size: 1.25rem; color: var(--color-heading); }
.lin-cross-card-body h3, .trn-cross-card-body h3, .sel-cross-card-body h3, .enh-cross-card-body h3 { font-size: 1.15rem; color: var(--color-heading); }
.sig-cross-card-body p, .lin-cross-card-body p, .trn-cross-card-body p, .sel-cross-card-body p, .enh-cross-card-body p { font-size: 0.875rem; color: var(--color-text-light); flex: 1; }
.sig-cross-link, .lin-cross-link, .trn-cross-link, .sel-cross-link, .enh-cross-link { font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; color: var(--color-primary); transition: color var(--transition-fast); }
.sig-cross-card:hover .sig-cross-link, .lin-cross-card:hover .lin-cross-link, .trn-cross-card:hover .trn-cross-link, .sel-cross-card:hover .sel-cross-link, .enh-cross-card:hover .enh-cross-link { color: var(--color-accent); }
.sig-cross-label, .lin-cross-label, .trn-cross-label, .sel-cross-label, .enh-cross-label { display: inline-block; width: fit-content; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 0.15rem; }

/* --- Lineage Sun Callout --- */
.lin-sun-callout { padding: var(--space-lg) var(--container-pad); }
.lin-sun-card { display: flex; align-items: center; gap: var(--space-lg); max-width: 900px; margin: 0 auto; padding: var(--space-lg) var(--space-xl); background: linear-gradient(135deg, #fff8f0, #fffdf8); border: 1px solid rgba(212, 135, 63, 0.25); border-radius: var(--radius-lg); }
.lin-sun-icon { flex-shrink: 0; }
.lin-sun-content h3 { font-size: 1.25rem; margin-bottom: 0.35rem; color: var(--color-heading); }
.lin-sun-content p { font-size: 0.95rem; color: var(--color-text-light); line-height: 1.7; }
.lin-sun-stat { flex-shrink: 0; text-align: center; padding-left: var(--space-lg); border-left: 1px solid rgba(212, 135, 63, 0.2); }
.lin-sun-stat-number { display: block; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; color: var(--color-accent); line-height: 1; }
.lin-sun-stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); }

/* --- Footer CTA (product pages) --- */
.footer-cta-buttons { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

/* --- Railing Overview (rov-) --- */
.rov-infill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.rov-infill-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition-base), transform var(--transition-base); }
.rov-infill-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.rov-infill-img { width: 100%; height: 200px; background-size: cover; background-position: center; transition: transform 0.4s var(--ease-out); }
.rov-infill-card:hover .rov-infill-img { transform: scale(1.03); }
.rov-infill-content { padding: var(--space-md); }
.rov-infill-content h3 { font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--color-heading); }
.rov-infill-content p { font-size: 0.88rem; color: var(--color-text-light); line-height: 1.6; margin-bottom: var(--space-sm); }

/* --- Railing Transcend --- */
.product-hero-tagline { color: rgba(255,255,255,0.85); font-family: var(--font-accent); font-style: italic; font-size: clamp(1.05rem, 2vw, 1.35rem); margin-top: var(--space-xs); max-width: 500px; }
.features-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.feature-icon { margin-bottom: var(--space-sm); display: flex; justify-content: center; }
.railing-color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); }
.railing-color-chip { text-align: center; }
.railing-color-swatch { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto var(--space-xs); border: 3px solid var(--color-border); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.railing-color-chip:hover .railing-color-swatch { transform: scale(1.1); box-shadow: var(--shadow-md); }
.railing-color-name { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.railing-color-note { text-align: center; font-size: 0.9rem; color: var(--color-text-light); }
.railing-color-note a { color: var(--color-primary); font-weight: 600; }
.specs-table-wrap { overflow-x: auto; margin-bottom: var(--space-md); }
.specs-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.specs-table thead { background: var(--color-primary); color: var(--color-white); }
.specs-table th { padding: 0.85rem 1.2rem; text-align: left; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.specs-table td { padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--color-border); }
.specs-table tbody tr:hover { background: rgba(117, 45, 16, 0.04); }
.railing-cta-block { text-align: center; max-width: 640px; margin: 0 auto; }
.railing-cta-block h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: var(--space-sm); }
.railing-cta-block p { font-size: 1.05rem; color: var(--color-text-light); margin-bottom: var(--space-md); line-height: 1.7; }
.railing-cta-buttons { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

/* --- Signature Railing (sigr-) --- */
.sigr-overview { text-align: center; }
.sigr-overview-inner { max-width: 740px; margin: 0 auto; }
.sigr-overview-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: var(--space-sm); }
.sigr-overview-desc { font-size: 1.1rem; line-height: 1.7; color: var(--color-text-light); margin-bottom: var(--space-lg); }
.sigr-overview-stats { display: flex; justify-content: center; gap: var(--space-xl); flex-wrap: wrap; }
.sigr-stat { display: flex; flex-direction: column; align-items: center; }
.sigr-stat-number { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; color: #b8962e; line-height: 1; }
.sigr-stat-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-light); margin-top: 0.25rem; }
.sigr-infill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.sigr-infill-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease; }
.sigr-infill-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.1); }
.sigr-infill-img { aspect-ratio: 16 / 10; overflow: hidden; }
.sigr-infill-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sigr-infill-card:hover .sigr-infill-img img { transform: scale(1.04); }
.sigr-infill-body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.sigr-infill-body h3 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.25rem; }
.sigr-infill-hook { font-size: 0.95rem; color: #b8962e; font-weight: 500; margin: 0 0 var(--space-sm); }
.sigr-infill-body p { color: var(--color-text-light); line-height: 1.6; }
.sigr-infill-features { list-style: none; padding: 0; margin: var(--space-sm) 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sigr-infill-features li { background: var(--color-bg-warm); padding: 0.35rem 0.85rem; border-radius: 100px; font-size: 0.82rem; color: var(--color-text-light); font-weight: 500; }
.sigr-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.sigr-feature-card { text-align: center; padding: var(--space-lg) var(--space-md); }
.sigr-feature-icon { margin-bottom: var(--space-sm); }
.sigr-feature-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
.sigr-feature-card p { font-size: 0.95rem; color: var(--color-text-light); line-height: 1.6; }
.sigr-specs-table-wrap { max-width: 700px; margin: 0 auto; }
.sigr-specs-table { width: 100%; border-collapse: collapse; }
.sigr-specs-table th, .sigr-specs-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid rgba(0,0,0,.08); }
.sigr-specs-table th { font-weight: 600; width: 35%; color: var(--color-heading); font-size: 0.95rem; }
.sigr-specs-table td { color: var(--color-text-light); }
.sigr-specs-table tr:last-child th, .sigr-specs-table tr:last-child td { border-bottom: none; }
.sigr-cta-inner { text-align: center; max-width: 600px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); border-radius: 16px; color: #fff; }
.sigr-cta-inner h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; margin-bottom: var(--space-sm); color: #fff; }
.sigr-cta-inner p { color: rgba(255,255,255,.7); margin-bottom: var(--space-md); line-height: 1.6; }

/* --- Enhance Railing (enh-rail-) --- */
.enh-rail-compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); }
.enh-rail-option-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.enh-rail-option-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.enh-rail-option-img { height: 240px; overflow: hidden; }
.enh-rail-option-img img { width: 100%; height: 100%; object-fit: cover; }
.enh-rail-option-body { padding: var(--space-lg); }
.enh-rail-option-body h3 { font-size: 1.35rem; color: var(--color-heading); margin-bottom: var(--space-xs); }
.enh-rail-option-desc { color: var(--color-text-light); font-size: 0.95rem; margin-bottom: var(--space-md); line-height: 1.6; }
.enh-rail-features-list { list-style: none; padding: 0; margin: 0 0 var(--space-md); display: flex; flex-direction: column; gap: 0.6rem; }
.enh-rail-features-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--color-text); }
.enh-rail-features-list li svg { flex-shrink: 0; }
.enh-rail-colors { display: flex; align-items: center; gap: 0.5rem; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.enh-rail-colors-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); }
.enh-rail-color-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--color-border); display: inline-block; }
.enh-rail-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); }
.enh-rail-feat-card { text-align: center; padding: var(--space-lg); }
.enh-rail-feat-icon { margin-bottom: var(--space-md); }
.enh-rail-feat-card h3 { font-size: 1.1rem; color: var(--color-heading); margin-bottom: var(--space-xs); }
.enh-rail-feat-card p { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.6; }
.enh-rail-cta-content { text-align: center; max-width: 600px; margin: 0 auto; }
.enh-rail-cta-content h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); color: var(--color-heading); margin-bottom: var(--space-sm); }
.enh-rail-cta-content p { color: var(--color-text-light); font-size: 1.05rem; margin-bottom: var(--space-lg); line-height: 1.6; }
.enh-rail-cta-buttons { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }

/* --- Select Railing (rsl-) --- */
.rsl-config-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.rsl-config-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.rsl-config-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rsl-config-img { height: 260px; overflow: hidden; }
.rsl-config-img img { width: 100%; height: 100%; object-fit: cover; }
.rsl-config-body { padding: var(--space-lg); }
.rsl-config-body h3 { font-size: 1.35rem; color: var(--color-heading); margin-bottom: var(--space-sm); }
.rsl-config-body p { font-size: 0.925rem; color: var(--color-text-light); line-height: 1.7; margin-bottom: var(--space-md); }
.rsl-config-specs { display: flex; flex-direction: column; gap: 0.5rem; }
.rsl-config-specs li { font-size: 0.875rem; color: var(--color-text); padding-left: 1.5rem; position: relative; }
.rsl-config-specs li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.rsl-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.rsl-feature-card { text-align: center; padding: var(--space-lg); }
.rsl-feature-icon { width: 72px; height: 72px; margin: 0 auto var(--space-md); display: flex; align-items: center; justify-content: center; background: var(--color-bg-warm); border-radius: var(--radius-full); }
.rsl-feature-card h3 { font-size: 1.1rem; color: var(--color-heading); margin-bottom: var(--space-sm); }
.rsl-feature-card p { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.7; }
.rsl-cta-card { text-align: center; padding: var(--space-2xl) var(--space-xl); background: var(--color-white); border-radius: var(--radius-lg); border: 2px solid var(--color-accent); }
.rsl-cta-card h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-heading); margin-bottom: var(--space-sm); }
.rsl-cta-card p { font-size: 1rem; color: var(--color-text-light); max-width: 540px; margin: 0 auto var(--space-lg); line-height: 1.7; }

/* --- Page Content --- */
.page-content { padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-3xl); }
.page-header { margin-bottom: var(--space-xl); }
.page-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: var(--space-sm); }
.page-subtitle { font-size: 1.125rem; color: var(--color-text-light); }

/* ============================================================
   RESPONSIVE — Product Pages
   ============================================================ */
@media (max-width: 767px) {
  .product-intro-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .product-badges { grid-template-columns: 1fr; }
  .feature-cards, .tov-feature-cards { grid-template-columns: 1fr; }
  .sig-features-grid { grid-template-columns: 1fr; }
  .sig-cross-grid { grid-template-columns: 1fr; }
  .lin-sun-card { flex-direction: column; text-align: center; }
  .lin-sun-stat { padding-left: 0; border-left: none; padding-top: var(--space-md); border-top: 1px solid rgba(212, 135, 63, 0.2); }
  .lin-cross-grid, .trn-cross-grid, .sel-cross-grid, .enh-cross-grid { grid-template-columns: 1fr; }
  .tov-intro-stats { flex-direction: column; gap: var(--space-md); align-items: center; }
  .tov-stat { text-align: center; }
  .tov-intro-lead { font-size: 1.05rem; text-align: center; }
  .cross-sell-card { padding: var(--space-lg); text-align: center; }
  .cross-sell-content h3 { font-size: 1.25rem; }
  .rov-infill-grid { grid-template-columns: 1fr; }
  .sig-gallery-thumb, .trn-gallery-thumb { width: 100px; height: 66px; }
  .tier-cards { display: flex !important; flex-direction: column !important; gap: 1rem !important; }
  .features-grid-3 { grid-template-columns: 1fr; }
  .railing-color-grid { grid-template-columns: repeat(3, 1fr); }
  .railing-color-swatch { width: 60px; height: 60px; }
  .collection-tabs { flex-direction: column; align-items: stretch; }
  .profile-grid { grid-template-columns: 1fr; }
  .footer-cta-buttons { flex-direction: column; align-items: center; }
  .notice-card { flex-direction: column; }
  .sigr-infill-grid { grid-template-columns: 1fr; }
  .sigr-features-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .enh-rail-compare-grid { grid-template-columns: 1fr; }
  .enh-rail-feat-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .enh-rail-option-img { height: 200px; }
  .enh-rail-cta-buttons { flex-direction: column; align-items: center; }
  .rsl-config-grid { grid-template-columns: 1fr; }
  .rsl-features-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .rsl-feature-card { padding: var(--space-md); }
}

@media (max-width: 480px) {
  .rsl-features-grid { grid-template-columns: 1fr; }
  .rsl-config-img { height: 200px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .product-intro-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .product-badges { grid-template-columns: repeat(4, 1fr); }
  .feature-cards, .tov-feature-cards { grid-template-columns: repeat(2, 1fr); }
  .sig-features-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .lin-cross-grid, .trn-cross-grid, .sel-cross-grid, .enh-cross-grid { grid-template-columns: repeat(2, 1fr); }
  .rov-infill-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .railing-color-grid { grid-template-columns: repeat(3, 1fr); }
  .sigr-infill-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .sigr-features-grid { grid-template-columns: repeat(2, 1fr); }
}