/* =========================================================
   Dessert House — order landing page
   Clean, minimal, large type, deep navy on white / light grey
   ========================================================= */

:root{
  --navy:        #0f2c4d;
  --navy-deep:   #0a2038;
  --navy-soft:   #46617f;
  --white:       #ffffff;
  --grey-50:     #f7f8fa;
  --grey-100:    #eef0f4;
  --grey-200:    #dfe3ea;
  --grey-500:    #6b7684;
  --whatsapp:    #25d366;
  --error:       #b3261e;

  --wrap:        1180px;
  --radius:      14px;
  --shadow:      0 18px 50px rgba(15,44,77,.10);

  --step-1: clamp(.95rem, .35vw + .85rem, 1.05rem);
  --step-0: clamp(1.05rem, .5vw + .95rem, 1.25rem);
  --step-2: clamp(1.6rem, 1.6vw + 1.1rem, 2.4rem);
  --step-3: clamp(2.4rem, 4.5vw + 1rem, 4.6rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Heebo", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size:var(--step-0);
  font-weight:300;
  line-height:1.7;
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3{ font-weight:700; line-height:1.15; letter-spacing:-.02em; margin:0 0 .5em; }
h1{ font-size:var(--step-3); }
h2{ font-size:var(--step-2); }
h3{ font-size:clamp(1.4rem, 1.2vw + 1.1rem, 2rem); }

p{ margin:0 0 1em; }
a{ color:inherit; }

.wrap{ width:min(100% - 3rem, var(--wrap)); margin-inline:auto; }
.narrow{ max-width:760px; }
.center{ text-align:center; }

.section{ padding:clamp(4rem, 9vw, 8rem) 0; }
.section-alt{ background:var(--grey-50); }

.eyebrow{
  text-transform:uppercase; letter-spacing:.22em;
  font-size:.8rem; font-weight:500; color:var(--navy-soft);
  margin-bottom:.6em;
}
.lead{ font-size:clamp(1.05rem,.7vw + .95rem,1.35rem); color:var(--navy-soft); }
.note{ font-size:var(--step-1); color:var(--grey-500); margin-top:2rem; }

/* Multi-line admin fields (textareas) keep their line breaks on the page.
   pre-line honours newlines while still collapsing incidental indentation
   and wrapping normally — so content stays plain text, never HTML. */
.hero-text,
.lead,
.note,
.disclaimer,
.product-sub,
.split-text p,
.success p{ white-space:pre-line; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--grey-100);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ font-weight:700; font-size:1.25rem; text-decoration:none; letter-spacing:-.01em; }
.nav{ display:flex; align-items:center; gap:clamp(1rem,3vw,2rem); }
.nav a{ text-decoration:none; font-size:1rem; color:var(--navy-soft); }
.nav a:hover{ color:var(--navy); }
.lang-toggle{
  border:1px solid var(--grey-200); background:transparent; color:var(--navy);
  border-radius:999px; padding:.35rem 1rem; font:inherit; font-size:.85rem;
  font-weight:500; cursor:pointer; letter-spacing:.05em;
}
.lang-toggle:hover{ border-color:var(--navy); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:min(88vh, 820px);
  display:grid; place-items:center;
  color:var(--white);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:url("../images/hero.jpg") center/cover no-repeat;
  transform:scale(1.02);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,32,56,.55), rgba(10,32,56,.72));
}
.hero-content{ position:relative; text-align:center; padding:6rem 0; }
.hero h1{ margin-bottom:.6em; text-shadow:0 2px 30px rgba(0,0,0,.25); }
.hero-text{
  max-width:640px; margin:0 auto 2.2em;
  font-size:clamp(1.05rem,.7vw + .95rem,1.3rem);
  font-weight:300; line-height:1.65;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 20px rgba(0,0,0,.3);
}
.pretitle{
  text-transform:uppercase; letter-spacing:.28em;
  font-size:clamp(.75rem,.4vw + .7rem,.95rem); font-weight:400;
  opacity:.9; margin-bottom:1.4em;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border:0; border-radius:999px; cursor:pointer;
  font:inherit; font-weight:500; text-decoration:none;
  padding:.9rem 2.2rem; transition:transform .15s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-lg{ padding:1.1rem 3rem; font-size:1.1rem; }
.btn-primary{ background:var(--navy); color:var(--white); }
.btn-primary:hover{ background:var(--navy-deep); }
.hero .btn-primary{ background:var(--white); color:var(--navy); }
.btn-whatsapp{ background:var(--whatsapp); color:#04331a; font-weight:700; }
.btn-whatsapp svg{ width:24px; height:24px; fill:currentColor; }

/* ---------- product splits ---------- */
/* rows sit flush against each other — one continuous band */
#productList{ margin-top:clamp(2.5rem,5vw,4rem); }
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  gap:0;
  margin:0;
}
/* The media box gets its height from aspect-ratio (or from the grid row
   when the text column is taller). Children must NOT size themselves with
   height:100% against it: Safari does not treat an aspect-ratio height as
   definite, so the percentage resolved to 0 and the photo vanished while
   the space stayed reserved. Filling by absolute offsets works in every
   engine and in both cases. */
.split-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--grey-100);
}
.split-media > .slider,
.split-media > .img-placeholder{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  width:auto; height:auto;
}
/* the slider carries its own ratio too, so it never depends on the
   parent's height being resolvable */
