/* ============================================================
   FRT design system — ported verbatim from the reference site.
   These are the five <style> blocks every mirrored page shared,
   concatenated in their original order. Page-specific rules live
   in frt-<page>.css so this file stays the single shared base.
   ============================================================ */


:root{
  --accent:#1f93dd;
  --muted:#6f7378;
  --bg:#f6f7fb;
  --card:#fff;
  --radius:12px;
  --max-right:420px;
  --gap:18px;
  --shadow: 0 8px 28px rgba(12,18,26,0.06);
}
/* ================= DESKTOP NAV ================= */
.nav{
  display:flex;
  align-items:center;
  gap:22px;
}
.nav{display:flex;gap:18px}
.nav a{text-decoration:none;color:#111;font-weight:600}
/* Auth group (desktop only) */
.auth-group{
  display:flex;
  margin-left:12px;
  border-radius:999px;
  overflow:hidden;
  border:2px solid #1f93dd;
}

.auth-btn{
  padding:8px 18px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
}

.auth-btn.login{
  background:#fff;
  color:#1f93dd;
}

.auth-btn.register{
  background:#1f93dd;
  color:#fff;
}

/* ================= BURGER ================= */
.burger{
  display:none;
  font-size:26px;
  cursor:pointer;
}

/* ================= MOBILE NAV ================= */
.mobile-nav{
  display:none;
  flex-direction:column;
  background:#fff;
  border-top:1px solid #e4e7eb;
}

.mobile-nav a{
  padding:14px 18px;
  text-decoration:none;
  font-weight:700;
  color:#111;
  border-bottom:1px solid #f1f5f9;
}

/* Mobile auth buttons */
.mobile-nav a[href="login.php"]{
  color:#1f93dd;
}

.mobile-nav a[href="register.php"]{
  background:#1f93dd;
  color:#fff;
  text-align:center;
  margin:12px;
  border-radius:10px;
}
/* ===== HEADER ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:10000;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.nav{display:flex;gap:18px}
.nav a{text-decoration:none;color:#111;font-weight:600}
.nav-container{
  max-width:1200px;
  margin:auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  font-size:20px;
  font-weight:800;
  color:#1f93dd;
  text-decoration:none;
}

.nav-links{
  display:flex;
  gap:20px;
}

.nav-links a{
  text-decoration:none;
  color:#222;
  font-weight:600;
}

.nav-links a:hover{
  color:#1f93dd;
}


/* Mobile menu */
@media(max-width:768px){
  .nav-links{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    padding:16px;
    gap:14px;
    display:none;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
  }
  .nav-links.show{
    display:flex;
  }

}

/* ===== FOOTER ===== */
.site-footer{
  background:#0f172a;
  color:#cbd5e1;
  margin-top:40px;
}

.footer-container{
  max-width:1200px;
  margin:auto;
  padding:40px 16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.footer-col h4{
  color:#fff;
  margin-bottom:10px;
}

.footer-col p,
.footer-col a{
  font-size:14px;
  color:#cbd5e1;
  text-decoration:none;
  display:block;
  margin-bottom:6px;
}

.footer-col a:hover{
  color:#38bdf8;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
  padding:14px;
  font-size:13px;
}

/* Footer mobile */
@media(max-width:768px){
  .footer-container{
    grid-template-columns:1fr;
    text-align:center;
  }
}

/* base */
*{box-sizing:border-box}
body{font-family:Inter,Arial,system-ui;margin:0;background:var(--bg);color:#111;-webkit-font-smoothing:antialiased}


/* top */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 6px}
.logo{font-weight:800;color:var(--accent);text-decoration:none;font-size:18px}

/* card & grid */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.inner{display:grid;grid-template-columns:1fr minmax(320px, var(--max-right));gap:var(--gap);padding:18px}
@media (max-width:1024px){ .inner{grid-template-columns:1fr; }}

/* NEW GALLERY STYLES */
.gallery-container {
  width: 100%;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  margin-bottom: 16px;
}

.main-image-container {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

#mainImage {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

#mainImage:hover {
  transform: scale(1.01);
}

.status-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 10;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
}

.status-available {
  background: linear-gradient(135deg, #1bb55c, #0fa94e);
  box-shadow: 0 4px 12px rgba(27, 181, 92, 0.3);
}

.status-reserved {
  background: linear-gradient(135deg, #1f93dd, #1573b4);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.status-sold {
  background: linear-gradient(135deg, #d24b3b, #d32f2f);
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3);
}

.image-counter {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  z-index: 10;
}

.thumbnails-container {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #f5f6f8;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #1f93dd #e4e7eb;
}

.thumbnails-container::-webkit-scrollbar {
  height: 6px;
}

.thumbnails-container::-webkit-scrollbar-track {
  background: #e4e7eb;
  border-radius: 3px;
}

.thumbnails-container::-webkit-scrollbar-thumb {
  background: #1f93dd;
  border-radius: 3px;
}

.thumbnail {
  flex: 0 0 auto;
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

.thumbnail img {

  height: 100%;
  object-fit: cover;
}

.thumbnail.active {
  border-color: #1f93dd;
  box-shadow: 0 0 0 2px rgba(31,147,221,0.3);
}

.thumbnail:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.thumbnail-number {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
}

.thumbnail-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1f93dd, #0a6ad8);
  color: white;
  font-weight: 700;
  font-size: 12px;
  border: 2px solid #1f93dd;
}

.thumbnail-more span {
  font-size: 14px;
  margin-bottom: 2px;
}

.thumbnail-more small {
  font-size: 10px;
  opacity: 0.9;
}

/* Lightbox styles */
.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
  display: flex;
  opacity: 1;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 40px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  transition: all 0.3s ease;
}

.lightbox-close:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

/* Add a subtle shadow/glow to make it stand out */
.lightbox-close:after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* Position the lightbox content to avoid overlap */
.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  margin-top: 40px; /* Make room for close button */
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  transition: all 0.3s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

.lightbox-counter {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-size: 14px;
}

/* Gallery responsive */
@media (max-width: 768px) {
  .main-image-container {
    height: 300px;
  }
  
  .thumbnail {
    width: 70px;
    height: 52px;
  }
  
  .thumbnails-container {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .main-image-container {
    height: 250px;
  }
  
  .thumbnail {
    width: 64px;
    height: 48px;
  }
  
  .status-badge {
    font-size: 10px;
    padding: 4px 10px;
  }
}

/* details */
.title{font-size:22px;font-weight:800;margin:12px 0}
.price{font-size:26px;color:var(--accent);font-weight:800}

/* info grid */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
@media (max-width:640px){ .info-grid{grid-template-columns:repeat(2,1fr);} }
.info-box{background:#f8fbff;padding:12px;border-radius:8px}
.info-box small{color:var(--muted);display:block;font-size:13px}

/* sections */
.section{margin-top:16px}
.section h4{margin:0 0 8px;font-size:16px}
.section p{margin:0;color:#333;line-height:1.6}

/* IMPORTANT NOTICE box */
.notice {
  border-left:4px solid #ffb000;
  background:#f0f8fe;
  padding:12px 14px;
  border-radius:8px;
  margin-top:12px;
  color:#222;
}

/* right column */
.right{ background:#f8fbff;border-radius:10px;padding:18px; display:flex; flex-direction:column; gap:12px; position:relative; }
.flip-countdown {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.time-box {
  background: #23420a;
  border-radius: 12px;
  width: 55px;
  padding: 5px 0;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}

.num {
  display: block;
  
  font-weight: 800;
  color: #fff;
  perspective: 400px;
  animation: flip 0.6s ease;
}

.label {
  display: block;
  font-size: 0.7rem;
  color: #9ca3af;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@keyframes flip {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

/* 📱 Mobile optimization */
@media (max-width: 480px) {
  .time-box {
    width: 60px;
  }
  .num {
    font-size: 1.4rem;
  }
}

.current-top{font-size:20px;font-weight:800;margin-top:8px}
.min-bid{color:var(--muted);font-size:13px;margin-top:6px}

/* bid controls */
.bid-form{margin-top:12px}
.bid-form input[type=number]{width:100%;padding:12px;border-radius:8px;border:1px solid #e1e4ea;font-size:16px}
.bid-btn{display:block;width:100%;padding:12px;border-radius:8px;background:var(--accent);color:#fff;border:none;font-size:16px;font-weight:700;margin-top:10px;cursor:pointer}

/* bid history */
.bid-history{margin-top:14px;font-size:14px;color:var(--muted)}

/* additional info table */
.add-info {
  margin-top:22px;
  background:#fff;
  border-radius:10px;
  padding:14px;
  box-shadow: 0 6px 18px rgba(12,18,26,0.04);
}
.add-info h4 { margin:0 0 12px; }
.add-info .row { display:flex; gap:12px; flex-wrap:wrap; }
.add-info .item { flex:1 1 220px; background:#fbfdff; padding:10px; border-radius:8px; }
.add-info .label { font-size:13px; color:var(--muted); margin-bottom:6px; display:block; }
.add-info .value { font-weight:700; }

/* mobile bottom bid bar */
.mobile-bidbar{ display:none; } /* shown via JS when small */

/* lightbox fullscreen */
.lightbox{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:99999; align-items:center; justify-content:center;}
.lightbox img{ max-width:95%; max-height:92%; border-radius:10px; object-fit:contain;}
.lb-close{ position:absolute; top:18px; right:18px; color:#fff; font-size:34px; cursor:pointer; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:44px; color:#fff; cursor:pointer; padding:12px; user-select:none; }
.lb-prev{ left:12px } .lb-next{ right:12px }

/* responsive adjustments */
@media (max-width:1024px){
  .inner{grid-template-columns:1fr; padding:14px;}
  .right { order: 2; } /* right column below content */
}
@media (max-width:640px){
  .right{ display:none; } /* hide desktop right column on small screens */
  .mobile-bidbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9999; background:#fff; padding:10px; box-shadow:0 -6px 18px rgba(0,0,0,0.08); gap:10px; align-items:center; }
  .mobile-bidbar .min{ font-weight:700; color:var(--muted); font-size:14px; }
  .mobile-bidbar .bid-input{ flex:1; }
  .mobile-bidbar input{ width:100%; padding:10px; border-radius:8px; border:1px solid #e1e4ea; }
  .mobile-bidbar button{ padding:10px 14px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-weight:700; }
}

/* small tweaks */
@media (max-width:300px){
  .thumb { width:72px; height:54px; }
  .title{font-size:18px}
}

/* ===== MOBILE IMAGE FIX (ADDED, DOES NOT REMOVE EXISTING CODE) ===== */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .main-img-box {
    min-height: auto !important;
  }

  .main-img-box img,
  #mainImage,
  .main-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 320px !important;
    object-fit: contain !important;
    background: #000;
  }

  .gallery-wrap {
    flex-direction: column;
  }

  .thumbs {
    flex-direction: row;
    overflow-x: auto;
  }
}
/* ===== END MOBILE FIX ===== */
/* =====================================================
   MOBILE FIX: BID PANEL AFTER EQUIPMENT DESCRIPTION
   ===================================================== */
@media (max-width:640px){

  /* Force column layout */
  .inner{
    display:flex;
    flex-direction:column;
  }

  main{
    display:flex;
    flex-direction:column;
  }

  /* Equipment Description section */
  main .section:first-of-type{
    order:10;
  }

  /* BID PANEL IMMEDIATELY AFTER EQUIPMENT */
  .right{
    display:block !important;
    order:11;
    margin:16px 0;
    padding:16px;
    background:#f8fbff;
    border-radius:12px;
  }

  /* Important Notice */
  .notice{
    order:12;
  }

  /* Full Description */
  main .section:last-of-type{
    order:13;
  }

  /* Disable bottom bid bar */
  .mobile-bidbar{
    display:none !important;
  }
}
/* =====================================================
   MOBILE FIX – SHOW BID PANEL AFTER EQUIPMENT DESCRIPTION
   ===================================================== */
@media (max-width:640px){

  /* 1️⃣ Re-enable bid panel (it was hidden) */
  .right{
    display:block !important;
  }

  /* 2️⃣ Switch layout to flex column */
  .inner{
    display:flex !important;
    flex-direction:column;
  }

  main{
    display:flex;
    flex-direction:column;
  }

  /* 3️⃣ Explicit ordering */
  .gallery{ order:1; }
  .title{ order:2; }
  .price{ order:3; }
  .info-grid{ order:4; }

  /* Equipment Description */
  main .section:nth-of-type(1){
    order:5;
  }

  /* BID PANEL — RIGHT AFTER EQUIPMENT */
  .right{
    order:6;
    margin:16px 0;
    padding:16px;
    background:#f8fbff;
    border-radius:12px;
  }

  /* Important Notice */
  .notice{
    order:7;
  }

  /* Full Description */
  main .section:nth-of-type(2){
    order:8;
  }

  /* 4️⃣ Disable floating mobile bid bar */
  .mobile-bidbar{
    display:none !important;
  }
}
/* =====================================================
   MOBILE: BID PANEL DIRECTLY AFTER PHOTO GALLERY
   ===================================================== */
@media (max-width:640px){

  /* Re-enable bid panel */
  .right{
    display:block !important;
    width:100%;
    margin:16px 0;
    padding:16px;
    background:#f8fbff;
    border-radius:12px;
  }

  /* Convert main layout to flex */
  .inner{
    display:flex !important;
    flex-direction:column;
  }

  /* ORDER EVERYTHING AT ROOT LEVEL */
  .gallery{ order:2; }

  /* 🔥 BID PANEL IMMEDIATELY AFTER PHOTOS */
  .right{ order:2; }

  main{ order:3; }

  /* Inside main, keep natural flow */
  main{
    display:flex;
    flex-direction:column;
  }

  /* Disable mobile sticky bid bar */
  .mobile-bidbar{
    display:none !important;
  }
}
/* ================================
   STATUS BADGE (AVAILABLE / SOLD)
================================ */
.status-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  border-radius: 999px;
  color: #fff;
  text-transform: uppercase;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.status-available {
  background: #1bb55c;
}

.status-reserved {
  background: #1f93dd;
}

.status-sold {
  background: #d24b3b;
}

/* ================================
   MAIN IMAGE – MOBILE FIX
================================ */
.main-image {
  position: relative;
  width: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-image img {
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

/* ================================
   THUMBNAIL STRIP
================================ */
.thumb-strip {
  display: flex;
  gap: 10px;
  padding: 12px;
  overflow-x: auto;
  background: #fff;
}

.thumb {
  flex: 0 0 auto;
  width: 90px;
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb.active {
  border-color: #1f93dd;
}

/* ================================
   MOBILE RESPONSIVE FIXES
================================ */
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  .gallery {
    margin-bottom: 14px;
  }

  .main-image img {
    max-height: 320px;
  }

  .thumb {
    width: 72px;
    height: 54px;
  }

  .title {
    font-size: 20px;
    line-height: 1.3;
  }

  .price {
    font-size: 22px;
  }

  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ================================
   SMALL PHONES
================================ */
@media (max-width: 420px) {

  .main-image img {
    max-height: 280px;
  }

  .thumb {
    width: 64px;
    height: 48px;
  }

}
/* ================================
   HOW TO BID INFO CARD
================================ */
.how-to-bid-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f1f6ff;
  border: 1px solid #d7e4ff;
  border-left: 4px solid #1f93dd;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 14px;
}

.how-to-bid-icon {
  font-size: 20px;
  line-height: 1;
}

.how-to-bid-text {
  color: #333;
}

.how-to-bid-text a {
  color: #1f93dd;
  font-weight: 700;
  text-decoration: none;
}

.how-to-bid-text a:hover {
  text-decoration: underline;
}

/* Mobile spacing */
@media (max-width: 768px) {
  .how-to-bid-card {
    font-size: 13px;
    padding: 12px 14px;
  }
}

/* ================= HEADER BASE ================= */
.header{
  background:#fff;
  border-bottom:1px solid #e4e7eb;
}

.header-inner{
  max-width:1300px;
  margin:auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ================= DESKTOP NAV ================= */
.nav{
  display:flex;
  align-items:center;
  gap:22px;
}

/* Auth group (desktop only) */
.auth-group{
  display:flex;
  margin-left:12px;
  border-radius:999px;
  overflow:hidden;
  border:2px solid #1f93dd;
}

.auth-btn{
  padding:8px 18px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
}

.auth-btn.login{
  background:#fff;
  color:#1f93dd;
}

.auth-btn.register{
  background:#1f93dd;
  color:#fff;
}



/* ================= MOBILE NAV ================= */
.mobile-nav{
  display:none;
  flex-direction:column;
  background:#fff;
  border-top:1px solid #e4e7eb;
}

.mobile-nav a{
  padding:14px 18px;
  text-decoration:none;
  font-weight:700;
  color:#111;
  border-bottom:1px solid #f1f5f9;
}

/* Mobile auth buttons */
.mobile-nav a[href="login.php"]{
  color:#1f93dd;
}

.mobile-nav a[href="register.php"]{
  background:#1f93dd;
  color:#fff;
  text-align:center;
  margin:12px;
  border-radius:10px;
}

/* ================= MOBILE BEHAVIOR ================= */
@media (max-width:768px){

  /* Hide desktop nav completely */
  .nav{
    display:none;
  }

  /* Show burger */
  .burger{
    display:block;
  }

  /* Mobile nav visible when active */
  .mobile-nav.active{
    display:flex;
  }
}

/* Buy Now Styling */
.buy-now-container {
    margin: 20px 0; 
    padding: 16px; 
    background: linear-gradient(135deg, #e7f4fd, #cfe9fa);
    border: 2px solid #22c55e;
    border-radius: 10px; 
    text-align: center;
    position: relative;
    overflow: hidden;
}

.buy-now-container::before {
    content: '⚡';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 30px;
    opacity: 0.2;
    transform: rotate(25deg);
}

.buy-now-header {
    font-size: 14px; 
    color: #166534; 
    margin-bottom: 8px; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.buy-now-price-container {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.buy-now-label {
    font-size: 18px; 
    font-weight: 800; 
    color: #1f2937;
}

.buy-now-price {
    font-size: 24px; 
    font-weight: 900; 
    color: #059669;
    text-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

.buy-now-button {
    width: 100%;
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.buy-now-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3);
}

.buy-now-disclaimer {
    font-size: 12px; 
    color: #6b7178; 
    margin-top: 10px;
    line-height: 1.4;
}

/* Buy Now Pending Styling */
.buy-now-pending {
    margin: 20px 0; 
    padding: 16px; 
    background: linear-gradient(135deg, #e7f4fd, #fde68a);
    border: 2px solid #f59e0b;
    border-radius: 10px; 
    text-align: center;
}

.buy-now-pending-header {
    font-size: 14px; 
    color: #1573b4; 
    margin-bottom: 8px; 
    font-weight: 600;
}

.buy-now-pending-text {
    font-size: 13px; 
    color: #1573b4;
}

/* Buy Now Used Styling */
.buy-now-used {
    margin: 20px 0; 
    padding: 16px; 
    background: #f5f6f8;
    border: 2px solid #e4e7eb;
    border-radius: 10px; 
    text-align: center;
}

.buy-now-used-header {
    font-size: 14px; 
    color: #6b7178; 
    margin-bottom: 8px; 
    font-weight: 600;
}

.buy-now-used-text {
    font-size: 13px; 
    color: #6b7178;
}

/* Fixed Header Styles */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.logo img {
    height: 40px;
    width: auto;
}

/* Desktop Navigation */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 1;
    margin-left: 40px;
}

.search-container {
    flex: 1;
    max-width: 400px;
}

.search-form {
    position: relative;
    width: 100%;
}

.search-input {
    width: 100%;
    padding: 10px 16px;
    padding-right: 40px;
    border: 1px solid #e1e4ea;
    border-radius: 8px;
    font-size: 14px;
    background: #f8f9fa;
}

.search-button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
}

.nav-links {
    display: flex;
    gap: 24px;
    align-items: center;
}

.nav-link {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #1f93dd;
}

/* Auth Section */
.auth-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.phone-number {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-size: 14px;
}

.auth-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-outline {
    background: transparent;
    color: #1f93dd;
    border: 1px solid #1f93dd;
}

.btn-outline:hover {
    background: #1f93dd;
    color: white;
}

.btn-primary {
    background: #1f93dd;
    color: white;
    border: none;
}

.btn-primary:hover {
    background: #0a6ad8;
}

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.menu-icon {
    width: 100%;
    height: 3px;
    background: #333;
    border-radius: 3px;
    transition: 0.3s;
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    z-index: 999;
    overflow-y: auto;
}

.mobile-menu-container {
    padding: 20px;
}

.mobile-search {
    margin-bottom: 20px;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-nav-link {
    padding: 14px 0;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #eee;
}

.mobile-auth {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-contact {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Responsive */
@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .header-container {
        padding: 0 15px;
    }
    
    .logo img {
        height: 32px;
    }
}

@media (min-width: 769px) {
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ===== ONLINE AGREEMENT RED ALERT BAR ===== */
.agreement-alert-bar{
  width:100%;
  background:linear-gradient(90deg,#1f93dd,#d24b3b);
  color:#fff;
  position:relative;
  z-index:2147482999;
  font-family:Inter,Arial,sans-serif;
  box-shadow:0 8px 24px rgba(31,147,221,.28);
}
.agreement-alert-inner{
  max-width:1280px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.agreement-alert-text{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.agreement-alert-text span{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.agreement-alert-text small{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.82);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
}
.agreement-alert-btn{
  min-height:34px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#1f93dd;
  border-radius:4px;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.agreement-alert-btn:hover{
  background:#f0f8fe;
  color:#b23b2d;
}
.invoice-alert-bar{
  background:linear-gradient(90deg,#b23b2d,#d24b3b);
}
.invoice-alert-bar .agreement-alert-btn{
  color:#b23b2d;
}

/* ===== ID UPLOAD YELLOW ALERT BAR ===== */
.kyc-alert-bar{
background: linear-gradient(#ffecb3);
  color:#422006;
  box-shadow:0 8px 24px rgba(245,158,11,.25);
}
.kyc-alert-bar .agreement-alert-text small{
  color:rgba(66,32,6,.78);
}
.kyc-alert-bar .agreement-alert-btn{
  background:#422006;
  color:#fff;
}
.kyc-alert-bar .agreement-alert-btn:hover{
  background:#713f12;
  color:#fff;
}
@media(max-width:700px){
  .agreement-alert-inner{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding:10px 14px;
  }
  .agreement-alert-text{
    align-items:flex-start;
    font-size:12px;
    width:100%;
  }
  .agreement-alert-text span{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .agreement-alert-btn{
    width:100%;
  }
}




.simple-mobile-header{
  position:sticky!important;
  top:0!important;
  z-index:2147483000!important;
  background:#ffffff!important;
  border-bottom:1px solid #e4e7eb!important;
  box-shadow:0 4px 18px rgba(0,0,0,.06)!important;
  font-family:Inter,Arial,sans-serif!important;
}
.simple-header-inner{
  max-width:1280px!important;
  margin:0 auto!important;
  height:72px!important;
  padding:0 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
}
.simple-logo{display:flex!important;align-items:center!important;text-decoration:none!important;flex:0 0 auto!important}
.simple-logo img{height:46px!important;width:auto!important;max-width:220px!important;display:block!important}
.simple-desktop-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:30px!important;
  flex:1!important;
}
.simple-desktop-nav a{
  color:#141b26!important;
  text-decoration:none!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  padding:28px 0!important;
}
.simple-desktop-nav a:hover{color:#1f93dd!important}
 .simple-desktop-actions{display:flex!important;align-items:center!important;gap:10px!important}
.simple-header-phone{
  min-height:42px!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  border:1px solid #e4e7eb!important;
  background:#fff!important;
  color:#141b26!important;
  text-decoration:none!important;
  border-radius:3px!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.05em!important;
  white-space:nowrap!important;
}
.simple-header-phone:hover{border-color:#1f93dd!important;color:#1f93dd!important}
.simple-header-phone svg{width:16px!important;height:16px!important;flex:0 0 auto!important}
.simple-btn{
  min-height:42px!important;
  min-width:108px!important;
  padding:0 16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:3px!important;
  text-decoration:none!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}
.simple-btn-light{background:#fff!important;color:#141b26!important;border:1px solid #e4e7eb!important}
.simple-btn-dark{background:#1c2634!important;color:#fff!important;border:1px solid #1c2634!important}

.simple-burger-btn{
  display:none!important;
  width:48px!important;
  height:48px!important;
  border:1px solid #141b26!important;
  border-radius:4px!important;
  background:#fff!important;
  padding:0!important;
  margin:0!important;
  align-items:center!important;
  justify-content:center!important;
  flex-direction:column!important;
  gap:6px!important;
  cursor:pointer!important;
  position:relative!important;
  z-index:2147483647!important;
  pointer-events:auto!important;
  -webkit-tap-highlight-color:transparent!important;
}
.simple-burger-btn span{
  display:block!important;
  width:23px!important;
  height:2px!important;
  background:#141b26!important;
  border-radius:3px!important;
  transition:transform .25s ease, opacity .2s ease!important;
}
.simple-burger-btn.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)!important}
.simple-burger-btn.is-open span:nth-child(2){opacity:0!important}
.simple-burger-btn.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)!important}

.simple-burger-backdrop{
  display:none!important;
  position:fixed!important;
  inset:0!important;
  background:rgba(12,18,26,.58)!important;
  z-index:2147483001!important;
  opacity:0!important;
}
.simple-burger-menu{
  position:fixed!important;
  top:0!important;
  right:0!important;
  width:min(88vw,390px)!important;
  max-width:390px!important;
  height:100dvh!important;
  background:#ffffff!important;
  z-index:2147483002!important;
  transform:translateX(110%)!important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1)!important;
  box-shadow:-30px 0 80px rgba(0,0,0,.28)!important;
  border-left:1px solid #e4e7eb!important;
  padding:18px!important;
  overflow-y:auto!important;
  display:flex!important;
  flex-direction:column!important;
  font-family:Inter,Arial,sans-serif!important;
}
body.simple-menu-open .simple-burger-backdrop{
  display:block!important;
  opacity:1!important;
}
body.simple-menu-open .simple-burger-menu{
  transform:translateX(0)!important;
}
.simple-menu-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding-bottom:16px!important;
  border-bottom:1px solid #e4e7eb!important;
  margin-bottom:16px!important;
}
.simple-menu-head img{height:46px!important;width:auto!important;max-width:210px!important}
.simple-menu-close{
  width:44px!important;
  height:44px!important;
  border:1px solid #e4e7eb!important;
  background:#fff!important;
  color:#141b26!important;
  font-size:30px!important;
  line-height:1!important;
  border-radius:4px!important;
  cursor:pointer!important;
}
.simple-menu-search{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:8px!important;
  margin:0 0 18px!important;
}
.simple-menu-search input{
  min-width:0!important;
  height:44px!important;
  border:1px solid #e4e7eb!important;
  background:#fff!important;
  padding:0 12px!important;
  border-radius:4px!important;
  color:#141b26!important;
  outline:none!important;
}
.simple-menu-search button{
  height:44px!important;
  border:0!important;
  background:#1c2634!important;
  color:#fff!important;
  border-radius:4px!important;
  padding:0 14px!important;
  text-transform:uppercase!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
}
.simple-menu-links{
  display:flex!important;
  flex-direction:column!important;
  border-top:1px solid #e4e7eb!important;
}
.simple-menu-links a{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  padding:17px 2px!important;
  border-bottom:1px solid #e4e7eb!important;
  text-decoration:none!important;
  color:#141b26!important;
  font-size:17px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.simple-menu-links span{
  font-size:11px!important;
  font-family:monospace!important;
  color:#1f93dd!important;
  min-width:28px!important;
}
.simple-menu-actions{
  margin-top:auto!important;
  padding-top:22px!important;
  display:grid!important;
  gap:10px!important;
}
.simple-menu-primary,.simple-menu-secondary,.simple-menu-phone{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:48px!important;
  border-radius:4px!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}
.simple-menu-primary{background:#1c2634!important;color:#fff!important}
.simple-menu-secondary{background:#fff!important;color:#141b26!important;border:1px solid #141b26!important}
.simple-menu-phone{background:#eef0f3!important;color:#141b26!important;border:1px solid #e4e7eb!important}

@media(max-width:900px){
  .simple-desktop-nav,.simple-desktop-actions{display:none!important}
  .simple-burger-btn{display:flex!important}
  .simple-header-inner{height:68px!important;padding:0 15px!important}
  .simple-logo img{height:42px!important;max-width:190px!important}
}
@media(min-width:901px){
  .simple-burger-backdrop,.simple-burger-menu{display:none!important}
}



:root{
    --brand:#1f93dd;
    --ink:#171717;
    --ink-soft:#525252;
    --paper:#ffffff;
    --paper-deep:#f5f6f8;
    --surface:#ffffff;
    --border:#e4e7eb;
    --gold:#4bb8f2;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--paper);color:var(--ink)}
.max-wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.customer-reviews-strip{
    background:var(--paper-deep);
    border-top:1px solid var(--border);
    padding:64px 0;
}
.reviews-head{text-align:center;margin-bottom:40px}
.eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--brand);
}
.eyebrow:before,.eyebrow:after{
    content:"";
    width:34px;
    height:1px;
    background:var(--gold);
    opacity:.65;
}
.reviews-head h2{
    margin:12px 0 0;
    color:var(--ink);
    font-size:clamp(28px,4vw,44px);
    line-height:1.05;
    letter-spacing:-.04em;
}
.reviews-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.review-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:22px;
    box-shadow:0 16px 40px rgba(23,23,23,.055);
    transition:transform .2s ease, box-shadow .2s ease;
}
.review-card:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 50px rgba(23,23,23,.09);
}
.review-top{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:14px;
}
.review-avatar{
    width:56px;
    height:56px;
    border-radius:999px;
    object-fit:cover;
    flex-shrink:0;
    border:2px solid #fff;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.review-person{flex:1;min-width:0}
.review-name{font-weight:700;color:var(--ink);line-height:1.2}
.review-city{font-size:12px;color:var(--ink-soft);margin-top:4px}
.review-quote{width:22px;height:22px;flex-shrink:0;color:var(--brand);opacity:.4}
.review-text{
    margin:0;
    color:var(--ink-soft);
    font-size:14px;
    line-height:1.6;
    white-space:pre-wrap;
}
.review-stars{
    color:var(--gold);
    letter-spacing:2px;
    font-size:13px;
    margin-top:14px;
}
@media(max-width:980px){.reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
    .customer-reviews-strip{padding:46px 0}
    .max-wrap{padding:0 16px}
    .reviews-grid{grid-template-columns:1fr}
    .review-card{padding:18px}
}
.google-review-wrap{
    margin:30px 0;
}

.google-review-btn{
    display:flex;
    align-items:center;
    gap:15px;
    background:#fff;
    border:1px solid #e4e7eb;
    border-radius:16px;
    padding:18px 22px;
    text-decoration:none;
    box-shadow:0 8px 24px rgba(0,0,0,.05);
    transition:.25s;
    max-width:500px;
}

.google-review-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(0,0,0,.08);
}

.google-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#fbbf24;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
    flex-shrink:0;
}

.google-review-btn small{
    display:block;
    color:#64748b;
    font-size:12px;
    margin-bottom:2px;
}

.google-review-btn strong{
    color:#14171c;
    font-size:16px;
}

.arrow{
    margin-left:auto;
    color:#1f93dd;
    font-size:22px;
    font-weight:700;
}



/* ===== CIRCLE365 EDITORIAL FOOTER ===== */
:root{
  --footer-ink:#fbf7ef;
  --footer-soft:rgba(251,247,239,.68);
  --footer-faint:rgba(251,247,239,.48);
  --footer-gold:#4bb8f2;
  --footer-gold-soft:rgba(75,184,242,.18);
  --footer-bg:#171717;
}

.site-footer{
  background:
    radial-gradient(ellipse 48% 60% at 82% 10%, rgba(75,184,242,.18), transparent 62%),
    radial-gradient(ellipse 55% 60% at 10% 90%, rgba(30,58,92,.24), transparent 64%),
    #171717;
  color:var(--footer-soft);
  margin-top:80px;
  border-top:1px solid var(--footer-gold-soft);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
}

.site-footer a{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease, opacity .18s ease, transform .18s ease;
}

.site-footer a:hover{
  color:var(--footer-ink);
}

.footer-shell{
  max-width:1280px;
  margin:0 auto;
  padding:64px 24px 34px;
}

.footer-top{
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:end;
  padding-bottom:40px;
  margin-bottom:40px;
  border-bottom:1px solid var(--footer-gold-soft);
}

.footer-wordmark{
  display:inline-flex;
  align-items:center;
  color:var(--footer-ink);
  font-size:28px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.035em;
}

.footer-tagline{
  margin:18px 0 0;
  max-width:50ch;
  color:var(--footer-soft);
  font-size:16px;
  line-height:1.75;
}

.footer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.footer-btn{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius:3px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
}

.footer-btn-gold{
  background:var(--footer-gold);
  color:#171717 !important;
  border:1px solid var(--footer-gold);
}

.footer-btn-ghost{
  color:var(--footer-ink) !important;
  border:1px solid rgba(251,247,239,.20);
  background:rgba(251,247,239,.03);
}

.footer-columns{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

.footer-column h4{
  margin:0 0 16px;
  color:var(--footer-ink);
  font-size:13px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.footer-column ul{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-column li{
  margin:0 0 10px;
}

.footer-column a,
.footer-column p{
  color:var(--footer-soft);
  font-size:14px;
  line-height:1.7;
}

.footer-column a:hover{
  transform:translateX(3px);
}

.footer-office-phone{
  display:block;
  color:var(--footer-ink) !important;
  font-size:18px !important;
  margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}

.footer-office-email{
  display:block;
  word-break:break-all;
  margin-bottom:12px;
}

.footer-hours{
  color:var(--footer-faint) !important;
  font-size:12px !important;
  margin:0;
}

.footer-address{
  margin:0;
  color:var(--footer-soft) !important;
}

.footer-legal{
  margin-top:44px;
  padding-top:24px;
  border-top:1px solid rgba(251,247,239,.08);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:var(--footer-faint);
  font-size:13px;
}

.footer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

@media(max-width:900px){
  .footer-shell{
    padding:54px 20px 32px;
  }

  .footer-top{
    grid-template-columns:1fr;
    align-items:start;
  }

  .footer-actions{
    justify-content:flex-start;
  }

  .footer-columns{
    grid-template-columns:repeat(2,1fr);
    gap:34px;
  }

  .footer-legal{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media(max-width:540px){
  .site-footer{
    margin-top:54px;
  }

  .footer-shell{
    padding:44px 18px 28px;
  }

  .footer-wordmark{
    font-size:24px;
  }

  .footer-tagline{
    font-size:14px;
  }

  .footer-columns{
    grid-template-columns:1fr;
  }

  .footer-actions{
    width:100%;
  }

  .footer-btn{
    width:100%;
  }
}



:root{--circle-red:#1f93dd;--circle-red-dark:#8f1c17;--circle-ink:#171717;--circle-muted:#737373;--circle-border:#dedbd2;--circle-paper:#ffffff;--circle-gold:#9a7a3d;--circle-shadow:0 20px 60px rgba(23,23,23,.10)}
.site-header{position:sticky!important;top:0!important;z-index:9999!important;background:rgba(251,250,246,.94)!important;backdrop-filter:blur(14px)!important;border-bottom:1px solid var(--circle-border)!important;box-shadow:none!important}.header-container{max-width:1280px!important;min-height:74px!important;padding:0 24px!important;margin:0 auto!important}.logo img{max-height:44px!important;width:auto!important}.nav-link,.mobile-nav-link{font-size:12px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--circle-ink)!important}.nav-link:hover{color:var(--circle-red)!important}.search-input{border:1px solid var(--circle-border)!important;background:#fff!important;border-radius:2px!important;height:40px!important}.search-button,.btn-primary,.auth-btn.register{background:var(--circle-red)!important;border-color:var(--circle-red)!important;color:#fff!important;border-radius:2px!important}.btn-outline,.auth-btn.login{border:1px solid var(--circle-border)!important;color:var(--circle-ink)!important;background:#fff!important;border-radius:2px!important}
.container{max-width:1280px!important;margin:0 auto!important;padding:26px 24px 60px!important}.card{background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}.inner{display:grid!important;grid-template-columns:minmax(0,1fr) 390px!important;align-items:start!important;gap:28px!important;padding:0!important}main{min-width:0!important}.gallery-modern{background:#111!important;border-radius:0!important;box-shadow:var(--circle-shadow)!important;margin:0!important;border:1px solid #111!important}.gallery-hero{height:min(650px,72vh)!important;background:#111!important}.gallery-hero img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}.gallery-badge{top:18px!important;left:18px!important;border-radius:2px!important;background:var(--circle-red)!important;color:#fff!important;letter-spacing:.18em!important;font-size:11px!important;padding:8px 12px!important;border:0!important;box-shadow:none!important}.gallery-counter{right:18px!important;bottom:18px!important;border-radius:2px!important;background:rgba(23,23,23,.82)!important;font-size:11px!important;letter-spacing:.12em!important;padding:7px 11px!important}.gallery-thumbs{background:#fff!important;border-top:1px solid var(--circle-border)!important;padding:10px!important;gap:8px!important}.gallery-thumb{width:84px!important;height:62px!important;border-radius:0!important;border:1px solid var(--circle-border)!important;opacity:.72!important}.gallery-thumb.active{opacity:1!important;border-color:var(--circle-red)!important;box-shadow:0 0 0 2px rgba(31,147,221,.15)!important}.gallery-thumb-number{display:none!important}
.title{margin:24px 0 8px!important;font-size:clamp(28px,3.4vw,48px)!important;line-height:.98!important;letter-spacing:-.045em!important;font-weight:850!important;color:var(--circle-ink)!important}.price{color:var(--circle-red)!important;font-size:28px!important;letter-spacing:-.02em!important}.info-grid{margin:20px 0 0!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1px!important;background:var(--circle-border)!important;border:1px solid var(--circle-border)!important}.info-box{border-radius:0!important;background:#fff!important;padding:15px!important;min-height:76px!important}.info-box small,.add-info .label{color:var(--circle-muted)!important;font-size:10px!important;letter-spacing:.16em!important;text-transform:uppercase!important;font-weight:800!important}.info-box strong,.add-info .value{display:block!important;margin-top:7px!important;font-size:15px!important;color:var(--circle-ink)!important}.section,.add-info,.similar-lots,.notice{background:#fff!important;border:1px solid var(--circle-border)!important;border-radius:0!important;box-shadow:none!important;padding:24px!important;margin-top:18px!important}.section h4,.add-info h4,.similar-lots h3{margin:0 0 14px!important;color:var(--circle-ink)!important;font-size:13px!important;letter-spacing:.18em!important;text-transform:uppercase!important;font-weight:900!important}.section p{color:#404040!important;line-height:1.75!important;font-size:15px!important}.notice{border-left:4px solid var(--circle-gold)!important;background:#fffaf0!important}
#rightPanel.right{position:sticky!important;top:96px!important;background:#fff!important;border:1px solid var(--circle-border)!important;border-radius:0!important;padding:0!important;gap:0!important;box-shadow:var(--circle-shadow)!important;overflow:hidden!important}#rightPanel:before{content:"Live Auction";display:block;background:var(--circle-ink);color:#fff;padding:15px 18px;font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}#rightPanel #rightPanel #rightPanel #rightPanel .num{color:var(--circle-red)!important;font-size:25px!important;line-height:1!important;font-weight:900!important;letter-spacing:-.04em!important}#rightPanel .label{color:var(--circle-muted)!important;font-size:9px!important;letter-spacing:.16em!important;font-weight:900!important}#rightPanel>br{display:none!important}#rightPanel .current-top{color:var(--circle-ink)!important;font-size:36px!important;letter-spacing:-.05em!important;padding:0 20px 14px!important;margin:0!important}#rightPanel .current-top:before{content:"Current Bid";display:block;color:var(--circle-muted);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin:20px 0 8px}#rightPanel .bid-form{padding:0 20px 20px!important;margin:0!important}#rightPanel label{font-size:11px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--circle-muted)!important}#rightPanel input[type=number],#rightPanel input[type=text],#rightPanel input[type=email],#rightPanel textarea{border:1px solid var(--circle-border)!important;border-radius:2px!important;background:#fff!important;min-height:48px!important;box-shadow:none!important}#rightPanel .bid-btn,#rightPanel button[type=submit]{background:var(--circle-red)!important;color:#fff!important;border-radius:2px!important;border:0!important;box-shadow:none!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:900!important}#rightPanel .bid-btn:hover,#rightPanel button[type=submit]:hover{background:var(--circle-red-dark)!important;transform:none!important}#rightPanel .bid-btn:after{display:none!important}#rightPanel .min-bid{color:var(--circle-muted)!important;border-top:1px solid var(--circle-border)!important;padding-top:16px!important}#rightPanel img[src*="30days"]{margin:10px auto 0!important;filter:grayscale(.2)!important}
#rightPanel .lot-contact-card{margin:0!important;padding:20px!important;background:#ffffff!important;border-top:1px solid var(--circle-border)!important;border-radius:0!important;box-shadow:none!important}.lot-contact-kicker{color:var(--circle-muted)!important;font-size:10px!important;letter-spacing:.18em!important;text-transform:uppercase!important;font-weight:900!important}.lot-contact-name{color:var(--circle-ink)!important;font-size:16px!important;margin:8px 0 14px!important}.lot-contact-btn{border-radius:2px!important;border:1px solid var(--circle-border)!important;background:#fff!important;color:var(--circle-ink)!important;box-shadow:none!important;letter-spacing:.08em!important;text-transform:uppercase!important}.lot-contact-call{background:var(--circle-ink)!important;color:#fff!important;border-color:var(--circle-ink)!important}.lot-contact-email{background:#fff!important;color:var(--circle-red)!important;border-color:rgba(31,147,221,.35)!important}.lot-contact-save{display:none!important}.similar-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}.similar-card{border:1px solid var(--circle-border)!important;background:#fff!important;border-radius:0!important;overflow:hidden!important;text-decoration:none!important}.similar-card img{height:120px!important;width:100%!important;object-fit:cover!important}.similar-info{padding:10px!important}.similar-title{font-weight:800!important;color:var(--circle-ink)!important;font-size:12px!important;line-height:1.25!important}.similar-price{color:var(--circle-red)!important;font-weight:900!important;margin-top:6px!important}.mobile-bidbar{display:none!important}.question-modal-box{border-radius:0!important;border:1px solid var(--circle-border)!important}.question-modal button[type=submit]{background:var(--circle-red)!important;border-radius:2px!important}
@media(max-width:1024px){.inner{grid-template-columns:1fr!important}#rightPanel.right{position:relative!important;top:auto!important;order:2!important;margin-top:18px!important}main{order:1!important}.gallery-hero{height:min(520px,62vh)!important}.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){body:before{font-size:10px;line-height:1.5;padding:8px 10px}.container{padding:14px 12px 35px!important}.header-container{padding:0 14px!important;min-height:64px!important}.gallery-hero{height:315px!important}.gallery-thumbs{overflow-x:auto!important}.gallery-thumb{width:68px!important;height:50px!important;flex:0 0 auto!important}.title{font-size:28px!important;line-height:1.05!important}.price{font-size:23px!important}.section,.add-info,.similar-lots,.notice{padding:16px!important}.similar-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#rightPanel .current-top{font-size:30px!important}}

/* ── Tailwind preflight compatibility ─────────────────────────────────
   The reference site loads no CSS framework, so many of its heading rules
   set weight and spacing but no font-size — the browser default supplied
   it. Tailwind's preflight, injected at runtime after this file, resets
   h1..h6 to font-size:inherit and flattens every one of those headings to
   body size. These restore the defaults the design was drawn against.
   `html` prefix on purpose: (0,0,2) beats preflight's (0,0,1), while any
   heading that carries its own size class still wins over both. */
html h1 { font-size: 2em;    margin: .67em 0; }
html h2 { font-size: 1.5em;  margin: .83em 0; }
html h3 { font-size: 1.17em; margin: 1em 0; }
html h4 { font-size: 1em;    margin: 1.33em 0; }
html h5 { font-size: .83em;  margin: 1.67em 0; }
html h6 { font-size: .67em;  margin: 2.33em 0; }

/* ── Google review button ─────────────────────────────────────────────
   The reference sheet leaves it flush left inside a full-width strip,
   where it reads as a stray card. Centred under the reviews grid. */
.google-review-wrap{display:flex;justify-content:center}
.google-review-btn{margin-left:auto;margin-right:auto;width:100%}

/* ── Fullscreen photo viewer ──────────────────────────────────────────
   app.css puts the overlay at z-index:100, but the reference header is
   pinned at 2147483000, so on desktop the sticky bar sat on top of the
   photo and covered the close button. The overlay has to outrank it. */
.lightbox-overlay{z-index:2147483600 !important}
.lightbox-overlay > *{position:relative;z-index:1}
/* Keep the close control clear of the viewport edge and always on top. */
.lightbox-overlay .lightbox-close,
.lightbox-overlay [data-lightbox-close]{z-index:2 !important}
body.lightbox-open .simple-mobile-header{z-index:1 !important}

/* ── Modals over the reference sheet ──────────────────────────────────
   The reference lot page ships `.card{background:transparent!important}`
   because it uses .card as a bare layout wrapper. Our modals use .card
   for the white panel, so that one rule made every dialog see-through —
   an !important beats even the inline background the markup sets.
   Restored here, scoped to dialogs only so the reference layout keeps
   its transparent wrappers. */
.fixed.inset-0 .card,
[x-show] > .card{
  background: var(--surface, #fff) !important;
  box-shadow: 0 24px 70px rgba(20,27,38,.28) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
/* The header is pinned at 2147483000; a dialog at z-50 would sit under it. */
.fixed.inset-0.z-50{z-index:2147483500 !important}

/* ── Lender logo marquee ──────────────────────────────────────────────
   Sits under the Google review button. The track holds two identical
   copies of the logo list and slides by exactly half its width, so the
   loop is seamless without JavaScript measuring anything. */
.bank-strip{
  position:relative;
  overflow:hidden;
  margin:26px auto 0;
  max-width:1280px;
  padding:18px 0;
  border-top:1px solid var(--ra-border,#e4e7eb);
  border-bottom:1px solid var(--ra-border,#e4e7eb);
}
.bank-strip__track{
  display:flex;
  align-items:center;
  gap:56px;
  width:max-content;
  animation:bankScroll 46s linear infinite;
}
.bank-strip:hover .bank-strip__track{animation-play-state:paused}
.bank-strip__item{flex:0 0 auto;display:flex;align-items:center}
.bank-strip__item img{
  height:30px;
  width:auto;
  max-width:170px;
  object-fit:contain;
  display:block;
  /* Full colour, always — the brands are the point of the strip. */
}
@keyframes bankScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* Soft edges so logos enter and leave instead of being chopped off. */
.bank-strip__fade{position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.bank-strip__fade--l{left:0;background:linear-gradient(90deg,var(--ra-soft,#f5f6f8),transparent)}
.bank-strip__fade--r{right:0;background:linear-gradient(270deg,var(--ra-soft,#f5f6f8),transparent)}
@media(max-width:640px){
  .bank-strip__track{gap:34px;animation-duration:32s}
  .bank-strip__item img{height:24px;max-width:130px}
  .bank-strip__fade{width:48px}
}
@media (prefers-reduced-motion:reduce){
  .bank-strip__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:30px}
  .bank-strip__fade{display:none}
}


/* ── "All bids are final" notice — partials/frt-bids-final.php ──────
   Two densities off one look: a full block where a bid is actually
   placed, a single-line strip on list pages. */
.bids-final{margin:26px 0;padding:20px 22px;background:#fff;border:1px solid var(--ra-border,#e4e7eb);border-left:4px solid var(--ra-red,#1f93dd);box-shadow:0 14px 42px rgba(20,27,38,.06)}
.bids-final__tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--ra-red,#1f93dd)}
.bids-final__tag::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--ra-red,#1f93dd);color:#fff;font-size:11px;font-weight:900;letter-spacing:0}
.bids-final__head{margin:10px 0 8px;font-size:clamp(17px,2.2vw,21px);font-weight:900;letter-spacing:-.02em;color:var(--ra-ink,#141b26);line-height:1.25}
.bids-final p{margin:0 0 10px;color:#3f3f46;font-size:14px;line-height:1.65}
.bids-final__list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.bids-final__list li{position:relative;padding-left:20px;color:#3f3f46;font-size:13.5px;line-height:1.6}
.bids-final__list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--ra-gold,#4bb8f2)}
.bids-final__list strong{color:var(--ra-ink,#141b26)}
.bids-final__foot{margin:14px 0 0;padding-top:12px;border-top:1px solid #eef0f3;font-size:13px;color:#6b7178}
.bids-final a{color:var(--ra-red,#1f93dd);font-weight:800;text-decoration:underline}
.bids-final--strip{display:flex;align-items:center;gap:14px;padding:13px 16px;margin:16px 0;background:var(--ra-soft,#f5f6f8);box-shadow:none}
.bids-final--strip .bids-final__tag{flex:0 0 auto}
.bids-final--strip p{margin:0;font-size:13px;line-height:1.6}
@media(max-width:700px){.bids-final--strip{flex-direction:column;align-items:flex-start;gap:9px}.bids-final{padding:17px 16px}}

/* Pagination: the reference sets a 42px square with no side padding, which
   clips wider labels like "Prev" / "Next" against the border. */
.pagination a,.pagination span{padding:0 13px}

/* ── Staggered event page (auctions/event-staggered.php) ──────────────
   Same tokens as the rest of the site. The one deliberate emphasis is
   the closing clock on each card: in this format the deadline is the
   information people came for, so it outranks the photo and the price. */
.stag-hero{background:var(--ra-soft,#f5f6f8);border-bottom:1px solid var(--ra-border,#e4e7eb);padding:44px 0 38px}
.stag-wrap{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;align-items:end}
.stag-kicker{font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--ra-red,#1f93dd)}
.stag-hero h1{margin:12px 0 0;font-size:clamp(28px,4vw,46px);line-height:1.05;letter-spacing:-.04em;font-weight:900;color:var(--ra-ink,#141b26)}
.stag-lede{margin:12px 0 0;color:#3d434b;font-size:15px;line-height:1.65;max-width:60ch}
.stag-schedule{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--ra-border,#e4e7eb);box-shadow:0 18px 54px rgba(20,27,38,.06)}
.stag-schedule li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 18px;border-bottom:1px solid #eef0f3}
.stag-schedule li:last-child{border-bottom:0}
.stag-schedule li.is-key{background:#fffdf6;border-left:3px solid var(--ra-red,#1f93dd)}
.stag-schedule span{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#6b7178}
.stag-schedule strong{font-size:14px;color:var(--ra-ink,#141b26);text-align:right}

.stag-main{max-width:1280px;margin:0 auto;padding:26px 24px 70px}
.stag-note{background:#fff;border:1px solid var(--ra-border,#e4e7eb);border-left:4px solid var(--ra-gold,#4bb8f2);padding:15px 18px;color:#3f3f46;font-size:14px;line-height:1.65;margin:18px 0}
.stag-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin:30px 0 16px;padding-bottom:11px;border-bottom:1px solid var(--ra-border,#e4e7eb)}
.stag-section-head h2{margin:0;font-size:22px;font-weight:900;letter-spacing:-.03em;color:var(--ra-ink,#141b26)}
.stag-section-head span{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#6b7178}
.stag-section-head--muted h2{color:#6b7178}

.stag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stag-card{background:#fff;border:1px solid var(--ra-border,#e4e7eb);box-shadow:0 14px 42px rgba(20,27,38,.06);display:flex;flex-direction:column}
.stag-card.is-next{border-color:rgba(31,147,221,.55);box-shadow:0 18px 48px rgba(31,147,221,.12)}
.stag-card-img{position:relative;display:block;aspect-ratio:4/3;background:#111;overflow:hidden}
.stag-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.stag-card:hover .stag-card-img img{transform:scale(1.035)}
.stag-lotno{position:absolute;top:10px;left:10px;background:rgba(20,27,38,.88);color:#fff;padding:5px 9px;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.stag-next-tag{position:absolute;top:10px;right:10px;background:var(--ra-red,#1f93dd);color:#fff;padding:5px 9px;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.stag-card-body{padding:15px;display:flex;flex-direction:column;gap:13px;flex:1}
.stag-card-body h3{margin:0;font-size:17px;line-height:1.24;font-weight:900;letter-spacing:-.03em}
.stag-card-body h3 a{color:var(--ra-ink,#141b26);text-decoration:none}
.stag-clock{background:#ffffff;border:1px solid #eef0f3;padding:10px 12px}
.stag-clock-label{display:block;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#6b7178}
.stag-clock strong{display:block;margin-top:3px;font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--ra-red,#1f93dd);font-variant-numeric:tabular-nums}
.stag-clock small{display:block;margin-top:2px;font-size:11px;color:#6b7178}
.stag-card-foot{display:flex;justify-content:space-between;align-items:end;gap:12px;border-top:1px solid #eef0f3;padding-top:12px;margin-top:auto}
.stag-price small{display:block;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#6b7178}
.stag-price strong{display:block;margin-top:3px;font-size:20px;font-weight:900;letter-spacing:-.03em;color:var(--ra-ink,#141b26)}
.stag-bid{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;background:var(--ra-ink,#141b26);color:#fff;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.stag-bid:hover{background:var(--ra-red,#1f93dd)}

.stag-closed{background:#fff;border:1px solid var(--ra-border,#e4e7eb)}
.stag-closed-row{display:grid;grid-template-columns:70px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid #eef0f3;text-decoration:none;color:inherit}
.stag-closed-row:last-child{border-bottom:0}
.stag-closed-row:hover{background:#ffffff}
.stag-closed-lot{font-size:12px;font-weight:900;color:#6b7178}
.stag-closed-name{font-size:14px;font-weight:800;color:var(--ra-ink,#141b26);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stag-closed-time{font-size:12px;color:#6b7178}
.stag-closed-state{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:#e4e7eb;color:#3d434b}
.stag-closed-state.is-sold{background:#dbeefb;color:#065f46}

@media(max-width:1000px){.stag-wrap{grid-template-columns:1fr}.stag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .stag-grid{grid-template-columns:1fr}
  .stag-card-foot{flex-direction:column;align-items:stretch;gap:10px}
  .stag-bid{width:100%}
  .stag-closed-row{grid-template-columns:56px minmax(0,1fr);row-gap:4px}
  .stag-closed-time,.stag-closed-state{grid-column:2;justify-self:start}
}

/* Pre-open banner and the "not open yet" card clock. */
.stag-opens{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;background:#fff;border:1px solid var(--ra-border,#e4e7eb);border-left:4px solid var(--ra-gold,#4bb8f2);padding:18px 20px;margin:18px 0}
.stag-opens-label{display:block;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--ra-red,#1f93dd)}
.stag-opens strong{display:block;margin-top:5px;font-size:19px;font-weight:900;letter-spacing:-.02em;color:var(--ra-ink,#141b26)}
.stag-opens small{display:block;margin-top:5px;font-size:13px;color:#6b7178}
.stag-opens-clock{text-align:right;flex:0 0 auto}
.stag-opens-clock span{display:block;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#6b7178}
.stag-opens-clock b{display:block;margin-top:3px;font-size:26px;font-weight:900;letter-spacing:-.03em;color:var(--ra-red,#1f93dd);font-variant-numeric:tabular-nums}
.stag-clock--soon strong{color:var(--ra-ink,#141b26);font-size:16px}
@media(max-width:640px){.stag-opens-clock{text-align:left}}

/* ── Arrow buttons ───────────────────────────────────────────────────────
   .btn-arrow reserves room on the right for its → glyph, but this sheet
   loads after app.css and its own .btn padding was winning, so the last
   letter sat under the arrow and got clipped by overflow:hidden. */
.btn.btn-arrow{padding-right:2.6rem}
.btn.btn-arrow::after{right:1.15rem}

/* ═══════════════════════════════════════════════════════════════════════
   LOT — COUNTDOWN
   ───────────────────────────────────────────────────────────────────────
   Four figures as four tiles. Previously they were one strip with dividers,
   which is why the last cell had no right border. Digits are tabular so the
   row never shifts as the numbers change, and the seconds tile breathes on a
   1s loop — no second timer in JS, so it cannot drift from the clock.
   ═══════════════════════════════════════════════════════════════════════ */
.circle-countdown-wrap{
  position:relative;overflow:hidden;
  border:1px solid #dbe7f1;border-radius:14px;
  background:linear-gradient(180deg,#f7fbfe 0%,#fff 70%);
  padding:16px 14px 18px;margin:0 0 16px;
}
.circle-countdown-wrap::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#1f93dd,#4bb8f2,#1f93dd);
  background-size:200% 100%;animation:lot-sheen 3.2s linear infinite;
}
@keyframes lot-sheen{0%{background-position:0 0}100%{background-position:200% 0}}

.circle-count-title{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.2em;
  font-size:10.5px;font-weight:600;color:#1573b4;margin:0 0 12px;text-align:center;
}
.flip-countdown{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  gap:8px!important;align-items:stretch!important;
}
.time-box{
  width:auto!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;gap:2px!important;
  background:#fff!important;border:1px solid #dbe7f1!important;
  border-radius:10px!important;padding:11px 4px 9px!important;
  box-shadow:0 1px 0 rgba(20,27,38,.04)!important;
}
.time-box .num{
  font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums;
  font-size:clamp(19px,4.4vw,25px)!important;line-height:1!important;
  font-weight:600!important;color:#141b26!important;letter-spacing:-.01em;
}
.time-box .label{
  font-family:var(--font-mono)!important;text-transform:uppercase;
  letter-spacing:.14em;font-size:8.5px!important;font-weight:600!important;
  color:#6b7178!important;
}
.time-box:last-child{border-color:#bfe3f8!important;background:#f5fbff!important}
.time-box:last-child .num{color:#1573b4!important;animation:lot-tick 1s ease-in-out infinite}
@keyframes lot-tick{0%,70%{opacity:1;transform:translateY(0)}82%{opacity:.55;transform:translateY(-1px)}100%{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .circle-countdown-wrap::before,.time-box:last-child .num{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE
   ───────────────────────────────────────────────────────────────────────
   Written against what the pages actually did at 390px: the two hero CTAs
   sized themselves to their labels and so sat at different widths, the lot
   breadcrumb broke a three-word event title across three lines, and the
   similar-vehicles panel covered half the screen.
   ═══════════════════════════════════════════════════════════════════════ */

/* Breadcrumb — one line that scrolls, rather than a stack of fragments. */
.lot-crumbs{
  flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.lot-crumbs::-webkit-scrollbar{display:none}
.lot-crumbs > *{flex:none;white-space:nowrap}

@media (max-width:640px){
  /* Hero CTAs — equal width, full bleed, so they read as a pair. */
  .hero-actions{display:grid!important;grid-template-columns:1fr;gap:10px!important}
  .hero-actions > a,.hero-actions > button{
    width:100%;justify-content:center;min-height:48px;
    padding:14px 16px;border-radius:12px;
  }
  .hero-search{flex-direction:column;padding:8px;border-radius:14px}
  .hero-search input,.hero-search button{width:100%;min-height:48px}
  .hero-title{font-size:clamp(30px,9vw,40px);letter-spacing:-.04em}
  .hero-copy{font-size:15.5px;line-height:1.6}

  /* The lot's four figures stay on one row — two rows of two reads as a
     table, not a clock — so the tiles get tighter instead. */
  .flip-countdown{gap:6px!important}
  .time-box{padding:9px 2px 7px!important;border-radius:9px!important}
  .time-box .num{font-size:19px!important}
  .time-box .label{font-size:7.5px!important;letter-spacing:.1em}
  .circle-countdown-wrap{padding:13px 10px 15px}

  /* Spec tiles go single file; two columns at 390px left values truncated. */
  .spec-grid{grid-template-columns:1fr!important;gap:8px}
  .spec-row{padding:10px 12px 10px 14px}

  /* The nudge becomes a strip at the bottom instead of a half-screen card. */
  .sv-pop{
    left:8px!important;right:8px!important;bottom:8px!important;
    width:auto!important;max-width:none!important;max-height:44vh;overflow:auto;
    border-radius:14px!important;
  }

  /* Anything tappable clears the 44px minimum. */
  .btn,.simple-header-phone,.lot-crumbs a{min-height:44px}
  .btn{padding-left:16px;padding-right:16px}
  .btn.btn-arrow{padding-right:2.4rem}
}

@media (max-width:400px){
  .time-box .num{font-size:17px!important}
  .time-box .label{font-size:7px!important}
}

/* ── Buttons — a little more life ─────────────────────────────────────────
   Same shapes, just a press response and a softer shadow, so a tap reads as
   a tap on touch where there is no hover to rely on. */
.btn{transition:transform .12s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{box-shadow:0 6px 16px rgba(31,147,221,.22)}
.btn-primary:hover{box-shadow:0 8px 22px rgba(31,147,221,.30)}
.secondary-cta{transition:background-color .18s ease, border-color .18s ease, transform .12s ease}
.secondary-cta:active{transform:translateY(1px)}

@media (prefers-reduced-motion: reduce){
  .btn,.secondary-cta{transition:none}
  .btn:active,.secondary-cta:active{transform:none}
}

/* Unearned stars stay in place but read as empty, so the row keeps its
   width and a four-star review is legible as four. */
.review-stars__off{color:#d3d7dd}