/* =============================================
   WALL PAINT TOOL
   A 3-step guided flow rendered inside one block:
     Step 1 - heading (left) + mandatory questions (right)
     Step 2 - lead-capture form on a white card
     Step 3 - recommendations (placeholder)
   Only one step is visible at a time; the active step is chosen by the
   `data-screen` attribute the JS sets on .wallpaint-tool (see STEP VISIBILITY).
   Each step fits within the viewport with no vertical scroll on mobile/desktop.
   ============================================= */

.wallpaint-tool {
  /* --wpt-bg-desktop / --wpt-bg-mobile are set inline by the JS from the
     authored image row and shared across all steps. */
  --wpt-accent: #f0a500;
  --wpt-proceed-bg: linear-gradient(90deg, #f0a500 0%, #e08a00 100%);
  --wpt-radio-size: 20px;

  color: #fff;
  background-image: var(--wpt-bg-mobile);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* remove default section padding so the banner is edge-to-edge */
.wallpaint-tool-container .wallpaint-tool-wrapper {
  max-width: none;
}

/* ---------- STEP VISIBILITY & LAYOUT ----------
   Every step is hidden by default; the rule further down re-shows only the one
   matching the block's current data-screen value. All steps stay in the DOM so
   form state survives navigating back and forth. */
.wallpaint-tool .wallpainttool-screen {
  position: relative;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  gap: 40px;
  padding: 20px; /* mobile: height follows the content */
}

/* step 2 centres its card */
.wallpaint-tool .wallpainttool-screen-2 {
  align-items: center;
  justify-content: center;
}

.wallpaint-tool[data-screen="1"] .wallpainttool-screen-1,
.wallpaint-tool[data-screen="2"] .wallpainttool-screen-2,
.wallpaint-tool[data-screen="3"] .wallpainttool-screen-3 {
  display: flex;
}

/* ---------- LEFT: HEADING ---------- */
.wallpaint-tool .wallpainttool-left {
  display: flex;
  align-items: center;
}

.wallpaint-tool .surface-layout-text-section {
  outline: none;
}

/* The measure is in em so the heading breaks into the same three lines at
   every size; the middle one is the gold line when no bold run is authored. */
.wallpaint-tool .surface-layout-text-section p {
  max-width: 9.37em;
  margin: 0;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.15;
}

.wallpaint-tool .color-text {
  color: var(--wpt-accent);
}

/* step 1 heading highlight: the source's gold */
.wallpaint-tool .surface-layout-text-section .color-text {
  color: #feb940;
}

/* ---------- RIGHT: QUESTIONS ---------- */
.wallpaint-tool .wallpainttool-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.wallpaint-tool .wallpainttool-question {
  min-width: 0; /* fieldsets default to min-content, which would stop the options row scrolling */
  margin: 0;
  padding: 0;
  border: 0;
}

.wallpaint-tool .wallpainttool-question-title {
  padding: 0;
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 16px;
}

.wallpaint-tool .wallpainttool-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* mobile, step 1: options stay on one row that scrolls sideways. The row
   bleeds past the screen's 20px side padding so it scrolls edge to edge,
   while the inner padding keeps the first option aligned with the title. */
.wallpaint-tool .wallpainttool-screen-1 .wallpainttool-options {
  flex-wrap: nowrap;
  margin: 0 -20px;
  padding: 4px 20px; /* vertical room so focus outlines are not clipped */
  overflow-x: auto;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}

.wallpaint-tool .wallpainttool-screen-1 .wallpainttool-options::-webkit-scrollbar {
  display: none;
}

/* options keep their natural width instead of squeezing into the row */
.wallpaint-tool .wallpainttool-screen-1 .wallpainttool-options > * {
  flex: 0 0 auto;
}

/* radio option (text answers) */
.wallpaint-tool .wallpainttool-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
}

.wallpaint-tool .wallpainttool-option input[type="radio"] {
  appearance: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: var(--wpt-radio-size);
  height: var(--wpt-radio-size);
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
}

.wallpaint-tool .wallpainttool-option input[type="radio"]:checked {
  border-color: #fff;
  padding: 0;
  box-sizing: border-box;

  /* 10px gold gradient dot (linear #ffc63c -> #ffa20c) centered in the ring */
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23ffc63c"/><stop offset="1" stop-color="%23ffa20c"/></linearGradient></defs><circle cx="5" cy="5" r="5" fill="url(%23g)"/></svg>') center / 10px 10px no-repeat;
}

/* link options (e.g. Wood) only redirect; no selected dot */
.wallpaint-tool .wallpainttool-option input[type="radio"][data-href]:checked {
  background: none;
}

.wallpaint-tool .wallpainttool-option input[type="radio"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- FINISH SWATCH QUESTION ---------- */
.wallpaint-tool .wallpainttool-question-swatch .wallpainttool-options {
  gap: 12px;
}

.wallpaint-tool .wallpainttool-question-swatch .wallpainttool-option {
  position: relative;
  box-sizing: border-box;
  min-width: 170px;
  height: 70px;
  padding: 0 0 0 12px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: hsl(36deg 86% 91% / 10.2%);
  gap: 8px;
}

.wallpaint-tool .wallpainttool-question-swatch .wallpainttool-option:has(input:checked) {
  background: hsl(36deg 86% 91% / 10.2%);
  border-color: rgb(255 255 255 / 90%);
}

/* the radio itself is hidden for swatches; the whole card is the control */
.wallpaint-tool .wallpainttool-question-swatch .wallpainttool-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wallpaint-tool .wallpainttool-swatch {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.wallpaint-tool .wallpainttool-swatch-gloss {
  background: linear-gradient(125.46deg, #d29d2d 17.03%, #e6d6b5 53.51%, #d29d2d 84.59%);
}

.wallpaint-tool .wallpainttool-question-swatch .wallpainttool-option:has(input:checked) .wallpainttool-swatch {
  border: 1px solid #fff;
}

.wallpaint-tool .wallpainttool-swatch-semi-gloss {
  background: linear-gradient(125.46deg, #d29d2d 17.03%, #debd79 53.51%, #d29d2d 84.59%);
}

.wallpaint-tool .wallpainttool-swatch-matt {
  background: linear-gradient(125.46deg, #d29d2d 17.03%, #d5ae5c 84.59%);
}

/* ---------- PROCEED ---------- */
.wallpaint-tool .wallpainttool-proceed {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  height: 38px;
  margin-top: 4px;
  padding: 14px 20px;
  border: none;
  border-radius: 45px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--wpt-proceed-bg);
  opacity: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.wallpaint-tool .wallpainttool-proceed::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentcolor;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11h12.17l-5.59-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"/></svg>') no-repeat center / contain;
}

.wallpaint-tool .wallpainttool-proceed:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Step 1 CTA: gold gradient with black label/arrow; transparent + white
   border/label on hover. The border is always there (transparent, under the
   gradient) so it can turn white on hover without the button changing size. */
.wallpaint-tool .wallpainttool-screen-1 .wallpainttool-proceed {
  color: #1E1E1E;
  background: var(--gradient, linear-gradient(180deg, #fec940, #f90));
  border: 1px solid transparent;
}

.wallpaint-tool .wallpainttool-screen-1 .wallpainttool-proceed:not(:disabled):hover {
  color: #fff;
  background: transparent;
  border-color: #fff;
}

.wallpaint-tool .wallpainttool-screen-1 .wallpainttool-option.clicked-radio {
  font-weight: 800;
}

/* =============================================
   STEP 2: LEAD FORM
   ============================================= */
.wallpaint-tool .wallpainttool-form2-header {
  margin-bottom: 24px;
  color: #fff;
  text-align: left;
}

.wallpaint-tool .wallpainttool-form2-title {
  max-width: 77%;
  margin: 0 0 16px;
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.15;
}

.wallpaint-tool .wallpainttool-form2-sub {
  max-width: 70%;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  opacity: 1;
}

.wallpaint-tool .wallpainttool-card {
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
}

.wallpaint-tool .wallpainttool-form2 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 28px 12px;
  border-radius: 5px;
  background: #fff;
  color: #333;
}

.wallpaint-tool .wallpainttool-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* ---------- INPUT FIELDS ----------
   Matches the lead-form inputs in blocks/form/form.css (.form-field,
   .form-field-label, .form-input, .form-input-prefix): 52px outlined box,
   #dfdfdf border that darkens to #53565a when focused or filled, and a small
   "Label*" that appears in the top border once the field is focused or has a
   value. Here the bordered box is .wallpainttool-control and the <input>
   inside it is borderless. */
.wallpaint-tool .wallpainttool-field {
  position: relative;
  min-width: 0;
}

.wallpaint-tool .wallpainttool-float-label {
  position: absolute;
  top: -9px;
  left: 15px;
  z-index: 2;
  padding: 0 3px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: #53565a;
  background: #fff;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wallpaint-tool .wallpainttool-float-label::after {
  content: "*";
  margin-left: 2px;
}

/* shown when the field is in error (so a blank field in error still says
   which field it is), focused, or filled */
.wallpaint-tool .wallpainttool-field.has-error .wallpainttool-float-label {
  opacity: 1;
  visibility: visible;
}

.wallpaint-tool .wallpainttool-field:has(input:focus, input:not(:placeholder-shown)) .wallpainttool-float-label {
  opacity: 1;
  visibility: visible;
}

/* red asterisk while the field is in error */
.wallpaint-tool .wallpainttool-field.has-error .wallpainttool-float-label::after {
  color: #ed1c24;
}

.wallpaint-tool .wallpainttool-control {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 52px;
  padding: 0 18px;
  border: 1px solid #dfdfdf;
  border-radius: 8px;
  background: transparent;
  transition: border-color 0.25s ease;
}

/* "+91": text starts 55px in, as with .form-input--with-prefix */
.wallpaint-tool .wallpainttool-control:has(.wallpainttool-tel-prefix) {
  padding-left: 15px;
}

.wallpaint-tool .wallpainttool-field:has(input:focus, input:not(:placeholder-shown)) .wallpainttool-control {
  border-color: #53565a;
}

.wallpaint-tool .wallpainttool-tel-prefix {
  flex: 0 0 40px;
  font-size: 16px;
  line-height: 1.2;
  color: #53565a;
  white-space: nowrap;
}

.wallpaint-tool .wallpainttool-control input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  color: #53565a;
  background: transparent;
  border: 0;
  outline: none;
}

.wallpaint-tool .wallpainttool-control input::placeholder {
  color: #53565a;
  opacity: 1;
}

/* inline error, as .form-field-error / .has-error in form.css */
.wallpaint-tool .wallpainttool-field-error {
  min-height: 1px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
  color: #ed1c24;
  text-align: left;
}

/* required marker on Step 2 questions (.form-global__required in form.css) */
.wallpaint-tool .wallpainttool-required {
  color: #ed1c24;
}

/* outranks the focused/filled border rule above so the error stays red */
.wallpaint-tool .wallpainttool-fields .wallpainttool-field.has-error .wallpainttool-control {
  border-color: #ff2343;
}

.wallpaint-tool .wallpainttool-whatsapp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
}

.wallpaint-tool .wallpainttool-whatsapp input[type="checkbox"] {
  appearance: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #c4c4c4;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.wallpaint-tool .wallpainttool-whatsapp input[type="checkbox"]:checked {
  border-color: #75787b;
  background: #75787b
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')
    no-repeat center / 12px 12px;
}

.wallpaint-tool .wallpainttool-whatsapp input[type="checkbox"]:focus-visible {
  outline: 2px solid #75787b;
  outline-offset: 2px;
}

.wallpaint-tool .wallpainttool-form2-questions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 16px;
}

/* dark-on-light overrides for the questions inside the white card */
.wallpaint-tool .wallpainttool-form2 .wallpainttool-question-title {
  color: #232426;
  font-size: 12px;
}

/* mobile: Step 2 answer text (desktop sets its own size below) */
.wallpaint-tool .wallpainttool-form2-questions .wallpainttool-option-text {
  font-size: 11px;
}

/* stylelint-disable-next-line no-descending-specificity */
.wallpaint-tool .wallpainttool-form2 .wallpainttool-option {
  color: #333;
}

.wallpaint-tool .wallpainttool-form2 .wallpainttool-option input[type="radio"] {
  width: 16px;
  height: 16px;
  border: 1.5px solid #bdbdbd;
  background: #fff;
}

/* selected: orange ring, thin white gap, solid orange centre */
.wallpaint-tool .wallpainttool-form2 .wallpainttool-option input[type="radio"]:checked {
  border-color: #f47838;
  background: #f47838;
  box-shadow: inset 0 0 0 1.5px #fff;
}

.wallpaint-tool .wallpainttool-consent {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #424242;
}

.wallpaint-tool .wallpainttool-consent a {
  color: #1a3fb0;
  text-decoration: underline;
}

.wallpaint-tool .wallpainttool-submit-error {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.2;
  color: #ed1c24;
  text-align: center;
}

/* Step 1: under the left-aligned CTA, pulled up from the form's 28px gap */
.wallpaint-tool .wallpainttool-form > .wallpainttool-submit-error {
  margin: -16px 0 0;
  text-align: left;
}

.wallpaint-tool .wallpainttool-proceed-2 {
  align-self: center;
  gap: 19px;
  height: auto;
  margin: 0 auto;
  padding: 8px 20px;

  /* transparent border at rest so it can turn black on hover without a size jump */
  border: 1px solid transparent;
  border-radius: 45px;
  font-size: 14px;
  color: #000;
  background: var(--gradient, linear-gradient(180deg, #fec940, #f90));
}

.wallpaint-tool .wallpainttool-proceed-2::after {
  background: #000;
}

.wallpaint-tool .wallpainttool-proceed-2:not(:disabled):hover {
  color: #000;
  background: transparent;
  border-color: #000;
}

/* Loading spinner (View Recommendations, Download PDF): hidden at rest; while
   the button is busy (aria-busy, set by the JS) it sits after the icon (the
   button's ::after, so `order` moves it past it) and keeps turning. The
   button stays at full opacity rather than looking disabled. */
.wallpaint-tool .wallpainttool-proceed-spinner {
  display: none;
  order: 1;
  font-size: 18px;
  line-height: 1;
}

/* this CTA's 19px gap is pulled in so the spinner sits 10px from the arrow,
   matching the 10px gap on the Download PDF button */
.wallpaint-tool .wallpainttool-proceed-2 .wallpainttool-proceed-spinner {
  margin-left: -9px;
}

.wallpaint-tool .wallpainttool-proceed[aria-busy="true"] {
  opacity: 1;
  cursor: progress;
}

.wallpaint-tool .wallpainttool-proceed[aria-busy="true"] .wallpainttool-proceed-spinner {
  display: inline-block;
  animation: wallpainttool-spin 1s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .wallpaint-tool .wallpainttool-proceed[aria-busy="true"] .wallpainttool-proceed-spinner {
    animation-duration: 3s;
  }
}

/* =============================================
   STEP 3: RESULTS
   ============================================= */
.wallpaint-tool .wallpainttool-result {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  color: #fff;
}

/* ---------- LEFT ---------- */
.wallpaint-tool .wallpainttool-restart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}

/* restart glyph used as a mask so it is painted in the button's text colour */
.wallpaint-tool .wallpainttool-restart-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background: currentcolor;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M8.33317 16.6667C12.9355 16.6667 16.6665 12.9357 16.6665 8.33335C16.6665 3.73102 12.9355 1.87473e-05 8.33317 1.8345e-05C4.70351 1.80276e-05 1.61784 2.3201 0.474254 5.55568C0.320838 5.9896 0.548337 6.46568 0.982254 6.61902C1.41617 6.77243 1.89225 6.54502 2.04567 6.11102C2.96125 3.5206 5.43175 1.66669 8.33317 1.66669C12.0151 1.66669 14.9998 4.65144 14.9998 8.33335C14.9998 12.0153 12.0151 15 8.33317 15C7.04017 15 5.94467 14.5324 4.903 13.7995C4.20242 13.3066 3.55417 12.7158 2.89634 12.0834L5.4165 12.0834C5.87675 12.0834 6.24984 11.7103 6.24984 11.25C6.24984 10.7898 5.87675 10.4167 5.4165 10.4167L0.83317 10.4167C0.37292 10.4167 -0.000163518 10.7898 -0.000163558 11.25L-0.000163959 15.8334C-0.000163999 16.2936 0.372919 16.6667 0.83317 16.6667C1.29342 16.6667 1.6665 16.2936 1.6665 15.8334L1.6665 13.2136C2.37342 13.8952 3.1285 14.5889 3.944 15.1626C5.17075 16.0257 6.59592 16.6667 8.33317 16.6667Z"/></svg>') no-repeat center / contain;
}

.wallpaint-tool .wallpainttool-result-title {
  margin: 24px 0 0; /* space below the Restart link */
  font-size: clamp(28px, 6vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  color: #efefef;
}

.wallpaint-tool .wallpainttool-result-subtitle {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 21.86px;
  color: #f9f9f9;
}

.wallpaint-tool .wallpainttool-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: rgb(255 255 255 / 75%);
}

/* "• Area - <b>Interior</b>": bullet before every item, dimmed label and
   bullet (colour set on the list), bold white value */
.wallpaint-tool .wallpainttool-inputs li {
  position: relative;
}

.wallpaint-tool .wallpainttool-inputs strong {
  color: #fff;
  font-weight: 700;
}

.wallpaint-tool .wallpainttool-inputs li::before {
  content: "•";
  margin-right: 7px;
}

.wallpaint-tool .wallpainttool-download {
  display: flex;
  margin-top: 32px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-radius: 12px;
  background: rgb(0 0 0 / 25%);
}

.wallpaint-tool .wallpainttool-download-text {
  max-width: 230px; /* wraps the copy after "...more details" */
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16.39px;
  color: #fff;
}

.wallpaint-tool .wallpainttool-download-tab {
  color: #feb940;
  font-weight: 700;
}

/* outlined pill: transparent bg, white border, white label + download icon */
.wallpaint-tool .wallpainttool-download-cta {
  flex: 0 0 auto;
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
}

.wallpaint-tool .wallpainttool-download-cta::after {
  /* download glyph from the shared icon set; used as a mask so it is painted
     in the button's text colour (white) rather than the file's black */
  mask: url("../../icons/download-icon-black.svg") no-repeat center / contain;
}

/* gold on hover with black label/icon; the border goes transparent (not 0)
   so the gradient fills it and the button does not shrink by 2px */
.wallpaint-tool .wallpainttool-download-cta:not(:disabled):hover {
  color: #000;
  background: linear-gradient(180deg, #ffc63c, #ffa20c);
  border-color: transparent;
}

/* ---------- RIGHT ----------
   tabs, "Recommended Products" and the cards stacked 20px apart, all
   left-aligned to the column edge */
.wallpaint-tool .wallpainttool-result-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.wallpaint-tool .wallpainttool-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
}

/* inactive: plain white label; active: bold label on a translucent maroon pill */
.wallpaint-tool .wallpainttool-tab {
  padding: 8px 10px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.wallpaint-tool .wallpainttool-tab.is-active {
  padding: 5px 17px;
  font-weight: 800;
  background: rgb(116 31 52 / 68%); /* #741f34ad */
}

.wallpaint-tool .wallpainttool-tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.wallpaint-tool .wallpainttool-products-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 21.86px;
}

.wallpaint-tool .wallpainttool-products {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 16px;
}

/* ---------- PRODUCT CARD ---------- */
.wallpaint-tool .wallpainttool-product {
  display: flex;
  flex-direction: column;
  padding: 16px 10px 20px 13px;
  border: 1px solid #efefef;
  border-radius: 8px;
  background: #fff;
  color: #232426;
}

.wallpaint-tool .wallpainttool-product-head {
  display: flex;
  align-items: flex-start; /* product name lines up with the top of the can */
  gap: 14px;
}

.wallpaint-tool .wallpainttool-product-head img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: 0 0 auto;
}

.wallpaint-tool .wallpainttool-product-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 19.86px;
  color: #161515;
}

.wallpaint-tool .wallpainttool-product-sublabel {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 14.4px;
  color: gray;
}

.wallpaint-tool .wallpainttool-product-tags {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16.39px;
}

.wallpaint-tool .wallpainttool-product-price {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16.39px;
}

.wallpaint-tool .wallpainttool-product-link {
  margin-top: 48px; /* clear space between the price and "View product details" */
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 15.3px;
  color: #e05f27;
  text-decoration: none;
}

.wallpaint-tool .wallpainttool-product hr {
  width: 100%;
  margin: 12px 0 4px;
  border: 0;
  border-top: 1px solid #c4c4c4;
}

.wallpaint-tool .wallpainttool-wf {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wallpaint-tool .wallpainttool-wf img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}

.wallpaint-tool .wallpainttool-wf strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 14.4px;
}

