/* =========================
   CUSTOM ORDER (hero + form)
========================= */

.co-hero{
  padding: 22px 0 10px;
}

.co-hero__inner{
  max-width: 780px;
}

.co-hero__title{
  margin: 0 0 8px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 1000;
}

.co-hero__sub{
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* =========================================================
   Voluntary Discomfort — Gravity Forms UI (Form ID 1)
   CLEAN FULL FILE (NO DUPLICATE OVERRIDES)
   - Step 1 Shape: BIG square uniform image cards (image = label background)
   - Step 2 Material: BIG square uniform image cards (image = label background)
   - Step 3 Quantity: removed (as requested)
   Field IDs:
   Shape=1, Material=3, Quantity=4, Custom Qty=5,
   Size Circle=6, Size Square=7, Size Rectangle=8,
   Delivery Expectation=23
========================================================= */

body #gform_wrapper_1{
  --bg:#0b0d10;
  --text:rgba(255,255,255,.93);
  --muted:rgba(255,255,255,.62);
  --border:rgba(255,255,255,.11);
  --border2:rgba(255,255,255,.20);
  --accent:#93E9BE;
  --accent-rgb:147, 233, 190;
  --glow:rgba(var(--accent-rgb), .18);

  max-width: 980px !important;
  margin: 26px auto !important;
  padding: 22px 26px !important;

  background:
    radial-gradient(720px 420px at 20% -10%, rgba(var(--accent-rgb), .10), transparent 60%),
    radial-gradient(720px 420px at 90% 0%, rgba(255,255,255,.05), transparent 55%),
    var(--bg) !important;

  border: 1px solid rgba(var(--accent-rgb), .14) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--accent-rgb), .04) !important;
  color: var(--text) !important;
}

body #gform_wrapper_1 *{ box-sizing:border-box !important; }

/* ---------- PROGRESS ---------- */
body #gform_wrapper_1 .gf_progressbar_title{
  margin: 0 0 10px !important;
  color: var(--muted) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .2px !important;
}
body #gform_wrapper_1 .gf_progressbar{
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  overflow:hidden !important;
  margin: 0 0 18px !important;
}
body #gform_wrapper_1 .gf_progressbar_percentage{
  height:100% !important;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .55)) !important;
}

/* ---------- PAGE SPACING ---------- */
body #gform_wrapper_1 .gform_fields{
  display:grid !important;
  gap: 12px !important;
  margin:0 !important;
  padding:0 !important;
}
body #gform_wrapper_1 .gfield{
  margin:0 !important;
  padding:0 !important;
}
body #gform_wrapper_1 .gfield_label,
body #gform_wrapper_1 legend{
  font-size: 18px !important;
  font-weight: 900 !important;
  margin: 0 0 10px !important;
  color: var(--text) !important;
}
body #gform_wrapper_1 .gfield_required_text{ display:none !important; }

/* ---------- INPUTS ---------- */
body #gform_wrapper_1 input[type="text"],
body #gform_wrapper_1 input[type="email"],
body #gform_wrapper_1 input[type="tel"],
body #gform_wrapper_1 input[type="number"],
body #gform_wrapper_1 textarea,
body #gform_wrapper_1 select{
  width: 100% !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  padding: 13px 14px !important;
  color: var(--text) !important;
  outline:none !important;
}
body #gform_wrapper_1 input:focus,
body #gform_wrapper_1 textarea:focus,
body #gform_wrapper_1 select:focus{
  border-color: rgba(var(--accent-rgb), .80) !important;
  box-shadow: 0 0 0 4px var(--glow) !important;
}

/* =========================================================
   RADIO BASE (works for all steps)
========================================================= */
body #gform_wrapper_1 ul.gfield_radio,
body #gform_wrapper_1 .ginput_container_radio{
  margin:0 !important;
  padding:0 !important;
}
body #gform_wrapper_1 .gfield_radio li,
body #gform_wrapper_1 .gchoice{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  position:relative !important;
}
body #gform_wrapper_1 .gfield_radio input[type="radio"],
body #gform_wrapper_1 .gchoice input[type="radio"],
body #gform_wrapper_1 .gfield_checkbox input[type="checkbox"],
body #gform_wrapper_1 .gchoice input[type="checkbox"]{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

