/* One clear setup area, followed by browsing controls. */
body.catalogue-page #cabinetConfigurator{margin:0 0 36px;padding:24px;background:#faf9f5;border:1px solid #dcd9cf;border-radius:10px}
body.catalogue-page #cabinetConfigurator h2,body.catalogue-page .unit-browse-heading h2{font-size:28px!important;margin:0 0 8px!important;line-height:1.2}
body.catalogue-page #cabinetConfigurator p{font-size:14px;margin:0 0 16px;color:#71756e}
body.catalogue-page #cabinetConfigurator h3{font-size:19px;margin:0 0 8px;display:flex;gap:10px;align-items:center}
body.catalogue-page #cabinetConfigurator h3>span{border-radius:50%;background:#e8eade;color:#34483c;width:27px;height:27px;text-align:center;line-height:27px;font-size:14px}
body.catalogue-page #cabinetConfigurator .setup-section{padding-top:20px;margin-top:18px;border-top:1px solid #dedbd3}
body.catalogue-page #configCarcaseGrid{margin:0!important;padding:0!important;gap:8px!important}
body.catalogue-page #unitDoorConfiguration{background:transparent!important;border:0!important;border-top:1px solid #dedbd3!important;padding:20px 0 0!important;display:block!important}
body.catalogue-page .setup-door-layout{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,3fr);gap:24px}
body.catalogue-page .setup-range label,body.catalogue-page #inlineDoorColourLabel{display:block;font-size:14px!important;text-transform:none!important;letter-spacing:0!important;margin-bottom:8px}
body.catalogue-page #unitConfigRange{width:100%;min-height:46px;padding:10px;border:1px solid #d7d3c8;border-radius:6px;background:#fff;font-size:16px}
body.catalogue-page #unitConfigColour[hidden]{display:none!important}
body.catalogue-page #inlineDoorSwatches{display:flex;flex-wrap:wrap;gap:8px}
body.catalogue-page .setup-door-swatch{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid #d7d3c8;border-radius:6px;background:#fff;color:#303a30;font:inherit;font-size:14px;cursor:pointer}
body.catalogue-page .setup-door-swatch>span{width:24px;height:24px;border:1px solid #0002;border-radius:50%;flex-shrink:0}
body.catalogue-page .setup-door-swatch b{min-width:10px;font-size:12px}
body.catalogue-page .setup-door-swatch[aria-pressed=true]{border-color:#52664e;box-shadow:0 0 0 1px #52664e;background:#f0f2eb}
body.catalogue-page .setup-door-swatch:focus-visible{outline:3px solid #52664e;outline-offset:2px}
body.catalogue-page .setup-summary{margin-top:22px;padding-top:16px;border-top:1px solid #dedbd3;font-size:14px;color:#34483c}
body.catalogue-page .unit-browse-heading{margin:0 0 18px}
body.catalogue-page .unit-browse-heading p{margin:5px 0;font-size:14px}
body.catalogue-page .aligned-shop-page-filters{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin-bottom:24px!important}
body.catalogue-page .aligned-shop-page-filters::before{display:none!important}
body.catalogue-page .aligned-shop-page-filters .filter-group{width:auto!important;min-width:0!important}
body.catalogue-page .aligned-shop-page-filters input{width:100%;min-height:44px;border:1px solid #d7d3c8;border-radius:6px;padding:10px;font:inherit;font-size:14px;background:#fff;box-sizing:border-box}
@media(max-width:800px){body.catalogue-page .setup-door-layout{grid-template-columns:1fr;gap:16px}body.catalogue-page .aligned-shop-page-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.catalogue-page #cabinetConfigurator{padding:16px}}

/* Shared swatch cards: identical sizing, shape and selection state. */
body.catalogue-page #cabinetConfigurator .setup-door-layout{grid-template-columns:1fr;gap:20px}
body.catalogue-page #cabinetConfigurator .setup-range{width:100%;max-width:360px}
body.catalogue-page #cabinetConfigurator #unitConfigRange{height:48px!important;min-height:48px!important;padding:10px 14px!important;border-radius:4px!important;box-sizing:border-box;font-size:16px!important}
body.catalogue-page #cabinetConfigurator #configCarcaseGrid,
body.catalogue-page #cabinetConfigurator #inlineDoorSwatches{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;grid-auto-rows:110px;gap:10px!important}
body.catalogue-page #cabinetConfigurator .finish-choice{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:9px!important;width:100%;height:110px!important;min-height:110px!important;margin:0!important;padding:12px 8px!important;background:#fff!important;border:1px solid #d7d3c8!important;border-radius:4px!important;box-shadow:none!important;transform:none!important;box-sizing:border-box;color:#303a30;font:inherit;cursor:pointer;overflow:hidden!important}
body.catalogue-page #cabinetConfigurator .finish-choice .finish-sample,
body.catalogue-page #cabinetConfigurator .finish-choice .finish-sample img{display:block!important;width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;min-height:40px!important;max-height:40px!important;flex:0 0 40px!important;border-radius:3px!important;margin:0!important;padding:0!important;object-fit:cover!important}
body.catalogue-page #cabinetConfigurator .finish-choice .finish-sample{border:1px solid #0002!important;box-sizing:border-box;overflow:hidden}
body.catalogue-page #cabinetConfigurator .finish-choice .finish-name{display:flex!important;align-items:center;justify-content:center;width:100%;height:32px;flex:0 0 32px;min-width:0!important;margin:0!important;border:0!important;border-radius:0!important;font-size:13px!important;line-height:16px!important;letter-spacing:0!important;font-weight:500!important;text-align:center;white-space:normal}
body.catalogue-page #cabinetConfigurator .finish-choice .finish-tick{display:block;position:absolute;top:6px;right:7px;width:auto;height:auto;border:0;border-radius:0;font-size:12px;color:#40563c;visibility:hidden}
body.catalogue-page #cabinetConfigurator .finish-choice[aria-pressed="true"]{border-color:#52664e!important;background:#f0f2eb!important;box-shadow:inset 0 0 0 1px #52664e!important}
body.catalogue-page #cabinetConfigurator .finish-choice[aria-pressed="true"] .finish-tick{visibility:visible}
body.catalogue-page #cabinetConfigurator .finish-choice:focus-visible{outline:3px solid #52664e;outline-offset:3px}
body.catalogue-page #cabinetConfigurator .finish-choice:hover{border-color:#89977f!important}
@media(max-width:1050px){body.catalogue-page #cabinetConfigurator #configCarcaseGrid,body.catalogue-page #cabinetConfigurator #inlineDoorSwatches{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:480px){body.catalogue-page #cabinetConfigurator #configCarcaseGrid,body.catalogue-page #cabinetConfigurator #inlineDoorSwatches{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Keep the range selector in the section header, with swatches immediately below. */
body.catalogue-page #cabinetConfigurator #unitDoorConfiguration{display:grid!important;grid-template-columns:minmax(0,1fr) 320px;column-gap:24px;row-gap:16px;align-items:center}
body.catalogue-page #cabinetConfigurator #unitDoorConfiguration>h3{grid-column:1;grid-row:1;margin:0}
body.catalogue-page #cabinetConfigurator .setup-door-layout{display:contents}
body.catalogue-page #cabinetConfigurator .setup-range{grid-column:2;grid-row:1;max-width:none;display:flex;align-items:center;gap:12px}
body.catalogue-page #cabinetConfigurator .setup-range label{margin:0;white-space:nowrap;font-size:13px!important}
body.catalogue-page #cabinetConfigurator #unitConfigRange{min-width:0;flex:1;height:44px!important;min-height:44px!important}
body.catalogue-page #cabinetConfigurator .setup-colours{grid-column:1/-1;grid-row:2}
body.catalogue-page #cabinetConfigurator #inlineDoorColourLabel{margin-bottom:10px;color:#71756e;font-size:14px!important}
@media(max-width:600px){body.catalogue-page #cabinetConfigurator #unitDoorConfiguration{grid-template-columns:1fr;gap:14px}body.catalogue-page #cabinetConfigurator .setup-range{grid-column:1;grid-row:2}body.catalogue-page #cabinetConfigurator .setup-colours{grid-row:3}}

/* Live preview of a 600 base unit next to the finish pickers, so colour changes are visible without scrolling. */
body.catalogue-page #cabinetConfigurator{display:grid!important;grid-template-columns:minmax(0,1fr) 240px;column-gap:28px}
body.catalogue-page #cabinetConfigurator>*{grid-column:1}
body.catalogue-page #cabinetConfigurator .setup-live-preview{grid-column:2;grid-row:1/-1;align-self:start;position:sticky;top:24px;background:#fff;border:1px solid #dcd9cf;border-radius:8px;padding:16px;text-align:center}
body.catalogue-page .setup-live-preview-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7d8978;margin-bottom:10px}
body.catalogue-page .setup-live-preview img{display:block;width:100%;max-width:190px;height:auto;margin:0 auto}
body.catalogue-page .setup-live-preview-meta{margin-top:10px;font-size:12px;line-height:1.5;color:#71756e}
@media(max-width:900px){
  body.catalogue-page #cabinetConfigurator{grid-template-columns:1fr!important}
  body.catalogue-page #cabinetConfigurator .setup-live-preview{grid-column:1;grid-row:auto;position:static;margin-bottom:20px}
}


/* v4 — compact finish configurator + grouped unit families */
body.catalogue-page #cabinetConfigurator{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 280px!important;
  gap:28px!important;
  align-items:start!important;
  padding:22px!important;
}
body.catalogue-page #cabinetConfigurator .setup-main{min-width:0;grid-column:1!important;grid-row:1!important}
body.catalogue-page #cabinetConfigurator .setup-live-preview{
  grid-column:2!important;grid-row:1!important;position:sticky!important;top:96px!important;
  align-self:start!important;margin:0!important;padding:14px!important;background:#fff!important;
  border:1px solid #dcd9cf!important;border-radius:8px!important;text-align:center!important;
}
body.catalogue-page #cabinetConfigurator .setup-live-preview img{
  display:block!important;width:100%!important;max-width:250px!important;height:230px!important;
  object-fit:contain!important;margin:0 auto!important;
}
body.catalogue-page #cabinetConfigurator .setup-live-preview-meta{margin:8px 0 4px!important;font-size:12px!important;line-height:1.45!important;color:#4f5c4f!important}
body.catalogue-page #cabinetConfigurator .setup-live-preview small{display:block;color:#858a83;font-size:11px;line-height:1.4}
body.catalogue-page #cabinetConfigurator .setup-heading{margin:0 0 4px!important}
body.catalogue-page #cabinetConfigurator .setup-section{margin-top:14px!important;padding-top:14px!important}
body.catalogue-page #cabinetConfigurator .setup-summary{margin-top:14px!important;padding-top:12px!important}
body.catalogue-page #cabinetConfigurator #configCarcaseGrid,
body.catalogue-page #cabinetConfigurator #inlineDoorSwatches{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:92px!important;gap:8px!important;
}
body.catalogue-page #cabinetConfigurator .finish-choice{height:92px!important;min-height:92px!important;padding:8px 6px!important;gap:6px!important}
body.catalogue-page #cabinetConfigurator .finish-choice .finish-sample,
body.catalogue-page #cabinetConfigurator .finish-choice .finish-sample img{width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important;min-height:34px!important;max-height:34px!important;flex-basis:34px!important}
body.catalogue-page #cabinetConfigurator .finish-choice .finish-name{height:30px!important;flex-basis:30px!important;font-size:12px!important;line-height:14px!important}
body.catalogue-page #cabinetConfigurator #unitDoorConfiguration{grid-template-columns:minmax(0,1fr) 280px!important;column-gap:18px!important;row-gap:12px!important}
body.catalogue-page #cabinetConfigurator #unitConfigRange{height:40px!important;min-height:40px!important;font-size:14px!important}

/* One product card per cabinet type. Width/height choices move inside the product dialog. */
body.catalogue-page .unit-family-card .image{height:240px!important}
body.catalogue-page .unit-family-card .body{gap:7px!important}
body.catalogue-page .unit-family-card .code{color:#687653!important;font-weight:600!important}
body.catalogue-page .unit-family-card h3{min-height:0!important;font-size:17px!important;line-height:1.25!important}
body.catalogue-page .unit-family-card .family-description{font-size:12px;color:#72766f;line-height:1.45;min-height:35px}
body.catalogue-page .unit-family-sizes{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 2px}
body.catalogue-page .unit-family-sizes span{padding:4px 7px;border:1px solid #d8d5cc;border-radius:999px;background:#fff;font-size:10px;line-height:1;color:#50554f}
body.catalogue-page .unit-family-sizes .more{background:#eef0e8;color:#52664e;border-color:#d8ddcf}
body.catalogue-page .unit-family-card .family-from-price{font-size:20px;font-weight:600;margin-top:auto}
body.catalogue-page .unit-family-card .family-from-price small{display:block;font-size:10px;font-weight:400;color:#777b75;margin-top:2px}
body.catalogue-page .family-size-selector{border-top:1px solid #dedbd3;padding-top:14px;margin-top:2px}
body.catalogue-page .family-size-selector label{font-weight:600}
body.catalogue-page .family-size-selector select{width:100%;min-height:46px;border:1px solid #d7d3c8;border-radius:5px;background:#fff;padding:10px 12px;font:inherit}
body.catalogue-page .family-size-help{display:block;margin-top:6px;color:#777b75;font-size:11px;line-height:1.4}

@media(max-width:900px){
  body.catalogue-page #cabinetConfigurator{grid-template-columns:1fr!important}
  body.catalogue-page #cabinetConfigurator .setup-main{grid-column:1!important;grid-row:2!important}
  body.catalogue-page #cabinetConfigurator .setup-live-preview{grid-column:1!important;grid-row:1!important;position:static!important;display:grid!important;grid-template-columns:140px 1fr;align-items:center;text-align:left!important;gap:14px}
  body.catalogue-page #cabinetConfigurator .setup-live-preview img{height:140px!important;max-width:140px!important;grid-row:1/4}
  body.catalogue-page #cabinetConfigurator .setup-live-preview-label{margin:0!important}
}
@media(max-width:620px){
  body.catalogue-page #cabinetConfigurator #configCarcaseGrid,
  body.catalogue-page #cabinetConfigurator #inlineDoorSwatches{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.catalogue-page #cabinetConfigurator #unitDoorConfiguration{grid-template-columns:1fr!important}
  body.catalogue-page #cabinetConfigurator .setup-live-preview{grid-template-columns:110px 1fr}
  body.catalogue-page #cabinetConfigurator .setup-live-preview img{height:110px!important;max-width:110px!important}
}
