/* PASS 2 reskin layer (scoped under .page-product) */
/* Cache-bust token pre product-page.css — .css má max-age 10 rokov a
   @import nemá vlastný ?v, takže zmeny v product-page.css inak nedôjdu
   návštevníkom. Pri každej zmene product-page.css bumpni toto číslo. */
@import url('css/product-page.css?v=20260806c');

/* === PRODUCT PAGE === */
.product-container {max-width:1240px; margin:0 auto; padding:0;}
.product-main {display:grid; grid-template-columns:45% 52%; gap:20px 35px; margin:20px 0;}

/* === PRODUCT GALLERY === */
/* Gallery spans rows 1-5 on desktop (left column) */
.product-gallery {grid-column:1; grid-row:1 / 6;}
/* Main image */
.product-main-image {background:#f5f5f5; border-radius:8px; overflow:hidden; margin-bottom:20px;}
.product-main-image .product-image {width:100%; height:auto; display:block;}
/* Thumbs */
.product-gallery-thumbs {display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:5px; margin-top:15px;}
.gallery-thumb {cursor:pointer; border-radius:6px; overflow:hidden; border:2px solid transparent; transition:all .2s ease;}
.gallery-thumb:hover {border-color:#0066cc;}
.gallery-thumb.active {border-color:#0066cc; box-shadow:0 0 0 2px rgba(0,102,204,.2);}
.gallery-thumb img {width:120px; height:120px; object-fit:cover; display:block;}

/* === PRODUCT INFO === */
/* Info elements in right column (grid-column:2) */
.product-title {grid-column:2; grid-row:1; font-size:32px; font-weight:700; color:#333; text-transform:uppercase; margin:0; line-height:1.2;}
.product-summary {grid-column:2; grid-row:2; font-size:22px; font-weight:500; color:#666; line-height:1.6; margin-bottom:5px; padding-bottom:5px; border-bottom:1px solid #eee;}

/* === VARIANTS === */
.product-variants-wrapper {grid-column:2; grid-row:3;}
.product-variants {margin:0; padding:5px 10px; background:#f9f9f9; border-radius:8px;}
.variants-form {margin-bottom:20px;}

/* Hide radio buttons visually but keep accessible */
.variant-radio {position:absolute; opacity:0; pointer-events:none;}

/* Variant labels (clickable) */
.variant-option {display:block; padding:6px 15px; margin-bottom:-2px; background:transparent; border:0; border-radius:6px; cursor:pointer; transition:all .2s; box-sizing:border-box;}
.variant-option:hover {background:#f5f9ff; box-shadow:inset 0 0 0 2px #0066cc;}

/* Checked state styling */
.variant-radio:checked + .variant-option {background:#f5f9ff; box-shadow:inset 0 0 0 2px #0066cc;}
.variant-radio:checked + .variant-option span {font-weight:600; color:#0066cc;}

.variant-details-container {margin-top:20px;}
.variant-details {padding:20px; background:#fff; border-radius:6px; border-left:4px solid #0066cc;}


/* Checked state - radio is now OUTSIDE label */
#radio-0:checked ~ .variants-selection label[for="radio-0"],
#radio-1:checked ~ .variants-selection label[for="radio-1"],
#radio-2:checked ~ .variants-selection label[for="radio-2"],
#radio-3:checked ~ .variants-selection label[for="radio-3"],
#radio-4:checked ~ .variants-selection label[for="radio-4"],
#radio-5:checked ~ .variants-selection label[for="radio-5"],
#radio-6:checked ~ .variants-selection label[for="radio-6"],
#radio-7:checked ~ .variants-selection label[for="radio-7"],
#radio-8:checked ~ .variants-selection label[for="radio-8"],
#radio-9:checked ~ .variants-selection label[for="radio-9"] {
  background:#f5f9ff;
  box-shadow:inset 0 0 0 2px #0066cc;
}

#radio-0:checked ~ .variants-selection label[for="radio-0"] span,
#radio-1:checked ~ .variants-selection label[for="radio-1"] span,
#radio-2:checked ~ .variants-selection label[for="radio-2"] span,
#radio-3:checked ~ .variants-selection label[for="radio-3"] span,
#radio-4:checked ~ .variants-selection label[for="radio-4"] span,
#radio-5:checked ~ .variants-selection label[for="radio-5"] span,
#radio-6:checked ~ .variants-selection label[for="radio-6"] span,
#radio-7:checked ~ .variants-selection label[for="radio-7"] span,
#radio-8:checked ~ .variants-selection label[for="radio-8"] span,
#radio-9:checked ~ .variants-selection label[for="radio-9"] span {
  font-weight:600;
  color:#0066cc;
}

/* === VARIANTS WITH SVG - PURE CSS SOLUTION === */
.product-variants.has-svg {display:flex; gap:25px; align-items:flex-start; padding:15px 20px;}
.product-variants.has-svg .variants-selection {flex:0 0 auto; width:260px; min-width:0;}
.product-variants.no-svg .variants-selection {width:100%;}


/* SVG container */
.variants-svg-container {flex:1; display:flex; align-items:flex-start; justify-content:flex-end; border-radius:8px; padding:0 10px 0 5px; min-height:200px; position:relative;}
.variants-svg-wrapper {width:100%; max-width:240px; min-height:220px; position:relative; flex-shrink:0; display:flex; align-items:flex-start; justify-content:flex-end;}
/* All SVG images - hidden by default, natural size from viewBox (OUT: transition:opacity 0.3s ease; max-height:440px)*/
.variant-svg {position:absolute; top:0; right:0; width:auto; height:auto; max-width:100%; opacity:0; transition:none; pointer-events:none; transform:scale(2.5); transform-origin:top right;}


/* Show SVG when corresponding radio is checked */
#radio-0:checked ~ .variants-svg-container .variant-svg[data-variant-index="0"] {opacity:1; pointer-events:auto;}
#radio-1:checked ~ .variants-svg-container .variant-svg[data-variant-index="1"] {opacity:1; pointer-events:auto;}
#radio-2:checked ~ .variants-svg-container .variant-svg[data-variant-index="2"] {opacity:1; pointer-events:auto;}
#radio-3:checked ~ .variants-svg-container .variant-svg[data-variant-index="3"] {opacity:1; pointer-events:auto;}
#radio-4:checked ~ .variants-svg-container .variant-svg[data-variant-index="4"] {opacity:1; pointer-events:auto;}
#radio-5:checked ~ .variants-svg-container .variant-svg[data-variant-index="5"] {opacity:1; pointer-events:auto;}
#radio-6:checked ~ .variants-svg-container .variant-svg[data-variant-index="6"] {opacity:1; pointer-events:auto;}
#radio-7:checked ~ .variants-svg-container .variant-svg[data-variant-index="7"] {opacity:1; pointer-events:auto;}
#radio-8:checked ~ .variants-svg-container .variant-svg[data-variant-index="8"] {opacity:1; pointer-events:auto;}
#radio-9:checked ~ .variants-svg-container .variant-svg[data-variant-index="9"] {opacity:1; pointer-events:auto;}
/* >10 variantov (napr. produkt 87 má 11) — bez týchto pravidiel sa 11.+ výkres nezobrazí */
#radio-10:checked ~ .variants-svg-container .variant-svg[data-variant-index="10"] {opacity:1; pointer-events:auto;}
#radio-11:checked ~ .variants-svg-container .variant-svg[data-variant-index="11"] {opacity:1; pointer-events:auto;}
#radio-12:checked ~ .variants-svg-container .variant-svg[data-variant-index="12"] {opacity:1; pointer-events:auto;}
#radio-13:checked ~ .variants-svg-container .variant-svg[data-variant-index="13"] {opacity:1; pointer-events:auto;}
#radio-14:checked ~ .variants-svg-container .variant-svg[data-variant-index="14"] {opacity:1; pointer-events:auto;}
#radio-15:checked ~ .variants-svg-container .variant-svg[data-variant-index="15"] {opacity:1; pointer-events:auto;}
#radio-16:checked ~ .variants-svg-container .variant-svg[data-variant-index="16"] {opacity:1; pointer-events:auto;}
#radio-17:checked ~ .variants-svg-container .variant-svg[data-variant-index="17"] {opacity:1; pointer-events:auto;}
#radio-18:checked ~ .variants-svg-container .variant-svg[data-variant-index="18"] {opacity:1; pointer-events:auto;}
#radio-19:checked ~ .variants-svg-container .variant-svg[data-variant-index="19"] {opacity:1; pointer-events:auto;}

.product-variants h2 {font-size:18px; font-weight:600; color:#333; margin:0 0 15px;}
.variants-form {margin-bottom:0;}


/* === VARIANT PARAMETERS === */
.product-parameters-wrapper {grid-column:2; grid-row:4;}
.variant-details-container {grid-column:2; grid-row:4;}
/* Specs list */
.variant-specs {margin-bottom:20px;}
.variant-specs h3 {margin:0 0 15px; font-size:1.1em; color:#333;}
.specs-list {list-style:none; padding:0; margin:0;}
.specs-list li {display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0f0f0;}
.specs-list li:last-child {border-bottom:none;}
.spec-label {color:#666; font-weight:500;}
.spec-value {color:#333; font-weight:600;}
/* Performance table */
.variant-performance {margin-top:20px;}
.performance-table {width:100%; border-collapse:collapse; margin-top:10px; border:1px solid #ddd;}
.performance-table thead {background:#f0f0f0;}
.performance-table th {padding:7px 5px; text-align:center; font-weight:600; color:#333; border:1px solid #ddd; font-size:14px;}
.performance-table th:first-child {text-align:left; background:transparent; border:none; border-right:1px solid #ddd;}
.performance-table td {padding:7px 5px; text-align:center; border:1px solid #ddd; color:#333; font-size:14px;}
.performance-table td.row-label {text-align:left; font-weight:400; color:#666; background:#fafafa; border-left:none; white-space:nowrap; padding-right:20px;}
.performance-table tbody tr {background:#fff;}
.performance-table tbody tr:hover {background:#f9f9f9;}

/* === COLOR PICKER === */
.product-colors-container {display:grid; grid-template-columns:500px 1fr; gap:40px; align-items:start; margin:40px auto; padding:0; max-width:1240px;}
/* Sample left (grid-column:1) even though it's second in HTML */
.color-sample-wrapper {grid-column:1; grid-row:1;}
/* Cards right (grid-column:2) even though they're first in HTML */
.variant-colors {grid-column:2; grid-row:1;}

/* === SAMPLE IMAGE === */
.color-sample {width:500px; height:500px; background-size:cover; background-position:center; position:relative; border-radius:8px; overflow:hidden; border:1px solid #e0e0e0;}
.radiator-overlay {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; pointer-events:none; z-index:3;}

/* === RAL COLOR SYSTEM - CSS MASK === */
/* RALS layer - Shadow and valves (NEVER colored, z-index:2) */
.radiator-rals {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; pointer-events:none; z-index:2;}

/* RALC layer - Uses CSS mask-image (z-index:3) */
/* PNG is used as MASK - RAL color shows ONLY where PNG is not transparent */
/* This is the BEST solution - no bleeding into background or RALS! */
.radiator-ralc-layer {position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:3; transition:background-color 0.3s ease; /* background-color:set by JavaScript (RAL HEX) */ /* mask-image:set in HTML (RALC PNG URL) */ /* mask-size:contain */ /* mask-position:center */ /* mask-repeat:no-repeat */}

/* === COLOR DETAILS === */
.color-details {display:flex; gap:15px; padding:15px 0 15px 3px; font-size:15px; align-items:center; border-bottom:1px solid #e0e0e0; margin-bottom:20px;}
.detail-title {font-weight:700; color:#333;}
.detail-code {color:#666; font-size:14px;}
.detail-price {font-weight:600; color:#006AA5;}
.detail-stock {font-weight:500; padding:4px 8px; border-radius:4px; font-size:13px;}
.detail-stock.in-stock {color:#28a745; background:#e8f5e9;}
.detail-stock.on-order {color:#999; background:#f5f5f5;}

/* === TILE CHOOSER === */
.tile-chooser {display:flex; gap:8px; margin-top:12px; margin-bottom:30px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:20px;}
.tile-thumb {flex-shrink:0; width:60px; height:60px; border-radius:6px; overflow:hidden; border:2px solid transparent; cursor:pointer; transition:all .2s;}
.tile-thumb:hover {border-color:#0066cc; transform:scale(1.05);}
.tile-thumb.active {border-color:#0066cc; box-shadow:0 0 0 2px rgba(0,102,204,.2);}
.tile-thumb img {width:100%; height:100%; object-fit:cover; display:block;}
.tile-upload {background:#f5f5f5; border:2px dashed #ddd!important;}
.tile-upload label {display:flex; align-items:center; justify-content:center; width:100%; height:100%; cursor:pointer; transition:all .2s;}
.tile-upload:hover {background:#e8f5fa; border-color:#0066cc!important;}
.tile-upload:hover label {transform:none;}
.tile-upload span {font-size:28px; color:#999; line-height:1;}

/* === COLOR CARDS === */
.variant-colors h3 {margin:0 0 15px; font-size:1.2em; color:#333;}
.colors-grid-compact {display:grid; grid-template-columns:repeat(5,1fr); gap:0;}
/* Wrapper - padding creates visual gap without dead zones */
.color-card-wrapper {padding:5px;}
/* Card */
.color-card-compact {display:flex; flex-direction:column; padding:0; background:#fff; border:2px solid #e0e0e0; border-radius:6px; cursor:pointer; transition:all .2s; overflow:hidden;}
.color-card-compact:hover {border-color:#0066cc; box-shadow:0 2px 8px rgba(0,102,204,.1); transform:translateY(-1px);}
.color-card-compact.active {border-color:#0066cc; box-shadow:0 0 0 3px rgba(0,102,204,.2);}
/* Image */
.card-compact-image {width:100%; aspect-ratio:1/1; background:#f5f5f5; overflow:hidden;}
.card-compact-image img {width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.6,.2,1);}
.color-placeholder-compact {width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f5f5f5; border:1px dashed #ddd; font-weight:700; color:#999; font-size:16px;}
.color-card-compact:hover .card-compact-image img {transform:scale(4);}

/* Info */
.card-compact-info {padding:8px; display:flex; justify-content:space-between; align-items:center; gap:6px;}
.compact-price {font-weight:600; color:#333; font-size:13px; white-space:nowrap;}
.compact-stock {font-size:16px; font-weight:700; line-height:1;}
.compact-stock.in-stock {color:#28a745;}
.compact-stock.on-order {color:#ddd;}

/* === DYNAMIC COLORIZING SYSTEM === */
/* Layer for dynamically colored radiators (solid, textured) */
.radiator-dynamic-layer {position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:3; transition:background-color 0.3s ease;}

/* === PRODUCT DETAILS === */
.product-details {margin:60px 0;}
.product-details h2 {font-size:24px; font-weight:700; color:#333; margin:0 0 20px; padding-bottom:15px; border-bottom:2px solid #006AA5;}
.product-details .description-content, .product-details .accessories-content, .product-details .distributors-content {color:#666; line-height:1.8; margin-bottom:40px;}

/* === ACCESSORIES CAROUSEL === */
.accessories-carousel-wrapper {margin:30px 0;}
.accessories-carousel {position:relative; overflow:hidden; padding:0 50px;}
.accessories-track {display:flex; gap:20px; transition:transform .5s ease;}
.accessory-card {flex:0 0 calc((100% - 60px)/4); text-decoration:none; background:#fff; border:2px solid #e0e0e0; border-radius:8px; overflow:hidden; transition:all .3s; display:block;}
.accessory-card:hover {border-color:#0066cc; box-shadow:0 4px 12px rgba(0,102,204,.15); transform:translateY(-2px);}
/* Image */
.accessory-image {width:100%; aspect-ratio:1/1; background:#f5f5f5; overflow:hidden;}
.accessory-image img {width:100%; height:100%; object-fit:cover;}
/* Title */
.accessory-title {padding:15px; text-align:center; font-size:14px; font-weight:600; color:#333; min-height:50px; display:flex; align-items:center; justify-content:center;}
/* Buttons */
.carousel-btn {position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5); color:#fff; border:none; width:40px; height:40px; border-radius:50%; font-size:24px; line-height:1; cursor:pointer; transition:all .3s; z-index:10; display:flex; align-items:center; justify-content:center;}
.carousel-btn:hover:not(:disabled) {background:rgba(0,0,0,.8); transform:translateY(-50%) scale(1.1);}
.carousel-btn:disabled {opacity:.3; cursor:not-allowed;}
.carousel-prev {left:0;}
.carousel-next {right:0;}
.accessories-carousel[data-auto-scroll="false"] {padding:0;}
.accessories-carousel[data-auto-scroll="false"] .carousel-btn {display:none;}

/* === PRODUCT DOWNLOADS === */
.product-downloads {max-width:1240px; margin:40px auto 0; padding:0;}
.product-downloads-title h2 {font-size:24px; font-weight:700; color:#333; margin:0 0 20px; padding-bottom:15px; border-bottom:2px solid #006AA5;}
.product-downloads-list {list-style:none; padding:0; margin:0;}
.product-downloads-item {display:grid; grid-template-columns:1fr 60px 90px auto; align-items:center; gap:15px; padding:12px 0; border-bottom:1px solid #f0f0f0;}
.product-downloads-item:last-child {border-bottom:none;}
.dl-label {font-weight:600; color:#333;}
.dl-ext {color:#999; font-size:13px; text-transform:uppercase; font-weight:600;}
.dl-size {color:#999; font-size:13px;}
.dl-btn {display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:#006AA5; color:#fff; border-radius:5px; text-decoration:none; font-size:13px; font-weight:600; white-space:nowrap; transition:background .2s;}
.dl-btn:hover {background:#004f7c;}
@media (max-width:768px) {
  .product-downloads-item {grid-template-columns:1fr auto; gap:8px;}
  .dl-ext, .dl-size {display:none;}
  .dl-btn {padding:7px 12px; font-size:12px;}
}

/* === LEGACY === */
.product-preview-image {display:none!important;}
.product-colors-layout {grid-template-columns:1fr!important;}

/* === RAL PICKER WIDGET === */
.ral-picker-overlay {position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:10000; display:none; align-items:center; justify-content:center;}
.ral-picker-overlay.active {display:flex;}
.ral-picker-widget {background:#fff; border-radius:14px; width:min(980px,94vw); max-height:92vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.25); padding:14px;}
/* Header */
.ral-picker-header {display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.ral-picker-header h3 {margin:0; font-size:20px; color:#1a1a2e;}
/* 2026-07-27: klient chce vetu zvýrazniť — červený alert, ikona na
   začiatku aj na konci vety. */
.ral-picker-notice {display:flex; align-items:flex-start; gap:10px; margin:0 0 14px; padding:11px 14px; font-size:14px; font-weight:600; line-height:1.5; color:#8a1f1f; background:#fdecea; border:1px solid #f3b9b7; border-left:4px solid #d63638; border-radius:10px;}
.ral-picker-notice::before,
.ral-picker-notice::after {content:"⚠️"; font-size:16px; line-height:1.4; flex-shrink:0;}
.ral-picker-notice::after {align-self:flex-end;}
.ral-picker-close {background:none; border:none; font-size:28px; line-height:1; color:#666; cursor:pointer; padding:0;}
.ral-picker-close:hover {color:#111;}
/* Toolbar row — input doubles as the confirm control (same as configurator) */
.ral-picker-toolbar {display:flex; gap:10px; margin:10px 0 14px; align-items:stretch;}
.ral-picker-input-wrap {display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; flex:1 1 auto; position:relative; padding:8px 12px; border-radius:12px; background:#f8fafc; border:1px solid #e2e8f0; cursor:text;}
.ral-input-prefix {font-size:11px; font-weight:700; color:#64748b; letter-spacing:.18em; text-transform:uppercase; padding:0 8px 0 0; border-right:1px solid #e2e8f0; user-select:none;}
.ral-picker-input {width:100%; min-height:44px; font-size:22px; font-weight:700; letter-spacing:.08em; text-align:center; border:1.5px solid #cbd5e1; border-radius:10px; padding:0 14px; background:#fff; color:#0f172a; font-family:var(--font-inter); transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .12s ease; outline:none; cursor:text; caret-color:var(--color-pmh-blue); box-sizing:border-box;}
.ral-picker-input::placeholder {color:#bbb; font-weight:400; letter-spacing:normal;}
.ral-picker-input:focus {border-color:var(--color-pmh-blue); box-shadow:0 0 0 3px rgba(0,106,165,.18);}
.ral-picker-input.is-filled {cursor:pointer; font-size:24px; border-width:2px; box-shadow:0 0 0 3px rgba(0,106,165,.22), 0 10px 24px -12px rgba(0,0,0,.30);}
.ral-picker-input.is-filled:hover {transform:translateY(-1px); box-shadow:0 0 0 3px rgba(0,106,165,.30), 0 14px 28px -12px rgba(0,0,0,.32);}
.ral-picker-hint {grid-column:1 / -1; font-size:12px; color:#64748b; text-align:center; margin:2px 0 0; font-weight:500; transition:color .2s ease;}
.ral-picker-hint.is-ready {color:var(--color-pmh-blue); font-weight:700;}
/* Group pill buttons */
.ral-picker-groups {display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.ral-group-btn {border:1px solid #d1d5db; background:#fff; border-radius:999px; padding:6px 12px; cursor:pointer; font-size:13px; transition:background .15s,border-color .15s,color .15s;}
.ral-group-btn:hover {background:#f0f7ff; border-color:#0f6aa5;}
.ral-group-btn.active {background:#0f6aa5; color:#fff; border-color:#0f6aa5;}
/* Color chip grid */
.ral-colors-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px;}
.ral-color-chip {min-height:58px; border:1px solid rgba(0,0,0,.1); border-radius:8px; font-size:11px; font-weight:700; cursor:pointer; transition:transform .12s,box-shadow .12s;}
.ral-color-chip:hover {transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,.2);}

/* === CUSTOM RAL CARD (15th card) === */
.custom-ral-card .custom-ral-placeholder {position:relative; background:#f5f5f5; border:2px dashed #ddd!important; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:20px;}
.custom-ral-card:hover {background:#e8f5fa; border-color:#0066cc!important;}
.ral-plus-icon {font-size:32px; color:#999; line-height:1; font-weight:300;}
.ral-label {font-size:13px; font-weight:700; color:#aaa; letter-spacing:1px; margin-top:2px;}
.ral-code-display {display:none; font-size:14px; font-weight:700; color:#fff; text-align:center; margin-top:8px; text-shadow:1px 1px 2px rgba(0,0,0,.3);}
.custom-ral-card.active {border:2px solid #0066cc!important;}
.ral-edit-btn {position:absolute; top:0; left:0; right:0; background:#555; color:#fff; font-size:12px; font-weight:400; text-align:center; padding:5px 0; cursor:pointer; transition:background .2s; display:none; text-transform:uppercase; letter-spacing:0.5px; z-index:10;}
.ral-edit-btn:hover {background:#0066cc;}

.fatblue {
    font-weight: 500;
    color: #0e6aa7;
    font-size: 0.80rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.fatblue:hover {
    text-decoration: underline;
    color: #0f68a3;
}

/* Schema into row */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.col-md-23 {
    display: inline-block;
    flex: 0 0 auto;
}

/* === RESPONSIVE TABLET === */
@media (min-width:769px) and (max-width:1024px) {
 .product-main {grid-template-columns:1fr; gap:30px;}
 /* Reset grid positioning for stacked layout */
 .product-gallery, .product-title, .product-summary, .product-variants-wrapper, .product-parameters-wrapper {grid-column:1; grid-row:auto;}
 /* Color picker */
 .product-colors-container {grid-template-columns:1fr; gap:20px;}
 .color-sample-wrapper, .variant-colors {grid-column:1;}
 .color-sample {width:100%; height:auto; aspect-ratio:1/1;}
 /* Carousel */
 .accessory-card {flex:0 0 calc((100% - 40px)/3);}
}

/* === RESPONSIVE MOBILE === */
@media (max-width:768px) {
 /* Container with padding */
 .product-container {max-width:100%; padding:0;}
 
 /* Flex layout with order - CLEAN SOLUTION */
 .product-main {display:flex; flex-direction:column; padding:0; margin:0;}
 
 /* Order:Title > Summary > Gallery > Variants > Params */
 .product-title {order:1; font-size:25px; margin-bottom:5px;}
 .product-summary {order:2; font-size:15px; margin-bottom:7px; padding-bottom:7px;}
 .product-gallery {order:3;}
 .product-variants-wrapper {order:4;}
 .product-parameters-wrapper {order:5;}
 
 /* Variant/param content */
 .product-variants {padding:15px; margin:0;}
 .variant-details-container {margin:0;}

 /* Product variants with svg visualization */
 .product-variants h2 {font-size:16px;}
 .product-variants.has-svg {padding:0;}
 .product-variants.has-svg .variants-selection {width:50%; padding:15px;}
 .variant-svg {transform:scale(1.85); transform-origin:top right;}

 /* Variant details */
 .variant-details {padding:15px;}
 .variant-option {padding:10px 12px;}
 
 /* Gallery thumbs */
 .gallery-thumb img {width:100px; height:100px;}
 .product-gallery-thumbs {grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:4px;}
 
 /* Performance table */
 .performance-table {font-size:13px;}
 .performance-table th, .performance-table td {padding:8px 6px;}
 .performance-table td.row-label {font-size:12px; padding-right:10px;}
 
 /* Color picker fullwidth */
 .product-colors-section {padding:0; margin:30px -15px; width:calc(100% + 30px);}
 .product-colors-container {display:flex!important; flex-direction:column; gap:20px; padding:0; margin:0; max-width:100%;}
 
 /* Natural order:cards first, sample second ? */
 .variant-colors {padding:0 15px;}
 .color-sample-wrapper {padding:0; width:100vw}
 
 /* Sample fullwidth square */
 .color-sample {width:100%; height:auto; aspect-ratio:1/1;}
 
 /* Tiles and details with padding */
 .tile-chooser {padding:20px 15px 0; gap:6px;}
 .tile-thumb {width:50px; height:50px;}
 .color-details {padding:0 15px; flex-wrap:wrap; gap:8px; font-size:13px;}
 
 /* 3 color cards in row */
 .colors-grid-compact {grid-template-columns:repeat(4,1fr)!important; gap:8px;}
 .card-compact-info {padding:6px;}
 .compact-price {font-size:12px;}
 .compact-stock {font-size:14px;}
 
 /* Product details */
 .product-details {margin:30px 0; padding:0 5px;}
 .product-details h2 {font-size:20px;}
 
 /* Carousel - 2 items visible on mobile */
 .accessories-carousel {padding:0 40px;}
 .accessory-card {flex:0 0 calc((100% - 10px)/2);}
 .accessories-track {gap:10px;}
 .carousel-btn {width:32px; height:32px; font-size:20px;}
 .accessory-title {font-size:13px; padding:12px; min-height:45px;}
 
}

/* === RESPONSIVE SMALL MOBILE === */
@media (max-width:480px) {
 .colors-grid-compact {grid-template-columns:repeat(3,1fr)!important;}
 .accessory-card {flex:0 0 calc((100% - 10px)/2);}
 .accessories-track {gap:10px;}
 .variants-svg-container {padding:20px 10px; min-height:200px;}
}

/* === RAL Picker — mobile, identical to configurator (breakpoint 900px) === */
@media (max-width:900px) {
 /* Full-screen fixed modal that scrolls internally, so the whole grid is
    reachable while the body scroll is locked (same as .cfg-ral-modal). */
 .ral-picker-widget {position:fixed; inset:0; width:100vw; max-height:100vh; min-height:0; border-radius:0; overflow:auto; padding:12px; box-shadow:none;}
 .ral-picker-toolbar {display:grid; grid-template-columns:1fr auto; gap:8px; margin:8px 0 12px; align-items:end;}
 .ral-picker-input-wrap {width:100%;}
 .ral-picker-header h3 {font-size:18px;}
 .ral-picker-input {min-height:48px; font-size:20px;}
 .ral-picker-input.is-filled {font-size:22px;}
 .ral-colors-grid {grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px;}
 .ral-color-chip {min-height:52px; font-size:10px; border-radius:6px;}
}