/* Boutique pâtisserie: blush paper, cocoa ink, rose-gold hairlines. Photos lead.
   Token names (--cream, --gold) predate the palette: --cream is now the blush page colour.
   Fonts are served from /fonts so the page looks the same on every device and works offline of Google. */

@font-face {
  font-family: 'Bellefair';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bellefair-hebrew.woff2') format('woff2');
  unicode-range:
    U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Bellefair';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bellefair-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/assistant-hebrew.woff2') format('woff2');
  unicode-range:
    U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/assistant-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --cream: #f5e8e3;
  --cream-2: #ebd6ce; /* image placeholders and quiet surfaces */
  --ink: #432a2e;
  --ink-2: #74565a; /* 5.4:1 on --cream */
  --gold: #b98172; /* decorative lines only */
  --gold-text: #8a4e41; /* text, links and the accent; 5.4:1 on --cream */
  /* WhatsApp's own green; dark text keeps it AA (7.4:1), white would not (2:1). */
  --wa-green: #25d366;
  --wa-green-dark: #1ebe5b;
  --wa-ink: #0b2e22;
  /* Instagram's own gradient: platform brand colours, deliberately outside the site palette. */
  --ig-gradient: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  --line: #e6cfc7;
  --surface: #fbf3ef; /* form fields */
  --control-line: #9f7a72; /* edge of inputs and choices: 3.2:1 on --cream, 3.5:1 on --surface */

  /* Fallbacks are fonts that ship Hebrew on Windows, macOS, iOS and Android. */
  --font-display: 'Bellefair', 'David', 'Times New Roman', serif;
  --font-body:
    'Assistant', 'Segoe UI', Arial, 'Helvetica Neue', system-ui, sans-serif;

  --radius: 0; /* square corners; the only curve is the cart counter */
  --header-h: 72px;
  --section-y: 80px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  /* Bellefair has one weight: never fake bold or italic. */
  font-synthesis: none;
  overflow-x: hidden;
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
}

/* Focus lands here only via the skip link; an outline around the whole page is noise. */
main:focus {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  z-index: 40;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 10px 16px;
  background: var(--cream);
  border: 2px solid var(--gold-text);
  border-radius: 0;
  color: var(--ink);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.wrap {
  width: min(1240px, 100% - 40px);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 6px 32px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

/* The title and its sub-line share one wrapper in the markup; flatten it so both sit on the row. */
.section-head > div {
  display: contents;
}

.section-head h2,
.section h2 {
  font-size: clamp(34px, 4.4vw, 52px);
}

.section-sub {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cream);
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-row {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  display: block;
  height: 26px;
  width: auto;
}

.nav {
  display: flex;
  gap: 36px;
  margin-inline: auto;
}

.nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.nav a:hover {
  color: var(--ink);
}

.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  background: none;
  border: 0;
  padding: 7px 0;
}

.cart-btn:hover {
  color: var(--gold-text);
}

.cart-count {
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--gold-text);
  color: #fff;
  font-size: 13px;
  display: grid;
  place-items: center;
}

.cart-count.pop {
  animation: pop 0.3s ease-out;
}

@keyframes pop {
  50% {
    transform: scale(1.35);
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px 34px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

.btn-primary {
  background: var(--ink);
  color: var(--cream);
}

.btn-primary:hover {
  background: var(--gold-text);
}

.btn-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
}

/* .btn sets display, which would otherwise beat the hidden attribute. */
.btn[hidden] {
  display: none;
}

.btn-whatsapp {
  background: var(--wa-green);
  color: var(--wa-ink);
}

.btn-whatsapp:hover {
  background: var(--wa-green-dark);
}

.btn-block {
  width: 100%;
}

.link-btn {
  background: none;
  border: 0;
  padding: 8px 0;
  color: var(--ink-2);
  text-decoration: underline;
  align-self: start;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--cream);
  font-size: 24px;
  line-height: 1;
}

/* Hero: a shadowed dark card on the blush page, copy on the right and the photo on the left
   (the page is RTL, so the first grid column is the right one). Light space above and below
   separates it from the header and the trust strip. */
.hero {
  padding-block: 32px 72px;
}

.hero-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
  color: var(--surface);
  box-shadow: 0 24px 56px -16px rgb(67 42 46 / 0.45);
}

.hero :focus-visible {
  outline-color: var(--surface);
}

.hero-copy {
  align-self: center;
  padding: 56px 48px;
}

.eyebrow {
  margin: 0 0 24px;
  color: var(--line);
  font-size: 14px;
  font-weight: 600;
}

.hero h1 {
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  color: var(--surface);
}

.lead {
  font-size: 19px;
  color: var(--line);
  max-width: 36ch;
  margin: 0 0 32px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-bottom: 24px;
}

.hero .btn-primary {
  background: var(--surface);
  color: var(--ink);
}

