/*
 * budget-calculator — the Paint Budget Calculator (inputs, product selection
 * per surface, estimate and PDF). Source: asianpaints.com/resources/tools/
 * paint-budget-calculator (section "budgetcalculatorrevamp"). Authoring and
 * behaviour: README.md.
 *
 * Every value is the source's computed value at 1440px (desktop, from 992px)
 * or 390px (mobile, up to 991px; the source's breakpoints). Between 992px and
 * 1439px the source zooms the whole page (0.7 / 0.75 / 0.8 / 0.85 / 0.9); the
 * site's styles.css does the same on the body, so the block adds none. Colours are scoped custom properties.
 * Icons are the source's (tick, check-mark, back-arrow, edit-icon,
 * skip-information, arrow-icon, download-icon, arrow-rotate-right and the
 * slider arrows), inlined.
 *
 * Fonts: the source sets everything in "Manrope". This repo does not load
 * Manrope (the main site does); see README.
 */

/* rules follow the source's cascade (base, then state / hover overrides per
   component), which this lint rule cannot express without reordering */
/* stylelint-disable no-descending-specificity */

/* the tool is full-bleed; the block pads itself like the source */
main > .section.budget-calculator-container {
  margin: 0;
}

main > .section.budget-calculator-container > .budget-calculator-wrapper {
  max-width: none;
  padding: 0;
}

