/* ==========================================================================
   LIVSDO — Shared styles for the secondary pages
   Cart, checkout, account, auth, search, wishlist, editorial and legal.
   One file rather than a dozen, because these pages share most of their
   furniture and only differ in their main content block.
   ========================================================================== */

/* ==========================================================================
   Page header — used by every page that is not the home/PDP/collection
   ========================================================================== */

.page-head { padding-block: var(--s-6) var(--s-7); max-width: 62ch; }
.page-head .t-eyebrow { margin-bottom: var(--s-3); }
.page-head__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}
.page-head__lead {
  margin-top: var(--s-4);
  font-size: var(--fs-lg);
  color: var(--c-muted);
  line-height: 1.6;
}
.page-head--center { margin-inline: auto; text-align: center; }

/* .state__icon and .state__action moved to components.css — the drawers render
   an empty state on pages that do not load this file. */

/* A banner for content that has not been approved for publication. */
.draft-banner {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  background: var(--c-tint);
  border-left: 3px solid var(--c-blue);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: var(--s-6);
}
.draft-banner strong { color: var(--c-ink); font-weight: 600; }

/* ==========================================================================
   Two-column shell: content + sticky summary (cart, checkout)
   ========================================================================== */

.shop-layout { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 992px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-8); }
}
@media (min-width: 1200px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr) 420px; }
}
/* An empty bag hides the summary aside ([hidden] from cart.js), but the grid
   would still reserve its 380/420px track and strand the empty state in the
   left column. Collapse to one column whenever a direct child is hidden, so the
   content spans the shell. Higher specificity than the rules above, so it wins
   at every breakpoint regardless of source order. */
.shop-layout:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }

.summary-panel {
  border: var(--border);
  padding: var(--s-5);
  background: var(--c-white);
}
@media (min-width: 992px) {
  .summary-panel { position: sticky; top: 104px; }
}
.summary-panel__title {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.summary__rows { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; }
.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-sm);
}
.summary__row dt { color: var(--c-muted); font-weight: 400; margin: 0; }
.summary__row dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.summary__row--credit dd { color: var(--c-success); }
.summary__muted { color: var(--c-muted); font-weight: 400; font-size: var(--fs-xs); }

.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--border);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.summary__total-value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.summary-panel .btn-ls { margin-top: var(--s-5); }
.summary__note { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--c-muted); }

/* Promo code */
.promo { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--border); }
.promo__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-tint);
  font-size: var(--fs-xs);
}
.promo__applied strong { font-weight: 600; letter-spacing: 0.06em; }
.promo__remove {
  background: none; border: 0; padding: 0;
  font-size: var(--fs-xs); color: var(--c-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.promo__remove:hover { color: var(--c-danger); }
.promo__hint { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--c-muted); }
.promo__hint code {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--c-ink);
  background: var(--c-tint);
  padding: 1px 5px;
}

/* ==========================================================================
   Cart page
   ========================================================================== */

