/* ==== Expat Toolbox — minimal, safe overrides ==== */

/* Header: tighter gutters, logo left, nav right (works for both header patterns) */
header .container, .header .container { padding-left:8px; padding-right:8px; }
.header-inner, .bar { display:flex; align-items:center; gap:12px; }
.logo img, .brand-logo {
  width:54px; height:54px; border-radius:12px;
  background:#f3efe6; padding:6px; object-fit:contain; margin-left:0;
}
.logo .brand, .brand-text { display:none; }
nav { margin-left:auto; }
header nav ul, .nav { display:flex; gap:.5rem; list-style:none; margin:0; padding:0; }

footer, .footer, .site-footer{
  background:#1f3a33;
  color:#e6eaf2;
  margin-top:0;
  border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -10px 24px rgba(0,0,0,.35);
}

/* Contact & Cart hero backgrounds */
body.page-contact .hero::before{
  background-image: linear-gradient(
    to bottom,
    rgba(31,58,51,.45),
    rgba(0,0,0,.35)
  ),
  url('../img/hero-contact.jpg') !important;
}

body.page-cart .hero::before{
  background-image: linear-gradient(
    to bottom,
    rgba(31,58,51,.45),
    rgba(0,0,0,.35)
  ),
  url('../img/hero-cart.jpg') !important;
}

/* Shared button */
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1.1rem; border-radius:12px; border:1px solid rgba(255,255,255,.22); color:#0b0c0f; background:linear-gradient(180deg,#6be2c4,#42c0a4); text-decoration:none; font-weight:800; letter-spacing:.2px; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 22px rgba(0,0,0,.25); transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn-primary:active{ transform:translateY(0); filter:brightness(0.98); }
.btn-primary[disabled],.btn-primary[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; box-shadow:none; filter:grayscale(.2); }

/* Index subtitle */
body.home .hero .hero-subtitle,
body.page-index .hero .hero-subtitle{
  font-size: 1.2rem;
  font-weight: 500;
  color: #e6eaf2;
  max-width: 680px;
  margin: 0.2rem auto 0;
  text-align: center;
}

body.home .hero .hero-subtitle::before,
body.page-index .hero .hero-subtitle::before{
  content:"Your Thailand Expat Starter Kit — ";
  font-weight:700;
  color:#fff;
}

/* Focus ring */
:where(.btn-primary,.cart-row,.form-card) :is(input,select,textarea,button):focus-visible{ outline:2px solid rgba(93,214,183,.9); outline-offset:2px; border-radius:8px; }

/* =============================================================
   2025-08-27 — UNIFORM HERO (match DOWNLOADS exactly)
   Bible: .page-downloads .hero block in master.css
   ============================================================= */

/* 1) Apply Downloads' hero metrics to Index, Contact, Cart */
body.page-index .hero,
body.page-contact .hero,
body.page-cart .hero,
body.page-about .hero{
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(8px, 1.2vh, 14px) !important;
  padding-top: clamp(24px, 6vh, 56px) !important;
  padding-bottom: clamp(20px, 5vh, 48px) !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* 2) Make their hero backgrounds behave like Downloads */
body.page-index .hero::before,
body.page-contact .hero::before,
body.page-cart .hero::before,
body.page-about .hero::before{
  content: "";
  position: absolute; inset: 0;
  transform: scale(1.06);
  background-position: center 20% !important;
  background-size: cover;
  filter: blur(4px) brightness(70%) !important;
  z-index: 0; pointer-events: none;
}

/* 4) Unify headline sizing across pages (Downloads uses .hero-title) */
.hero :is(h1, .hero-title){
  font-size: var(--fs-hero) !important;
  font-weight: 900; letter-spacing: .3px; margin: 0;
}

/* Override the master 'heroFade' keyframes to GPU-friendly translate3d */
@keyframes heroFade{
  0%{ opacity:0; transform: translate3d(0,12px,0); }
  100%{ opacity:1; transform: translate3d(0,0,0); }
}

/* ==========================================================
   GLOBAL — ridge component + contact/cart layout (2025-08-27)
   ========================================================== */

