/* Global */
*,
*::before,
*::after{ box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }

:root{
  --red:#ed1f25; --red-dark:#6c0e12;
  --blue:#253570; --blue-mid:#1b2a59; --blue-dark:#0a1f3f;
  --gold:#f9ec17; --gold-light:#fff36a;
  --muted:#8ea0c5; --ink:#0b1220;
  --glass:rgba(255,255,255,.74);
  --shadow:0 12px 30px rgba(0,0,0,.25);
}

/* ---------- HERO WITH VIDEO (TALLER) ---------- */
.hero-with-video{ position: relative; overflow: hidden; min-height: clamp(360px, 60vh, 760px); }
.hero-with-video .hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.7) saturate(1.05);
}
.hero-with-video .hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(80% 60% at 50% 20%, transparent 0%, rgba(0,0,0,.35) 100%),
              linear-gradient(120deg, rgba(10,31,63,.55), rgba(27,42,89,.55));
}
.shop-hero{
  background: linear-gradient(120deg, var(--blue-dark), var(--blue-mid));
  color:#fff; padding: clamp(28px, 7vh, 72px) 0 clamp(16px, 4vh, 40px);
  box-shadow: var(--shadow);
}
.shop-hero .wrap{ width:min(1100px,92%); margin:auto; position:relative; z-index:1; }
.shop-hero h1{ margin:0; font-size: clamp(28px, 4vw, 44px); letter-spacing:.2px; }
.shop-hero p{ margin:.5rem 0 0; color: color-mix(in oklab, #fff 82%, var(--gold)); }
.hero-cta{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-with-video .hero-video{ display:none; }
  .hero-with-video .hero-overlay{ background: linear-gradient(120deg, rgba(10,31,63,.8), rgba(27,42,89,.8)); }
}

/* ---------- MANDATORY BANNER (RESPONSIVE) ---------- */
.mandatory-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  overflow-wrap:anywhere; word-break:break-word;
  background:#fff7f7; border:1px solid #ffd1d1; color:#5f0d0f;
  border-radius:12px;
  padding:12px 16px;
  margin:14px 0 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  width:100%;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
}
.mandatory-banner a{ font-weight:800; color:#5f0d0f; text-decoration:underline; }
@media (max-width: 560px){
  .mandatory-banner{
    border-radius:10px;
    padding:10px 12px;
    gap:8px;
  }
  .mandatory-banner a{
    display:inline-block;
    width:100%;
  }
}

/* ---------- GRID ---------- */
.shop-wrap{ width:min(1100px,92%); margin:auto; padding: 18px 0 34px; }
.shop-grid{ display:grid; gap:16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .shop-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .shop-grid{ grid-template-columns: 1fr; } }

/* ---------- CARD: GRASS BG | IMAGE TOP | META BELOW ---------- */
/* Using your background path: /assets/bg/1.jpg */
.shop-card{
  background: #ffffff url('/assets/bg/grass.png') center/cover no-repeat;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px; box-shadow: 0 12px 28px rgba(0,0,0,.12);
  overflow:hidden;
  display:grid;
  grid-template-areas:
    "thumb"   /* image first */
    "meta"    /* meta below image */
    "select"; /* selector last */
  grid-template-rows: minmax(160px, 1fr) auto auto;
  transition: transform .18s ease, box-shadow .2s ease;
  position:relative;
}
.shop-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0,0,0,.16); }

/* Photo area (top) */
.shop-card .thumb{
  grid-area: thumb;
  background: transparent;       /* no overlay behind images */
  display:grid; place-items:center;
  padding: 0 !important;
  max-height: 350px;
}
.shop-card .thumb img{
  width:100%; height:100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.18));
}