.cart-table { border-top: var(--border); }
.cart-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-bottom: var(--border);
}
@media (min-width: 768px) {
  .cart-row { grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--s-5); align-items: start; }
}
.cart-row__media { background: var(--c-tint); }
.cart-row__name { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; }
.cart-row__variant { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--s-2); }
.cart-row__unit { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--s-2); font-variant-numeric: tabular-nums; }
.cart-row__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.cart-row__link {
  background: none; border: 0; padding: 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-row__link:hover { color: var(--c-blue); }
.cart-row__link--danger:hover { color: var(--c-danger); }
.cart-row__total {
  font-size: var(--fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-top: var(--s-3);
}
@media (min-width: 768px) {
  .cart-row__total { margin-top: 0; text-align: right; }
}
.cart-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

/* ==========================================================================
   Checkout
   ========================================================================== */

.checkout-step { margin-bottom: var(--s-7); }
.checkout-step__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: var(--border);
}
.checkout-step__num {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--c-blue);
  font-variant-numeric: tabular-nums;
}
.checkout-step__title {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.form-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 576px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-grid .field--full { grid-column: 1 / -1; }

/* Radio cards (delivery method, payment method) */
.option-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: var(--border);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.option-card + .option-card { margin-top: var(--s-3); }
.option-card:hover { border-color: var(--c-muted-soft); }
.option-card:has(input:checked) { border-color: var(--c-navy); background: var(--c-tint); }
.option-card:has(input:focus-visible) { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.option-card input { margin-top: 4px; accent-color: var(--c-blue); width: 16px; height: 16px; flex: none; }
.option-card__body { flex: 1; min-width: 0; }
.option-card__title { font-size: var(--fs-sm); font-weight: 600; }
.option-card__meta { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 3px; }
.option-card__price { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }

/* Mini line items inside the checkout summary */
.mini-line {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding-block: var(--s-3);
  border-bottom: var(--border);
}
.mini-line:last-of-type { border-bottom: 0; }
.mini-line__media { position: relative; background: var(--c-tint); }
.mini-line__qty {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  border-radius: var(--radius-pill);
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mini-line__name { font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; }
.mini-line__variant { font-size: var(--fs-2xs); color: var(--c-muted); margin-top: 2px; }
.mini-line__price { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }

/* A standing, unmissable notice that no payment is taken. */
.demo-notice {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-blue);
  background: var(--c-tint);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  margin-bottom: var(--s-6);
}
.demo-notice strong { font-weight: 600; }
.demo-notice p { color: var(--c-muted); margin-top: var(--s-1); font-size: var(--fs-xs); }

/* Button loading state */
.btn-ls[data-loading='true'] { pointer-events: none; opacity: 0.75; }
.btn-ls__spinner {
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-ls__spinner { animation-duration: 2s; } }

/* ==========================================================================
   Order confirmation
   ========================================================================== */

.confirm-hero { text-align: center; padding-block: var(--s-8) var(--s-7); }
.confirm-hero__mark {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto var(--s-5);
  border-radius: 50%;
  background: var(--c-lime);
  color: var(--c-navy);
}
.confirm-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}
.confirm-hero__lead { margin-top: var(--s-4); font-size: var(--fs-base); color: var(--c-muted); max-width: 52ch; margin-inline: auto; }
.confirm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }

.detail-grid { display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .detail-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.detail-card { border: var(--border); padding: var(--s-5); }
.detail-card__label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--s-3);
}
.detail-card__body { font-size: var(--fs-sm); line-height: 1.6; }
.detail-card__body strong { font-weight: 600; }

/* ==========================================================================
   Auth pages
   ========================================================================== */

.auth { display: grid; gap: 0; min-height: 60vh; }
@media (min-width: 992px) { .auth { grid-template-columns: 1fr 1fr; } }
.auth__media { background: var(--c-tint); overflow: hidden; }
.auth__media img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
@media (max-width: 991.98px) { .auth__media { display: none; } }
.auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-y) var(--gutter);
}
.auth__inner { width: 100%; max-width: 26rem; }
.auth__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}
.auth__lead { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--c-muted); }
.auth__form { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.auth__alt { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--c-muted); text-align: center; }
.auth__alt a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }

.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  cursor: pointer;
}
.checkbox input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--c-blue); flex: none; }

/* ==========================================================================
   Account
   ========================================================================== */

.account-layout { display: grid; gap: var(--s-6); align-items: start; }
/* A grid item's automatic minimum size is its content, so the edge-to-edge
   account-nav scroller (which uses negative margins) pushes the whole grid
   wider than the viewport. min-width:0 lets the track shrink and keeps the
   overflow inside the scroller where it belongs. */
.account-layout > * { min-width: 0; }
@media (min-width: 992px) { .account-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-8); } }

