/* ==========================================================================
   RHP SUPERFOOD — Commerce pages styling (shop, cart, checkout, account)
   Complements styles.css (the homepage design system).
   ========================================================================== */

/* ---- Breadcrumb hero ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--mint), var(--cream) 60%);
  border-bottom: 1px solid rgba(20,67,47,.06);
}
.page-hero .crumbs a { color: var(--fern); }
.page-hero .crumbs a:hover { color: var(--forest); }

/* ---- Form fields ---- */
.field {
  width: 100%;
  background: #fff;
  border: 1.5px solid rgba(20,67,47,.14);
  border-radius: 0.9rem;
  padding: 0.85rem 1.05rem;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.field::placeholder { color: #9aa8a0; }
.field:focus {
  outline: none;
  border-color: var(--fern);
  box-shadow: 0 0 0 4px rgba(127,185,154,.22);
}
.field:disabled, .field[readonly] { background: var(--bone); color: var(--stone); cursor: not-allowed; }
.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%232F6B4F' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem; }

/* ---- Alerts ---- */
.alert { border-radius: 0.9rem; padding: 0.85rem 1.1rem; font-size: 0.9rem; font-weight: 500; display:flex; gap:.6rem; align-items:center; }
.alert-success { background: var(--mint); color: #1c5238; }
.alert-danger  { background: #FBE6E2; color: #9a2b1c; }
.alert-info    { background: #EAF1FB; color: #1f4a86; }

/* ---- Account sidebar ---- */
.acct-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem; border-radius: 0.9rem;
  font-weight: 500; color: var(--ink);
  transition: background-color .2s ease, color .2s ease;
}
.acct-link:hover { background: var(--bone); }
.acct-link.active { background: var(--forest); color: #fff; }
.acct-link.active svg { color: var(--goldlt); }
.acct-link.danger:hover { background: #FBE6E2; color: #9a2b1c; }

/* ---- Status pills ---- */
.status-pill { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.35rem .8rem; border-radius:999px; }
.st-placed    { background: var(--mint); color: var(--forest); }
.st-confirmed { background:#E4EEFb; color:#1f4a86; }
.st-shipped   { background:#FdF1d8; color:#8a6516; }
.st-delivered { background:#DBF0E2; color:#1c6b3a; }
.st-cancelled { background:#FBE0DB; color:#9a2b1c; }
.st-paid      { background:#DBF0E2; color:#1c6b3a; }
.st-pending   { background:#FdF1d8; color:#8a6516; }

/* ---- Tracking timeline ---- */
.track-rail { position: relative; }
.track-bar { height: 6px; border-radius: 999px; background: var(--bone); overflow: hidden; }
.track-bar > span { display:block; height:100%; background: linear-gradient(90deg, var(--fern), var(--sage)); border-radius:999px; transition: width .8s var(--ease-out); }
.track-node { width: 34px; height: 34px; border-radius: 999px; display:grid; place-items:center; background:#fff; border:2px solid var(--bone); color:#b6c2bb; }
.track-node.done { background: var(--forest); border-color: var(--forest); color:#fff; }
.track-node.current { border-color: var(--gold); color: var(--gold); box-shadow:0 0 0 4px rgba(196,154,58,.2); }

.timeline-item { position: relative; padding-left: 1.6rem; padding-bottom: 1.1rem; border-left: 2px solid var(--bone); }
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-item::before { content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:999px; background: var(--fern); box-shadow:0 0 0 3px var(--mint); }

/* ---- Qty stepper ---- */
.qty-stepper { display:inline-flex; align-items:center; border:1.5px solid rgba(20,67,47,.14); border-radius:999px; overflow:hidden; background:#fff; }
.qty-stepper button { width:38px; height:40px; display:grid; place-items:center; color:var(--forest); transition:background-color .2s; }
.qty-stepper button:hover { background: var(--mint); }
.qty-stepper input { width:42px; text-align:center; border:0; font-weight:600; color:var(--ink); -moz-appearance:textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ---- Coupon row ---- */
.coupon-row { border:1.5px dashed rgba(20,67,47,.2); border-radius:1rem; transition:border-color .2s, background-color .2s; }
.coupon-row:hover { border-color: var(--fern); background: var(--mint)/30; }
.coupon-code { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:.05em; color:var(--forest); }

/* Make footer WhatsApp + back-to-top not overlap on small screens already handled (left vs right) */

/* Reveal fallback on commerce pages (content must always show even without JS) */
.no-js .reveal { opacity:1 !important; transform:none !important; }