.slider{ aspect-ratio:4/3; }

/* Single photo: plain in-flow image. The ratio is on the image itself,
   so even where aspect-ratio is unsupported the photo still displays at
   its natural size instead of collapsing to nothing. */
.split-media.is-single{ aspect-ratio:auto; }
.split-media > .single-photo{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
}
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-text{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,5vw,4.5rem);
}
.split-text p{ color:var(--navy-soft); margin:0; }
.split-text h3{ margin-bottom:.35em; }
.product-sub{
  font-size:clamp(.95rem,.35vw + .88rem,1.1rem);
  font-weight:400; letter-spacing:.06em;
  color:var(--navy); opacity:.75;
  margin-bottom:1.1em !important;
}
.split.reverse .split-media{ order:2; }
/* ---------- slider ---------- */
.slider{ overflow:hidden; }
.slider:focus-visible{ outline:3px solid var(--white); outline-offset:-6px; }
.slides{ position:absolute; inset:0; }
.slide{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s ease;
  user-select:none; -webkit-user-drag:none;
}
.slide.is-active{ opacity:1; }

.s-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:0; cursor:pointer; z-index:2;
  display:grid; place-items:center;
  background:rgba(255,255,255,.85); color:var(--navy);
  box-shadow:0 4px 16px rgba(15,44,77,.18);
  opacity:0; transition:opacity .25s ease, background .2s ease;
}
.s-nav svg{ width:22px; height:22px; }
.s-nav.prev{ inset-inline-start:14px; }
.s-nav.next{ inset-inline-end:14px; }
/* mirror the chevrons in RTL so they point the way they travel */
[dir="rtl"] .s-nav svg{ transform:scaleX(-1); }
.slider:hover .s-nav,
.slider:focus-within .s-nav{ opacity:1; }
.s-nav:hover{ background:var(--white); }

.dots{
  position:absolute; inset-block-end:16px; inset-inline:0;
  display:flex; justify-content:center; gap:.5rem; z-index:2;
}
.dot{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:0; background:rgba(255,255,255,.55);
  box-shadow:0 1px 4px rgba(15,44,77,.35);
  transition:background .2s ease, transform .2s ease;
}
.dot.is-active{ background:var(--white); transform:scale(1.35); }

/* touch devices have no hover — keep the arrows visible */
@media (hover:none){
  .s-nav{ opacity:1; width:40px; height:40px; }
}

.img-placeholder{
  display:grid; place-items:center;
  background:repeating-linear-gradient(45deg,var(--grey-100) 0 12px,var(--grey-50) 12px 24px);
  color:var(--grey-500); font-size:.95rem; letter-spacing:.08em;
}

/* ---------- order form ---------- */
.order-form{
  margin-top:3rem;
  background:var(--white);
  border:1px solid var(--grey-200);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.25rem,3vw,2.75rem);
}
.table-scroll{ overflow-x:auto; }
.basket{ width:100%; border-collapse:collapse; min-width:640px; }
.basket th{
  font-weight:500; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy-soft); text-align:start; padding:0 1rem 1rem;
  border-bottom:1px solid var(--grey-200);
}
.basket td{ padding:1.4rem 1rem; border-bottom:1px solid var(--grey-100); vertical-align:middle; }
.col-price,.col-qty,.col-sum{ text-align:center; white-space:nowrap; }
.basket th.col-price,.basket th.col-qty,.basket th.col-sum{ text-align:center; }

.item{ display:flex; align-items:center; gap:1rem; }
.thumb{
  width:76px; height:76px; border-radius:10px; object-fit:cover;
  background:var(--grey-100); flex:none;
}
.thumb-empty{ background:repeating-linear-gradient(45deg,var(--grey-100) 0 8px,var(--grey-50) 8px 16px); }
.item-name{ display:block; font-weight:700; font-size:1.1rem; line-height:1.3; }
.item-sub{ display:block; font-size:.9rem; color:var(--grey-500); }

.stepper{
  display:inline-flex; align-items:center;
  border:1px solid var(--grey-200); border-radius:999px; overflow:hidden;
}
.qty-btn{
  width:42px; height:44px; border:0; background:transparent;
  font-size:1.3rem; line-height:1; color:var(--navy-soft); cursor:pointer;
}
.qty-btn:hover{ background:var(--grey-100); color:var(--navy); }
.qty{
  width:56px; height:44px; border:0; text-align:center;
  font:inherit; font-weight:500; font-size:1.05rem; color:var(--navy);
  background:transparent; -moz-appearance:textfield;
}
.qty::-webkit-outer-spin-button,.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty:focus{ outline:2px solid var(--navy); outline-offset:2px; border-radius:6px; }

.basket tfoot td{ border-bottom:0; padding-top:1.6rem; }
.total-label{ font-weight:500; color:var(--navy-soft); letter-spacing:.06em; }
.total-value{ font-size:1.4rem; font-weight:700; }

/* ---------- fields ---------- */
.fields{
  margin-top:2.5rem;
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.field-full{ grid-column:1 / -1; }
.field label{
  display:block; font-size:.9rem; font-weight:500;
  color:var(--navy-soft); margin-bottom:.5rem;
}
.field input,.field textarea{
  width:100%; font:inherit; font-size:1.05rem; color:var(--navy);
  padding:.85rem 1rem;
  border:1px solid var(--grey-200); border-radius:10px;
  background:var(--white); resize:vertical;
}
.field input:focus,.field textarea:focus{
  outline:0; border-color:var(--navy); box-shadow:0 0 0 3px rgba(15,44,77,.10);
}
.field input.invalid,.field textarea.invalid{ border-color:var(--error); }

.disclaimer{ margin-top:2rem; font-size:.95rem; color:var(--grey-500); }
.form-actions{ margin-top:1.5rem; text-align:center; }
.form-error{ color:var(--error); font-size:.95rem; margin-top:1rem; }

/* ---------- success ---------- */
.success{
  margin-top:3rem; text-align:center;
  background:var(--white); border:1px solid var(--grey-200);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem);
}
.success-icon{
  width:72px; height:72px; margin:0 auto 1.5rem;
  border-radius:50%; background:var(--navy); color:var(--white);
  display:grid; place-items:center; font-size:2rem;
}
.success p{ color:var(--navy-soft); max-width:520px; margin-inline:auto; }
.order-ref{ font-size:.95rem; color:var(--grey-500); }

/* ---------- questions / footer ---------- */
.questions{ padding-bottom:clamp(4rem,8vw,7rem); }
.site-footer{ background:var(--navy); color:rgba(255,255,255,.75); padding:2.5rem 0; font-size:.95rem; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; }
.site-footer a{ color:var(--white); text-decoration:none; }

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:60;
  width:60px; height:60px; border-radius:50%;
  background:var(--whatsapp); color:#04331a;
  display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform .15s ease;
}
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:32px; height:32px; fill:currentColor; }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .split{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .split-media{ aspect-ratio:16/10; }
  .split-text{ padding:2rem 1.5rem 3rem; }
  .nav a{ display:none; }
}
@media (max-width:520px){
  .thumb{ width:56px; height:56px; }
  .item-name{ font-size:1rem; }
  .wa-float{ width:54px; height:54px; inset-block-end:16px; inset-inline-end:16px; }
}

