/* ccp2 4.0.3 – UK Timber site colours; no border-radius */
.ccp2{--lime:#B1BE2E;--slate:#2D3E4A;--off:#FBFBFB;--cta:#F7D417;--line:#d5d9dc;--err:#c0392b;--muted:#6b7a85;display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;color:var(--slate);font-family:inherit;background:var(--off);padding:12px;margin:0 -12px}
.ccp2 *{box-sizing:border-box}
.ccp2-h1{margin:0 0 4px;font-size:26px;color:var(--slate);font-weight:700}.ccp2-sub,.ccp2-desc{color:var(--muted);margin:0 0 12px;font-size:14px}
.ccp2-card{background:#fff;border:1px solid var(--line);border-radius:0;padding:14px;box-shadow:none}
.ccp2-mats{border:0;padding:0;margin:0 0 10px}.ccp2-mats legend{font-weight:700;margin-bottom:6px;font-size:14px;border:0;width:auto;color:var(--slate)}
.ccp2-mats-list{display:flex;gap:6px;flex-wrap:wrap}
.ccp2-mats label{border:1px solid var(--line);border-radius:0;padding:7px 12px;cursor:pointer;display:flex;gap:6px;align-items:center;font-weight:600;margin:0;background:#fff;font-size:13px}
.ccp2-mats input{accent-color:var(--lime)}.ccp2-mats label.is-checked{border-color:var(--lime);background:#f4f7e0;box-shadow:inset 0 -2px 0 var(--lime)}
.ccp2-mats input:focus-visible+span{outline:2px solid var(--slate);outline-offset:2px}
.ccp2-row{border:1px solid var(--line);border-radius:0;padding:12px;margin-bottom:10px;display:grid;grid-template-columns:1fr 180px;gap:12px;background:#fff}
.ccp2-row.invalid{border-color:var(--err)}
.ccp2-rh{display:flex;justify-content:space-between;align-items:center;grid-column:1/-1;margin-bottom:8px;gap:6px;flex-wrap:wrap}.ccp2-rh b{font-size:14px}
.ccp2-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ccp2-f label{display:block;font-size:11px;font-weight:700;margin-bottom:3px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.ccp2-f input,.ccp2-f select{width:100%;padding:8px;border:1px solid #c9d0d5;border-radius:0;font-size:14px;background:#fff;color:var(--slate)}
.ccp2-f input:focus,.ccp2-f select:focus{outline:2px solid var(--lime);border-color:var(--lime)}
.ccp2-f [aria-invalid=true]{border-color:var(--err);background:#fdf3f2}
.ccp2-hint{font-size:11px;color:var(--muted);margin-top:2px}
.ccp2-msg{grid-column:1/-1;color:var(--err);font-size:13px;margin-top:4px}
.ccp2-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin-top:8px;color:var(--muted)}.ccp2-stats b{color:var(--slate)}
.ccp2-price{font-size:18px;font-weight:800;margin-top:6px}.ccp2-price small{font-size:11px;font-weight:500;color:var(--muted)}
.ccp2-diag{background:#f0f2f3;border-radius:0;display:flex;align-items:center;justify-content:center;min-height:0;padding:6px}
.ccp2-btn{border:1px solid var(--line);background:#fff;border-radius:0;padding:5px 10px;cursor:pointer;font-size:12px;color:var(--slate)}
.ccp2-btn:hover,.ccp2-btn:focus-visible{border-color:var(--slate);background:var(--off)}
.ccp2-add{border:1px dashed var(--lime);background:#fafbef;width:100%;padding:10px;border-radius:0;font-weight:700;cursor:pointer;color:var(--slate);margin-bottom:10px;display:block}
.ccp2-add:hover:not(:disabled){background:#f4f7e0;border-style:solid}.ccp2-add:disabled{opacity:.5;cursor:not-allowed}
.ccp2-tot{position:sticky;top:12px}.ccp2-tot h2{margin:0 0 8px;font-size:16px;color:var(--slate)}
.ccp2-tot>div{display:flex;justify-content:space-between;padding:4px 0;font-size:13px}.ccp2-grand{font-size:20px;font-weight:800;border-top:2px solid var(--slate);margin-top:4px;padding-top:8px!important}
.ccp2-cta{width:100%;background:var(--lime);border:0;border-radius:0;padding:12px;font-weight:800;font-size:15px;margin-top:10px;cursor:pointer;color:var(--slate)}
.ccp2-cta:hover:not(:disabled){filter:brightness(.95)}.ccp2-cta:disabled{opacity:.5;cursor:not-allowed}
.ccp2-note,.ccp2-status{font-size:11px;color:var(--muted);margin-top:8px;display:flex;gap:5px;align-items:center}.ccp2-dot{width:7px;height:7px;border-radius:0;background:var(--lime);display:inline-block}
.ccp2-alert{border-left:3px solid var(--err);background:#fdf3f2;padding:10px 12px;border-radius:0;font-size:13px;margin-top:10px}
.ccp2-stale{color:#8a6d00;font-size:12px}
.ccp2-skel{display:inline-block;width:70px;height:12px;border-radius:0;background:linear-gradient(90deg,#eee,#f7f7f7,#eee);background-size:200%;animation:ccp2s 1.2s infinite;vertical-align:middle}@keyframes ccp2s{to{background-position:-200% 0}}
@media(max-width:900px){.ccp2{grid-template-columns:1fr;margin:0}.ccp2-row{grid-template-columns:1fr}.ccp2-fields{grid-template-columns:1fr 1fr}.ccp2-tot{position:static}}
.ccp2-rich{font-size:13px;line-height:1.5;color:var(--slate);margin:8px 0 10px}
.ccp2-rich ul{padding-left:18px;margin:4px 0}
.ccp2-dyn{background:#f4f7e0;border-left:3px solid var(--lime);padding:8px 12px;border-radius:0}
.ccp2-grade-line{font-size:12px;color:var(--slate);margin:3px 0}
.ccp2-fallback{color:#9a5b00;font-weight:600}
.ccp2-grades{margin-top:8px}
.ccp2-h1s{font-weight:400;color:var(--muted);font-size:.65em}
.ccp2-editor{border:1px solid var(--line);border-radius:0;padding:12px;margin-top:4px;background:var(--off)}
.ccp2-eh{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}.ccp2-eh b{font-size:14px}
.ccp2-editing{font-size:11px;background:#fff6c2;border-radius:0;padding:2px 6px}
.ccp2-opt{margin-top:10px}.ccp2-opt label{padding:5px 10px;font-weight:600;font-size:13px}
/* 4.0.9: material text is plain body text; finish and grade notes are green boxes (.ccp2-dyn) under their rows */
.ccp2 .ccp2-subcontent{margin:4px 0 12px}
.ccp2 .ccp2-finnotes,.ccp2 .ccp2-gradenotes{margin:6px 0 12px}
.ccp2 .ccp2-dyn>:first-child{margin-top:0}
.ccp2 .ccp2-dyn>:last-child{margin-bottom:0}
.ccp2-ebody{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;margin-top:10px;align-items:center}
.ccp2-svg{width:100%;height:auto;max-height:180px;display:block}
.ccp2-svg text{font-size:11px;fill:var(--slate);font-family:inherit}.ccp2-svg .tN{font-size:9px;fill:var(--muted);font-style:italic}
.ccp2-adj{font-size:11px;color:#8a6d00;min-height:0}
.ccp2-ebtns{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.ccp2-save{background:var(--slate);color:#fff;border:0;border-radius:0;padding:10px 14px;font-weight:700;cursor:pointer}.ccp2-save:hover:not(:disabled){background:#24333c}.ccp2-save:disabled{opacity:.45;cursor:not-allowed}
.ccp2-pieces{list-style:none;margin:0 0 8px;padding:0;max-height:48vh;overflow:auto}
.ccp2-piece{border:1px solid var(--line);border-radius:0;padding:8px;margin-bottom:6px;font-size:12px;background:#fff}
.ccp2-piece.is-editing{border-color:var(--lime);background:#f4f7e0}.ccp2-piece.invalid{border-color:var(--err)}
.ccp2-piece .pc-h{display:flex;justify-content:space-between;gap:6px}.ccp2-piece .pc-h b{font-size:12px}.ccp2-piece .pc-p{font-weight:800;white-space:nowrap}
.ccp2-piece .pc-s{color:var(--muted);margin:2px 0}.ccp2-piece .pc-m{color:var(--err)}.ccp2-piece .pc-b{margin-top:4px}
.ccp2-empty{font-size:12px;color:var(--muted)}
.ccp2-vatnote{font-size:11px;color:var(--muted);margin:4px 0 0}
.ccp2-rows .ccp2-row{display:block}
.ccp2-dims{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:12px;margin-top:2px}
.ccp2-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px;align-self:start}.ccp2-side .ccp2-tot{position:static}
@media(max-width:900px){.ccp2-side{position:static}.ccp2-ebody{grid-template-columns:1fr}.ccp2-pieces{max-height:none}}
.ccp2-sizeline{font-size:12px;font-weight:600;color:var(--slate);margin:3px 0;padding:3px 8px;background:#f4f1ea;border-left:3px solid #b98d55}.ccp2-sizeline:empty{display:none}.ccp2-sizehelp{font-size:11px;color:#5b6b75;margin-top:3px}
.ccp2-index-wrap{--line:#d5d9dc;--slate:#2D3E4A;color:var(--slate)}
.ccp2-index{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ccp2-index a{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;background:#fff;border:1px solid var(--line);padding:10px;border-radius:0}.ccp2-index a:hover{border-color:var(--lime)}.ccp2-index a:hover b{text-decoration:underline}
.ccp2-index b{font-size:16px}.ccp2-index small{display:block;color:#5b6770;font-size:13px;margin-top:2px}
.ccp2-index img{width:80px;height:80px;object-fit:cover;border-radius:0;flex:none}
.ccp2-grade-warn{margin:6px 0;padding:6px 10px;border-left:3px solid #d48a00;background:#fff6e5;color:#5a3d00;font-size:13px;font-weight:600;border-radius:0}
/* Classic / New switch */
.ccp-mode{display:flex;align-items:stretch;margin:0 0 12px;border:1px solid var(--line);background:#fff;max-width:360px;border-radius:0}
.ccp-mode a,.ccp-mode span{flex:1;text-align:center;padding:8px 12px;font-size:13px;font-weight:700;text-decoration:none;color:var(--slate);border:0;background:transparent}
.ccp-mode a:hover{background:var(--off);color:var(--slate)}
.ccp-mode .is-active{background:var(--slate);color:#fff;cursor:default}
.ccp-mode a+a,.ccp-mode a+span,.ccp-mode span+a{border-left:1px solid var(--line)}
/* 4.0.5: ≥ / ≤ in a font that has them (the theme's Gibson draws them as dotted arrows); grade auto-switch */
.ccp2 .ccp2-sym{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;font-weight:inherit}
.ccp2-grade .ccp2-mats-list label.is-wanted{border-style:dashed;border-color:var(--muted)}
/* 4.0.6: price waiting for the customer to stop typing */
.ccp2-price.is-pending .ex{opacity:.45}
/* 4.3.0: material cards row (replaces the "Other available materials" box): full width above the calculator, not sticky,
   scrolls sideways when the cards do not fit (desktop too); the current material highlighted */
.ccp2-cards-wrap{--lime:#B1BE2E;--slate:#2D3E4A;--line:#d5d9dc;--muted:#6b7a85;color:var(--slate);margin:0 0 16px}
.ccp2-cards-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px}
.ccp2-cards-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0}
.ccp2-cards-more{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.ccp2-cards{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;list-style:none;margin:0;padding:0 0 10px;scrollbar-width:thin;scrollbar-color:var(--lime) #E7EAEC}
.ccp2-cards::-webkit-scrollbar{height:8px}.ccp2-cards::-webkit-scrollbar-track{background:#E7EAEC}.ccp2-cards::-webkit-scrollbar-thumb{background:var(--lime)}
/* 4.3.1 cards: every card one fixed height (--ch) whatever its texts or state; image box a fixed square (width = height,
   aspect-ratio 1/1 where supported) with object-fit: cover; the current card keeps the same 1px border – its lime frame is an
   overlay (::after) and "You are here" is positioned over the image, so neither changes any size; hover / focus / active only
   add box-shadow or outline. Titles clamp to 2 lines, descriptions to 3 (2 on small screens). */
.ccp2-cards-wrap{--ch:144px}
.ccp2-mcard{flex:0 0 372px;height:var(--ch);scroll-snap-align:start;margin:0;box-sizing:border-box}
.ccp2-mcard a{position:relative;box-sizing:border-box;display:flex;align-items:stretch;height:var(--ch);min-height:0;margin:0;padding:0;background:#fff;border:1px solid var(--line);color:var(--slate);text-decoration:none;overflow:hidden;transition:box-shadow .15s}
.ccp2-mcard a:hover{box-shadow:0 3px 10px rgba(45,62,74,.12);color:var(--slate)}.ccp2-mcard a:hover b{text-decoration:underline}
.ccp2-mcard a:active{transform:none}
.ccp2-mcard a:focus-visible{outline:2px solid var(--slate);outline-offset:2px}
.ccp2-mcard-img{flex:0 0 auto;box-sizing:border-box;width:calc(var(--ch) - 2px);height:calc(var(--ch) - 2px);aspect-ratio:1/1;position:relative;overflow:hidden;background:#EEF0F1;display:flex;align-items:center;justify-content:center}
.ccp2-mcard-img img{position:absolute;top:0;left:0;right:0;bottom:0;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:cover;object-position:center}
.ccp2-mcard-ph{fill:none;stroke:#9aa5ad;stroke-width:1.5}
.ccp2-mcard-t{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:12px 16px;display:block;overflow:hidden}
.ccp2-mcard-t b{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:2.5em;font-size:16px;line-height:1.25;margin-bottom:4px;font-weight:800}
.ccp2-mcard-t small{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-height:4.35em;font-size:13px;line-height:1.45;color:var(--muted)}
.ccp2-mcard.is-current a{background:#f4f7e0;border-color:var(--lime)}
.ccp2-mcard.is-current a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--lime);box-shadow:inset 0 -3px 0 var(--lime);pointer-events:none;z-index:1}
.ccp2-here{position:absolute;top:8px;left:8px;z-index:2;display:inline-block;box-shadow:0 1px 2px rgba(45,62,74,.25);background:var(--lime);color:var(--slate);font-size:9.5px;line-height:1.5;font-weight:800;padding:0 5px;margin:0;text-transform:uppercase;letter-spacing:.05em}
.ccp2-chg{font-size:13px;font-weight:700;margin-left:8px;white-space:nowrap;color:var(--slate);text-decoration:underline}
.ccp2-chg:hover{color:var(--slate);text-decoration:none}
/* 4.4.0: combination lines carry the size on the attribute. An empty customization value must not leave a second size. */
.product-customization-line:has(.ccp2-combination-spec),
.customization-modal .product-customization-line:has(.ccp2-combination-spec){display:none}
/* 4.3.0: the type description, plain text, directly under the Beams/Boards buttons */
.ccp2 .ccp2-typedesc{margin:2px 0 12px}.ccp2 .ccp2-typedesc:empty,.ccp2 .ccp2-subcontent:empty{display:none}
@media(max-width:900px){.ccp2-cards{gap:10px;scroll-snap-type:x mandatory}.ccp2-cards-wrap{--ch:120px}.ccp2-mcard{flex-basis:82%}.ccp2-mcard-t{padding:10px 12px}.ccp2-mcard-t b{font-size:15px}.ccp2-mcard-t small{font-size:12.5px;line-height:1.4;-webkit-line-clamp:2;max-height:2.8em}.ccp2-cards-head{flex-direction:column;gap:0}}
/* 4.5.0 images: only an option that has a picture becomes a tile. Options without one stay the pills above.
   A row with no pictures does not get .ccp2-with-tiles, so those pills are unchanged. */
.ccp2 .ccp2-mats-list.ccp2-with-tiles{align-items:center}
.ccp2 .ccp2-mats-list label.ccp2-tile{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;width:96px;padding:6px 8px;gap:4px}
.ccp2 .ccp2-mats-list label.ccp2-tile picture{display:block;line-height:0;width:64px;height:64px}
.ccp2 .ccp2-mats-list label.ccp2-tile img{display:block;width:64px;height:64px;max-width:none;object-fit:cover}
@media(max-width:575px){
  .ccp2 .ccp2-types .ccp2-mats-list label.ccp2-tile{width:calc(50% - 3px)}
  .ccp2 .ccp2-types .ccp2-mats-list label.ccp2-tile picture,
  .ccp2 .ccp2-types .ccp2-mats-list label.ccp2-tile img{width:100%;height:auto;aspect-ratio:1/1}
}