:root{
  /* === Palette === */
  --murrey:#89023E;     /* deep accent */
  --oldrose:#CC7178;    /* brand primary */
  --misty1:#FFD9DA;     /* light bg */
  --misty2:#F3E1DD;     /* page bg */
  --teagreen:#C7D9B7;   /* subtle highlight */

  /* === Site tokens using the palette === */
  --bg:var(--misty2);
  --bg-soft:var(--misty1);
  --surface:#ffffff;
  --ink:var(--murrey);
  --muted:#8E5D63;                /* derived neutral within palette family */
  --brand:var(--oldrose);
  --accent:var(--teagreen);
  --ring: rgba(204,113,120,.25);  /* brand glow */
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* header / nav */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem;
  background: linear-gradient(180deg, var(--bg-soft) 0%, color-mix(in oklab, var(--bg) 70%, white 30%) 100%);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid color-mix(in oklab, var(--oldrose) 20%, white 80%);
}
.brand{font-weight:700; text-decoration:none; color:var(--murrey); font-size:1.125rem;}
.menu-btn{
  margin-left:auto; border:0; background:transparent; font-size:1.5rem; line-height:1; color:var(--murrey);
}
.nav{ display:flex; gap:1rem; }
.nav[data-collapsed]{ display:none; }
.nav a{
  text-decoration:none; color:var(--murrey);
  padding:.3rem .6rem; border-radius:10px;
}
.nav a[aria-current="page"]{
  background: color-mix(in oklab, var(--teagreen) 35%, white 65%);
  border:1px solid color-mix(in oklab, var(--teagreen) 45%, var(--bg) 55%);
}

/* containers */
.container{ padding:1rem; max-width:980px; margin:0 auto; }
.prose p{ line-height:1.6; color:color-mix(in oklab, var(--murrey) 60%, black 12%, white 28%); }

/* download CTA */
.download-cta{
  padding:1.25rem 1rem .5rem;
  text-align:center;
  margin-bottom:1.5rem; /* space before slideshow */
  background: color-mix(in oklab, var(--bg-soft) 50%, white 50%);
  border-bottom:1px solid color-mix(in oklab, var(--oldrose) 15%, white 85%);
}
.tagline{ color:color-mix(in oklab, var(--murrey) 60%, white 40%); }

.btn{
  display:inline-block; margin-top:.75rem;
  padding:.65rem 1rem; border-radius:999px;
  background:var(--brand); color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 6px 20px var(--ring);
  border:1px solid color-mix(in oklab, var(--brand) 60%, black 10%, white 30%);
}
.btn:hover{ filter:brightness(.96); }
.btn.btn-secondary{ background:var(--murrey); }

/* ==== SLIDER (scroll-snap, no drift) ==== */
.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh; /* change to 80vh if you want shorter */
  background: color-mix(in oklab, var(--bg) 85%, white 15%);
}

.slides {
  display: flex;
  overflow-x: auto;       /* scrollable track */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}
.slides::-webkit-scrollbar { display:none; } /* hide scrollbar on mobile */

.slide {
  flex: 0 0 100%;         /* exactly one viewport per slide */
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: color-mix(in oklab, var(--bg) 92%, white 8%);
}

.slide img {
  max-width: 100%;
  max-height: 100vh;      /* never taller than screen */
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;    /* preserve proportions */
  background: transparent;
}

/* controls */
.control{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:1px solid color-mix(in oklab, var(--brand) 40%, white 60%);
  background: color-mix(in oklab, var(--bg-soft) 70%, white 30%);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  font-size:28px; line-height:44px; color:var(--murrey);
}
.control.prev{ left:.5rem; }
.control.next{ right:.5rem; }

/* dots */
.dots{ display:flex; justify-content:center; gap:.5rem; padding:.75rem 0 1rem; }
.dots button{
  width:8px; height:8px; border-radius:999px; border:none;
  background: color-mix(in oklab, var(--brand) 18%, white 82%);
}
.dots button[aria-selected="true"]{
  background: var(--brand);
  width:22px;
}

/* product cards */
.card-grid{ list-style:none; padding:1rem; margin:0; display:grid; grid-template-columns:1fr; gap:1rem; }
.card{
  border:1px solid color-mix(in oklab, var(--brand) 12%, white 88%);
  border-radius:var(--radius);
  overflow:hidden; background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.card img{ width:100%; display:block; }
.card-body{ padding:1rem; }

/* footer */
.site-footer{
  text-align:center; padding:2rem 1rem; color:var(--muted);
  background: color-mix(in oklab, var(--bg) 92%, white 8%);
  border-top:1px solid color-mix(in oklab, var(--oldrose) 12%, white 88%);
}

/* accessibility helpers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* desktop tweaks */
@media (min-width:780px){
  .menu-btn{ display:none; }
  .nav{ display:flex !important; margin-left:auto; }
  .card-grid{ grid-template-columns:repeat(3,1fr); }
}