/* ==========================================================================
   FLUX PRIME — shop.css
   Cart, checkout and My Account.
   Requires: base.css, category.css (page-head + breadcrumb), pages.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: content + summary rail
   -------------------------------------------------------------------------- */
.shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(var(--space-5), 3vw, var(--space-7));
  align-items: start;
  padding-block: var(--space-6) var(--space-9);
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.panel + .panel { margin-top: var(--space-4); }
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.panel__title { font-family: var(--font-head); font-size: 1rem; font-weight: 600; }
.panel__body { padding: var(--space-5); }
.panel__body--flush { padding: 0; }

/* --------------------------------------------------------------------------
   Cart lines
   -------------------------------------------------------------------------- */
.line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.line:last-child { border-bottom: 0; }
.line[hidden] { display: none; }

.line__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.line__media img { width: 100%; height: 100%; object-fit: cover; }

.line__name {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
}
.line__name a:hover { color: var(--color-accent); }
.line__variant {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.line__unit { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-light); }
.line__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.line__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  transition: color var(--dur-fast) var(--ease-out);
}
.line__remove:hover { color: var(--color-danger); }
.line__remove svg { width: 13px; height: 13px; }

.line__right { text-align: right; display: grid; gap: var(--space-2); justify-items: end; }
.line__total {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.line__was {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-decoration: line-through;
}

/* Compact quantity stepper (cart + checkout) */
.qty-sm {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.qty-sm button {
  width: 30px; height: 32px;
  display: grid; place-items: center;
  color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.qty-sm button:hover { background: var(--color-surface-2); color: var(--color-text); }
.qty-sm button:disabled { opacity: 0.35; pointer-events: none; }
.qty-sm svg { width: 12px; height: 12px; }
.qty-sm input {
  width: 38px; height: 32px;
  border: 0; background: transparent; text-align: center;
  font-family: var(--font-head); font-weight: 600; font-size: 0.875rem;
  -moz-appearance: textfield;
}
.qty-sm input::-webkit-outer-spin-button,
.qty-sm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-sm input:focus { outline: none; }

/* --------------------------------------------------------------------------
   Summary rail
   -------------------------------------------------------------------------- */
.summary { position: sticky; top: calc(var(--header-h) + var(--space-4)); }

.sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.sum-row + .sum-row { border-top: 1px solid var(--color-border); }
.sum-row b { font-family: var(--font-head); color: var(--color-text); font-variant-numeric: tabular-nums; }
.sum-row--save b { color: var(--color-success); }
.sum-row--free b { color: var(--color-success); }

.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-strong);
}
.sum-total span { font-family: var(--font-head); font-size: 1rem; font-weight: 600; }
.sum-total b {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sum-note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); }

.summary .btn { margin-top: var(--space-5); width: 100%; }

/* --- Promo --- */
.promo { display: flex; gap: var(--space-2); }
.promo .input { flex: 1; text-transform: uppercase; }
.promo .btn { width: auto; margin: 0; flex-shrink: 0; }
.promo-msg { margin-top: var(--space-2); font-size: var(--text-xs); min-height: 1em; }
.promo-msg.is-ok { color: var(--color-success); }
.promo-msg.is-bad { color: var(--color-danger); }
.promo-hint { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); }
.promo-hint code {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  font-size: 0.95em;
}

/* --- Trust strip under the summary --- */
.sum-trust { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.sum-trust div { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-light); }
.sum-trust svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Empty cart
   -------------------------------------------------------------------------- */
.empty-state {
  display: none;
  padding: var(--space-9) var(--space-5);
  text-align: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.empty-state.is-shown { display: block; }
.empty-state svg { width: 38px; height: 38px; margin: 0 auto var(--space-4); color: var(--color-text-faint); }
.empty-state__title { font-size: var(--text-xl); }
.empty-state__text { margin-top: var(--space-2); color: var(--color-text-light); font-size: var(--text-sm); }
.empty-state .btn { margin-top: var(--space-5); }

/* --------------------------------------------------------------------------
   Checkout stepper
   -------------------------------------------------------------------------- */
.stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-top: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-border);
}
.step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  transition: background var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out);
}
.step__num {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 600;
}
.step__num svg { width: 14px; height: 14px; }
.step__label { font-family: var(--font-head); font-weight: 500; }

.step.is-current { background: var(--color-accent); color: var(--color-accent-ink); }
.step.is-current .step__num { border-color: var(--color-accent-ink); }
.step.is-done { background: rgba(212, 175, 55, 0.12); color: var(--color-accent); }

/* --- Checkout steps --- */
.co-step[hidden] { display: none; }

.co-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.co-grid .field--full { grid-column: 1 / -1; }

.phone-field { display: flex; }
.phone-field .phone-cc {
  display: grid;
  place-items: center;
  padding-inline: 0.8em;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-family: var(--font-head);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.phone-field .input { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.co-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --- Review list --- */
.review-block + .review-block { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.review-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.review-block__title { font-family: var(--font-head); font-size: 0.9375rem; font-weight: 600; }
.review-block__edit { font-size: var(--text-sm); color: var(--color-accent); }
.review-block__edit:hover { text-decoration: underline; }
.review-block__body { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }

/* --- Payment methods --- */
.pay-methods { display: grid; gap: var(--space-2); }
.pay-opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pay-opt:hover { border-color: var(--color-border-strong); }
.pay-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-opt__dot {
  position: relative;
  width: 16px; height: 16px;
  flex-shrink: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
}
.pay-opt__dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-accent-ink);
  opacity: 0;
}
.pay-opt input:checked + .pay-opt__dot { background: var(--color-accent); border-color: var(--color-accent); }
.pay-opt input:checked + .pay-opt__dot::after { opacity: 1; }
.pay-opt input:checked ~ .pay-opt__text .pay-opt__name { color: var(--color-text); }
.pay-opt:has(input:checked) { border-color: var(--color-accent); background: rgba(212, 175, 55, 0.05); }
.pay-opt input:focus-visible + .pay-opt__dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pay-opt__text { flex: 1; }
.pay-opt__name { font-size: 0.9375rem; color: var(--color-text-muted); }
.pay-opt__note { margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-faint); }

