/* styles.css — Shopify/Parijan-style layout (clean white, editorial serif, hairlines, square chips) */

/* Load a high-end serif + clean sans */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap");

:root{
  --bg:#fff;
  --text:#111;
  --muted:#6e6e6e;
  --line:#e9e9e9;

  --serif:"Playfair Display", ui-serif, Georgia, serif;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  --max: 1200px;

  --chipBorder:#2b2b2b;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans)}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ✅ Safe image behavior everywhere (prevents odd iPhone scaling) */
img{max-width:100%;height:auto}

/* TOP ANNOUNCEMENT BAR */
.announce{
  background:#0b0b0b;
  color:#fff;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:10px 0;
  text-align:center;
}

/* HEADER */
.header{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.headerRow{
  height:76px;
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* left nav | centered logo | right icons */
  align-items:center;
  gap:18px;
}
.navLeft, .navRight{
  display:flex;
  align-items:center;
  gap:26px;
}
.navLeft a, .navRight a{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
}
.logo{
  font-family:var(--serif);
  font-size:26px;
  letter-spacing:.28em;
  font-weight:500;
  text-align:center;
}

/* HERO — big editorial */
.hero{
  position:relative;
  background:#efefef;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.heroInner{
  min-height:460px;
  display:grid;
  grid-template-columns: 1.05fr .95fr; /* text left | image right */
  align-items:center;
  gap:22px;
  padding:34px 0;
}
.heroCopy .kicker{
  font-size:13px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#333;
  margin-bottom:18px;
}
.heroCopy h1{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.10em;
  margin:0 0 16px;
  font-size:78px;
  line-height:.92;
}
.heroCopy .sub{
  font-size:14px;
  color:var(--muted);
  letter-spacing:.02em;
  max-width:52ch;
  margin-bottom:22px;
}

/* Parijan-style button (rectangular, not pill) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 30px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  cursor:pointer;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
}
.btn:hover{opacity:.92}
.btnOutline{
  background:#fff;
  color:#111;
}

/* Right hero image area (you can swap for real image later) */
.heroRight{
  display:flex;
  justify-content:flex-end;
}
.heroImageBox{
  width:min(520px, 100%);
  height:420px;
  background:#ddd;
  border:1px solid var(--line);
  overflow:hidden;
}
.heroImageBox img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* CATEGORY CHIPS ROW (square outline) */
.chipsRow{
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.chip{
  border:1px solid var(--chipBorder);
  background:#fff;
  padding:10px 12px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  font-weight:700;
}
.chip.active{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* SECTION HEADINGS */
.section{
  padding:44px 0;
}
.sectionHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:18px;
}
.sectionHead h2{
  font-family:var(--serif);
  font-size:46px;
  letter-spacing:.08em;
  font-weight:500;
  margin:0;
}
.viewAll{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
}
.viewAll:hover{opacity:.92}

/* PRODUCT GRID (4 across like screenshot) */
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}

/* CARD */
.card{
  background:#fff;
}
.cardImg{
  position:relative;
  height:380px;
  background:#f6f6f6;
  overflow:hidden;
}
.cardImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Red SAVE badge (top-left) */
.badge{
  position:absolute;
  top:12px;
  left:12px;
  background:#d80000;
  color:#fff;
  padding:6px 10px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
}

/* QUICK ADD overlay like Parijan */
.quickAdd{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  background:#111;
  color:#fff;
  border:none;
  padding:12px 18px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:800;
  cursor:pointer;

  opacity:0;
  transition: opacity .18s ease;
}
.card:hover .quickAdd{opacity:1}

/* Card text area */
.cardBody{
  padding:14px 0 0;
  text-align:center; /* Parijan cards are centered */
}
.cardTitle{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
}
.cardMeta{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.cardPrice{
  margin-top:10px;
  font-size:12px;
  color:#111;
  font-weight:800;
}

/* Buttons row under card (optional) */
.quickRow{
  display:flex;
  gap:10px;
  margin-top:12px;
  justify-content:center;
}
.quickRow .btn{
  padding:12px 14px;
  font-size:10px;
}

/* SHOP BY CATEGORY tiles (4 wide) */
.tiles{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
.tile{
  position:relative;
  height:300px;
  background:#eee;
  overflow:hidden;
  cursor:pointer;
}
.tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tile .overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.18);
}
.tile .label{
  position:absolute;
  left:22px;
  bottom:22px;
  color:#fff;
  font-size:16px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:900;
}

/* FAQ like screenshot (center box) */
.faqWrap{display:flex;justify-content:center}
.faqBox{
  width:min(860px, 100%);
  border:1px solid var(--line);
  background:#f7f7f7;
  padding:18px 20px;
}
details{
  border-top:1px solid var(--line);
  padding:16px 0;
}
details:first-child{border-top:none}
summary{
  cursor:pointer;
  font-weight:700;
  font-size:14px;
}
details p{margin:10px 0 0;color:var(--muted);font-size:13px}

/* FOOTER like Parijan (black area) */
.footer{
  margin-top:40px;
  background:#0b0b0b;
  color:#fff;
}
.footerInner{
  padding:46px 0;
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap:24px;
}
.footer h3{
  font-family:var(--serif);
  letter-spacing:.22em;
  font-weight:500;
  margin:0 0 14px;
}
.footer a{
  display:block;
  color:#fff;
  opacity:.88;
  margin:10px 0;
  font-size:13px;
}
.footer a:hover{opacity:1}
.footerSmall{
  border-top:1px solid rgba(255,255,255,.14);
  padding:14px 0;
  color:rgba(255,255,255,.75);
  font-size:13px;
}

/* ✅ VEHICLE DETAILS PAGE — badge must be positioned relative to the photo box
   This fixes the issue where the SAVE badge goes to the top-left of the entire page.
   Safe: only applies if your vehicle page uses any of these wrappers/classes. */
.vehicleMain,
.vehicleGallery,
.vehicleMedia,
.gallery,
.mainPhoto,
.mainImage,
.mainImageWrap,
.photoWrap,
.photoBox,
.slider,
.carousel,
.stage {
  position:relative;
}

/* ✅ If your detail page uses a different badge class (kept compatible) */
.vehicleMain .badge,
.vehicleGallery .badge,
.vehicleMedia .badge,
.gallery .badge,
.mainPhoto .badge,
.mainImage .badge,
.mainImageWrap .badge,
.photoWrap .badge,
.photoBox .badge,
.slider .badge,
.carousel .badge,
.stage .badge {
  top:12px;
  left:12px;
  z-index:10;
}

/* ✅✅ REAL iPhone fix: grid children must be allowed to shrink.
   Without min-width:0, iOS Safari can force overflow and push the right arrow off-screen. */
.vehicleGrid,
.vehicleGrid > div,
.gallery,
.card{
  min-width: 0;
}

/* ✅✅ MOBILE VEHICLE PAGE FIX (iPhone)
   Fixes the actual issue: horizontal overflow pushes the right arrow off-screen.
   We keep everything within the viewport and keep arrows inside the image area. */
@media (max-width: 820px){

  /* ✅ Kill any accidental horizontal overflow (root iPhone issue) */
  html, body{
    overflow-x:hidden !important;
    width:100%;
    max-width:100%;
  }

  /* ✅ Containers should never be wider than the viewport on mobile */
  .container{
    width:100%;
    max-width:100%;
    padding-left:16px;
    padding-right:16px;
  }

  /* ✅ Make gallery never exceed screen width */
  .vehicleMain,
  .vehicleGallery,
  .vehicleMedia,
  .gallery,
  .mainPhoto,
  .mainImage,
  .mainImageWrap,
  .photoWrap,
  .photoBox,
  .slider,
  .carousel,
  .stage{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  /* ✅ Main image should fill the stage (prevents iOS contain-layout weirdness) */
  #mainImg{
    width:100%;
    height:62vh;          /* tuned for iPhone Safari */
    max-height:520px;
    object-fit:cover;     /* keeps stage filled + prevents odd sizing */
    display:block;
  }

  /* ✅ Ensure arrow buttons are visible and inside the stage */
  #prevBtn,
  #nextBtn{
    width:48px !important;
    height:48px !important;
    font-size:18px;
    background:rgba(255,255,255,0.95);
    border:1px solid rgba(0,0,0,0.15);
    box-shadow:0 8px 24px rgba(0,0,0,0.15);
    border-radius:12px;
    max-width:90%;
  }

  /* ✅ Pull arrows inward + respect iPhone safe areas */
  #prevBtn{
    left: max(16px, env(safe-area-inset-left)) !important;
  }
  #nextBtn{
    right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* ✅ Make thumbs scroll horizontally nicely */
  #thumbs{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
}

/* RESPONSIVE */
@media (max-width: 1100px){
  .heroInner{grid-template-columns:1fr; min-height:auto}
  .heroCopy h1{font-size:58px}
  .grid{grid-template-columns: repeat(2, 1fr)}
  .tiles{grid-template-columns: repeat(2, 1fr)}
  .footerInner{grid-template-columns:1fr}
}
@media (max-width: 650px){
  .grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .navLeft{display:none}
  .heroCopy h1{font-size:46px}
}