body #gform_wrapper_1 .gfield_radio label,
body #gform_wrapper_1 .gchoice label{
  width:100% !important;
  min-height: 64px !important;
  padding: 14px 14px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 10px !important;
  text-align:center !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;

  color: var(--text) !important;
  font-weight: 850 !important;
  letter-spacing:.2px !important;

  cursor:pointer !important;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease !important;
}

body #gform_wrapper_1 .gfield_radio label:hover,
body #gform_wrapper_1 .gchoice label:hover{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.20) !important;
  transform: translateY(-1px) !important;
}

body #gform_wrapper_1 .gfield_radio input[type="radio"]:checked + label,
body #gform_wrapper_1 .gchoice input[type="radio"]:checked + label{
  border-color: rgba(var(--accent-rgb), .85) !important;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .10)) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14) !important;
}

/* Checked when label wraps input */
@supports selector(label:has(input:checked)){
  body #gform_wrapper_1 .gfield_radio label:has(input[type="radio"]:checked),
  body #gform_wrapper_1 .gchoice label:has(input[type="radio"]:checked){
    border-color: rgba(var(--accent-rgb), .85) !important;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .10)) !important;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14) !important;
  }
}

/* =========================================================
   STEP 1 + STEP 2 IMAGE CARDS (BULLETPROOF)
========================================================= */

/* Ensure NO inner pseudo panels show */
body #gform_wrapper_1 #field_1_1 label::before,
body #gform_wrapper_1 #field_1_1 label::after,
body #gform_wrapper_1 #input_1_1 label::before,
body #gform_wrapper_1 #input_1_1 label::after,
body #gform_wrapper_1 #field_1_3 label::before,
body #gform_wrapper_1 #field_1_3 label::after,
body #gform_wrapper_1 #input_1_3 label::before,
body #gform_wrapper_1 #input_1_3 label::after{
  content:none !important;
  display:none !important;
}

/* ===== STEP 1 GRID ===== */
body #gform_wrapper_1 #input_1_1{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  margin:0 !important;
  padding:0 !important;
}

/* ===== STEP 2 GRID ===== */
body #gform_wrapper_1 #input_1_3{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  margin:0 !important;
  padding:0 !important;
}

/* Wrapper normalisation */
body #gform_wrapper_1 #input_1_1 .gchoice,
body #gform_wrapper_1 #input_1_3 .gchoice{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

/* CARD (shared Step 1 + Step 2) */
body #gform_wrapper_1 #input_1_1 .gchoice label,
body #gform_wrapper_1 #input_1_3 .gchoice label{
  --vdChoiceImg: none;

  width:100% !important;
  max-width:none !important;

  aspect-ratio: 1 / 1 !important;
  min-height: 380px !important;

  display:flex !important;
  flex-direction: column !important;
  justify-content:flex-end !important;
  align-items:center !important;

  padding: 18px !important;
  padding-bottom: 48px !important;

  border-radius: 20px !important;
  overflow:hidden !important;
  position:relative !important;

  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  color: rgba(255,255,255,.92) !important;

  background:
    linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 55%),
    var(--vdChoiceImg) !important;

  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, center 42% !important;
  background-size: 100% 100%, contain !important;

  background-color: rgba(255,255,255,.03) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.45) !important;
}

/* Step 1 images */
body #gform_wrapper_1 #input_1_1 .gchoice:nth-child(1) label{ --vdChoiceImg: url("https://voluntarydiscomfort.co.uk/wp-content/uploads/2026/02/circle.webp"); }
body #gform_wrapper_1 #input_1_1 .gchoice:nth-child(2) label{ --vdChoiceImg: url("https://voluntarydiscomfort.co.uk/wp-content/uploads/2026/02/circle-1.webp"); }
body #gform_wrapper_1 #input_1_1 .gchoice:nth-child(3) label{ --vdChoiceImg: url("https://voluntarydiscomfort.co.uk/wp-content/uploads/2026/02/circle-2-1.webp"); }

