/* Greenwood Shed Builder - front end
 *
 * Palette and type deliberately track the Elementor site kit: the green, dark
 * and off-white below are the kit's Primary / Secondary / Off White, and the
 * buttons carry Elementor's own .elementor-button class so they pick up the
 * kit's colour, font and pill radius. Rules here only set SIZE and LAYOUT for
 * buttons - never colour - so a kit change still flows through.
 */
.gsb{
  --gsb-green:#496b2e;      /* kit Primary   */
  --gsb-ink:#1e252d;        /* kit Secondary */
  --gsb-off:#f5f7f7;        /* kit Off White */
  --gsb-dark:#14342a;
  --gsb-line:#d5dbd8;
  --gsb-muted:#5c6b66;
  --gsb-radius:14px;
  max-width:1240px;margin:0 auto;color:var(--gsb-ink);
  font-family:var(--e-global-typography-text-font-family,"Poppins",system-ui,sans-serif);
}
.gsb *{box-sizing:border-box}

/* ---------- two column shell ---------- */
.gsb-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:start}
.gsb-controls{min-width:0}
.gsb-preview{min-width:0;position:sticky;top:24px}
.gsb-preview-inner{background:var(--gsb-off);border:1px solid var(--gsb-line);border-radius:var(--gsb-radius);padding:18px}

/* ---------- stage rail ---------- */
.gsb-rail{display:flex;gap:6px;list-style:none;margin:0 0 22px;padding:0;flex-wrap:wrap}
.gsb-rail li{display:flex;align-items:center;gap:7px;padding:7px 13px 7px 8px;border-radius:99px;background:var(--gsb-off);
  border:1px solid var(--gsb-line);font-size:13px;color:var(--gsb-muted);flex:0 0 auto}
.gsb-rail li span{width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--gsb-line);
  display:grid;place-items:center;font-size:12px;font-weight:600;flex:0 0 auto}
