.elementor-5075 .elementor-element.elementor-element-50b096ec{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5075 .elementor-element.elementor-element-50b096ec:not(.elementor-motion-effects-element-type-background), .elementor-5075 .elementor-element.elementor-element-50b096ec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F3F3F3;}.elementor-5075 .elementor-element.elementor-element-50b096ec.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-5075 .elementor-element.elementor-element-27b5ab64{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:10;}.elementor-5075 .elementor-element.elementor-element-cd5c882{--display:flex;}.elementor-5075 .elementor-element.elementor-element-1f9e8d99{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5075 .elementor-element.elementor-element-8ad3e61{font-family:"Roboto", Sans-serif;font-size:23px;font-weight:400;color:#B12028;}.elementor-5075 .elementor-element.elementor-element-25e6f98{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:767px){.elementor-5075 .elementor-element.elementor-element-1f9e8d99{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5075 .elementor-element.elementor-element-8ad3e61{font-size:21px;}}@media(min-width:768px){.elementor-5075 .elementor-element.elementor-element-50b096ec{--width:81.255%;}.elementor-5075 .elementor-element.elementor-element-27b5ab64{--width:50%;}.elementor-5075 .elementor-element.elementor-element-1f9e8d99{--width:50%;}}/* Start custom CSS for container, class: .elementor-element-cd5c882 *//* ✅ Fix preview flip jump */
.door-preview-flip-container {
  min-height: 450px; /* or whatever fixed height your preview needs */
  height: auto;
  overflow: hidden;
  position: relative;
}
.door-preview-front,
.door-preview-back {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/* Force parent containers to allow sticky */
.elementor-container,
.elementor-section,
.e-con,
.e-con-inner {
  overflow: visible !important;
}

/* Make the preview column sticky */
.sticky-preview {
  position: sticky;
  top: 72px;
  z-index: 11;
}

/* Optional: disable on mobile */
@media (max-width: 767px) {
  .sticky-preview {
    position: static !important;
  }
}/* End custom CSS */
/* Start custom CSS *//* =========================
   SIDE PANELS — FULL BLOCK
   ========================= */

/* 0) Hide side-panel preview layers during frame change */
.sticky-left-column.suppress-side-panels img[id^="side-"] {
  display: none !important;
}

/* =========================================
   Section headings WITH tabs
   ========================================= */
.swatch-section-title.with-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 19px;           /* match your normal heading size */
  font-weight: 700;
  line-height: 1.3;
}

/* Normalise the heading text when tabs exist */
.swatch-section-title.with-tabs span {
  font-size: inherit;        /* same size as other headings */
  font-weight: inherit;
}



/* =========================================
   Tab buttons (Exterior / Interior)
   ========================================= */
.side-tabs {
  display: flex;
  gap: 6px;
}

.side-tab {
  border: 0;
  background: #fff;
  color: #b91c1c;
  font-weight: 600;
  font-size: 12px;           /* smaller, same as swatch labels */
  line-height: 0.5;
  padding: 3px 8px;          /* tighter padding */
  border-radius: 16px;       /* pill shape */
  cursor: pointer;
  transition: all 0.2s ease;
}

.side-tab:hover {
  background: #fef2f2;
}

.side-tab.is-active {
  background: #b91c1c;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(185,28,28,0.3);
}


/* 1) Overlay containers (overlay glass body.elementor-page-5075s) */
#side-overlay-container-left,
#side-overlay-container-right {
  background: #fff;
  transition: background 0.3s ease;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
  padding: 0.5rem;
}

/* 1a) Attention highlight */
#side-overlay-container-left.overlay-highlight,
#side-overlay-container-right.overlay-highlight {
  animation: overlayBlink 1.8s ease;
}
@keyframes overlayBlink {
  0%   { background: #ffffff; }
  25%  { background: #e6e6e6; } /* medium grey */
  50%  { background: #f6f6f6; } /* soft grey */
  75%  { background: #e6e6e6; }
  100% { background: #ffffff; }
}
@media (prefers-reduced-motion: reduce) {
  #side-overlay-container-left.overlay-highlight,
  #side-overlay-container-right.overlay-highlight {
    animation: none;
    background: #f6f6f6;
  }
}

/* 2) Side panel layout (left/right columns) */
.side-panel-columns{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 2rem;
  align-items: start;
  margin-top: 2rem;
}
.side-panel-columns .swatch-section[data-side]{
  background:#fff;
  border:1.2px solid #e3d1cf;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(177,32,40,0.03);
  padding:1.25rem 1rem 1.5rem;
}

/* 3) Tier-1: side panel type picker (Composite/Flag/Midrail/Glazed) */
.side-panel-type-body.elementor-page-5075 {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.panel-type-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0.5rem 0.5rem 0.25rem 0.5rem;
  transition: border 0.2s;
}
.panel-type-thumb input[type="radio"] { display: none; }
.panel-type-thumb.selected,
.panel-type-thumb input[type="radio"]:checked + .thumb-img {
  border-color: #b9001f;
  box-shadow: 0 0 0 2px #ffdde2;
}
.thumb-img img {
  width: 40px; height: 40px; object-fit: contain;
  display: block; margin-bottom: 0.3em;
}
.thumb-label { font-size: 0.92em; text-align: center; font-weight: 500; }

/* 4) Tier-2: side panel style groups (hidden by default; JS sets [data-active]) */
.side-panel-options { display: none; }
.side-panel-options[data-active="true"] {
  display: block;
  opacity: 1;
  pointer-events: auto;
  filter: none;
}
.side-panel-options[data-active="false"] { display: none; }

/* 5) Overlay chooser grid (dedicated) */
#side-overlay-container-left,
#side-overlay-container-right{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr));
  gap:.5rem; padding:.5rem 0;
}

/* 6) (Temp) Hide interior glass section */
#glass-section-interior { display: none !important; }

/* 7) Preview layers & z-index map */
.preview-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  transition: opacity 0.3s, transform 0.3s;
}
.preview-layer.active {
  opacity: 1 !important;
  visibility: visible !important;
}


/* === INTERIOR GLASS MIRROR FIX === */
.door-preview-flipper {
  transform-style: flat !important;
}

.door-preview-back.preview-stack {
  backface-visibility: visible !important;
  transform: scaleX(-1) !important;
  transform-origin: center !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Mirror all interior glass layers */
.door-preview-back img[id*="glass"] {
  transform: scaleX(-1) !important;
  transform-origin: center !important;
  backface-visibility: visible !important;
  opacity: 1 !important;
}



/* z-index tiers */
#frame-exterior-image,
#frame-interior-image { z-index: 35 !important; }

#door-exterior-image,
#door-interior-image { z-index: 20 !important; }

#glass-exterior-image,
#glass-interior-image,
#glass-backing-image { z-index: 25 !important; }

#side-overlay-glass-image-left,
#side-overlay-glass-image-right,
#side-overlay-glass-image-left-back,
#side-overlay-glass-image-right-back { z-index: 30 !important; }

#side-midrail-image-left,
#side-midrail-image-right,
#side-midrail-image-left-back,
#side-midrail-image-right-back,
#side-flag-image-left,
#side-flag-image-right,
#side-flag-image-left-back,
#side-flag-image-right-back,
#side-composite-image-left,
#side-composite-image-right,
#side-composite-image-left-back,
#side-composite-image-right-back { z-index: 40 !important; }

#handle-exterior-left,
#handle-exterior-right,
#handle-interior-left,
#handle-interior-right { z-index: 110 !important; }

/* mirror helper */
.mirror { transform: scaleX(-1) !important; transform-origin: center center !important; }

/* interior composite fade-in */
#side-composite-image-left-back,
#side-composite-image-right-back {
  opacity: 0; visibility: hidden; transition: opacity 0.3s;
}
#side-composite-image-left-back.active,
#side-composite-image-right-back.active {
  opacity: 1; visibility: visible;
}
/* ensure flag shows when active */
#side-flag-image-left.active,
#side-flag-image-right.active,
#side-flag-image-left-back.active,
#side-flag-image-right-back.active {
  display: block !important; opacity: 1 !important; visibility: visible !important;
}