/* Step 2 images */
body #gform_wrapper_1 #input_1_3 .gchoice:nth-child(1) label{ --vdChoiceImg: url("https://voluntarydiscomfort.co.uk/wp-content/uploads/2026/02/my-project-page-1-14-1.webp"); }
body #gform_wrapper_1 #input_1_3 .gchoice:nth-child(2) label{ --vdChoiceImg: url("https://voluntarydiscomfort.co.uk/wp-content/uploads/2026/02/my-project-page-1-14-2.webp"); }

/* Desktop polish for Step 2 material cards */
@media (min-width: 901px){
  body #gform_wrapper_1 #input_1_3{
    gap: 28px !important;
  }

  body #gform_wrapper_1 #input_1_3 .gchoice{
    display: block !important;
    width: 100% !important;
  }

  body #gform_wrapper_1 #input_1_3 .gchoice label{
    aspect-ratio: 1.08 / 1 !important;
    min-height: 420px !important;
    margin: 0 !important;
    --gf-local-margin-x: 0 !important;
    --gf-local-margin-y: 0 !important;
    padding: 22px 24px 68px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    background-position: 0 0, center 40% !important;
    background-size: 100% 100%, 76% auto !important;
  }

  body #gform_wrapper_1 #input_1_3 .gchoice:nth-child(1) label{
    background-position: 0 0, center 39% !important;
    background-size: 100% 100%, 74% auto !important;
  }

  body #gform_wrapper_1 #input_1_3 .gchoice:nth-child(2) label{
    background-position: 0 0, center 40% !important;
    background-size: 100% 100%, 78% auto !important;
  }
}

/* =========================================================
   STEP 3 — QUANTITY (Field 4 removed)
========================================================= */

/* Custom quantity input card */
body #gform_wrapper_1 #field_1_5{
  max-width: 520px !important;
  margin: 8px auto 0 !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
}

/* Best value note */
body #gform_wrapper_1 #field_1_5 .ginput_container_number,
body #gform_wrapper_1 #field_1_5 .ginput_container{
  position: relative !important;
}
body #gform_wrapper_1 #field_1_5 .ginput_container_number::after,
body #gform_wrapper_1 #field_1_5 .ginput_container::after{
  content: "Best value: Order 50+ patches to avoid a handling fee" !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;

  padding: 8px 12px !important;
  border-radius: 14px !important;

  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
  letter-spacing: .1px !important;

  color: rgba(255,255,255,.92) !important;
  background: rgba(var(--accent-rgb), .14) !important;
  border: 1px solid rgba(var(--accent-rgb), .45) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.28) !important;

  pointer-events: none !important;
  white-space: normal !important;
  max-width: 100% !important;
}

/* =========================================================
   STEP 4 — SIZE (Circle field 6) — DIAGRAM
========================================================= */
body #gform_wrapper_1 #field_1_6 .gfield_radio{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 230px)) !important;
  justify-content:center !important;
  gap: 14px !important;
}
body #gform_wrapper_1 #field_1_6 .gfield_radio label{
  justify-content:flex-start !important;
  text-align:left !important;
  padding: 14px 16px !important;
}
body #gform_wrapper_1 #field_1_6 .gfield_radio label::before{
  content:"";
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.02);
}

/* =========================================================
   STEP 4 — SIZE (Square field 7) — DIAGRAM
========================================================= */
body #gform_wrapper_1 #field_1_7 .gfield_radio{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 230px)) !important;
  justify-content:center !important;
  gap: 14px !important;
}
body #gform_wrapper_1 #field_1_7 .gfield_radio label,
body #gform_wrapper_1 #field_1_7 .gfield_checkbox label{
  justify-content:flex-start !important;
  text-align:left !important;
  padding: 14px 16px !important;
}
body #gform_wrapper_1 #field_1_7 .gfield_radio label::before,
body #gform_wrapper_1 #field_1_7 .gfield_checkbox label::before{
  content:"";
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.02);
}

