/* Calculator runtime + SSR shared styles */
/* Tokens */
.calc-ssr{
  --calc-font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --calc-font-size:14px;
  --calc-line:1.4;

  --calc-label-font-size:14px;
  --calc-label-font-weight:500;
  --calc-label-color:var(--calc-color-text);
  --calc-help-font-size:12px;
  --calc-error-font-size:12px;
  --calc-output-font-size:16px;
  /* Normal weight so display-format HTML controls emphasis (<b>, plain text, etc.) */
  --calc-output-font-weight:400;

  --calc-color-text:#202223;
  --calc-color-muted:#6D7175;
  --calc-color-bg:#fff;
  --calc-color-border:#C9CCCF;
  --calc-color-card:#fff;
  --calc-accent:#2C6ECB;
  --calc-accent-soft-bg:rgba(44,110,203,0.12);
  --calc-color-error:#D82C0D;
  --calc-disabled-opacity:0.45;
  --calc-calendar-disabled-opacity:0.35;

  --calc-radius:8px;
  --calc-radius-lg:12px;
  --calc-container-border-color:#E3E3E3;
  --calc-container-border-width:1px;
  --calc-container-radius:var(--calc-radius-lg);
  --calc-container-padding:var(--calc-space-400);

  --calc-space-50:2px;
  --calc-space-100:4px;
  --calc-space-200:8px;
  --calc-space-300:12px;
  --calc-space-400:16px;

  /* Vertical gap: between wrapped rows of options in .calc-ssr__options, and between major sections in .calc-ssr (default 0; labels/padding usually supply vertical rhythm). */
  --calc-option-gap:0px;
  /* Horizontal gap: between options on the same row; width calcs subtract the right number of gutters per row (e.g. 4×25% → 3 gaps). */
  --calc-option-gap-x:5px;
  --calc-option-padding-y:0px;

  --calc-input-height:40px;
  /* +/- quantity stepper: square, matches input row height unless overridden */
  --calc-qty-btn-size:var(--calc-input-height);
  --calc-control-bg:#fff;
  --calc-control-text:var(--calc-color-text);
  --calc-control-border:var(--calc-color-border);
  --calc-control-radius:var(--calc-radius);
  --calc-control-padding-y:10px;
  --calc-control-padding-x:12px;
  --calc-focus-ring-size:2px;
  --calc-focus-ring-color:rgba(44,110,203,0.15);
  --calc-focus-ring-shadow:0 0 0 var(--calc-focus-ring-size) var(--calc-focus-ring-color);

  --calc-chip-bg:#F6F6F7;
  --calc-chip-border:#E3E3E3;

  --calc-tooltip-bg:var(--calc-control-bg);
  --calc-tooltip-text:var(--calc-color-muted);
  --calc-tooltip-border:var(--calc-color-border);
  --calc-tooltip-font-size:11px;

  --calc-suffix-bg:var(--calc-chip-bg);
  --calc-suffix-text:var(--calc-control-text);
  --calc-suffix-radius:6px;
  --calc-suffix-padding-x:16px;

  --calc-swatch-img-radius:6px;
  --calc-swatch-img-bg:var(--calc-control-bg);
  /* Match <swatch-control> shadow .grid / .cell defaults */
  --calc-swatch-gap:8px;
  --calc-swatch-cell-gap:4px;

  /* Image swatch hover preview (<swatch-control> shadow; set on .calc-ssr or option row) */
  --calc-swatch-hover-bg:#eef1f4;
  --calc-swatch-hover-border:1px solid #d1d5db;
  --calc-swatch-hover-radius:10px;
  --calc-swatch-hover-shadow:0 4px 14px rgba(0,0,0,0.08);
  --calc-swatch-hover-padding:12px 14px 14px;
  --calc-swatch-hover-title-color:#111827;
  --calc-swatch-hover-title-size:14px;
  --calc-swatch-hover-title-weight:600;
  --calc-swatch-hover-title-line-height:1.35;
  --calc-swatch-hover-title-margin:0 0 10px;
  --calc-swatch-hover-frame-bg:#ffffff;
  --calc-swatch-hover-frame-radius:8px;
  --calc-swatch-hover-frame-padding:10px;
  --calc-swatch-hover-img-radius:var(--calc-swatch-img-radius);
  --calc-swatch-hover-caret-edge:#d1d5db;
  --calc-swatch-hover-caret-fill:var(--calc-swatch-hover-bg);
  --calc-swatch-hover-fade-duration:.12s;

  /* Swatch carousel (<swatch-control> shadow) */
  --calc-swatch-carousel-btn-bg:#f3f4f6;
  --calc-swatch-carousel-btn-color:#374151;
  --calc-swatch-carousel-btn-border-color:#e5e7eb;
  --calc-swatch-carousel-btn-radius:8px;
  --calc-swatch-carousel-btn-border-width:1px;
  --calc-swatch-carousel-btn-shadow:none;
  --calc-swatch-carousel-btn-size:36px;
  --calc-swatch-carousel-btn-gap:8px;
  --calc-swatch-carousel-btn-font-size:18px;
  --calc-swatch-carousel-btn-disabled-opacity:0.35;
  --calc-swatch-carousel-btn-hover-bg:#e5e7eb;
  --calc-swatch-carousel-stack-gap:10px;
  --calc-swatch-carousel-side-gap:10px;
  --calc-swatch-carousel-side-padding:4px;
  --calc-swatch-carousel-side-btn-bg:transparent;
  --calc-swatch-carousel-side-btn-color:var(--calc-swatch-carousel-btn-color);
  --calc-swatch-carousel-side-btn-hover-bg:transparent;
  --calc-swatch-carousel-dot-size:8px;
  --calc-swatch-carousel-dot-gap:8px;
  --calc-swatch-carousel-dot-color:#d1d5db;
  --calc-swatch-carousel-dot-active-color:#111827;

  --calc-choice-gap:var(--calc-space-200);
  --calc-choice-control-size:16px;
  --calc-choice-label-size:14px;
  --calc-choice-label-color:var(--calc-color-text);
  --calc-choice-accent:var(--calc-accent);

  --calc-toggle-label-gap:16px;

  --calc-chip-gap:6px;
  --calc-chip-padding-y:4px;
  --calc-chip-padding-x:8px;
  --calc-chip-radius:12px;

  --calc-swatch-size:32px;
  --calc-swatch-img-size:40px;
}

/* -------------------------------------------------------------------------- */
/* Summary block safety                                                       */
/* -------------------------------------------------------------------------- */
/* Some themes/customizer previews may render the summary app block without a
   bound calculator id (or with placeholder HTML). Hide it in that case. */
.calc-summary-block[data-calc-summary-block]:not([data-calculator-id]),
.calc-summary-block[data-calc-summary-block][data-calculator-id=""]{
  display:none !important;
}
/* Storefront-only: if a placeholder summary content element is rendered without our data marker,
   hide the message line (prevents "Calculator summary not available." showing) without breaking
   the in-app preview (which uses the same classes but not the storefront data attributes). */
.calc-summary-block[data-calc-summary-block] .calc-summary-block__content:not([data-calc-summary-content]){
  display:none !important;
}

