/* Hearth & Bloom. Palette and type come from the logos:
   cream paper, cocoa lettering, gold rules, dusty-rose and raspberry dahlias, sage. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond.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: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/nunito-sans.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: "Pinyon Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pinyon-script.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 {
  --cream: #FBF6EE;
  --paper: #FFFDF9;
  --linen: #F4EADC;
  --line: #EADCC7;
  --field-line: #DCC8AE;
  --gold: #B08A57;
  --gold-soft: #CDB18A;
  --ink: #4A2E1F;
  --cocoa: #6B4226;
  --brown: #7A4E2D;
  --muted: #5E4636;
  --muted-2: #6E5646;
  --rose: #A8505F;
  --berry: #9E4A58;
  --berry-dark: #7E3A47;
  --sage-ok: #4F5E3E;
  --sage-line: #CFDCC0;
  --error: #8C2F3E;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --radius: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brown); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2 { font-family: var(--serif); font-weight: 600; color: var(--cocoa); line-height: 1.15; margin: 0; }
h1 { font-size: clamp(34px, 5vw, 46px); }
h2 { font-size: clamp(30px, 4vw, 40px); }
p { margin: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--paper); padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.script { font-family: var(--script); font-size: 34px; color: var(--rose); line-height: 1.1; }
.script-lg { font-size: clamp(36px, 5vw, 46px); }
.lede { max-width: 600px; font-size: 18px; line-height: 1.7; color: var(--muted); }

/* Header */
.site-header { display: flex; justify-content: center; padding: 14px 20px 0; }
.top-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.top-nav a { text-decoration: none; padding: 12px 4px; }
.top-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* Home */
.hero-home { max-width: 1288px; margin: 0 auto; padding: 14px 24px 8px; }
.hero-banner { width: 100%; border-radius: var(--radius); box-shadow: 0 10px 34px rgba(122, 78, 45, 0.10); }
@media (max-width: 720px) {
  .hero-banner { width: 100%; max-width: 420px; margin: 0 auto; border-radius: 0; box-shadow: none; }
}
.shops { max-width: 1100px; margin: 0 auto; padding: 44px 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--gold); }
.divider span { display: block; width: 72px; height: 1px; background: var(--gold-soft); }
.shop-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; width: 100%; margin-top: 26px; }
@media (max-width: 720px) { .shop-cards { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.shop-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 24px 24px 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  text-decoration: none; color: var(--ink); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.shop-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(122, 78, 45, 0.16); color: var(--ink); }
.shop-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
/* The dahlia logo is square: show all of it in the 3:2 frame, on its own white. */
.shop-card .shop-card-img-bloom { object-fit: contain; background: #fff; }
.shop-card-name { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--cocoa); line-height: 1.2; }
.shop-card-text { font-size: 16px; color: var(--muted-2); }

.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.pill-outline { border: 1px solid var(--gold); color: var(--brown); }
.pill-solid { background: var(--berry); color: var(--paper); }
.shop-card:hover .pill-solid { background: var(--berry-dark); }

/* Buttons and fields */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 32px;
  border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--berry); color: var(--paper); }
