/* ============================================================
   SHY.OM V3 — "warm counter" design system.

   V2 called itself "Y2K dopamine": dark-first maximalism, six accent
   hues, three gradients, gradient-clipped logo text and three radial
   glow blobs behind the page. None of it had anything to do with cake.
   A near-black purple ground is actively appetite-suppressing, which is
   the wrong instinct for a bakery, and the six competing accents meant
   nothing on the page could ever be emphatic.

   V3 goes back to the counter: warm cream paper, deep cocoa ink, ONE
   raspberry accent with caramel second. Instrument Serif carries the
   display voice, Karla the reading. Photography is meant to be the
   loudest thing on every page and the price the second loudest, so the
   chrome deliberately recedes.

   Class names are UNCHANGED from V1/V2 — .card, .btn, .hero, .field,
   .section, .marquee … — so every existing template inherits this
   without edits. Only tokens and component rules changed.
   ============================================================ */
:root {
  /* ── ground and ink ─────────────────────────────────────── */
  --paper: #FBF7F0;        /* page */
  --card: #FFFDFA;         /* raised surface */
  --surface: #F3E9DC;      /* recessed surface, image wells */
  --ink: #2A1C15;          /* primary text */
  --ink-soft: #6E5A4E;     /* secondary text — 5.6:1 on paper */
  /* Darkened from #8A7768, which was 3.6:1 on --surface. It sits on the
     recessed ground (footer meta, and the no-photo card label), so it has
     to clear 4.5:1 against that, not against paper. */
  --ink-faint: #6F5C4C;    /* tertiary */
  --line: #E3D5C4;         /* hairline */
  --line-2: #C9B6A0;       /* emphasised hairline, input borders */

  /* ── the two accents. Same lightness and chroma, different hue,
        so neither can shout over the other. ─────────────────── */
  --berry: #A81F45;        /* the one action colour */
  --berry-deep: #7E1633;   /* hover / pressed */
  /* Deepened from #B5741F, which failed twice: 3.6:1 as eyebrow text on
     paper, and 3.8:1 behind the white text of .badge-status and the
     'today' chip. Both need 4.5:1, and darkening fixes them together. */
  --caramel: #8A5714;      /* secondary: eyebrows, ticks, flags */

  --white: #FFFFFF;        /* literal white — for text ON the accents */
  --radius: 4px;           /* editorial, not blobby */
  --radius-pill: 999px;    /* genuine pills only: badges, day chips */

  /* Warm-tinted shadows: on a cream ground a neutral-black shadow
     greys the page out. Tinted with the ink instead. */
  --shadow-1: 0 1px 2px rgba(42,28,21,.05), 0 1px 1px rgba(42,28,21,.04);
  --shadow-2: 0 2px 6px -1px rgba(42,28,21,.07), 0 8px 22px -6px rgba(42,28,21,.10);
  --shadow-3: 0 10px 28px -8px rgba(42,28,21,.16);

  /* ── legacy V1/V2 token aliases ──────────────────────────────
     Kept so no rule or template referencing an old name breaks.
     Every one now resolves into the warm palette; the neon hues
     (lime, cyan, purple) collapse onto the two real accents. */
  --bg: var(--paper);
  --bg-elevated: var(--card);
  --bg-elevated-2: var(--surface);
  --border: var(--line);
  --pink: var(--berry);
  --pink-soft: var(--ink-soft);
  --purple: var(--berry-deep);
  --lime: var(--berry);
  --cyan: var(--caramel);
  --yellow: var(--caramel);
  --cream: var(--paper);
  --cream-deep: var(--surface);
  --maroon: var(--berry);
  --maroon-deep: var(--berry-deep);
  --gold: var(--caramel);
  --pink-pale: var(--surface);
  /* the gradients are now flat colour — a flat accent reads as a
     deliberate brand colour, a gradient reads as decoration */
  --grad-hot: var(--berry);
  --grad-fresh: var(--caramel);
  --grad-gold: var(--caramel);
  --shadow: var(--shadow-2);
  --glow-pink: var(--shadow-2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  /* V2 stacked three radial gradients here. Removed: the page ground
     is a flat warm cream so photography sits on something neutral. */
  color: var(--ink);
  font-family: Karla, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 .5rem;
  letter-spacing: -.015em;
  line-height: 1.08;
  text-wrap: pretty;
}
h1 { font-size: 3.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.15rem; }

/* The wordmark. V2 ran a pink→purple gradient through this with
   background-clip:text — the single most overused generated-design
   move there is. It is now simply set in the display face. */
.script {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  color: var(--ink);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  line-height: 1;
}

a { color: var(--berry); text-decoration: none; }
a:hover { color: var(--berry-deep); }

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

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: Karla, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--caramel);
  font-size: .75rem;
  display: block;
  margin-bottom: .5rem;
}

