/* Shop catalogue, product detail and the rental calculator. Primitives: ui.css. */
body.shop-active { background: var(--cg-paper); }
body.shop-active #app-root { max-width: var(--cg-content-width); background: var(--cg-paper); }
body.shop-active .nav-item:focus-visible { outline: 2px solid currentColor !important; outline-offset: 5px; }

#screen-shop {
  color: var(--cg-ink);
  background: var(--cg-paper);
  padding: max(32px, calc(env(safe-area-inset-top) + 24px)) 24px 112px;
}
#screen-shop::before { content: none; }
.shop-masthead { margin-bottom: 28px; border-bottom-color: var(--cg-ink); }
.shop-masthead .cg-wordmark { width: 110px; }
.shop-kicker { margin: 0 0 10px; font: 500 var(--cg-text-micro)/1.5 var(--cg-font-body); letter-spacing: .09em; }
#screen-shop #shop-header-title { margin: 0 0 24px; color: var(--cg-ink); font: 400 clamp(34px,8vw,52px)/.98 var(--cg-font-display); letter-spacing: -.01em; }
#screen-shop .accent-text { color: var(--cg-red); }

/* ── Tabs and filters ────────────────────────────────────────────────── */
#screen-shop .shop-tab-bar { gap: 0; margin: 0 0 20px; padding: 0; border: 1px solid var(--cg-ink); border-radius: var(--cg-radius); background: none; overflow: hidden; }
#screen-shop .shop-tab { min-height: 48px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--cg-ink); font: 600 var(--cg-text-small)/1.4 var(--cg-font-body); letter-spacing: .09em; box-shadow: none; }
#screen-shop .shop-tab.active { background: var(--cg-ink); color: var(--cg-paper); box-shadow: none; }
#screen-shop :is(.bike-filter-chips, .category-chips) { gap: 6px; padding: 0 0 20px; }
#screen-shop :is(.bike-filter-chip, .category-chip) { min-height: 40px; padding: 8px 14px; border: 1px solid var(--cg-line); border-radius: var(--cg-radius); background: none; color: var(--cg-ink); font: 500 var(--cg-text-caption)/1.4 var(--cg-font-body); letter-spacing: .06em; }
#screen-shop :is(.bike-filter-chip, .category-chip).active { border-color: var(--cg-ink); background: var(--cg-ink); color: var(--cg-paper); }

/* ── Catalogue grid ──────────────────────────────────────────────────── */
#screen-shop .shop-grid { gap: 1px; background: var(--cg-line); border: 1px solid var(--cg-line); border-radius: var(--cg-radius-media); overflow: hidden; }
#screen-shop .product-card { border-radius: 0; background: var(--cg-paper); backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; }
#screen-shop .product-img-wrap { background: var(--cg-line-soft); }
#screen-shop .product-stock { top: 0; left: 0; padding: 5px 10px; border-radius: 0; background: var(--cg-ink); color: var(--cg-paper); font: 600 9px/1.4 var(--cg-font-body); letter-spacing: .09em; }
#screen-shop .product-stock.out, #screen-shop .product-stock.oos { background: var(--cg-red); color: var(--cg-paper); }
#screen-shop .product-info { gap: 6px; padding: 14px; }
#screen-shop .product-name { color: var(--cg-ink); font: 600 var(--cg-text-detail)/1.4 var(--cg-font-body); }
#screen-shop .product-price { color: var(--cg-ink); font: 400 22px/1 var(--cg-font-display); letter-spacing: 0; }
#screen-shop .rent-from-price { color: var(--cg-red); }
#screen-shop .rent-per-day { margin-left: 3px; color: var(--cg-ink); font: 400 var(--cg-text-small)/1.4 var(--cg-font-body); }
#screen-shop .rent-save-badge { bottom: 0; left: 0; padding: 5px 10px; border-radius: 0; background: var(--cg-red); color: var(--cg-paper); font: 600 var(--cg-text-micro)/1.4 var(--cg-font-body); letter-spacing: .06em; }
#screen-shop .rent-card-hint { color: var(--cg-ink); font: 400 var(--cg-text-caption)/1.5 var(--cg-font-body); }
#screen-shop .shop-empty { padding: 48px 16px; color: var(--cg-ink); background: var(--cg-paper); font: 400 var(--cg-text-body)/1.6 var(--cg-font-body); text-align: left; }
#screen-shop .rent-my-requests { margin: 0 0 16px; }
#screen-shop :is(.shop-admin-fab, .shop-reorder-btn) { border-radius: var(--cg-radius-button); }