.gsb-rail li em{font-style:normal;white-space:nowrap}
.gsb-rail li.done{color:var(--gsb-green);border-color:#b9c9ab;background:#f2f6ee}
.gsb-rail li.done span{background:var(--gsb-green);border-color:var(--gsb-green);color:#fff}
.gsb-rail li.current{color:#fff;background:var(--gsb-green);border-color:var(--gsb-green);font-weight:600}
.gsb-rail li.current span{background:#fff;border-color:#fff;color:var(--gsb-green)}

/* ---------- stages ---------- */
.gsb-stage[hidden]{display:none}
.gsb-stage h3{margin:0 0 16px;font-size:21px;line-height:1.25;color:var(--gsb-ink);
  font-family:var(--e-global-typography-primary-font-family,"Poppins",system-ui,sans-serif)}
.gsb-f{display:block;margin-bottom:15px;font-size:13px;font-weight:600;color:var(--gsb-ink)}
.gsb-f[hidden]{display:none}
.gsb-f select,.gsb-f input[type=text],.gsb-f textarea{
  display:block;width:100%;margin-top:6px;padding:11px 13px;font:inherit;font-weight:400;font-size:14px;
  color:var(--gsb-ink);background:#fff;border:1px solid var(--gsb-line);border-radius:10px}
.gsb-f select:focus,.gsb-f input:focus,.gsb-f textarea:focus{outline:2px solid var(--gsb-green);outline-offset:1px;border-color:var(--gsb-green)}
.gsb-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.gsb-pair[hidden]{display:none}
.gsb-help{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--gsb-muted)}
.gsb-check{display:flex;gap:9px;align-items:flex-start;margin:0 0 11px;font-size:13.5px;line-height:1.5;cursor:pointer}
.gsb-check input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--gsb-green)}
.gsb-approve{margin-top:14px;padding:12px 14px;background:var(--gsb-off);border:1px solid var(--gsb-line);border-radius:10px}
.gsb-tools{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.gsb-link{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--gsb-green);
  text-decoration:underline;cursor:pointer}
.gsb-link:hover{color:var(--gsb-dark)}

/* ---------- navigation buttons ----------
   SIZE ONLY. Colour, font and radius come from .elementor-button + the kit. */
.gsb-nav{display:flex;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid var(--gsb-line)}
.gsb-btn{padding:12px 26px;font-size:14px;line-height:1.2;cursor:pointer;border:0}
.gsb-nav .gsb-btn{flex:0 0 auto}
#gsb-next{margin-left:auto}
.gsb-btn-ghost{background:transparent;color:var(--gsb-ink);border:1px solid var(--gsb-line)}
.gsb-btn-ghost:hover{background:var(--gsb-off);color:var(--gsb-ink)}
.gsb-btn[hidden]{display:none}
.gsb-submit{width:100%;margin-top:4px;padding:15px 26px;font-size:15px}

/* ---------- preview panel chrome ---------- */
.gsb-preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.gsb-preview-head small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--gsb-muted)}
.gsb-preview-head strong{font-size:16px}
.gsb-mini-price{font-size:20px;font-weight:700;color:var(--gsb-green)}
.gsb-summary{margin-top:14px;border-top:1px solid var(--gsb-line);padding-top:12px}
.gsb-summary p,.gsb-summary .gsb-sumrow{display:flex;justify-content:space-between;gap:14px;margin:0 0 6px;font-size:12.5px;line-height:1.45}
.gsb-summary .gsb-sumrow span,.gsb-summary span{color:var(--gsb-muted);flex:0 0 auto}
.gsb-summary .gsb-sumrow strong,.gsb-summary strong{font-weight:600;text-align:right}
.gsb-totals{margin-top:12px;border-top:1px solid var(--gsb-line);padding-top:12px}
.gsb-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px;font-size:14px}
.gsb-total strong{font-size:19px;font-weight:700}
.gsb-due strong{color:var(--gsb-green)}
.gsb-cart{margin:14px 0 0}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .gsb-layout{grid-template-columns:1fr;gap:22px}
  .gsb-preview{position:static}
  .gsb-pair{grid-template-columns:1fr}
  .gsb-rail li em{display:none}
  .gsb-rail li{padding:7px 9px}
}
.gsb-slot.has-window.height-high{align-self:start;margin-top:12%}
.gsb-slot.has-window.height-middle{align-self:center}
.gsb-slot.has-window.height-low{align-self:end;margin-bottom:12%}
.gsb-slot.wide-opening{width:calc(200% + 5px);z-index:2}
.gsb-real-photo{margin:18px 0 0}
.gsb-real-photo img{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:9px}
.gsb-real-photo figcaption{font-size:12px;color:#69746b;margin-top:5px}
.gsb-eaves .gsb-roof-shape{height:24px;top:-28px;clip-path:none}
.gsb-elevation.gsb-vgroove{background:repeating-linear-gradient(to bottom,#c7925b 0,#c7925b calc(4% - 1px),#795536 calc(4% - 1px),#795536 4%)}
.gsb-elevation.gsb-loglap{background:repeating-linear-gradient(to bottom,#d2a06a 0,#bd8955 2.7%,#765033 3.45%,#ebbd83 4%)}
.gsb-3d-wrap{margin-top:22px}
.gsb-3d-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:8px}
.gsb-3d-head small{display:block;color:#69746b}
.gsb-3d-head strong{display:block;font-size:18px}
.gsb-3d-head>span{font-size:12px;color:#69746b}
.gsb-3d-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;background:linear-gradient(#dff1f5 0 68%,#d9dfcf 68%);border-radius:10px;cursor:grab;touch-action:none}
.gsb-3d-wrap canvas:active{cursor:grabbing}
.gsb-3d-views{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:7px}
.gsb-3d-views button{min-height:38px;border:1px solid var(--gsb-green);border-radius:7px;background:#fff;color:var(--gsb-green);font-weight:700;cursor:pointer}
.gsb-3d-views button:hover{background:var(--gsb-green);color:#fff}
.gsb-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.gsb-tabs button{border:1px solid var(--gsb-green);background:#fff;color:var(--gsb-green);border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer}
.gsb-tabs button.active{background:var(--gsb-green);color:#fff}
.gsb-elevation{position:relative;height:300px;margin:45px 0 18px;background:#c7925b;border:7px solid #6f4c2e;border-top-width:9px;box-shadow:0 12px 30px #1c33251f}
.gsb-roof-shape{position:absolute;z-index:0;left:-9px;right:-9px;top:-52px;height:55px;background:#304136;clip-path:polygon(50% 0,100% 84%,100% 100%,0 100%,0 84%)}
.gsb-pent .gsb-roof-shape{clip-path:polygon(0 38%,100% 0,100% 100%,0 100%)}
.gsb-reverse-apex .gsb-roof-shape{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);height:24px;top:-28px}
.gsb-slots{position:absolute;inset:12px 10px 0;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;align-items:end}
.gsb-slot{height:88%;min-width:0;border:1px dashed #654a33;background:#ffffff25;color:#47321f;cursor:pointer;padding:3px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gsb-slot:hover{background:#fff7}
.gsb-slot span{font-size:20px;font-weight:900}
.gsb-slot small{font-size:10px;line-height:1.2}
.gsb-slot.has-door{height:92%;background:#755033;color:#fff;border:5px solid #4b321f}
.gsb-slot.has-window{height:42%;align-self:center;background:linear-gradient(135deg,#d8f2ff,#8bc1d8);border:7px solid #fff;outline:3px solid #5c432c;color:#233a42}
.gsb-legend{display:flex;gap:20px;font-size:12px;color:#657066}
.gsb-legend i{display:inline-block;width:13px;height:13px;margin-right:5px;vertical-align:-2px}
.gsb-legend .door{background:#755033}
.gsb-legend .window{background:#9fd2e6;border:2px solid #fff;outline:1px solid #654a33}
.gsb-elevation{height:260px}
@media(max-width:520px){.gsb{margin:15px 0}.gsb-head,.gsb-controls,.gsb-preview{padding:20px 16px}.gsb-grid{grid-template-columns:1fr}.gsb-elevation{height:220px;margin-top:42px}.gsb-slot small{display:none}.gsb-slot span{font-size:12px}.gsb-summary-lines p{display:block}.gsb-summary-lines p strong{display:block;text-align:left;margin-top:2px}}
/* =====================================================================
 * Theme reset guard.
 *
 * hello-elementor's reset.css styles every bare <button> with its own
 * border and colour, which showed through as a pink outline/þtext on hover
 * and on the .active state of the wall tabs and 3D view buttons. Anything
 * inside .gsb that is NOT an .elementor-button is therefore neutralised
 * here first, then styled explicitly below for every state.
 * ===================================================================== */
.gsb button:not(.elementor-button){
  font:inherit;color:inherit;background:transparent;border:1px solid transparent;
  border-radius:8px;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:none;
}
.gsb button:not(.elementor-button):hover,
.gsb button:not(.elementor-button):focus,
.gsb button:not(.elementor-button):active,
.gsb button:not(.elementor-button).active{
  color:inherit;box-shadow:none;
}
.gsb button:not(.elementor-button):focus-visible{outline:2px solid var(--gsb-green);outline-offset:2px}

/* text links (Save design / Copy share link / Print) */
.gsb .gsb-link,
.gsb .gsb-link:hover,
.gsb .gsb-link:focus,
.gsb .gsb-link:active{
  background:none;border:0;padding:0;font-size:13px;text-decoration:underline;
}
.gsb .gsb-link{color:var(--gsb-green)}
.gsb .gsb-link:hover,.gsb .gsb-link:focus{color:var(--gsb-dark)}

/* wall tabs */
.gsb .gsb-tabs button{background:#fff;border:1px solid var(--gsb-line);color:var(--gsb-muted);
  padding:7px 14px;font-size:13px;font-weight:600;border-radius:99px}
.gsb .gsb-tabs button:hover{border-color:var(--gsb-green);color:var(--gsb-green);background:#fff}
.gsb .gsb-tabs button.active,
.gsb .gsb-tabs button.active:hover{background:var(--gsb-green);border-color:var(--gsb-green);color:#fff}

/* 3D view buttons */
.gsb .gsb-3d-views button{background:#fff;border:1px solid var(--gsb-line);color:var(--gsb-muted);
  padding:6px 13px;font-size:12.5px;font-weight:600;border-radius:99px}
.gsb .gsb-3d-views button:hover{border-color:var(--gsb-green);color:var(--gsb-green);background:#fff}
.gsb .gsb-3d-views button.active,
.gsb .gsb-3d-views button.active:hover{background:var(--gsb-green);border-color:var(--gsb-green);color:#fff}

/* =====================================================================
 * Doors & windows picker - chips instead of one dropdown, so every option
 * is visible at once and the choice is a single click.
 * ===================================================================== */
.gsb-hidden-select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.gsb-pick-label{margin:16px 0 8px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gsb-muted)}
.gsb-chips{display:flex;flex-wrap:wrap;gap:8px}
.gsb .gsb-chips button{background:#fff;border:1px solid var(--gsb-line);color:var(--gsb-ink);
  border-radius:10px;padding:9px 13px;font-size:13px;line-height:1.3;text-align:left;
  display:flex;flex-direction:column;gap:2px;min-width:0}
.gsb .gsb-chips button small{font-size:11.5px;color:var(--gsb-muted);font-weight:600}
.gsb .gsb-chips button:hover{border-color:var(--gsb-green);background:#f2f6ee;color:var(--gsb-ink)}
.gsb .gsb-chips button.active,
.gsb .gsb-chips button.active:hover{background:var(--gsb-green);border-color:var(--gsb-green);color:#fff}
.gsb .gsb-chips button.active small{color:rgba(255,255,255,.85)}

/* the "now click a position" prompt */
.gsb-arm{margin:16px 0 0;padding:11px 14px;border-radius:10px;font-size:13.5px;font-weight:600;
  background:#f2f6ee;border:1px solid #b9c9ab;color:var(--gsb-green)}
.gsb-arm[hidden]{display:none}

/* wall slots highlight while an opening is armed */
.gsb-elevation.is-armed .gsb-slot:not(.has-door):not(.has-window){
  border-color:var(--gsb-green);background:rgba(73,107,46,.14)}

/* preview header, simplified */
.gsb-preview-head{align-items:baseline}
.gsb-preview-head strong{font-size:15px;font-weight:700}
.gsb-preview-head .gsb-mini-price{font-size:22px;font-weight:700;color:var(--gsb-green)}

/* Cuprinol swatch picker */
.gsb-colour-search{display:block;width:100%;margin:6px 0 10px;padding:10px 13px;font:inherit;
  font-weight:400;font-size:14px;border:1px solid var(--gsb-line);border-radius:10px;background:#fff}
.gsb-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;
  max-height:290px;overflow-y:auto;padding:4px;border:1px solid var(--gsb-line);
  border-radius:10px;background:#fff}
.gsb .gsb-swatches button.gsb-swatch{display:block;padding:0 0 5px;border:2px solid transparent;
  border-radius:9px;background:none;text-align:center;overflow:hidden}
.gsb-swatch-chip{display:block;width:100%;height:44px;border-radius:7px 7px 0 0;
  border:1px solid rgba(30,37,45,.16)}
.gsb .gsb-swatches button.gsb-swatch small{display:block;margin-top:4px;padding:0 3px;font-size:10.5px;
  line-height:1.25;color:var(--gsb-muted);font-weight:600;word-break:break-word}
.gsb .gsb-swatches button.gsb-swatch:hover{border-color:var(--gsb-green);background:none}
.gsb .gsb-swatches button.gsb-swatch.active{border-color:var(--gsb-green);background:#f2f6ee}
.gsb .gsb-swatches button.gsb-swatch.active small{color:var(--gsb-green)}
.gsb-chosen{margin:9px 0 0;font-size:13px;font-weight:600;color:var(--gsb-green)}
.gsb-chosen[hidden]{display:none}
.gsb-swatch-note{margin-top:8px}


/* WooCommerce notices shown above the builder */
.gsb-notices{margin:0 0 20px}
.gsb-notices .woocommerce-error,.gsb-notices .woocommerce-message,.gsb-notices .woocommerce-info{
  margin:0 0 10px;padding:12px 16px;border-radius:10px;font-size:14px;list-style:none}
.gsb-notices .woocommerce-error{background:#fdf1f1;border:1px solid #e6b3b3;color:#8a2b2b}
.gsb-notices .woocommerce-message,.gsb-notices .woocommerce-info{
  background:#f2f6ee;border:1px solid #b9c9ab;color:var(--gsb-green)}

/* =====================================================================
 * Doors & windows: icon bays, one row per wall, all four visible at once.
 * Replaces the drawn elevation, which only showed one wall and needed tabs.
 * ===================================================================== */
.gsb-walls{margin:18px 0 4px;display:grid;gap:10px}
.gsb-wallrow{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center}
.gsb-wallname{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--gsb-muted);
  text-transform:uppercase}
.gsb-bays{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.gsb .gsb-bays button.gsb-bay{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px 7px;background:#fff;border:1px solid var(--gsb-line);border-radius:9px;
  color:var(--gsb-muted);min-height:66px;justify-content:center;text-align:center}
.gsb .gsb-bays button.gsb-bay:hover{border-color:var(--gsb-green);background:#f7faf5}
.gsb-bay-icon{display:block;width:24px;height:24px;line-height:24px}
.gsb-bay-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.gsb-bay-empty{font-size:19px;font-weight:600;color:#b6bfc4}
.gsb .gsb-bays button.gsb-bay small{font-size:9.5px;line-height:1.2;font-weight:600;
  word-break:break-word;max-width:100%}
.gsb .gsb-bays button.gsb-bay.has-door{border-color:#8a6a4a;background:#f6efe8;color:#6b4a33}
.gsb .gsb-bays button.gsb-bay.has-window{border-color:#7ba7bd;background:#eef6fa;color:#356982}
.gsb .gsb-bays button.gsb-bay.is-wide{grid-column:span 2}
.gsb .gsb-bays button.gsb-bay.is-target{border-color:var(--gsb-green);border-style:dashed;
  background:rgba(73,107,46,.07);color:var(--gsb-green)}
@media(max-width:600px){
  .gsb-wallrow{grid-template-columns:1fr;gap:4px}
  .gsb-bays{gap:4px}
  .gsb .gsb-bays button.gsb-bay{min-height:58px;padding:7px 2px 6px}
  .gsb .gsb-bays button.gsb-bay small{font-size:8.5px}
}

/* Guided doors & windows: one card per opening, plain questions inside. */
.gsb-openlist{margin:0 0 18px;display:grid;gap:10px}
.gsb-opencard{border:1px solid var(--gsb-line);border-radius:11px;padding:12px 14px 4px;background:#fff}
.gsb-opencard-head{margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gsb-green)}
.gsb-opengrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.gsb-openfield{font-size:12px}
.gsb-openfield select{margin-top:5px;padding:9px 11px;font-size:13.5px}
.gsb-note{margin:0 0 14px;padding:10px 13px;border-radius:9px;font-size:13px;font-weight:600;
  background:#fdf6ec;border:1px solid #e6cfa8;color:#8a6321}
.gsb-note[hidden]{display:none}
@media(max-width:600px){.gsb-opengrid{grid-template-columns:1fr}}

/* One-opening-per-page detail screen */
.gsb-stage-detail #gsb-detail{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:4px}
.gsb-stage-detail .gsb-openfield{font-size:12.5px}
@media(max-width:600px){.gsb-stage-detail #gsb-detail{grid-template-columns:1fr}}

/* View buttons must stay on one line - Front / Back / Left / Right were
   wrapping onto two rows in the narrower preview column. */
.gsb .gsb-3d-views{display:flex;flex-wrap:nowrap;gap:5px;justify-content:center}
.gsb .gsb-3d-views button{flex:1 1 0;min-width:0;padding:6px 4px;font-size:12px;white-space:nowrap}

/* Price pinned to the top of the preview panel so it is always visible. */
.gsb-pricebar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 14px;padding:11px 14px;background:var(--gsb-green);border-radius:10px;color:#fff}
.gsb-pricebar span{font-size:12px;font-weight:600;opacity:.9}
.gsb-pricebar strong{font-size:23px;font-weight:700;line-height:1}
.gsb-savemsg[hidden]{display:none}
.gsb-cart{margin-top:6px}
.gsb-tools{margin-top:14px}

/* =====================================================================
 * Theme reset guard, properly this time.
 *
 * hello-elementor's reset.css sets:
 *   button              { border:1px solid #c36; color:#c36 }
 *   button:focus,:hover { background-color:#c36; color:#fff }
 * The earlier guard reset `color` on hover but NOT `background-color`, so the
 * pink came straight back on hover - and because :focus persists after a click,
 * a button STAYED pink once used. Every state must be neutralised explicitly.
 * ===================================================================== */
.gsb button:not(.elementor-button),
.gsb button:not(.elementor-button):hover,
.gsb button:not(.elementor-button):focus,
.gsb button:not(.elementor-button):focus-visible,
.gsb button:not(.elementor-button):active{
  background-color:transparent;
  border-color:var(--gsb-line);
  color:var(--gsb-ink);
  box-shadow:none;
  text-decoration:none;
}
/* now re-assert each control's own look for every state */
.gsb .gsb-link,.gsb .gsb-link:hover,.gsb .gsb-link:focus,.gsb .gsb-link:active{
  background-color:transparent;border-color:transparent;text-decoration:underline}
.gsb .gsb-link{color:var(--gsb-green)}
.gsb .gsb-link:hover,.gsb .gsb-link:focus{color:var(--gsb-dark)}

.gsb .gsb-3d-views button,.gsb .gsb-3d-views button:focus{
  background-color:#fff;border-color:var(--gsb-line);color:var(--gsb-muted)}
.gsb .gsb-3d-views button:hover{
  background-color:#fff;border-color:var(--gsb-green);color:var(--gsb-green)}
.gsb .gsb-3d-views button.active,.gsb .gsb-3d-views button.active:hover,
.gsb .gsb-3d-views button.active:focus{
  background-color:var(--gsb-green);border-color:var(--gsb-green);color:#fff}

.gsb .gsb-btn-ghost,.gsb .gsb-btn-ghost:focus{
  background-color:transparent;border:1px solid var(--gsb-line);color:var(--gsb-ink)}
.gsb .gsb-btn-ghost:hover{background-color:var(--gsb-off);color:var(--gsb-ink)}

/* =====================================================================
 * Mobile: questions first, shed underneath.
 * The preview was being pulled above the controls with order:-1, which meant a
 * phone opened on a picture with the questions pushed off screen. The running
 * price moves to a strip pinned at the bottom so it is still always visible.
 * ===================================================================== */
.gsb-mobilebar{display:none}
@media(max-width:900px){
  .gsb-preview{order:0}                 /* was -1: shed now follows the questions */
  .gsb-controls{order:-1}
  .gsb-pricebar{display:none}           /* replaced by the pinned strip below */
  .gsb-mobilebar{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
    background:var(--gsb-green);color:#fff;
    box-shadow:0 -2px 14px rgba(30,37,45,.22);
  }
  .gsb-mobilebar span{font-size:12px;font-weight:600;opacity:.9}
  .gsb-mobilebar strong{font-size:20px;font-weight:700;line-height:1}
  .gsb{padding-bottom:64px}             /* clear the pinned strip */
}

/* Review page spacing.
   Two causes of the gaps: hello-elementor gives every <label> a block margin,
   and WooCommerce styles `form.cart` with a large bottom margin - our
   add-to-basket form carries that class so it inherited a big gap above. */
.gsb label{margin-bottom:0}
.gsb .gsb-check{margin:0 0 8px;padding:0}
.gsb .gsb-check + .gsb-check{margin-top:0}
.gsb .gsb-approve{margin:12px 0 0}
.gsb .gsb-f{margin-bottom:13px}
.gsb .gsb-tools{margin-top:14px;gap:14px}
.gsb form.gsb-cart{margin:12px 0 0;padding:0}
.gsb .gsb-submit{margin-top:0}

/* =====================================================================
 * Print / Save as PDF - a two page proposal.
 *
 * The sheet is moved to be a direct child of <body> and everything else is
 * display:none. The previous version used visibility:hidden, which hides
 * content but KEEPS its layout space, so the whole site still generated pages
 * and the PDF came out full of blanks.
 *
 * The URL/date a browser prints in the margin is a BROWSER setting
 * ("Headers and footers"), not something CSS can switch off.
 * ===================================================================== */
.gsb-print-sheet{display:none}

@media print{
  @page{margin:14mm}
  html,body{margin:0!important;padding:0!important;background:#fff!important}
  body.gsb-printing > *{display:none!important}
  body.gsb-printing > #gsb-print-sheet{display:block!important}
  #gsb-print-sheet{
    width:100%;color:#1e252d;
    font-family:"Poppins",system-ui,-apple-system,sans-serif;
  }

  /* ---- page 1: cover ---- */
  .gsb-ps-cover{
    page-break-after:always;break-after:page;
    min-height:88vh;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;
  }
  .gsb-ps-coverlogo{max-width:300px;height:auto;margin-bottom:30px}
  .gsb-ps-covertitle{margin:0;font-size:38pt;line-height:1.05;font-weight:700;color:#14342a;letter-spacing:-.5pt}
  .gsb-ps-coversub{margin:14px 0 0;font-size:14pt;color:#496b2e;font-weight:600}
  .gsb-ps-coverdate{margin:8px 0 0;font-size:10.5pt;color:#5c6b66}
  .gsb-ps-coverfoot{margin:34px 0 0;font-size:10pt;color:#5c6b66;
    border-top:2px solid #496b2e;padding-top:12px}

  /* ---- page 2: design + specification ---- */
  .gsb-ps-page{position:relative}
  .gsb-ps-h2{margin:0 0 12px;font-size:15pt;color:#14342a;
    border-bottom:2px solid #496b2e;padding-bottom:6px}

  /* the shed with its dimensions around it */
  .gsb-ps-figure{
    position:relative;display:grid;justify-items:center;align-items:center;
    grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;
    gap:6px 10px;margin:0 0 22px;
  }
  .gsb-ps-shot{grid-column:2;grid-row:2;width:100%;max-width:430px;height:auto;
    border:1px solid #d5dbd8;border-radius:6px}
  .gsb-ps-dim{font-size:9.5pt;font-weight:700;color:#496b2e;letter-spacing:.03em;white-space:nowrap}
  .gsb-ps-dim-top{grid-column:2;grid-row:1}
  .gsb-ps-dim-bottom{grid-column:2;grid-row:3;color:#5c6b66;font-weight:600}
  .gsb-ps-dim-left{grid-column:1;grid-row:2;writing-mode:vertical-rl;transform:rotate(180deg)}
  .gsb-ps-dim-right{grid-column:3;grid-row:2;writing-mode:vertical-rl}

  .gsb-ps-table{width:100%;border-collapse:collapse;margin:0 0 16px;
    page-break-inside:avoid;break-inside:avoid}
  .gsb-ps-table th,.gsb-ps-table td{border-bottom:1px solid #e3e8e5;padding:7px 4px;
    font-size:10.5pt;line-height:1.4;text-align:left;vertical-align:top}
  .gsb-ps-table th{width:30%;color:#5c6b66;font-weight:600}
  .gsb-ps-table td{font-weight:600}

  .gsb-ps-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    border-top:2px solid #496b2e;padding-top:10px;font-size:12pt}
  .gsb-ps-total strong{font-size:19pt;color:#14342a}
  .gsb-ps-foot{margin-top:18px;font-size:8.5pt;line-height:1.5;color:#5c6b66}

  /* Watermark across the specification page.
     The source logo file is NOT a transparent PNG - it has a near-white
     background - so opacity alone left a faint pale rectangle rather than a
     watermark of the mark itself. mix-blend-mode:multiply drops white/near-
     white pixels against the page and keeps only the dark ink, which is what
     actually reads as a watermark; opacity is kept low so it stays behind
     the text rather than competing with it. */
  .gsb-ps-bigmark{position:absolute;top:50%;left:50%;width:76%;height:auto;
    transform:translate(-50%,-50%) rotate(-28deg);opacity:.14;
    mix-blend-mode:multiply;z-index:0;pointer-events:none;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .gsb-ps-h2,.gsb-ps-figure,.gsb-ps-table,.gsb-ps-total,.gsb-ps-foot{position:relative;z-index:1}
}

/* No hover animation on our controls.
   hello-elementor puts `transition:all .3s` on every button, and Elementor's
   kit adds its own hover effects - together they made the text links appear to
   zoom on hover. Also kill the 1px border the reset guard gives bare buttons,
   which showed as a faint outline around the plain text links. */
.gsb button:not(.elementor-button){
  transition:none!important;transform:none!important;
  font-size:inherit;letter-spacing:normal;
}
.gsb button:not(.elementor-button):hover,
.gsb button:not(.elementor-button):focus,
.gsb button:not(.elementor-button):active{
  transition:none!important;transform:none!important;
}
.gsb .gsb-link,.gsb .gsb-link:hover,.gsb .gsb-link:focus,.gsb .gsb-link:active{
  border:0;padding:0;font-size:13px;line-height:1.4;
}
.gsb .gsb-btn-reset,.gsb .gsb-btn-reset:hover,
.gsb .gsb-btn-reset:focus,.gsb .gsb-btn-reset:active{
  border:0;padding:0;background:none;font-size:13px;
  color:var(--gsb-muted);text-decoration:underline;align-self:center;margin-right:auto;
}
.gsb .gsb-btn-reset:hover,.gsb .gsb-btn-reset:focus{color:#8a2b2b}
.gsb-nav{align-items:center}

/* =====================================================================
 * Buttons - the actual fix.
 *
 * The premise was wrong. `.elementor-button` was supposed to inherit the site
 * kit's colours, but kit 6 defines exactly ONE button property:
 *     .elementor-kit-6 button, .elementor-kit-6 .elementor-button{border-radius:99px}
 * No colour, no background. So `.elementor-button` had nothing to inherit, and
 * because the reset guard deliberately EXCLUDED those buttons, Back / Continue /
 * Add to basket fell through to hello-elementor's
 *     button{border:1px solid #c36;color:#c36}
 *     button:hover,:focus{background-color:#c36;color:#fff}
 * That is why the pink kept coming back after each "fix" - I was only ever
 * neutralising the buttons that were NOT the problem.
 *
 * Every button inside .gsb is now neutralised, including .elementor-button, and
 * each one is coloured explicitly from the kit's palette. The 99px radius is
 * kept so they still match the rest of the site.
 * ===================================================================== */
.gsb button,
.gsb button:hover,
.gsb button:focus,
.gsb button:focus-visible,
.gsb button:active{
  background-image:none;
  box-shadow:none;
  text-decoration:none;
  transition:none;
  transform:none;
}

/* primary action: Continue / Add to basket */
.gsb .gsb-btn,
.gsb .gsb-btn:focus{
  background-color:var(--gsb-green);
  border:1px solid var(--gsb-green);
  color:#fff;
  border-radius:99px;
}
.gsb .gsb-btn:hover,
.gsb .gsb-btn:active{
  background-color:var(--gsb-dark);
  border-color:var(--gsb-dark);
  color:#fff;
}

/* secondary action: Back */
.gsb .gsb-btn-ghost,
.gsb .gsb-btn-ghost:focus{
  background-color:transparent;
  border:1px solid var(--gsb-line);
  color:var(--gsb-ink);
  border-radius:99px;
}
.gsb .gsb-btn-ghost:hover,
.gsb .gsb-btn-ghost:active{
  background-color:var(--gsb-off);
  border-color:var(--gsb-muted);
  color:var(--gsb-ink);
}

/* full-width submit keeps the same colours */
.gsb .gsb-submit,
.gsb .gsb-submit:focus{background-color:var(--gsb-green);border-color:var(--gsb-green);color:#fff}
.gsb .gsb-submit:hover,
.gsb .gsb-submit:active{background-color:var(--gsb-dark);border-color:var(--gsb-dark);color:#fff}

/* =====================================================================
 * Neutralise wpautop.
 *
 * WordPress wraps runs of inline elements in the content in bare <p> tags. It
 * was doing that inside the builder - putting a <p> around the confirmation
 * checkboxes and around the add-to-basket form - and those paragraphs carry the
 * theme's paragraph margin, which is where the mystery gaps came from. No
 * amount of styling .gsb-check or .gsb-cart could fix it, because the space
 * belonged to a wrapper that is not in our template at all.
 *
 * Every <p> we author has a class; wpautop's have none. `display:contents`
 * removes the injected wrapper from layout entirely so its children sit exactly
 * where our own CSS puts them, while real content elsewhere on the site keeps
 * its formatting.
 * ===================================================================== */
.gsb p:not([class]){display:contents}
.gsb br{display:none}
.gsb-f-label{display:block}

/* =====================================================================
 * Breathing room.
 *
 * Chasing the wpautop gaps I stripped margins back too far and everything ended
 * up squashed. These are the deliberate spacings - set here, in one place, after
 * every reset - so a stage reads comfortably rather than as a wall of controls.
 *
 * The wpautop guard is also scoped now: it must NOT flatten the summary rows,
 * which the JS builds as <p> and which need to stay flex (label left, value
 * right). Those carry .gsb-sumrow; only genuinely unclassed <p> are collapsed.
 * ===================================================================== */
.gsb .gsb-stage{padding:2px 0 4px}
.gsb .gsb-stage h3{margin:0 0 18px}
.gsb .gsb-f{display:block;margin:0 0 16px}
.gsb .gsb-f select,.gsb .gsb-f input[type=text],.gsb .gsb-f input[type=search],.gsb .gsb-f textarea{margin-top:7px}
.gsb .gsb-pair{gap:0 14px}
.gsb .gsb-check{margin:0 0 12px}
.gsb .gsb-approve{margin:18px 0 0;padding:14px 16px}
.gsb .gsb-help{margin:12px 0 0}
.gsb .gsb-tools{margin-top:22px;gap:18px}
.gsb form.gsb-cart{margin:18px 0 0}
.gsb .gsb-submit{margin-top:0;padding:15px 26px}
.gsb .gsb-nav{margin-top:26px;padding-top:20px}
.gsb .gsb-openlist{margin:0 0 20px}
.gsb .gsb-opencard{padding:14px 16px 6px}
.gsb .gsb-rail{margin:0 0 24px}
.gsb-preview-inner{padding:18px}
.gsb .gsb-summary{margin-top:16px;padding-top:14px}
.gsb .gsb-summary .gsb-sumrow{margin:0 0 7px}

/* =====================================================================
 * Text buttons: Save design / Copy share link / Download PDF / Start again.
 *
 * These were picking up the reset guard's 1px border, which is why they looked
 * boxed and mismatched next to Back. The guard is
 *   .gsb button:not(.elementor-button)   -> specificity (0,2,1)
 * while my earlier fix used
 *   .gsb .gsb-link                       -> specificity (0,2,0)
 * so the guard won and the border stayed. Matching the element in the selector
 * (`button.gsb-link`) brings this to (0,2,1) as well, and being declared later
 * it now wins. Same reasoning for .gsb-btn-reset.
 *
 * Transitions are off so nothing animates on hover - only the colour changes.
 * ===================================================================== */
.gsb button.gsb-link,
.gsb button.gsb-link:hover,
.gsb button.gsb-link:focus,
.gsb button.gsb-link:focus-visible,
.gsb button.gsb-link:active,
.gsb button.gsb-btn-reset,
.gsb button.gsb-btn-reset:hover,
.gsb button.gsb-btn-reset:focus,
.gsb button.gsb-btn-reset:focus-visible,
.gsb button.gsb-btn-reset:active{
  border:0;
  border-radius:0;
  background:none;
  background-color:transparent;
  padding:0;
  box-shadow:none;
  font-size:13px;
  line-height:1.4;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:none;
  transform:none;
  width:auto;
  min-width:0;
}
.gsb button.gsb-link{color:var(--gsb-green)}
.gsb button.gsb-link:hover,.gsb button.gsb-link:focus{color:var(--gsb-dark)}
.gsb button.gsb-btn-reset{color:var(--gsb-muted)}
.gsb button.gsb-btn-reset:hover,.gsb button.gsb-btn-reset:focus{color:#8a2b2b}

/* =====================================================================
 * Vertical rhythm between explanatory text and the control it introduces.
 *
 * .gsb-help had a top margin only, so an intro paragraph sat tight against the
 * field below it - "How many doors would you like..." was touching "How many
 * doors?". Sibling selectors give the gap only where one is actually needed,
 * so trailing help text under a control keeps its existing spacing.
 * ===================================================================== */
.gsb .gsb-stage h3 + .gsb-help{margin-top:-8px;margin-bottom:20px}
.gsb .gsb-help + .gsb-f,
.gsb .gsb-help + .gsb-check,
.gsb .gsb-help + .gsb-openlist,
.gsb .gsb-help + .gsb-pick-label,
.gsb .gsb-help + .gsb-opengrid,
.gsb .gsb-help + div{margin-top:20px}
.gsb .gsb-f + .gsb-help,
.gsb .gsb-openlist + .gsb-help,
.gsb .gsb-check + .gsb-help{margin-top:14px}
.gsb .gsb-stage h3 + .gsb-f{margin-top:0}
.gsb .gsb-detail-help,.gsb #gsb-detail-help{margin:-8px 0 20px}

/* =====================================================================
 * Navigation row: Back on the left, the primary action on the right, and a
 * small refresh icon in the corner for Start again.
 *
 * On the final step the form takes Continue's place, so "Add to basket" lands
 * exactly where the customer has been pressing Continue the whole way through.
 * ===================================================================== */
.gsb .gsb-nav{display:flex;align-items:center;gap:10px}
.gsb .gsb-nav #gsb-back{margin-right:auto}
.gsb .gsb-nav #gsb-next{margin-left:auto}
.gsb .gsb-nav form.gsb-cart{margin:0 0 0 auto;padding:0;display:block}
.gsb .gsb-nav form.gsb-cart .gsb-submit{width:auto;margin:0;padding:12px 26px;font-size:14px}

/* Start again - icon only, tucked in the corner */
.gsb button.gsb-iconbtn,
.gsb button.gsb-iconbtn:hover,
.gsb button.gsb-iconbtn:focus,
.gsb button.gsb-iconbtn:active{
  flex:0 0 auto;width:38px;height:38px;padding:0;border-radius:50%;
  background:transparent;border:1px solid var(--gsb-line);
  display:inline-flex;align-items:center;justify-content:center;
  transition:none;transform:none;box-shadow:none;
}
.gsb button.gsb-iconbtn{color:var(--gsb-muted)}
.gsb button.gsb-iconbtn:hover,.gsb button.gsb-iconbtn:focus{
  color:#8a2b2b;border-color:#d9b3b3;background:#fdf5f5}
.gsb .gsb-iconbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:600px){
  .gsb .gsb-nav{flex-wrap:wrap}
  .gsb .gsb-nav form.gsb-cart{margin-left:auto}
  .gsb .gsb-nav form.gsb-cart .gsb-submit{padding:12px 20px}
}

/* =====================================================================
 * Doors & windows: click a bay on the wall elevation to place or edit it.
 * Reuses the wall/slot/tab/legend classes from an earlier version of this
 * stage (.gsb-tabs, .gsb-elevation, .gsb-slots, .gsb-slot, .gsb-legend) -
 * they already had the right visual language and were simply unused, gated
 * permanently off by a `.gsb-placing` class nothing ever set.
 *
 * Both .gsb-slot and .gsb-tabs button are <button> elements, so they are
 * caught by the theme reset guard above (.gsb button:not(.elementor-button),
 * specificity 0,2,1) the same way the pink buttons were - their own colours
 * were only ever (0,1,0)/(0,2,0) and the guard runs later. Re-asserted here
 * at higher specificity, past every guard block, the same fix already used
 * for .gsb-3d-views/.gsb-link/.gsb-btn.
 * ===================================================================== */
.gsb-slot{transition:none;cursor:pointer}
.gsb-slot:focus-visible{outline:2px solid var(--gsb-green);outline-offset:2px}
.gsb-slot.gsb-slot-consumed{visibility:hidden;cursor:default}

.gsb .gsb-tabs button,.gsb .gsb-tabs button:focus{
  background-color:#fff;border-color:var(--gsb-line);color:var(--gsb-muted)}
.gsb .gsb-tabs button:hover{background-color:#fff;border-color:var(--gsb-green);color:var(--gsb-green)}
.gsb .gsb-tabs button.active,.gsb .gsb-tabs button.active:hover,
.gsb .gsb-tabs button.active:focus{background-color:var(--gsb-green);border-color:var(--gsb-green);color:#fff}

/* the bay editor's Door/Window kind toggle reuses .gsb-chips - same fix */
.gsb .gsb-chips button,.gsb .gsb-chips button:focus{
  background-color:#fff;border-color:var(--gsb-line);color:var(--gsb-ink)}
.gsb .gsb-chips button:hover{background-color:#f2f6ee;border-color:var(--gsb-green);color:var(--gsb-ink)}
.gsb .gsb-chips button.active,.gsb .gsb-chips button.active:hover,
.gsb .gsb-chips button.active:focus{background-color:var(--gsb-green);border-color:var(--gsb-green);color:#fff}

/* Roof style icon picker (Apex / Tent / Reverse tent) - replaces the plain
   dropdown, which stays in the DOM hidden (.gsb-hidden-select) as the real
   value store. Icons are small stroke-drawn profiles, not photographs, same
   zero-external-asset approach as the Cuprinol swatches and 3D render. */
.gsb-style-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px}
.gsb .gsb-style-picker button{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 4px 8px;border-radius:10px}
.gsb-style-icon{display:block;width:44px;height:30px}
.gsb-style-icon svg{width:44px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.gsb .gsb-style-picker button small{font-size:11.5px;font-weight:600}
.gsb .gsb-style-picker button,.gsb .gsb-style-picker button:focus{
  background-color:#fff;border-color:var(--gsb-line);color:var(--gsb-muted)}
.gsb .gsb-style-picker button:hover{background-color:#f2f6ee;border-color:var(--gsb-green);color:var(--gsb-green)}
.gsb .gsb-style-picker button.active,.gsb .gsb-style-picker button.active:hover,
.gsb .gsb-style-picker button.active:focus{background-color:var(--gsb-green);border-color:var(--gsb-green);color:#fff}

/* Cladding picker - same pattern as the roof style picker, but the "image"
   is the board texture itself (the exact gradients the 3D render and the
   old elevation view already use for vgroove/loglap), not a drawn icon -
   there is nothing to invent, the real texture IS the picture. */
.gsb-cladding-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px}
.gsb .gsb-cladding-picker button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:0 0 10px;border-radius:10px;overflow:hidden;text-align:left}
/* Two images side by side: the face texture (how the finished wall looks)
   and a side-view cross-section (how the boards actually join) - drawn thin
   line-art in the board's own colours, same idea as the roof style icons. */
.gsb-cladding-images{display:flex;width:100%;height:44px;margin-bottom:8px;gap:2px}
.gsb-cladding-swatch{display:block;flex:1 1 60%;min-width:0;border-radius:9px 0 0 0}
.gsb-cladding-cross{display:flex;flex:1 1 40%;min-width:0;align-items:center;justify-content:center;
  background:#f5f7f7;border-radius:0 9px 0 0}
.gsb-cladding-cross svg{width:85%;height:85%}
/* Fixed pixel bands, not the elevation view's percentage-based ones - those
   are tuned for a 260px-tall box and repeat far too fine to read as board
   lines at this swatch's small size. Same colours, sized for ~44px. */
.gsb-cladding-swatch.vgroove{background:repeating-linear-gradient(to bottom,#c7925b 0,#c7925b 9px,#795536 9px,#795536 10px)}
.gsb-cladding-swatch.loglap{background:repeating-linear-gradient(to bottom,#d2a06a 0,#bd8955 8px,#765033 10px,#ebbd83 12px)}
.gsb .gsb-cladding-picker button strong{padding:0 10px;font-size:13px;font-weight:700;line-height:1.25}
.gsb .gsb-cladding-picker button small{padding:0 10px;font-size:11px;font-weight:600;opacity:.75}
.gsb .gsb-cladding-picker button em{padding:0 10px;margin-top:3px;font-style:normal;font-size:12px;font-weight:700}
.gsb .gsb-cladding-picker button,.gsb .gsb-cladding-picker button:focus{
  background-color:#fff;border-color:var(--gsb-line);color:var(--gsb-ink)}
.gsb .gsb-cladding-picker button:hover{background-color:#fff;border-color:var(--gsb-green);color:var(--gsb-ink)}
.gsb .gsb-cladding-picker button.active,.gsb .gsb-cladding-picker button.active:hover,
.gsb .gsb-cladding-picker button.active:focus{border-color:var(--gsb-green);color:var(--gsb-ink);
  box-shadow:0 0 0 2px var(--gsb-green) inset}
.gsb .gsb-cladding-picker button.active em{color:var(--gsb-green)}
@media(max-width:420px){.gsb-cladding-picker{grid-template-columns:1fr}}
@media(max-width:360px){.gsb .gsb-style-picker button small{font-size:10px}}

.gsb .gsb-elevation .gsb-slot,
.gsb .gsb-elevation .gsb-slot:focus,
.gsb .gsb-elevation .gsb-slot:active{
  background-color:#ffffff25;border-color:#654a33;color:#47321f}
.gsb .gsb-elevation .gsb-slot:hover{background-color:#fff7;border-color:#654a33;color:#47321f}
.gsb .gsb-elevation .gsb-slot.has-door,
.gsb .gsb-elevation .gsb-slot.has-door:hover,
.gsb .gsb-elevation .gsb-slot.has-door:focus,
.gsb .gsb-elevation .gsb-slot.has-door:active{
  background-color:#755033;border-color:#4b321f;color:#fff}
.gsb .gsb-elevation .gsb-slot.has-window,
.gsb .gsb-elevation .gsb-slot.has-window:hover,
.gsb .gsb-elevation .gsb-slot.has-window:focus,
.gsb .gsb-elevation .gsb-slot.has-window:active{
  background-color:#bcdcec;color:#233a42}
.gsb-bayeditor{margin-top:16px;padding:14px 16px;border:1px solid var(--gsb-line);
  border-radius:var(--gsb-radius);background:#fff}
.gsb-bayeditor-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px}
.gsb-bayeditor-head strong{font-size:14px}
.gsb-bayeditor-head .gsb-iconbtn{width:30px;height:30px}
.gsb-bayeditor-head .gsb-iconbtn svg{width:14px;height:14px}
.gsb-bayeditor-actions{display:flex;align-items:center;gap:16px;margin-top:4px}
#gsb-bay-kind{margin-bottom:14px}

/* =====================================================================
 * [hidden] must always win. LAST RULE IN THE FILE - do not add display
 * declarations after this.
 *
 * `hidden` only works through the browser's own stylesheet, so ANY author rule
 * that sets `display` beats it. `.gsb-f[hidden]{display:none}` and
 * `.gsb .gsb-f{display:block}` have identical specificity (0,2,0), and the
 * second was written later - so the Cuprinol swatch grid stayed on screen
 * whatever treatment was chosen, because its wrapper is a .gsb-f.
 *
 * The same trap is waiting for every other [hidden] element here: the stage
 * sections, the nav buttons, the clash note, the saved-design message. One
 * blanket rule closes it for all of them.
 * ===================================================================== */
.gsb [hidden],
.gsb [hidden][class]{display:none!important}