/* --------------------------------------------------------------------------
   Kit tier selector (summary rail)
   -------------------------------------------------------------------------- */
.tiers { display: grid; gap: var(--space-2); }
.tier {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tier:hover { border-color: var(--color-border-strong); }
.tier input { position: absolute; opacity: 0; width: 0; height: 0; }
.tier__dot {
  position: relative;
  width: 15px; height: 15px;
  flex-shrink: 0;
  margin-top: 3px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
}
.tier__dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--color-accent-ink); opacity: 0; }
.tier input:checked + .tier__dot { background: var(--color-accent); border-color: var(--color-accent); }
.tier input:checked + .tier__dot::after { opacity: 1; }
.tier:has(input:checked) { border-color: var(--color-accent); background: rgba(212, 175, 55, 0.05); }
.tier input:focus-visible + .tier__dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tier__text { flex: 1; min-width: 0; }
.tier__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}
.tier__price { font-variant-numeric: tabular-nums; }
.tier__note { margin-top: 3px; font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.45; }

/* --- Kit includes list --- */
.includes { display: grid; gap: var(--space-2); }
.includes li { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.includes svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--color-accent); }

.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.doc-row__label { font-size: var(--text-xs); color: var(--color-text-faint); }
.doc-row__value { margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   My Account
   -------------------------------------------------------------------------- */
.account {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(var(--space-5), 3vw, var(--space-6));
  align-items: start;
  padding-block: var(--space-6) var(--space-9);
}

.acct-side { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.acct-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.acct-avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-head);
  font-weight: 600;
}
.acct-user__name { font-family: var(--font-head); font-size: 0.9375rem; font-weight: 500; }
.acct-user__mail { font-size: var(--text-xs); color: var(--color-text-faint); word-break: break-all; }

.acct-nav { display: grid; padding: var(--space-2); }
.acct-nav button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.acct-nav button svg { width: 16px; height: 16px; flex-shrink: 0; }
.acct-nav button:hover { background: var(--color-surface-3); color: var(--color-text); }
.acct-nav button[aria-selected="true"] {
  background: rgba(212, 175, 55, 0.1);
  color: var(--color-accent);
  font-weight: 500;
}
.acct-nav__count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.acct-panel[hidden] { display: none; }

/* --- Dashboard tiles --- */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.tile {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.tile__value { font-family: var(--font-head); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.tile__label { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-light); }

/* --- Tables --- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; font-size: var(--text-sm); border-collapse: collapse; }
.data-table th {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  white-space: nowrap;
}
.data-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table td a:hover { color: var(--color-accent); }
.data-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.65em;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-family: var(--font-head);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.pill--done { color: var(--color-success); }
.pill--transit { color: var(--color-accent); }
.pill--processing { color: var(--color-warning); }
.pill--cancelled { color: var(--color-danger); }

/* --- Address cards --- */
.addr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.addr {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.addr--default { border-color: rgba(212, 175, 55, 0.4); }
.addr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.addr__kind { font-family: var(--font-head); font-size: 0.9375rem; font-weight: 600; }
.addr__body { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
.addr__tools { display: flex; gap: var(--space-4); margin-top: var(--space-4); font-size: var(--text-sm); }
.addr__tools button { color: var(--color-accent); }
.addr__tools button:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .account { grid-template-columns: minmax(0, 1fr); }
  .acct-side { position: static; }
  .acct-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .acct-nav__count { display: none; }
}

@media (max-width: 760px) {
  .stepper { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .addr-grid { grid-template-columns: minmax(0, 1fr); }
  .co-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .line { grid-template-columns: 72px minmax(0, 1fr); }
  .line__right { grid-column: 2; justify-items: start; text-align: left; }
  .step { padding: var(--space-3) var(--space-4); }
}

/* --------------------------------------------------------------------------
   Panel footer
   The cart's quantities are a real form, so it needs somewhere to put the
   buttons that submit it.
   -------------------------------------------------------------------------- */
.panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}
/* With JavaScript the steppers submit on their own. */
.js .panel__foot .btn:first-child { display: none; }

.line__remove { cursor: pointer; }


/* ---------------------------------------------------------------------
   Checkout: optional blocks a customer opts into (GSTIN, a separate
   delivery address). The checkbox and its note read as one unit, set
   apart from the fields above so it is clear it governs what follows.
   --------------------------------------------------------------------- */
.co-toggle {
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.02));
}

.co-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  cursor: pointer;
}

.co-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--color-accent, #2d3447);
  cursor: pointer;
}

.co-toggle__note {
  margin: var(--space-2) 0 0 calc(18px + var(--space-3));
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-faint);
}

/* A revealed block sits slightly indented so it reads as belonging to
   the checkbox that opened it. */
#gstin-block:not([hidden]),
#ship-block:not([hidden]) {
  margin-bottom: var(--space-4);
}

@media (max-width: 560px) {
  .co-toggle__note { margin-left: 0; }
}