/* =========================================================
   STEP 4 — SIZE (Rectangle field 8) — RATIO DIAGRAMS
========================================================= */
body #gform_wrapper_1 #field_1_8 .gfield_radio{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 300px)) !important;
  justify-content:center !important;
  gap: 14px !important;
}

body #gform_wrapper_1 #field_1_8 .gfield_radio label,
body #gform_wrapper_1 #field_1_8 .gfield_checkbox label{
  min-height: 96px !important;
  justify-content:flex-start !important;
  text-align:left !important;
  padding: 14px 16px !important;
  position: relative !important;
}

body #gform_wrapper_1 #field_1_8 .gfield_radio label::before,
body #gform_wrapper_1 #field_1_8 .gfield_checkbox label::before{
  content:"";
  width: 92px;
  height: 62px;
  flex: 0 0 92px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}

body #gform_wrapper_1 #field_1_8 .gfield_radio label::after{
  content:"";
  position:absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid rgba(255,255,255,0.78);
  border-radius: 9px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

body #gform_wrapper_1 #field_1_8 input[value="3.75in x 2in"] + label::after{ width: 72px; height: 38px; }
body #gform_wrapper_1 #field_1_8 input[value="4in x 1.75in"] + label::after{ width: 78px; height: 34px; }
body #gform_wrapper_1 #field_1_8 input[value="3.5in x 1.75in"] + label::after{ width: 74px; height: 37px; }

body #gform_wrapper_1 #field_1_8 input[type="radio"]:checked + label::before{
  border-color: rgba(var(--accent-rgb), .55) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12) !important;
}
body #gform_wrapper_1 #field_1_8 input[type="radio"]:checked + label::after{
  border-color: rgba(var(--accent-rgb), .92) !important;
}

/* =========================================================
   ✅ CHANGE REQUEST (ONLY THIS):
   Remove the vector/shape icons from SIZE options (Fields 6,7,8)
   → text only
========================================================= */
body #gform_wrapper_1 #field_1_6 .gfield_radio label::before,
body #gform_wrapper_1 #field_1_7 .gfield_radio label::before,
body #gform_wrapper_1 #field_1_7 .gfield_checkbox label::before,
body #gform_wrapper_1 #field_1_8 .gfield_radio label::before,
body #gform_wrapper_1 #field_1_8 .gfield_checkbox label::before,
body #gform_wrapper_1 #field_1_8 .gfield_radio label::after{
  content:none !important;
  display:none !important;
}

/* =========================================================
   DELIVERY EXPECTATION (Field 23)
   - equal-size centered premium cards
========================================================= */
body #gform_wrapper_1 #field_1_23{
  margin-top: 8px !important;
}

body #gform_wrapper_1 #field_1_23 .gfield_label{
  margin-bottom: 14px !important;
}

body #gform_wrapper_1 #field_1_23 .ginput_container_radio,
body #gform_wrapper_1 #input_1_23{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body #gform_wrapper_1 #field_1_23 .gfield_radio,
body #gform_wrapper_1 #input_1_23{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(260px, 320px)) !important;
  justify-content: center !important;
  gap: 18px !important;
  align-items: stretch !important;
}

body #gform_wrapper_1 #field_1_23 .gfield_radio > li,
body #gform_wrapper_1 #input_1_23 .gchoice,
body #gform_wrapper_1 #field_1_23 .gchoice{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
}

body #gform_wrapper_1 #field_1_23 .gfield_radio label,
body #gform_wrapper_1 #input_1_23 .gchoice label{
  width: 100% !important;
  min-height: 124px !important;
  height: 124px !important;
  margin: 0 !important;
  padding: 22px 20px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 16px 34px rgba(0,0,0,.20) !important;

  color: var(--text) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
  white-space: normal !important;

  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}

