/* =========================== 
   Design Tokens
=========================== */
:root{
  --accent:#5dd6b7;
  --accent-dark:#1f3a33;
  --bg:#0b0c0f;
  --text:#e6eaf2;
  --muted:#a9b0bc;
  --line:#242730;

  --container:1200px;
  --header-gutter:clamp(18px,3vw,36px);

  /* Hero sizes */
  --fs-hero: clamp(2.8rem, 6vw + 1rem, 5.5rem);
  --fs-tag:  clamp(1.3rem, 1.2vw + 1rem, 1.8rem);

/* Product Card Tokens */

  --card-padding: 14px 16px;
  --card-radius: 18px;
  --card-max-width: 360px;

  --card-img-width: 85%;
  --card-img-radius: 10px;

  --header-h: clamp(56px, 9vh, 92px);
  --footer-h: clamp(52px, 6vh, 80px);   /* adjust if your footer feels cramped */
}

html,
body{
  max-width: 100%;
  overflow-x: hidden;
}

/* ===========================
   Base
=========================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg);
  display:flex; flex-direction:column;
}
img{max-width:100%;display:block}

.container{max-width:var(--container);margin-inline:auto;padding-inline:1rem}
.container--edge{width:100%;max-width:none;padding-inline:var(--header-gutter)}

/* ===========================
   Header (logo left, nav right)
=========================== */
.header{background:var(--accent-dark);color:var(--text);border-bottom:1px solid rgba(0,0,0,.25)}
.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.8rem 0;
  gap:1rem;
}
.brand{
  display:flex;align-items:center;text-decoration:none;color:var(--text);
  margin-left:0.5rem;
}
.brand-logo{width:46px;height:46px;object-fit:contain}

.nav{
  display:flex;gap:.5rem;
  margin-left:auto;
  margin-right:0.5rem;
}

/* ===========================
   Main (hero flush to footer)
=========================== */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  margin-bottom:0;
  padding-bottom:0;
}

/* Product pages: make main content push footer down */
body.page-product main.product-wrap{
  flex: 1;
}

/* UNIVERSAL: any direct <main> child should expand and push footer down */
body > main{
  flex: 1;
}

/* ===========================
   Hero (with blur + top anchor)
   Full-bleed & per-page background
=========================== */
.hero{
  position:relative;
  flex:1;
  display:grid;
  overflow: hidden; /* clips blur so footer seam stays crisp */
  grid-template-rows:auto auto;
  align-items:center;
  justify-items:center;
  padding-block:2.5rem 0;
  color:var(--text);
  min-height:100vh; /* fill viewport so footer hugs underneath */
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to bottom, rgba(31,58,51,.45), rgba(0,0,0,.35)),
    url('../img/hero-bg.jpg'); /* Default (homepage) */
  background-position:center 20%;
  background-size:cover;
  filter:blur(6px) brightness(0.9);
  z-index:0;
}

.hero-inner,
.hero-text,
.hero-actions{
  position:relative;
  z-index:1; /* keep content above blur */
}

.hero-inner{
  width:100%;
  display:grid;
  grid-template-rows:auto auto;
  row-gap:1.25rem;
}

/* Index only: reduce spacing between hero text and the card row */
body.page-index .hero-inner{ row-gap: 0.6rem; }

.hero-text{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  text-align:center;
}
.hero-title{
  font-size:var(--fs-hero); font-weight:900; letter-spacing:.3px;
  margin:0; white-space:nowrap;
}
.hero-tagline{font-size:var(--fs-tag); font-weight:800; margin:0}
.hero-sub{
  color:var(--muted);
  margin:0;
  font-weight:bold;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
}

/* Paragraph readability (hero + content) */
.hero-text p,
.content p,
.about-section p{
  font-weight:500; /* subtle boldness */
  text-shadow:0 1px 3px rgba(0,0,0,0.55);
}

/* ===========================
   Slider row (CSS Grid: prev | card | next)
   =========================== */