.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),
    inset 0 -4px 8px rgba(121,96,67,.35),
    0 22px 44px rgba(25,18,4,.20);
  overflow:hidden;
}

.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;
}

/* Contact & Cart two-column layout that collapses on mobile */
.page-contact .contact-wrap,
.page-cart .cart-wrap{
  display:grid;
  grid-template-columns: minmax(360px, 1fr) clamp(260px, 32vw, 540px);
  gap: clamp(10px, 1.6vw, 16px);
  align-items:start;
}

@media (max-width: 900px){
  .page-contact .contact-wrap,
  .page-cart .cart-wrap{ grid-template-columns: 1fr; }
}

/* Card padding for the main panels */
.page-contact .form-card{
  padding: clamp(16px, 2.2vw, 24px);
  justify-self: end;
}

/* Form rows + full-width inputs */
.page-contact .form-row{ display:grid; gap:8px; }
.page-contact input,
.page-contact select,
.page-contact textarea{ width:100%; }

/* Cart table basics (future-proofed) */
.page-cart .cart-items .cart-row{ display:grid; grid-template-columns:1fr auto auto; gap:8px; }
.page-cart .cart-actions{ display:flex; gap:12px; align-items:center; }

/* =============================================================
   LAUNCH MODE — Hide Resources nav links
   ============================================================= */

header a[href*="resource" i],
header nav a[href*="resource" i],
.header nav a[href*="resource" i],
footer a[href*="resource" i],
.site-footer a[href*="resource" i]{
  display:none !important;
}

/* The cream ridge form card */
.page-contact .form-card{
  display: grid;
  gap: .85rem;
  border-radius: 18px;
  padding: clamp(14px, 2.2vw, 22px);
  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),
    inset 0 -4px 8px rgba(121,96,67,.35),
    0 18px 36px rgba(25,18,4,.18);
}

/* Form labels + fields */
.page-contact .form-card label{
  color:#2a241a;
  font-weight:800;
  letter-spacing:.2px;
  font-size:.95rem;
  margin-bottom:4px;
}

.page-contact .form-card :is(input,select,textarea){
  width:100%;
  background:#ffffffee;
  border:1.5px solid #cdbf9f;
  color:#1e1b14;
  font-size:1rem;
  line-height:1.2;
  padding:.9rem 1.1rem;
  border-radius:12px;
}

.page-contact .form-card textarea{
  min-height:150px;
  resize:vertical;
}

.page-contact .form-card :is(input,select,textarea)::placeholder{
  color:#7a6f5c;
  opacity:.95;
}

.page-contact .form-card :is(input,select,textarea):focus{
  border-color:#35c7aa;
  box-shadow:0 0 0 3px rgba(53,199,170,.25);
}

