/* ---- Self-hosted fonts ---- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/work-sans-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/work-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/work-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ==========================================================================
   PETALBY — Shared Stylesheet
   Warm minimalism: ivory, charcoal, dusty rose, sage, taupe, terracotta.
   Fonts: Cormorant Garamond (display/serif) + Work Sans (body/sans).
   ========================================================================== */
:root {
  /* Brand palette — exact hex codes, do not alter */
  --ivory: #F5EFE6;
  --charcoal: #2A2420;
  --dusty-rose: #C98F7B; /* skincare accent */
  --taupe: #B7A796; /* neutral / fragrance accent */
  --sage: #9CA88C; /* home goods accent */
  --success-text: #3F6642;   /* 5.76:1 on ivory */
  --muted-text:   #6B6157;   /* 5.29:1 on ivory */
  --terracotta: #9E4E31; /* CTA / sparing warm accent */
  --terracotta-text: #9E4E31; /* WCAG AA-safe darker terracotta for text on ivory (5.12:1, verified) */
  /* Tints (derived, for CSS-only placeholder art + subtle backgrounds) */
  --rose-tint: #ECD9D1;
  --sage-tint: #DEE3D6;
  --taupe-tint: #E6DED4;
  --charcoal-08: rgba(42, 36, 32, 0.08);
  --charcoal-15: rgba(42, 36, 32, 0.15);
  --charcoal-60: rgba(42, 36, 32, 0.82);
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --container-max: 1200px;
  --transition: 0.25s ease;
}

/* -------------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-behavior: smooth removed - was causing scroll stutter, no hash anchors on site to justify it */
body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  margin: 0 0 0.5em;
  line-height: 1.2;
  color: var(--charcoal);
}
p { margin: 0 0 1.2em; }
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 32px;
}
section { padding: 96px 0; }
.section-tight { padding: 64px 0; }

/* Eyebrow / label text used above headings */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta-text);
  margin-bottom: 14px;
}

/* -------------------------------------------------------------------------
   Wordmark — typography-only, Cormorant Garamond 500, generous tracking
   ------------------------------------------------------------------------- */
.wordmark {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--charcoal);
  white-space: nowrap;
}
.wordmark--nav { font-size: 1.7rem; }
.wordmark--hero {
  font-size: clamp(3rem, 9vw, 8.25rem);
  letter-spacing: 0.06em;
}
.wordmark--footer { font-size: 2.1rem; color: var(--ivory); }
.wordmark--light { color: var(--ivory); }

/* Logo images (nav + footer) */
.logo-img { display:block; width:auto; }
.logo-img--nav { height:117px; }
.logo-img--footer { height:119px; }
.logo-img--newsletter { height:119px; margin:0 auto 14px; }

/* Hero visual photo */
.hero-visual { width:100%; max-width:1100px; margin:40px auto 0; border-radius:4px; overflow:hidden; }
.hero-visual img { width:100%; height:auto; max-height:520px; object-fit:cover; display:block; }

/* Value-group card photo (layers under the existing gradient + text) */
.category-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; box-shadow: inset 0 -180px 140px -60px rgba(42,36,32,0.65); }

/* Monogram: circular ring outline with a serif "P" centered inside */
.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.monogram--sm { width: 40px; height: 40px; font-size: 1.1rem; }
.monogram--lg { width: 96px; height: 96px; font-size: 2.4rem; }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-primary {
  background: var(--terracotta);
  color: var(--ivory);
  border-color: var(--terracotta);
}
.btn-primary:hover { background: #964a2f; border-color: #964a2f; }
.btn-outline {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal-15);
}
.btn-outline:hover { border-color: var(--charcoal); }

.btn-outline-light {
  background: transparent;
  color: var(--ivory);
  border-color: rgba(245,239,230,0.6);
}
.btn-outline-light:hover { border-color: var(--ivory); background: rgba(245,239,230,0.08); }
.btn-outline--light {
  color: var(--ivory);
  border-color: rgba(245, 239, 230, 0.35);
}
.btn-outline--light:hover { border-color: var(--ivory); }
.btn-block { width: 100%; text-align: center; }

/* -------------------------------------------------------------------------
   Header / Navigation
   ------------------------------------------------------------------------- */
.announcement-bar {
  background: var(--charcoal);
  color: var(--ivory);
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 16px;
    contain: layout paint; transform: translateZ(0);
}
.breadcrumbs {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px 32px 0;
  font-size: 0.75rem;
  color: var(--charcoal-60, rgba(42,37,33,0.6));
  letter-spacing: 0.02em;
}
.breadcrumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.breadcrumbs a:hover {
  border-bottom-color: currentColor;
}
.breadcrumbs .sep {
  margin: 0 6px;
  opacity: 0.5;
}
.breadcrumbs .current {
  color: var(--charcoal);
}
@media (max-width: 600px) {
  .breadcrumbs { padding: 14px 20px 0; font-size: 0.7rem; }
  .announcement-bar { font-size: 0.65rem; padding: 8px 12px; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ivory);
  border-bottom: 1px solid var(--charcoal-08);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.nav-links {
  display: flex;
  gap: 40px;
}
.nav-links a {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  border-color: var(--terracotta);
  color: var(--terracotta-text);
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 20px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--charcoal);
  transition: transform var(--transition), opacity var(--transition), top var(--transition);
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 18px; }
.nav-toggle.is-open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  text-align: center;
  padding: 120px 32px 100px;
  background: var(--ivory);
}
.hero-tagline {
  max-width: 560px;
  margin: 24px auto 40px;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--charcoal-60);
}
.hero-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Page header for interior pages (Shop / About / Contact) */
.page-header {
  text-align: center;
  padding: 88px 32px 64px;
  background: var(--ivory);
}
.page-header h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); }
.page-header p {
  max-width: 540px;
  margin: 16px auto 0;
  color: var(--charcoal-60);
}