.budget-calculator {
  /* source values */
  --bc-text: #222;
  --bc-white: #fff;
  --bc-black: #000;
  --bc-purple-900: #3a1f63; /* panels, outline CTA */
  --bc-purple-800: #512b8b; /* title, notes */
  --bc-purple-700: #4a277e; /* result title */
  --bc-purple-600: #7455a2; /* description */
  --bc-purple-550: #644b8b; /* desktop notes */
  --bc-purple-500: #654d8a; /* prices */
  --bc-purple-400: #8a71b1; /* title accent, active step */
  --bc-purple-300: #af9dca; /* steps, walls tile, quantity bubble */
  --bc-purple-250: #c9bddb; /* option labels, "For:" */
  --bc-purple-200: #dbd3e7; /* titles on purple, top coat card */
  --bc-purple-100: #eeeaf3; /* step heading, undercoats card */
  --bc-green: #2fb464; /* step done */
  --bc-check-green: #00c853; /* chosen product */
  --bc-grey-900: #2e2f32;
  --bc-grey-850: #3b3d40;
  --bc-grey-800: #53565a;
  --bc-grey-750: #56585a;
  --bc-grey-700: #75787b;
  --bc-grey-600: #8c8e90;
  --bc-grey-500: #4d4d4d;
  --bc-grey-100: #eeeeef;
  --bc-ink: #161515;
  --bc-ink-2: #292929;
  --bc-ink-3: #2b2b2b;
  --bc-dark: #232426;
  --bc-total: #22123a;
  --bc-red: #ed1c24;
  --bc-red-2: #ee4137;
  --bc-error: #f00;
  --bc-card-border: #efefef;
  --bc-hover: #fff7e8;
  --bc-focus-bg: #feeecf;
  --bc-popup: #fdfbf8;
  --bc-popup-text: #b37c10;
  --bc-jump-bg: #fefcf7;
  --bc-jump-border: #e0e0e0;
  --bc-total-bg: #eef1f3;
  --bc-beige: #cdc0a0;
  --bc-beige-400: #ece5d7;
  --bc-beige-200: #faf6ef;
  --bc-beige-ink: #fef9f2;
  --bc-indigo: #8093b3;
  --bc-indigo-50: #eceff4;
  --bc-solitude: #dfe7f5;
  --bc-cta-bar: #e0ecf9;
  --bc-yellow-gradient: linear-gradient(180deg, #fec940, #f90);
  --bc-yellow-hover: #fdbf45;
  --bc-yellow-mobile: #fcaf17;
  --bc-backdrop: rgb(0 0 0 / 50%);
  --bc-qty-glow: 0 0 8px 0 rgb(255 255 255 / 80%);
  --bc-jump-shadow: 0 2px 10px rgb(0 0 0 / 10%);
  --bc-focus: #232426;
  --bc-focus-light: #fff;

  /* Contrast: the source's values are kept (WCAG 1.4.3 / 1.4.11 failures
     flagged). Swap in the compliant alternative to fix; full table in README.
     --bc-grey-700: #67696c;   area text, column titles: 3.74-4.44:1 -> 4.64:1+
     --bc-grey-600: #5b5d5f;   notes, units, "(Inclusive of all taxes)": 2.26-3.28:1 -> 4.56:1+
     --bc-error: #e00000;      area error on white: 4.00:1 -> 5.04:1
     --bc-red: #d71920;        asterisks on white: 4.38:1 -> 5.19:1
     --bc-red-2: #d4291f;      card asterisks on white: 3.86:1 -> 5.08:1
     --bc-popup-text: #946609; skip popup text on #fdfbf8: 3.50:1 -> 4.88:1
     --bc-purple-300: #7a5ca7; as the walls/ceiling tile and quantity bubble
                               background (light text 2.08-2.47:1 -> 4.52:1+);
                               keep #af9dca for step text on #3a1f63 (5.46:1)
     --bc-purple-400: #6a4f99; active step number (#dbd3e7 on it): 2.85:1 -> 4.54:1;
                               the title accent stays large text (6.58:1)
     --bc-beige: #837145;     wood tile / bubble: 1.72-1.80:1 -> 4.54:1+
     --bc-indigo: #576d92;     metal tile / bubble: 2.70-3.11:1 -> 4.55:1+
     --bc-check-green: #009a44; chosen-product box on white (1.4.11): 2.24:1 -> 3.68:1 */

  position: relative;
  color: var(--bc-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.budget-calculator *,
.budget-calculator *::before,
.budget-calculator *::after {
  box-sizing: border-box;
}

.budget-calculator [hidden] {
  display: none !important;
}

.budget-calculator .bc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.budget-calculator h2,
.budget-calculator h3,
.budget-calculator h4,
.budget-calculator p,
.budget-calculator ul,
.budget-calculator ol,
.budget-calculator fieldset,
.budget-calculator legend {
  margin: 0;
  padding: 0;
}

.budget-calculator fieldset {
  min-width: 0;
  border: 0;
}

.budget-calculator h2:focus,
.budget-calculator h3:focus,
.budget-calculator li:focus {
  outline: none;
}

/* ---------- icons ---------- */
.budget-calculator .bc-icon {
  display: inline-block;
  flex: none;
  background: center / contain no-repeat;
}

.budget-calculator .bc-icon-arrow {
  width: 17px;
  height: 20px;
  background-image: url('data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cg id=%22Icon%22%3E %3Cg id=%22Icon_2%22%3E %3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M10.2563 4.13128C10.598 3.78957 11.152 3.78957 11.4937 4.13128L16.7437 9.38128C17.0854 9.72299 17.0854 10.277 16.7437 10.6187L11.4937 15.8687C11.152 16.2104 10.598 16.2104 10.2563 15.8687C9.91457 15.527 9.91457 14.973 10.2563 14.6313L14.0126 10.875L3.875 10.875C3.39175 10.875 3 10.4832 3 10C3 9.51675 3.39175 9.125 3.875 9.125H14.0126L10.2563 5.36872C9.91457 5.02701 9.91457 4.47299 10.2563 4.13128Z%22 fill=%22%23FF0D0D%22 style=%22mix-blend-mode:saturation%22/%3E %3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M10.2563 4.13128C10.598 3.78957 11.152 3.78957 11.4937 4.13128L16.7437 9.38128C17.0854 9.72299 17.0854 10.277 16.7437 10.6187L11.4937 15.8687C11.152 16.2104 10.598 16.2104 10.2563 15.8687C9.91457 15.527 9.91457 14.973 10.2563 14.6313L14.0126 10.875L3.875 10.875C3.39175 10.875 3 10.4832 3 10C3 9.51675 3.39175 9.125 3.875 9.125H14.0126L10.2563 5.36872C9.91457 5.02701 9.91457 4.47299 10.2563 4.13128Z%22 fill=%22white%22 style=%22mix-blend-mode:difference%22/%3E %3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M10.2563 4.13128C10.598 3.78957 11.152 3.78957 11.4937 4.13128L16.7437 9.38128C17.0854 9.72299 17.0854 10.277 16.7437 10.6187L11.4937 15.8687C11.152 16.2104 10.598 16.2104 10.2563 15.8687C9.91457 15.527 9.91457 14.973 10.2563 14.6313L14.0126 10.875L3.875 10.875C3.39175 10.875 3 10.4832 3 10C3 9.51675 3.39175 9.125 3.875 9.125H14.0126L10.2563 5.36872C9.91457 5.02701 9.91457 4.47299 10.2563 4.13128Z%22 fill=%22white%22 style=%22mix-blend-mode:saturation%22/%3E %3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M10.2563 4.13128C10.598 3.78957 11.152 3.78957 11.4937 4.13128L16.7437 9.38128C17.0854 9.72299 17.0854 10.277 16.7437 10.6187L11.4937 15.8687C11.152 16.2104 10.598 16.2104 10.2563 15.8687C9.91457 15.527 9.91457 14.973 10.2563 14.6313L14.0126 10.875L3.875 10.875C3.39175 10.875 3 10.4832 3 10C3 9.51675 3.39175 9.125 3.875 9.125H14.0126L10.2563 5.36872C9.91457 5.02701 9.91457 4.47299 10.2563 4.13128Z%22 fill=%22white%22 style=%22mix-blend-mode:overlay%22/%3E %3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M10.2563 4.13128C10.598 3.78957 11.152 3.78957 11.4937 4.13128L16.7437 9.38128C17.0854 9.72299 17.0854 10.277 16.7437 10.6187L11.4937 15.8687C11.152 16.2104 10.598 16.2104 10.2563 15.8687C9.91457 15.527 9.91457 14.973 10.2563 14.6313L14.0126 10.875L3.875 10.875C3.39175 10.875 3 10.4832 3 10C3 9.51675 3.39175 9.125 3.875 9.125H14.0126L10.2563 5.36872C9.91457 5.02701 9.91457 4.47299 10.2563 4.13128Z%22 fill=%22black%22 style=%22mix-blend-mode:overlay%22/%3E %3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M10.2563 4.13128C10.598 3.78957 11.152 3.78957 11.4937 4.13128L16.7437 9.38128C17.0854 9.72299 17.0854 10.277 16.7437 10.6187L11.4937 15.8687C11.152 16.2104 10.598 16.2104 10.2563 15.8687C9.91457 15.527 9.91457 14.973 10.2563 14.6313L14.0126 10.875L3.875 10.875C3.39175 10.875 3 10.4832 3 10C3 9.51675 3.39175 9.125 3.875 9.125H14.0126L10.2563 5.36872C9.91457 5.02701 9.91457 4.47299 10.2563 4.13128Z%22 fill=%22white%22 style=%22mix-blend-mode:overlay%22/%3E %3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M10.2563 4.13128C10.598 3.78957 11.152 3.78957 11.4937 4.13128L16.7437 9.38128C17.0854 9.72299 17.0854 10.277 16.7437 10.6187L11.4937 15.8687C11.152 16.2104 10.598 16.2104 10.2563 15.8687C9.91457 15.527 9.91457 14.973 10.2563 14.6313L14.0126 10.875L3.875 10.875C3.39175 10.875 3 10.4832 3 10C3 9.51675 3.39175 9.125 3.875 9.125H14.0126L10.2563 5.36872C9.91457 5.02701 9.91457 4.47299 10.2563 4.13128Z%22 fill=%22black%22 style=%22mix-blend-mode:overlay%22/%3E %3C/g%3E %3C/g%3E %3C/svg%3E');
}

.budget-calculator .bc-icon-back {
  width: 10px;
  height: 9px;
  margin-right: 12px;
  background-image: url('data:image/svg+xml,%3Csvg width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M5.16667 10.375L1 6M1 6L5.16667 1.625M1 6H11%22 stroke=%22%23C9BDDB%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3C/svg%3E');
}

.budget-calculator .bc-icon-edit {
  width: 15px;
  height: 15px;
  margin-right: 14px;
  background-image: url('data:image/svg+xml,%3Csvg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M10.4487 3.95241L14.0487 7.55241M1.44873 16.5524L5.81472 15.6727C6.04649 15.626 6.25931 15.5119 6.42645 15.3446L16.2001 5.56559C16.6687 5.09674 16.6684 4.33675 16.1994 3.86829L14.129 1.80021C13.6602 1.33194 12.9006 1.33226 12.4322 1.80092L2.65749 11.581C2.49068 11.7479 2.37678 11.9603 2.33003 12.1916L1.44873 16.5524Z%22 stroke=%22%23C9BDDB%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3C/svg%3E');
}

.budget-calculator .bc-icon-info {
  width: 20px;
  height: 18px;
  margin-top: 6px;
  background-image: url('data:image/svg+xml,%3Csvg width=%2220%22 height=%2218%22 viewBox=%220 0 20 18%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M10 9.90003V5.41447M10 13.2248V13.2642M15.6699 17H4.33007C2.7811 17 1.47392 15.9763 1.06265 14.5757C0.887092 13.9778 1.10281 13.3551 1.43276 12.8249L7.10269 2.60102C8.4311 0.466323 11.5689 0.466326 12.8973 2.60103L18.5672 12.8249C18.8972 13.3551 19.1129 13.9778 18.9373 14.5757C18.5261 15.9763 17.2189 17 15.6699 17Z%22 stroke=%22%23B37C10%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3C/svg%3E');
}

.budget-calculator .bc-icon-download {
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml,%3Csvg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cg id=%22download%22%3E %3Cmask id=%22mask0_72_487%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2218%22 height=%2218%22%3E %3Crect id=%22Bounding box%22 width=%2218%22 height=%2218%22 fill=%22%23D9D9D9%22/%3E %3C/mask%3E %3Cg mask=%22url(%23mask0_72_487)%22%3E %3Cpath id=%22download_2%22 d=%22M9 12L5.25 8.25L6.3 7.1625L8.25 9.1125V3H9.75V9.1125L11.7 7.1625L12.75 8.25L9 12ZM4.5 15C4.0875 15 3.73438 14.8531 3.44063 14.5594C3.14688 14.2656 3 13.9125 3 13.5V11.25H4.5V13.5H13.5V11.25H15V13.5C15 13.9125 14.8531 14.2656 14.5594 14.5594C14.2656 14.8531 13.9125 15 13.5 15H4.5Z%22 fill=%22%231C1B1F%22/%3E %3C/g%3E %3C/g%3E %3C/svg%3E');
  filter: invert(1);
}

.budget-calculator .bc-icon-again {
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E %3Cpath d=%22M19.1288 14.5C18.1109 17.6939 15.1954 20 11.7576 20C7.47319 20 4 16.4183 4 12C4 7.58172 7.47319 4 11.7576 4C14.2706 4 16.5045 5.23225 17.9221 7.14279M18.4773 8C18.3099 7.70154 18.1243 7.41526 17.9221 7.14279M17.9221 7.14279L16.1212 9H20V5L17.9221 7.14279ZM18.0606 8.66667L19.2727 7%22 stroke=%22black%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3C/svg%3E');
}

.budget-calculator .bc-icon-down {
  width: 17px;
  height: 18px;
  background-image: url('/eds/icons/arrow-down-icon.svg');
}

/* ---------- CTAs ---------- */
.budget-calculator .bc-cta {
  position: relative;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 45px;
  background: transparent;
  color: var(--bc-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.budget-calculator .bc-cta:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 2px;
}

.budget-calculator .bc-spinner {
  display: none;
}

.budget-calculator .is-busy .bc-spinner {
  display: inline-block;
  animation: bc-spin 1s linear infinite;
}

.budget-calculator .is-busy .bc-spinner::before {
  content: "↻";
}

@keyframes bc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* step CTAs: grey while inactive, black once a surface is ticked */
.budget-calculator .bc-cta-step {
  width: 100%;
  border-color: var(--bc-dark);
  background-color: var(--bc-black);
  color: var(--bc-white);
}

.budget-calculator .bc-cta-step[aria-disabled="true"] {
  border-color: var(--bc-grey-600);
  background-color: var(--bc-grey-100);
  color: var(--bc-grey-750);
  cursor: pointer;
}

/* mobile: the source's "Get expert recommendations" is an outline once active */
.budget-calculator .bc-input .bc-expert:not([aria-disabled="true"]) {
  background-color: transparent;
  color: var(--bc-dark);
}

.budget-calculator .bc-input .bc-expert:not([aria-disabled="true"]):hover {
  border-color: var(--bc-dark);
  background-color: var(--bc-hover);
}

.budget-calculator .bc-cta-outline {
  height: 32px;
  padding: 5.5px 14.5px;
  border-color: var(--bc-purple-900);
  color: var(--bc-purple-900);
  font-size: 14px;
  line-height: 21px;
}

.budget-calculator .bc-cta-outline:hover {
  background-color: var(--bc-hover);
}

.budget-calculator .bc-cta-outline:focus-visible {
  background-color: var(--bc-focus-bg);
}

.budget-calculator .bc-proceed {
  width: 230px;
  height: 32px;
  padding: 5.5px 78px;
  font-size: 14px;
  line-height: 21px;
}

.budget-calculator .bc-proceed[aria-disabled="true"] {
  border-color: var(--bc-grey-100);
  color: var(--bc-grey-600);
}

.budget-calculator .bc-cta-dark {
  height: 44px;
  padding: 12px 18px;
  border-color: transparent;
  background-color: var(--bc-black);
  color: var(--bc-white);
  line-height: 24px;
}

.budget-calculator .bc-cta-dark:hover {
  border-color: var(--bc-dark);
  background-color: var(--bc-hover);
  color: var(--bc-black);
}

.budget-calculator .bc-cta-dark:hover .bc-icon-download {
  filter: none;
}

/* the source turns the text black on its black fill on focus; kept readable here */
.budget-calculator .bc-cta-dark:focus-visible {
  outline-color: var(--bc-focus);
}

.budget-calculator .bc-cta-outline-dark {
  height: 44px;
  padding: 12px 18px;
  border-color: var(--bc-dark);
  color: var(--bc-text);
  line-height: 24px;
}

.budget-calculator .bc-cta-outline-dark:hover {
  background-color: var(--bc-hover);
}

.budget-calculator .bc-cta-outline-dark:focus-visible {
  background-color: var(--bc-focus-bg);
}

.budget-calculator .bc-cta-popup {
  width: 139px;
  height: 32px;
  padding: 12px 18px;
  border-color: var(--bc-dark);
  color: var(--bc-text);
  font-size: 14px;
}

.budget-calculator .bc-cta-popup:hover {
  background-color: var(--bc-hover);
}

.budget-calculator .bc-cta-popup:focus-visible {
  background-color: var(--bc-focus-bg);
}

.budget-calculator .bc-cta-yellow {
  height: 30px;
  padding: 5px 20px;
  border: 0;
  background: var(--bc-yellow-mobile);
  color: var(--bc-black);
  font-size: 14px;
  line-height: 21px;
}

.budget-calculator .bc-cta-yellow .bc-icon-arrow {
  display: none;
  filter: contrast(10) invert(1) sepia(1) saturate(100) hue-rotate(90deg);
}

.budget-calculator .bc-cta-yellow:is(:hover, :focus-visible) {
  background: var(--bc-yellow-hover);
  color: var(--bc-dark);
}

.budget-calculator .bc-cta-yellow:is(:hover, :focus-visible) .bc-icon-arrow {
  filter: invert(1);
}

.budget-calculator .bc-link {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 0;
  background: transparent;
  color: var(--bc-purple-200);
  font-size: 12px;
  line-height: 16.8px;
  cursor: pointer;
}

.budget-calculator .bc-link:focus-visible {
  outline: 2px solid var(--bc-focus-light);
  outline-offset: 2px;
}

.budget-calculator .bc-link .bc-icon-back,
.budget-calculator .bc-link .bc-icon-edit {
  margin-right: 7px;
}

.budget-calculator .bc-or {
  display: block;
  margin: 7px 0;
  color: var(--bc-grey-600);
  font-weight: 500;
  line-height: 21px;
  text-align: center;
}

/* ---------- intro (title, text, circle) ---------- */
.budget-calculator .bc-intro {
  position: relative;
}

.budget-calculator .bc-circle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: fit-content;
}

.budget-calculator .bc-title {
  margin-bottom: 7px;
  color: var(--bc-purple-800);
  font-size: 24px;
  font-weight: 800;
  line-height: 28px;
}

.budget-calculator .bc-title-accent {
  display: inline;
  color: var(--bc-purple-400);
}

.budget-calculator .bc-description {
  width: 80%;
  margin-bottom: 14px;
  color: var(--bc-purple-600);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}

/* ---------- get in touch card ---------- */
.budget-calculator .bc-touch {
  position: relative;
  display: none;
  margin: 20px 0;
}

.budget-calculator .bc-touch picture,
.budget-calculator .bc-touch img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.budget-calculator .bc-touch-cta {
  position: absolute;
  bottom: 48px;
  left: 45%;
}

.budget-calculator .bc-touch.is-footer {
  display: block;
  margin: 20px 16px;
}

/* =================== screen 1: inputs =================== */
.budget-calculator .bc-input {
  position: relative;
  display: block;
  padding: 22px 16px 18px;
}

.budget-calculator .bc-bg,
.budget-calculator .bc-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.budget-calculator .bc-input > .bc-intro,
.budget-calculator .bc-input > .bc-form {
  position: relative;
}

.budget-calculator .bc-choices {
  padding: 15px 18px;
  border-radius: 10px;
  background-color: var(--bc-purple-900);
}

.budget-calculator .bc-choice.is-need {
  margin-top: 17px;
}

.budget-calculator .bc-choice-title {
  width: 100%;
  margin-bottom: 6px;
  color: var(--bc-purple-200);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.5px;
  text-align: center;
}

.budget-calculator .bc-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}

.budget-calculator .bc-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--bc-white);
  text-align: center;
  cursor: pointer;
}

