/* Generated from torabi-sketch — do not edit by hand. Source: cars.html #cars-css */

/* cars section background (matches the shared avail-section) */
.cars-section{ background:#fff; }

.cars-sr-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- per-card additions inside avail-card-body ---- */
.cars-card .avail-card-body { gap: 18px; }

/* opportunity bars on the card */
.cars-oppbars { display:flex; flex-direction:column; gap:12px; }
.cars-opp-top { display:flex; align-items:baseline; justify-content:space-between; }
.cars-opp-lbl { font-family:var(--font-fa); font-size:12px; color:var(--inkSoft,#3A312D); }
.cars-opp-num { font-family:var(--font-fa); font-size:12.5px; font-weight:700; color:var(--wine); }
.cars-opp-track { height:6px; border-radius:999px; background:rgba(107,31,53,.10); margin-top:6px; overflow:hidden; }
.cars-opp-fill { height:6px; border-radius:999px; background:var(--wine); width:0;
  transition:width .8s cubic-bezier(.2,.7,.2,1); }
.cars-opp-fill.is-invest { background:var(--gold,#C5A35B); }

.cars-card-foot { width:100%; display:flex; flex-direction:column; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.cars-card-actions { width:100%; display:flex; gap:10px; align-items:stretch; }

/* External / view CTA */
.cars-cta {
  flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 12px; border-radius:var(--radius);
  background:var(--wine); color:var(--cream);
  font-family:var(--font-fa); font-weight:600; font-size:12px;
  text-decoration:none; cursor:pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cars-cta:hover { background:var(--wine-dk); transform:translateY(-1px);
  box-shadow:0 10px 22px -14px rgba(69,16,33,.7); }
.cars-cta svg { transition: transform .25s ease; }
.cars-cta:hover svg { transform: translateX(-3px); }

/* Compare toggle (checkbox-style) */
.cars-compare-toggle {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:var(--radius);
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-family:var(--font-fa); font-weight:600; font-size:12px; cursor:pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
  white-space:nowrap;
}
.cars-compare-toggle .box {
  width:16px; height:16px; flex:0 0 auto; border-radius:5px;
  border:1.5px solid #c9b285; display:grid; place-items:center;
  background:#fff; transition: background .2s ease, border-color .2s ease;
}
.cars-compare-toggle .box svg { width:12px; height:12px; opacity:0; transform:scale(.6);
  transition: opacity .2s ease, transform .2s ease; color:var(--wine); }
.cars-compare-toggle:hover { border-color:var(--gold); color:var(--wine); }
.cars-compare-toggle[aria-pressed="true"] {
  border-color:var(--wine); background:rgba(107,31,53,.10); color:var(--wine);
}
.cars-compare-toggle[aria-pressed="true"] .box { background:var(--wine); border-color:var(--wine); }
.cars-compare-toggle[aria-pressed="true"] .box svg { opacity:1; transform:scale(1); color:#fff; }
.cars-compare-toggle.is-disabled { opacity:.45; cursor:not-allowed; }
.cars-card.is-selected { box-shadow:0 0 0 2px var(--wine), 0 28px 60px -28px rgba(23,19,17,.28); }

/* numbered pager additions (reusing .avail-pager / .avail-pager-btn) */
.cars-pager { align-items:center; }
.cars-pager-num {
  min-width:44px; height:44px; padding:0 12px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  font-family:var(--font-fa); font-size:14px; cursor:pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.cars-pager-num:hover { border-color:var(--wine); color:var(--wine); background:rgba(107,31,53,.04); }
.cars-pager-num.is-active { background:var(--wine); color:var(--cream); border-color:var(--wine); font-weight:600; }

.cars-empty { text-align:center; font-family:var(--font-fa); color:#727272; padding:60px 0; font-size:16px; }

/* ---- search (identical to the blog search) ---- */
.cars-search { display:flex; align-items:center; gap:8px; margin-top:24px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:7px 8px 7px 14px;
  box-shadow:var(--shadow-soft,0 10px 30px -16px rgba(23,19,17,.18)); }
.cars-search > svg { color:#9A8F84; flex:0 0 auto; }
.cars-search input { flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:var(--font-fa); font-size:15px; color:var(--ink); padding:9px 4px; }
.cars-search input::placeholder { color:#A89F95; }

/* ============================================================
   STICKY COMPARE TRAY
   ============================================================ */
.cars-tray {
  position:fixed; inset-inline:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 40px -24px rgba(23,19,17,.5);
  transform:translateY(110%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
  padding:env(safe-area-inset-bottom,0) 0 0;
}
.cars-tray.is-open { transform:translateY(0); }
.cars-tray-inner { display:flex; align-items:center; gap:18px; padding:12px 16px; flex-wrap:wrap; }
.cars-tray-label { display:inline-flex; align-items:center; gap:8px; color:var(--wine);
  font-family:var(--font-fa); font-weight:700; font-size:15px; flex:0 0 auto; }
.cars-tray-hint { font-weight:500; font-size:11.5px; color:#9a8c6b;
  background:rgba(197,163,91,.14); padding:2px 8px; border-radius:999px; }
.cars-tray-list { list-style:none; margin:0; padding:0; display:flex; gap:10px;
  flex:1 1 auto; min-width:0; overflow-x:auto; }
.cars-tray-chip { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 6px 5px 12px; }
.cars-tray-chip img { width:34px; height:26px; object-fit:cover; border-radius:5px; flex:0 0 auto; }
.cars-tray-chip .nm { font-family:var(--font-fa); font-size:13px; font-weight:600; color:var(--ink);
  white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.cars-tray-chip-x { width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center;
  border:none; background:rgba(107,31,53,.08); color:var(--wine); border-radius:999px; cursor:pointer;
  transition:background .2s ease; }
.cars-tray-chip-x:hover { background:rgba(107,31,53,.18); }
.cars-tray-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.cars-tray-clear { border:none; background:transparent; color:#727272; cursor:pointer;
  font-family:var(--font-fa); font-size:13px; font-weight:600; padding:8px 6px;
  text-decoration:underline; text-underline-offset:3px; }
.cars-tray-clear:hover { color:var(--wine); }
.cars-tray-cta { display:inline-flex; align-items:center; gap:6px;
  background:var(--wine); color:var(--cream); border:none; cursor:pointer;
  font-family:var(--font-fa); font-weight:700; font-size:14px;
  padding:11px 20px; border-radius:var(--radius);
  box-shadow:0 8px 20px -10px rgba(107,31,53,.6);
  transition: background .25s ease, transform .25s ease; }
.cars-tray-cta:hover { background:var(--wine-dk); transform:translateY(-1px); }
.cars-tray-cta:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ============================================================
   COMPARE MODAL — wine band look
   ============================================================ */
.cars-modal { position:fixed; inset:0; z-index:90; display:none; }
.cars-modal.is-open { display:block; }
.cars-modal-backdrop { position:absolute; inset:0; background:rgba(23,19,17,.62);
  backdrop-filter:blur(4px); opacity:0; transition:opacity .3s ease; }
.cars-modal.is-open .cars-modal-backdrop { opacity:1; }
.cars-modal-panel {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-46%);
  width:min(960px, calc(100vw - 32px)); max-height:calc(100vh - 48px);
  margin:0; border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.7);
  opacity:0; transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.cars-modal.is-open .cars-modal-panel { opacity:1; transform:translate(-50%,-50%); }
.cars-modal-grain { position:absolute; inset:0; opacity:.3; pointer-events:none;
  background-image:radial-gradient(rgba(197,163,91,.22) 1px, transparent 1px);
  background-size:18px 18px; }
.cars-modal-head { position:relative; z-index:1; padding:26px 28px 18px;
  display:grid; grid-template-columns:1fr auto; align-items:start; gap:8px; }
.cars-eyebrow { grid-column:1; display:inline-flex; align-items:center; gap:12px; color:var(--gold); }
.cars-eyebrow-rule { height:1px; width:32px; background:rgba(197,163,91,.6); display:inline-block; }
.cars-eyebrow .serif-en { font-size:14px; letter-spacing:.28em; text-transform:uppercase; }
.cars-modal-title { grid-column:1; margin-top:8px; font-size:clamp(26px,3.4vw,40px); line-height:1.1; }
.cars-modal-close { grid-column:2; grid-row:1 / span 2; align-self:start;
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(197,163,91,.3); border-radius:999px;
  background:rgba(69,16,33,.5); color:var(--cream);
  transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.cars-modal-close:hover { background:rgba(69,16,33,.85); border-color:var(--gold); transform:rotate(90deg); }

.cars-compare-scroll { position:relative; z-index:1; flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 28px 28px; }
.cars-compare { display:grid; gap:14px; grid-template-columns:repeat(var(--cars-cols,2), minmax(0,1fr)); }

.cars-col { background:rgba(69,16,33,.6); border:1px solid rgba(197,163,91,.2);
  border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:0; }
.cars-col-head { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.cars-col-img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:6px;
  border:1px solid rgba(197,163,91,.2); background:#3a0d1c; }
.cars-col-name { font-family:var(--font-fa); font-weight:700; font-size:18px; color:var(--cream); }
.cars-col-eyebrow { font-size:11px; color:var(--gold); letter-spacing:.04em; }

.cars-row { padding:9px 0; border-top:1px solid rgba(197,163,91,.16);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cars-row:first-of-type { border-top:none; }
.cars-row-label { font-size:11.5px; color:var(--gold); font-family:var(--font-fa); flex:0 0 auto; }
.cars-row-val { font-size:13.5px; color:var(--cream); font-family:var(--font-fa); text-align:left; }
.cars-row-val.mono { font-family:'Poppins'; }
.cars-row-val.is-best { color:var(--gold-soft); font-weight:700; }
.cars-row-val .best-tag { font-family:var(--font-fa); font-size:10px; color:var(--wine);
  background:var(--gold-soft); border-radius:999px; padding:1px 7px; margin-inline-start:6px; }

/* opportunity bars inside a compare column */
.cars-score { padding:12px 0 4px; border-top:1px solid rgba(197,163,91,.16); }
.cars-score-top { display:flex; align-items:baseline; justify-content:space-between; }
.cars-score-lbl { font-size:11.5px; color:var(--gold); font-family:var(--font-fa); }
.cars-score-num { font-family:var(--font-fa); font-size:13px; color:var(--cream); }
.cars-score-num.is-best { color:var(--gold-soft); font-weight:700; }
.cars-score-track { height:4px; border-radius:999px; background:rgba(197,163,91,.3); margin-top:8px; overflow:hidden; }
.cars-score-fill { height:4px; border-radius:999px; background:var(--gold); width:0;
  transition:width .8s cubic-bezier(.2,.7,.2,1); }

.cars-col .cars-cta { margin-top:14px; width:100%; background:var(--gold); color:var(--wine); }
.cars-col .cars-cta:hover { background:var(--gold-soft); }

/* focus visibility (keyboard) */
.cars-cta:focus-visible,
.cars-compare-toggle:focus-visible,
.cars-tray-cta:focus-visible,
.cars-tray-clear:focus-visible,
.cars-tray-chip-x:focus-visible,
.cars-modal-close:focus-visible,
.cars-pager-num:focus-visible,
.cars-col .cars-cta:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

@media (max-width:720px){
  .cars-card-actions { flex-direction:column; }
  .cars-compare-toggle { justify-content:center; }
  .cars-tray-inner { gap:12px; }
  .cars-tray-label .cars-tray-hint { display:none; }
  .cars-compare { grid-template-columns:1fr !important; }

  .cars-modal-panel {
    inset-inline:0; left:0; right:0; top:auto; bottom:0;
    width:100%; max-width:100%;
    max-height:90vh; max-height:90dvh;
    transform:translateY(100%); border-radius:16px 16px 0 0;
  }
  .cars-modal.is-open .cars-modal-panel { transform:translateY(0); }
  .cars-modal-head { padding:18px 18px 12px; }
  .cars-compare-scroll { padding:6px 16px 24px; }
}

@media (prefers-reduced-motion: reduce){
  .cars-tray, .cars-modal-backdrop, .cars-modal-panel, .cars-score-fill, .cars-opp-fill,
  .cars-cta, .cars-cta svg, .cars-modal-close, .cars-tray-cta { transition:none !important; }
}