/* -------------------------------------------------------------------------
   Shop-by-value-group cards
   ------------------------------------------------------------------------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.category-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  padding: 36px;
  border-radius: 2px;
  overflow: hidden;
  transition: transform var(--transition);
}
.category-card:hover { transform: translateY(-4px); }
.category-card--home { background: linear-gradient(160deg, var(--sage-tint), var(--sage) 130%); }
.category-card--skincare { background: linear-gradient(160deg, var(--rose-tint), var(--dusty-rose) 130%); }
.category-card--fragrance { background: linear-gradient(160deg, var(--taupe-tint), var(--taupe) 130%); }
/* Value-group tier aliases (mystery pots) — same system, new names */
.category-card--bud { background: linear-gradient(160deg, var(--sage-tint), var(--sage) 130%); }
.category-card--bloom { background: linear-gradient(160deg, var(--rose-tint), var(--dusty-rose) 130%); }
.category-card--bouquet { background: linear-gradient(160deg, var(--taupe-tint), var(--taupe) 130%); }
.category-card-content { position: relative; z-index: 2; color: var(--charcoal); }
.category-card-content .eyebrow { color: var(--charcoal); opacity: 0.6; }
.category-card-content h3 { font-size: 1.9rem; margin-bottom: 6px; }
.category-card-content span.link-label {
  font-size: 0.70rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--charcoal);
}
/* Decorative ring nodding to the monogram, purely CSS */
.category-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(42, 36, 32, 0.18);
}

/* -------------------------------------------------------------------------
   Product grid + CSS-only placeholder visuals
   ------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
.product-card { display: flex; flex-direction: column; }
/*
PRODUCT VISUAL — CSS-ONLY PLACEHOLDER
--------------------------------------
There is no real product photography yet. Rather than a broken <img> or a
generic stock photo, each card gets an intentional colour-block treatment
with a fine border and a centred ring (nodding to the Petalby monogram).

TO ADD A REAL PHOTO LATER:
1. Replace the empty <div class="product-visual cat-xxx"></div> with:
   <img src="images/products/your-photo.jpg" alt="Product name" class="product-visual">
2. Or keep the div and add: style="background-image:url('images/products/your-photo.jpg'); background-size:cover; background-position:center;"
3. Create an /images/products/ folder alongside this stylesheet for your photos.
*/
.product-visual {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid var(--charcoal-08);
  position: relative;
  margin-bottom: 20px;
  background-size: cover;
  background-position: center;
  object-fit: cover;
  display: block;
  box-shadow: 0 16px 32px -12px rgba(42, 36, 32, 0.22);
}
.product-visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  height: 34%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(42, 36, 32, 0.2);
}
.product-visual.cat-skincare { background-color: var(--rose-tint); }
.product-visual.cat-home { background-color: var(--sage-tint); }
.product-visual.cat-fragrance { background-color: var(--taupe-tint); }
.product-card h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}
.product-card h2 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}
.product-price {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--terracotta-text);
  margin-bottom: 10px;
}
.product-desc {
  font-size: 0.92rem;
  color: var(--charcoal-60);
  margin-bottom: 0;
}
.product-tag {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-60);
  margin-bottom: 10px;
}
/* Value-group tier badge (shop page tier cards) */
.tier-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--charcoal-15);
  border-radius: 2px;
  margin-bottom: 14px;
  color: var(--charcoal-60);
  align-self: flex-start;
}

/* Shop page category filter buttons */
.filter-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.filter-btn {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--charcoal-15);
  color: var(--charcoal);
  padding: 12px 26px;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-btn:hover { border-color: var(--charcoal); }
.filter-btn.is-active {
  background: var(--charcoal);
  color: var(--ivory);
  border-color: var(--charcoal);
}
.category-section { margin-bottom: 80px; }
.category-section:last-child { margin-bottom: 0; }
.category-section-heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--charcoal-08);
  padding-bottom: 20px;
}
.category-section-heading h2 { margin-bottom: 0; }
.category-section-heading .swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.swatch--skincare { background: var(--dusty-rose); }
.swatch--home { background: var(--sage); }
.swatch--fragrance { background: var(--taupe); }

/* Section heading row with optional link */
.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 16px;
}

/* -------------------------------------------------------------------------
   Brand story / about blurb blocks
   ------------------------------------------------------------------------- */