body #gform_wrapper_1 #field_1_23 .gfield_radio label:hover,
body #gform_wrapper_1 #input_1_23 .gchoice label:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 40px rgba(0,0,0,.24) !important;
  transform: translateY(-1px) !important;
}

body #gform_wrapper_1 #field_1_23 input[type="radio"]:checked + label,
body #gform_wrapper_1 #input_1_23 input[type="radio"]:checked + label{
  border-color: rgba(var(--accent-rgb), .90) !important;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .08)) !important;
  box-shadow:
    0 0 0 4px rgba(var(--accent-rgb), .14) !important,
    0 18px 40px rgba(0,0,0,.26) !important;
}

@supports selector(label:has(input:checked)){
  body #gform_wrapper_1 #field_1_23 .gfield_radio label:has(input[type="radio"]:checked),
  body #gform_wrapper_1 #input_1_23 .gchoice label:has(input[type="radio"]:checked){
    border-color: rgba(var(--accent-rgb), .90) !important;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .08)) !important;
    box-shadow:
      0 0 0 4px rgba(var(--accent-rgb), .14) !important,
      0 18px 40px rgba(0,0,0,.26) !important;
  }
}

/* ---------- BUTTONS ---------- */
body #gform_wrapper_1 .gform_page_footer{
  display:flex !important;
  justify-content: space-between !important;
  align-items:center !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

body #gform_wrapper_1 .gform_page_footer .gform_previous_button,
body #gform_wrapper_1 .gform_page_footer .gform_next_button,
body #gform_wrapper_1 .gform_page_footer input[type="submit"].gform_button{
  min-height: 46px;
  min-width: 126px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background-color: #93E9BE;
  color: #06120D;
  box-shadow: 0 14px 34px rgba(147,233,190,.18);
  font-weight: 1000;
  letter-spacing: .01em;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  appearance: none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease, border-color .16s ease;
}

body #gform_wrapper_1 .gform_page_footer .gform_previous_button{
  border: 1px solid rgba(147,233,190,.34);
  background-color: rgba(147,233,190,.12);
  color: rgba(245,247,255,.92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

body #gform_wrapper_1 .gform_page_footer .gform_previous_button:hover{
  background-color: rgba(147,233,190,.16);
  border-color: rgba(147,233,190,.46);
  transform: translateY(-1px);
}

body #gform_wrapper_1 .gform_page_footer .gform_next_button:hover,
body #gform_wrapper_1 .gform_page_footer input[type="submit"].gform_button:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(147,233,190,.24);
}

body #gform_wrapper_1 .gform_page_footer .gform_previous_button:focus-visible,
body #gform_wrapper_1 .gform_page_footer .gform_next_button:focus-visible,
body #gform_wrapper_1 .gform_page_footer input[type="submit"].gform_button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(147,233,190,.22), 0 14px 34px rgba(147,233,190,.18);
}