/* 8) General utilities used within side-panels */
.composite-panel-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  padding: 1rem 0;
}
.swatch-section {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
}
.swatch-section-title {
  background-color: #b12028;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  text-align: left;
}
.swatch-subheading {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
  color: #4a4f54;
}
.swatch-label {
  font-size: 10px;
  font-weight: 400;
  color: #333;
  line-height: 1.1;
  padding: 0 2px;
  margin-top: auto;
  text-align: center;
}

/* show only correct midrail swatches per side */
#midrail-panel-container .panel-swatch { display: none; }
#midrail-panel-container[data-active-side="left"]  .panel-swatch[data-side="left"],
#midrail-panel-container[data-active-side="right"] .panel-swatch[data-side="right"] {
  display: inline-block;
}

/* optional shared layers */
.preview-shared-layers {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 50; pointer-events: none;
}
.preview-shared-layers .preview-layer { opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.preview-shared-layers .preview-layer.active { opacity: 1; visibility: visible; }

/* unified swatch grid base (applies widely; we’ll override for side-panel tiers on mobile) */
.door-swatch-group,
#frame-type-container,
#door-style-container,
#top-glass-container,
.glass-swatch-check,
#composite-panel-container-left,
#composite-panel-container-right,
#side-glass-container,
#side-flag-container,
#side-midrail-container,
.side-panel-options[data-panel-type="glazed"][data-active="true"]{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: .5rem;
  padding: .5rem;
}

/* === BUTTONS / TABS & shared swatch visuals (unchanged) === */
.door-tabs { margin-top: 2rem; }
.door-tab-content { display: none; opacity: 0; transition: all 0.3s ease; }
.door-tab-content.active { display: block; opacity: 1; }

.swatch-tab-buttons {
  display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem;
}
.door-view-btn {
  padding: 10px 24px; border-radius: 35px; font-size: 0.95rem; font-weight: 600;
  color: #4a4f54; background: #f8f8f8; border: 2px solid #ddd;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.3s ease; white-space: nowrap;
}
.door-view-btn:hover { background: #f0f0f0; border-color: #aaa; }
.door-view-btn.active { background: #b12028; border-color: #b12028; color: #fff; }
@media (max-width: 480px){
  .door-view-btn { padding: 8px 20px; font-size: 0.85rem; }
}

/* hide labels inside frame swatches */
.door-swatch-frame .door-swatch .swatch-label,
.door-swatch-frame .door-swatch span { display: none !important; }

/* generic swatch card look */
.door-swatch,
.glass-swatch,
#frame-type-container .door-swatch,
#frame-type-container label,
#door-style-container label,
#top-glass-container label,
.panel-swatch {
  height: 140px; padding: 0.25rem; border: 1px solid #ccc; border-radius: 6px;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; font-size: 10px; line-height: 1.1; margin-top: auto;
  transition: all 0.2s ease; cursor: pointer;
}
.door-swatch img,
.glass-swatch img,
#frame-type-container .door-swatch img,
#frame-type-container label img,
#door-style-container label img,
#top-glass-container label img,
.panel-swatch img {
  width: 60px; height: 120px; object-fit: contain; margin-bottom: 4px;
}
.door-swatch:hover,
.glass-swatch:hover,
#frame-type-container label:hover,
#door-style-container label:hover,
#top-glass-container label:hover,
.panel-swatch:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); border-color: #4a4f54; }
.door-swatch.selected,
.glass-swatch.selected,
#frame-type-container label.selected,
#door-style-container label.selected,
#top-glass-container label.selected,
.panel-swatch.selected,
#handle-style-container-exterior .handle-style-swatch.selected,
#handle-style-container-interior .handle-style-swatch.selected,
#handle-model-container-exterior .handle-model-swatch.selected,
#handle-model-container-interior .handle-model-swatch.selected,
#handle-colour-container-exterior .handle-colour-swatch.selected,
#handle-colour-container-interior .handle-colour-swatch.selected {
  border: 2px solid #4a4f54; box-shadow: 0 0 0 2px rgba(74, 79, 84, 0.2);
}
.door-swatch input[type="radio"],
.glass-swatch input[type="radio"],
.panel-swatch input[type="radio"],
#frame-type-container label input[type="radio"],
#door-style-container label input[type="radio"],
#top-glass-container label input[type="radio"] { display: none; }

/* Collection grid (kept) */
.collection-swatch-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2rem;
  width: 100%; margin: 0 auto 1.5rem auto; box-sizing: border-box;
}
.collection-swatch{
  width: 100%; min-width: 0; min-height: 250px;
  display: flex; flex-direction: column; align-items: center;
  border: 1.5px solid #ccc; border-radius: 10px; background: #fff;
  padding: 1.7rem 1.1rem 1.1rem 1.1rem; gap: .5rem; transition: all .25s;
  text-align: center; position: relative; box-sizing: border-box; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.collection-swatch img{
  width: 120px; height: 120px; object-fit: cover; border-radius: 10px; flex-shrink: 0;
  margin-bottom: .7em; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.collection-swatch .swatch-label{ font-size: 1.09rem; font-weight: 600; color: #222; line-height: 1.16; margin-bottom: .13em; letter-spacing: .01em; }
.collection-swatch .swatch-desc{ font-size: .95em; font-weight: 400; color: #444; line-height: 1.32; margin: 0; word-break: break-word; max-width: 98%; }
.collection-swatch input[type="radio"]{ display: none; }
.collection-swatch:hover, .collection-swatch.selected{
  border: 2px solid #4a4f54; background: #f8f8fb; box-shadow: 0 2px 10px rgba(74, 79, 84, 0.10);
}
@media (max-width: 600px){
  .collection-swatch-group { gap: 1rem; }
  .collection-swatch { padding: 1rem .5rem; }
}

/* Hinge group (kept) */
.hinge-body.elementor-page-5075-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  width: 100%; margin: 0 auto; max-width: 900px; justify-items: stretch; align-items: stretch;
}
.hinge-option{
  display: flex; flex-direction: row; align-items: center; gap: 1.5rem;
  width: 100%; min-width: 0; max-width: 100%; padding: 1.4rem 1.2rem;
  border: 2px solid #ddd; border-radius: 10px; background:#fff; cursor: pointer;
  box-sizing: border-box; transition: all .3s; font-size: 1.1rem;
}
.hinge-option img{ width: 70px !important; height: 70px !important; border-radius: 8px !important; flex-shrink: 0 !important; object-fit: cover !important; }
.hinge-label{ font-weight: 600 !important; font-size: 1.06rem !important; line-height: 1.4 !important; text-align: left !important; }
.hinge-option input[type="radio"]{ display: none !important; }
.hinge-option.selected{ border-color: #b12028 !important; background-color: #fff5f5 !important; }
.swatch-section.hinge-section .hinge-body.elementor-page-5075-group{ display: flex !important; flex-wrap: wrap !important; gap: 12px !important; max-width: none !important; }
.swatch-section.hinge-section .hinge-body.elementor-page-5075-group > .hinge-option{ flex: 1 1 calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; margin: 0 !important; width: auto !important; grid-column: auto !important; }
@media (max-width: 9999px){
  .swatch-section.hinge-section .hinge-body.elementor-page-5075-group{ display: flex !important; }
}

/* Right composite container (kept) */
#composite-panel-container-right { display: block !important; height: auto !important; min-height: 100px; }
#composite-panel-container-right .panel-swatch { display: inline-block !important; vertical-align: top; margin: 5px; }

/* Utility flash */
#backing-glass-wrapper.flash-border { outline: 3px solid #FFD700; transition: outline 0.3s ease-in-out; }

/* Side-panel section visibility helpers */
body[data-sidepanels="none"]  .swatch-section.side-panels-section { display: none !important; }
.swatch-section.side-panels-section { display: none; }
body[data-sidepanels="both"]  .swatch-section.side-panels-section,
body[data-sidepanels="left"]  .swatch-section.side-panels-section,
body[data-sidepanels="right"] .swatch-section.side-panels-section { display: block; }
body[data-sidepanels="left"]  .side-panel-columns .swatch-section[data-side="left"],
body[data-sidepanels="right"] .side-panel-columns .swatch-section[data-side="right"]{
  flex: 1 1 100% !important; max-width: 100% !important;
}
.swatch-section.side-panels-section[hidden],
.swatch-section[data-side][hidden]{ display: none !important; }
.side-panel-columns .swatch-section[data-side]:not([hidden]){ flex: 1 1 100%; max-width: 100%; }

/* Compact padding for these tiers */
.side-panel-options[data-panel-type="flag"],
.side-panel-options[data-panel-type="midrail"] { padding: 0 !important; }

/* Loading overlay */
.cfg-loading *[data-cfg-disable],
.cfg-loading input, .cfg-loading button, .cfg-loading select { pointer-events: none !important; }
.cfg-preview-lock { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.6); backdrop-filter: blur(3px); z-index: 9999; text-align: center; font: 600 14px/1.4 system-ui,-apple-system, Segoe UI, Roboto, Arial; }
.cfg-preview-lock.show { display: flex; }
.cfg-preview-lock .msg { padding: 10px 14px; border-radius: 8px; background: rgba(0,0,0,.65); color:#fff; }

/* Unified swatch image sizing variables */
:root{
  --swatch-img-h: 120px;
  --swatch-card-h: 180px;
}
.door-swatch,
.glass-swatch,
.panel-swatch,
#frame-type-container label,
#door-style-container label,
#top-glass-container label { height: var(--swatch-card-h) !important; }
.door-swatch .thumb-img,
.panel-swatch .thumb-img,
.side-panel-type-body.elementor-page-5075 .panel-type-thumb .thumb-img {
  min-height: calc(var(--swatch-img-h) + 10px) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.door-swatch img,
.glass-swatch img,
.panel-swatch img,
#frame-type-container .door-swatch img,
#frame-type-container label img,
#door-style-container label img,
#top-glass-container label img,
.side-panel-type-body.elementor-page-5075 .panel-type-thumb .thumb-img img {
  width: auto !important; max-width: 100% !important;
  height: var(--swatch-img-h) !important; object-fit: contain !important; display: block !important;
}
.panel-type-thumb .thumb-img img { width: auto !important; height: var(--swatch-img-h) !important; }
.panel-type-thumb .swatch-label,
.door-swatch .swatch-label,
.panel-swatch .swatch-label { margin-top: 6px; }

/* Section headers & divider (matches your theme) */
.handle-configurator-section .handle-section-heading{
  font-size: 1.04rem;
  font-weight: 600;
  color: #b12028;
  margin: 0.5em 0 0.4em 0;
  letter-spacing: 0.01em;
}
.handle-configurator-section .handle-divider{
  border: none;
  border-top: 1px solid #e3d1cf;
  margin: 0.7em 0 0.9em 0;
}

/* Handle swatch grids */
.handle-style-group,
.handle-model-group,
.handle-colour-group{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: .5rem;
  padding: .5rem;
}

/* Force 3-across on mobile (side-panel tiers remain 2 as per earlier rules) */
@media (max-width: 640px){
  .handle-style-group,
  .handle-model-group,
  .handle-colour-group{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Handle swatch cards */
.handle-style-swatch,
.handle-model-swatch,
.handle-colour-swatch{
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: .5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color .2s, box-shadow .2s, transform .06s;
  min-height: 140px;                /* consistent with your other swatches */
}

/* Press feedback */
.handle-style-swatch:active,
.handle-model-swatch:active,
.handle-colour-swatch:active{ transform: scale(.99); }

/* Images inside handle swatches */
.handle-style-swatch img,
.handle-model-swatch img,
.handle-colour-swatch img{
  width: 80px;
  height: auto;
  object-fit: contain;
  margin-bottom: .25rem;
}

/* Labels */
.handle-style-swatch span,
.handle-model-swatch span,
.handle-colour-swatch span{
  font-size: .75rem;
  color: #333;
  line-height: 1.2;
}

/* Hide radios */
.handle-style-swatch input[type="radio"],
.handle-model-swatch input[type="radio"],
.handle-colour-swatch input[type="radio"]{ display: none; }

/* Hover/Focus */
.handle-style-swatch:hover,
.handle-model-swatch:hover,
.handle-colour-swatch:hover{
  border-color: #4a4f54;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.handle-style-swatch:focus-visible,
.handle-model-swatch:focus-visible,
.handle-colour-swatch:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(74,79,84,.25);
}

/* Selected */
.handle-style-swatch.selected,
.handle-model-swatch.selected,
.handle-colour-swatch.selected{
  border: 2px solid #4a4f54;
  box-shadow: 0 0 0 2px rgba(74,79,84,.2);
}

/* Disabled state (if you ever add it) */
.handle-style-swatch.is-disabled,
.handle-model-swatch.is-disabled,
.handle-colour-swatch.is-disabled{
  opacity: .5;
  pointer-events: none;
}

/* Optional: make tiny labels wrap sensibly on narrow screens */
@media (max-width: 360px){
  .handle-style-swatch span,
  .handle-model-swatch span,
  .handle-colour-swatch span{
    word-break: break-word;
  }
}
/* Softer handle subheadings (replaces the 'Step x' feel) */
.handle-subheading{
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: .3rem 0 .25rem;
}

/* Optional: make the thin dividers subtler or remove them */
.handle-divider{ display: none; } /* or keep and lighten if you prefer */

/* === FORCE 3-ACROSS FOR FRAME TYPE + DOOR STYLE ON MOBILE === */
/* (side-panel tiers remain 2 as set elsewhere) */
@media (max-width: 640px){

  /* Frame Type */
  #frame-type-container,
  #frame-type-container.door-swatch-group,
  #frame-type-container .door-swatch-group{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .6rem !important;
  }

  /* Door Style (container sometimes lacks the class until JS injects) */
  #door-style-container,
  #door-style-container .door-swatch-group{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .6rem !important;
  }

  /* Optional: make thumbs a touch tighter so 3 fit nicely */
  .frame-type-swatch-wrapper .door-swatch,
  .door-style-section .door-swatch{
    padding: .35rem !important;
  }
  .frame-type-swatch-wrapper .door-swatch img,
  .door-style-section .door-swatch img{
    height: 100px !important; /* was 120px; gives breathing room for 3-up */
  }

  /* EXPLICITLY keep side-panel tiers at 2-up */
  .side-panels-section .side-panel-type-body.elementor-page-5075{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .6rem !important;
  }
  .side-panels-section .side-panel-options .door-swatch-group{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .6rem !important;
  }
}
/* Show Composite by default (win against legacy hides) */
.side-panel-type-body.elementor-page-5075 label.panel-type-thumb[data-type="composite"] {
  display: inline-flex !important;
}

/* Only hide Composite when JS adds .is-hidden */
.side-panel-type-body.elementor-page-5075 label.panel-type-thumb[data-type="composite"].is-hidden {
  display: none !important;
}


/* =========================
   MOBILE GRID RULES
   ========================= */

/* Everything 3-up on mobile by default... */
@media (max-width: 640px){
  .door-swatch-group{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ...except SIDE-PANEL TIERS which stay 2-up */
@media (max-width: 640px){
  /* Tier-1 type body.elementor-page-5075 (left & right) */
  .side-panel-type-body.elementor-page-5075{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .6rem !important;
  }
  /* Tier-2 style swatches inside the side-panels section */
  .side-panels-section .side-panel-options .door-swatch-group{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .6rem !important;
  }
}

}

/* ==== Mobile Bottom Bar + Preview Drawer ==== */
:root{
  --brand:#b12028; --ink:#202327; --muted:#6b7280;
  --tabbar-bg:rgba(255,255,255,.94);
  --tabbar-border:rgba(30,41,59,.08);
  --tabbar-shadow:0 -10px 24px rgba(0,0,0,.10);
  --tabbar-h:68px; /* JS updates */
}

/* Tabbar */
.builder-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:10050;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:var(--tabbar-bg);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--tabbar-border);
  box-shadow:var(--tabbar-shadow);
}
@media (min-width:800px){ .builder-tabbar{ display:none; } }

.builder-tabbar .tabbar-item{
  appearance:none; border:0; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; min-height:58px; padding:8px 6px; border-radius:14px;
  color:var(--ink); font:600 12px/1.1 system-ui,-apple-system,Segoe UI,Roboto;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform .05s ease, background .2s ease, color .2s ease;
}
.builder-tabbar .tabbar-item:active{ transform:scale(.98); }
.builder-tabbar .tabbar-item:focus-visible{
  outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 35%, white);
}
.builder-tabbar .icon{ width:22px; height:22px; fill:currentColor; }
.builder-tabbar .tabbar-primary{ background:var(--brand); color:#fff; border-radius:16px; padding:10px 8px; }
.builder-tabbar .tabbar-primary:active{ background:color-mix(in oklab, var(--brand) 85%, black); }
.builder-tabbar .tabbar-item.is-active{
  background:color-mix(in oklab, var(--brand) 12%, white); color:var(--brand);
}
.builder-tabbar .badge{
  position:absolute; transform:translate(12px,-14px);
  min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  background:#fff; color:var(--brand); font:700 11px/18px system-ui,-apple-system,Segoe UI,Roboto;
  border:1px solid color-mix(in oklab, var(--brand) 40%, white);
}
@media (max-width:799.98px){
  body{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}

/* Drawer (stops at bar) */
.door-preview-slideout{
  position:fixed; left:0; right:0; top:0; bottom:var(--tabbar-h);
  z-index:10000; pointer-events:none; visibility:hidden;
}
.door-preview-slideout[aria-hidden="false"]{ pointer-events:auto; visibility:visible; }
.door-preview-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .25s ease;
}
.door-preview-slideout[aria-hidden="false"] .door-preview-backdrop{ opacity:1; }
.door-preview-panel{
  position:absolute; left:0; right:0; bottom:0;
  max-height:calc(100dvh - var(--tabbar-h));
  background:#fff; border-radius:16px 16px 0 0;
  box-shadow:0 -16px 40px rgba(0,0,0,.22);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  overflow:auto; overscroll-behavior:contain;
  padding-bottom:max(8px, env(safe-area-inset-bottom));
}
.door-preview-slideout[aria-hidden="false"] .door-preview-panel{ transform:translateY(0); }
.door-preview-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem; border-bottom:1px solid #eee;
}
.door-preview-close{ background:transparent; border:0; font-size:1.25rem; line-height:1; cursor:pointer; }
.door-preview-slideout-content{ padding:.9rem 1rem; overflow:auto; -webkit-overflow-scrolling:touch; }

body.preview-open, body.no-scroll{ overflow:hidden; }

@media (min-width:800px){
  .door-preview-slideout{ display:none !important; }
  .builder-tabbar{ display:none !important; }
}

/* Reset popup must sit above bar+drawer */
.reset-popup-overlay{ z-index:10060 !important; }

.builder-checkout-panel .builder-summary { display: none !important; }


/* =======================================================
   MAIN PREVIEW + CHECKOUT (final refined styles)
   ======================================================= */

/* ---------- Preview card & viewport ---------- */
.sticky-left-column .sticky-preview-wrapper{
  display: grid;
  place-items: center;
  padding: 8px 0;
}

/* The viewport itself: no bg/border; enforce containment */
.door-preview-flip-container{
  width: 100%;
  max-width: 280px;               /* sized down so it doesn't dominate */
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;               /* prevent any layer overflow */
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
@media (max-width: 420px){
  .door-preview-flip-container{ max-width: 260px; }
}

/* Make every inner level fill the viewport exactly */
.door-preview-flipper,
.door-preview-front,
.door-preview-back,
.preview-stack{
  width: 100%;
  height: 100%;
}

/* Flip animation */
.door-preview-flipper{
  position: relative;
  transition: transform .8s ease;
  transform-style: preserve-3d;
}
.door-preview-flip-container.flipped .door-preview-flipper{ transform: rotateY(180deg); }

.door-preview-front,
.door-preview-back{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.door-preview-back{ transform: rotateY(180deg); }
.door-preview-flip-container.flipped .door-preview-front,
.door-preview-flip-container:not(.flipped) .door-preview-back{
  display: none !important;
}

/* Image layers: truly contained */
.preview-stack > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;            /* <— key: never overflow */
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.preview-stack > img.active{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  z-index: 50;
}

/* Mirror helper (single declaration) */
.mirror{ transform: scaleX(-1) !important; transform-origin: center center !important; }

/* ---------- View tabs & reset link ---------- */
.door-preview-controls{
  margin: 10px 0 12px;
  text-align: center;
}
.preview-toolbar{
  display: flex; justify-content: center; align-items: center;
  gap: 12px; margin: 0;
}

.view-tabs{
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #ddd;
  border-radius: 6px;             /* slightly rounded */
  overflow: hidden;
  background: #fff;
}
.view-tabs .view-tab{
  padding: 8px 16px;              /* a touch taller */
  border: 0; background: transparent;
  font-weight: 600; font-size: 14px;
  color: #4b5563; line-height: 1.1; white-space: nowrap;
}
.view-tabs .view-tab + .view-tab{ border-left: 1px solid #ddd; }
.view-tabs .view-tab:hover{ background: #f7f7f8; }
.view-tabs .view-tab.active{
  background: #b12028; color: #fff;
}



/* ---------- Checkout panel (light green) ---------- */
.builder-checkout-panel{
  background: #f5fdf6;                /* light green */
  border: 1px solid #e1f1e1;
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}
.checkout-card{ background: transparent; border: 0; padding: 0; box-shadow: none; }
.checkout-card > * + *{ margin-top: 12px; }

/* Price + CTA row */
.price-cta-row{
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 12px; margin: 0;
}
@media (max-width: 520px){ .price-cta-row{ grid-template-columns: 1fr; } }

.price-inc{ font-size: clamp(22px, 4.2vw, 28px); line-height: 1.1; }

/* Add to Basket — GREEN now */
#cart-submit.btn-primary{
  min-width: 180px;
  border-radius: 6px;
  background: #2da44e;                /* green */
  border: 1px solid #2da44e;
  color: #fff;
  font-weight: 600;
  padding: 10px 20px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
#cart-submit.btn-primary:hover{
  background: #238e41;
  border-color: #238e41;
}
@media (max-width: 520px){ #cart-submit{ width: 100%; } }

/*preview Text*/
/* View announcer — centered, green, with a subtle pulse on change */
/* Stronger, greener pulse for the view announcer */
.view-announcer{
  display:flex; justify-content:center; align-items:center;
  gap:.6rem; margin:.6rem 0 .95rem; text-align:center;
  font-size:14px; line-height:1.2; position:relative;
}

.view-pill{
  position:relative;
  padding:.34rem .8rem;
  border-radius:999px;
  font-weight:800; letter-spacing:.2px;
  background:#2da44e;
  color:#fff;
  border:1px solid #238e41;
  box-shadow:0 0 0 4px rgba(45,164,78,.18);
  will-change:transform, box-shadow;
}

.view-announcer.view-announce-pop .view-pill{
  animation:
    pillBang 1.1s cubic-bezier(.2,.8,.2,1),
    pillGlow .9s ease-out;
}

/* expanding ripple behind the pill */
.view-pill::after{
  content:"";
  position:absolute; inset:-4px;
  border-radius:999px;
  border:2px solid rgba(45,164,78,.0);
  transform:scale(0.9);
  opacity:0; pointer-events:none;
}
.view-announcer.view-announce-pop .view-pill::after{
  animation:pillRipple 0.9s ease-out forwards;
}

/* descriptive text a touch bolder & greener */
.view-desc{ color:#1f3d29; font-weight:700; }

/* Keyframes */
@keyframes pillBang{
  0%   { transform:scale(1);   box-shadow:0 0 0 0 rgba(45,164,78,.28); }
  35%  { transform:scale(1.08); box-shadow:0 0 0 10px rgba(45,164,78,.00); }
  70%  { transform:scale(1.03); }
  100% { transform:scale(1);   box-shadow:0 0 0 0 rgba(45,164,78,.00); }
}
@keyframes pillGlow{
  0%   { text-shadow:0 0 0 rgba(35,142,65,0); }
  30%  { text-shadow:0 0 10px rgba(35,142,65,.45); }
  100% { text-shadow:0 0 0 rgba(35,142,65,0); }
}
@keyframes pillRipple{
  0%   { transform:scale(0.9); opacity:.0; border-color:rgba(45,164,78,.0); }
  10%  { opacity:.85; border-color:rgba(45,164,78,.45); }
  100% { transform:scale(1.25); opacity:0; border-color:rgba(45,164,78,0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .view-announcer.view-announce-pop .view-pill{ animation:none; }
  .view-announcer.view-announce-pop .view-pill::after{ animation:none; }
}


/* ---------- Install choice (segmented) ---------- */
/* remove default fieldset box */
.install-chooser{ border: 0; margin: 0; padding: 0; }

.install-chooser{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.install-chooser .seg{
  display: grid; place-items: center;
  min-height: 42px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #1f2937; font-weight: 600; font-size: 14px;
  padding: 8px 10px;
  text-align: center;
}
.install-chooser .seg input{ display: none; }
.install-chooser .seg span{ display: block; width: 100%; }
.install-chooser .seg:has(input:checked){
  border-color: #b12028;
  box-shadow: 0 0 0 2px rgba(177,32,40,.18);
}

/* ---------- Postcode checker (slightly taller input) ---------- */
.install-checker{
  background: #eaf9ef;
  border: 1px dashed #cfe9d9;
  border-radius: 10px;
  padding: 12px;
}
.postcode-row{
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; align-items: center; margin-top: 4px;
}
.postcode-input{
  height: 44px;                         /* taller */
  border-radius: 6px;
  border: 1px solid #cfe9d9; background: #fff;
  padding: 10px 12px; font-size: 15px;
}
#check-install.btn-dark{
  height: 44px;                         /* match */
  border-radius: 6px;
  padding: 0 16px; font-weight: 600;
  background: #111; color: #fff; border: 0;
  cursor: pointer;
}
.install-status{ margin-top: 8px; font-weight: 600; }

/* ---------- Hide summary block ---------- */
.builder-checkout-panel .builder-summary{ display: none !important; }
/* ==== Fix: make the bottom mobile menu solid, not transparent ==== */
.builder-tabbar,
.builder-sticky-bottom-bar{
  background: #ffffff !important;          /* solid white */
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -8px 20px rgba(0,0,0,.08) !important;
  -webkit-backdrop-filter: none !important;/* kill blur that creates see-through */
  backdrop-filter: none !important;
  opacity: 1 !important;                   /* guard against inherited opacity */
  z-index: 10050 !important;               /* keep above everything */
}

/* Make sure buttons/text are readable */
.builder-tabbar .tabbar-item,
.builder-sticky-bottom-bar .tabbar-item{
  color: #1f2937 !important;
}
.builder-tabbar .tabbar-primary,
.builder-sticky-bottom-bar .tabbar-primary{
  background: #b12028 !important;
  color: #fff !important;
}

/* Safety: the preview drawer must stop at the bar so it doesn't overlay it */
#door-preview-slideout{
  bottom: var(--tabbar-h) !important;
}
#door-preview-slideout .door-preview-backdrop{
  bottom: var(--tabbar-h) !important;
}

/* ===== MOBILE COMPACT MODE (applies to all swatch sections) ===== */
@media (max-width: 768px){
  /* Trim the outer white card */
  .swatch-section{
    padding: 8px 6px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 14px !important;   /* keep vertical rhythm tighter */
  }

  /* Keep the red header but make it snug */
  .swatch-section-title{
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  /* Kill inner padding on generic grids so we don't double-pad */
  .door-swatch-group,
  #frame-type-container,
  #door-style-container,
  #top-glass-container,
  .glass-swatch-check{
    padding: 0 !important;
    gap: 8px !important;
  }
}
/* ===== COLLECTIONS: mobile-specific layout ===== */
@media (max-width: 768px){
  .collection-swatch-group{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    padding: 0 !important; /* remove inner gutter */
  }
  .collection-swatch{
    padding: 10px 8px !important;
    border-radius: 12px !important;
    min-height: 0 !important;  /* let content set height */
  }
  /* Title → Image → Blurb already handled by markup; just size image */
  .collection-swatch img{
    width: 100% !important;
    height: 110px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }
  .collection-swatch .swatch-label{
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }
  .collection-swatch .swatch-desc{
    font-size: .9rem !important;
    line-height: 1.3 !important;
  }
}
@media (max-width: 768px){
  .swatch-section-title{
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
}
/* ===== COLLECTIONS: desktop sizing ===== */
@media (min-width: 769px){
  .collection-swatch-group{
    gap: 2rem;
  }

  .collection-swatch{
    padding: 1rem;                /* less padding so image can grow */
    min-height: 320px;            /* taller card */
  }

  .collection-swatch img{
    width: 100% !important;
    height: 220px !important;     /* much larger thumbnail */
    object-fit: cover !important; /* fills the card neatly */
    border-radius: 10px;
    margin-bottom: .7em;
  }

  .collection-swatch .swatch-label{
    font-size: 1.2rem;
    font-weight: 600;
  }

  .collection-swatch .swatch-desc{
    font-size: 1rem;
    line-height: 1.35;
  }
}
/* Door Lock grid: stretch cards to equal height per row */
#door-lock-container-exterior,
#door-lock-container-interior {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; /* wider cards */
  gap: 1rem !important;
  padding: 0.75rem !important;
  align-items: stretch !important; /* <— force equal height */
}

/* Door Lock cards */
#door-lock-container-exterior .door-lock-swatch,
#door-lock-container-interior .door-lock-swatch {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: center !important;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  padding: 1rem;
  transition: border .2s, box-shadow .2s;

  /* stretch card to full row height */
  height: 100% !important;
}

/* image */
#door-lock-container-exterior .door-lock-swatch img,
#door-lock-container-interior .door-lock-swatch img {
  width: 90px;
  height: auto;
  object-fit: contain;
  margin-bottom: .5rem;
}

/* title */
#door-lock-container-exterior .door-lock-swatch .swatch-label,
#door-lock-container-interior .door-lock-swatch .swatch-label {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .25rem;
  color: #222;
  line-height: 1.2;
  white-space: normal;
}

/* description (always visible, wraps naturally) */
#door-lock-container-exterior .door-lock-swatch .desc,
#door-lock-container-interior .door-lock-swatch .desc {
  font-size: .85rem;
  color: #444;
  line-height: 1.4;
  margin-top: auto; /* keeps spacing tidy */
  white-space: normal;
}

/* =========================================
   1) Letterbox & Doorknob — mobile 3-up, no gaps
   (overrides your fixed 110px grid on phones)
   ========================================= */
@media (max-width: 640px){
  #letterbox-model-container-exterior,
  #letterbox-colour-container-exterior,
  #letterbox-model-container-interior,
  #letterbox-colour-container-interior,
  #doorknob-model-container-exterior,
  #doorknob-colour-container-exterior{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* exactly 3 columns */
    gap: 10px !important;
    padding: 6px 0 !important;
    justify-content: stretch !important;  /* fill full row */
  }

  /* make cards fluid inside their 1fr cells */
  #letterbox-model-container-exterior .door-swatch,
  #letterbox-colour-container-exterior .door-swatch,
  #letterbox-model-container-interior .door-swatch,
  #letterbox-colour-container-interior .door-swatch,
  #doorknob-model-container-exterior .door-swatch,
  #doorknob-colour-container-exterior .door-swatch{
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    position: relative; /* for tick badge overlay */
  }

  /* keep images sensible without increasing card height */
  #letterbox-model-container-exterior .door-swatch img,
  #letterbox-colour-container-exterior .door-swatch img,
  #letterbox-model-container-interior .door-swatch img,
  #letterbox-colour-container-interior .door-swatch img,
  #doorknob-model-container-exterior .door-swatch img,
  #doorknob-colour-container-exterior .door-swatch img{
    width: 80%;        /* scale nicely within 1fr tiles */
    max-width: 100px;
    height: auto;
    object-fit: contain;
  }
}

/* =========================================
   2) Universal green tick for ANY selected card
   (bottom-right overlay; no layout change)
   ========================================= */

/* ensure all selectable labels can host the overlay without shifting layout */
.door-swatch,
.glass-swatch,
.panel-swatch,
#frame-type-container label,
#door-style-container label,
#top-glass-container label,
.handle-style-swatch,
.handle-model-swatch,
.handle-colour-swatch,
.door-lock-swatch,
.hinge-option,
.collection-swatch{
  position: relative; /* safe if already set */
}

/* draw tick on selection; relies on your JS adding .selected */
.door-swatch.selected::after,
.glass-swatch.selected::after,
.panel-swatch.selected::after,
#frame-type-container label.selected::after,
#door-style-container label.selected::after,
#top-glass-container label.selected::after,
.handle-style-swatch.selected::after,
.handle-model-swatch.selected::after,
.handle-colour-swatch.selected::after,
.door-lock-swatch.selected::after,
.hinge-option.selected::after,
.collection-swatch.selected::after{
  content: "✓";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #2da44e;      /* green */
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff; /* white ring so it reads on any bg */
  pointer-events: none;       /* purely decorative */
}

/* Door Lock grid fix */
#door-lock-container-exterior {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem;
}

/* Ensure the swatch cards don’t stretch too tall */
#door-lock-container-exterior .door-swatch {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Mobile override: force at least 2 per row */
@media (max-width: 640px) {
  #door-lock-container-exterior {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Default stays as-is; switch to vertical layout on smaller screens */
@media (max-width: 1100px){
  .hinge-section .hinge-body.elementor-page-5075-group{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
  }
  .hinge-section .hinge-option{
    flex-direction: column !important;           /* image on top */
    align-items: center !important;
    text-align: center !important;
    padding: 14px !important;
  }
  .hinge-section .hinge-option img{
    width: 120px !important; height: 120px !important;
    margin: 0 0 10px 0 !important; border-radius: 10px !important;
    object-fit: cover !important;
  }
  .hinge-section .hinge-label{
    font-size: 1rem !important; font-weight: 700 !important; line-height: 1.3 !important;
  }
}
@media (max-width: 640px){
  .hinge-section .hinge-body.elementor-page-5075-group{ grid-template-columns: 1fr 1fr !important; }
  .hinge-section .hinge-option img{ width: 90px !important; height: 90px !important; }
}

/* One style for ALL preview buttons */
.door-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;        /* much smaller */
  min-height: 28px;         /* shorter height */
  border-radius: 4px;       /* tighter corners */

  background: #b12028;
  border: 1px solid #b12028;
  color: #fff;

  font-weight: 500;         /* lighter than bold */
  font-size: 12px;          /* smaller text */
  line-height: 1;           /* no extra spacing */
  cursor: pointer;
  white-space: nowrap;

  transition: background .2s ease, border-color .2s ease, transform .05s ease;
}

.door-preview-btn:hover {
  background: #9b1b22;
  border-color: #9b1b22;
}

.door-preview-btn:active {
  transform: translateY(1px);
}

.door-preview-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(177,32,40,.25);
}