.hero .btn-primary:hover {
  background: var(--cream);
}

/* In the hero the secondary action is a quiet link, so the primary button stands alone. */
.hero-cta .btn-ghost {
  position: relative;
  min-height: 0;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid var(--gold);
  background: none;
  color: var(--surface);
}

.hero-cta .btn-ghost:hover {
  background: none;
  color: var(--cream);
}

/* The link is small; this widens the tap area without changing the look. */
.hero-cta .btn-ghost::after {
  content: '';
  position: absolute;
  inset: -14px -8px;
}

.hero-note {
  margin: 0;
  font-size: 15px;
  color: var(--line);
}

.hero-photo {
  position: relative;
  margin: 0;
  /* --w is the photo's width and --x its offset from the left; cqw is the width of this figure. */
  container-type: inline-size;
  --w: 76cqw;
  --x: 0px;
}

/* The photo is shown at a fixed share of the card, so the cake stays modest and the composition
   does not change with window size or zoom. On desktop it ends at a fixed line against the dark
   ground, so the cake stays fully lit. In the stacked layout it is centred and the .hero-edge
   strips (a mirrored, stretched copy of the photo's outer pixels) soften its sides. */
.hero-img,
.hero-edge img {
  position: absolute;
  inset-block: 0;
  width: var(--w);
  max-width: none; /* the global img rule would cap it at the strip's own width */
  height: 100%;
  object-fit: cover;
  object-position: 50% 72%;
}

.hero-img {
  left: var(--x);
}

.hero-edge {
  display: none;
  position: absolute;
  inset-block: 0;
  overflow: hidden;
}

/* Overlaps the photo by a pixel so no hairline of the dark ground shows at the seam. */
.hero-edge-r {
  left: calc(var(--x) + var(--w) - 1px);
  right: 0;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    rgb(0 0 0 / 0.6) 35%,
    rgb(0 0 0 / 0.2) 70%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    rgb(0 0 0 / 0.6) 35%,
    rgb(0 0 0 / 0.2) 70%,
    transparent 100%
  );
}

.hero-edge-l {
  left: 0;
  width: calc(var(--x) + 1px);
  -webkit-mask-image: linear-gradient(
    to left,
    #000 0%,
    rgb(0 0 0 / 0.6) 35%,
    rgb(0 0 0 / 0.2) 70%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to left,
    #000 0%,
    rgb(0 0 0 / 0.6) 35%,
    rgb(0 0 0 / 0.2) 70%,
    transparent 100%
  );
}

/* The mirror axis sits 1% inside the photo edge, so the edge pixels are never sampled against
   transparency. */
.hero-edge-r img {
  right: 100%;
  transform-origin: 99% 50%;
  transform: scaleX(-8);
}

.hero-edge-l img {
  left: 100%;
  transform-origin: 1% 50%;
  transform: scaleX(-8);
}

/* Trust: three short facts between hairlines */
.trust {
  border-block: 1px solid var(--line);
}

.trust-grid {
  list-style: none;
  padding: 0;
  margin-block: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.trust-grid li {
  padding: 26px 20px;
  text-align: center;
}

.trust-grid li + li {
  border-inline-start: 1px solid var(--line);
}

.trust-grid strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
}

.trust-grid span {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.4;
}

/* Catalog */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-bottom: 36px;
}

.chip {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 9px 0;
  color: var(--ink-2);
}

.chip:hover {
  color: var(--ink);
}

.chip[aria-pressed='true'] {
  border-bottom-color: var(--gold-text);
  color: var(--ink);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 64px 32px;
}

.featured .grid {
  grid-template-columns: repeat(4, 1fr);
}

/* House favourites get square photos; the full catalog stays 4:5. Corners stay sharp in both. */
.featured .card-img {
  aspect-ratio: 1 / 1;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: rise 0.5s ease-out backwards;
}

.card[hidden] {
  display: none;
}

.card-open {
  background: none;
  border: 0;
  padding: 0;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-img {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-2);
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.card-open:hover .card-img img {
  transform: scale(1.04);
}

.card-name {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.price {
  font-size: 17px;
  color: var(--ink-2);
}

.quick-add {
  position: relative;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold);
  padding: 2px 0;
  font-size: 15px;
  font-weight: 600;
}

/* The link is small; this widens the tap area to a comfortable size without changing the look. */
.quick-add::after {
  content: '';
  position: absolute;
  inset: -12px -8px;
}

.quick-add:hover {
  color: var(--gold-text);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* How to order */
.how {
  border-block: 1px solid var(--line);
}

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 0;
  margin: 40px 0 28px;
}

.steps li {
  counter-increment: step;
  display: grid;
  gap: 6px;
  align-content: start;
  border-top: 1px solid var(--gold);
  padding-top: 20px;
}

.steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  color: var(--gold-text);
  line-height: 1;
}