/* =========================================================
   MOBILE RESPONSIVE (vertical stack for image cards)
   - Step 1 and Step 2 become 1 column
   - Cards become shorter so you don't have to scroll forever
========================================================= */
@media (max-width: 900px){
  body #gform_wrapper_1{
    max-width: 94% !important;
    padding: 18px !important;
    margin: 18px auto !important;
  }

  /* Step 1: use a stable 2-column mobile grid so spacing stays consistent */
  body #gform_wrapper_1 #field_1_1{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  body #gform_wrapper_1 #field_1_1 .ginput_container_radio,
  body #gform_wrapper_1 #input_1_1{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #gform_wrapper_1 #input_1_1{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
  }

  /* Step 2: keep the material cards balanced on mobile */
  body #gform_wrapper_1 #field_1_3{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  body #gform_wrapper_1 #field_1_3 .ginput_container_radio,
  body #gform_wrapper_1 #input_1_3{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #gform_wrapper_1 #input_1_3{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
  }

  /* Step 1 cards: scale inside the 2-column mobile grid */
  body #gform_wrapper_1 #input_1_1 .gchoice{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body #gform_wrapper_1 #input_1_1 .gchoice label{
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    margin: 0 !important;
    --gf-local-margin-x: 0 !important;
    --gf-local-margin-y: 0 !important;
    padding: 14px 12px 18px !important;
    font-size: 14px !important;
    background-position: 0 0, center 42% !important;
    background-size: 100% 100%, 68% auto !important;
  }

  /* Center the last odd card so Step 1 doesn't look broken with 3 options */
  body #gform_wrapper_1 #input_1_1 .gchoice:last-child{
    grid-column: 1 / -1 !important;
    width: min(100%, calc(50% - 8px)) !important;
    justify-self: center !important;
  }

  body #gform_wrapper_1 #input_1_3 .gchoice{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Step 2 cards: keep both material options consistent on mobile */
  body #gform_wrapper_1 #input_1_3 .gchoice label{
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    margin: 0 !important;
    --gf-local-margin-x: 0 !important;
    --gf-local-margin-y: 0 !important;
    padding: 14px 12px 18px !important;
    font-size: 14px !important;
    background-position: 0 0, center 42% !important;
    background-size: 100% 100%, 74% auto !important;
  }

  body #gform_wrapper_1 #input_1_3 .gchoice:nth-child(1) label{
    background-size: 100% 100%, 66% auto !important;
  }

  body #gform_wrapper_1 #input_1_3 .gchoice:nth-child(2) label{
    background-size: 100% 100%, 78% auto !important;
  }

  /* Step 4: circle size options need a denser mobile layout */
  body #gform_wrapper_1 #field_1_6{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    /* ✅ DO NOT force display — Gravity Forms conditional logic controls visibility */
  }

  body #gform_wrapper_1 #field_1_6 .ginput_container_radio,
  body #gform_wrapper_1 #field_1_6 .gfield_radio,
  body #gform_wrapper_1 #input_1_6{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #gform_wrapper_1 #field_1_6 .gfield_radio,
  body #gform_wrapper_1 #input_1_6{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  body #gform_wrapper_1 #field_1_6 .gchoice,
  body #gform_wrapper_1 #input_1_6 .gchoice{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body #gform_wrapper_1 #field_1_6 .gfield_radio label,
  body #gform_wrapper_1 #input_1_6 .gchoice label{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    min-height: 112px !important;
    margin: 0 !important;
    --gf-local-margin-x: 0 !important;
    --gf-local-margin-y: 0 !important;
    padding: 14px 10px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  body #gform_wrapper_1 #field_1_6 .gfield_radio label::before,
  body #gform_wrapper_1 #input_1_6 .gchoice label::before{
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  /* Delivery expectation mobile */
  body #gform_wrapper_1 #field_1_23 .ginput_container_radio,
  body #gform_wrapper_1 #field_1_23 .gfield_radio,
  body #gform_wrapper_1 #input_1_23{
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #gform_wrapper_1 #field_1_23 .gfield_radio > li,
  body #gform_wrapper_1 #input_1_23 .gchoice,
  body #gform_wrapper_1 #field_1_23 .gchoice{
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    float: none !important;
  }

  body #gform_wrapper_1 #field_1_23 .gfield_radio label,
  body #gform_wrapper_1 #input_1_23 .gchoice label{
    width: 100% !important;
    min-height: 108px !important;
    height: 108px !important;
    margin: 0 !important;
    padding: 18px 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    border-radius: 20px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    white-space: normal !important;
  }

  body #gform_wrapper_1 #field_1_23 .gfield_radio label br,
  body #gform_wrapper_1 #input_1_23 .gchoice label br{
    display: none !important;
  }

  /* Keep quantity card tidy */
  body #gform_wrapper_1 #field_1_5{
    max-width: 100% !important;
  }

  body #gform_wrapper_1 #field_1_5 .ginput_container_number::after,
  body #gform_wrapper_1 #field_1_5 .ginput_container::after{
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding: 8px 10px !important;
  }
}