/* Row layout */
.preview-toolbar {
  display: flex;
  gap: 6px;                /* tighter gap */
  flex-wrap: wrap;
}

@media (max-width:480px){
  .door-preview-btn {
    flex: 1 1 100%;        /* full width on mobile */
  }
}

/* Hide all swatch prices by default */
.swatch-price { display: none; }

/* Show them only when the body has this class */
.show-swatch-prices .swatch-price { display: inline-block; }

/* Style the Remove (X) option */
.letterbox-colour-swatch.remove-option,
.doorknob-colour-swatch.remove-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
}

.letterbox-colour-swatch.remove-option .remove-thumb img,
.doorknob-colour-swatch.remove-option .remove-thumb img {
  width: 50px;   /* ⬅️ bigger size */
  height: 50px;
  object-fit: contain;
  margin-bottom: 6px;
  filter: invert(20%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(90%) contrast(120%);
  /* ⬆️ CSS filter makes the ❌ icon red */
}

.letterbox-colour-swatch.remove-option .swatch-label,
.doorknob-colour-swatch.remove-option .swatch-label {
  font-size: 15px;
  font-weight: bold;
  color: #c00; /* bright red text */
}
/* ===== Remove (X) option for Letterboxes & Door Knobs ===== */
.letterbox-colour-swatch.remove-option,
.doorknob-colour-swatch.remove-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
}

.letterbox-colour-swatch.remove-option .remove-thumb img,
.doorknob-colour-swatch.remove-option .remove-thumb img {
  width: 50px;   /* Bigger X icon */
  height: 50px;
  object-fit: contain;
  margin-bottom: 6px;
  filter: invert(20%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(90%) contrast(120%);
  /* Forces red cross */
}

.letterbox-colour-swatch.remove-option .swatch-label,
.doorknob-colour-swatch.remove-option .swatch-label {
  font-size: 15px;
  font-weight: bold;
  color: #c00; /* Bright red text */
}/* End custom CSS */