/* =============================================
   TABLET / DESKTOP
   ============================================= */
@media (width >= 900px) {
  .wallpaint-tool {
    background-image: var(--wpt-bg-desktop);
  }

  /* desktop keeps the original 24px between stacked items (step 1 overrides below).
     Each step fills the viewport below the fixed header (body is offset by
     --header-height). body is zoomed on some desktop widths (styles.css), which
     also shrinks vh/dvh; dividing by --body-zoom keeps the true viewport height. */
  .wallpaint-tool .wallpainttool-screen {
    gap: 24px;
    min-height: calc(100vh / var(--body-zoom, 1) - var(--header-height, 0px));
    min-height: calc(100dvh / var(--body-zoom, 1) - var(--header-height, 0px));
  }

  /* Step 1 as the source (asianpaints.com wall paint tool): the heading
     starts 9% from the left in a 520px column, then a 62px gap and the
     questions. Both columns give way when the screen is too narrow for them. */
  .wallpaint-tool .wallpainttool-screen-1 {
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 62px;
    padding: 40px 20px 40px 9%;
    min-height: 637px;
    padding-top: 4%;
    padding-bottom: 4%;
  }

  .wallpaint-tool .wallpainttool-left {
    flex: 0 1 520px;
    min-width: 0;
  }

  .wallpaint-tool .wallpainttool-right {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* 54px / 64.8px on a 506px measure, as the source */
  .wallpaint-tool .surface-layout-text-section p {
    font-size: 54px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    transform: translate(0, -8px);
  }

  .wallpaint-tool .wallpainttool-question-title {
    margin-bottom: 12px;
    font-size: 20px;
  }

  /* source spacing: 16px under the question, tight line-heights */
  .wallpaint-tool .wallpainttool-screen-1 .wallpainttool-question-title {
    margin-bottom: 16px;
    line-height: 27.32px;
  }

  .wallpaint-tool .wallpainttool-screen-1 .wallpainttool-option {
    line-height: 21.86px;
  }

  .wallpaint-tool .wallpainttool-options {
    gap: 12px 60px;
  }

  /* desktop: back to a normal wrapping row */
  .wallpaint-tool .wallpainttool-screen-1 .wallpainttool-options {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow-x: visible;
  }

  /* 60px between questions */
  .wallpaint-tool .wallpainttool-form {
    gap: 60px;
  }

  /* the CTA sits the same 60px below the last question */
  .wallpaint-tool .wallpainttool-form > .wallpainttool-proceed {
    margin-top: 0;
  }

  /* keep the error 12px under the CTA despite the 60px gap */
  .wallpaint-tool .wallpainttool-form > .wallpainttool-submit-error {
    margin-top: -48px;
  }

  .wallpaint-tool .wallpainttool-screen-2 {
    padding: 40px 5%;
  }

  .wallpaint-tool .wallpainttool-screen-3 {
    padding: 48px 5%;
  }

  .wallpaint-tool .wallpainttool-restart {
    font-size: 14px;
  }

  /* the results fill the full-height Step 3 screen and both columns stretch
     to it, so the download box can sit at the bottom of the section */
  .wallpaint-tool .wallpainttool-result {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: stretch;
    gap: 4%;
  }

  .wallpaint-tool .wallpainttool-result-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 40%;
    min-width: 0;
  }

  .wallpaint-tool .wallpainttool-result-left > .wallpainttool-download {
    align-self: stretch;
    margin-top: auto; /* push to the bottom of the column */
    padding: 20px 22px;
  }

  .wallpaint-tool .wallpainttool-inputs {
    margin: 16px 0 40px; /* 40px = minimum space above the download box */
    font-size: 16px;
    font-weight: 500;
    line-height: 21.86px;
    color: #ccc;
  }

  .wallpaint-tool .wallpainttool-result-right {
    flex: 1 1 58%;
    min-width: 0;
  }

  .wallpaint-tool .wallpainttool-result-title {
    margin-top: 40px;
    font-size: 40px;
    line-height: 44px;
  }

  /* "Based on Your Inputs": clear of the title */
  .wallpaint-tool .wallpainttool-result-subtitle {
    margin-top: 32px;
  }

  .wallpaint-tool .wallpainttool-products {
    flex-flow: row wrap;
    gap: 12px;
  }

  .wallpaint-tool .wallpainttool-products .wallpainttool-product {
    flex: 0 0 34%;
  }

  .wallpaint-tool .wallpainttool-product-link {
    margin-top: 40px;
  }

  .wallpaint-tool .wallpainttool-fields {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  /* desktop label/padding sizes from form.css */
  .wallpaint-tool .wallpainttool-float-label {
    top: -7px;
    left: 12px;
    font-size: 12px;
  }

  .wallpaint-tool .wallpainttool-control {
    padding: 0 20px;
  }

  .wallpaint-tool .wallpainttool-form2-questions {
    grid-template-columns: 1fr 1fr;
  }

  /* wider card on desktop so the two-column inputs get more room */
  .wallpaint-tool .wallpainttool-card {
    max-width: 890px;
  }

  .wallpaint-tool .wallpainttool-form2 {
    padding: 30px 50px;
  }

  /* keep the title on one line; it may extend 40px past each side of the
     card if an authored title is wider than the card */
  .wallpaint-tool .wallpainttool-form2-header {
    margin-inline: -40px;
    text-align: center;
  }

  .wallpaint-tool .wallpainttool-form2-title {
    max-width: none;
    margin-bottom: 8px;
    font-size: 32px;
    line-height: 35.2px;
    font-weight: 800;
    white-space: nowrap;
  }

  .wallpaint-tool .wallpainttool-form2-sub {
    max-width: none;
    font-size: 16px;
    line-height: 21.86px;
    font-weight: 500;
    opacity: 0.95;
  }

  .wallpaint-tool .wallpainttool-form2 .wallpainttool-question-title {
    color: #252b42;
    font-size: 12px;
    font-weight: 600;
  }

  .wallpaint-tool .wallpainttool-form2-questions .wallpainttool-options {
    flex-wrap: nowrap;
    gap: 10px 16px;
  }

  .wallpaint-tool .wallpainttool-form2-questions .wallpainttool-option {
    font-size: 10px;
    font-weight: 500;
    color: #323232 !important;
    white-space: nowrap;
  }

  /* only the text is faded; the radio stays full strength. Size follows the
     option (10px) instead of the mobile 11px */
  .wallpaint-tool .wallpainttool-form2-questions .wallpainttool-option-text {
    font-size: inherit;
    opacity: 0.6;
  }

  .wallpaint-tool .wallpainttool-consent {
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.5px;
  }
}

/* Step 3 spacing on small desktops / laptops */
@media (width > 991px) and (width < 1400px) {
  .wallpaint-tool .wallpainttool-screen-3 {
    padding: 55px 3%;
  }
}

/* three product cards per row once the results column is wide enough;
   any extra cards wrap to the next row and a single card keeps its 1/3 width */
@media (width >= 1200px) {
  .wallpaint-tool .wallpainttool-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Step 1 on wide screens, as the source: the pair moves further in and the
   gap opens up (the source's 10% / 18% of its 1040px row) */
@media (width >= 1480px) and (width <= 1520px) {
  .wallpaint-tool .wallpainttool-screen-1 {
    gap: 104px;
    padding-left: 13%;
  }
}

@media (width >= 1800px) {
  .wallpaint-tool .wallpainttool-screen-1 {
    gap: 187px;
    padding-left: 15%;
  }
}