.story-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.story-visual {
  aspect-ratio: 5 / 4;
  background: linear-gradient(150deg, var(--taupe-tint), var(--ivory));
  border: 1px solid var(--charcoal-08);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-visual .monogram { color: var(--charcoal-60); }
.story-copy p { color: var(--charcoal-60); }
.story-visual { overflow: hidden; padding: 0; }
.story-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-block--reverse { direction: rtl; }
.story-block--reverse > * { direction: ltr; }
.story-chapter-label { display:block; font-family: var(--font-serif); font-style: italic; color: var(--terracotta-text); margin-bottom: 6px; }
@media (max-width: 767px) {
  .story-block { grid-template-columns: 1fr; gap: 28px; }
  .story-block--reverse { direction: ltr; }
  .story-visual { aspect-ratio: 4/3; }
}
.story-visual { overflow: hidden; padding: 0; }
.story-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-block--reverse { direction: rtl; }
.story-block--reverse > * { direction: ltr; }
.story-chapter-label { display:block; font-family: var(--font-serif); font-style: italic; color: var(--terracotta-text); margin-bottom: 6px; }
@media (max-width: 767px) {
  .story-block { grid-template-columns: 1fr; gap: 28px; }
  .story-block--reverse { direction: ltr; }
  .story-visual { aspect-ratio: 4/3; }
}

.dark-section {
  background: var(--charcoal);
  color: var(--ivory);
}
.dark-section h2, .dark-section h3 { color: var(--ivory); }
.dark-section p { color: rgba(245, 239, 230, 0.72); }

/* -------------------------------------------------------------------------
   Newsletter
   ------------------------------------------------------------------------- */
.newsletter {
  text-align: center;
  padding: 88px 32px;
}
.newsletter h2 { font-size: 2.2rem; }
.newsletter p { max-width: 480px; margin: 0 auto 32px; }
.newsletter-form {
  display: flex;
  max-width: 440px;
  margin: 0 auto;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(245, 239, 230, 0.4);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 10px 4px;
}
.newsletter-form input[type="email"]::placeholder { color: rgba(245, 239, 230, 0.5); }
.newsletter-form input[type="email"]:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; border-color: var(--ivory); }
.form-note {
  font-size: 0.70rem;
  color: rgba(245, 239, 230, 0.5);
  margin-top: 16px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.form-message {
  margin-top: 16px;
  font-size: 0.85rem;
  display: none;
}
.form-message.is-visible { display: block; }

/* -------------------------------------------------------------------------
   Contact page form
   ------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
}
.contact-form label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-60);
  margin-bottom: 8px;
}
.contact-form .field { margin-bottom: 26px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--charcoal-15);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--charcoal);
  padding: 10px 2px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--terracotta);
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}
.contact-details h3 { margin-top: 0; }
.contact-details .detail-row {
  margin-bottom: 28px;
}
.contact-details .detail-row span.label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-60);
  margin-bottom: 6px;
}

/* -------------------------------------------------------------------------
   FAQ / "How mystery pots work" accordion
   ------------------------------------------------------------------------- */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--charcoal-08);
  padding: 20px 0;
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--charcoal);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--terracotta-text);
  margin-left: 16px;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p {
  margin-top: 14px;
  margin-bottom: 0;
  color: var(--charcoal-60);
  font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--charcoal);
  color: var(--ivory);
  padding: 80px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr 0.9fr;
  gap: 32px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(245, 239, 230, 0.12);
}
.footer-about p {
  color: rgba(245, 239, 230, 0.6);
  font-size: 0.92rem;
  max-width: 320px;
  margin-top: 10px;
}
.footer-col h4 {
  color: var(--ivory);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 500;
  margin-bottom: 18px;
}
.footer-col h2 {
  color: var(--ivory);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 500;
  margin-bottom: 18px;
}
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a {
  color: rgba(245, 239, 230, 0.65);
  font-size: 0.92rem;
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--ivory); }
.payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 0;
  border-top: 1px solid rgba(245, 239, 230, 0.12);
  flex-wrap: wrap;
}
.payment-icons-label {
  font-size: 0.70rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.45);
  margin-right: 6px;
}
.payment-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.payment-icon-row svg {
  display: block;
  color: rgba(245, 239, 230, 0.55);
  transition: color var(--transition);
}
.payment-icon-row svg:hover { color: rgba(245, 239, 230, 0.9); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  font-size: 0.70rem;
  color: rgba(245, 239, 230, 0.45);
  flex-wrap: wrap;
  gap: 12px;
}

/* -------------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .category-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .story-block { grid-template-columns: 1fr; gap: 32px; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  section { padding: 72px 0; }
}

@media (max-width: 640px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ivory);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--charcoal-08);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .nav-links.is-open { max-height: 400px; }
  .nav-links a {
    display: block;
    padding: 16px 32px;
    border-bottom: 1px solid var(--charcoal-08);
  }
  .nav-toggle { display: block; }
  .site-header { position: relative; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero { padding: 80px 20px 64px; }
  section { padding: 56px 0; }
  .container { padding: 0 20px; }
}

@media (max-width: 420px) {
  .product-grid { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------------------
   Full-bleed redesign (Sonos / Waterstones inspired)
   ------------------------------------------------------------------------ */
.hero-full {
  position: relative;
  width: 100%;
  height: 62vh;
  min-height: 480px;
  max-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-slideshow { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroFade 20s infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 5s; }
.hero-slide:nth-child(3) { animation-delay: 10s; }
.hero-slide:nth-child(4) { animation-delay: 15s; }
@keyframes heroFade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  22% { opacity: 1; }
  27% { opacity: 0; }
  100% { opacity: 0; }
}
.hero-full-overlay {
  position: absolute; inset: 0;
  background-image: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(42,36,32,0.74) 0%, rgba(42,36,32,0.46) 45%, rgba(42,36,32,0.16) 75%, rgba(42,36,32,0) 100%), linear-gradient(180deg, rgba(42,36,32,0.18) 0%, rgba(42,36,32,0.5) 100%), linear-gradient(rgba(30,26,22,0.45), rgba(30,26,22,0.45));
}
.hero-full-content { position: relative; z-index: 2; padding: 0 32px; }
.hero-full-tagline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: var(--ivory);
  margin: 0 0 32px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.3);
  line-height: 1.1;
}

.hero-full-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.224em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.hero-full-headline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  color: var(--ivory);
  margin: 0 auto 20px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.35);
  line-height: 1.22;
  max-width: 780px;
}
.hero-full-subhead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  color: rgba(245,239,230,0.92);
  max-width: 620px;
  margin: 0 auto 32px;
  line-height: 1.5;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.hero-full-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-scroll-cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-right: 2px solid rgba(245,239,230,0.65);
  border-bottom: 2px solid rgba(245,239,230,0.65);
  transform: translateX(-50%) rotate(45deg);
  animation: heroScrollCue 1.8s ease-in-out infinite;
  z-index: 2;
}
@keyframes heroScrollCue {
  0%, 100% { opacity: 0.4; margin-top: 0; }
  50% { opacity: 1; margin-top: 8px; }
}
@media (max-width: 640px) {
  .hero-full-ctas { flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto; }
  .hero-full-ctas .btn { width: 100%; }
}

/* Full-bleed tier / story blocks */
.tier-block {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.tier-block-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,36,32,0.25) 0%, rgba(42,36,32,0.55) 100%);
}
.tier-block-content { position: relative; z-index: 2; padding: 0 32px; max-width: 640px; }
.tier-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.85;
  margin-bottom: 14px;
}
.tier-block-content h2 {
  color: var(--ivory);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin-bottom: 14px;
}
.tier-block-content p {
  color: rgba(245,239,230,0.95);
  font-size: 1.05rem;
  margin-bottom: 28px;
}

