/* ===== Tokens ===== */
.sub-builder{
  --sb-brand: var(--brand, #0e5675);
  --sb-accent: var(--accent, #BFE4FF);
  --sb-bg: #eef5fa;
  --sb-text: #0b2430;
  --sb-gap: 1rem;
}

/* ===== Steps / headings ===== */
.sub-builder .sb-step{ margin: 2.5rem 0; }
.sb-step h3{ display:flex; align-items:center; gap:.75rem; font-size:1.5rem; margin:0 0 1rem; color:var(--sb-text); }
.sb-stepnum{ width:2.25rem; height:2.25rem; border:2px solid var(--sb-brand); border-radius:50%; display:inline-grid; place-items:center; font-weight:700; }

/* ===== Grids ===== */
.sub-builder .sb-grid{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--sb-gap);
  align-items: stretch;                 /* stretch children => equal height per row */
}
.sb-grid.sb-grid--auto{ grid-template-columns: repeat(3,minmax(0,1fr)); }

/* Step 5: one row of 4 on desktop */
.sb-step[data-step="5"] .sb-grid{
  grid-template-columns: repeat(4,minmax(0,1fr));
}

/* Fixed term row */
.sb-fixed-row{
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--sb-gap);
  margin-top: var(--sb-gap) !important;
}

/* ===== Roast section layout ===== */
.sb-brew-wrap{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap:2rem;
  align-items:start;
}

/* Responsive */
@media (max-width:900px){
  .sb-grid.sb-grid--auto, .sb-fixed-row{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sb-step[data-step="5"] .sb-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  .sub-builder .sb-grid{
    grid-template-columns: repeat(1,minmax(0,1fr));
  }
  .sub-builder .sb-grid.sb-grid--auto{
    grid-template-columns: repeat(1,minmax(0,1fr));
  }
  .sb-step[data-step="5"] .sb-grid{
    grid-template-columns: repeat(1,minmax(0,1fr));
  }
  .sb-fixed-row{
    grid-template-columns: repeat(1,minmax(0,1fr));
  }
  .sb-brew-wrap{
    grid-template-columns: 1fr;
  }
  .sb-card{
    padding: 5vw!important;
  }
}

/* ===== Cards ===== */
.sb-card{
  background:var(--sb-bg);
  border:1px solid rgba(14,86,117,.25);
  border-radius:16px;
  padding: 1.75vw 2vw;
  cursor:pointer;
  position:relative;
  transition:box-shadow .2s, border-color .2s, background-color .2s, color .2s;
  color:var(--sb-text);

  /* Equal-height content layout */
  display:flex;
  flex-direction:column;
}
.sb-grid > .sb-card{ height:100%; }           /* ensure labels fill grid track */
#sb-espresso-options .sb-card{ height:100%; }  /* espresso cards equalise too */

.sb-card__title{ margin:0 0 .5rem; font-weight:800; font-size:var(--fs-h4); line-height:1.3; }
.sb-card p{ margin:0; line-height:1.35; opacity:.9; }

/* Hover + inputs */
.sb-card:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); }
.sb-card input{ position:absolute; inset:0; opacity:0; }

/* Selected state */
.sb-card.is-selected,
.sb-card:has(input:checked){
  border-color: var(--sb-brand);
  background: var(--sb-brand);
  color: var(--sb-accent);
  box-shadow:0 0 0 2px rgba(14,86,117,.25) inset;
}
.sb-card.is-selected .sb-card__title,
.sb-card.is-selected p,
.sb-card.is-selected .elementor-heading-title,
.sb-card.is-selected .elementor-icon-box-title,
.sb-card.is-selected .elementor-icon-box-description,
.sb-card:has(input:checked) .sb-card__title,
.sb-card:has(input:checked) p,
.sb-card:has(input:checked) .elementor-heading-title,
.sb-card:has(input:checked) .elementor-icon-box-title,
.sb-card:has(input:checked) .elementor-icon-box-description{
  color: var(--sb-accent) !important;
  opacity: 1;
}
.sb-card.is-selected a,
.sb-card:has(input:checked) a{
  color: var(--sb-accent) !important;
}

.sub-builder .sb-card :where(h1,h2,h3,h4,h5,h6){
  color: inherit !important;
}

/* Espresso grid visibility */
#sb-espresso-options[aria-hidden="true"]{ display:none; }

/* ===== Summary / CTA ===== */
.sb-summary .sb-list{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.35rem; }
.sb-price{ font-weight:800; font-size:1.1rem; margin:.25rem 0 1rem; }
.sb-help{ color:#8a1f1f; margin:.5rem 0 0; min-height:1.25rem; }
.sub-builder .button{ min-width:11rem; }
.sub-builder .button[disabled]{ opacity:.6; cursor:not-allowed; }

/* Locked steps until a roast selection is made */
.sb-step--locked{
  opacity:.5;
  pointer-events:none;
}

/* Appended fixed-term note that clarifies months */
.sb-term-note{ display:inline-block; margin-left:.35rem; font-weight:700; }