/*
 * store.css — shared chrome (header/footer), catalog grid, and cart view for
 * the gated River & Oak storefront (/shop, /product, /cart). Pairs with
 * catalog-detail.css (the product detail block). Vahndre design standard:
 * sharp corners, hairline borders, eyebrow labels, accent for emphasis only,
 * no left-accent cards.
 */

:root {
  --ro-ink: #141414;
  --ro-paper: #ffffff;
  --ro-inset: #f6f4f0;
  --ro-line: #e0ddd7;
  --ro-line-strong: #c9c5bd;
  --ro-mut: #5d5d5d;
  --ro-faint: #8a8a8a;
  --ro-accent: #f0523d;
  --ro-ok: #2e7d32;
  --ro-radius: 3px;
}

body.ro-store {
  margin: 0;
  background: var(--ro-paper);
  color: var(--ro-ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.ro-store * { box-sizing: border-box; }

/* ---- shared header (mountChrome) ---- */
.ro-bar {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--ro-line);
  position: sticky; top: 0; background: var(--ro-paper); z-index: 10;
}
.ro-brand { font-weight: 700; letter-spacing: .01em; color: var(--ro-ink); text-decoration: none; font-size: 1.05rem; white-space: nowrap; }
.ro-nav { display: flex; gap: 1rem; }
.ro-nav-link { font-size: .85rem; color: var(--ro-mut); text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
.ro-nav-link:hover { color: var(--ro-ink); }
.ro-nav-link.is-active { color: var(--ro-ink); border-bottom-color: var(--ro-accent); font-weight: 600; }
.ro-spacer { flex: 1; }
.ro-cart {
  position: relative; font-size: .85rem; font-weight: 600; color: var(--ro-ink); text-decoration: none;
  border: 1px solid var(--ro-line-strong); border-radius: var(--ro-radius); padding: .4rem .85rem;
}
.ro-cart:hover { border-color: var(--ro-ink); }
.ro-cart-badge {
  display: inline-block; margin-left: .4rem; min-width: 1.3rem; text-align: center;
  background: var(--ro-accent); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: .05rem .35rem;
}
.ro-logout { font-size: .82rem; color: var(--ro-mut); background: none; border: 0; cursor: pointer; text-decoration: underline; white-space: nowrap; }
.ro-logout:hover { color: var(--ro-ink); }

@media (max-width: 560px) {
  .ro-bar { gap: .75rem; flex-wrap: wrap; }
  .ro-nav { order: 3; width: 100%; }
}

/* ---- page scaffold ---- */
.ro-main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.ro-main--narrow { max-width: 1040px; }

.ro-head { margin: 0 0 1.75rem; }
.ro-head .eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--ro-accent); margin: 0 0 .4rem; }
.ro-head h1 { font-size: 1.8rem; letter-spacing: -.015em; margin: 0 0 .4rem; }
.ro-head p { color: var(--ro-mut); margin: 0; max-width: 60ch; font-size: .95rem; }

/* breadcrumb (fluid movement back to catalog) */
.ro-crumb { font-size: .82rem; color: var(--ro-faint); margin: 0 0 1.25rem; }
.ro-crumb a { color: var(--ro-mut); text-decoration: none; }
.ro-crumb a:hover { color: var(--ro-ink); text-decoration: underline; }
.ro-crumb span { color: var(--ro-faint); }

/* ---- footer FDA disclaimer ---- */
.ro-foot { border-top: 1px solid var(--ro-line); margin: 3rem auto 0; padding: 1.75rem 1.5rem; max-width: 1100px; }
.ro-foot .eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--ro-mut); margin: 0 0 .5rem; }
.ro-foot p { font-size: .78rem; color: var(--ro-mut); margin: 0; max-width: 70ch; }