/* Trust bar */
.trust-bar { background: var(--rose-tint); padding: 56px 0; }
.trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.trust-item h4 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.trust-item h2 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.trust-item p { font-size: 0.88rem; color: var(--charcoal-60); margin-bottom: 0; }

/* Footer tagline */
.footer-tagline {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ivory);
  margin-top: 14px;
  margin-bottom: 0;
}

.footer-about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Curated shop collections (Waterstones-style) */
.collection-block { margin-bottom: 88px; }
.collection-block:last-child { margin-bottom: 0; }
.collection-head { max-width: 620px; margin-bottom: 32px; }
.collection-head .eyebrow { margin-bottom: 10px; }
.collection-head p { color: var(--charcoal-60); }

@media (max-width: 900px) {
  .tier-block { min-height: 56vh; }
  .trust-bar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero-full { height: auto; min-height: 78vh; padding: 48px 0; }
  .trust-bar-grid { grid-template-columns: 1fr; text-align: center; }
}

.curator-tag {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-text);
  margin-bottom: 6px;
  font-weight: 500;
}


/* ------------------------------------------------------------------------
   Prestige-site polish pass (scroll reveal, condensed sticky nav, subtle
   image zoom-on-hover) - inspired by Chanel / Aesop restrained-luxury detailing
   ------------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* .site-header condensation transitions moved to header-inner/header-identity/header-tagline/logo-img--nav below */
.header-tagline {
  max-height: 30px;
  overflow: hidden;
      transition: opacity 0.25s ease, max-height 0.25s ease, margin 0.25s ease;
}
.logo-img--nav { transition: height 0.25s ease; }
.site-header.is-scrolled .header-inner { padding-top: 10px; padding-bottom: 8px; }
.site-header.is-scrolled .header-identity { margin-bottom: 8px; }
.site-header.is-scrolled .header-tagline { max-height: 0; opacity: 0; margin: 0; }
.site-header.is-scrolled .logo-img--nav { height: 81px; }

.tier-block { transition: background-size 0.7s ease; }
.tier-block:hover { background-size: 108%; }


/* ------------------------------------------------------------------------
   Centered header identity + nav hover leaf
   ------------------------------------------------------------------------ */
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 32px 16px;
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  transition: padding 0.25s ease;
}
.header-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
  transition: margin-bottom 0.25s ease;
}
.header-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--charcoal-60);
  letter-spacing: 0.02em;
  margin: 4px 0 0;
}
.header-nav-row {
  width: 100%;
  display: flex;
  justify-content: center;
}
.nav-links {
  justify-content: center;
}
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 50%;
  width: 13px;
  height: 16px;
  background: url('images/leaf-mark.svg') no-repeat center / contain;
  opacity: 0;
  transform: translateX(-50%) translateY(-4px) scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav-toggle {
  position: absolute;
  top: 22px;
  right: 32px;
}
@media (max-width: 640px) {
  .header-inner { padding: 18px 20px 14px; }
  .nav-links a::after { display: none; }
}


/* Tighten header tagline spacing under wordmark */
.header-identity .wordmark--nav { display: block; line-height: 0; }
.header-tagline { margin-top: -6px; text-align: center; }


/* ------------------------------------------------------------------------
   Cart system: header cart icon, slide-in drawer, PDP qty + add-to-cart
   ------------------------------------------------------------------------ */
.header-actions { position: absolute; top: 22px; right: 32px; display: flex; align-items: center; gap: 14px; }
.header-actions .nav-toggle { position: relative; top: auto; right: auto; }
.cart-toggle { position: relative; background: none; border: none; cursor: pointer; padding: 4px; color: var(--charcoal); display: flex; align-items: center; }
.cart-icon-svg { width: 21px; height: 21px; display: block; }
.cart-count { position: absolute; top: -6px; right: -8px; background: var(--terracotta); color: var(--ivory); font-family: var(--font-sans); font-size: 0.62rem; line-height: 1; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 2px; }
.cart-count.is-empty { display: none; }

.cart-overlay { position: fixed; inset: 0; background: rgba(42,36,32,0.4); opacity: 0; pointer-events: none; transition: opacity var(--transition); z-index: 200; }
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; background: var(--ivory); box-shadow: -8px 0 32px rgba(0,0,0,0.12); transform: translateX(100%); transition: transform var(--transition); z-index: 201; display: flex; flex-direction: column; }
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 16px; border-bottom: 1px solid var(--charcoal-08); }
.cart-drawer-header .cart-title { margin: 0; font-size: 1.3rem; }
.cart-close { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--charcoal-60); }
.cart-items { flex: 1; overflow-y: auto; padding: 8px 24px; }
.cart-items.is-empty { display: none; }
.cart-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--charcoal-08); }
.cart-item-img { width: 72px; height: 72px; border-radius: 2px; border: 1px solid var(--charcoal-08); background-size: cover; background-position: center; flex-shrink: 0; }
.cart-item-info { flex: 1; }
.cart-item-info h4 { font-size: 1rem; margin: 0 0 4px; }
.cart-item-price { font-family: var(--font-sans); font-size: 0.85rem; color: var(--terracotta-text); margin-bottom: 8px; }
.cart-qty-row { display: flex; align-items: center; gap: 10px; }
.cart-qty-btn { width: 22px; height: 22px; border: 1px solid var(--charcoal-15); background: none; cursor: pointer; font-size: 0.85rem; line-height: 1; border-radius: 2px; }
.cart-remove { font-size: 0.75rem; color: var(--charcoal-60); text-decoration: underline; cursor: pointer; background: none; border: none; margin-left: auto; }
.cart-empty { padding: 40px 24px; text-align: center; color: var(--charcoal-60); display: none; }
.cart-empty.is-visible { display: block; }
.cart-footer { padding: 20px 24px 24px; border-top: 1px solid var(--charcoal-08); }
.cart-subtotal-row { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 1rem; margin-bottom: 8px; }
.cart-note { font-size: 0.875rem; color: var(--charcoal-60); margin-bottom: 16px; }
.cart-checkout-btn { display: block; width: 100%; text-align: center; border: none; cursor: pointer; }