/* native radio, visually hidden over the picture (the source hides it entirely) */
.budget-calculator .bc-radio {
  position: absolute;
  top: 0;
  left: 50%;
  width: 138px;
  height: 138px;
  margin: 0;
  opacity: 0;
  transform: translateX(-50%);
  cursor: pointer;
}

.budget-calculator .bc-option-media {
  position: relative;
  display: block;

  /* 138px as the source; shrinks below 340px so 320px does not scroll sideways (WCAG 1.4.10) */
  width: min(138px, 100%);
  overflow: hidden;
  aspect-ratio: 1;
  border: 5px solid transparent;
  border-radius: 50%;
  transition: border 0.3s;
}

.budget-calculator .is-need .bc-option-media,
.budget-calculator .is-need .bc-option-media img {
  border-radius: 10px;
}

.budget-calculator .bc-option-media picture,
.budget-calculator .bc-option-media img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.budget-calculator .bc-radio:focus-visible + .bc-option-media {
  outline: 2px solid var(--bc-focus-light);
  outline-offset: 2px;
}

.budget-calculator .bc-tick {
  position: absolute;
  right: 49px;
  bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bc-white);
}

.budget-calculator .bc-tick-icon {
  display: block;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M13.142 7.98299L8.875 12.25L7.42049 10.7955M10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1Z%22 stroke=%22%232BA45B%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3C/svg%3E') center / contain no-repeat;
  visibility: hidden;
}

.budget-calculator .bc-radio:checked + .bc-option-media .bc-tick-icon {
  visibility: visible;
}

.budget-calculator .bc-option-label {
  display: block;
  margin-top: 4px;
  color: var(--bc-purple-250);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

/* surfaces and areas */
.budget-calculator .bc-surfaces {
  width: 100%;
  margin-top: 15px;
  padding: 15px 18px 10px;
  border-radius: 10px;
  background-color: var(--bc-white);
}

.budget-calculator .bc-surfaces-title {
  float: left;
  width: 100%;
  margin-bottom: 18px;
  color: var(--bc-grey-850);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 0.5px;
  text-align: center;
}

.budget-calculator .bc-surface-list {
  clear: both;
}

.budget-calculator .bc-check {
  position: relative;
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  cursor: pointer;
}

.budget-calculator .bc-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.budget-calculator .bc-checkbox-mark {
  position: relative;
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid var(--bc-grey-800);
  border-radius: 4px;
}

.budget-calculator .bc-checkbox:checked + .bc-checkbox-mark {
  background: #4c4e52;
}

.budget-calculator .bc-checkbox:checked + .bc-checkbox-mark::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 3.5px;
  display: block;
  width: 12px;
  height: 10px;
  background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%229%22 viewBox=%220 0 12 9%22 fill=%22none%22%3E %3Cpath d=%22M1.5 4.5L4.5 7.5L10.5 1.5%22 stroke=%22white%22 stroke-width=%222%22 stroke-miterlimit=%2210%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3C/svg%3E') no-repeat;
}

.budget-calculator .bc-checkbox:focus-visible + .bc-checkbox-mark {
  outline: 2px solid var(--bc-focus);
  outline-offset: 2px;
}

.budget-calculator .bc-check-label {
  color: var(--bc-grey-800);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.budget-calculator .bc-surface.is-on .bc-check-label {
  color: var(--bc-grey-900);
}

.budget-calculator .bc-area {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 12px 5px;
  border: 1px solid var(--bc-grey-700);
  border-radius: 5px;
  outline: 0;
  background: var(--bc-white);
  color: var(--bc-grey-700);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  appearance: none;
}

.budget-calculator .bc-area::placeholder {
  color: var(--bc-grey-700);
  font-weight: 400;
  opacity: 1;
}

.budget-calculator .bc-area:disabled {
  border-color: var(--bc-grey-850);
  background-color: rgb(239 239 239 / 30%);
  opacity: 0.5;
}

/* the source shows no focus ring on the area field, only its grey border */
.budget-calculator .bc-area:focus-visible {
  outline: 0;
}

.budget-calculator .bc-area-error {
  margin-top: 2px;
  color: var(--bc-error);
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: 0.5px;
  visibility: hidden;
}

.budget-calculator .bc-surface.is-invalid .bc-area-error {
  visibility: visible;
}

.budget-calculator .bc-surface.is-invalid .bc-area {
  border-color: var(--bc-error);
}

.budget-calculator .bc-bottom {
  margin-top: 15px;
}

.budget-calculator .bc-notes p {
  margin-bottom: 14px;
  color: var(--bc-purple-800);
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: 0.5px;
}

.budget-calculator .bc-cta-row .bc-cta-step {
  display: flex;
}

/* mobile: the notes and buttons sit under the white box (the source's bottom-bar-mobile) */
.budget-calculator .bc-input .bc-surfaces {
  margin-bottom: 0;
}

/* =================== screen 2: selection =================== */
.budget-calculator .bc-select-top {
  position: relative;
  display: block;
  padding: 22px 14px 2px;
}

.budget-calculator .bc-select-top > .bc-intro {
  display: none;
}

.budget-calculator .bc-panel {
  position: relative;
  width: 100%;
  height: 326px;
  border-radius: 10px;
  background-color: var(--bc-purple-900);
}

.budget-calculator .bc-bulge {
  position: absolute;
  bottom: -118px;
  left: -50px;
  display: block;
  width: 190px;
  height: 150px;
  pointer-events: none;
}

.budget-calculator .bc-panel-inner {
  position: relative;
  padding: 0 16px;
  color: var(--bc-white);
}

.budget-calculator .bc-panel-nav {
  display: flex;
  justify-content: space-between;
  padding: 20px 0 18px;
}

.budget-calculator .bc-step-desc {
  text-align: left;
}

.budget-calculator .bc-step-title {
  margin-bottom: 6px;
  color: var(--bc-purple-100);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.budget-calculator .bc-for {
  margin-bottom: 14px;
  color: var(--bc-purple-250);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5px;
}

.budget-calculator .bc-steps {
  display: block;
  margin-top: 28px;
  list-style: none;
}

.budget-calculator .bc-step {
  display: flex;
  align-items: baseline;
  color: var(--bc-purple-300);
}

.budget-calculator .bc-step-num {
  display: block;
  flex: none;
  width: 27px;
  height: 27px;
  padding: 2px 7px;
  border: 1px solid var(--bc-purple-300);
  border-radius: 50%;
  color: var(--bc-purple-200);
  text-align: center;
}

.budget-calculator .bc-step.is-active .bc-step-num {
  border-color: var(--bc-purple-400);
  background-color: var(--bc-purple-400);
}

.budget-calculator .bc-step.is-done .bc-step-num {
  border-color: var(--bc-green);
  background-color: var(--bc-green);
}

.budget-calculator .bc-step-name {
  display: block;
  margin: 4px 6px;
  padding-bottom: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.5px;
  text-align: left;
}

.budget-calculator .bc-step.is-active .bc-step-name {
  color: var(--bc-white);
}

.budget-calculator .bc-step-area,
.budget-calculator .bc-step-skipped {
  display: block;
  margin-bottom: 5px;
  padding: 0 5px;
  color: var(--bc-purple-300);
  font-weight: 500;
  line-height: 21px;
  text-align: left;
}

.budget-calculator .bc-select-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  align-items: flex-end;
  padding-top: 10px;
}

.budget-calculator .bc-select-actions .bc-or {
  display: none;
}

.budget-calculator .bc-skip-wrap {
  position: relative;
}

.budget-calculator .bc-skip {
  width: 230px;
}

.budget-calculator .bc-skip-popup {
  position: absolute;
  right: 13px;
  bottom: 50px;
  z-index: 1052;
  width: 311px;
  max-width: calc(100vw - 32px);
  padding: 20px 12px;
  border-radius: 4px;
  background: var(--bc-popup);
}

.budget-calculator .bc-skip-popup::after {
  content: "";
  position: absolute;
  top: calc(100% - 20px);
  right: 136px;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-top-left-radius: 4px;
  border-top-right-radius: 2px;
  background-color: var(--bc-popup);
  transform: rotate(45deg);
}

.budget-calculator .bc-skip-desc {
  display: flex;
  gap: 10px;
  align-items: start;
  justify-content: space-between;
  padding: 0 6px;
}

.budget-calculator .bc-skip-desc p {
  color: var(--bc-popup-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  letter-spacing: 0.5px;
}

.budget-calculator .bc-skip-ctas {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}

.budget-calculator .bc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: var(--bc-backdrop);
}

.budget-calculator .bc-select-note {
  margin-bottom: 4px;
  padding-top: 10px;
  color: var(--bc-grey-600);
  font-size: 11px;
  line-height: 16.8px;
  letter-spacing: 0.5px;
  text-align: right;
}

/* products */
.budget-calculator .bc-products {
  padding-top: 40px;
}

.budget-calculator .bc-jump {
  position: relative;
  z-index: 1038;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 8px 0 16px;
  padding: 8px 18px;
  overflow-x: auto;
  border-top: 1px solid var(--bc-jump-border);
  border-bottom: 1px solid var(--bc-jump-border);
  background: var(--bc-jump-bg);
  white-space: nowrap;
  scrollbar-width: none;
}

.budget-calculator .bc-jump::-webkit-scrollbar {
  display: none;
}

.budget-calculator .bc-jump.is-stuck {
  position: sticky;
  top: var(--nav-height, 64px);
  box-shadow: var(--bc-jump-shadow);
}

.budget-calculator .bc-jump a {
  flex: 0 0 auto;
  padding: 8px 10px;
  color: var(--bc-ink-3);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  text-transform: capitalize;
  cursor: pointer;
}

.budget-calculator .bc-jump a.is-active {
  border-bottom: 1.5px solid var(--bc-black);
  color: var(--bc-black);
  font-weight: 700;
}

.budget-calculator .bc-jump a:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: -2px;
}