/* Micro contrast fix */
.page-contact .form-card{ color:#1e1b14; }

/* =============================================================
   CONTACT — Response time copy (Option 3) without HTML edits
   ============================================================= */

.page-contact .contact-side .tile:nth-of-type(2) p{
  font-size: 1rem;
  line-height: 1.6;
  color: #3c3428;
  max-width: 42ch;
  text-align: center;
  margin: .35rem auto 1rem;
}

.page-contact .contact-side .tile:nth-of-type(2){
  display:grid;
  justify-items:center;
  padding: clamp(14px, 2.2vw, 22px);
}

/* CONTACT — center the "No spam..." note under the form */
.page-contact .form-note{
  text-align: center;
  font-style: italic;
  margin: .75rem auto 0;
  max-width: 42ch;
}

/* =============================================================
   CONTACT — Center Quick links list (keep bullets)
   ============================================================= */

.page-contact .contact-side .tile:first-of-type{
  display:grid;
  justify-items:center;
  padding: clamp(16px, 2.4vw, 24px);
  min-height: clamp(150px, 22vh, 240px);
}

.page-contact .contact-side .tile:first-of-type ul{
  list-style:none;
  margin:.4rem 0 0; padding:0;
  display:grid; gap:.65rem;
  justify-items:center;
}

.page-contact .contact-side .tile:first-of-type li{ text-align:center; display:block; }
.page-contact .contact-side .tile:first-of-type li::before{ content:none; }
.page-contact .contact-side .tile:first-of-type a{ text-decoration:underline; }
.page-contact .contact-side .tile:first-of-type a:hover{ text-decoration:none; }

/* CONTACT — fix faint tile headings (Quick links / Response time) */
.page-contact .contact-side h3{
  color:#2a241a !important;
  opacity:1 !important;
  font-weight:900;
  text-shadow:none;
}

/* =============================================================
   GLOBAL — Normalized active nav state (works with new order)
   ============================================================= */

   /* CART — visibility, padding & centralization polish (2025-08-27) */
.page-cart .cart-card{
  color:#1e1b14;
}

.page-cart .cart-empty{
  display:grid;
  gap:.9rem;
  justify-items:center;
  text-align:center;
  padding: clamp(16px, 2.4vw, 24px);
}

.page-cart .cart-empty p{
  margin:.1rem 0 .35rem;
  color:#3c3428;
  opacity:.98;
}

.page-cart .cart-empty :is(a,button){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  text-decoration:none;
}

.page-cart .cart-side .tile{
  padding: clamp(16px, 2.4vw, 24px);
  color:#1e1b14;
  display:grid;
  justify-items:center;
  text-align:center;
}

.page-cart .cart-side h3{
  color:#2a241a;
  font-weight:900;
  margin:.2rem 0 .6rem;
  text-align:center;
}

.page-cart .cart-side p{
  color:#3c3428;
  max-width:46ch;
}

.page-cart .cart-side a{
  color:#0d8a73;
  text-decoration:underline;
}

.page-cart .cart-side a:hover{
  color:#086d5b;
  text-decoration:none;
}

header nav a, .nav a{ transition: filter .2s ease, transform .15s ease, box-shadow .2s ease; }
:root{ --nav-active-shadow: 0 10px 22px rgba(0,0,0,.25); }

/* Accessible focus ring for keyboard users */
header nav a:focus-visible, .nav a:focus-visible{
  outline: 2px solid rgba(93,214,183,.9); outline-offset: 2px; border-radius: 14px;
}

/* =============================================================
   GLOBAL — Simple active nav via aria-current
   ============================================================= */
header nav a[aria-current="page"],
.nav a[aria-current="page"]{
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 2px rgba(255,255,255,.18), var(--nav-active-shadow);
}

/* Home hero cards — larger images */
body.page-index .dl-card .cta-thumb,
body.page-index .dl-card .dl-img{
  width: auto !important;
  height: auto !important;
  max-width: 92% !important;
  max-height: 72% !important;
  border-radius: 12px;
  object-fit: cover;
}

/* ==========================================================
   2025-08-29 — Additions only
   ========================================================== */

/* INDEX — disable "Coming soon" cards (prevent dead clicks) */
body.page-index .hero .hero-actions .cta-card[href="#"]{
  pointer-events: none;
  cursor: default;
  opacity: 0.92;
}

/* INDEX — carousel card downshift (size + spacing) */

body.page-index .hero .hero-actions .cta-card.is-active{
  width: min(360px, 72vw) !important;     /* was ~520px/85vw */
  padding: 14px 14px !important;         /* slightly tighter */
}

body.page-index .hero .hero-actions .cta-card.is-active :is(img, .cta-thumb, .dl-img){
  max-width: 76% !important;             /* was ~85–92% */
  margin: 0 auto 10px auto !important;   /* reduce gap */
}

/* INDEX — hero vertical trim (final polish) */
body.page-index .hero{
  padding-top: clamp(16px, 3vh, 36px) !important;
  padding-bottom: clamp(12px, 2.5vh, 28px) !important;
}

body.page-index .hero-text{
  margin-bottom: 8px !important;   /* tighten gap above card */
}

body.page-index .hero .hero-actions .cta-card :is(h3, .card-title){
  font-size: clamp(22px, 1.6vw + 14px, 30px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 .35rem;
}

body.page-index .hero .hero-actions .cta-card :is(p, .card-desc, .subtext){
  font-size: clamp(14px, 1vw + 10px, 18px);
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

body.page-cart .hero :is(h1, .hero-title){
  margin-inline: auto;
  text-align: center;
}

/* CONTACT + CART — match hero fade-in to other pages */
.page-contact .hero :is(h1, .hero-title),
.page-cart   .hero :is(h1, .hero-title){
  opacity: 0;
  transform: translateY(12px);
  animation: heroFade 2s ease-out .1s forwards;
}

@media (prefers-reduced-motion: reduce){
  .page-contact .hero :is(h1, .hero-title),
  .page-cart   .hero :is(h1, .hero-title){
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* 2) CART — Thai flag under the H1 */
.page-cart .hero :is(h1, .hero-title)::after{
  content: "";
  display: block;
  width: clamp(56px, 6vw, 80px);
  aspect-ratio: 3 / 2;
  margin: .35rem auto 0;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  background:
    linear-gradient(to bottom,
      #A51931 0 20%,
      #ffffff 20% 35%,
      #2D2A4A 35% 65%,
      #ffffff 65% 80%,
      #A51931 80% 100%
    );
}

/* CART — canonical hero subhead alignment */
.page-cart .hero .subhead{
  max-width: 60ch;
  margin: 0.35rem auto 0;
  text-align: center;
}

.page-cart .hero .hero-text{
  max-width: 60rem;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  align-items: center;
}

/* ======================================================
   INDEX — root-cause fix: kill old push + enforce flex
   ====================================================== */

:where(body.page-index, body.home) .hero{
  --hero-center: min(1100px, 90vw);
}

:where(body.page-index, body.home) .hero :is(.hero-text, .hero-actions){
  max-width: var(--hero-center) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

:where(body.page-index, body#index, body.home) .hero .hero-actions{
  margin-top: 0 !important;
}

:where(body.page-index, body.home) .hero .hero-actions{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

:where(body.page-index, body.home) .dl-cards{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-inline: clamp(56px, 9vw, 112px) !important;
}

:where(body.page-index, body.home) .hero .hero-actions .cta-card.is-active{
  width: min(520px, 85vw) !important;
  margin-inline: auto !important;
  justify-self: center !important;
}

:where(body.page-index, body.home) .dl-card{
  width: clamp(260px, 34vw, 340px) !important;
  margin-inline: auto !important;
}

/* Index — prevent hero subheading clipping on phones */

:where(body.page-index, body.home) .hero .hero-text{
  padding-inline: 14px !important;
  box-sizing: border-box !important;
}

:where(body.page-index, body.home) .hero :is(.hero-sub, .hero-subtitle){
  padding-inline: inherit !important;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}

/* =============== PRODUCT PAGE POLISH =============== */

/* === Fix faint text inside product cards === */

.product-card,
.product-card p,
.product-card li {
  color: #222;
  opacity: 1 !important;
}

.product-card li::marker {
  color: #800020;
}

/* === Global CTA buttons === */
:root{
  --et-burgundy: #800020;
  --et-mint: #41c7a6;
  --et-mint-dark: #2ea58a;
  --et-ink: #111;
}

.button{
  display:inline-block;
  width: 100%;
  padding:.9rem 1.1rem;
  border-radius: 12px;
  font-weight: 800;
  text-align:center;
  background: var(--et-mint);
  color:#0b1b17;
  border: 0;
  box-shadow: 0 6px 18px rgba(65,199,166,.25);
  transition: transform .08s ease, box-shadow .2s ease, background .15s ease;
}

.button:hover{
  background: var(--et-mint-dark);
  box-shadow: 0 8px 22px rgba(65,199,166,.32);
}

.button:active{
  transform: translateY(1px);
}

.button:focus-visible{
  outline: 3px solid rgba(65,199,166,.55);
  outline-offset: 2px;
}

.button.alt{
  background:#111;
  color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.button.alt:hover{
  background:#000;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* === Product header polish === */

.product-header{
  max-width: 58rem;
  margin-inline: auto;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}

.product-header h2{
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  letter-spacing: 0.01em;
  margin: 0 0 .35rem 0;
  color: #f5f5f5;
  text-align: center;
}

.product-header p{
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: #d6d6d6;
}

.product-page .product-grid{
  margin-top: clamp(.75rem, 1.6vw, 1.25rem);
}

/* === Center content in product info card === */

.product-card {
  text-align: center;
  font-style: italic;
}

.product-card h3 {
  text-align: center;
}

.product-card ul {
  list-style-position: inside;
  margin: 0;
  padding: 0;
  display: inline-block;
  text-align: left;
}

/* === PRODUCT PAGE: hard-center the entire right column stack === */

.page-product .product-wrap > section {
  display: grid;
  justify-items: center;
  align-content: start;
  row-gap: 16px;
  text-align: center !important;
}

.page-product .bullets{
  margin: 0;
  padding-left: 0 !important;
  list-style-position: inside;
  display: inline-block;
  text-align: center !important;
}

.page-product .product-actions{
  justify-content: center !important;
}

@media (min-width: 980px){
  .page-product .product-wrap{
    text-align: center !important;
    column-gap: 72px;
  }
}

/* === UNIVERSAL HERO BACKDROP: Blueprint (fixed) === */

body.page-product{
  background:
    linear-gradient(to bottom, rgba(31,58,51,.45), rgba(0,0,0,.35)),
    url('../img/blue-print.jpg') center 20% / cover no-repeat fixed;
}

body.page-product::before{
  content:"";
  position: fixed;
  inset: 0;
  background: inherit;
  filter: blur(3px) brightness(0.78) saturate(1.05);
  transform: scale(1.03);
  z-index: -1;
  pointer-events: none;
}


/* QUICK-LINK hover tweak on contact */

.page-contact .quick-links a{
  transition: color .15s ease;
}

.page-contact .quick-links a:hover{
  color:#2abf9e;
  text-decoration: underline;
}

/* --- DOWNLOADS: updated Buy Now buttons --- */

.page-downloads .btn-primary{
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.2px;
  background-color: #2abf9e;
  color: #0d1a16;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  transition: all .15s ease;
}

.page-downloads .btn-primary:hover{
  background-color: #26b18f;
  transform: translateY(-1px);
}

/* ============================
   DOWNLOADS — CANONICAL RULES
   One source of truth for cards
   ============================ */

/* Card layout + footprint */
.page-downloads .downloads .cabinet .drawer > .product{
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  width: 100% !important;
  max-width: 880px !important;
  margin: 0 auto 14px !important;
  padding: 18px 22px 28px !important;   /* small floor inside the cream card */
  box-sizing: border-box !important;
  border-radius: 16px !important;
}

/* Cover image sizing */
.page-downloads .downloads .cabinet .drawer > .product img{
  max-width: 140px !important;
  height: auto !important;
  justify-self: center !important;
}

/* Right column stack (title, blurb, button) */
.page-downloads .downloads .cabinet .drawer > .product > div{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
}

/* Typography spacing */
.page-downloads .downloads .cabinet .drawer > .product h3{
  margin: 0 0 2px 0 !important;
  line-height: 1.15 !important;
  letter-spacing: .1px !important;
}

.page-downloads .downloads .cabinet .drawer > .product h3 + p{
  margin: 2px 0 0 0 !important;
  line-height: 1.4 !important;
  max-width: 62ch !important;
}

/* CTA alignment */
.page-downloads .downloads .cabinet .drawer > .product .product-actions{
  margin-top: 10px !important;
  display: flex !important;
  justify-content: center !important;
}

/* Spacing between cabinets */
.page-downloads .downloads .cabinet{
  position: relative;
  margin-bottom: 18px !important;
}

/* Open drawer: contain content inside the rounded cabinet */
.page-downloads .downloads .cabinet details[open] .drawer{
  position: relative;
  z-index: 2;
  padding-bottom: 84px !important;      /* floor for CTA + shadow */
  overflow: hidden !important;           /* key containment */
}

/* Summary stays below open content */
.page-downloads .downloads .cabinet summary{
  position: relative;
  z-index: 1;
}

/* Small screens: stack cleanly */
@media (max-width: 768px){
  .page-downloads .downloads .cabinet .drawer > .product{
    grid-template-columns: 1fr !important;
    max-width: 94% !important;
    row-gap: 8px !important;
    padding: 18px 16px 30px !important;  /* a tad more floor on phones */
  }
}

/* Safety: if any max-height cap exists elsewhere, neutralise it on phones */
@media (max-width: 600px){
  body.page-downloads details[open] .drawer{ max-height: 9999px !important; }
}

/* ABOUT — align hero heading & text with other pages */
:where(body.about, body.page-about, body#about) .hero .hero-text{
  transform: none !important;
}

:where(body.about, body.page-about, body#about) .hero :is(h1, .hero-title){
  margin-top: 0 !important;
}
/* ============================================================
   INDEX — HARD FIX FOR THE GAP INSIDE THE ACTIVE DOWNLOAD CARD
   Purpose: stop grid/flex from pushing the text to the bottom.
   Safe override: applies ONLY to page-index, ONLY to .cta-card.is-active
   ============================================================ */

body.page-index .hero .hero-actions .cta-card.dl-card.is-active{
  display: block !important;       /* stop flex/grid behaviour */
  padding: 18px 20px !important;   /* keep your nice card padding */
  box-sizing: border-box !important;
}

body.page-index .hero .hero-actions .cta-card.dl-card.is-active img{
  display: block !important;
  margin: 0 auto 14px auto !important;  /* ONE controlled gap */
  padding: 0 !important;
}

/* === INDEX HERO — subtitle > card blurb hierarchy === */
:where(body.page-index, body.home) .hero :is(.hero-sub, .hero-subtitle){
  font-size: 1.32rem !important;  /* slightly larger than before */
  font-weight: 600 !important;
}

/* === INDEX HERO — download card description style === */
body.page-index .hero .hero-actions .cta-card.dl-card.is-active p{
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 0.9rem !important;   /* smaller than subtitle */
  line-height: 1.45;
  font-style: italic;
  color: #4a4237;
}
/* === HEADER CART BADGE — icon + bubble count === */

header .cart-link{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fef6e8;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

header .cart-link:hover{
  background: rgba(0, 0, 0, 0.65);
  transform: translateY(-1px);
}

header .cart-link .cart-icon{
  font-size: 1.1rem;
  line-height: 1;
}

header .cart-link .cart-label{
  letter-spacing: 0.02em;
}

header .cart-link .cart-count{
  min-width: 1.6em;
  height: 1.6em;
  border-radius: 999px;
  background: #ffd54a;
  color: #241305;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  padding: 0 0.3em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Slightly tighter on very small screens */
@media (max-width: 480px){
  header .cart-link{
    padding: 3px 8px;
    font-size: 0.82rem;
  }
  header .cart-link .cart-count{
    min-width: 1.4em;
    height: 1.4em;
    font-size: 0.72rem;
  }
}

/* === ADD-TO-CART FEEDBACK === */

/* Flashy "added" state */
button.add-to-cart.btn-added{
  background: #35c7aa;
  box-shadow: 0 6px 16px rgba(53, 199, 170, 0.55);
  transform: translateY(-1px) scale(1.02);
}

/* ensure smooth transition */
button.add-to-cart{
  transition: transform 0.16s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* +1 fly-up chip */
.cart-flyup{
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffe082;
  text-shadow: 0 0 4px rgba(0,0,0,0.85);
  pointer-events: none;
  z-index: 9999;
  animation: cart-fly 0.9s cubic-bezier(.22,.61,.36,1);
}

/* We use CSS variables --dx/--dy set from JS */
@keyframes cart-fly{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) translate(0,0) scale(0.8);
  }
  10%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.6);
  }
}

/* =========================
   Cart button: icon + badge
   ========================= */
.nav .nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;             /* small gap between icon and text */
}

/* Cart icon inside the nav cart link */
.nav .nav-cart .cart-icon {
  font-size: 1.1rem;
  transform: translateY(1px);  /* tiny nudge so it lines up nicely */
}

/* Yellow quantity bubble – hidden by default */
.nav .nav-cart .cart-badge {
  position: absolute;
  top: -0.4rem;
  right: -0.3rem;
  min-width: 1.2rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2rem;
  background: #ffd84a;
  color: #000;
  box-shadow: 0 0 0 2px #ffffff;
  display: none; /* start hidden */
}

/* Only show when JS marks it as non-empty */
.nav .nav-cart .cart-badge[data-empty="false"] {
  display: inline-block;
}
/* Cart table layout: stretch across card and align money columns */
.cart-card .cart-table .table {
  width: 100%;
  border-collapse: collapse;
}

.cart-card .cart-table th,
.cart-card .cart-table td {
  padding: 0.5rem 0.75rem;
}

/* Right-align Price + Line columns */
.cart-card .cart-table th:nth-child(3),
.cart-card .cart-table th:nth-child(4),
.cart-card .cart-table td:nth-child(3),
.cart-card .cart-table td:nth-child(4) {
  text-align: right;
}

/* === CART TOTALS — CANONICAL LAYOUT === */

/* Desktop + tablet (incl. 1024 + full screen) */

.cart-card .cart-totals {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* This width controls how far apart label & amount sit. 
     Smaller = closer together. Try 240–280 as you tune. */

  max-width: 260px;
  margin: 0.75rem auto 0;   /* centers under the table */
  font-weight: 700;
}

.cart-card .cart-totals span:first-child {
  text-align: left;
}

.cart-card .cart-totals span:last-child {
  text-align: right;
}

/* Phones (≤500px): stack + fix vertical alignment */

@media (max-width: 500px) {
  .cart-card .cart-totals {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;       /* vertical gap between "Total" and $28.90 */
    max-width: none;
    margin-top: 0.5rem;
  }
} 

/* NEW refined mobile logo size & radius + index carousel centering */
@media (max-width: 500px) {
  .brand-logo {
    width: 35px;
    height: 35px;
    padding: 4px;
    border-radius: 6px;
    object-fit: contain;
  }

/* Phones: centre the index carousel stage, keep arrow clearance */
  body.page-index .hero .hero-actions.dl-cards{
   width: 100%;
   margin-inline: auto !important;
   display: flex !important;
   justify-content: center !important;
   padding-right: 58px !important;
   box-sizing: border-box;
  }

  /* NOTE:
   Mobile carousel stage uses asymmetric padding intentionally.
   This compensates for arrow overlay + snap math.
   Do NOT re-symmetrise unless arrows are reworked.
*/

body.page-index .hero .hero-actions.dl-cards .dl-card{
  margin-inline: auto !important;
  max-width: 340px;
  width: min(340px, calc(100vw - 18px)) !important; /* 9px + 9px */
}

/* Phones: center the snap position so the active card sits truly centered */
body.page-index .dl-card{
  scroll-snap-align: center !important;
  }
}

/* === CART HERO — hard-center hero text & subtext === */

/* Center the grid item itself */
body.page-cart .hero{
  justify-items: center !important;
}

/* Belt + braces: center any subhead-style element */
body.page-cart .hero :is(.hero-sub, .hero-subtitle){
  max-width: 60ch;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* CART DISABLED (remove this block to re-enable) */
.nav-cart { display: none !important; }

/* ===== Footer tidy-up ===== */
.site-footer{
  padding: 14px 0 16px;
  text-align: center;
}

.site-footer .footer-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

.site-footer .footer-inner > p{
  margin: 6px 0;
}

.site-footer .footer-inner p:first-child{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  opacity: .95;
}

.site-footer .footer-links a{
  color: #8ff0dc;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer .footer-links a:hover{
  color: #ffffff;
  text-decoration: underline;
}

/* Make the two links sit nicely, but still wrap on small screens */
.site-footer .footer-links br{ display:none; }
.site-footer .footer-links a:first-child::after{
  content: "  •  ";
  opacity: .6;
  text-decoration: none;
}

.site-footer .footer-links{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;

  font-size: 13px;
  opacity: .95;
  line-height: 1.35;
  margin-bottom: 6px;
}

.site-footer .footer-disclaimer{
  font-size: 12px;
  opacity: .75;
  line-height: 1.2;       /* carried over from the earlier duplicate */
  white-space: nowrap;

  /* preserves the current computed result:
     previous: margin: 10px auto 0; then later margin-bottom: 8px; */
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8px;
}

.site-footer .footer-copy{
  font-size: 24px;
  font-weight: bold;
  opacity: .9;
}

@media (max-width: 520px){
  .site-footer .footer-disclaimer{
    white-space: normal;
    text-align: center;
  }
}

/* =========================================
   GLOBAL: crisp hero-to-footer edge (override)
   ========================================= */

/* Clip all hero backdrops so blur cannot bleed into footer seam */
.hero{
  overflow: hidden !important;
}

/* Keep the content above the blur */
.hero > *{
  position: relative;
  z-index: 1;
}

/* Contact page email link – match ET mint */
.page-contact a[href^="mailto:"] {
  color: var(--accent); /* ET mint */
  font-weight: 600;
}

.page-contact a[href^="mailto:"]:hover {
  text-decoration: underline;
}
.link-mint {
  color: #8ff0dc; 
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}

.link-mint:hover {
  opacity: 0.85;
  text-decoration: underline;
}

/* =========================================================
   PRODUCT PAGES — bullets: left aligned, no orphan wraps
   Canonical (one source of truth)
   ========================================================= */

.page-product .bullets{
  list-style: disc;
  display: block;
  width: 100%;
  max-width: 60ch;
  margin: 10px 0 0;        /* left aligned under heading */
  padding-left: 1.2rem;
  text-align: left;
  align-self: stretch;     /* defeats parent centering */
}

.page-product .bullets li{
  text-align: left;
  margin: 6px 0;
}

/* CONTACT — MailerLite: stable load, no reflow, no double-render */
#ml-block .ml-placeholder{
  min-height: 220px;
  border-radius: 14px;
}

/* Keep embed in layout but invisible */
#ml-block .ml-embedded{
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
}

/* Reveal smoothly when loaded */
#ml-block.is-loaded .ml-embedded{
  opacity: 1;
  visibility: visible;
}

/* Only remove placeholder after embed is ready */
#ml-block.is-loaded .ml-placeholder{
  display: none;
}

/* Contact: reduce the cream card width */
body.page-contact .form-card{
  max-width: 560px;
  margin-inline: auto 0; /* was auto */
}

.page-contact .contact-wrap{
  grid-template-columns: minmax(360px, 520px) clamp(260px, 32vw, 540px);
}

/* Contact: keep sidebar tiles from going full-bleed on single-column layout */
body.page-contact .contact-side{
  display: grid;
  gap: clamp(10px, 1.6vw, 16px);
}

/* Sidebar tiles should fill their grid column on desktop */
@media (min-width: 901px){
  body.page-contact .contact-side .tile{
    max-width: none;
    margin: 0;
  }
}

/* Contact page — force vertical stacking on phones (correct container) */
@media (max-width: 640px){
  body.page-contact .contact-wrap{
    grid-template-columns: 1fr !important;
  }

  body.page-contact .contact-side{
    margin-top: 0;
  }
@media (max-width: 640px){
  body.page-contact .contact-wrap{
    grid-template-columns: 1fr !important;
  }

  /* Center the big cream card on phones */
  body.page-contact .form-card{
    justify-self: center !important;
    margin-inline: auto !important;
    max-width: 560px;              /* keep your intended cap */
    width: min(560px, 100%);       /* avoid overspill */
  }
 }
}

/* CONTACT — prevent first-load "cream sausage" (reserve card footprint) */
@media (min-width: 901px){
  body.page-contact .form-card{
    width: min(560px, 100%);
    min-width: 520px;          /* stops skinny collapse */
    min-height: 360px;         /* optional but helps avoid brief height snap */
    justify-self: start !important;  /* keep it anchored in the left column */
    margin-right: auto !important;   /* stops it hugging the sidebar */
  }

  /* Reserve space inside the embed area so it can't shrink */
  body.page-contact #ml-block{
    min-height: 260px;
  }
}