.hero-actions{
  display:grid;
  grid-template-columns: auto minmax(320px, 460px) auto;
  align-items:center;
  justify-content:center;
  column-gap:2rem;
  min-height:auto;
  padding-inline:1rem;
  margin-bottom:0;
}
.cta-card{
  grid-column:2;
  display:none;
  opacity:0; pointer-events:none;
  transform:scale(.98);
  transition:opacity .25s ease, transform .25s ease;

  width:100%;
  padding: var(--card-padding);
  max-width: var(--card-max-width);

  gap:.7rem; justify-items:center; text-align:center;
  border:1px solid #d8d8c8; border-radius: var(--card-radius);
  background:#fdfaf3; color:#1f3a33; text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.cta-card.is-active{
  display:grid;
  opacity:1; transform:scale(1);
  pointer-events:auto;
}
.cta-thumb{
  width: var(--card-img-width);
  height: auto;
  border-radius: var(--card-img-radius); object-fit:cover;
  border:1px solid #d8d8c8; background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
/* Arrows left/right columns */
.carousel-btn{
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9);
  border:none; border-radius:50%;
  width:44px; height:44px; font-size:1.6rem; cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.carousel-btn:hover{background:#fff}
.carousel-btn.prev{grid-column:1}
.carousel-btn.next{grid-column:3}

/* ===========================
   About Page (image wrap variants)
=========================== */
.about-section{margin-top:2rem}
.about-main{max-width:950px;margin:0 auto}

/* Photo floated on left inside the bio paragraph */
.about-photo--left{
  float:left;
  width:30%;
  max-width:200px;
  min-width:150px;
  margin:0 1.25rem 1rem 0; /* space to the right + bottom */
  border-radius:1rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  display:block;
}

/* Optional: right-wrap variant kept for future use */
.about-photo--wrap{
  float:right;
  width:32%;
  max-width:220px;
  min-width:160px;
  margin:0 0 1rem 1.25rem;
  border-radius:1rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  display:block;
}

@media (max-width:720px){
  .about-photo--left,
  .about-photo--wrap{
    float:none;
    display:block;
    margin:0 auto 1rem;
    width:60%;
    max-width:220px;
  }
}

/* ===========================
   Footer (styled)
=========================== */
.footer{
  text-align:center;
  padding:1rem 0;
  background:var(--accent-dark);
  color:var(--text);
  margin-top:0;
  font-size:1.5rem;
  font-style:italic;
  font-weight:bold;

  /* UNIVERSAL: defined seam above footer */
  border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -10px 24px rgba(0,0,0,.35);
}

/* =======================================================================
   DOWNLOADS PAGE EXTRAS (scoped to body.downloads so other pages are safe)
   ======================================================================= */
body.downloads .downloads{margin-top:2rem}
body.downloads .cabinet{
  border-radius:16px;
  background:linear-gradient(180deg,#faf6ed 0%,#f3ecdd 100%);
  color:#3a342b;
  border:1px solid rgba(121,96,67,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 20px 40px rgba(25,18,4,.2);
  overflow:hidden;
}
body.downloads .cabinet details{border-bottom:1px solid rgba(121,96,67,.18)}
body.downloads .cabinet details:last-of-type{border-bottom:none}
body.downloads .cabinet summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.1rem 1.1rem 1.1rem 3.25rem;
  font-weight:900;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:.3px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg,#fff5e2,#f0e6d2) border-box;
  border-bottom:1px solid rgba(121,96,67,.18);
  text-shadow:0 1px 0 #fff,0 2px 0 rgba(255,255,255,.7),0 3px 10px rgba(104,84,58,.25);
  user-select:none;
}
body.downloads .cabinet summary::-webkit-details-marker{display:none}
body.downloads .cabinet summary::before{
  content:"";position:absolute;left:1.2rem;top:50%;translate:0 -50%;
  width:1.25rem;height:1.25rem;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff 0%,#e4d7c4 55%,#cdbb9d 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.9),0 6px 10px rgba(79,61,39,.25);
}
body.downloads .drawer{
  padding:1.1rem 1.1rem 1.35rem;display:grid;gap:.9rem;
  background:linear-gradient(180deg,#f7efe0 0%,#efe4ce 100%);
}
body.downloads .product{
  display:grid;grid-template-columns:108px 1fr;gap:1rem;align-items:center;
  background:#fffaf0;border:1px solid rgba(121,96,67,.22);
  border-radius:14px;padding:.75rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 18px rgba(79,61,39,.12);
}
body.downloads .product img{
  width:108px;height:108px;object-fit:cover;border-radius:12px;border:1px solid rgba(121,96,67,.2)
}
body.downloads .product h3{margin:0 0 .25rem 0;font-size:1.05rem;color:#2f2a22}
body.downloads .product p{margin:0;color:#4a4237;font-size:.98rem}

@media (max-width:720px){
  body.downloads .product{grid-template-columns:84px 1fr}
  body.downloads .product img{width:84px;height:84px}
}
/* Drop cap for About page paragraphs */
.page-about .lede::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  padding-right: 0.08em;
  font-weight: 600;
}

/* =======================================
   Index & About: Header-aware Hero Layout
   ======================================= */

/* Safety reset */
body{ margin:0; }

/* Header: keep if you like sticky; remove position/top to make it normal */
header.header{
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  position: sticky; top: 0; z-index: 1000;
}

main.page-main{
  flex: 1;                 /* KEY FIX: pushes footer to bottom */
  display: flex;
  flex-direction: column;  /* keeps inner sections stacking nicely */
  min-height: 0;
  overflow: visible;
}

/* Hero stays safe and non-trapping */
.page-index .hero,
.page-about  .hero{
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(8px, 1.2vh, 14px);
  padding-top: clamp(24px, 6vh, 56px);
  padding-bottom: clamp(20px, 5vh, 48px);
  margin: 0;
  overflow: visible;
}
.page-index .hero::before,
.page-about  .hero::before{
  content:"";
  position:absolute; inset:0;
  transform: scale(1.06);
  background-position: center 20%;
  background-size: cover;
  filter: blur(10px) brightness(70%);
  z-index: 0;
}
.page-index .hero > *,
.page-about  .hero > *{ position: relative; z-index: 1; }
.page-index .hero > *:first-child,
.page-about  .hero > *:first-child{ margin-top: 0; }

/* =========================================
   Downloads page: fixed footer + safe hero
   (REPLACEMENT: use this instead of both older
   Downloads-specific CSS blocks)
   ========================================= */

body.page-downloads{ overflow-y:auto !important; }

/* DOWNLOADS — make hero fill the leftover height when cabinets are closed */
body.page-downloads > main{
  display: flex;
  flex-direction: column;
  flex: 1; /* main fills the viewport height (body is flex column) */
}

/* Let the hero take up any spare vertical space */
body.page-downloads .hero{
  flex: 1;
  overflow: hidden; /* IMPORTANT: clips the blur so the footer edge is crisp */
}

/* Keep content clear of the fixed footer */
body.page-downloads .page-main{
  min-height: 0;
  overflow: visible;
}

/* Hero must not trap scroll/height */
body.page-downloads .hero{
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(8px, 1.2vh, 14px);
  padding-top: clamp(24px, 6vh, 56px);
  padding-bottom: clamp(20px, 5vh, 48px);
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.page-downloads .hero::before{
  content:"";
  position:absolute; inset:0;
  transform: scale(1.06);
  background-position: center 20%;
  background-size: cover;
  filter: blur(10px) brightness(70%);
  z-index:0; pointer-events:none;
}
body.page-downloads .hero > *{ position:relative; z-index:1; }

/* Defensive: neutralize any accidental full-viewport helpers */
body.page-downloads .full-vh,
body.page-downloads .full-height,
body.page-downloads [style*="100vh"]{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
/* =========================================
   REPLACEMENT — Hero spacing (page-specific)
   ========================================= */

/* INDEX — midpoint placement for hero block */
body.page-index .hero{
  padding-top: clamp(84px, 16.5vh, 220px) !important; /* adjust by ±1vh if needed */
  padding-bottom: clamp(16px, 4vh, 40px) !important;
}
/* ABOUT — close the gap between the hero and "Our Story" */
body.page-about .about-section:first-of-type{
  margin-top: clamp(4px, 0.2vh, 12px) !important; /* was 2rem */
}

/* (optional) if your first wrapper is .about-main instead of .about-section, keep this too */
body.page-about .about-main:first-of-type{
  margin-top: clamp(4px, 0.2vh, 12px) !important;
}
/* =========================================
   UI polish + effects pack (ADDITION)
   ========================================= */

/* 1) Nav buttons — subtle 3D/depth */
.nav .nav-btn{
  color: var(--text);
  text-decoration: none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  font-weight:600;
}
.nav .nav-btn:hover{
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.28);
}
.nav .nav-btn:active{
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px rgba(0,0,0,.18);
}
.nav .nav-btn.is-active{
  border-color: rgba(93,214,183,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(93,214,183,.18);
}

/* 2) Logo — filleted outer square corners */
.brand-logo{ border-radius:12px; }

/* 3) Footer typography per SOP */
.site-footer{
  font-size: clamp(1.2rem, 1.5rem, 1.5rem);
  font-style: italic; font-weight:800; letter-spacing:.2px;
}

/* 4) Hero headline clarity + 2s fade-in on page load */
.page-about  .hero h1,
.page-downloads .hero .hero-title{
  text-shadow: 0 2px 18px rgba(0,0,0,.28);
  opacity:0; transform: translateY(12px);
  animation: heroFade 2s ease-out .1s forwards;
}
@keyframes heroFade{
  0%{ opacity:0; transform: translateY(12px); }
  100%{ opacity:1; transform: translateY(0); }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .page-index .hero h1,
  .page-about  .hero h1,
  .page-downloads .hero .hero-title{
    animation: none !important; opacity:1; transform:none;
  }
}

/* 6) Small-logo crispness (helps tiny sizes) */
img.brand-logo{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* (Optional) Explicitly set the others if you want to be tidy: */
body.page-downloads .hero::before{ background-image: url('../img/hero-downloads.jpg') !important; }

/* =========================================
   1) INDEX — hero background + fade target
   ========================================= */

/* Use 'hero-bg.jpg' if present, else gracefully fall back to 'hero.webp' */
body.page-index .hero::before{
  background-image: url('../img/hero-bg.jpg'), url('../img/hero.jpg') !important;
  background-position: center 20%, center 20%;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

/* Animate ONLY the main headline on Index (not the subtitle) */
body.page-index .hero :is(h1, .hero-title, .headline):first-of-type{
  opacity: 0; transform: translateY(12px);
  animation: heroFade 2s ease-out .1s forwards;
}
/* Ensure subtitle/strapline does NOT animate */
body.page-index .hero :is(h2, p, .subhead, .tagline){
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ===================================================
   2) DOWNLOADS — "ridge" inset border on the cabinets
   =================================================== */

/* Apply ridge to common cabinet/accordion wrappers (covers most setups). 
   If your wrapper is different, you can add class="ridge" to it. */
body.page-downloads .cabinet,
body.page-downloads .accordion,
body.page-downloads .downloads .cabinet,
body.page-downloads .downloads .accordion,
body.page-downloads .ridge{
  position: relative;
  border-radius: 24px;
  background: linear-gradient(180deg,#faf6ed 0%,#f3ecdd 100%);
  border: 2px solid rgba(121,96,67,.42);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.9),     /* top inner highlight */
    inset 0 -4px 8px rgba(121,96,67,.35),     /* bottom inner shadow (ridge) */
    0 22px 44px rgba(25,18,4,.20);            /* soft outer drop */
  overflow: hidden;
}

/* Inner lip to enhance the ridge */
body.page-downloads .cabinet::before,
body.page-downloads .accordion::before,
body.page-downloads .downloads .cabinet::before,
body.page-downloads .downloads .accordion::before,
body.page-downloads .ridge::before{
  content:"";
  position:absolute; inset:10px; border-radius:18px;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.85),
    inset 0 -4px 8px rgba(121,96,67,.25);
  pointer-events:none;
}

/* Chunkier feel: give summary and drawer a bit more space */
body.page-downloads :is(.cabinet, .accordion) summary{
  padding: 1.35rem 2.25rem 1.35rem 3.5rem !important;
  font-weight: 900; letter-spacing: .3px;
}
body.page-downloads :is(.cabinet, .accordion) .drawer{
  padding: 1.25rem 1.5rem 1.75rem;
  display: grid; gap: 1rem;
}

/* Keep the chevron & smooth open if you already enabled them */
body.page-downloads :is(.cabinet, .accordion) summary::-webkit-details-marker{ display:none; }
body.page-downloads :is(.cabinet, .accordion) summary::after{
  content:""; position:absolute; right:1rem; top:50%; translate:0 -50%;
  width:.75rem; height:.75rem; rotate:-90deg;
  border-right:2px solid rgba(58,52,43,.9); border-bottom:2px solid rgba(58,52,43,.9);
  transition: transform .25s ease;
}
body.page-downloads details[open] > summary::after{ transform: rotate(180deg); }
body.page-downloads :is(.cabinet, .accordion) .drawer{
  max-height: 0; overflow: hidden; transition: max-height .35s ease;
}
body.page-downloads details[open] .drawer{ max-height: 1200px; }

/* =================================================
   3) ABOUT — make sure it uses its own hero image
   ================================================= */
body.page-about .hero::before{
  background-image: url('../img/hero-about.jpg') !important;
  background-position: center 20%;
  background-size: cover;
  background-repeat: no-repeat;
}
/* ADDITION — clean focus styles for accessibility */
:where(a, button, [role="button"], summary, .nav-btn):focus-visible{
  outline: 2px solid rgba(93,214,183,.9);
  outline-offset: 2px;
  border-radius: 8px;
}
/* ============================================
   INDEX — carousel download cards (ridge + layout)
   ============================================ */

/* Index carousel container: cards centered; arrows overlaid */
body.page-index .dl-cards{
  position: relative;
  display: flex;
  justify-content: center;     /* centers the card group */
  align-items: center;
  gap: 10px;
  padding-inline: clamp(56px, 9vw, 112px);  /* space for arrows on both sides */
  overflow: visible;            /* arrows can sit outside if needed */
}


/* Card shell + ridge + vertical layout */
body.page-index .dl-card{
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--card-radius);
  background: linear-gradient(180deg,#faf6ed 0%,#f3ecdd 100%);
  border: 2px solid rgba(121,96,67,.42);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.9),     /* inner top highlight */
    inset 0 -4px 8px rgba(121,96,67,.35),     /* inner bottom shadow (ridge) */
    0 18px 36px rgba(25,18,4,.18);            /* soft outer drop */
  overflow: hidden;
  padding: var(--card-padding);

  display: grid;
  grid-template-rows: auto auto auto;  /* don’t stretch the middle row */
  row-gap: 8px;                        /* tighten vertical gaps */
  min-height: auto;                    /* let the card collapse to content */
  width: clamp(220px, 42vw, 320px);
}

/* inner “lip” to deepen the ridge */
body.page-index .dl-card::before{
  content:"";
  position: absolute; inset: 8px;
  border-radius: 14px;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.85),
    inset 0 -4px 8px rgba(121,96,67,.25);
  pointer-events: none;
}

/* Title at the top */
body.page-index .dl-card .dl-title,
body.page-index .dl-card > h3{
  order: 1;
  margin: 0 4px 6px;
  font-weight: 800;
  letter-spacing: .2px;
  text-align: center;
  color: #2f2a22;
}

/* Image centered and allowed to grow */
body.page-index .dl-card .dl-img,
body.page-index .dl-card > img{
  order: 2;
  place-self: center;
  max-width: var(--card-img-width);
  max-height: none;                 /* don’t force a tall image area */
  object-fit: contain;
  border-radius: var(--card-img-radius);
  border: 1px solid rgba(121,96,67,.22);
  background: #fffaf0;
  padding: 4px;
  align-self: start;                /* avoid vertical centering slack */
}

/* Sub text at the bottom */
body.page-index .dl-card .dl-text,
body.page-index .dl-card > p{
  order: 3;
  margin: 8px 6px 2px;
  text-align: center;
  color: #4a4237;
  font-size: .98rem;
  line-height: 1.35;
}

/* small screens */
@media (max-width: 640px){
  body.page-index .dl-card{
    min-height: 220px;
    width: 76vw;
  }
}

/* Arrows: overlay and ignore layout so they don't push cards off-center */
body.page-index .dl-cards .carousel-btn{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 2;
}
body.page-index .dl-cards .carousel-btn.prev{ left: clamp(8px, 2vw, 24px); }
body.page-index .dl-cards .carousel-btn.next{ right: clamp(8px, 2vw, 24px); }

/* Consistent card sizing so the middle card visually centers */
body.page-index .dl-card{
  width: clamp(260px, 34vw, 340px);
  min-height: auto;                 /* remove artificial height */
  align-content: start;             /* pack rows to the top */
  row-gap: 6px;                     /* tighter vertical spacing */
}
/* Tighten image-to-text gap inside the card */
body.page-index .dl-card .dl-img{ 
  margin-bottom: 6px !important;    /* was 10px from a broader rule */
  align-self: start;                 /* no vertical slack */
}

body.page-index .dl-card .dl-text{
  margin-top: 6px !important;       /* was 8px */
}

/* === INDEX — hero text + single centered card, arrows overlaid === */

/* Center the headline/tagline block */
body.page-index .hero-inner{ max-width:1200px; margin-inline:auto; }
body.page-index .hero-text{
  text-align:center; display:grid; justify-items:center;
}
body.page-index .hero-title{ display:inline-block; margin-inline:auto; }

/* Matches either <img>, .dl-img, or .cta-thumb inside the product card */
body.page-index .hero .hero-actions .cta-card :is(img, .dl-img, .cta-thumb){
  width: var(--card-img-width);
  height: auto;
  display: block;
  margin: 0 auto 10px;
  border-radius: var(--card-img-radius);
}

/* Replace the older grid slider with a flex slider */
body.page-index .hero .hero-actions{
  position:relative;
  display:flex !important;                /* override grid */
  align-items:center; justify-content:center;
  gap: 10px;
  padding-inline: clamp(56px, 8vw, 120px);/* room for arrows */
  overflow: visible;
}

/* Show exactly one card: the active one */
body.page-index .hero .hero-actions .cta-card{
  display:none !important;
}
body.page-index .hero .hero-actions .cta-card.is-active{
  display:grid !important;
  width: min(520px, 85vw);
}

/* Arrows out of the flow so they don’t shift the card off-center */
body.page-index .hero .hero-actions .carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
}
body.page-index .hero .hero-actions .carousel-btn.prev{ left: clamp(8px, 2vw, 24px); }
body.page-index .hero .hero-actions .carousel-btn.next{ right: clamp(8px, 2vw, 24px); }

/* REPLACEMENT — ease arrows slightly outward from the card */
body.page-index .hero .hero-actions{
  --dl-card-w: min(560px, 86vw);   /* keep this from before */
  --dl-arrow-gap: 52px;            /* was 40px — moves arrows a bit OUT */
}

body.page-index .hero .hero-actions .carousel-btn.prev{
  left: max(12px, calc(50% - (var(--dl-card-w) / 2) - var(--dl-arrow-gap)));
}
body.page-index .hero .hero-actions .carousel-btn.next{
  right: max(12px, calc(50% - (var(--dl-card-w) / 2) - var(--dl-arrow-gap)));
}
/* ==============================
   Small-phone header sizing
   ============================== */

/* ≤420px — shrink logo + nav pills */
@media (max-width: 420px){
  header.header { min-height: 56px; }

  /* Logo */
  .brand-logo{
    width: 32px;
    height: 32px;
    object-fit: cover;
  }

  /* Nav row */
  .nav{ gap: 6px; }

  /* Nav buttons */
  .nav .nav-btn{
    padding: 6px 10px;        /* was ~.55rem 1rem */
    font-size: 0.90rem;       /* slightly smaller text */
    border-radius: 8px;       /* tighter pill */
  }
}

/* ≤360px — one more step down so everything fits nicely */

@media (max-width: 500px){
  header.header { min-height: 52px; }

  .brand-logo{
    width: 28px;
    height: 28px;
  }

  .nav{ gap: 4px; }

  .nav .nav-btn{
    padding: 5px 8px;
    font-size: 0.82rem;
    border-radius: 7px;
  }
}
/* INDEX — hero centered to viewport, no clipping */
body.page-index .hero,
body.page-index .hero-inner{
  overflow: visible !important;
}

/* Center the whole hero block on the page */
body.page-index .hero-inner{
  max-width: 1200px !important;
  margin-inline: auto !important;                  /* hard-center */
  padding-inline: clamp(12px, 4vw, 32px) !important;
}

/* Center the text group and constrain width so it wraps */
body.page-index .hero-text{
  text-align: center !important;
  justify-items: center;
  margin-inline: auto !important;
  max-width: min(90ch, 94vw) !important;           /* keeps subtitle inside screen */
}

/* Ensure the subtitle actually wraps and isn’t clipped */
body.page-index .hero-sub{
  white-space: normal !important;
  word-break: normal !important;
  overflow: visible !important;
}

/* Center the card row relative to the viewport as well */
body.page-index .hero .hero-actions{
  width: min(1200px, 96vw) !important;
  margin-inline: auto !important;                  /* centers the card/arrow cluster */
}
/* =========================================
   INDEX @≤500px — arrows just clear of card
   (REPLACEMENT for the previous ≤500px block)
   ========================================= */
@media (max-width: 500px){
  /* tighter wrap on the grey subtitle */
  body.page-index .hero-text{
    margin-inline: auto !important;
    max-width: min(88ch, 94vw) !important;
    text-align: center !important;
  }
  body.page-index .hero-sub{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* arrow + card layout */
  body.page-index .hero .hero-actions{
    /* tune here if you want: */
    --arrow-col: 44px;   /* arrow button size */
    --arrow-gap: 50px;    /* space between arrow and card (was 12px) */
    --edge-pad: 8px;     /* screen edge padding */

    display: grid !important;
    grid-template-columns: var(--arrow-col) minmax(0, 1fr) var(--arrow-col);
    align-items: center !important;
    justify-content: center !important;
    gap: var(--arrow-gap);
    width: 100% !important;
    max-width: 100vw !important;
    padding-inline: var(--edge-pad) !important;
    margin-inline: auto !important;
  }

  /* only the active card is shown; it fits exactly with arrows + gaps + padding */
  body.page-index .hero .hero-actions .cta-card{ display: none !important; }
  body.page-index .hero .hero-actions .cta-card.is-active{
    display: grid !important;
    grid-column: 2 !important;
    justify-self: center !important;
    box-sizing: border-box !important;
    width: min(
      420px,
      calc(100vw - (var(--arrow-col)*2) - (var(--arrow-gap)*2) - (var(--edge-pad)*2))
    ) !important;
  }

  /* arrow buttons */
  body.page-index .hero .hero-actions .carousel-btn{
    position: static !important;
    transform: none !important;
    width: var(--arrow-col);
    height: var(--arrow-col);
  }

  /* image scale inside the smaller card */
  body.page-index .hero .hero-actions .cta-card.is-active .dl-img{
    max-width: 86%;
    max-height: 68%;
  }
}