/* ==========================================================================
   SHOP — cart & checkout
   ========================================================================== */

.shop-page{ padding:7rem 0 var(--space-6); min-height:70vh; background:var(--ivory); }
.shop-wrap{ max-width:1080px; }
.shop-page .chapter-heading{ margin-bottom:2.6rem; max-width:20ch; }

.shop-grid{
  display:grid; grid-template-columns:1.6fr 1fr; gap:3rem;
  align-items:start;
}
.shop-grid[hidden]{ display:none; }

/* -- item row -- */
.shop-items{ display:flex; flex-direction:column; gap:1px; background:var(--color-line); border:1px solid var(--color-line); }
.shop-item{
  background:var(--paper);
  display:grid; grid-template-columns:auto 1fr auto auto; gap:1.4rem;
  align-items:center; padding:1.4rem;
}
.shop-item img{ width:64px; height:auto; border-radius:2px; box-shadow:0 10px 20px -10px rgba(55,49,42,0.35); }
.shop-item-title{ font-family:var(--font-display); font-size:1.2rem; color:var(--forest-deep); }
.shop-item-subtitle{ font-size:0.82rem; color:var(--color-text-soft); margin-top:0.2em; }

.qty-stepper{ display:flex; align-items:center; border:1px solid var(--color-line); border-radius:999px; overflow:hidden; }
.qty-stepper button{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--forest-deep); }
.qty-stepper button:hover{ background:rgba(47,71,54,0.08); }
.qty-stepper span{ min-width:28px; text-align:center; font-family:var(--font-body); font-size:0.9rem; }

.shop-item-price{ font-family:var(--font-display); font-size:1.1rem; color:var(--wine); white-space:nowrap; }
.shop-item-remove{
  grid-column:1/-1; justify-self:end;
  font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--charcoal-soft); text-decoration:underline; text-underline-offset:3px;
}
.shop-item-remove:hover{ color:var(--wine); }

@media (max-width:560px){
  .shop-item{ grid-template-columns:auto 1fr; row-gap:0.8rem; }
  .qty-stepper,.shop-item-price{ grid-column:2; justify-self:start; }
}

/* -- summary card -- */
.shop-summary{
  background:var(--cream); border:1px solid var(--color-line);
  padding:2rem 1.8rem; position:sticky; top:6.5rem;
}
.shop-summary h2{ font-size:1.3rem; margin-bottom:1.3rem; }
.summary-row{ display:flex; justify-content:space-between; padding:0.6rem 0; font-size:0.95rem; border-bottom:1px solid var(--color-line); }
.summary-row--note{ font-size:0.8rem; color:var(--color-text-soft); font-style:italic; }
.summary-row--total{ border-bottom:none; font-family:var(--font-display); font-size:1.3rem; color:var(--forest-deep); padding-top:1rem; }
.shop-checkout-btn{ display:flex; justify-content:center; width:100%; margin-top:1.6rem; }
.shop-checkout-btn[aria-disabled="true"]{ opacity:0.5; pointer-events:none; }
.shop-continue{ display:block; text-align:center; margin-top:1.2rem; font-size:0.85rem; color:var(--color-text-soft); text-decoration:none; }
.shop-continue:hover{ color:var(--wine); }

.shop-empty{ text-align:center; padding:5rem 1rem; }
.shop-empty-title{ font-family:var(--font-display); font-size:1.6rem; color:var(--forest-deep); margin-bottom:0.4em; }
.shop-empty p{ color:var(--color-text-soft); margin-bottom:1.8rem; }

@media (max-width:820px){
  .shop-grid{ grid-template-columns:1fr; }
  .shop-summary{ position:static; }
}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.checkout-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; align-items:start; }

.checkout-form{ background:var(--paper); border:1px solid var(--color-line); padding:2.2rem clamp(1.4rem, 3vw, 2.4rem); }
.form-section + .form-section{ margin-top:2.2rem; padding-top:2.2rem; border-top:1px solid var(--color-line); }
.form-section h2{ font-size:1.2rem; margin-bottom:1.3rem; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-field{ display:flex; flex-direction:column; gap:0.45rem; margin-bottom:1.1rem; }
.form-field label{ font-size:0.78rem; letter-spacing:0.04em; color:var(--charcoal-soft); }
.form-field input,.form-field textarea{
  font-family:var(--font-body); font-size:0.95rem; color:var(--charcoal);
  border:1px solid var(--color-line); border-radius:2px;
  padding:0.75em 0.9em; background:#fff;
  transition:border-color var(--dur-fast) ease;
}
.form-field input:focus,.form-field textarea:focus{ border-color:var(--sage); outline:2px solid transparent; }
.form-field .field-error{ font-size:0.76rem; color:var(--wine); display:none; }
.form-field.has-error input{ border-color:var(--wine); }
.form-field.has-error .field-error{ display:block; }

.payfast-panel{
  background:var(--cream); border:1px solid var(--color-line); padding:1.6rem 1.4rem;
  margin-top:1.6rem;
  display:flex; gap:1rem; align-items:flex-start;
}
.payfast-panel svg{ flex:none; width:26px; height:26px; color:var(--olive); margin-top:0.1rem; }
.payfast-panel p{ font-size:0.86rem; color:var(--color-text-soft); margin:0; }
.payfast-panel strong{ color:var(--forest-deep); }

.checkout-submit{ width:100%; justify-content:center; margin-top:1.8rem; }
.checkout-submit[disabled]{ opacity:0.5; cursor:not-allowed; }

.checkout-summary{
  background:var(--cream); border:1px solid var(--color-line);
  padding:2rem 1.8rem; position:sticky; top:6.5rem;
}
.checkout-summary h2{ font-size:1.2rem; margin-bottom:1.2rem; }
.checkout-line-item{ display:flex; gap:1rem; align-items:center; padding-bottom:1.2rem; border-bottom:1px solid var(--color-line); margin-bottom:1.2rem; }
.checkout-line-item img{ width:52px; border-radius:2px; }
.checkout-line-item-title{ font-family:var(--font-display); font-size:1.05rem; color:var(--forest-deep); }
.checkout-line-item-meta{ font-size:0.8rem; color:var(--color-text-soft); }

@media (max-width:820px){
  .checkout-grid{ grid-template-columns:1fr; }
  .checkout-summary{ position:static; order:-1; }
  .form-row{ grid-template-columns:1fr; }
}