.account-nav { display: flex; flex-direction: column; gap: var(--s-1); }
@media (max-width: 991.98px) {
  .account-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--s-2);
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--s-2);
  }
  .account-nav::-webkit-scrollbar { display: none; }
  .account-nav a { white-space: nowrap; border-left: 0 !important; border-bottom: 2px solid transparent; }
  .account-nav a[aria-current='page'] { border-bottom-color: var(--c-navy); }
}
.account-nav a {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-muted);
  border-left: 2px solid transparent;
}
.account-nav a:hover { color: var(--c-ink); background: var(--c-tint); }
.account-nav a[aria-current='page'] { color: var(--c-ink); border-left-color: var(--c-navy); font-weight: 600; }

.order-card {
  border: var(--border);
  padding: var(--s-5);
}
.order-card + .order-card { margin-top: var(--s-4); }
.order-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: var(--border);
}
.order-card__id { font-size: var(--fs-sm); font-weight: 600; }
.order-card__meta { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px; }
.order-card__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-4); }
.order-card__thumbs { display: flex; gap: var(--s-2); }
.order-card__thumbs img { width: 52px; height: 52px; object-fit: cover; background: var(--c-tint); }
.order-card__total { font-size: var(--fs-base); font-weight: 600; font-variant-numeric: tabular-nums; }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--progress { color: var(--c-blue); }
.status--done { color: var(--c-success); }

/* ==========================================================================
   Search page
   ========================================================================== */

.search-hero { padding-block: var(--s-7) var(--s-6); }
.search-hero__form { display: flex; gap: var(--s-3); max-width: 40rem; margin-top: var(--s-5); }
.search-hero__form .field__input { font-size: var(--fs-base); height: 54px; }
.search-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: var(--border);
  border-bottom: var(--border);
  margin-bottom: var(--s-6);
}
.search-meta__count {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ==========================================================================
   Editorial (about) + legal pages
   ========================================================================== */

.editorial-hero { position: relative; background: var(--c-navy); overflow: hidden; }
.editorial-hero img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0.45; }
.editorial-hero__inner { position: relative; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem); }
.editorial-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--c-white);
  max-width: 18ch;
}
.editorial-hero__lead { margin-top: var(--s-5); font-size: var(--fs-lg); color: var(--c-on-dark); max-width: 46ch; }

.legal { max-width: 70ch; }
.legal h2 {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: var(--fs-base); color: var(--c-muted); line-height: var(--lh-body); }
.legal p + p { margin-top: var(--s-3); }
.legal__updated {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  padding-bottom: var(--s-5);
  border-bottom: var(--border);
  margin-bottom: var(--s-6);
}

/* Contact */
.contact-layout { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 992px) { .contact-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); } }
.contact-details { display: flex; flex-direction: column; gap: var(--s-5); }
.contact-details__item dt {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--s-2);
}
.contact-details__item dd { margin: 0; font-size: var(--fs-sm); }
.contact-details__item a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }

/* FAQ page */
.faq-layout-page { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 992px) { .faq-layout-page { grid-template-columns: 230px minmax(0, 1fr); gap: var(--s-8); } }
.faq-nav { display: flex; flex-direction: column; gap: var(--s-1); }
@media (min-width: 992px) { .faq-nav { position: sticky; top: 104px; } }
@media (max-width: 991.98px) {
  .faq-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--s-2);
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .faq-nav::-webkit-scrollbar { display: none; }
  .faq-nav .chip { flex: none; }
}
.faq-group + .faq-group { margin-top: var(--s-7); }
.faq-group__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: var(--s-4);
}

/* 404 */
.notfound { text-align: center; padding-block: var(--s-9); }
.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  line-height: 0.9;
  color: var(--c-tint-deep);
  letter-spacing: -0.02em;
}
.notfound__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  margin-top: var(--s-4);
  letter-spacing: var(--ls-display);
}
.notfound__text { margin-top: var(--s-4); color: var(--c-muted); max-width: 44ch; margin-inline: auto; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }