/**
 * Shop listing + cart + quote-request (checkout) styles.
 *
 * Lives in /css/ so shop.unitedmobilerv.com lockdown already allows it.
 * Uses site.css tokens only (--black, --white, --gold, --gray, --rule,
 * --space, --ease). Do not introduce a second gold or a light checkout
 * band -- .band-gray is for marketing sections, not dark shop forms.
 *
 * Root-cause notes (2026-09-17):
 * - site.css sets `input { width: 100% }` for underline marketing forms.
 *   That rule also hits service-tier radios and blows the option cards
 *   to full-row height ("boxes overflowing / layout feels full").
 * - /shop/cart wrapped the quote form in .band-gray (light #F5F5F5) while
 *   inputs/cards stayed dark-theme. White <strong> on light gray + dark
 *   boxes on a pale band = "cards are the wrong color".
 * - Category grids sat in .wrap-narrow (760px) with 220px cards, so three
 *   skinny columns wrapped titles and felt cramped.
 * - Live cart 2026-09-17: radios at width:100% left a huge empty option
 *   card and squeezed the label into a right-hand strip, plus a page-level
 *   horizontal scrollbar. Pin radios and keep every shop container
 *   min-width:0 / max-width:100%.
 */

/* Shop pages only load this sheet -- clip leftover overflow rather than
   let a stretched radio or long title grow a horizontal scrollbar. */
html, body { overflow-x: clip; }

/* Mesh nav (Main…Docs + Cart + Call/Text/Book) is ~1160px of unwrapped
   items. At a 1280 desktop frame it overflows both /shop/ and /shop/cart
   — the shared horizontal scrollbar in the live shots. Tighten only
   here; forum/book keep site.css spacing. */
@media (min-width: 901px) and (max-width: 1300px) {
  .nav-bar { min-width: 0; }
  .nav-links { gap: 14px; min-width: 0; }
  .nav-links a { letter-spacing: normal; }
  .nav-cta { gap: 8px; }
}

/* site.css `input { width: 100% }` hits every radio/checkbox on these
   pages, not only .service-tier. Reset them all so a stray control
   cannot grow a row. */
input[type="radio"],
input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 18px;
  appearance: auto;
  box-sizing: border-box;
}

/* ----- Listing grid ----- */
.shop-filter-band { padding: calc(var(--space) * 3) 0 calc(var(--space) * 2); }
.shop-category-band { padding: calc(var(--space) * 4) 0; }
.shop-category-band:first-of-type { padding-top: var(--space); }
.shop-category-band h2 { margin-bottom: calc(var(--space) * 2); }

.shop-grid {
  display: grid;
  /* 300px min → ~3 comfortable columns in the 1160 wrap, not 4 skinny ones
     that wrap Epoch / Victron titles into a cramped stack. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: calc(var(--space) * 4);
  margin-top: calc(var(--space) * 2);
}

.shop-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  color: inherit;
  transition: border-color .2s var(--ease);
}
.shop-card:hover { border-color: rgba(201, 151, 44, 0.55); }

.shop-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.shop-card-imgwrap {
  aspect-ratio: 1 / 1;
  /* Catalog photos are cut on white. A charcoal well made those
     frames read as "the wrong color" against the dark shop. */
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.shop-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}
.shop-card-imgwrap.is-fallback {
  background: linear-gradient(160deg, rgba(201, 151, 44, 0.14), rgba(255, 255, 255, 0.02));
}
.shop-card-img-fallback { font-size: 2.6rem; opacity: .55; }

.shop-card-body {
  padding: 16px 18px 12px;
  min-width: 0;
}
.shop-card-brand {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--gold);
  margin-bottom: 6px;
}
.shop-card-title {
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 8px;
  /* Wrap whole words (2+ lines is fine); only an unbreakable word may split. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}
.shop-card-price {
  color: var(--gold);
  font-weight: 600;
  font-size: 1.05em;
  margin-bottom: 8px;
}
.shop-card-meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
  line-height: 1.4;
}
.shop-card-desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92em;
  line-height: 1.5;
  margin: 0;
  max-width: none;
}
.shop-card-price-note {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
}

.shop-add-btn {
  margin: auto 16px 16px;
  width: auto;
  align-self: stretch;
}

.shop-square-link {
  margin: 0 16px 16px;
  width: auto;
  align-self: stretch;
  text-align: center;
}
.shop-add-btn + .shop-square-link { margin-top: -4px; }

.shop-service-card { padding-bottom: 16px; }
.shop-service-card .shop-card-body { padding-bottom: 8px; }
.shop-service-card .btn { margin: 12px 16px 0; align-self: flex-start; }

/* Quiet single "Guide" text under a service card -- not a button, not nav. */
.shop-related-guides {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  max-width: none;
}
.shop-related-guides a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----- Filters / tabs ----- */
.shop-chip-row,
.shop-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.shop-tab-row { margin-top: 18px; }

.shop-chip,
.shop-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 151, 44, 0.3);
  color: var(--gold);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: normal;
}
.shop-tab { color: rgba(255, 255, 255, 0.72); font-weight: 600; padding: 10px 22px; }
.shop-chip:hover,
.shop-tab:hover {
  background: rgba(201, 151, 44, 0.16);
  border-color: rgba(201, 151, 44, 0.55);
  color: var(--white);
}
.shop-chip.is-active,
.shop-tab.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

/* ----- Availability chips ----- */
.shop-stock-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  padding: 4px 12px;
  border-radius: 999px;
}
.shop-stock-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.shop-stock-chip.is-ok { color: #4ea36b; background: rgba(78, 163, 107, 0.14); }
.shop-stock-chip.is-warn { color: var(--gold); background: rgba(201, 151, 44, 0.14); }
.shop-stock-chip.is-muted { color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); }
.shop-stock-chip.is-active,
.shop-stock-chip.is-quote {
  gap: 6px;
  padding: 2px 0;
  background: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
.shop-stock-chip.is-active { color: #f5f5f5; }
.shop-stock-chip.is-active::before { width: 8px; height: 8px; background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); }
.shop-stock-chip.is-quote { color: rgba(255, 255, 255, 0.7); }
.shop-stock-chip.is-quote::before { width: 8px; height: 8px; background: #9ca3af; }
.shop-stock-chip.is-off { color: #d9776f; background: rgba(217, 119, 111, 0.14); }

.cart-badge-count {
  display: inline-block;
  background: var(--gold);
  color: var(--black);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  padding: 0 8px;
  margin-left: 6px;
}

/* ----- Product hero ----- */
.price-tag {
  font-size: 1.8em;
  font-weight: 600;
  color: var(--gold);
  margin: 10px 0;
}
.price-note {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: -6px;
  margin-bottom: 12px;
}
.add-cart-btn { margin: 10px 0 4px; }

.product-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.product-hero-img {
  aspect-ratio: 1 / 1;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-hero-img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 18px;
}
.product-hero-img.is-fallback {
  background: linear-gradient(160deg, rgba(201, 151, 44, 0.14), rgba(255, 255, 255, 0.02));
  font-size: 4rem;
  opacity: .55;
}
@media (max-width: 640px) {
  .product-hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .product-hero-img { max-width: 220px; margin: 0 auto; }
  /* The shared page hero pads 96px above the back link. On a phone that
     reads as empty space over "← Back to shop". */
  .page-hero:has(.product-hero-grid) { padding-top: 8px; }
  .page-hero:has(.product-hero-grid) a.text-link { margin-top: 0; }
}

/* ----- Cart lines ----- */
.cart-line {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  min-width: 0;
}
.cart-line-thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cart-line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.cart-line-thumb.is-fallback {
  background: linear-gradient(160deg, rgba(201, 151, 44, 0.14), rgba(255, 255, 255, 0.02));
  font-size: 1.3rem;
  opacity: .55;
}
.cart-line-title { min-width: 0; overflow-wrap: anywhere; }
.cart-line-title a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  color: inherit;
  text-decoration: none;
}
.cart-line-title a:hover { color: var(--gold); }
.cart-line-price {
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

/* Override site.css `input { width: 100%; border: 0; ... }` on qty. */
.cart-line-qty {
  width: 64px;
  max-width: 64px;
  min-height: 44px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  text-align: center;
}
.cart-line-remove {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 1.2em;
  padding: 4px 8px;
  min-height: 44px;
  min-width: 44px;
}
.cart-line-remove:hover { color: #ff6b6b; }
.cart-empty { color: rgba(255, 255, 255, 0.55); padding: 24px 0; }
.cart-total {
  font-size: 1.25em;
  font-weight: 600;
  color: var(--gold);
  margin: 16px 0;
}

@media (max-width: 640px) {
  .cart-line {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb title remove"
      "thumb qty   price";
  }
  .cart-line-thumb { grid-area: thumb; }
  .cart-line-title { grid-area: title; }
  .cart-line-qty { grid-area: qty; }
  .cart-line-price { grid-area: price; }
  .cart-line-remove { grid-area: remove; justify-self: end; }
}

/* ----- Quote / checkout panel (stay on the dark theme) ----- */
.shop-cart-band { padding: calc(var(--space) * 3) 0; }
.shop-checkout-band { padding: calc(var(--space) * 3) 0 calc(var(--space) * 8); }
.shop-checkout-panel {
  background: #141414;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 28px 24px;
  color: var(--white);
}
.shop-checkout-panel h2 { color: var(--white); }
.shop-checkout-panel .muted { color: rgba(255, 255, 255, 0.82); }
.shop-checkout-panel label { color: rgba(255, 255, 255, 0.82); }

.service-tier {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0c0c0c;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 0.95em;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.88);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.service-tier:hover { border-color: rgba(201, 151, 44, 0.5); }
.service-tier strong { color: var(--white); font-size: 1.02em; font-weight: 500; }
.service-tier-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.service-tier small {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88em;
  line-height: 1.45;
}
.service-tier:has(input:checked) {
  border-color: var(--gold);
  background: rgba(201, 151, 44, 0.18);
  box-shadow: inset 4px 0 0 var(--gold);
}
.service-tier:has(input:checked) strong { color: var(--gold); }

/* Kill the sitewide full-width underline input look on radios.
   Live cart: width:100% radios ate the row and parked the copy
   in a clipped right-hand strip. flex-basis 18px + max-width
   keeps the control from ever claiming the row. */
label.service-tier input,
label.service-tier input[type="radio"] {
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  margin: 3px 0 0;
  padding: 0;
  flex: 0 0 18px;
  appearance: auto;
  accent-color: var(--gold);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.shop-checkout-panel textarea.forum-input,
.shop-checkout-panel input.forum-input,
textarea.forum-input,
input.forum-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #0c0c0c;
  color: var(--white);
  font-family: inherit;
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 10px;
  transition: border-color .15s var(--ease);
}
input.forum-input:focus,
textarea.forum-input:focus {
  outline: none;
  border-color: var(--gold);
}

.qf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.qf-field { margin-bottom: 14px; min-width: 0; }
.qf-field .forum-input { margin-bottom: 0; }
.qf-label {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 8px;
}
@media (max-width: 640px) {
  .qf-grid { grid-template-columns: 1fr; }
  .shop-checkout-panel { padding: 22px 16px; }
}

.held-note { color: var(--gold); font-size: 14px; }

#card-container { min-height: 88px; margin: 8px 0 16px; }
.pay-wallet { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.pay-wallet .btn[hidden] { display: none; }
.checkout-totals { margin: 8px 0 16px; color: var(--white); }
/* Checkout: the card form stays hidden until the cart is payable by card;
   a quote-only or mixed cart gets this notice instead. */
#pay-ui[hidden], .checkout-notice[hidden] { display: none; }
.checkout-notice {
  margin: 8px 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(201, 151, 44, 0.55);
  border-radius: 10px;
  background: rgba(201, 151, 44, 0.10);
  color: var(--white);
}
.checkout-notice h3 { margin: 0 0 6px; font-size: 1.05em; color: var(--white); }
.checkout-notice p { margin: 0 0 8px; }
.checkout-notice ul { margin: 0 0 10px 18px; padding: 0; }
.checkout-notice .btn-row { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.policy-draft {
  display: inline-block;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
}
.policy-copy { color: var(--white); }
.policy-copy li { margin: 0 0 10px; }
.policy-links { margin-top: 12px; }
.checkout-totals p { margin: 0 0 6px; }

.shop-tools-link { margin-top: 14px; }
.shop-tools-link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
}
.tool-note,
.tool-price-note,
.tool-section-intro {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
}
.tool-creds {
  color: var(--gold);
  font-size: 14px;
}
.affiliate-disclosure {
  color: #A8A8A8;
  font-size: 14px;
  border-top: 1px solid var(--rule);
  margin-top: 16px;
  padding-top: 12px;
}
.amazon-fallback { margin-top: 14px; }
.tool-card .btn { margin-top: 12px; align-self: flex-start; }

/* CLS fix (2026-10-09): the photo box was sized by its image, so it sat
   at 38px until the photo arrived, then jumped to full size and pushed the
   title, price and buy button down (CLS 0.138 on phones). Give the box
   its width up front; max-width rules above still cap it. */
.product-hero-img { width: 100%; }