/* Container */
.calc-ssr{
  font-family:var(--calc-font-family);
  font-size:var(--calc-font-size);
  line-height:var(--calc-line);
  color:var(--calc-color-text);
  background:var(--calc-color-card);
  border:var(--calc-container-border-width) solid var(--calc-container-border-color);
  border-radius:var(--calc-container-radius);
  padding:var(--calc-container-padding);
  box-shadow:var(--calc-container-shadow, none);
  /* Column flex: stretch children to full width (row flex + shrink-wrapped options host broke 100% column widths). */
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:var(--calc-option-gap);
}

/* Options list fills calculator width inside flex column root.
   Row flex + wrap so data-col widths (25–100%) lay out inline; hidden rows use display:none and collapse out of the flex flow. */
.calc-ssr__options{
  width:100%;
  min-width:0;
  align-self:stretch;
  flex:1 1 auto;
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  row-gap:var(--calc-option-gap);
  column-gap:var(--calc-option-gap-x);
}

/* Option rows */
.calc-ssr__option{display:flex;flex-direction:column;margin:0;padding:var(--calc-option-padding-y) 0;box-sizing:border-box;width:100%;flex:0 0 auto}
.calc-ssr__grid{display:flex;flex-wrap:wrap;margin:-8px}
.calc-ssr__option[data-col="25"]{width:calc((100% - 3*var(--calc-option-gap-x))/4);flex-basis:calc((100% - 3*var(--calc-option-gap-x))/4);max-width:calc((100% - 3*var(--calc-option-gap-x))/4)}
.calc-ssr__option[data-col="33"],.calc-ssr__option[data-col="34"]{width:calc((100% - 2*var(--calc-option-gap-x))/3);flex-basis:calc((100% - 2*var(--calc-option-gap-x))/3);max-width:calc((100% - 2*var(--calc-option-gap-x))/3)}
.calc-ssr__option[data-col="50"]{width:calc((100% - var(--calc-option-gap-x))/2);flex-basis:calc((100% - var(--calc-option-gap-x))/2);max-width:calc((100% - var(--calc-option-gap-x))/2)}
.calc-ssr__option[data-col="66"],.calc-ssr__option[data-col="67"]{width:calc(66.6667% - (var(--calc-option-gap-x)/2));flex-basis:calc(66.6667% - (var(--calc-option-gap-x)/2));max-width:calc(66.6667% - (var(--calc-option-gap-x)/2))}
.calc-ssr__option[data-col="75"]{width:calc(75% - (var(--calc-option-gap-x)/2));flex-basis:calc(75% - (var(--calc-option-gap-x)/2));max-width:calc(75% - (var(--calc-option-gap-x)/2))}
.calc-ssr__option[data-col="100"]{width:100%;flex-basis:100%;max-width:100%}
.calc-ssr fieldset{border:0;padding:0;margin:0}
.calc-ssr legend{display:block;margin:0 0 var(--calc-space-200);padding:0;font-weight:500}
.calc-ssr__wrap{margin-left:0;margin-right:0}
.calc-ssr__choice.is-selected .calc-ssr__choice-label{font-weight:600}
.calc-ssr__calc-output{font-weight:var(--calc-output-font-weight);font-size:var(--calc-output-font-size)}
.calc-ssr__label{display:block;margin-bottom:var(--calc-space-200);font-size:var(--calc-label-font-size);font-weight:var(--calc-label-font-weight);color:var(--calc-label-color, var(--calc-color-text))}
/* When hideOptionLabel omits the row label, keep switch/radio/checkbox vertical rhythm vs neighbors (same slot as one-line label). */
.calc-ssr__label-spacer{
  display:block;
  box-sizing:border-box;
  margin-bottom:var(--calc-space-200);
  min-height:calc(var(--calc-label-font-size) * var(--calc-line));
  flex-shrink:0;
  visibility:hidden;
  overflow:hidden;
  padding:0;
  line-height:var(--calc-line);
  font-size:var(--calc-label-font-size);
  font-weight:var(--calc-label-font-weight);
  pointer-events:none;
}
/* Match switch row height to default inputs so multi-column rows align (track + state label stay centered). */
.calc-ssr__option--type-switch .calc-ssr__control{
  min-height:var(--calc-input-height);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
/* Swatch carousel: label row + selected-value chips (selection may be on another carousel page) */
.calc-ssr__option-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--calc-space-100) var(--calc-space-300);
  width:100%;
  margin-bottom:var(--calc-space-200);
  min-width:0;
}
.calc-ssr__option-head .calc-ssr__label{
  display:inline;
  margin-bottom:0;
  flex:0 1 auto;
  min-width:0;
}
.calc-ssr__swatch-selection-summary{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:1 1 120px;
  min-width:0;
  gap:var(--calc-space-100);
}
.calc-ssr__swatch-selection-summary[hidden]{
  display:none !important;
}
.calc-ssr__swatch-selection-summary-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:var(--calc-space-100);
  min-width:0;
}
.calc-ssr__swatch-sel-chip{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid var(--calc-color-border);
  box-sizing:border-box;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,0.05) inset;
}
.calc-ssr__swatch-sel-chip--image{
  border-radius:6px;
  padding:0;
  background:var(--calc-swatch-img-bg);
}
.calc-ssr__swatch-sel-chip--image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.calc-ssr__swatch-sel-chip--text{
  border-radius:6px;
  width:auto;
  min-width:22px;
  height:auto;
  min-height:22px;
  padding:2px 6px;
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  background:var(--calc-chip-bg);
  color:var(--calc-color-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.calc-ssr__tooltip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border-radius:999px;border:1px solid var(--calc-tooltip-border);font-size:var(--calc-tooltip-font-size);color:var(--calc-tooltip-text);background:var(--calc-tooltip-bg);cursor:help}
.calc-ssr__help{font-size:var(--calc-help-font-size);color:var(--calc-color-muted);margin-top:var(--calc-space-100)}
.calc-ssr__help--reserve{
  display:block;
  visibility:hidden;
  margin-top:var(--calc-space-100);
  min-height:calc(var(--calc-help-font-size, 13px) * 1.45);
  line-height:1.45;
  font-size:var(--calc-help-font-size);
  pointer-events:none;
}
/* Space for CheckboxGroup / multi-swatch / multi-button .meta selection hints */
.calc-ssr__control-meta-reserve{
  display:block;
  margin-top:6px;
  min-height:calc(12px * 1.35);
  font-size:12px;
  line-height:1.35;
  visibility:hidden;
  pointer-events:none;
  box-sizing:border-box;
}
.calc-ssr__control-meta-reserve--swatch{
  margin-top:var(--calc-swatch-meta-margin-top, 6px);
  min-height:calc(var(--calc-swatch-meta-size, 12px) * 1.35);
  font-size:var(--calc-swatch-meta-size, 12px);
  line-height:1.35;
}
/* Align error color with other validation errors (e.g., numeric field errors) */
.calc-ssr__error{font-size:var(--calc-error-font-size);color:var(--calc-color-error);margin-top:var(--calc-space-100);min-height:18px}

/* Inputs */
.calc-ssr__input{width:100%;height:var(--calc-input-height);box-sizing:border-box;padding:var(--calc-control-padding-y) var(--calc-control-padding-x);border:1px solid var(--calc-control-border);border-radius:var(--calc-control-radius);background:var(--calc-control-bg);color:var(--calc-control-text)}
.calc-ssr__unit-wrap{position:relative;width:100%;max-width:100%;min-width:0}
.calc-ssr__unit-wrap>.calc-ssr__input{padding-right:var(--calc-unit-suffix-pad,56px)}
.calc-ssr__unit-suffix{position:absolute;right:2px;top:2px;bottom:2px;display:inline-flex;align-items:center;padding:0 10px;background:var(--calc-dim-suffix-bg,#f3f4f6);border-radius:6px;color:var(--calc-dim-suffix-color,var(--calc-control-text,#111827));font-size:13px;line-height:1;pointer-events:none;white-space:nowrap}
.calc-ssr__unit-suffix sup{font-size:0.7em;vertical-align:super;line-height:0}
.calc-ssr__input[disabled]{opacity:.7}
.calc-ssr__select{display:block;width:100%;height:var(--calc-input-height);border:1px solid var(--calc-control-border);border-radius:var(--calc-control-radius);background:var(--calc-control-bg);color:var(--calc-color-muted);text-align:left;padding:var(--calc-control-padding-y) var(--calc-control-padding-x);box-sizing:border-box}

/* Choice lists */
.calc-ssr__values{margin:var(--calc-space-200) 0 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--calc-chip-gap);color:var(--calc-color-text)}
.calc-ssr__values li{padding:var(--calc-chip-padding-y) var(--calc-chip-padding-x);border:1px solid var(--calc-chip-border);border-radius:var(--calc-chip-radius);background:var(--calc-chip-bg);cursor:pointer}
.calc-ssr__values li.is-selected{outline:2px solid var(--calc-accent);box-shadow:var(--calc-focus-ring-shadow)}
.calc-ssr__values--cols-2{column-count:2}
.calc-ssr__values--cols-3{column-count:3}
.calc-ssr__values--cols-4{column-count:4}
/* Swatches */
.calc-ssr__values--swatch{display:flex;flex-wrap:wrap;gap:var(--calc-swatch-gap,8px)}
.calc-ssr__values--swatch li{border:0;background:transparent;padding:0}
.calc-ssr__swatch-item{display:flex;flex-direction:column;align-items:center;gap:var(--calc-swatch-cell-gap,4px);min-width:0;max-width:100%}
/* Grid layout mirrors <swatch-control> .grid.is-grid (overrides flex wrap above). */
.calc-ssr__values--swatch.is-grid{
  display:grid;
  flex-wrap:unset;
  width:100%;
  box-sizing:border-box;
  gap:var(--calc-swatch-gap,8px);
  margin:0;
  padding:0;
  list-style:none;
}
.calc-ssr__values--swatch.is-grid .calc-ssr__swatch-item{align-items:center;width:100%}
.calc-ssr__values--swatch.is-single{display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--calc-swatch-gap,8px)}
.calc-ssr__swatch-item--carousel-pad{visibility:hidden;pointer-events:none;user-select:none}
.calc-ssr__swatch-box{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;min-width:0;max-width:100%}
.calc-ssr__swatch{display:inline-block;width:var(--swatch-w, var(--swatch-size));height:var(--swatch-h, var(--swatch-size));border-radius:999px;border:1px solid var(--calc-color-border);max-width:100%;box-sizing:border-box}
/* max-width:100% lets thumbnails shrink inside grid/flex cells (inline width/height still cap upward). max-width:none caused overlap on narrow viewports. */
.calc-ssr__swatch-img{display:block;width:var(--img-w, var(--img-size, var(--calc-swatch-img-size)));height:var(--img-h, var(--img-size, var(--calc-swatch-img-size)));max-width:100%;box-sizing:border-box;object-fit:contain;border-radius:var(--calc-swatch-img-radius);border:1px solid var(--calc-color-border);background:var(--calc-swatch-img-bg)}
.calc-ssr__img--placeholder{background:linear-gradient(135deg,#eee,#f7f7f7)}
.calc-ssr__swatch-label{font-size:12px;color:var(--calc-color-text)}

/* Swatch carousel SSR (pre-hydration; mirrors <swatch-control> chrome) */
.calc-ssr__swatch-carousel{display:flex;flex-direction:column;gap:var(--calc-swatch-carousel-stack-gap,10px);width:100%}
.calc-ssr__swatch-carousel__nav{display:flex;justify-content:flex-end;align-items:center;gap:var(--calc-swatch-carousel-btn-gap,8px)}
.calc-ssr__swatch-carousel__mid{display:block;width:100%}
.calc-ssr__swatch-carousel__mid.is-sides{display:flex;flex-direction:row;align-items:center;gap:var(--calc-swatch-carousel-side-gap,10px)}
/* Mirrors <swatch-control> .grid-wrap: flex row grows so grid matches full control width */
.calc-ssr__swatch-carousel__grid-wrap{flex:1;min-width:0;width:100%}
.calc-ssr__swatch-carousel__side{flex-shrink:0;display:flex;align-items:center}
.calc-ssr__swatch-carousel__chev{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--calc-swatch-carousel-btn-size,36px);min-height:var(--calc-swatch-carousel-btn-size,36px);
  font-size:var(--calc-swatch-carousel-btn-font-size,18px);line-height:1;color:var(--calc-swatch-carousel-btn-color,#374151);
  background:var(--calc-swatch-carousel-btn-bg,#f3f4f6);
  border:var(--calc-swatch-carousel-btn-border-width,1px) solid var(--calc-swatch-carousel-btn-border-color,#e5e7eb);
  border-radius:var(--calc-swatch-carousel-btn-radius,8px);
  box-shadow:var(--calc-swatch-carousel-btn-shadow,none);
  user-select:none;
}
.calc-ssr__swatch-carousel[data-ssr-carousel-nav="sides"] .calc-ssr__swatch-carousel__side .calc-ssr__swatch-carousel__chev{
  min-width:0;min-height:0;padding:var(--calc-swatch-carousel-side-padding,4px);
  background:var(--calc-swatch-carousel-side-btn-bg,transparent);
  color:var(--calc-swatch-carousel-side-btn-color,var(--calc-swatch-carousel-btn-color,#374151));
  border-color:transparent;box-shadow:none;
}
.calc-ssr__swatch-carousel__chev.is-faded{opacity:var(--calc-swatch-carousel-btn-disabled-opacity,0.35)}
.calc-ssr__swatch-carousel__dots{display:flex;justify-content:center;align-items:center;gap:var(--calc-swatch-carousel-dot-gap,8px);flex-wrap:wrap;width:100%}
.calc-ssr__swatch-carousel__dot{
  width:var(--calc-swatch-carousel-dot-size,8px);height:var(--calc-swatch-carousel-dot-size,8px);
  border-radius:999px;background:var(--calc-swatch-carousel-dot-color,#d1d5db);flex-shrink:0;
}
.calc-ssr__swatch-carousel__dot.is-active{background:var(--calc-swatch-carousel-dot-active-color,#111827)}
.calc-ssr__values--swatch-page{margin:0;padding:0;list-style:none;width:100%;box-sizing:border-box}

/* Attribute-driven layouts — scope to option row so value-columns never hits sibling options */
.calc-ssr__option[data-value-columns="2"] .calc-ssr__values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--calc-swatch-gap,8px)}
.calc-ssr__option[data-value-columns="3"] .calc-ssr__values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--calc-swatch-gap,8px)}
.calc-ssr__option[data-value-columns="4"] .calc-ssr__values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--calc-swatch-gap,8px)}
[data-show-labels="hide"] .calc-ssr__choice-label{display:none}
[data-show-labels="hover"] .calc-ssr__choice-label{opacity:.0;transition:opacity .12s ease}
[data-show-labels="hover"] .calc-ssr__choice:hover .calc-ssr__choice-label{opacity:1}
[data-swatch-shape="circle"] .calc-ssr__swatch, [data-swatch-shape="circle"] .calc-ssr__img, [data-swatch-shape="circle"] .calc-ssr__swatch-img{border-radius:999px}
[data-swatch-shape="rounded"] .calc-ssr__swatch, [data-swatch-shape="rounded"] .calc-ssr__img, [data-swatch-shape="rounded"] .calc-ssr__swatch-img{border-radius:8px}

/* Size tokens for swatches (can be tuned later) */
.calc-ssr__swatch{width:var(--calc-swatch-size);height:var(--calc-swatch-size)}
.calc-ssr__img{width:var(--calc-swatch-img-size);height:var(--calc-swatch-img-size)}

/* Dimensions (match dimensions-input shadow; dim labels inherit .calc-ssr line-height like shadow labels via host) */
.calc-ssr__dims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--calc-dim-gap, 8px);align-items:end}
.calc-ssr__option[data-value-columns="3"] .calc-ssr__dims{grid-template-columns:repeat(3,minmax(0,1fr))}
.calc-ssr__option[data-value-columns="4"] .calc-ssr__dims{grid-template-columns:repeat(4,minmax(0,1fr))}
.calc-ssr__dim{display:flex;flex-direction:column;gap:4px;position:relative;min-width:0}
.calc-ssr__dim.calc-ssr__dim--primary-sub{gap:0}
.calc-ssr__dim.calc-ssr__dim--no-label{gap:0}
.calc-ssr__dim-label{
  margin:0;
  font-size:var(--calc-dim-label-size, 12px);
  font-weight:400;
  color:var(--calc-dim-label-color, #374151);
}
/* When config.hideOptionLabel: match primary option label spacing (see dimensions-input shadow .label--primary) */
.calc-ssr__dim-label.calc-ssr__dim-label--primary{
  display:block;
  margin-bottom:var(--calc-space-200, 8px);
  font-size:var(--calc-label-font-size, 14px);
  font-weight:var(--calc-label-font-weight, 500);
  color:var(--calc-label-color, var(--calc-color-text, #111827));
}
.calc-ssr__dim-input{position:relative}
.calc-ssr__dims .calc-ssr__input{
  width:100%;
  box-sizing:border-box;
  height:var(--calc-input-height, 40px);
  padding:var(--calc-control-padding-y, 10px) var(--calc-control-padding-x, 12px);
  padding-right:56px;
  border:1px solid var(--calc-control-border, #cbd5e1);
  border-radius:var(--calc-control-radius, 6px);
  background:var(--calc-control-bg, #fff);
  color:var(--calc-control-text, #111827);
}
.calc-ssr__suffix{position:absolute;right:2px;top:2px;bottom:2px;display:inline-flex;align-items:center;padding:0 var(--calc-suffix-padding-x);background:var(--calc-suffix-bg);border-radius:var(--calc-suffix-radius);color:var(--calc-suffix-text);font-size:13px}
.calc-ssr__dims .calc-ssr__suffix{
  padding:0 10px;
  background:var(--calc-dim-suffix-bg, var(--calc-chip-bg, #f3f4f6));
  border-radius:var(--calc-dim-suffix-radius, 6px);
  color:var(--calc-dim-suffix-color, var(--calc-control-text, #111827));
  font-size:13px;
}
.calc-ssr__dims .calc-ssr__suffix sup{font-size:0.7em;vertical-align:super;line-height:0;position:relative;top:-0.1em}

/* Slider SSR — grid: row1 bubble over track; row2 min | lane | max (matches renderer flex + 40px range) */
.calc-ssr__slider-wrap{
  width:100%;
  box-sizing:border-box;
  /* Space below track matches hydrated layout (UA / control box) so the next option doesn’t jump */
  padding-bottom:var(--calc-slider-block-pad-bottom, 12px);
}
.calc-ssr__slider-grid{
  --calc-ssr-slider-thumb:20px;
  --calc-ssr-slider-lane:40px;
  --calc-ssr-slider-track-h:var(--calc-slider-track-height, 6px);
  display:grid;
  grid-template-columns:auto minmax(60px, 1fr) auto;
  grid-template-rows:28px var(--calc-ssr-slider-lane);
  column-gap:10px;
  width:100%;
  box-sizing:border-box;
}
.calc-ssr__slider-bubble-cell{
  grid-column:2;
  grid-row:1;
  position:relative;
  min-width:0;
}
.calc-ssr__slider-label{
  white-space:nowrap;
  font-size:12px;
  line-height:16px;
  color:var(--calc-slider-minmax-color, var(--calc-color-muted, #6b7280));
  user-select:none;
  align-self:center;
}
.calc-ssr__slider-label--min{grid-column:1;grid-row:2;justify-self:start}
.calc-ssr__slider-label--max{grid-column:3;grid-row:2;justify-self:end}
.calc-ssr__slider-track-cell{
  grid-column:2;
  grid-row:2;
  position:relative;
  min-width:60px;
  align-self:center;
}
/* +1px top matches hydrated bubble position (native thumb / subpixel alignment) */
.calc-ssr__slider-bubble{
  position:absolute;
  top:1px;
  left:calc(var(--calc-ssr-slider-thumb) / 2 + (100% - var(--calc-ssr-slider-thumb)) * var(--pct) / 100);
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--calc-slider-bubble-radius, 999px);
  padding:4px 10px;
  font-size:12px;
  line-height:16px;
  font-weight:600;
  white-space:nowrap;
  background:var(--calc-slider-bubble-bg, var(--calc-accent, #2C6ECB));
  color:var(--calc-slider-bubble-text, #ffffff);
  box-shadow:var(--calc-slider-bubble-shadow, 0 2px 4px rgba(0,0,0,0.15));
  pointer-events:none;
}
.calc-ssr__slider-bubble-pointer{
  position:absolute;
  top:calc(100% - 1px);
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid var(--calc-slider-bubble-bg, var(--calc-accent, #2C6ECB));
}
.calc-ssr__slider-ui{
  position:relative;
  height:var(--calc-ssr-slider-lane);
  width:100%;
  box-sizing:border-box;
}
.calc-ssr__slider-track{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  height:var(--calc-ssr-slider-track-h);
  border-radius:999px;
  background:var(--calc-slider-track-bg, #e1e5e9);
  overflow:hidden;
}
.calc-ssr__slider-fill{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  height:var(--calc-ssr-slider-track-h);
  width:min(100%, calc(var(--calc-ssr-slider-thumb) / 2 + (100% - var(--calc-ssr-slider-thumb)) * var(--pct) / 100));
  border-radius:999px;
  background:var(--calc-slider-track-active-bg, var(--calc-slider-bubble-bg, var(--calc-accent, #2C6ECB)));
}
.calc-ssr__slider-thumb{
  position:absolute;
  left:calc(var(--calc-ssr-slider-thumb) / 2 + (100% - var(--calc-ssr-slider-thumb)) * var(--pct) / 100);
  top:50%;
  transform:translate(-50%, -50%);
  width:var(--calc-ssr-slider-thumb);
  height:var(--calc-ssr-slider-thumb);
  box-sizing:border-box;
  background:var(--calc-slider-thumb-bg, var(--calc-accent, #2C6ECB));
  border-radius:50%;
  border:2px solid var(--calc-slider-thumb-border, #ffffff);
  box-shadow:var(--calc-slider-thumb-shadow, 0 2px 4px rgba(0,0,0,0.2));
  pointer-events:none;
}

/* Hydrated range: fixed lane height + pill track so SSR and live stack the same vertically */
.calc-ssr input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:var(--calc-ssr-slider-lane, 40px);
  min-height:var(--calc-ssr-slider-lane, 40px);
  margin:0;
  box-sizing:border-box;
  background:transparent;
  cursor:pointer;
}
.calc-ssr input[type="range"]:focus{outline:0}
.calc-ssr input[type="range"]::-webkit-slider-runnable-track{
  height:var(--calc-slider-track-height, 6px);
  border-radius:999px;
  background:linear-gradient(
    to right,
    var(--calc-slider-track-active-bg, var(--calc-slider-bubble-bg, var(--calc-accent, #2C6ECB))) 0%,
    var(--calc-slider-track-active-bg, var(--calc-slider-bubble-bg, var(--calc-accent, #2C6ECB))) var(--calc-range-fill-pct, 0%),
    var(--calc-slider-track-bg, #e1e5e9) var(--calc-range-fill-pct, 0%),
    var(--calc-slider-track-bg, #e1e5e9) 100%
  );
}
.calc-ssr input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:var(--calc-ssr-slider-thumb, 20px);
  height:var(--calc-ssr-slider-thumb, 20px);
  margin-top:calc((var(--calc-slider-track-height, 6px) - var(--calc-ssr-slider-thumb, 20px)) / 2);
  border-radius:50%;
  border:2px solid var(--calc-slider-thumb-border, #ffffff);
  background:var(--calc-slider-thumb-bg, var(--calc-accent, #2C6ECB));
  box-shadow:var(--calc-slider-thumb-shadow, 0 2px 4px rgba(0,0,0,0.2));
}
.calc-ssr input[type="range"]::-moz-range-track{
  height:var(--calc-slider-track-height, 6px);
  border-radius:999px;
  background:var(--calc-slider-track-bg, #e1e5e9);
}
.calc-ssr input[type="range"]::-moz-range-thumb{
  width:var(--calc-ssr-slider-thumb, 20px);
  height:var(--calc-ssr-slider-thumb, 20px);
  border-radius:50%;
  border:2px solid var(--calc-slider-thumb-border, #ffffff);
  background:var(--calc-slider-thumb-bg, var(--calc-accent, #2C6ECB));
  box-shadow:var(--calc-slider-thumb-shadow, 0 2px 4px rgba(0,0,0,0.2));
}
.calc-ssr input[type="range"]::-moz-range-progress{
  height:var(--calc-slider-track-height, 6px);
  border-radius:999px;
  background:var(--calc-slider-track-active-bg, var(--calc-slider-bubble-bg, var(--calc-accent, #2C6ECB)));
}

/* Radio/Checkbox (generic) */
.calc-ssr__choices{display:flex;flex-wrap:wrap;gap:var(--calc-choice-gap)}
.calc-ssr__choice{display:inline-flex;align-items:center;gap:var(--calc-space-100)}
.calc-ssr input[type="radio"],
.calc-ssr input[type="checkbox"]{
  width:var(--calc-choice-control-size);
  height:var(--calc-choice-control-size);
  min-width:var(--calc-choice-control-size);
  max-width:var(--calc-choice-control-size);
  padding:0;
  margin:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-sizing:border-box;
  flex:0 0 auto;
  flex-shrink:0;
  accent-color:var(--calc-choice-accent);
}
/* Quantity radio lists (inline pricing + plain) use qty tokens, not text-input chrome. */
.calc-qty-inline-row input[type="radio"],
.calc-ssr__qty-radio-inline input[type="radio"],
.calc-ssr__choice input[type="radio"]{
  width:var(--calc-qty-radio-size, var(--calc-choice-control-size, 16px));
  height:var(--calc-qty-radio-size, var(--calc-choice-control-size, 16px));
  min-width:var(--calc-qty-radio-size, var(--calc-choice-control-size, 16px));
  max-width:var(--calc-qty-radio-size, var(--calc-choice-control-size, 16px));
  accent-color:var(--calc-qty-radio-accent, var(--calc-choice-accent, var(--calc-accent)));
}
.calc-ssr__choice-label{font-size:var(--calc-choice-label-size);color:var(--calc-choice-label-color)}
.calc-ssr__option[data-value-columns="2"] .calc-ssr__choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--calc-choice-gap);flex-wrap:unset}
.calc-ssr__option[data-value-columns="3"] .calc-ssr__choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--calc-choice-gap);flex-wrap:unset}
.calc-ssr__option[data-value-columns="4"] .calc-ssr__choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--calc-choice-gap);flex-wrap:unset}
.calc-ssr__qty-radio-inline{display:flex;flex-direction:column;gap:var(--calc-qty-radio-gap, var(--calc-qty-gap, 8px));width:100%}
.calc-ssr__option[data-value-columns="2"] .calc-ssr__qty-radio-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--calc-qty-radio-gap, var(--calc-qty-gap, 8px))}
.calc-ssr__option[data-value-columns="3"] .calc-ssr__qty-radio-inline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--calc-qty-radio-gap, var(--calc-qty-gap, 8px))}
.calc-ssr__option[data-value-columns="4"] .calc-ssr__qty-radio-inline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--calc-qty-radio-gap, var(--calc-qty-gap, 8px))}
.calc-ssr[data-ssr="1"] .calc-qty-inline-row{
  padding:var(--calc-qty-radio-row-padding-y, 6px) 0;
  line-height:var(--calc-qty-radio-row-line, 1.35);
  box-sizing:border-box;
}

/* Multi-step */
.calc-ssr__steps{width:100%;display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--calc-step-bar-gap,8px);margin:0 0 var(--calc-step-bar-margin-bottom,8px) 0}
.calc-ssr__step-tabs{display:flex;flex-wrap:wrap;gap:var(--calc-step-tabs-gap,6px);align-items:center;flex:1 1 auto}
.calc-ssr__step-actions{display:flex;gap:var(--calc-step-actions-gap,6px);align-items:center;flex:0 0 auto;align-self:flex-start}
.calc-ssr__step-description{width:100%;text-align:center;font-size:var(--calc-step-description-font-size,20px);font-weight:var(--calc-step-description-font-weight,500);color:var(--calc-step-description-color,var(--calc-color-text));margin:10px 0 10px 0}
.calc-ssr__step-divider{width:100%;border-top:var(--calc-step-divider-width,1px) solid var(--calc-step-divider-color,var(--calc-color-border));margin:0 0 12px 0}
.calc-ssr__step-btn{appearance:none;border:var(--calc-step-tab-border-width,1px) solid var(--calc-step-tab-border,var(--calc-color-border));background:var(--calc-step-tab-bg,var(--calc-control-bg));color:var(--calc-step-tab-text,var(--calc-color-text));border-radius:var(--calc-step-tab-radius,999px);padding:var(--calc-step-tab-padding-y,6px) var(--calc-step-tab-padding-x,10px);font-size:var(--calc-step-tab-font-size,12px);font-weight:var(--calc-step-tab-font-weight,400);cursor:pointer;line-height:1;box-shadow:none}
.calc-ssr__step-btn.is-active{border-color:var(--calc-step-tab-active-border,var(--calc-accent));background:var(--calc-step-tab-active-bg,var(--calc-step-tab-bg,var(--calc-control-bg)));color:var(--calc-step-tab-active-text,var(--calc-step-tab-text,var(--calc-color-text)));box-shadow:var(--calc-step-tab-active-shadow,var(--calc-focus-ring-shadow))}
.calc-ssr__step-btn--nav{border-radius:var(--calc-step-nav-radius,8px);padding:0;width:var(--calc-step-nav-size,30px);height:var(--calc-step-nav-size,30px);display:inline-flex;align-items:center;justify-content:center;font-size:var(--calc-step-nav-font-size,16px);background:var(--calc-step-nav-bg,var(--calc-step-tab-bg,var(--calc-control-bg)));color:var(--calc-step-nav-text,var(--calc-step-tab-text,var(--calc-color-text)));border:var(--calc-step-nav-border-width,var(--calc-step-tab-border-width,1px)) solid var(--calc-step-nav-border,var(--calc-step-tab-border,var(--calc-color-border)))}
.calc-ssr__step-btn:disabled{opacity:var(--calc-step-nav-disabled-opacity,var(--calc-disabled-opacity));cursor:not-allowed}

/* Button option SSR — align with button-group shadow (.wrap grid + .btn) */
.calc-ssr__btns{
  width:100%;
  box-sizing:border-box;
  display:grid;
  gap:var(--calc-buttongroup-gap, 8px);
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
}
.calc-ssr__btns[data-value-columns="auto"]{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr))}
.calc-ssr__btns[data-value-columns="1"]{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
}
.calc-ssr__btns[data-value-columns="2"]{grid-template-columns:repeat(2, minmax(0, 1fr))}
.calc-ssr__btns[data-value-columns="3"]{grid-template-columns:repeat(3, minmax(0, 1fr))}
.calc-ssr__btns[data-value-columns="4"]{grid-template-columns:repeat(4, minmax(0, 1fr))}
.calc-ssr__btns[data-value-columns="5"]{grid-template-columns:repeat(5, minmax(0, 1fr))}
.calc-ssr__btns[data-value-columns="6"]{grid-template-columns:repeat(6, minmax(0, 1fr))}
.calc-ssr__btns[data-value-columns="7"]{grid-template-columns:repeat(7, minmax(0, 1fr))}
.calc-ssr__btns[data-value-columns="8"]{grid-template-columns:repeat(8, minmax(0, 1fr))}
.calc-ssr__btns[data-value-columns="9"]{grid-template-columns:repeat(9, minmax(0, 1fr))}
.calc-ssr__btns[data-value-columns="10"]{grid-template-columns:repeat(10, minmax(0, 1fr))}
.calc-ssr__btns[data-value-columns="11"]{grid-template-columns:repeat(11, minmax(0, 1fr))}
.calc-ssr__btns[data-value-columns="12"]{grid-template-columns:repeat(12, minmax(0, 1fr))}
.calc-ssr__btn{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  box-sizing:border-box;
  margin:0;
  border:1px solid var(--calc-btn-border, var(--calc-color-border, #d1d5db));
  background:var(--calc-btn-bg, var(--calc-control-bg, #fff));
  color:var(--calc-btn-text, var(--calc-color-text, #111827));
  border-radius:var(--calc-btn-radius, 8px);
  padding:var(--calc-btn-padding-y, 8px) var(--calc-btn-padding-x, 12px);
  cursor:default;
  text-align:center;
  font-size:inherit;
  line-height:normal;
}
.calc-ssr__btn:hover{border-color:var(--calc-btn-hover-border, var(--calc-accent, #2c6ecb))}
.calc-ssr__btn.is-selected{
  border-color:var(--calc-btn-selected-border, var(--calc-accent, #2c6ecb));
  background:var(--calc-btn-selected-bg, var(--calc-btn-bg, var(--calc-control-bg, #fff)));
  color:var(--calc-btn-selected-text, var(--calc-btn-text, var(--calc-color-text, #111827)));
  box-shadow:var(--calc-btn-selected-ring, var(--calc-focus-ring-shadow, 0 0 0 2px rgba(44,110,203,0.15)));
}
.calc-ssr__btn.is-pressed{transform:translateY(1px)}
.calc-ssr[data-ssr="1"] .calc-ssr__btn:disabled{opacity:1;cursor:default}

/* Content primitives */
.calc-ssr__heading{margin:0 0 var(--calc-space-200);font-weight:600}
.calc-ssr__divider{border:0;border-top:1px solid var(--calc-color-border);margin:var(--calc-space-300) 0}
.calc-ssr__spacer{width:100%}

/* Modal trigger (SSR lookalike) */
.calc-ssr__modal-trigger{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--calc-accent);cursor:pointer;padding:4px 0}

/* Product customizer launch button — SSR fallback before <product-customizer-button> upgrades. */
.calc-ssr__option--type-product-customizer .calc-ssr__control{
  padding-block:var(--calc-space-200);
  box-sizing:border-box;
}
product-customizer-button{
  display:block;
  max-width:100%;
  box-sizing:border-box;
}
product-customizer-button:not(:defined){
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:var(--pcb-width, var(--calc-pcb-width, 100%));
  padding:var(--calc-pcb-padding-y, 10px) var(--calc-pcb-padding-x, 16px);
  border:none;
  border-radius:var(--pcb-radius, var(--calc-pcb-radius, var(--calc-control-radius, 6px)));
  background:var(--pcb-bg, var(--calc-pcb-bg, var(--calc-accent, #111827)));
  color:var(--pcb-color, var(--calc-pcb-text, #ffffff));
  font-family:var(--pcb-font-family, var(--calc-pcb-font-family, inherit));
  font-size:var(--pcb-font-size, var(--calc-pcb-font-size, 16px));
  font-weight:var(--calc-pcb-font-weight, 500);
  line-height:1.2;
  cursor:default;
  -webkit-appearance:none;
  appearance:none;
}
product-customizer-button:not(:defined)[button-width="100"],
product-customizer-button:not(:defined)[button-width="100%"]{
  display:flex;
  width:100%;
}
product-customizer-button:not(:defined)::after{
  content:attr(label);
}
.calc-ssr__modal-img{display:inline-block;width:20px;height:20px;border-radius:4px;object-fit:cover}

/* Date/Time (SSR lookalike of alt input) */
.b2c-date-alt{padding:var(--calc-control-padding-y) var(--calc-control-padding-x);border:1px solid var(--calc-control-border);border-radius:var(--calc-control-radius);width:100%;box-sizing:border-box;font:inherit;background:var(--calc-control-bg);color:var(--calc-control-text);height:var(--calc-input-height)}

/* Font picker (SSR lookalike) */
.calc-ssr__picker{position:relative}
.calc-ssr__picker .calc-ssr__input{padding-right:28px}
.calc-ssr__arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--calc-dd-arrow, var(--calc-color-muted, #9ca3af));pointer-events:none}

/* Generic element fallback to style preview markup without classes */
.calc-ssr input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]),
.calc-ssr textarea{width:100%;height:var(--calc-input-height);box-sizing:border-box;padding:var(--calc-control-padding-y) var(--calc-control-padding-x);border:1px solid var(--calc-control-border);border-radius:var(--calc-control-radius);background:var(--calc-control-bg);color:var(--calc-control-text)}
.calc-ssr select{display:block;width:100%;height:var(--calc-input-height);border:1px solid var(--calc-control-border);border-radius:var(--calc-control-radius);background:var(--calc-control-bg);color:var(--calc-color-muted);text-align:left;padding:var(--calc-control-padding-y) var(--calc-control-padding-x);box-sizing:border-box}
/* Native select menus: many browsers render the dropdown list on a light surface even in dark mode.
   If the <select> text is light, the options become unreadable (light-on-light). Force option text to dark. */
.calc-ssr select option,
.calc-ssr select optgroup{color:var(--calc-select-menu-text, #111213);background:var(--calc-select-menu-bg, #fff)}

/* Color field SSR lookalike */
.calc-ssr__color{display:inline-flex;align-items:center;gap:8px}
.calc-ssr__color-swatch{width:40px;height:40px;border:1px solid var(--calc-color-border);border-radius:8px;background:var(--calc-colorfield-swatch-bg, var(--calc-control-bg));box-sizing:border-box;padding:2px}
.calc-ssr__color-inner{width:100%;height:100%;border-radius:6px}
.calc-ssr__hex{width:110px;height:var(--calc-input-height);padding:6px 10px;border:1px solid var(--calc-color-border);border-radius:6px;box-sizing:border-box;font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:13px;background:var(--calc-control-bg);color:var(--calc-control-text)}
.b2c-hex-input{background:var(--calc-colorfield-hex-bg,var(--calc-control-bg));color:var(--calc-colorfield-hex-text,var(--calc-control-text))}
.b2c-hex-input::placeholder{color:var(--calc-color-muted)}
.b2c-hex-input:hover,.b2c-hex-input:focus,.b2c-hex-input:focus-visible{background:var(--calc-colorfield-hex-bg,var(--calc-control-bg));color:var(--calc-colorfield-hex-text,var(--calc-control-text))}

/* Themes (variable overrides only) */
[data-calculator-theme="modern"].calc-ssr{--calc-radius:8px;--calc-color-card:#fff;--calc-accent:#2C6ECB}
[data-calculator-theme="minimal"].calc-ssr{--calc-radius:6px;--calc-color-card:#fff;--calc-color-border:#D9DBDE;--calc-accent:#111}
[data-calculator-theme="classic"].calc-ssr{--calc-radius:4px;--calc-color-card:#FAFAFA;--calc-color-border:#BFC3C6;--calc-accent:#006FBB}

/* Standalone CalcAI app blocks (not the combined product block): OS 2 wraps each in
   .shopify-block. Themes often use flex + align-items:flex-start so wrappers shrink-wrap.
   data-calcai-standalone-app is only set on roots from the standalone block templates. */
.shopify-block:has([data-calcai-standalone-app]),
.shopify-app-block:has([data-calcai-standalone-app]){
  box-sizing:border-box;
  flex:1 1 0%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* Optional: match the tallest CalcAI sibling in a horizontal row (flex cross-size, not fixed px). */
.shopify-block:has([data-calcai-fill-row-height]),
.shopify-app-block:has([data-calcai-fill-row-height]){
  align-self:stretch;
}
.shopify-block:has([data-calcai-fill-row-height]) [data-calcai-fill-row-height],
.shopify-app-block:has([data-calcai-fill-row-height]) [data-calcai-fill-row-height]{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  height:100%;
}
[data-calcai-calculator-wrap][data-calcai-fill-row-height] div:has(> [data-calcai-calculator]){
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}
[data-calcai-calculator-wrap][data-calcai-fill-row-height] [data-calcai-calculator]{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  max-width:100%;
  width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}
[data-calcai-calculator][data-calcai-fill-row-height]{
  min-width:0;
  max-width:100%;
  width:100%;
  box-sizing:border-box;
}
[data-calcai-calculator-wrap][data-calcai-fill-row-height] [data-calcai-calculator] > script{
  flex:0 0 auto;
}
[data-calcai-calculator-wrap][data-calcai-fill-row-height] [data-calcai-snapshot]{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}
[data-calcai-calculator-wrap][data-calcai-fill-row-height] .calc-ssr{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
[data-calcai-calculator-wrap][data-calcai-fill-row-height] .calcai-embedded-col{
  min-height:0;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  align-self:stretch;
}
[data-calcai-calculator-wrap][data-calcai-fill-row-height] .calcai-embedded-col > .calcai-qty-table[data-calcai-fill-row-height],
[data-calcai-calculator-wrap][data-calcai-fill-row-height] .calcai-embedded-col > .calc-summary-block[data-calcai-fill-row-height]{
  flex:1 1 auto;
  min-height:0;
  width:100%;
}
.calcai-qty-table[data-calcai-fill-row-height]{
  display:flex;
  flex-direction:column;
}
.calcai-qty-table[data-calcai-fill-row-height] .calcai-qty-table__content{
  flex:1 1 auto;
  min-height:0;
}
.calc-summary-block[data-calcai-fill-row-height]{
  display:flex;
  flex-direction:column;
}
.calc-summary-block[data-calcai-fill-row-height] .calc-summary-block__skeleton,
.calc-summary-block[data-calcai-fill-row-height] .calc-summary-block__content{
  flex:0 0 auto;
}
.calc-summary-block[data-calcai-fill-row-height]::after{
  content:"";
  flex:1 1 auto;
  min-height:0;
}

/* Quantity tiers table (storefront block + embedded + admin preview) */
.calcai-qty-table{
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  border:var(--calc-qtytable-border-width, 1px) var(--calc-qtytable-border-style, solid) var(--calc-qtytable-border-color, var(--calc-color-border,#e1e3e5));
  padding:var(--calc-qtytable-padding, var(--calc-space-300,12px));
  border-radius:var(--calc-qtytable-radius, var(--calc-radius, 8px));
  background:var(--calc-qtytable-bg, var(--calc-color-card, #fff));
  color:var(--calc-qtytable-text, var(--calc-color-text,#111213));
  line-height:var(--calc-qtytable-line, 1.5);
  box-shadow:var(--calc-qtytable-shadow, none);
  font-family:var(--calc-qtytable-font-family, inherit);
  font-size:var(--calc-qtytable-font-size, var(--calc-font-size, 14px));
}

/* Safety (storefront only): if Shopify renders this app block without a bound calculator id, hide it. */
.calcai-qty-table[data-calc-qty-table]:not([data-calc-id]),
.calcai-qty-table[data-calc-qty-table][data-calc-id=""]{
  display:none !important;
}

/* Themes sometimes override the `[hidden]` attribute. Force it back off (storefront only). */
.calcai-qty-table[data-calc-qty-table][hidden]{
  display:none !important;
}
.calcai-qty-table__heading{
  font-weight:var(--calc-qtytable-heading-weight, 600);
  font-size:var(--calc-qtytable-heading-size, inherit);
  color:var(--calc-qtytable-heading-color, var(--calc-qtytable-text, var(--calc-color-text,#111213)));
  font-style:var(--calc-qtytable-heading-style, normal);
  text-decoration:var(--calc-qtytable-heading-decoration, none);
  margin:0 0 var(--calc-qtytable-heading-margin-bottom, 8px) 0;
}
.calcai-qty-table__progress{
  margin:0 0 var(--calc-qtytable-progress-margin-bottom, 10px) 0;
  font-size:var(--calc-qtytable-progress-font-size, 13px);
  color:var(--calc-qtytable-progress-color, var(--calc-qtytable-text, var(--calc-color-text,#111213)));
  line-height:var(--calc-qtytable-progress-line, inherit);
}
.calcai-qty-table__progress-line1,
.calcai-qty-table__progress-line2{margin:0}
.calcai-qty-table__progress-line1{min-height:var(--calc-qtytable-progress-line1-min-height, 20px)}
.calcai-qty-table__progress-line1--placeholder{min-height:var(--calc-qtytable-progress-line1-min-height, 20px);visibility:hidden}
.calcai-qty-table__progress-line2--placeholder{min-height:var(--calc-qtytable-progress-line2-min-height, 20px);visibility:hidden}
.calcai-qty-table__copy{color:var(--calc-qtytable-copy-color, var(--calc-color-muted,#6D7175))}
.calcai-qty-table__value{color:var(--calc-qtytable-value-color, var(--calc-qtytable-text, var(--calc-color-text,#111213)))}
.calcai-qty-table__content{width:100%;min-width:0}
.calcai-qty-table__table{width:100%;border-collapse:collapse;table-layout:fixed}
.calcai-qty-table__thead th{
  font-size:var(--calc-qtytable-thead-font-size, 12px);
  font-weight:var(--calc-qtytable-thead-font-weight, 600);
  color:var(--calc-qtytable-thead-color, var(--calc-color-muted,#6D7175));
  text-transform:var(--calc-qtytable-thead-transform, none);
  padding:var(--calc-qtytable-thead-padding-y, 6px) var(--calc-qtytable-cell-padding-x, 10px);
  border-bottom:var(--calc-qtytable-thead-border-width, 1px) var(--calc-qtytable-thead-border-style, solid) var(--calc-qtytable-thead-border-color, var(--calc-color-border,#e1e3e5));
}
.calcai-qty-table__tbody td{
  padding:var(--calc-qtytable-tbody-padding-y, 8px) var(--calc-qtytable-cell-padding-x, 10px);
  border-bottom:var(--calc-qtytable-tbody-border-width, 1px) var(--calc-qtytable-tbody-border-style, solid) var(--calc-qtytable-tbody-border-color, var(--calc-color-border,#f0f1f2));
  vertical-align:top;
  font-size:var(--calc-qtytable-tbody-font-size, inherit);
  font-weight:var(--calc-qtytable-tbody-font-weight, inherit);
  color:var(--calc-qtytable-tbody-color, var(--calc-qtytable-text, var(--calc-color-text,#111213)));
}
.calcai-qty-table__tbody tr:last-child td{border-bottom:0}
.calcai-qty-table__cell--qty{text-align:left}
.calcai-qty-table__cell--savings{text-align:right;white-space:nowrap}
.calcai-qty-table__thead .calcai-qty-table__cell--savings{text-align:right}
.calcai-qty-table__row--active td{
  font-weight:var(--calc-qtytable-row-active-font-weight, 600);
  background:var(--calc-qtytable-row-active-bg, var(--calc-accent-soft-bg, rgba(44,110,203,0.12)));
  color:var(--calc-qtytable-row-active-color, var(--calc-qtytable-tbody-color, var(--calc-qtytable-text, var(--calc-color-text,#111213))));
}
.calcai-qty-table__row:hover td{
  background:var(--calc-qtytable-row-hover-bg, transparent);
}
.calcai-qty-table__empty{
  color:var(--calc-qtytable-empty-color, var(--calc-color-muted,#6D7175));
  font-size:var(--calc-qtytable-empty-font-size, 13px);
}

/* -------------------------------------------------------------------------- */
/* Quantity tiers skeleton (2D SSR placeholder)                                */
/* -------------------------------------------------------------------------- */
.calcai-qty-table__skeleton{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.calcai-qty-table__skeleton-line{
  height:10px;
  border-radius:4px;
  background:linear-gradient(90deg,#f3f4f6 0%,#e5e7eb 50%,#f3f4f6 100%);
  background-size:200% 100%;
  animation:calcai-qty-shimmer 1.2s ease-in-out infinite;
}
.calcai-qty-table__skeleton-table{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}
.calcai-qty-table__skeleton-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.calcai-qty-table__skeleton-cell{
  height:10px;
  border-radius:4px;
  background:linear-gradient(90deg,#f3f4f6 0%,#e5e7eb 50%,#f3f4f6 100%);
  background-size:200% 100%;
  animation:calcai-qty-shimmer 1.2s ease-in-out infinite;
}
@keyframes calcai-qty-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
/* ATC validation error - full-width footer area inside the calculator block */
.calc-ssr__atc-error{
  display:none;
  width:100%;
  flex:0 0 100%;
  margin-top:20px;
  padding:6px 0 2px;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  color:var(--calc-color-error,#D82C0D);
  text-align:center;
}
/* Error message shakes on appearance to draw attention */
.calc-ssr__atc-error--shake{animation:calcai-atc-shake 0.5s ease-in-out}
/* Shake animation - also applied best-effort to the ATC button if accessible */
@keyframes calcai-atc-shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-6px)}
  30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)}
  60%{transform:translateX(4px)}
  75%{transform:translateX(-2px)}
  90%{transform:translateX(2px)}
}
.calcai-atc-shake{animation:calcai-atc-shake 0.5s ease-in-out}

/* Quantity radio/dropdown: inline price + savings (responsive) */
.calc-qty-inline-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px 10px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.calc-qty-inline-row__ctl{
  display:inline-flex;
  align-items:center;
  gap:var(--calc-qty-radio-row-gap,6px);
  min-width:0;
  flex:1 1 auto;
}
.calc-qty-inline-row__meta{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  column-gap:var(--calc-qty-inline-meta-column-gap,12px);
  align-items:baseline;
  justify-items:stretch;
  min-width:0;
  flex:1 1 140px;
  font-size:var(--calc-qty-inline-meta-size,13px);
  color:var(--calc-qty-inline-meta-color,var(--calc-color-muted,#6D7175));
  word-break:break-word;
}
/* Two columns whenever the savings slot exists (even if empty) so price
   stays in the same column as rows that show a discount. */
.calc-qty-inline-row__meta:has(.calc-qty-inline-savings-badge){
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.calc-qty-inline-row__price{
  font-weight:600;
  color:var(--calc-qty-inline-price-color,var(--calc-color-text,#111827));
  white-space:nowrap;
  justify-self:end;
  text-align:right;
}
.calc-qty-inline-row__savings{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}
.calc-qty-inline-row__savings[hidden]{display:none}
.calc-qty-inline-savings-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:4px;
  font-size:var(--calc-qty-inline-savings-badge-size,12px);
  font-weight:var(--calc-qty-inline-savings-badge-weight,600);
  line-height:1.25;
  color:var(--calc-qty-inline-savings-badge-color,#fff);
  background:var(--calc-qty-inline-savings-badge-bg,#15803d);
  white-space:nowrap;
}
@media (max-width:480px){
  .calc-qty-inline-row{
    flex-direction:column;
    align-items:stretch;
  }
  .calc-qty-inline-row__meta{
    grid-template-columns:1fr;
    row-gap:2px;
    flex:1 1 auto;
    padding-left:calc(var(--calc-qty-radio-size,16px) + var(--calc-qty-radio-row-gap,6px));
  }
  .calc-qty-inline-row__price{
    white-space:normal;
    justify-self:end;
    text-align:right;
  }
  .calc-qty-inline-row__savings{
    justify-self:start;
    text-align:left;
  }
}