/* ============================================================
   SHOP — the bag, option choice, and (later) checkout
   ------------------------------------------------------------
   Built only from the House tokens. Works in both lights:
   the drawer is always night; the bag page follows its room.
   ============================================================ */

/* ---------- Option choice on a product (ring sizes, etc.) ---------- */
.options { border: 0; padding: 0; margin: 0 0 1rem; }
.options legend {
  font-family: var(--font-house);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.lit-day .options legend, .lit-dawn .options legend { color: var(--gold-burnished); }
.options__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.option span {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0.55rem 1.1rem;
  border: 1px solid var(--edge);
  border-radius: var(--curve-pill);
  font-size: var(--t-sm);
  color: var(--fg);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.option input:hover + span { border-color: var(--gold); }
.option input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.option input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--obsidian); }
.option input:disabled + span { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }

.buy-note { font-size: var(--t-xs); color: var(--fg-soft); line-height: 1.55; margin-top: 0.7rem; }
.buy-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.buy-note a:hover, .buy-note a:focus-visible { color: var(--gold); }

.btn[aria-busy='true'] { opacity: 0.7; pointer-events: none; }

/* ---------- Bag lines (drawer and page) ---------- */
.bag-lines { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.bag-line {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--edge-solid, var(--obsidian-edge));
}
.drawer .bag-line { border-bottom-color: var(--obsidian-edge); }
.bag-line:first-child { padding-top: 0; }
.bag-line__img {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--curve-arch);
  background: var(--charcoal);
}
.bag-line__img img { width: 100%; height: 100%; object-fit: cover; }
.bag-line__body { display: grid; align-content: start; gap: 0.25rem; min-width: 0; }
.bag-line__name {
  font-family: var(--font-house);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  line-height: 1.35;
}
.bag-line__name:hover, .bag-line__name:focus-visible { color: var(--gold); }
.bag-line__opt { font-size: var(--t-xs); color: var(--fg-soft); }
.bag-line__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 0.35rem;
}
.bag-line__one { font-size: var(--t-xs); color: var(--fg-soft); }
.bag-line__remove { justify-self: start; min-height: 40px; padding: 0.5rem 0; }

.bag-line--big { grid-template-columns: clamp(96px, 18vw, 150px) 1fr; gap: clamp(1rem, 2vw, 1.8rem); padding: 1.4rem 0; }
.bag-line--big .bag-line__name { font-size: 1.05rem; }

/* Quantity stepper — only shown when more than one exists */
.bag-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--edge);
  border-radius: var(--curve-pill);
}
.bag-qty button {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--fg);
  font-size: 1.05rem;
}
.bag-qty button:hover:not([disabled]), .bag-qty button:focus-visible { color: var(--gold); }
.bag-qty button[disabled] { opacity: 0.35; cursor: not-allowed; }
.bag-qty span { min-width: 1.6rem; text-align: center; font-size: var(--t-sm); }

/* ---------- Summary ---------- */
.bag-sum { display: grid; gap: 0.8rem; margin-top: 1.2rem; }
.bag-sum__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-house);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bag-sum__row .price { font-family: var(--font-body); font-size: 1.15rem; letter-spacing: 0; text-transform: none; }
.bag-sum__note { font-size: var(--t-xs); color: var(--fg-soft); line-height: 1.55; }
.bag-sum__view { justify-self: center; }

/* ---------- The bag page ---------- */
.bag-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.bag-page__sum { position: sticky; top: 6.5rem; }
.bag-page__sum .bag-sum { margin-top: 0; }

@media (max-width: 859px) {
  .bag-page { grid-template-columns: 1fr; }
  .bag-page__sum { position: static; }
}

/* ============================================================
   CHECKOUT + ORDER PAGE
   ============================================================ */
.opt { font-family: var(--font-body); letter-spacing: 0; text-transform: none; color: var(--fg-soft); font-size: var(--t-xs); }

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.checkout__sum { position: sticky; top: 6.5rem; display: grid; gap: 1rem; }
.checkout__sum .btn--text { justify-self: start; }

.co-step { border: 0; padding: 0; margin: 0 0 var(--space-lg); min-width: 0; }
.co-step > legend { display: block; margin-bottom: 1.1rem; padding: 0; }
.co-row { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr; gap: 0 1rem; }
.co-ships { font-size: var(--t-sm); color: var(--fg-soft); margin-bottom: 1rem; }
.co-quiet { font-size: var(--t-sm); color: var(--fg-soft); }

/* Delivery choices */
.co-ship { display: grid; gap: 0.6rem; }
.co-ship__opt {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--edge);
  border-radius: 0.8rem;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.co-ship__opt input { accent-color: var(--gold-burnished); width: 18px; height: 18px; flex: none; margin: 0; }
.co-ship__opt:has(input:checked) { border-color: var(--gold-burnished); background: var(--gold-breath); }
.co-ship__opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.co-ship__body { flex: 1; display: grid; gap: 0.15rem; }
.co-ship__name { font-size: var(--t-sm); color: var(--fg); }
.co-ship__note { font-size: var(--t-xs); color: var(--fg-soft); }

