/* Grout Demo — faithful rebuild of the original dark color-matcher widget.
   Stage = tile floor (bottom-pic) with the grout overlay (top-pic) stacked on top.
   Only the .active theme / tile / grout layers are visible at any time.
   Only the .active product's grout-colour swatches show (TG Clean OR Epoxy, not both). */

#grout-presentation{gap:0;align-items:flex-start;margin:10px 0 30px;}
#main-theme{flex:1 1 560px;min-width:320px;}
#colors-wrapper{flex:1 1 320px;padding-inline-start:30px;}

/* room tabs */
#main-pic-tabs-cont{display:flex;flex-wrap:wrap;gap:0;margin-bottom:14px;}
.theme-tab{background:#f1f1f1;border:0;border-inline-start:1px solid #fff;cursor:pointer;padding:0;flex:1 1 auto;}
.theme-tab h3{margin:0;padding:12px 10px;font-size:.95rem;color:#000;font-weight:700;white-space:nowrap;}
.theme-tab.active{background:var(--sika-yellow);}
.theme-tab:hover{box-shadow:inset 0 -4px 0 var(--sika-yellow);}

/* the stage: tile floor + grout overlay, stacked */
.main-pic-cont{display:none;position:relative;width:100%;max-width:800px;aspect-ratio:2/1;margin:0 auto;background:#111;overflow:hidden;}
.main-pic-cont.active{display:block;}
.bottom-pics-cont,.gaps-pics-cont{position:absolute;inset:0;}
.gaps-pics-cont{display:none;}
.gaps-pics-cont.active{display:block;}
.theme-pic{position:absolute;inset:0;display:none;}
.theme-pic.active{display:block;}
.theme-pic img{width:100%;height:100%;object-fit:cover;display:block;}

/* tile DESIGN swatches (floor textures) — square thumbnails */
#tile-samples-cont{gap:8px;margin-top:14px;}
#tile-samples-title h4{font-size:1rem;font-weight:700;margin:0;}
.colors-cont{display:none;flex-wrap:wrap;gap:8px;}
.colors-cont.active{display:flex;}
.colors-cont .theme-tile{width:52px;height:52px;border:2px solid #ddd;background-size:cover;background-position:center;cursor:pointer;padding:0;}
.colors-cont .theme-tile.active{border-color:var(--sika-yellow);box-shadow:0 0 0 2px var(--sika-yellow);}

.disclaimer-cont{color:#888;text-align:center;font-size:.8rem;margin:8px 0 0;}

/* ---- grout-colour panel (right column): show ONLY the active product ---- */
.gaps-pics-thumbs{display:none;}
.gaps-pics-thumbs.active{display:block;}
.gaps-pics-thumbs h3{font-size:1.4rem;font-weight:700;margin:0 0 12px;color:var(--sika-black);}
.gaps-pics-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:0;}
/* grout-colour swatches = wide rectangles with a white centred number label */
.gaps-pics-thumbs .theme-tile{position:relative;width:118px;height:56px;border:0;margin:3px;cursor:pointer;padding:0;}
.gaps-pics-thumbs .theme-tile.active{outline:3px solid var(--sika-yellow);outline-offset:-3px;z-index:1;}
.gap-tile-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  background:#fff;color:rgba(0,0,0,.8);font-size:14px;line-height:1;padding:3px 9px;}

/* ---- dark product-info section + product tabs ---- */
#grout-tabs-cont{margin-top:26px;}
#grout-tabs{display:flex;}
.grout-tab{background:transparent;border:0;cursor:pointer;padding:12px 5px;flex:1;text-align:center;}
.grout-tab h3{color:rgba(0,0,0,.8);font-size:18px;margin:0;}
.grout-tab.active{background:#333;}
.grout-tab.active h3{color:var(--sika-yellow);}
#grout-tabs-content{background:#333;color:#ddd;padding:26px;}
.grout-info{display:none;}
.grout-info.active{display:flex;flex-wrap:wrap;align-items:flex-start;}
.grout-content-wrap{color:#ddd;padding:0 20px 0 0;}
.grout-content-wrap p,.grout-content-wrap{color:#ddd;}
.grout-image-wrap img{max-width:170px;height:auto;}
.grout-features{margin-top:6px;}
.grout-features h4{color:#cecece;font-size:1.35rem;margin:0 0 6px;}
.grout-features p,.grout-features li{color:#ddd;}
.grout-info a{color:#FFC25E;display:inline-block;margin-top:16px;font-weight:600;}

/* calculator (inside the dark content area) */
#quantity-calc{color:#ddd;margin-top:10px;}
#quantity-calc-title h4{color:var(--sika-yellow);}
#quantity-calc h5{color:#ddd;margin:0;}
.tile-mark{font-size:28px;margin:0;}
.calc-line{display:flex;align-items:center;gap:10px;margin:8px 0;}
#quantity-calc input{background:#fff;color:#666;border:0;width:48px;text-align:center;padding:7px;}
.calc-res{display:flex;align-items:center;gap:12px;margin:10px 0;}
.calc-res button{background:#e6e6e6;color:rgba(0,0,0,.8);border:0;padding:10px 14px;cursor:pointer;font-weight:600;}
.res-cont,.res-cont h4,.res-cont h5,.res-cont strong{color:#fff;}
.grt-img-cont img{max-width:120px;height:auto;}