/* Glass on text rows so they read over grass */
.shop-card .meta,
.shop-card .select{
  background: var(--glass);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Meta/content row (middle) */
.shop-card .meta{
  grid-area: meta;
  padding:14px; display:grid; gap:6px; align-content:start;
}
.shop-card .meta h3{ margin:0; font-size: clamp(16px,1.8vw,20px); font-weight:900; color: var(--blue-dark); }
.shop-card .price{ font-weight:900; color: var(--red); letter-spacing:.2px; }
.shop-card .desc{ font-size: 13px; color: #263a66; }
.shop-card .badges{ display:flex; flex-wrap:wrap; gap:8px; }
.shop-card .pill{
  padding:3px 8px; border-radius:999px; font-size:11px; font-weight:800;
  background:#f0f4ff; color:#24355f; border:1px solid rgba(0,0,0,.06);
}
.shop-card .pill.bundle{ background:#fff4cc; color:#4a3a00; border-color:#f3e299; }
.shop-card .pill.mandatory{ background:#ffe3e3; color:#6b0000; border-color:#f5b7b7; }

/* Subtle highlight frame for the training kit card */
.mandatory-item{
  outline: 3px solid rgba(237,31,37,.12);
  box-shadow: 0 18px 38px rgba(237,31,37,.16);
}

.shop-grid .mandatory-item{
  grid-column: 1 / -1;   /* spans all columns */
}
.mandatory-item .thumb img{
  max-height: 400px !important;
}


/* Selector row (bottom) */
.shop-card .select{
  grid-area: select;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-top:1px solid rgba(0,0,0,.06);
}
.qty{
  display:flex; align-items:center; gap:6px;
  background:#fff; border:1px solid rgba(0,0,0,.1);
  border-radius:12px; padding:6px 8px;
}
.qty input[type="number"]{ width:64px; appearance: textfield; border:0; outline:0; text-align:center; font-weight:800; }
.qty button{ border:0; background:transparent; font-weight:900; cursor:pointer; padding:4px 6px; }
.sel{ display:flex; align-items:center; gap:8px; }
.sel input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--red); }

/* Mobile tweaks */
@media (max-width: 640px){
  .shop-card{
    grid-template-rows: minmax(140px, 1fr) auto auto;
  }
  .shop-card .thumb{ min-height: 140px; padding: 0 !important; }
  .shop-card .meta h3{ font-size: clamp(16px, 4.4vw, 20px); }
}

/* ---------- ORDER PANEL (NOT STICKY) ---------- */
.order-panel{
  position: static;
  bottom: auto;
  z-index: auto;
  margin-top: 22px;
}
.order-card{
  width:100%; background: color-mix(in oklab, #fff 86%, var(--blue));
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px; box-shadow: var(--shadow);
  padding: 16px; display:grid; gap:10px;
}
.order-card h2{ margin:0; font-size:18px; color: var(--blue-dark); }
.order-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width:768px){ .order-grid{ grid-template-columns:1fr; } }
.order-note{
  font-size: 13px;
  color:#5f0d0f;
  background:#fff7f7;
  border:1px dashed #ffd1d1;
  border-radius:10px;
  padding:8px 10px;
}

.form-row{ display:grid; gap:6px; }
label{ font-size:12px; font-weight:800; color:#24355f; }
input, select{
  padding:10px 12px; border:1px solid rgba(0,0,0,.1); border-radius:12px; font: inherit;
  background:#fff; color:#0b1220;
}
input[type="date"]{ color-scheme: light; }

.total{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:10px; border-top:1px dashed rgba(0,0,0,.12);
  color: var(--blue-dark);
}
.total strong{ font-size:18px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:999px; cursor:pointer; font-weight:900; text-decoration:none;
  background: linear-gradient(180deg, var(--gold), var(--gold-light) 85%);
  border: 2px solid var(--gold);
  color: #1a1400 !important;
}
.btn.secondary{ background:#fff; border:1px solid rgba(0,0,0,.1); color: var(--blue-dark) !important; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* ---------- SHOW PAGE ---------- */
.item-hero{
  background: linear-gradient(120deg, var(--blue-dark), var(--blue-mid));
  color:#fff; padding: 24px 0;
}
.item-wrap{ width:min(1000px,92%); margin:auto; display:grid; gap:18px;
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width:980px){ .item-wrap{ grid-template-columns: 1fr; } }
.item-media{ background:#0a1f3f; border-radius:18px; overflow:hidden; display:grid; place-items:center; padding:10px; }
.item-media img{ width:100%; height:auto; object-fit:contain; filter: drop-shadow(0 24px 44px rgba(0,0,0,.22)); }
.item-meta h1{ margin:0 0 6px; font-size: clamp(24px, 4vw, 40px); }
.item-price{ font-weight:900; color: var(--gold-light); }
.item-desc{ color: color-mix(in oklab, #fff 85%, #cfd7ee); }
.item-bundle{
  margin-top:12px; background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:12px;
}
.item-bundle h3{ margin:0 0 6px; font-size:14px; letter-spacing:.06em; text-transform:uppercase; opacity:.9; }
.item-bundle ul{ margin:0; padding-left: 18px; }
.item-bundle li{ margin:4px 0; }

/* ---------- HELPERS ---------- */
.muted{ color: var(--muted); }


/* ===== Training Kit background video ===== */
#training-kit {
  position: relative;
  overflow: hidden;
  color: #fff; /* better contrast over video */
}
#training-kit .meta {
  background: transparent;
    backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}
#training-kit .meta h3{
  color: #fff;
}
/* Absolutely position the background video behind the card content */
#training-kit .card-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#training-kit .bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Soft gradient so text and controls stay readable */
#training-kit .bg-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.55) 60%,
    rgba(0,0,0,0.65) 100%
  );
}

/* Lift content above the video layer */
#training-kit .meta,
#training-kit .select,
#training-kit h3,
#training-kit .price,
#training-kit .badges {
  position: relative;
  z-index: 1;
}

/* Hide the static thumbnail only for the Training Kit card */
#training-kit .thumb {
  display: none;
}

/* Ensure buttons/pills remain visible over dark background */
#training-kit .btn,
#training-kit .pill {
  position: relative;
  z-index: 1;
}

/* Respect reduced motion preferences: don’t play the video */
@media (prefers-reduced-motion: reduce) {
  #training-kit .bg-video { display: none; }
  #training-kit .bg-video-overlay {
    background: rgba(0,0,0,0.55);
  }
}