.product-meta { font-family: var(--font-sans); font-size: 0.76rem; color: var(--charcoal-60); margin: 10px 0 0; }
.product-actions { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--charcoal-15); border-radius: 2px; flex-shrink: 0; }
.qty-btn { width: 32px; height: 36px; background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--charcoal); }
.qty-input { width: 34px; height: 36px; border: none; border-left: 1px solid var(--charcoal-15); border-right: 1px solid var(--charcoal-15); text-align: center; font-family: var(--font-sans); font-size: 0.9rem; }
.qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.add-to-cart-btn { flex: 1; text-align: center; cursor: pointer; border: none; font-family: var(--font-sans); }

@media (max-width: 640px) {
  .cart-drawer { width: 100vw; max-width: 100vw; }
  .product-actions { flex-wrap: wrap; }
  .add-to-cart-btn { width: 100%; }
}


/* ------------------------------------------------------------------------
   Checkout page (Stripe-ready)
   ------------------------------------------------------------------------ */
.checkout-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.checkout-heading { font-size: 1.3rem; margin-bottom: 20px; }

.checkout-shipping-note {
  font-size: 13px;
  color: rgba(42, 36, 32, 0.82);
  margin-top: 8px;
  line-height: 1.5;
}
.checkout-shipping-note a {
  color: var(--terracotta-text, var(--terracotta));
  text-decoration: underline;
}
.checkout-field-error {
  font-size: 13px;
  color: #A6341F;
  margin-top: 6px;
  display: none;
}
.checkout-field-error.is-visible {
  display: block;
}
.checkout-form .form-row { margin-bottom: 16px; }
.checkout-form label { display: block; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--charcoal-60); margin-bottom: 6px; text-transform: uppercase; }
.checkout-form input, .checkout-form select { width: 100%; padding: 11px 12px; border: 1px solid var(--charcoal-15); border-radius: 2px; font-family: var(--font-sans); font-size: 0.92rem; background: var(--ivory); color: var(--charcoal); }
.form-row-split { display: flex; gap: 16px; }
.form-row-split label { flex: 1; }
.stripe-payment-box { border: 1px solid var(--charcoal-15); border-radius: 4px; padding: 20px; margin: 24px 0; background: var(--ivory); min-height: 44px; }
.stripe-security-note { margin-top: 10px; }
.checkout-confirmation { padding: 32px 0; }
.checkout-confirmation h2 { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 500; margin: 6px 0 14px; color: var(--charcoal); }
.checkout-confirmation p { color: var(--charcoal-60); line-height: 1.6; max-width: 40ch; }
.stripe-placeholder-note { font-size: 0.82rem; color: var(--charcoal-60); margin: 0; line-height: 1.5; }
.checkout-submit-btn { width: 100%; text-align: center; border: none; cursor: pointer; font-size: 0.9rem; }
.checkout-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.checkout-disclaimer { font-size: 0.78rem; color: var(--charcoal-60); margin-top: 14px; text-align: center; line-height: 1.5; }
.checkout-summary-col { background: var(--rose-tint); padding: 28px; border-radius: 4px; }
.checkout-summary-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--charcoal-08); }
.checkout-item-line-total { font-family: var(--font-sans); font-size: 0.9rem; margin-left: auto; }
.checkout-summary-totals { margin-top: 16px; }
.summary-row { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 0.92rem; padding: 6px 0; }
.summary-row-total { font-size: 1.1rem; font-weight: 600; border-top: 1px solid var(--charcoal-15); margin-top: 8px; padding-top: 12px; }
.checkout-empty-note { font-size: 0.9rem; color: var(--charcoal-60); }
.checkout-empty-note a { color: var(--terracotta-text); }
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary-col { order: -1; }
}


/* --- Petalby polish round 2: add-to-cart micro-feedback --- */
.add-to-cart-btn.is-added {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--ivory);
  cursor: default;
}
@keyframes petalbyCartBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); }
  65% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.cart-toggle.cart-bump {
  animation: petalbyCartBump 0.42s ease;
}


/* --- Petalby polish round 2: subtle product image zoom on hover --- */
.product-visual {
  transition: background-size 0.6s ease;
}
.product-card:hover .product-visual {
  background-size: 112%;
}


/* --- Petalby polish round 3: editorial script accent for key section intros --- */
.eyebrow--script {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--dusty-rose);
  margin-bottom: 2px;
}


/* --- Petalby polish round 3: newsletter success/error states --- */
.newsletter-success {
  color: var(--sage);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  max-width: 440px;
  margin: 0 auto;
}
.newsletter-error {
  color: var(--dusty-rose);
  font-size: 0.85rem;
  max-width: 440px;
  margin: 10px auto 0;
}

.story-chapters .story-block:not(:last-child) { margin-bottom: 100px; }
.story-chapters { padding-top: 8px; }
.story-closing-line { font-family: var(--font-serif); font-style: italic; color: var(--terracotta-text); margin-top: 20px; font-size: 1.1rem; }
.story-visual { border-radius: 20px !important; box-shadow: 0 16px 32px -12px rgba(42, 36, 32, 0.22) !important; border-color: transparent !important; }
.story-visual img { border-radius: 20px !important; }
/* ================================= LEGAL/POLICY CONTENT PAGES ================================= */
.content-page { max-width: 760px; margin: 0 auto; }
.content-page h2 { margin-top: 2em; }
.content-page h2:first-child { margin-top: 0; }
.content-page h3 { margin-top: 1.6em; color: var(--charcoal); }
.content-page p { color: var(--charcoal-60); }
.content-page .lede { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--terracotta-text); margin-bottom: 1.4em; }
.content-list { list-style: disc; padding-left: 1.4em; margin: 0 0 1.2em; }
.content-list li { margin-bottom: 10px; color: var(--charcoal-60); }
.content-list li::marker { color: var(--terracotta-text); }
.content-page a { color: var(--terracotta-text); text-decoration: underline; text-underline-offset: 3px; }