.section { position: relative; padding: 72px 0; }
.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-title h2 { font-size: 2.2rem; }
.section-title p { color: var(--ink-soft); max-width: 560px; margin: 0 auto; }

/* V2's blurred neon "glow blobs" behind the page. They carried no
   information and were the loudest generic-AI signal on the site;
   the markup can stay, they simply no longer paint. */
.blob { display: none; }

/* --- Marquee ticker --- */
.marquee {
  background: var(--berry);
  color: var(--white);
  font-family: Karla, sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
}
.marquee-track { display: inline-block; padding-left: 100%; animation: marquee 30s linear infinite; }
.marquee-track span { margin: 0 28px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; padding-left: 0; }
}

/* --- Header --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--paper); } }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 24px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .script { font-size: 1.9rem; }
.brand small {
  font-family: Karla, sans-serif; letter-spacing: .18em; text-transform: uppercase;
  font-size: .62rem; color: var(--ink-soft); font-weight: 600;
}

.main-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* :not(.btn) matters. `.main-nav a` is (0,1,1) and outranks `.btn-primary`
   (0,1,0), so without it the header's Order button renders nav-brown on the
   berry ground instead of white. V2 had the same collision but it was
   invisible there, because its --ink was already near-white. */
.main-nav a:not(.btn) { font-size: .94rem; font-weight: 500; color: var(--ink-soft); }
.main-nav a:not(.btn):hover { color: var(--ink); }

.icon-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.cart-badge {
  background: var(--berry); color: var(--white); border-radius: var(--radius-pill);
  font-size: .68rem; padding: 2px 8px; margin-left: 2px; font-weight: 700;
}

/* --- Buttons ---
   V2 buttons were 999px pills that scaled up 2% and lifted on hover.
   The bounce is the tell; a real control shifts ground colour and
   elevation instead, and keeps its label crisp. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 28px; border-radius: var(--radius);
  font-family: Karla, sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: 0;
  cursor: pointer; border: 1px solid transparent;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .2s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--berry); color: var(--white); box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--berry-deep); color: var(--white); box-shadow: var(--shadow-2); }
.btn-outline { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-outline:hover { background: var(--surface); border-color: var(--ink-soft); color: var(--ink); }
/* Brand green with ink text, not white: white on any green light enough to
   still read as WhatsApp lands around 3:1. Ink on #25D366 is 7.9:1 and keeps
   the colour recognisable. */