.btn-primary:hover { background: var(--berry-dark); color: var(--paper); }
.btn-secondary { background: var(--paper); color: var(--cocoa); border: 1px solid var(--gold); }
.btn-secondary:hover { background: #F6EEE2; color: var(--ink); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 13px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
select {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--field-line); border-radius: 12px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 16px;
}
select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 138, 87, 0.25); }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #FDFAF4; font-size: 15px; color: var(--muted); cursor: pointer; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--berry); flex-shrink: 0; }
.check strong { color: var(--ink); }
.field-hint { font-size: 14px; color: var(--muted-2); }
input[type="text"], input[type="email"], input:not([type]), textarea {
  width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--field-line); border-radius: 12px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 16px;
}
textarea { padding: 12px 16px; min-height: 140px; resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 138, 87, 0.25); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.field label { font-size: 15px; font-weight: 700; color: var(--muted); }
.field-error { font-size: 15px; color: var(--error); }
.notice { padding: 18px 22px; border-radius: 16px; text-align: center; background: var(--paper); }
.notice-ok { border: 1px solid var(--sage-line); color: var(--sage-ok); }
.notice-error { border: 1px solid #E3B7BE; color: var(--error); }
.notice-warn { border: 1px solid #E8D29A; background: #FFF8E6; color: #6A4A12; }
.notice-test { border: 1px dashed var(--gold); color: var(--muted); font-size: 15px; }

/* Contact */
.contact { background: var(--linen); margin-top: 64px; padding: 60px 20px 72px; }
.contact-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.section-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 36px); }
.section-head p:last-child { color: var(--muted); }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form .btn { align-self: center; margin-top: 4px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

/* Notify me */
.signup { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.signup-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.signup-form input[type="email"] { flex: 1 1 260px; border-radius: 999px; }
.signup-form .btn { flex: 0 0 auto; }
@media (max-width: 520px) { .signup-form .btn { flex: 1 1 100%; } }

/* Coming soon and 404 */
.coming-soon { max-width: 980px; margin: 0 auto; padding: 20px 24px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.coming-soon-logo { width: 100%; max-width: 820px; border-radius: var(--radius); box-shadow: 0 10px 34px rgba(122, 78, 45, 0.10); margin-bottom: 8px; }
.aside-link { margin-top: 6px; font-size: 16px; }

/* Blooming Hearth */
.bloom-hero { max-width: 1100px; margin: 0 auto; padding: 32px 24px 8px; display: flex; align-items: center; gap: 36px; }
.bloom-hero-logo { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 10px 30px rgba(122, 78, 45, 0.12); }
.bloom-hero-text { display: flex; flex-direction: column; gap: 10px; }
.bloom-hero .scented-hero-logo { width: 320px; height: auto; border-radius: 16px; }
@media (max-width: 760px) {
  .bloom-hero { flex-direction: column; text-align: center; gap: 20px; }
  .bloom-hero-logo { width: 220px; height: 220px; }
  .bloom-hero .scented-hero-logo { width: min(100%, 360px); height: auto; }
  .bloom-hero-text { align-items: center; }
}
.opening-soon {
  max-width: 760px; margin: 40px auto 0; padding: 36px 28px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
@media (max-width: 800px) { .opening-soon { margin: 32px 16px 0; padding: 28px 18px; } }
.opening-soon > p { color: var(--muted); }

/* Footer */
.site-footer { padding: 30px 24px 38px; text-align: center; font-size: 15px; color: var(--muted-2); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.footer-name { font-family: var(--serif); font-size: 22px; color: var(--cocoa); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
.footer-nav a { padding: 10px 2px; }
.footer-copy { font-size: 13px; }

/* Catalog (Blooming Hearth shop) */
.preview-banner { margin: 0; padding: 12px 20px; background: #FFF4D6; border-bottom: 1px solid #E8D29A; text-align: center; font-size: 15px; color: var(--ink); }
.catalog { max-width: 1280px; margin: 28px auto 0; padding: 0 20px; display: flex; flex-direction: column; gap: 16px; }
.ordering-note { margin: 0 auto; padding: 12px 18px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 15px; color: var(--muted); text-align: center; }
.kind-tabs { display: flex; justify-content: center; gap: 8px; }
.kind-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid var(--gold); border-radius: 999px; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; color: var(--cocoa); background: var(--paper); }
.kind-tabs a[aria-current] { background: var(--cocoa); border-color: var(--cocoa); color: var(--paper); }
.kind-count { font-size: 13px; font-weight: 700; opacity: 0.75; }
.catalog-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.catalog-count { color: var(--muted); font-size: 15px; }
.sort-links { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.sort-links a { padding: 10px 12px; border-radius: 999px; text-decoration: none; }
.sort-links a[aria-current] { background: var(--cocoa); color: var(--paper); }
.letter-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.letter-bar a, .letter-bar span { min-width: 40px; height: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 700; text-decoration: none; }
.letter-bar a { color: var(--cocoa); }
.letter-bar a:hover { background: #F3DCD8; }
.letter-bar a[aria-current] { background: var(--cocoa); color: var(--paper); }
.letter-bar span { color: #B9A693; }
.variety-grid { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1100px) { .variety-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .variety-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.variety-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.variety-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #F3E4DF; display: flex; align-items: center; justify-content: center; color: var(--rose); }
/* Out of the flow, so a portrait photo cannot stretch the square frame. */
.variety-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.variety-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--gold); color: var(--cocoa); font-size: 12px; font-weight: 700; }
.variety-badge-dark { background: var(--muted); border-color: var(--muted); color: var(--paper); }
.variety-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.variety-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.variety-title h3 { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.variety-price { font-weight: 700; color: var(--cocoa); white-space: nowrap; }
.variety-desc { font-size: 14px; line-height: 1.5; color: var(--muted-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 480px) { .variety-title { flex-direction: column; gap: 2px; } .variety-title h3 { font-size: 19px; } }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 18px 0 4px; }
.pager a, .pager span { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; text-decoration: none; }
.pager a { border: 1px solid var(--field-line); }
.pager span[aria-current] { background: var(--cocoa); color: var(--paper); }
.catalog-empty { text-align: center; color: var(--muted); padding: 24px 0; }

/* Ordering: add to cart on the catalog */
.cart-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.cart-bar .ordering-note { margin: 0; }
.variety-ship { font-size: 13px; font-weight: 700; color: var(--muted-2); }
.added-note { font-size: 14px; color: var(--sage-ok); }
.add-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.add-form .btn { flex: 1 1 auto; }
.qty-pick { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }

/* Cart and order pages */
.cart { max-width: 760px; margin: 0 auto; padding: 24px 20px 8px; display: flex; flex-direction: column; gap: 16px; }
.cart h1 { font-size: clamp(32px, 5vw, 42px); }
.cart-back a { font-weight: 700; text-decoration: none; font-size: 15px; }
.cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.cart-thumb { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; }
.cart-thumb-empty { display: flex; align-items: center; justify-content: center; background: #F3E4DF; color: var(--rose); }
.cart-thumb-empty svg { width: 48px; height: 48px; }
.cart-item-name { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; }
.cart-item-meta { margin: 2px 0 0; font-size: 14px; color: var(--muted-2); }
.cart-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.qty-form { display: flex; align-items: center; gap: 8px; }
.cart-item-total { margin: 0; font-weight: 700; color: var(--cocoa); }
.cart-item-held { opacity: 0.85; border-style: dashed; }
.cart-item-held-note { margin: 6px 0 0; font-size: 14px; color: #6A4A12; }
@media (max-width: 520px) {
  .cart-item { grid-template-columns: 64px minmax(0, 1fr); }
  .cart-thumb { width: 64px; height: 64px; }
  .cart-item-total { grid-column: 2; }
}
.link-button { background: none; border: 0; padding: 10px 4px; font: inherit; font-size: 15px; color: var(--brown); text-decoration: underline; cursor: pointer; }
.checkout-form { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.checkout-form > .btn { align-self: stretch; }
.fulfillment { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fulfillment legend { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--cocoa); margin-bottom: 8px; padding: 0; }
.totals { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.totals div { display: flex; justify-content: space-between; gap: 12px; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-weight: 700; color: var(--cocoa); text-align: right; }
.totals-total { border-top: 1px solid var(--line); padding-top: 8px; font-size: 19px; }
.cart-empty { text-align: center; color: var(--muted); padding: 24px 0; }
.order .script { margin: 0; }
.order-card { padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; gap: 10px; }
.order-card h2 { font-size: 24px; }
.order-items { list-style: none; margin: 0; padding: 0; }
.order-items li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #F1E6D6; }
.pre { white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.order-help { color: var(--muted); }