/* ---------- Step indicator ---------- */

.wizard-steps{
  display:flex; list-style:none; gap:6px; margin:8px 0 28px; padding:0;
  flex-wrap:wrap;
}
.wizard-steps li{
  flex:1; min-width:80px; text-align:center; font-size:12px; font-weight:600;
  color:var(--muted); padding:10px 6px; background:#fff; border:1px solid var(--line);
  border-radius:3px; position:relative;
}
.wizard-steps li.is-active{background:var(--field); color:var(--chalk); border-color:var(--field);}
.wizard-steps li.is-done{background:#eef1ea; color:var(--field); border-color:var(--line);}

.wizard-layout{padding-top:0;}

.wizard-panel{animation:fadeIn 0.25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.wizard-panel{animation:none;}}

.wizard-nav{display:flex; justify-content:space-between; gap:12px; margin-top:8px;}

/* ---------- Product grid (Step 1) ---------- */

.product-grid{display:flex; flex-direction:column; gap:14px; margin-bottom:8px;}
.product-option{
  display:flex; align-items:center; gap:18px; background:#fff; border:1.5px solid var(--line);
  border-radius:6px; padding:20px; cursor:pointer; text-align:left; width:100%;
  transition:border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.product-option:hover{border-color:var(--dirt); transform:translateY(-2px); box-shadow:0 14px 26px -18px rgba(0,0,0,0.3);}
.product-option.selected{border-color:var(--brick); background:#fdf3f0;}
.product-option .dim{
  font-family:'Roboto Slab',serif; font-weight:700; font-size:20px; color:var(--field);
  min-width:100px;
}
.product-option .desc{flex:1; font-size:13.5px; color:var(--muted);}
.product-option .dims-note{display:block; font-size:11px; color:var(--muted); margin-top:4px; letter-spacing:0.02em;}
.product-option .price{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:19px; color:var(--brick); white-space:nowrap;}

/* ---------- Icon grid (Step 2) ---------- */

.icon-section{margin-bottom:32px; padding-top:8px; border-top:1px solid var(--line);}
.icon-section-title{font-family:'Roboto Slab',serif; font-size:16px; color:var(--field); margin:20px 0 4px;}
.icon-section-sub{font-size:13px; color:var(--muted); margin-bottom:16px;}

.picker-icon-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px;}
.picker-icon{
  background:#fff; border:1.5px solid var(--line); border-radius:6px; padding:12px 8px;
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; text-align:center;
  font-size:11.5px; color:var(--ink);
}
.picker-icon:hover{border-color:var(--dirt);}
.picker-icon.selected{border-color:var(--brick); background:#fdf3f0;}
.picker-icon.unavailable{opacity:0.4; cursor:not-allowed;}
.picker-icon img{width:34px; height:34px; object-fit:contain;}
.picker-icon .icon-name{font-weight:600; line-height:1.2;}
.picker-icon .icon-price{font-family:'IBM Plex Mono',monospace; color:var(--brick); font-size:10.5px;}
.picker-icon .icon-unavail-note{font-size:9.5px; color:#9a9c94;}
.picker-icon.no-icon-option{justify-content:center;}
.picker-icon.no-icon-option .no-icon-glyph{
  width:34px; height:34px; border:1.5px dashed var(--line); border-radius:50%;
}

/* ---------- Forms (Steps 3–4) ---------- */

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.form-grid-3{grid-template-columns:2fr 1fr 1fr;}
.form-field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;}
.form-field input, .form-field select{
  width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:3px;
  font-size:14px; font-family:'Source Sans 3',sans-serif; background:#fff; color:var(--ink);
}
.form-field input:focus-visible, .form-field select:focus-visible{
  outline:3px solid var(--dirt); outline-offset:1px; border-color:var(--brick);
}
.field-note{font-size:12.5px; color:var(--muted); background:#faf8f2; border:1px solid var(--line); border-radius:3px; padding:12px 14px; margin-bottom:24px;}

/* ---------- Cart summary strip ---------- */

.cart-summary{
  background:var(--field); color:var(--chalk); border-radius:6px; padding:14px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; font-size:13.5px;
}
.cart-summary .cart-count{font-weight:700; font-family:'Roboto Slab',serif;}
.cart-summary .cart-items{flex:1; color:rgba(243,238,225,0.8); font-size:12.5px;}
.cart-summary .cart-total{font-family:'IBM Plex Mono',monospace; color:var(--dirt); font-weight:600;}

/* ---------- Multi-brick review ---------- */

.review-brick{
  border:1px solid var(--line); border-radius:6px; padding:16px 18px; margin-bottom:12px; background:#fff;
}
.review-brick-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
.review-brick-head .dim{font-family:'Roboto Slab',serif; font-weight:700; color:var(--field); font-size:15px;}
.review-brick-head .price{font-family:'IBM Plex Mono',monospace; color:var(--brick); font-weight:600;}
.review-brick .eng{font-size:13.5px; color:var(--muted-2);}
.review-brick .meta{font-size:12px; color:var(--muted); margin-top:4px;}
.review-order-total{
  display:flex; justify-content:space-between; align-items:baseline; padding:16px 4px 4px;
  border-top:2px solid var(--field); margin-top:8px; font-size:16px; font-weight:700; color:var(--field);
}
.review-order-total .amount{font-family:'IBM Plex Mono',monospace; color:var(--brick);}

.review-summary{background:#fff; border:1px solid var(--line); border-radius:6px; padding:20px 24px; margin-bottom:24px;}
.review-row{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px;}
.review-row:last-child{border-bottom:none;}
.review-row .label{color:var(--muted);}
.review-row .value{text-align:right; font-weight:600; color:var(--field); max-width:60%;}

.terms-box{background:#faf8f2; border:1px solid var(--line); border-radius:6px; padding:18px 22px; margin-bottom:16px; font-size:13.5px; color:var(--muted-2);}
.terms-box ul{margin:10px 0 0; padding-left:20px;}
.terms-box li{margin-bottom:6px;}

/* ---------- Save step (Step 6) ---------- */

.paypal-order-banner{
  background:var(--field); color:var(--chalk); border-radius:6px; padding:14px 18px;
  font-size:14px; margin-bottom:20px; text-align:center;
}
.paypal-order-banner strong{color:var(--dirt);}
#paypal-button-container{max-width:420px; margin:0 auto; min-height:45px;}
.paypal-note{font-size:12.5px; color:var(--muted); text-align:center; margin-top:16px;}
.save-success{
  background:var(--field); color:var(--chalk); border-radius:8px; padding:36px 32px; text-align:center;
}
.save-success h2{font-size:22px; margin-bottom:10px;}
.save-success .order-num{font-family:'IBM Plex Mono',monospace; font-size:20px; color:var(--dirt); margin:14px 0;}
.save-success p{font-size:14px; color:rgba(243,238,225,0.85); max-width:440px; margin:0 auto 8px;}
.save-error{
  background:#fdf0ee; border:1px solid #e6b8b0; color:#a02c1f; border-radius:6px; padding:18px 22px; font-size:13.5px;
}

/* ---------- Preview panel additions ---------- */

.pv-icon{width:28px; height:28px; margin-bottom:4px; opacity:0.9;}
.preview-total{
  display:flex; justify-content:space-between; align-items:baseline; margin:14px 0;
  padding-top:14px; border-top:1px solid rgba(243,238,225,0.15); color:var(--chalk);
}
.preview-total span{font-size:12.5px; color:rgba(243,238,225,0.75);}
.preview-total strong{font-family:'IBM Plex Mono',monospace; font-size:20px; color:var(--dirt);}

@media(max-width:760px){
  .form-grid, .form-grid-3{grid-template-columns:1fr;}
  .product-option{flex-direction:column; align-items:flex-start; gap:8px;}
}