.btn-whatsapp { background: #25D366; color: var(--ink); }
.btn-whatsapp:hover { background: #1EBE5A; color: var(--ink); }
.btn-gold { background: var(--caramel); color: var(--white); }
.btn-gold:hover { background: #6F4510; color: var(--white); }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 11px 18px; font-size: .88rem; }
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-install {
  background: var(--surface); color: var(--ink); border-color: var(--line-2);
  font-size: .85rem; min-height: 44px; padding: 11px 16px;
}
@media (prefers-reduced-motion: reduce) { .btn, .card { transition: none; } .btn:active { transform: none; } }

/* --- Hero ---
   Photography-led: the image column is not decoration, it is the
   product. The copy column stays narrow so the headline can be large
   without crowding it. */
.hero {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px;
  padding: 72px 24px 64px;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { font-size: 4.4rem; line-height: .98; margin-bottom: 1.2rem; }
.hero-copy p { font-size: 1.18rem; color: var(--ink-soft); max-width: 46ch; margin-bottom: 1.9rem; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-image { position: relative; z-index: 1; }
.hero-image img {
  border-radius: 3px; box-shadow: none; border: 1px solid var(--line);
  aspect-ratio: 4/5; object-fit: cover; width: 100%;
}
/* the trust row: deposit, delivery, lead time */
.hero-meta {
  display: flex; gap: 36px; margin-top: 2.2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.hero-meta div { font-size: .82rem; color: var(--ink-soft); }
.hero-meta strong {
  display: block; color: var(--ink);
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 1.6rem; line-height: 1.1; margin-bottom: 2px;
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; gap: 32px; }
  .hero-copy h1 { font-size: 2.9rem; }
  .hero-image { order: -1; }
}

/* --- Cards / grid --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-1); border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-3); }
/* 4:5 gives a cake more vertical room than V2's 4:3 crop */
.card-img { aspect-ratio: 4/5; background: var(--surface) center/cover no-repeat; }
.card-img.no-image {
  background: var(--surface); opacity: 1;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.card-img.no-image span {
  font-family: 'Instrument Serif', Georgia, serif; color: var(--ink-soft);
  font-size: 1.3rem; font-weight: 400; text-align: center; padding: 0 16px; line-height: 1.2;
}
.card-body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 {
  font-size: 1.5rem; margin-bottom: .15rem; color: var(--ink);
  transition: color .12s ease;
}
.card:hover .card-body h3 { color: var(--berry); }
.card-flavor { color: var(--caramel); font-size: .78rem; margin-bottom: .5rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.card-desc { color: var(--ink-soft); font-size: .92rem; flex: 1; margin-bottom: .75rem; }
.card-days { font-size: .75rem; color: var(--ink-soft); margin-bottom: .75rem; }
.card-days .day {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--surface); margin-right: 3px; font-weight: 600; color: var(--ink-soft);
}
.card-days .day.today { background: var(--caramel); color: var(--white); }
.card-prices { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: .9rem; }
/* the price is the second-loudest thing on a card, after the photo */
.card-price {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  color: var(--ink); font-size: 1.5rem; line-height: 1.1;
}
.unavailable-badge {
  background: var(--surface); color: var(--ink-soft); font-size: .7rem;
  padding: 4px 12px; border-radius: var(--radius-pill); font-weight: 600;
}

.category-block { margin-bottom: 60px; }
.category-block h2 { text-align: center; }
.category-block .divider { text-align: center; color: var(--ink-soft); margin-bottom: 2rem; font-size: .95rem; }

/* --- Forms ---
   Field sizing is governed by flux-ui.css (16px to stop iOS zooming on
   focus, 46px minimum touch target); these rules carry the look only. */
.form-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 36px; max-width: 640px; margin: 0 auto; border: 1px solid var(--line);
}
.field { margin-bottom: 20px; }
.field label {
  display: block; font-size: .72rem; margin-bottom: 8px; color: var(--ink-soft);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=date], .field input[type=number], .field input[type=file],
.field select, .field textarea {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius);
  font-family: Karla, sans-serif; background: var(--card); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--berry);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--berry) 15%, transparent);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-radios { display: flex; gap: 18px; flex-wrap: wrap; }
.field-radios label {
  display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--ink);
  font-weight: 500; text-transform: none; letter-spacing: 0; margin-bottom: 0;
}
.errorlist { list-style: none; padding: 0; margin: 6px 0 0; color: #B3261E; font-size: .85rem; font-weight: 600; }
.help-text { font-size: .82rem; color: var(--ink-soft); margin-top: 6px; }

/* --- Messages --- */
.messages { list-style: none; margin: 0; padding: 0; }
.messages li {
  background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--berry);
  color: var(--ink); padding: 14px 20px; border-radius: var(--radius);
  margin: 14px auto; max-width: 1140px; font-weight: 500;
}

/* --- Misc pages --- */
.prose { max-width: 68ch; margin: 0 auto; }
.prose p { margin-bottom: 1rem; color: var(--ink-soft); font-size: 1.05rem; }

.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; max-width: 760px; margin: 0 auto; }
.faq-item h4 { margin-bottom: .4rem; color: var(--ink); font-size: 1.3rem; }
.faq-item p { color: var(--ink-soft); margin: 0; }

.review-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-1);
}
.stars { color: var(--caramel); letter-spacing: 2px; margin-bottom: .5rem; }

.summary-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.summary-table td { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.summary-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.summary-table tr.total td {
  font-family: 'Instrument Serif', Georgia, serif; font-size: 1.5rem; color: var(--ink);
  border-top: 1px solid var(--line-2); border-bottom: none; padding-top: 16px;
}

.qty-form { display: flex; align-items: center; gap: 8px; }
.qty-form input { width: 64px; text-align: center; }

.badge-status {
  display: inline-block; padding: 5px 14px; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 700; background: var(--caramel); color: var(--white);
}

/* --- Footer --- */
.site-footer {
  background: var(--surface); color: var(--ink-soft); padding: 60px 0 28px;
  margin-top: 72px; position: relative; overflow: hidden; border-top: 1px solid var(--line);
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; position: relative; z-index: 1; }
.site-footer h4 {
  color: var(--ink); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  font-family: Karla, sans-serif; font-weight: 700;
}
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--berry); }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-bottom { text-align: center; margin-top: 44px; font-size: .8rem; color: var(--ink-faint); position: relative; z-index: 1; }
.social-row { display: flex; gap: 14px; margin-top: 10px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

.whatsapp-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: #1EA952;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-3);
}
.whatsapp-fab svg { width: 28px; height: 28px; }