.steps strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
}

.steps span {
  color: var(--ink-2);
}

.notice {
  margin: 0;
  font-weight: 600;
}

.notice.small {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
}

/* The steps above already end with a 28px margin; this top margin collapses with it,
   so the gap becomes 44px. */
.how .notice {
  margin-top: 44px;
  font-weight: 400;
  color: var(--ink-2);
}

/* FAQ */
.faq-list {
  max-width: 780px;
  display: grid;
  gap: 0;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: var(--gold-text);
}

.faq-list details[open] summary::after {
  content: '−';
}

.faq-list details p {
  margin: 0 0 18px;
  color: var(--ink-2);
  max-width: 62ch;
}

/* Closing call to action */
.cta {
  color: var(--ink);
  text-align: center;
}

.cta h2 {
  font-size: clamp(40px, 6vw, 76px);
  margin-bottom: 12px;
}

.cta p {
  margin: 0 auto 28px;
  max-width: 44ch;
  color: var(--ink-2);
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Footer */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding-block: 28px;
}

.footer-row {
  display: flex;
  gap: 8px 28px;
  align-items: center;
}

/* One row on every device: the logo shrinks before anything wraps. */
.footer-logo {
  height: 28px;
  width: auto;
  min-width: 0;
  margin-inline-end: auto;
}

.footer-row a {
  color: var(--cream);
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}

/* Round platform buttons (icon only; the accessible name is the aria-label). */
.social-row {
  display: flex;
  gap: 12px;
}

.social {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.footer-row .social {
  color: #fff;
  text-decoration: none;
}

.social:hover {
  transform: translateY(-2px);
}

.social svg {
  display: block;
  width: 22px;
  height: 22px;
}

.social-ig {
  background: var(--ig-gradient);
}

.social-wa {
  background: var(--wa-green);
}

/* The header one is quieter: a line-art glyph on a faint disc, right next to the logo. */
.social-line {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin-inline-start: -8px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.social-line:hover {
  border-color: var(--gold);
  color: var(--gold-text);
}

.social-line svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Dialogs */
dialog {
  border: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 24px 60px rgb(67 42 46 / 0.35);
  max-width: 100%;
}

dialog::backdrop {
  background: rgb(67 42 46 / 0.5);
}

.product-dialog {
  width: min(880px, 100% - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  border-radius: 0;
  overflow: auto;
}

.dialog-close-row {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  margin: 0;
}

.pd-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pd-gallery {
  background: var(--cream-2);
  display: grid;
  align-content: start;
}

.pd-gallery img#pd-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.pd-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px;
}

.pd-thumbs button {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0;
  overflow: hidden;
  background: none;
}

.pd-thumbs button[aria-current='true'] {
  border-color: var(--gold-text);
}

.pd-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-info {
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pd-info h3 {
  font-size: 28px;
}

.pd-desc {
  margin: 0;
  color: var(--ink-2);
}

.pd-group {
  display: grid;
  gap: 8px;
}

.pd-legend {
  font-weight: 600;
  margin-bottom: 2px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius);
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--gold-text);
  background: color-mix(in srgb, var(--gold-text) 6%, var(--cream));
}

.choice input:checked + span {
  font-weight: 600;
}

.choice .choice-price {
  margin-inline-start: auto;
  color: var(--gold-text);
  font-weight: 600;
}

.choice input {
  accent-color: var(--gold-text);
}

.pd-buy {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: auto;
  flex-wrap: wrap;
}

.pd-buy .btn {
  flex: 1;
  min-width: 180px;
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--control-line);
  border-radius: 0;
}

.stepper button {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  font-size: 20px;
  border-radius: 0;
}

.stepper output {
  min-width: 28px;
  text-align: center;
  font-weight: 600;
}

.form-error {
  margin: 0;
  color: var(--gold-text);
  font-weight: 600;
}

/* Cart drawer: opens from the inline-end edge, which is the left in Hebrew */
.cart-dialog {
  position: fixed;
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  margin: 0;
  width: min(440px, 100%);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  overflow: auto;
  padding: 20px 20px 28px;
}

.cart-dialog[open] {
  animation: slide 0.25s ease-out;
}

@keyframes slide {
  from {
    transform: translateX(-24px);
    opacity: 0;
  }
}

.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cart-head h3 {
  font-size: 26px;
}

.cart-head form {
  margin: 0;
}

.cart-empty {
  color: var(--ink-2);
}

.order-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.cart-line img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: 0;
}

.cart-line-name {
  font-weight: 600;
  line-height: 1.3;
}

.cart-line-meta {
  font-size: 14px;
  color: var(--ink-2);
}