/* ── Product / rent detail ───────────────────────────────────────────── */
#screen-product-detail, #screen-rent-detail { color: var(--cg-ink); background: var(--cg-paper); }
#screen-product-detail::before, #screen-rent-detail::before { content: none; }
:is(#screen-product-detail, #screen-rent-detail) .product-detail-wrap { max-width: var(--cg-content-width); margin: 0 auto; background: var(--cg-paper); }
:is(#screen-product-detail, #screen-rent-detail) .product-detail-hero { background: var(--cg-line-soft); }
:is(#screen-product-detail, #screen-rent-detail) .product-detail-back { width: 44px; height: 44px; border-radius: var(--cg-radius); border: 0; background: var(--cg-paper); color: var(--cg-ink); backdrop-filter: none; -webkit-backdrop-filter: none; font: 400 20px/1 var(--cg-font-body); }
:is(#screen-product-detail, #screen-rent-detail) .product-detail-stock-badge { top: 0; right: 0; padding: 6px 12px; border-radius: 0; background: var(--cg-ink); color: var(--cg-paper); font: 600 var(--cg-text-micro)/1.4 var(--cg-font-body); letter-spacing: .09em; }
:is(#screen-product-detail, #screen-rent-detail) .product-detail-dot { border-radius: 0; width: 16px; height: 2px; background: var(--cg-inverse-line-strong); }
:is(#screen-product-detail, #screen-rent-detail) .product-detail-dot.active { background: var(--cg-red); }
:is(#screen-product-detail, #screen-rent-detail) .product-detail-body { gap: 10px; padding: 28px 24px calc(112px + env(safe-area-inset-bottom)); }
:is(#screen-product-detail, #screen-rent-detail) .product-detail-name { color: var(--cg-ink); font: 400 clamp(28px,7vw,40px)/1.05 var(--cg-font-display); letter-spacing: -.01em; }
:is(#screen-product-detail, #screen-rent-detail) .product-detail-price { color: var(--cg-red); font: 400 30px/1 var(--cg-font-display); letter-spacing: 0; }
:is(#screen-product-detail, #screen-rent-detail) .product-detail-desc { color: var(--cg-ink); font: 400 var(--cg-text-body)/1.7 var(--cg-font-body); }
#screen-product-detail .product-detail-ask { margin-top: 20px; min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 16px 24px; border: 1px solid var(--cg-ink); border-radius: var(--cg-radius-button); background: none; color: var(--cg-ink); font: 600 var(--cg-text-lead)/1.4 var(--cg-font-body); }
#screen-product-detail .product-detail-ask:active { background: var(--cg-line-soft); }
#screen-product-detail .product-detail-prep { gap: 4px; margin-top: 10px; min-height: 56px; padding: 14px 20px; border: 0; border-radius: var(--cg-radius-button); background: var(--cg-red); color: var(--cg-paper); }
#screen-product-detail .product-detail-prep .prep-title { color: var(--cg-paper); font: 600 var(--cg-text-small)/1.4 var(--cg-font-body); letter-spacing: .06em; }
#screen-product-detail .product-detail-prep .prep-sub { color: var(--cg-paper); font: 400 var(--cg-text-small)/1.5 var(--cg-font-body); }
#screen-product-detail .product-detail-prep:active { background: var(--cg-red); }

/* ── Rental calculator ───────────────────────────────────────────────── */
#screen-rent-detail .rent-tier-chips { gap: 6px; }
#screen-rent-detail .rent-tier-chip { min-height: 56px; padding: 10px 4px; border: 1px solid var(--cg-line); border-radius: 0; background: none; color: var(--cg-ink); box-shadow: none; font-family: var(--cg-font-body); }
#screen-rent-detail .rent-tier-chip.active { border-color: var(--cg-red); background: none; color: var(--cg-red); box-shadow: none; }
#screen-rent-detail .rent-tier-days { color: inherit; font: 500 var(--cg-text-micro)/1.4 var(--cg-font-body); letter-spacing: .06em; }
#screen-rent-detail .rent-tier-price { color: inherit; font: 600 var(--cg-text-body)/1.3 var(--cg-font-body); }
#screen-rent-detail .rent-calc { margin-top: 24px; padding: 24px; border: 0; border-radius: 0; background: var(--cg-ink); color: var(--cg-paper); --cg-focus: var(--cg-paper); }
#screen-rent-detail .rent-calc-title { margin-bottom: 16px; color: var(--cg-inverse-label); font: 600 var(--cg-text-micro)/1.5 var(--cg-font-body); letter-spacing: .09em; text-align: left; }
#screen-rent-detail .rent-day-btn { width: 46px; height: 46px; border-radius: 0; border: 1px solid var(--cg-inverse-line-strong); background: none; color: var(--cg-paper); font: 400 20px/1 var(--cg-font-body); }
#screen-rent-detail .rent-day-btn:active { background: var(--cg-inverse-line-soft); }
#screen-rent-detail #rent-days-num { color: var(--cg-paper); font: 400 40px/1 var(--cg-font-display); }
#screen-rent-detail .rent-days-unit { color: var(--cg-inverse-label); font: 600 var(--cg-text-micro)/1.5 var(--cg-font-body); letter-spacing: .12em; }
#screen-rent-detail .rent-progress { height: 3px; margin: 18px 0 12px; border-radius: 0; background: var(--cg-inverse-line-soft); }
#screen-rent-detail .rent-progress-fill { border-radius: 0; background: var(--cg-red); }
#screen-rent-detail .rent-progress-fill.full { background: var(--cg-paper); }
#screen-rent-detail .rent-nudge { min-height: 44px; padding: 11px 14px; border: 1px solid var(--cg-inverse-line); border-radius: 0; background: none; color: var(--cg-inverse-muted); font: 400 var(--cg-text-small)/1.5 var(--cg-font-body); text-align: left; }
#screen-rent-detail .rent-nudge b { color: var(--cg-paper); }
#screen-rent-detail .rent-nudge.hot { border-color: var(--cg-red); background: none; color: var(--cg-paper); }
#screen-rent-detail .rent-nudge:active { background: var(--cg-inverse-line-soft); }
#screen-rent-detail .rent-totals { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cg-inverse-line); }
#screen-rent-detail .rent-total-num { color: var(--cg-paper); font: 400 34px/1 var(--cg-font-display); }
#screen-rent-detail .rent-total-sub { color: var(--cg-inverse-muted); font: 400 var(--cg-text-detail)/1.4 var(--cg-font-body); }
#screen-rent-detail .rent-savings { color: var(--cg-paper); font: 600 var(--cg-text-small)/1.4 var(--cg-font-body); }
#screen-rent-detail .rent-package-line { padding: 10px 12px; border: 1px solid var(--cg-inverse-line-strong); border-radius: 0; background: none; color: var(--cg-paper); font: 400 var(--cg-text-small)/1.5 var(--cg-font-body); }
#screen-rent-detail .rent-date-label { margin-top: 18px; color: var(--cg-inverse-label); font: 600 var(--cg-text-micro)/1.5 var(--cg-font-body); letter-spacing: .09em; }
#screen-rent-detail .rent-date-label input { min-height: 48px; padding: 12px; border: 1px solid var(--cg-inverse-line-strong); border-radius: 0; background: none; color: var(--cg-paper); font: 400 var(--cg-text-body)/1.4 var(--cg-font-body); }
#screen-rent-detail .rent-return-line { margin-top: 8px; color: var(--cg-inverse-muted); font: 400 var(--cg-text-small)/1.5 var(--cg-font-body); text-align: left; }
#screen-rent-detail .rent-request-btn { min-height: 56px; margin-top: 18px; padding: 16px 24px; border: 0; border-radius: 0; background: var(--cg-red); color: var(--cg-paper); font: 600 var(--cg-text-control)/1.4 var(--cg-font-body); letter-spacing: 0; box-shadow: none; }
#screen-rent-detail .rent-request-hint { margin-top: 12px; color: var(--cg-inverse-muted); font: 400 var(--cg-text-caption)/1.6 var(--cg-font-body); text-align: left; }
#screen-rent-detail .rent-deal { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--cg-line); }
#screen-rent-detail .rent-deal-title { margin-bottom: 12px; color: var(--cg-ink); font: 400 27px/1.2 var(--cg-font-display); letter-spacing: 0; }
#screen-rent-detail .rent-deal-list li { padding-left: 22px; color: var(--cg-ink); font: 400 var(--cg-text-body)/1.6 var(--cg-font-body); }
#screen-rent-detail .rent-deal-list li::before { color: var(--cg-red); }

@media (hover:hover) and (pointer:fine) {
  #screen-shop .product-card:hover .product-name { color: var(--cg-red); }
  #screen-shop :is(.shop-tab, .category-chip, .bike-filter-chip):not(.active):hover { border-color: var(--cg-red); color: var(--cg-red); }
  #screen-rent-detail .rent-tier-chip:not(.active):hover { border-color: var(--cg-red); }
}
@media (min-width:800px) {
  #screen-shop { padding: 40px 48px 56px; }
  .shop-masthead { margin-bottom: 44px; }
  #screen-shop .shop-grid { grid-template-columns: repeat(4, 1fr); }
  #screen-shop .shop-tab-bar { max-width: 320px; }
  :is(#screen-product-detail, #screen-rent-detail) .product-detail-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 48px; padding: 40px 48px; }
  :is(#screen-product-detail, #screen-rent-detail) .product-detail-hero { aspect-ratio: 4 / 5; }
  :is(#screen-product-detail, #screen-rent-detail) .product-detail-body { padding: 0 0 48px; }
}
@media (max-width:360px) {
  #screen-shop { padding-left: 16px; padding-right: 16px; }
  :is(#screen-product-detail, #screen-rent-detail) .product-detail-body { padding-left: 16px; padding-right: 16px; }
}