.hero-video-wrap { position: absolute; inset: 0; }
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ================================= SCROLLING ANNOUNCEMENT MARQUEE ================================= */
.announcement-bar {
  background: var(--charcoal);
  color: var(--ivory);
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: marqueeScroll 26s linear infinite;
  will-change: transform;
}
.announcement-bar:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 20px;
  white-space: nowrap;
}
.marquee-sep { opacity: 0.5; padding: 0 !important; }
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ================================= HOMEPAGE PRODUCT GRID ================================= */
.home-product-grid { padding: 72px 0 80px; background: var(--ivory); }
.home-product-grid .section-heading { text-align: center; margin-bottom: 40px; }

.product-carousel {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.product-grid-row {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 12px;
  scrollbar-width: none;
}
.product-grid-row::-webkit-scrollbar { display: none; }
.product-grid-row:focus-visible { outline: 2px solid var(--terracotta-text); outline-offset: 4px; }
.product-grid-card {
  display: block;
  text-decoration: none;
  color: var(--charcoal);
  text-align: center;
  transition: transform 0.25s ease;
  flex: 0 0 auto;
  width: calc((100% - 56px) / 3);
  scroll-snap-align: start;
}
.product-grid-card:hover { transform: translateY(-4px); }
.product-grid-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 16px 32px -12px rgba(42, 36, 32, 0.22);
  margin-bottom: 16px;
  display: block;
}
.product-grid-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 0 0 4px;
}
.product-grid-card h2 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 0 0 4px;
}
.product-grid-price {
  color: var(--terracotta-text);
  font-size: 0.95rem;
  margin: 0;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(250, 247, 242, 0.92);
  box-shadow: 0 6px 18px rgba(42, 36, 32, 0.2);
  color: var(--charcoal);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.carousel-arrow:hover { background: var(--ivory); }
.carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.carousel-arrow--prev { left: -22px; }
.carousel-arrow--next { right: -22px; }
@media (max-width: 900px) {
  .product-grid-card { width: calc((100% - 28px) / 2); }
}
@media (max-width: 640px) {
  .product-grid-card { width: min(280px, 78vw); }
  .carousel-arrow { display: none; }
}


/* ================================= ETHOS REINFORCEMENT NOTE ================================= */
.ethos-note {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--terracotta-text);
  font-size: 0.98rem;
  margin-top: 14px;
  max-width: 640px;
}

/* ================================= TESTIMONIALS / TRUST SECTION ================================= */
.testimonials-section { padding: 72px 0 84px; background: var(--ivory); text-align: center; }
.testimonials-section .section-heading { margin-bottom: 32px; }
.testimonials-placeholder {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 36px;
  border: 1px solid rgba(42, 36, 32, 0.14);
  border-radius: 16px;
  background: #fff;
}
.testimonials-placeholder .placeholder-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--terracotta-text);
  margin-bottom: 14px;
  display: block;
}
.testimonials-placeholder p { margin: 0 0 14px; color: var(--charcoal); line-height: 1.6; }
.testimonials-placeholder p:last-child { margin-bottom: 0; }
.testimonials-placeholder .placeholder-cta { font-size: 0.9rem; }
.testimonials-placeholder .placeholder-cta a { color: var(--terracotta-text); text-decoration: underline; }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1040px;
  margin: 0 auto;
}
.testimonial-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 32px -12px rgba(42, 36, 32, 0.14);
  padding: 32px 28px;
  text-align: left;
}
.testimonial-card .testimonial-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--charcoal);
  margin: 0 0 16px;
}
.testimonial-card .testimonial-author {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terracotta-text);
  margin: 0;
}
@media (max-width: 640px) {
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonials-placeholder { padding: 32px 22px; }
}


/* Founder note placeholder (about.html) — honest stand-in until Ross supplies a real name + photo */
.founder-note { max-width: 480px; margin: 0 auto; }
.founder-avatar-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: var(--sage-tint);
  border: 1px dashed var(--charcoal-15);
}
.founder-note-text { color: var(--charcoal-60); font-style: italic; }

/* Contact page signature line placeholder */
.ethos-signoff {
  font-size: 0.85rem;
  color: var(--charcoal-60);
  font-style: italic;
  margin-top: 8px;
}

.payment-secure-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--muted-text);
}
.payment-secure-badge svg {
  flex-shrink: 0;
  color: var(--muted-text);
}

.content-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  margin-left: 8px;
  border-radius: 2px;
  background: var(--sage-tint);
  color: var(--charcoal-60);
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-bg { display: none; }
}


/* ---- Consent banner (Task 9: presentational only, matches brand) ---- */
.petalby-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--charcoal);
  color: var(--ivory);
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.petalby-consent__actions {
  display: flex;
  gap: 8px;
}
.petalby-consent__accept,
.petalby-consent__decline {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 2px;
  cursor: pointer;
}
.petalby-consent__accept {
  background: var(--terracotta);
  color: var(--ivory);
  border: none;
}
.petalby-consent__decline {
  background: transparent;
  color: var(--ivory);
  border: 1px solid var(--ivory);
}
.petalby-consent__accept:focus-visible,
.petalby-consent__decline:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--charcoal);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 3px 0;
}
.skip-link:focus {
  left: 0;
}


/* Tier 1 Task 9: global keyboard focus ring fallback */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.cart-toggle:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}


