:root {
  --sage: #e7ece2;
  --stem: #24412b;
  --peony: #eaa3b6;
  --plum: #4a1d3a;
  --paper: #fdfdfb;
  --serif: "Young Serif", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
}

body { background: var(--sage); color: var(--stem); font: 400 1.0625rem/1.6 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; }
h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
p { max-width: 56ch; }
.top, .hero, .week, .deliver, .foot { padding-inline: clamp(16px, 4vw, 56px); }

.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px; }
.top__name { font: 400 1.5rem/1 var(--serif); text-decoration: none; color: var(--plum); }
.top__call { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- hero: headline beside a photo with one rounded corner ---------- */
.hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto;
  gap: 0 clamp(12px, 2vw, 24px); padding-block: clamp(16px, 4vw, 48px) clamp(56px, 8vw, 112px);
}
.hero__title {
  grid-column: 1 / 7; grid-row: 1; z-index: 1; align-self: start;
  font-size: clamp(2.6rem, 6.6vw, 6.4rem); color: var(--plum); letter-spacing: -0.015em;
  margin-top: clamp(0px, 4vw, 48px);
}
.hero__img { grid-column: 7 / 13; grid-row: 1 / 3; overflow: hidden; border-radius: 0 0 0 clamp(80px, 14vw, 220px); }
.hero__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% center; }
.hero__aside { grid-column: 1 / 6; grid-row: 2; align-self: end; font-size: 1.1rem; }
.note { margin-top: 20px; display: inline-block; padding: 10px 16px; background: var(--peony); color: var(--plum); font-weight: 600; border-radius: 999px; }
@media (max-width: 820px) {
  .hero { display: flex; flex-direction: column; gap: 28px; }
  .hero__title { margin-top: 0; }
  .hero__img { border-radius: 0 0 0 80px; }
  .hero__img img { aspect-ratio: 4 / 3; }
}

/* ---------- bouquets ---------- */
.week { padding-block: clamp(56px, 8vw, 112px); background: var(--paper); }
.week__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 60px; margin-bottom: 48px; }
.week__head p { max-width: 40ch; }
.bouquets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.bq:nth-child(2) { margin-top: clamp(0px, 6vw, 80px); }
.bq img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #eee; margin-bottom: 18px; transform-origin: 50% 90%; }
.bq h3 { font-size: 1.7rem; color: var(--plum); }
.bq > p { margin-top: 4px; }
.bq__row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.sizes { display: flex; gap: 6px; }
.sizes button {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--stem); background: transparent;
  font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.sizes button[aria-checked="true"] { background: var(--stem); color: var(--paper); }
.sizes button:hover:not([aria-checked="true"]) { background: var(--sage); }
.price { font: 400 1.6rem/1 var(--serif); }
@media (max-width: 820px) { .bouquets { grid-template-columns: 1fr; max-width: 460px; } .bq:nth-child(2) { margin-top: 0; } }

/* ---------- delivery ---------- */
.deliver { display: grid; grid-template-columns: 0.8fr 1fr; gap: clamp(28px, 5vw, 88px); align-items: center; padding-block: clamp(56px, 8vw, 112px); background: var(--plum); color: #fff; }
.deliver img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 0 0; }
.deliver h2 { color: var(--peony); margin-bottom: 24px; }
.zones { margin: 0 0 24px; }
.zones div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgb(246 233 238 / 0.25); }
.zones dd { margin: 0; font-weight: 600; white-space: nowrap; }
.deliver__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.btn { display: inline-block; padding: 14px 24px; border-radius: 999px; background: var(--peony); color: var(--plum); font-weight: 600; text-decoration: none; border: 1.5px solid var(--peony); }
.btn:hover { background: #f4c0ce; }
.btn--ghost { background: transparent; color: var(--peony); }
.btn--ghost:hover { background: rgb(234 163 182 / 0.15); }
.hours { font-size: 0.95rem; opacity: 0.85; }
@media (max-width: 820px) { .deliver { grid-template-columns: 1fr; } .deliver img { max-width: 360px; } }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 24px 88px; font-size: 0.9rem; }