/* Summary lines */
.co-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.co-lines li { display: grid; grid-template-columns: 52px 1fr auto; gap: 0.8rem; align-items: center; }
.co-lines__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--curve-arch); background: var(--charcoal); }
.co-lines__img img { width: 100%; height: 100%; object-fit: cover; }
.co-lines__name { font-size: var(--t-sm); line-height: 1.35; color: var(--fg); }
.co-lines__name small { display: block; font-size: var(--t-xs); color: var(--fg-soft); }

.co-coupon { margin: 0; }
.co-coupon__row { display: flex; gap: 0.5rem; }
.co-coupon__row input { flex: 1; min-width: 0; text-transform: uppercase; }

.co-totals { display: grid; gap: 0.45rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--edge); }
.co-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); }
.co-totals dt { color: var(--fg-soft); }
.co-totals dd { margin: 0; color: var(--fg); }
.co-totals > div[hidden] { display: none; }
.co-totals__total { padding-top: 0.6rem; margin-top: 0.3rem; border-top: 1px solid var(--edge); }
.co-totals__total dt, .co-totals__total dd {
  font-family: var(--font-house); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg);
}
.co-totals__total dd { font-family: var(--font-body); font-size: 1.2rem; letter-spacing: 0; }
.co-problems { color: var(--fg); }
.btn[disabled] { cursor: not-allowed; }

.test-mode { border-left-color: var(--copper); }

/* Order page */
.order-card { display: grid; gap: 1.4rem; }
.order-card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--edge); }
.order-card__cols .house-label { margin-bottom: 0.5rem; }
.order-card address, .order-card__cols p { font-style: normal; font-size: var(--t-sm); line-height: 1.6; color: var(--fg); }
.order-card__gift { font-style: italic; }
.co-track { margin-top: 1rem; font-size: var(--t-sm); }

@media (max-width: 899px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__sum { position: static; }
}
@media (max-width: 640px) {
  .co-row { grid-template-columns: 1fr 1fr; }
  .co-row > .field:first-child { grid-column: 1 / -1; }
  .order-card__cols { grid-template-columns: 1fr; }
}

/* Section headings on the shop's light pages: burnished gold, the same
   readable tone the site's form labels use on ivory (pale --gold fails
   contrast there). */
.lit-day .co-step > legend,
.lit-day .checkout__sum .house-label,
.lit-day .order-card .house-label,
.lit-day .page-head--center .house-label {
  color: var(--gold-burnished);
}
.co-step > legend {
  /* outranks the field labels below it; !important because the site-wide
     readability rule (responsive.css) pins every .house-label with !important */
  font-size: 1.15rem !important;
  font-weight: 500;
  padding-bottom: 0.7rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--edge);
  width: 100%;
  text-indent: 0;
}

/* ============================================================
   ACCOUNT
   ============================================================ */
.acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.acc-card { display: grid; gap: 0.2rem; }
.acc-card--narrow { max-width: 460px; margin-top: var(--space-md); }
.acc-card__title { margin-bottom: 1rem; text-indent: 0; }
.lit-day .acc-card__title, .lit-day .acc-orders .house-label { color: var(--gold-burnished); }
.acc-card .btn--wide { margin-top: 0.4rem; }
.acc-check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--t-sm); color: var(--fg-soft); margin: 0.2rem 0 1rem; line-height: 1.5; }
.acc-check input { accent-color: var(--gold-burnished); width: 18px; height: 18px; margin-top: 0.15rem; flex: none; }
.acc-forgot { margin-top: 0.8rem; font-size: var(--t-sm); color: var(--fg-soft); }
.acc-forgot summary { cursor: pointer; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: flex; align-items: center; }
.acc-forgot summary::-webkit-details-marker { display: none; }
.acc-email { font-size: var(--t-sm); color: var(--fg-soft); margin-bottom: 0.8rem; }
.note--error { border-left-color: #a8412f; background: rgba(194, 91, 74, 0.09); color: var(--fg); }

.acc-signed { display: grid; gap: var(--space-lg); }
.acc-order-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--edge); }
.acc-order-list a {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; gap: 1rem; align-items: center;
  padding: 1rem 0.2rem; border-bottom: 1px solid var(--edge); font-size: var(--t-sm); color: var(--fg);
  min-height: 56px; transition: background 0.3s var(--ease);
}
.acc-order-list a:hover, .acc-order-list a:focus-visible { background: var(--gold-breath); }
.acc-order-list__no { font-family: var(--font-house); letter-spacing: 0.08em; }
.acc-signout { justify-self: start; }
.co-row--2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 640px) {
  .acc-order-list a { grid-template-columns: 1fr auto; }
  .co-row--2 > .field:first-child { grid-column: auto; }
}

/* ---- Round 2 (2026-10-10) ---- */
/* A fragrance's intended drydown on its card in the Scent Room. */
.scent-card__label { margin-top: 1rem; font-family: var(--font-house); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.scent-card__drydown { margin-top: 0.4rem; line-height: 1.7; color: var(--fg-soft, rgba(246, 241, 232, 0.78)); }
/* The policy links under the buy column on a piece's page. */
.detail__policies { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 0.9rem; font-size: var(--t-sm, 0.9rem); }
.detail__policies a { color: var(--gold-burnished, var(--gold)); text-decoration: underline; text-underline-offset: 3px; }