/* ---- catalog grid (shared .ro-cat-* hooks) ---- */
.ro-cat-status { color: var(--ro-faint); padding: 2.5rem 0; text-align: center; }
.ro-cat-status--error { color: var(--ro-accent); }
.ro-cat-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ro-cat-card {
  background: #fff; border: 1px solid var(--ro-line); border-radius: var(--ro-radius);
  overflow: hidden; display: flex; flex-direction: column; transition: border-color .12s ease;
}
.ro-cat-card:hover { border-color: var(--ro-ink); }
.ro-cat-thumb { aspect-ratio: 4 / 3; background: var(--ro-inset); display: block; padding: 6%; }
.ro-cat-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ro-cat-thumb--empty { background: repeating-linear-gradient(45deg, #f3f1ec, #f3f1ec 12px, #efece6 12px, #efece6 24px); }
.ro-cat-body { padding: .95rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.ro-cat-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ro-accent); font-weight: 700; }
.ro-cat-name { font-size: 1.05rem; margin: 0; letter-spacing: -.01em; }
.ro-cat-name a { color: inherit; text-decoration: none; }
.ro-cat-name a:hover { color: var(--ro-accent); }
.ro-cat-desc { font-size: .86rem; color: var(--ro-mut); margin: 0; }
.ro-cat-meta { font-size: .78rem; color: var(--ro-faint); margin: 0; }
.ro-cat-foot { margin-top: auto; padding-top: .65rem; display: flex; align-items: center; justify-content: space-between; }
.ro-cat-price { font-weight: 700; }
.ro-cat-price small { color: var(--ro-faint); font-weight: 400; }
.ro-cat-sizes { display: block; font-size: .72rem; font-weight: 400; color: var(--ro-faint); margin-top: .15rem; }
.ro-cat-link {
  font-size: .82rem; font-weight: 600; text-decoration: none; color: #fff; background: var(--ro-ink);
  padding: .4rem .85rem; border-radius: var(--ro-radius);
}
.ro-cat-link:hover { background: var(--ro-accent); }

/* ---- cart view (renderCartView) ---- */
.roc { border-top: 1px solid var(--ro-line); }
.roc-row {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--ro-line);
}
.roc-row.is-oos { opacity: .65; }
.roc-row-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.roc-row-name { font-weight: 600; color: var(--ro-ink); text-decoration: none; }
.roc-row-name:hover { color: var(--ro-accent); text-decoration: underline; }
.roc-row-sub { font-size: .82rem; color: var(--ro-faint); }
.roc-oos { color: var(--ro-accent); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.roc-qty { display: inline-flex; border: 1px solid var(--ro-line-strong); border-radius: var(--ro-radius); overflow: hidden; }
.roc-qty button { width: 2.1rem; border: 0; background: var(--ro-paper); font-size: 1.05rem; cursor: pointer; color: var(--ro-ink); }
.roc-qty button:hover { background: var(--ro-inset); }
.roc-qin { width: 2.6rem; border: 0; border-left: 1px solid var(--ro-line); border-right: 1px solid var(--ro-line); text-align: center; font-weight: 600; -moz-appearance: textfield; }
.roc-qin::-webkit-outer-spin-button, .roc-qin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.roc-line { font-weight: 700; min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.roc-rm { background: none; border: 0; color: var(--ro-faint); cursor: pointer; font-size: 1.25rem; line-height: 1; }
.roc-rm:hover { color: var(--ro-accent); }

.roc-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; flex-wrap: wrap; }
.roc-continue { font-size: .85rem; color: var(--ro-mut); text-decoration: none; }
.roc-continue:hover { color: var(--ro-ink); text-decoration: underline; }
.roc-totals { display: flex; align-items: baseline; gap: .7rem; }
.roc-sub-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ro-faint); font-weight: 700; }
.roc-sub { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }

.roc-actions { display: flex; gap: .6rem; justify-content: flex-end; }
.roc-clear { background: none; border: 1px solid var(--ro-line-strong); border-radius: var(--ro-radius); padding: .65rem 1.1rem; cursor: pointer; font-size: .85rem; color: var(--ro-mut); }
.roc-clear:hover { border-color: var(--ro-ink); color: var(--ro-ink); }
.roc-checkout { background: var(--ro-accent); color: #fff; border: 0; border-radius: var(--ro-radius); padding: .65rem 1.6rem; font-weight: 700; font-size: .9rem; cursor: pointer; }
.roc-checkout:disabled { background: var(--ro-faint); cursor: not-allowed; }

.roc-empty { text-align: center; padding: 3rem 0; color: var(--ro-mut); }
.roc-empty .roc-continue { display: inline-block; margin-top: .75rem; font-weight: 600; color: var(--ro-accent); }

@media (max-width: 560px) {
  .roc-row { grid-template-columns: 1fr auto; grid-template-areas: "main rm" "qty line"; row-gap: .6rem; }
  .roc-row-main { grid-area: main; }
  .roc-rm { grid-area: rm; justify-self: end; }
  .roc-qty { grid-area: qty; }
  .roc-line { grid-area: line; text-align: right; }
}