/* Tier 1 Task 10: delivery-by date lines */
.delivery-by-line {
  font-size: 0.875rem;
  color: var(--charcoal-60);
  margin: 0 0 10px;
}
.delivery-by-line strong {
  color: var(--terracotta-text, var(--terracotta));
  font-weight: 600;
}
.scarcity-line {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terracotta-text, var(--terracotta));
  margin: 0 0 8px;
}
.cart-delivery-line {
  margin-top: -8px;
}
.checkout-delivery-line {
  font-size: 0.875rem;
  color: var(--charcoal-60);
  margin: 6px 0 0;
}
.checkout-delivery-line strong {
  color: var(--terracotta-text, var(--terracotta));
}

/* Round 2 V1.3: value element — bordered box above Add to Cart, shows typical retail value vs price paid */
.value-element {
  border: 1px solid var(--terracotta-text, var(--terracotta));
  background: var(--ivory);
  padding: 12px 14px;
  margin: 8px 0 10px;
  border-radius: 2px;
}
.value-line1 {
  font-size: 15px;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0;
}
.value-line2 {
  font-size: 13px;
  color: var(--charcoal-60);
  margin: 4px 0 0;
}

/* Round 2 V8.3: scarcity badge — sits in the label cluster (was a floating line) */
.scarcity-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta-text, var(--terracotta));
  margin: 0 0 14px;
  align-self: flex-start;
}


/* Tier 1 Task 11: Spa Edit homepage promo */
.spa-edit-promo .container {
  max-width: 640px;
  text-align: center;
}
.spa-edit-promo h2 {
  margin: 6px 0 16px;
}
.spa-edit-promo p {
  margin: 0 0 28px;
}
.spa-edit-promo .btn {
  display: inline-block;
}

.klarna-note {
  font-size: 0.875rem;
  color: var(--charcoal-60);
  margin: 2px 0 0;
}
.cart-klarna-note {
  font-size: 0.875rem;
  color: var(--charcoal-60);
  margin: 2px 0 0;
}

.checkout-reassurance {
  font-size: 0.875rem;
  color: var(--charcoal-60);
  text-align: center;
  margin: 14px 0 0;
}


/* ===== Fix Pack additions (5 Aug 2026 round) ===== */

/* Task 6: hero headline had no colour rule and rendered near-black on the video */
.hero-full-headline {
  color: var(--ivory);
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}

/* Task 6a: consent banner corner card on desktop so it doesn't cover hero CTAs */
@media (min-width: 768px) {
  .petalby-consent--corner {
    left: auto; right: 24px; bottom: 24px;
    max-width: 380px; border-radius: 2px;
  }
}

/* Task 17: footer column and trust-bar labels demoted from h2 to styled paragraphs */
.footer-col-title {
  color: var(--ivory);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 500;
  margin-bottom: 18px;
}
.trust-item-title {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 8px;
}

/* ===== Fix Pack Task 9 additions (6 Aug 2026 round) ===== */

/* .content-page a was overriding .btn-primary/.btn-outline text colour,
   making button text invisible against its own background on the
   6 policy/content pages (promise, sustainability, ethics, careers,
   privacy, accessibility). Restore the intended button colours. */
.content-page a.btn-primary { color: var(--ivory); }
.content-page a.btn-outline { color: var(--charcoal); }
.content-page a.btn-outline-light { color: var(--ivory); }

/* Suppress the hero background video below 768px so mobile never
   fetches it; the poster frame is painted as a CSS background instead. */
@media (max-width: 767px) {
  .hero-video-wrap { display: none; }
  .hero-full {
    background-image: url('/7d9054c9-heroposter.webp');
    background-size: cover;
    background-position: center;
  }
}



/* ============================================================================
   PETALBY — styles.css additions & fixes
   Regenerated 6 August 2026 against the live site.

   APPEND THIS ENTIRE BLOCK TO THE END OF styles.css.

   IMPORTANT: the last deploy bumped styles.css to ?v=58 but did NOT change the
   file. Three classes are already in use in the HTML with zero rules behind
   them, so the footer, trust bar and Bouquet card are visibly broken right now.
   FIX 1 below is what repairs that. After deploying, verify the file actually
   changed:
       curl -s https://petalby.com/styles.css | md5sum
       # must NOT be 2af251dc08cd3e5e8713c38122c77f36
   ============================================================================ */


/* ---------------------------------------------------------------------------
   FIX 1 — [NEW-02] Classes used in the HTML that do not exist in the CSS
   Live right now on all 12 pages, unstyled:
     .footer-col-title   renders 16px Work Sans Light 300  (should be a heading)
     .trust-item-title   renders 14.08px Light             (smaller than its own body text)
     .scarcity-badge     renders 16px block, no box        (sits above the product name)
   --------------------------------------------------------------------------- */
.footer-col-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin: 0 0 14px;
  color: inherit;
}

/* NOTE: styles.css already contains a `.trust-item h4` rule — uppercase sans,
   0.85rem, weight 500. That is what the trust bar was DESIGNED to use; the
   markup used <h2> instead, which is what caused the heading-hierarchy problem.
   So .trust-item-title reproduces the intended h4 styling rather than inventing
   a new one.
   It must be written as `.trust-item .trust-item-title` (0,2,0) because
   `.trust-item p` (0,1,1) already sets font-size and would otherwise win. */
.trust-item .trust-item-title {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--charcoal);
  margin: 0 0 8px;
}

/* Mirrors .tier-badge exactly so the two read as a pair.
   `align-self: flex-start` is required — FIX 7 below makes .product-card a flex
   column, which blockifies its children, so inline-block alone would stretch
   the badge to full width (this is why .tier-badge already does the same). */
.scarcity-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--charcoal-15);
  border-radius: 2px;
  margin: -8px 0 14px;
  color: var(--terracotta-text);
}


/* ---------------------------------------------------------------------------
   FIX 2 — [P0-05] Hero headline is unreadable — still live
   ROOT CAUSE: there is no colour rule for .hero-full-headline anywhere in
   styles.css, so it inherits the default heading charcoal rgb(42,36,32) and
   renders near-black over a dark video. Strengthening the overlay alone makes
   it WORSE. The colour declaration is the actual fix.
   --------------------------------------------------------------------------- */