.budget-calculator .bc-tier {
  padding: 15px;
  scroll-margin-top: calc(var(--nav-height, 64px) + 70px);
}

.budget-calculator .is-walls .bc-tier {
  padding: 0;
}

.budget-calculator .is-walls .bc-tier > .bc-cards {
  padding-left: 15px;
}

.budget-calculator .bc-surface-products:not(.is-walls) .bc-cards {
  margin: 0 -7px;
}

.budget-calculator .is-woods .bc-card-title,
.budget-calculator .is-metals .bc-card-title {
  min-height: 25px;
}

.budget-calculator .bc-tier-title {
  margin: 0 0 10px;
  color: var(--bc-black);
  font-size: 16px;
  font-weight: 800;
  line-height: normal;
}

.budget-calculator .bc-surface-products:not(.is-walls) .bc-tier-title {
  margin-left: -4px;
}

.budget-calculator .is-walls .bc-tier-title {
  margin-left: 15px;
}

.budget-calculator .bc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
  list-style: none;
}

.budget-calculator .bc-card[hidden] {
  display: none;
}

.budget-calculator .bc-card-view {
  position: relative;
  display: grid;
  height: 100%;
  padding: 17px 10px 10px;
  border: 1px solid var(--bc-card-border);
  border-radius: 8px;
  background-color: var(--bc-white);
}

.budget-calculator .bc-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.budget-calculator .bc-card-media {
  width: 50px;
  margin: 0 auto;
}

.budget-calculator .bc-card-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;

  /* the source keeps each packshot's own ratio; 80 / 90 (its width/height) reserves space until it loads */
  aspect-ratio: auto 80 / 90;
}