/* ---------- weekly order note (above the pricing table) ---------- */
.order-note{
  max-width:820px; margin:0 auto 2rem;
  background:#fff8e6; border:1px solid #f2e2b8;
  border-inline-start:4px solid #d9b64e;
  border-radius:var(--radius);
  padding:1.1rem 1.4rem;
  color:#6b5620; font-size:var(--step-1); line-height:1.6;
  white-space:pre-line;
}

/* ---------- orders closed ---------- */
.closed-banner{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:70;
  background:var(--navy-deep); color:var(--white);
  box-shadow:0 -6px 30px rgba(10,32,56,.35);
  padding:1rem 0;
}
.closed-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.25rem; flex-wrap:wrap;
}
.closed-text{
  margin:0; font-size:1.02rem; line-height:1.5;
  white-space:pre-line; flex:1 1 320px;
}
.closed-actions{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.closed-wa{ padding:.7rem 1.4rem; }
.closed-wa svg{ width:20px; height:20px; }
.closed-tel{
  padding:.7rem 1.4rem; text-decoration:none;
  border:1px solid rgba(255,255,255,.45); color:var(--white);
  font-weight:500; letter-spacing:.02em;
}
.closed-tel:hover{ background:rgba(255,255,255,.12); }

/* keep the sticky banner from covering the footer, and make it obvious
   the form is out of service rather than merely unresponsive */
body.orders-closed{ padding-block-end:112px; }
body.orders-closed .order-form{ opacity:.55; }
body.orders-closed .order-form .btn-primary{ cursor:not-allowed; }
.order-form .btn-primary:disabled{ opacity:.5; transform:none; }

@media (max-width:640px){
  .closed-inner{ justify-content:center; text-align:center; }
  .closed-text{ flex-basis:100%; }
  body.orders-closed{ padding-block-end:170px; }
  .wa-float{ inset-block-end:150px; }
}

/* ---------- the basket on a phone ----------
   A 4-column table needs ~640px; a phone gives ~390. Rather than making
   people drag the table sideways, each row becomes a card: the product on
   top, then price / quantity / subtotal on one line, each labelled. */
@media (max-width:640px){
  .table-scroll{ overflow-x:visible; }
  .basket{ min-width:0; display:block; }
  .basket thead{ display:none; }
  .basket tbody{ display:block; }

  .basket tbody tr{
    display:grid;
    grid-template-columns:1fr auto;
    gap:.5rem 1rem;
    align-items:center;
    padding:1rem 0;
    border-bottom:1px solid var(--grey-100);
  }
  .basket tbody td{
    display:block; padding:0; border:0; text-align:start;
  }
  .basket tbody .col-desc{ grid-column:1 / -1; }

  /* label + value, so a bare number is never ambiguous */
  .basket tbody .col-price,
  .basket tbody .col-sum{
    font-size:.95rem; color:var(--navy-soft); white-space:nowrap;
  }
  .basket tbody .col-price::before,
  .basket tbody .col-sum::before{
    content:attr(data-label) ": ";
    color:var(--grey-500); font-size:.8rem;
  }
  .basket tbody .col-sum{ text-align:end; font-weight:700; color:var(--navy); }
  .basket tbody .col-qty{ grid-row:3; justify-self:start; }
  .basket tbody .col-sum{ grid-row:3; justify-self:end; }

  .basket tfoot{ display:block; }
  .basket tfoot tr{ display:flex; justify-content:space-between; align-items:baseline; }
  .basket tfoot td{ display:block; padding:1.1rem 0 0; border:0; }
  .basket tfoot .col-desc,
  .basket tfoot .col-price{ display:none; }
  .basket tfoot .total-label{ text-align:start; }
  .basket tfoot .total-value{ text-align:end; }

  .item{ gap:.75rem; }
  .thumb{ width:64px; height:64px; }
}