.hero-full-overlay {
  background: linear-gradient(180deg,
    rgba(30, 25, 21, 0.30) 0%,
    rgba(30, 25, 21, 0.62) 45%,
    rgba(30, 25, 21, 0.72) 100%);
}
.hero-full-headline {
  color: #F7EFE7;            /* <- the fix */
  font-weight: 500;
  text-shadow: 0 1px 24px rgba(20, 16, 13, 0.55);
}
.hero-full-subhead {
  color: #F7EFE7;
  text-shadow: 0 1px 16px rgba(20, 16, 13, 0.50);
}
.hero-full-eyebrow {
  color: #F7EFE7;
  text-shadow: 0 1px 12px rgba(20, 16, 13, 0.60);
}
.btn-outline-light,
.btn-outline--light {
  border-color: rgba(247, 239, 231, 0.85);
  color: #F7EFE7;
  background: rgba(30, 25, 21, 0.18);
  backdrop-filter: blur(2px);
}


/* ---------------------------------------------------------------------------
   FIX 3 — [P2-03] The "Skip to content" link is permanently visible
   Still live. It has zero rules in the stylesheet, which is why it renders as
   plain text above the announcement bar on every page.
   --------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 12px 22px;
  background: var(--charcoal);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 2px;
  z-index: 9999;
}


/* ---------------------------------------------------------------------------
   FIX 4 — LATENT BUG: buttons inside policy/article pages have invisible text
   `.content-page a` (specificity 0,2,0) overrides `.btn-primary` (0,1,0) and
   paints button text terracotta on a terracotta background. This will hit the
   new Terms, Delivery & Returns and Journal pages the moment they go live.
   --------------------------------------------------------------------------- */
.content-page .btn { text-decoration: none; }
.content-page .btn-primary { color: var(--ivory); }
.content-page .btn-outline { color: var(--charcoal); }


/* ---------------------------------------------------------------------------
   FIX 5 — [P0-03] Footer trader identity block (sole trader)
   --------------------------------------------------------------------------- */
.footer-legal {
  border-top: 1px solid rgba(247, 239, 231, 0.12);
  margin-top: 28px;
  padding-top: 22px;
}
.footer-legal p {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  line-height: 1.7;
  color: rgba(247, 239, 231, 0.55);
  margin: 0;
  max-width: 62ch;
}
.footer-legal a {
  color: rgba(247, 239, 231, 0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-legal a:hover { color: var(--ivory); }


/* ---------------------------------------------------------------------------
   FIX 6 — Classes used by the new Terms / Delivery & Returns / Journal pages
   --------------------------------------------------------------------------- */
.cancellation-form {
  border: 1px solid var(--charcoal-15);
  border-radius: 2px;
  padding: 26px 30px;
  margin: 24px 0 32px;
  background: rgba(255, 255, 255, 0.45);
}
.cancellation-form p {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 2.1;
  margin: 0 0 6px;
  color: var(--charcoal-60);
}
.cancellation-form p:first-child {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--charcoal);
  margin-bottom: 14px;
}
@media print { .cancellation-form { border-color: #000; background: none; } }

.article-meta {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--charcoal-60);
  margin-top: 14px;
}
.product-inline {
  border-left: 2px solid var(--rose-tint, #E8D3C6);
  padding: 4px 0 4px 18px;
  margin: 16px 0 24px;
}
.article-cta {
  border-top: 1px solid var(--charcoal-15);
  margin-top: 56px;
  padding-top: 44px;
  text-align: center;
}
.article-cta h2 { margin-top: 0.2em; }
.article-cta p { margin-bottom: 1.4em; }

.checkout-legal-note {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--charcoal-60);
  margin: 0 0 16px;
}


/* ---------------------------------------------------------------------------
   FIX 7 — [P2-04] Align Add to Cart across product cards; demote Klarna line
   The Bud has no Klarna line, so its button sits higher than the others.
   --------------------------------------------------------------------------- */
.product-card { display: flex; flex-direction: column; }
.product-card .product-actions { margin-top: auto; padding-top: 18px; }
.klarna-note {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--charcoal-60);
  margin: 2px 0 12px;
}


/* ---------------------------------------------------------------------------
   FIX 8 — [P2-07] Mobile tap targets and minimum text size
   Footer links render ~56x16px and breadcrumbs ~31x13px against the 24x24px
   minimum in WCAG 2.2 (2.5.8).
   --------------------------------------------------------------------------- */
.footer-col ul a,
.breadcrumbs a { display: inline-block; padding: 9px 0; }
.footer-col ul li { margin-bottom: 0; }

.announcement-bar { font-size: 0.78rem; }
.cart-count       { font-size: 0.75rem; }
.breadcrumbs      { font-size: 0.78rem; }

@media (max-width: 700px) {
  .nav-links a { display: inline-block; padding: 10px 4px; }
}


/* ---------------------------------------------------------------------------
   FIX 9 — [P2-06] Shorten the scroll-reveal transform
   Pair with the script.js change in Task 12 of the brief.
   --------------------------------------------------------------------------- */
.reveal {
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}


/* ---------------------------------------------------------------------------
   FIX 10 — [P2-05] Poster fallback for the hero on mobile
   The <video> media attributes are already live and working (mobile makes zero
   video requests). This paints the poster in its place.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-video-bg { display: none; }
  .hero-video-wrap {
    background-image: url('/7d9054c9-heroposter.webp');
    background-size: cover;
    background-position: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-bg { display: none; }
  .hero-video-wrap {
    background-image: url('/7d9054c9-heroposter.webp');
    background-size: cover;
    background-position: center;
  }
}


/* ---------------------------------------------------------------------------
   FIX 11 — Consent banner as a corner card so it stops covering the hero CTAs
   Pair with the one-line analytics.js change in Task 13 of the brief.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .petalby-consent--corner {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 380px;
    border-radius: 2px;
  }
}