.budget-calculator .bc-card-title {
  align-self: stretch;
  min-height: 20px;
  margin: 5px 0 10px;
  color: var(--bc-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 14.4px;
  text-align: center;
}

.budget-calculator .bc-card-tags {
  align-self: stretch;
  padding: 0;
  list-style: disc;
}

.budget-calculator .bc-card-tags li {
  margin-left: 16px;
  color: var(--bc-black);
  font-size: 10px;
  line-height: normal;
}

.budget-calculator .bc-card-mrp {
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;
  text-align: center;
}

.budget-calculator .bc-card-pick {
  display: flex;
  align-self: end;
  justify-content: center;
  padding: 35px 0 3px;
  transform: translateY(10px);
}

.budget-calculator .bc-card-price {
  color: var(--bc-ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 16.39px;
}

.budget-calculator .bc-rs {
  margin-right: 3px;
  font-weight: 400;
  line-height: 13.2px;
}

.budget-calculator .bc-amount {
  font-weight: 700;
  line-height: 14.4px;
}

.budget-calculator .bc-card-tax {
  color: var(--bc-grey-500);
  font-size: 11px;
  line-height: 15.03px;
}

.budget-calculator .bc-asterisk {
  color: var(--bc-red-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 16.39px;
}

.budget-calculator .bc-pick {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 7px;
  padding: 0 0 0 25px;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  cursor: pointer;
}

/* the source's ceiling cards indent the label 20px instead of 25px */
.budget-calculator .is-ceilings .bc-pick {
  padding-left: 20px;
}

.budget-calculator .bc-pick-input {
  position: absolute;
  top: 1px;
  left: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.budget-calculator .bc-pick-mark {
  position: absolute;
  top: 2px;
  left: 0;
  width: 15px;
  height: 14px;
  border: 1px solid var(--bc-black);
  border-radius: 2px;
  background: var(--bc-white);
}

.budget-calculator .bc-pick-input:checked + .bc-pick-mark {
  border-color: var(--bc-check-green);
  background: var(--bc-check-green);
}

.budget-calculator .bc-pick-input:checked + .bc-pick-mark::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4.5px;
  width: 4px;
  height: 9px;
  border: solid var(--bc-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.budget-calculator .bc-pick-input:focus-visible + .bc-pick-mark {
  outline: 2px solid var(--bc-focus);
  outline-offset: 2px;
}

.budget-calculator .bc-pick-label {
  text-transform: capitalize;
}

.budget-calculator .bc-disclaimer {
  margin: 30px 0;
  color: var(--bc-ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 14.3px;
}

.budget-calculator .bc-disclaimer .bc-asterisk {
  color: var(--bc-red-2);
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}

.budget-calculator .is-walls .bc-disclaimer {
  width: 80%;
  margin-top: 48px;
  padding-left: 16px;
}

/* mobile pager (2 x 2 per page, buttons under the cards) */
.budget-calculator .bc-pager {
  position: relative;
  padding-left: 15px;
}

.budget-calculator .bc-pager .bc-cards {
  /* the source's last card keeps its 12px bottom margin inside the slider */
  margin-bottom: 30px;
  padding-bottom: 12px;
  padding-right: 16px;
}

/* the source's mobile slider cards stack the price under the tags */
.budget-calculator .bc-pager .bc-card-view {
  display: flex;
  flex-direction: column;
  padding: 15px 0 12px;
}

.budget-calculator .bc-pager .bc-card-title {
  min-height: 28px;
  margin: 10px 0 6px;
}

.budget-calculator .bc-pager .bc-card-tags li {
  margin-left: 20px;
}

.budget-calculator .bc-pager .bc-card-mrp {
  position: static;
  padding: 16px 0 11px;
}

.budget-calculator .bc-pager .bc-card-pick {
  align-self: center;
  padding: 0;
  transform: none;
}

.budget-calculator .bc-pager-btn {
  position: absolute;
  bottom: -35px;
  left: 50%;
  display: none;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: center / 34px 34px no-repeat;
  cursor: pointer;
}

.budget-calculator .bc-pager.has-nav .bc-pager-btn {
  display: inline-block;
}

.budget-calculator .bc-pager-btn.is-prev {
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2234%22 height=%2234%22 viewBox=%220 0 34 34%22 fill=%22none%22%3E %3Cpath d=%22M17 0.5C26.1127 0.5 33.5 7.8873 33.5 17C33.5 26.1127 26.1127 33.5 17 33.5C7.8873 33.5 0.5 26.1127 0.5 17C0.5 7.8873 7.8873 0.5 17 0.5Z%22 stroke=%22%23232426%22/%3E %3Cpath d=%22M15.8886 22.8327L10.333 16.9993M10.333 16.9993L15.8886 11.166M10.333 16.9993L23.6663 16.9993%22 stroke=%22%23232426%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3C/svg%3E');
  transform: translateX(-120%);
}

.budget-calculator .bc-pager-btn.is-next {
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2234%22 height=%2234%22 viewBox=%220 0 34 34%22 fill=%22none%22%3E %3Cpath d=%22M17 0.5C26.1127 0.5 33.5 7.8873 33.5 17C33.5 26.1127 26.1127 33.5 17 33.5C7.8873 33.5 0.5 26.1127 0.5 17C0.5 7.8873 7.8873 0.5 17 0.5Z%22 stroke=%22%23232426%22/%3E %3Cpath d=%22M18.1113 11.166L23.6668 16.9993M23.6668 16.9993L18.1113 22.8327M23.6668 16.9993L10.3335 16.9993%22 stroke=%22%23232426%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3C/svg%3E');
  transform: translateX(20%);
}

.budget-calculator .bc-pager-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.budget-calculator .bc-pager-btn:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 2px;
}

.budget-calculator .bc-load-more {
  display: flex;
  width: max-content;
  height: 38px;
  margin: 45px auto 0;
  font-size: 14px;
  line-height: 22px;
}

/* results: the source's 44px button, centred with a 10px margin and no extra space above */
.budget-calculator .bc-load-more.bc-load-more-result {
  height: 44px;
  padding: 12px 18px;
  margin: 10px auto;
  color: var(--bc-dark);
  font-size: 16px;
  line-height: 24px;
}

.budget-calculator .bc-cards > .bc-card.is-more,
.budget-calculator .bc-rows > .bc-row.is-more {
  display: none;
}

/* =================== screen 3: results =================== */
.budget-calculator .bc-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 340px;
  padding: 25px 16px 20px;

  /* the title's 35% shift pushes its (empty) box past wide viewports */
  overflow-x: clip;
  background: var(--bc-banner-mobile) center / cover no-repeat;
}

.budget-calculator .bc-banner-text {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.budget-calculator .bc-result-title {
  width: 285px;
  color: var(--bc-purple-700);
  font-size: 24px;
  font-weight: 800;
  line-height: 28px;
}

.budget-calculator .bc-banner .bc-result-ctas,
.budget-calculator .bc-banner .bc-touch {
  display: none;
}

.budget-calculator .bc-download.is-mobile {
  display: flex;
  width: calc(100% - 32px);
  margin: 25px 16px 0;
}

.budget-calculator .bc-result-notes {
  padding: 16px 16px 0;
}

.budget-calculator .bc-result-note {
  color: var(--bc-grey-600);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
}

.budget-calculator .bc-astr {
  color: var(--bc-red);
}

.budget-calculator .bc-results {
  display: flex;
  flex-direction: column;
  padding: 20px 16px 0;
}

.budget-calculator .bc-result-section + .bc-result-section {
  margin-top: 40px;
}

.budget-calculator .bc-result-section.is-metal {
  margin-bottom: 25px;
}

.budget-calculator .bc-tile {
  display: flex;
  gap: 10%;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 6px;
  background-color: var(--bc-purple-300);
}

.budget-calculator .is-wood .bc-tile {
  background-color: var(--bc-beige);
}

.budget-calculator .is-metal .bc-tile {
  background-color: var(--bc-indigo);
}

.budget-calculator .bc-tile-title {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: flex-start;
  color: var(--bc-purple-100);
  font-size: 24px;
  font-weight: 800;
  line-height: 33.6px;
}

.budget-calculator .is-wood .bc-tile-title {
  color: var(--bc-beige-ink);
}

.budget-calculator .is-metal .bc-tile-title {
  color: var(--bc-indigo-50);
}

.budget-calculator .bc-tile-area {
  display: flex;
  gap: 20px;
  align-items: center;
}

.budget-calculator .bc-tile-divider {
  display: none;
  width: 1px;
  height: 37px;
  background-color: currentcolor;
}

.budget-calculator .bc-tile-area-value {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
}

.budget-calculator .bc-tile-note {
  flex: 1 1 0%;
  color: var(--bc-white);
  font-size: 11px;
  font-weight: 400;
  line-height: 16.8px;
  text-align: right;
}

.budget-calculator .bc-grid-head {
  display: none;
}

/* mobile: each product is a card; several scroll sideways */
.budget-calculator .bc-rows {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  list-style: none;
}

.budget-calculator .bc-rows:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 2px;
}

.budget-calculator .bc-rows:has(> .bc-row + .bc-row) {
  grid-auto-columns: 90%;
}

.budget-calculator .bc-row {
  display: grid;
  grid-template-columns: 1fr;
  padding: 16px 12px 14px;
  border-radius: 10px;
  background-color: var(--bc-purple-100);
}

.budget-calculator .bc-row.is-wood {
  background-color: var(--bc-beige-200);
}

.budget-calculator .bc-row.is-metal {
  background-color: var(--bc-indigo-50);
}

.budget-calculator .bc-row-col-title {
  display: block;
  margin-bottom: 2px;
  color: var(--bc-grey-700);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
}

.budget-calculator .bc-row-col-title .bc-astr {
  font-weight: 500;
}

.budget-calculator .bc-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.budget-calculator .bc-row-main .bc-item {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 20px;
  margin-bottom: 20px;
  padding: 25px 12px;
  border-radius: 10px;
  background-color: var(--bc-purple-200);
}

.budget-calculator .is-wood .bc-row-main .bc-item {
  background-color: var(--bc-beige-400);
}

.budget-calculator .is-metal .bc-row-main .bc-item {
  background-color: var(--bc-solitude);
}

.budget-calculator .bc-item-media {
  position: relative;
  display: block;
  max-width: 93px;
}

.budget-calculator .bc-item-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.budget-calculator .bc-row-main .bc-item-media {
  grid-area: 1 / 1 / span 2;
  width: 93px;
}

.budget-calculator .bc-qty {
  position: absolute;
  right: -5px;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 7px;
  border-radius: 50%;
  background-color: var(--bc-purple-300);
  box-shadow: var(--bc-qty-glow);
  color: var(--bc-white);
  font-size: 12px;
  font-weight: 500;
  line-height: 100%;
  text-align: center;
}

.budget-calculator .is-wood .bc-qty {
  background-color: var(--bc-beige);
}

.budget-calculator .is-metal .bc-qty {
  background-color: var(--bc-indigo);
}

.budget-calculator .bc-item-title {
  margin-bottom: auto;
  color: var(--bc-grey-900);
  font-weight: 700;
  line-height: 21px;
}

.budget-calculator .bc-row-main .bc-item-title {
  grid-area: 1 / 2;
  align-self: start;
  margin-bottom: 0;
  line-height: 16px;
}

.budget-calculator .bc-item-price {
  color: var(--bc-purple-500);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.budget-calculator .bc-row-main .bc-item-price {
  grid-area: 2 / 2;
  align-self: end;
  margin-bottom: 40px;
}

.budget-calculator .bc-currency,
.budget-calculator .bc-unit {
  color: var(--bc-grey-600);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.budget-calculator .bc-item-note {
  color: var(--bc-grey-600);
  font-weight: 500;
  line-height: 21px;
}

.budget-calculator .bc-row-main .bc-item-note {
  grid-area: 2 / 2;
  align-self: end;
}

.budget-calculator .bc-row-under {
  margin-bottom: 14px;
}

.budget-calculator .bc-under-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  padding: 2px 4px;
}

.budget-calculator .bc-item.is-under {
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}

.budget-calculator .bc-item.is-under .bc-item-title {
  order: 1;
  width: 100%;
  margin-bottom: 4px;
}

.budget-calculator .bc-item.is-under .bc-item-media {
  order: 2;
  width: calc(50% - 5px);
  max-width: none;
}

.budget-calculator .bc-item.is-under .bc-item-media img {
  width: 64px;
}

.budget-calculator .bc-item.is-under .bc-qty {
  top: 50%;
  right: 0;
  bottom: auto;
  width: 60px;
  height: 60px;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  transform: translateY(-50%);
}

.budget-calculator .bc-item-bottom {
  order: 3;
  width: calc(50% - 5px);
  text-align: right;
}

.budget-calculator .bc-item.is-under .bc-item-price {
  font-size: 16px;
  line-height: 24px;
}

.budget-calculator .bc-item.is-under .bc-item-note,
.budget-calculator .bc-item.is-under .bc-unit {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
}

.budget-calculator .bc-wood-text {
  width: 100%;
  margin-left: -4px;
  color: var(--bc-grey-900);
  text-align: left;
}

.budget-calculator .bc-wood-title {
  width: 100%;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.budget-calculator .bc-wood-desc {
  margin-bottom: 15px;
  font-size: 12px;
  font-weight: 500;
  line-height: 21px;
}

.budget-calculator .bc-wood-note {
  font-size: 12px;
  font-weight: 700;
  line-height: 16.8px;
}

.budget-calculator .bc-row-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 12px;
  border-radius: 10px;
  background-color: var(--bc-white);
}

.budget-calculator .bc-total-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.budget-calculator .bc-total {
  display: flex;
  color: var(--bc-total);
  font-size: 28px;
  font-weight: 700;
  line-height: 36.4px;
}

.budget-calculator .bc-total-currency {
  color: var(--bc-dark);
  font-size: 21px;
  font-weight: 500;
}

.budget-calculator .bc-total .bc-astr {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.budget-calculator .bc-result-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 25px 16px 40px;
}

.budget-calculator .bc-result-bottom .bc-cta {
  width: 100%;
}

/* ---------- mobile ranges ---------- */
@media (width >= 381px) and (width <= 410px) {
  .budget-calculator .bc-banner {
    height: 370px;
  }
}

@media (width >= 411px) and (width <= 991px) {
  .budget-calculator .bc-banner {
    height: 390px;
  }
}

@media (width >= 416px) and (width <= 991px) {
  .budget-calculator .bc-row-main .bc-item-price {
    margin-bottom: 20px;
  }

  .budget-calculator .bc-qty {
    font-size: 14px;
  }
}

/* ---------- desktop (from 992px) ---------- */
@media (width >= 992px) {
  .budget-calculator .bc-cta {
    padding: 14px 20px;
  }

  .budget-calculator .bc-touch.is-footer {
    display: none;
  }

  .budget-calculator .bc-touch {
    position: absolute;
    display: block;
    width: 280px;
    margin: 0;
  }

  .budget-calculator .bc-touch-cta {
    top: 146px;
    bottom: auto;
    left: 140px;
  }

  .budget-calculator .bc-cta-yellow {
    height: 28px;
    padding: 4.4px 11px;
    background: var(--bc-yellow-gradient);
    font-size: 12px;
    line-height: 16.8px;
    gap: 4px;
  }

  .budget-calculator .bc-cta-yellow .bc-icon-arrow {
    display: inline-block;
  }

  .budget-calculator .bc-cta-yellow:is(:hover, :focus-visible) .bc-icon-arrow {
    transform: translateX(6px);
  }

  .budget-calculator .bc-icon-arrow {
    transition: 0.2s ease-in;
  }

  /* intro */
  .budget-calculator .bc-intro {
    flex: 0 0 40%;
  }

  .budget-calculator .bc-circle {
    align-items: center;
    height: 100%;
    padding: 0 80px;
    background: var(--bc-circle) center / contain no-repeat;
  }

  .budget-calculator .bc-title {
    font-size: 54px;
    line-height: 60px;
  }

  .budget-calculator .bc-input .bc-title-accent {
    display: block;
  }

  .budget-calculator .bc-description {
    width: auto;
    font-size: 18px;
    font-weight: 400;
    line-height: 28.8px;
  }

  /* screen 1 */
  .budget-calculator .bc-input {
    display: flex;
    justify-content: space-between;
    height: 620px;
    padding: 28px 98px;
  }

  .budget-calculator .bc-input .bc-touch {
    top: 412px;
    left: 0;
  }

  .budget-calculator .bc-form {
    width: 700px;
  }

  .budget-calculator .bc-choices {
    display: grid;
    grid-template-columns: 308px 308px;
    column-gap: 42px;
    padding: 21px;
  }

  .budget-calculator .bc-choice.is-need {
    margin-top: 0;
  }

  .budget-calculator .bc-choice-title {
    margin-bottom: 14px;
  }

  .budget-calculator .bc-options {
    grid-template-columns: 144px 144px;
  }

  .budget-calculator .bc-option-label {
    margin-top: 8px;
  }

  /* desktop: the notes and buttons continue the white box */
  .budget-calculator .bc-surfaces {
    padding: 21px 21px 0;
    border-radius: 10px 10px 0 0;
  }

  .budget-calculator .bc-surfaces-title {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 22px;
  }

  .budget-calculator .bc-surface-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 15px;
  }

  .budget-calculator .bc-area {
    width: calc(100% - 2.33px);
    height: 50px;
  }

  .budget-calculator .bc-bottom {
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 21px 21px;
    border-radius: 0 0 10px 10px;
    background-color: var(--bc-white);
  }

  .budget-calculator .bc-notes {
    width: 100%;
  }

  .budget-calculator .bc-notes p {
    margin: 0;
    color: var(--bc-purple-550);
  }

  .budget-calculator .bc-cta-row {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .budget-calculator .bc-cta-row .bc-cta-step {
    width: 270px;
    padding: 14px 20px;
  }

  .budget-calculator .bc-input .bc-expert:not([aria-disabled="true"]) {
    background-color: var(--bc-black);
    color: var(--bc-white);
  }

  .budget-calculator .bc-input .bc-expert:not([aria-disabled="true"]):hover {
    border-color: var(--bc-dark);
    background-color: var(--bc-black);
  }

  .budget-calculator .bc-or {
    margin: 0;
    color: var(--bc-grey-800);
  }

  /* screen 2 */
  .budget-calculator .bc-select-top {
    display: flex;
    justify-content: space-between;
    height: 428px;
    padding: 0 98px 28px;
  }

  .budget-calculator .bc-select-top > .bc-intro {
    display: block;
    height: 400px;
  }

  .budget-calculator .bc-select-top .bc-circle {
    padding: 0 70px;
    background-position: center bottom;
    background-size: 100%;
  }

  .budget-calculator .bc-select-top .bc-intro-text {
    transform: none;
  }

  .budget-calculator .bc-select-top .bc-title {
    font-size: 32px;
    line-height: 41.6px;
  }

  .budget-calculator .bc-select-top .bc-touch {
    top: 220px;
    left: 0;
  }

  .budget-calculator .bc-panel-wrap {
    width: 700px;
    padding-top: 28px;
  }

  .budget-calculator .bc-panel {
    height: 302px;
  }

  .budget-calculator .bc-bulge {
    bottom: -140px;
    left: -70px;
    width: 300px;
    height: 235px;
  }

  .budget-calculator .bc-panel-inner {
    padding: 0 24px;
  }

  .budget-calculator .bc-panel-nav {
    padding: 30px 0 34px;
  }

  .budget-calculator .bc-link .bc-icon-back {
    margin-right: 12px;
  }

  .budget-calculator .bc-link .bc-icon-edit {
    margin-right: 14px;
  }

  .budget-calculator .bc-step-desc {
    position: absolute;
    top: 21px;
    left: 50%;
    text-align: center;
    transform: translate(-51%);
  }

  .budget-calculator .bc-step-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 36.4px;
    white-space: nowrap;
  }

  .budget-calculator .bc-for {
    margin-bottom: 33px;
  }

  .budget-calculator .bc-steps {
    display: flex;
    gap: 30px;
    justify-content: center;
    text-align: center;
  }

  .budget-calculator .bc-step {
    display: block;
    width: 140px;
  }

  .budget-calculator .bc-step-num {
    margin: 0 auto;
  }

  .budget-calculator .bc-step-name {
    width: 130px;
    margin: 16px 5px 14px;
    padding-bottom: 0;
    line-height: 21px;
    text-align: center;
  }

  .budget-calculator .bc-step-area,
  .budget-calculator .bc-step-skipped {
    text-align: center;
  }

  .budget-calculator .bc-select-actions {
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: right;
    padding-top: 15px;
  }

  .budget-calculator .bc-select-actions .bc-or {
    display: block;
  }

  .budget-calculator .bc-skip,
  .budget-calculator .bc-cta-outline {
    width: auto;
    height: 44px;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 24px;
  }

  .budget-calculator .bc-proceed {
    width: auto;
    height: 44px;
    padding: 10px 50px;
    line-height: 22px;
  }

  .budget-calculator .bc-skip-popup {
    right: -95px;
  }

  .budget-calculator .bc-select-note {
    margin-bottom: 14px;
    padding-top: 14px;
    color: var(--bc-purple-800);
    font-size: 12px;
  }

  .budget-calculator .bc-jump {
    display: none;
  }

  .budget-calculator .bc-jump.is-stuck {
    position: fixed;
    top: var(--nav-height, 64px);
    left: 0;
    display: flex;
    gap: 60px;
    justify-content: center;
    margin: 0;
    padding: 12px 18px;
  }

  .budget-calculator .bc-jump a {
    font-size: 14px;
  }

  .budget-calculator .bc-tier,
  .budget-calculator .is-walls .bc-tier {
    padding: 0 0 50px 40px;
  }

  .budget-calculator .is-walls .bc-tier > .bc-cards {
    padding-left: 0;
  }

  .budget-calculator .bc-surface-products:not(.is-walls) .bc-cards {
    margin: 0;
  }

  .budget-calculator .bc-surface-products:not(.is-walls) .bc-tier {
    padding: 0 40px 50px;
  }

  .budget-calculator .bc-tier-title,
  .budget-calculator .is-walls .bc-tier-title {
    margin: 0 0 20px;
    font-size: 24px;
    line-height: 36.4px;
  }

  .budget-calculator .bc-cards {
    grid-template-columns: repeat(6, 210px);
    gap: 20px;
  }

  .budget-calculator .is-walls .bc-tier:first-of-type .bc-cards {
    grid-template-columns: repeat(6, 1fr);
  }

  .budget-calculator .bc-card-view {
    padding: 0;
  }

  .budget-calculator .bc-card-body {
    padding: 36px 24px 0;
  }

  .budget-calculator .bc-card-media {
    width: 80px;
  }

  .budget-calculator .bc-card-tags li {
    font-size: 11px;
  }

  .budget-calculator .bc-card-mrp {
    bottom: 35px;
  }

  .budget-calculator .bc-card-pick {
    padding: 45px 0 14px;
  }

  .budget-calculator .bc-disclaimer,
  .budget-calculator .is-walls .bc-disclaimer {
    width: auto;
    margin: 30px 0;
    padding: 0;
    font-size: 13px;
  }

  /* desktop slider (the source's slick strips) */
  .budget-calculator .bc-pager {
    padding: 0;
  }

  .budget-calculator .bc-pager .bc-cards {
    display: flex;
    gap: 0;
    margin-bottom: 30px;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .budget-calculator .bc-pager .bc-cards::-webkit-scrollbar {
    display: none;
  }

  .budget-calculator .bc-pager .bc-card {
    flex: 0 0 210px;
    padding-right: 20px;
    scroll-snap-align: start;
  }

  .budget-calculator .bc-pager .bc-card-view {
    display: grid;
    padding: 0;
  }

  .budget-calculator .bc-pager .bc-card-title {
    min-height: 20px;
    margin: 5px 0 10px;
  }

  .budget-calculator .bc-pager .bc-card-tags li {
    margin-left: 16px;
  }

  .budget-calculator .bc-pager .bc-card-mrp {
    position: absolute;
    padding: 0;
  }

  .budget-calculator .bc-pager .bc-card-pick {
    align-self: end;
    padding: 45px 0 14px;
    transform: translateY(10px);
  }

  .budget-calculator .bc-pager-btn {
    position: absolute;
    top: -65px;
    bottom: auto;
    width: 50px;
    height: 50px;
    margin: 0;
    background-size: 50px 50px;
    transform: none;
  }

  .budget-calculator .bc-pager-btn.is-prev {
    right: 104px;
    left: auto;
    transform: none;
  }

  .budget-calculator .bc-pager-btn.is-next {
    position: absolute;
    right: 40px;
    left: auto;
    transform: none;
  }

  /* screen 3 */
  .budget-calculator .bc-banner {
    height: 421px;
    padding: 0;
    background-image: var(--bc-banner-desktop);
  }

  .budget-calculator .bc-banner-text {
    display: block;
    height: auto;
    padding: 0 20%;
  }

  .budget-calculator .bc-result-title {
    width: auto;
    margin: 0;
    font-size: 54px;
    line-height: 60px;
    transform: translate(35%, 0);
  }

  .budget-calculator .bc-banner .bc-result-ctas {
    display: flex;
    gap: 10px;
    width: fit-content;
    margin: 40px auto 20px;
    padding: 0 20%;
    transform: translate(8%, 0);
  }

  .budget-calculator .bc-result-ctas .bc-cta {
    height: 52px;
  }

  .budget-calculator .bc-banner .bc-touch {
    top: 213px;
    right: 30px;
    display: block;
  }

  .budget-calculator .bc-download.is-mobile {
    display: none;
  }

  .budget-calculator .bc-result-notes {
    padding: 30px 40px 0;
  }

  .budget-calculator .bc-result-note {
    font-size: 16px;
    line-height: 24px;
  }

  .budget-calculator .bc-result-note .bc-astr {
    font-size: 14px;
    line-height: 21px;
  }

  .budget-calculator .bc-results {
    padding: 24px 40px 0;
  }

  .budget-calculator .bc-result-section.is-metal {
    margin-bottom: 0;
  }

  .budget-calculator .bc-tile {
    position: relative;
    gap: 0;
    padding: 25px 35px;
  }

  .budget-calculator .bc-tile-title {
    flex: none;
    flex-direction: row;
    align-items: center;
    font-size: 48px;
    font-weight: 700;
    line-height: 36.4px;
  }

  .budget-calculator .bc-tile-area {
    position: absolute;
    left: 300px;
  }

  .budget-calculator .bc-tile-divider {
    display: block;
  }

  .budget-calculator .bc-tile-area-value {
    font-size: 20px;
    line-height: 28px;
  }

  .budget-calculator .bc-tile-note {
    flex: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }

  .budget-calculator .bc-grid-head {
    display: grid;
    grid-template-columns: 264px 1fr 176px;
    column-gap: 20px;
    margin-bottom: 5px;
    text-align: center;
  }

  .budget-calculator .bc-grid-head p {
    color: var(--bc-grey-700);
    font-weight: 700;
    line-height: 21px;
  }

  .budget-calculator .bc-grid-head .bc-astr {
    font-weight: 500;
  }

  .budget-calculator .bc-rows {
    display: block;
    overflow: visible;
  }

  .budget-calculator .bc-row,
  .budget-calculator .bc-row.is-wood,
  .budget-calculator .bc-row.is-metal {
    display: flex;
    column-gap: 20px;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .budget-calculator .bc-row-col-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* the padding sits on the flex items (the source's 1.5 : 5 : 1 split) */
  .budget-calculator .bc-row-main {
    display: flex;
    flex: 1.5 1 0%;
    padding: 10px 10px 20px;
    border-radius: 10px;
    background-color: var(--bc-purple-200);
  }

  .budget-calculator .is-wood .bc-row-main {
    background-color: var(--bc-beige-400);
  }

  .budget-calculator .is-metal .bc-row-main {
    background-color: var(--bc-solitude);
  }

  .budget-calculator .bc-row-main .bc-item,
  .budget-calculator .is-wood .bc-row-main .bc-item,
  .budget-calculator .is-metal .bc-row-main .bc-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    background: none;
    text-align: center;
  }

  .budget-calculator .bc-row-main .bc-item-media {
    width: auto;
    max-width: 132px;
    margin-bottom: 2px;
  }

  .budget-calculator .bc-row-main .bc-item-title {
    align-self: stretch;
    margin-bottom: 4px;
    line-height: 21px;
  }

  .budget-calculator .bc-row-main .bc-item-price,
  .budget-calculator .bc-row-main .bc-item-note {
    align-self: auto;
    margin-bottom: 4px;
  }

  .budget-calculator .bc-row-main .bc-item-note {
    margin-bottom: 0;
  }

  .budget-calculator .bc-qty {
    top: 52px;
    right: -20px;
    bottom: auto;
    width: 64px;
    height: 64px;
    padding: 2px;
    font-size: 14px;
  }

  .budget-calculator .bc-row-under {
    display: flex;
    flex: 5 1 0%;
    margin: 0;
    padding: 24px 62px;
    border-radius: 10px;
    background-color: var(--bc-purple-100);
  }

  .budget-calculator .is-wood .bc-row-under {
    background-color: var(--bc-beige-200);
  }

  .budget-calculator .is-metal .bc-row-under {
    background-color: var(--bc-indigo-50);
  }

  .budget-calculator .bc-under-list {
    flex: 1;
    flex-direction: row;
    gap: 10px;
    padding: 0;
  }

  .budget-calculator .bc-item.is-under {
    flex-flow: column nowrap;
    align-items: flex-start;
    width: calc(33.3333% - 6.6667px);
  }

  .budget-calculator .bc-item.is-under .bc-item-media {
    order: 0;
    width: auto;
    max-width: 74px;
    margin-bottom: 12px;
  }

  .budget-calculator .bc-item.is-under .bc-item-media img {
    width: 74px;
  }

  .budget-calculator .bc-item.is-under .bc-qty {
    top: 24.4px;
    right: -45px;
    width: 64px;
    height: 64px;
    font-size: 14px;
    font-weight: 500;
    line-height: 100%;
    transform: none;
  }

  .budget-calculator .bc-item.is-under .bc-item-title {
    order: 0;
    width: 75%;
    margin-bottom: 32px;
  }

  .budget-calculator .bc-item-bottom {
    order: 0;
    width: auto;
    margin-top: auto;
    text-align: left;
  }

  .budget-calculator .bc-item.is-under .bc-item-price {
    margin-bottom: 4px;
    font-size: 20px;
    line-height: 28px;
  }

  .budget-calculator .bc-item.is-under .bc-item-note,
  .budget-calculator .bc-item.is-under .bc-unit {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
  }

  .budget-calculator .bc-wood-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0 14px;
    text-align: center;
  }

  .budget-calculator .bc-wood-title {
    width: 465px;
    margin-bottom: 6px;
    font-size: 18px;
    line-height: 26px;
  }

  .budget-calculator .bc-wood-desc {
    margin-bottom: 60px;
    font-size: 14px;
  }

  .budget-calculator .bc-row-total {
    display: flex;
    flex: 1 1 0%;
    padding: 10px 10px 20px;
    border-radius: 10px;
    background-color: var(--bc-total-bg);
  }

  .budget-calculator .bc-total-box {
    flex: 1;
    padding: 0;
    background: none;
  }

  .budget-calculator .bc-result-bottom {
    flex-direction: row;
    gap: 40px;
    justify-content: center;
    margin-top: 100px; /* the source: 40px under the results + 60px */
    padding: 29px 0;
    background: var(--bc-cta-bar);
  }

  .budget-calculator .bc-result-bottom .bc-cta {
    width: auto;
    height: 52px;
  }

  .budget-calculator .bc-result-bottom .bc-download {
    display: inline-flex;
  }
}

/* the 992px-1439px zoom (0.7-0.9) is the site's: styles.css zooms the body like the source, so the block must not zoom again */

/* the source's in-between desktop rules that win its cascade (its rem is 14px;
   the others are re-overridden by its clientlib) */
@media (width >= 1438px) and (width <= 1509px) {
  .budget-calculator .bc-select-top {
    padding-right: 56px;
    padding-left: 56px;
  }
}

@media (width >= 1500px) {
  .budget-calculator .bc-input,
  .budget-calculator .bc-select-top {
    justify-content: center;
    gap: 36px;
  }
}

@media (width >= 1265px) and (width <= 1300px) {
  .budget-calculator .bc-input .bc-circle {
    padding: 0 70px;
  }
}

@media (width >= 1430px) {
  .budget-calculator .bc-select-top .bc-intro-text {
    transform: translate(1%, -50%);
  }
}

@media (width >= 1195px) and (width <= 1400px) {
  .budget-calculator .bc-input .bc-intro-text {
    transform: translate(1%, -15%);
  }

  .budget-calculator .bc-select-top .bc-intro-text {
    transform: translate(1%, -46%);
  }
}

@media (width >= 1270px) and (width <= 1301px) {
  .budget-calculator .bc-select-top .bc-description {
    font-size: 17px;
  }
}

@media (width >= 1440px) {
  .budget-calculator .bc-input .bc-description {
    width: 337px;
  }
}

@media (width >= 992px) and (width <= 1340px) {
  .budget-calculator .bc-banner-text,
  .budget-calculator .bc-banner .bc-result-ctas {
    padding: 0 22%;
  }
}

@media (width >= 992px) and (width <= 1390px) {
  .budget-calculator .bc-banner {
    background-position: 50% center;
  }
}

@media (width >= 1800px) {
  .budget-calculator .bc-select-top .bc-intro-text {
    transform: translate(-1%, -43%);
  }

  .budget-calculator .bc-select-top .bc-description {
    width: 380px;
  }
}

/* ---------- preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .budget-calculator *,
  .budget-calculator *::before,
  .budget-calculator *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .budget-calculator .bc-cta,
  .budget-calculator .bc-pager-btn {
    border: 1px solid ButtonText;
  }

  .budget-calculator .bc-cta[aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }

  .budget-calculator .bc-radio:checked + .bc-option-media {
    border-color: Highlight;
  }

  .budget-calculator .bc-checkbox:checked + .bc-checkbox-mark,
  .budget-calculator .bc-pick-input:checked + .bc-pick-mark {
    border-color: Highlight;
    background: Highlight;
    forced-color-adjust: none;
  }

  .budget-calculator .bc-step.is-active .bc-step-num,
  .budget-calculator .bc-step.is-done .bc-step-num {
    border: 2px solid Highlight;
  }

  .budget-calculator .bc-jump a.is-active {
    border-bottom-color: Highlight;
  }
}


/* ===== START: Diwali variant (author the block as "Budget Calculator (diwali)") =====
   Mobile (below 992px), screen 1: a light blue background with a pale
   circle behind the title and a mandala at the purple card's top-right
   corner (one image, in place of the authored Background image), and a
   mandala behind the bottom buttons, cut by the screen's left and bottom
   edges.
   Mobile, screen 2 (product selection, every step): the steps panel and
   its buttons on the light blue, with a mandala at the bottom left, behind
   the panel's pointer and white curve.
   Mobile, screen 3 (results): the Diwali banner image, title included.
   Desktop (992px and up), screen 1: a light blue background with a pale
   circle on the left (mandalas and hanging diyas on it), the title and
   description inside the circle and the form beside it.
   Desktop, screen 2 (product selection, every step): the same circle, a
   little smaller and higher, around the title, on the light blue.
   Desktop, screen 3 (results): the Diwali banner image, title included,
   with the buttons under the title.
   Delete everything down to the matching END comment to remove the
   theme. */

/* The Diwali backgrounds replace the authored Background image. */
.budget-calculator.diwali .bc-input > .bc-bg {
  display: none;
}

/* Screen 3: the Diwali banner images (m-5.png, d-res.png) have the title
   written on them, so the block's own title is hidden visually: it stays for
   screen readers and as the screen's focus target. */
.budget-calculator.diwali .bc-result-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (width < 992px) {
  /* Background: m-4.png is screen 1's whole background in the 360px design
     (4x), drawn at the screen's width from its top, so at 360px the
     mandala's centre sits on the card's right edge. The same light blue
     shows until it loads and below it on taller screens. The screen clips
     the bottom mandala (it ends past the screen's left and bottom edges) and
     is a stacking context, so the mandala's z-index -1 draws it over the
     background and under the content. */
  .budget-calculator.diwali .bc-input {
    overflow: clip;
    isolation: isolate;
    background: #e0ecf9 url('https://static.asianpaints.com/content/dam/eds/pbc/m-4.png') center top / 100% auto no-repeat;
  }

  /* Bottom mandala: m-3.png is the background's light blue with a mandala
     in its bottom-left corner. It is drawn 481px wide, so the mandala is the
     top one's size at 360px, and only its bottom-left corner (the mandala)
     is shown. It is drawn by the form, against the form's bottom-left
     corner (the "Choose products" button's), so it keeps its place however
     the text above wraps: the mandala's centre sits 33px in from the form's
     left edge and 7px below it. */
  .budget-calculator.diwali .bc-input > .bc-form::after {
    content: '';
    position: absolute;
    bottom: -65px;
    left: -64px;
    z-index: -1;
    width: 196px;
    height: 157px;
    background: url('https://static.asianpaints.com/content/dam/eds/pbc/m-3.png') left bottom / 481px auto no-repeat;
    pointer-events: none;
  }

  /* Screen 2: m-3.png is this part's background in the 360px design (3x),
     drawn at that size against its bottom-left corner: the mandala's centre
     sits 24px in from the left edge and 33px above the bottom (beside the
     note under the buttons). The pointer and white curve (the authored Panel
     image) are drawn over it. The same light blue shows until it loads and
     to its right on wider screens. */
  .budget-calculator.diwali .bc-select-top {
    background: #e0ecf9 url('https://static.asianpaints.com/content/dam/eds/pbc/m-3.png') left -49px bottom -11px / 360px auto no-repeat;
  }

  /* Screen 3: the banner is m-5.png (title included), so the banner takes
     the image's proportions (shown whole at every width, in place of the
     fixed heights). The light blue shows until the image loads. */
  .budget-calculator.diwali .bc-banner {
    height: auto;
    aspect-ratio: 1440 / 1392;
    background: #e0ecf9 url('https://static.asianpaints.com/content/dam/eds/pbc/m-5.png') center top / 100% auto no-repeat;
  }
}

@media (width >= 992px) {
  /* Screen 1: d-1.png is the 1440px design's background (4x), drawn at
     1440px and centred, so on wider layouts the design stays in the middle
     with light blue either side (styles.css zooms the body between 992px and
     1439px, so the layout is never much narrower than 1440px). The intro and
     the form are placed in that 1440px frame as in the design: the text
     350px wide from 132px in, and the form 115px after it (597px in). The
     same light blue shows until the image loads. */
  .budget-calculator.diwali .bc-input {
    gap: 0;
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 0;
    background: #e0ecf9 url('https://static.asianpaints.com/content/dam/eds/pbc/d-1.png') center top / 1440px auto no-repeat;
  }

  .budget-calculator.diwali .bc-input > .bc-intro {
    flex: 0 0 350px;
    margin-left: calc((100% - 1440px) / 2 + 132px);
  }

  /* The circle is in the background, so the block's Circle image is not
     drawn. The text is centred on the circle (281px down) rather than the
     screen (310px down), and is as wide as the intro, so the title and
     description wrap as designed ("Paint Budget" / "Calculator", and the
     description after "price"). The design sets the title 2% tighter, the
     description without letter-spacing and 7px further below the title; the
     tighter title keeps clear of the lowest diya. */
  .budget-calculator.diwali .bc-input .bc-circle {
    align-items: flex-start;
    padding: 0 0 51px;
    background: none;
  }

  .budget-calculator.diwali .bc-input .bc-intro-text {
    transform: none;
  }

  .budget-calculator.diwali .bc-input .bc-title {
    margin-bottom: 14px;
    letter-spacing: -0.02em;
  }

  .budget-calculator.diwali .bc-input .bc-description {
    width: auto;
    letter-spacing: 0;
  }

  .budget-calculator.diwali .bc-input > .bc-form {
    margin-left: 115px;
  }

  /* "Get in touch" card: at the frame's left edge */
  .budget-calculator.diwali .bc-input .bc-touch {
    left: max(0px, (100% - 1440px) / 2);
  }

  /* Screen 2 (product selection, every step): the light blue, and d-1.png in
     place of the block's Circle image, drawn smaller (1278px wide, as in the
     design) and placed against the intro, so it moves with the title at every
     width: the circle (227px radius) is centred level with the title, 184px
     right of its left edge; its top mandala is above the screen. The text
     sits 80px down at every width (in place of the source's per-width
     shifts), so it keeps its place in the circle, above the bottom
     mandala. */
  .budget-calculator.diwali .bc-select-top {
    background-color: #e0ecf9;
  }

  .budget-calculator.diwali .bc-select-top .bc-circle {
    justify-content: flex-start;
    padding-top: 80px;
    background: url('https://static.asianpaints.com/content/dam/eds/pbc/d-1.png') left -9px top -159px / 1278px auto no-repeat;
  }

  /* The diyas: the design hangs them lower than d-1.png has them, just above
     the title (their strings run off the top). So a second copy of d-1.png's
     diya area is drawn over the image's own diyas, 54px lower and 17px to
     the right. Around the diyas the copy shows only the circle's flat fill,
     the same as underneath; its top-right corner is cut off, where it would
     show the circle's edge. */
  .budget-calculator.diwali .bc-select-top .bc-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 380px;
    width: 76px;
    height: 84px;
    background: url('https://static.asianpaints.com/content/dam/eds/pbc/d-1.png') left -372px top -105px / 1278px auto no-repeat;
    clip-path: polygon(0 0, 68px 0, 100% 10px, 100% 100%, 0 100%);
    pointer-events: none;
  }

  .budget-calculator.diwali .bc-select-top .bc-intro-text {
    position: relative;
    transform: none;
  }

  /* The title stays on one line, as designed: where the intro is narrowest
     (992px-1040px and 1100px-1114px windows) it would wrap and push the
     description down onto the mandala. */
  .budget-calculator.diwali .bc-select-top .bc-title {
    white-space: nowrap;
  }

  /* Screen 3: d-res.png is the banner in the 1440px design (4x: 1440px x
     421px, the banner's height), title, "Trusted by" badge and art included.
     Drawn at 1440px and centred, like screen 1's background; the buttons and
     the "Get in touch" card are placed in that 1440px frame as in the design:
     the buttons under the title, level with its left edge (472px in, 276px
     down), the card 30px from the frame's right edge. */
  .budget-calculator.diwali .bc-banner {
    background: #e0ecf9 url('https://static.asianpaints.com/content/dam/eds/pbc/d-res.png') center top / 1440px auto no-repeat;
  }

  .budget-calculator.diwali .bc-banner .bc-result-ctas {
    position: absolute;
    top: 276px;
    left: calc((100% - 1440px) / 2 + 472px);
    margin: 0;
    padding: 0;
    transform: none;
  }

  .budget-calculator.diwali .bc-banner .bc-touch {
    right: calc((100% - 1440px) / 2 + 30px);
  }
}

/* ===== END: Diwali variant ===== */