:root {
  --burgundy:#800020;
  --gold:#FFD700;
  --ink:#111;
  --ink-2:#333;
  --bg:#f9f9f9;
  --card:#ffffff;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Base */
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
.container { max-width:1100px; margin:0 auto; padding:24px; }

/* Typography */
.h2 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight:700; margin:0; color:#1a1a1a; }
.muted { color:#6c757d; font-size:.9rem; margin:0; }

/* HERO */
.hero {
  background-color:#800020;
  background-image:url('assets/vsop-hero.jpg'); /* resolves to /vsop/assets/... */
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
  color:#fff;
  padding:3rem 0;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(128,0,32,.95), rgba(128,0,32,.85));
  z-index:1;
}
.hero .hero__inner{ position:relative; z-index:2; text-align:center; }
.hero h1{ font-size:clamp(1.5rem,4vw,2.5rem); font-weight:800; margin:0 0 1rem; }
.hero p{ font-size:clamp(1rem,2vw,1.25rem); margin:0 0 1.5rem; opacity:.95; }

/* Buttons */
.btn{
  display:inline-block; background:var(--gold); color:var(--ink);
  font-weight:800; padding:12px 18px; border-radius:999px; text-decoration:none;
  border:2px solid #e6c533; box-shadow:0 6px 16px rgba(0,0,0,.15);
  transition:transform .12s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.btn--burgundy{
  background:linear-gradient(135deg, var(--burgundy) 0%, #a0002a 100%);
  color:#fff; border:none; padding:14px 28px; border-radius:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; width:100%; margin-top:auto;
}

/* Meta pills */
.meta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:10px; font-weight:700; position:relative; }
.meta-pill{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:8px 12px; border-radius:999px; white-space:nowrap; }
@media (max-width:640px){
  .meta-row{ justify-content:flex-start; gap:10px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding:8px 2px; margin-left:-8px; margin-right:-8px; }
  .meta-pill{ flex:0 0 auto; scroll-snap-align:center; margin:0 8px; }
  .meta-row--hint::after{
    content:"← swipe →"; position:absolute; left:50%; bottom:-18px; transform:translateX(-50%);
    font-size:12px; letter-spacing:.5px; color:rgba(255,255,255,.85); text-shadow:0 1px 2px rgba(0,0,0,.35);
    opacity:0; animation:sb-hint-fade 2.8s ease forwards;
  }
  @keyframes sb-hint-fade{ 0%{opacity:0; transform:translate(-50%,4px);} 15%{opacity:1; transform:translate(-50%,0);} 70%{opacity:1;} 100%{opacity:0;} }
}

/* Countdown */
.countdown{
  background:#fff; border:1px solid #eee; margin:-28px auto 24px; width:min(100%,900px);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; text-align:center; font-weight:600;
  font-variant-numeric: tabular-nums;
}
.countdown strong{ color:var(--burgundy); }
.countdown.is-closed{ background:#fff7d9; border-color:#f1d06a; color:#111; }
.countdown.is-closed strong{ color:#800020; }

/* Grid */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.col-7{ grid-column:span 7; }
.col-5{ grid-column:span 5; }
.stack{ display:flex; flex-direction:column; gap:18px; }
@media (max-width:900px){ .col-7,.col-5{ grid-column:1 / -1; } }

/* Cards */
.card{
  background:linear-gradient(145deg, #fefefe 0%, #f8f9fa 100%);
  border:1px solid #e8eaed; border-radius:20px;
  box-shadow:0 8px 32px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  overflow:hidden; transition:all .4s cubic-bezier(.25,.46,.45,.94); display:flex; flex-direction:column; position:relative;
}
.card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9); border-color:rgba(128,0,32,0.2); }

.card__media{
  position:relative; aspect-ratio:3/2; /* match your 1200x800 images */
  overflow:hidden; background:#fff; /* white to avoid grey bars */
}
.card__img{
  width:100%; height:100% !important; object-fit:contain !important; display:block; /* show FULL image, no crop */
  transition:transform .6s cubic-bezier(.25,.46,.45,.94);
  filter:contrast(1.05) saturate(1.08);
}
.card:hover .card__img{ transform:scale(1.03); }

.card__body{ padding:28px 24px; background:linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,249,250,0.95) 100%); backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:12px; }
.bullets{ list-style:none; margin:16px 0; padding:0; }
.bullets li{ position:relative; padding:6px 0 6px 20px; font-size:.875rem; color:#495057; }
.bullets li::before{ content:'◆'; position:absolute; left:0; top:6px; color:var(--burgundy); font-size:.75rem; font-weight:bold; }

.price{
  font-size:clamp(1.375rem,3vw,1.625rem); font-weight:800; color:var(--burgundy);
  margin:16px 0 20px 0; letter-spacing:-.02em; position:relative;
}
.price::after{ content:''; position:absolute; bottom:-4px; left:0; width:30px; height:2px; background:linear-gradient(90deg, var(--burgundy), var(--gold)); border-radius:2px; }

/* Form controls */
.row{ display:flex; gap:12px; margin:20px 0 24px; align-items:end; }
.row label{ font-size:.875rem; font-weight:600; color:#495057; display:flex; flex-direction:column; gap:6px; flex:1; }
select, input[type="number"]{
  padding:12px 16px; border:2px solid #e9ecef; border-radius:12px; background:rgba(255,255,255,.9);
  font:inherit; color:#343a40; transition:all .3s ease; backdrop-filter:blur(10px);
}
select:focus, input[type="number"]:focus{ outline:none; border-color:var(--burgundy); background:#fff; box-shadow:0 0 0 3px rgba(128,0,32,0.1); }

@media (max-width:768px){
  .card__body{ padding:20px 18px; }
  .row{ flex-direction:column; gap:16px; }
  .row label{ flex:none; }
}

/* Footer note */
.closer{ text-align:center; padding:36px 24px; border-top:1px dashed #e7e7e7; margin-top:24px; }
.closer .quote{ font-weight:800; margin-bottom:10px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  .card:hover{ transform:none; }
}