.cart-line-side {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.cart-line .stepper button {
  width: 32px;
  height: 32px;
  font-size: 17px;
}

.cart-line .remove {
  background: none;
  border: 0;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: underline;
}

.field {
  display: grid;
  gap: 6px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.field label,
.field legend {
  font-weight: 600;
  padding: 0;
}

.field input[type='text'],
.field input[type='date'],
.field textarea {
  width: 100%;
  min-height: 46px;
  background: var(--surface);
  border: 1px solid var(--control-line);
  border-radius: var(--radius);
  padding: 10px 12px;
  /* 16px or more stops iOS Safari from zooming into the field */
  font-size: 16px;
}

.field .radio {
  font-weight: 400;
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 36px;
}

.field input[type='radio'] {
  accent-color: var(--gold-text);
}

/* Name and date share a row: the date gets a fixed column, the name takes the rest. minmax(0, 1fr) plus
   min-width: 0 stop the date input's intrinsic width from stretching the sheet. */
.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 12px;
}

.field-row input {
  min-width: 0;
  max-width: 100%;
}

/* iOS Safari sizes a native date input by its content and ignores width/min-width, so the date overflowed
   its column; appearance: none makes it honour the column. */
.field-row input[type='date'] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  padding-inline: 8px;
}

.field-row input[type='date']::-webkit-date-and-time-value {
  min-width: 0;
  text-align: start;
}

.field input[aria-invalid='true'] {
  border-color: var(--gold-text);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--gold);
}

.cart-total strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--gold-text);
}

.order-copy-box {
  display: grid;
  gap: 8px;
  width: 100%;
}

.order-copy {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--control-line);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 16px;
}

/* QR code for sending the order from a computer */
.qr-panel {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.qr-panel[hidden] {
  display: none;
}

.qr-panel img {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.qr-panel img[hidden] {
  display: none;
}

.qr-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
}

/* Rules on both sides of "or": the WhatsApp button is the alternative to scanning. */
.qr-or {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 16px 0 4px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}

.qr-or::before,
.qr-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold);
}

/* After sending from a computer only the QR view (and "completed") stays on screen. */
.order-form.qr-mode > :not(.qr-panel):not(#order-done) {
  display: none;
}

/* Mobile order bar */
.cart-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 15;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--cream);
  border-top: 1px solid var(--line);
  display: none;
}

.cart-bar .btn {
  justify-content: space-between;
}

/* Tablet */
@media (max-width: 960px) {
  :root {
    --section-y: 64px;
  }

  .hero {
    padding-block: 20px 40px;
  }

  .hero-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* Stacked: the photo goes on top, centred at a modest width, and fades down into the copy. */
  .hero-photo {
    order: -1;
    height: min(62vw, 420px);
    min-height: 240px;
    --w: min(100cqw, 520px);
    --x: calc((100cqw - var(--w)) / 2);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }

  .hero-img,
  .hero-edge img {
    object-position: 50% 66%;
  }

  .hero-edge {
    display: block;
  }

  .hero-copy {
    padding: 8px 20px 40px;
  }

  .featured .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid li + li {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Phone */
@media (max-width: 760px) {
  :root {
    --section-y: 48px;
  }

  body {
    font-size: 16px;
  }

  .cart-bar:not([hidden]) {
    display: block;
  }

  body:has(.cart-bar:not([hidden])) .site-footer {
    padding-bottom: 88px;
  }

  .nav {
    display: none;
  }

  .cart-btn {
    margin-inline-start: auto;
  }

  .cart-btn span:not(.cart-count) {
    display: none;
  }

  .lead {
    font-size: 18px;
  }

  /* A touch smaller on phones so the hero button does not dominate; still 46px tall to tap. */
  .hero .btn-primary {
    min-height: 46px;
    padding: 10px 28px;
    font-size: 15px;
  }

  .grid,
  .featured .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 14px;
  }

  .card-name {
    font-size: 19px;
  }

  .card-foot {
    flex-wrap: wrap;
  }

  /* Categories scroll sideways instead of wrapping into several rows. */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -20px;
    padding-inline: 20px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .chips::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex: none;
  }

  .faq-list summary {
    font-size: 19px;
  }

  .cta-buttons .btn {
    flex: 1 1 100%;
  }

  .pd-body {
    grid-template-columns: 1fr;
  }

  .pd-info {
    padding: 20px 18px 24px;
  }

  .pd-buy .btn {
    min-width: 0;
  }

  /* Product dialog becomes a bottom sheet. */
  .product-dialog {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    margin: auto 0 0;
    border-radius: 0;
  }

  .cart-dialog {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .wrap {
    width: calc(100% - 24px);
  }

  .hero-copy {
    padding-inline: 12px;
  }

  .chips {
    margin-inline: -12px;
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card,
  .cart-dialog[open],
  .cart-count.pop {
    animation: none;
  }

  .social,
  .social-line {
    transition: none;
  }

  .social:hover {
    transform: none;
  }

  .card-img img {
    transition: none;
  }
}