@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,500;0,600;0,700;0,800;1,600&family=Karla:wght@400;500;700&display=swap");

:root {
  /* Warm, natural, higher-contrast palette — cream/charcoal base with a deep
     teal-navy primary, a warm gold accent and a muted sage for eco/leaf
     details. Moves away from the earlier pastel lavender/blush wash, which
     read as washed-out and too purple. */
  --paper: #faf6ee;
  --paper-dark: #efe6d3;
  --white: #ffffff;
  --ink: #29343a;
  --ink-soft: #6c7478;

  --navy: #3b82e6;
  --navy-deep: #2563c9;
  --gold: #c99a4c;
  --gold-deep: #a67f38;
  --sage: #7c9473;
  --clay: #b5654a;

  /* clean, confident sans pairing — Libre Franklin for headlines/display,
     Karla for body copy and UI text. Swapped in for the earlier serif pair,
     which felt mismatched against the hand-drawn illustrations. */
  --font-display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  --radius-wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --shadow-sketch: 4px 4px 0 rgba(41, 52, 58, 0.12);
  --shadow-soft: 0 10px 24px rgba(28, 74, 84, 0.12);

  /* a gentle "back" easing curve — settles with a tiny overshoot instead of
     stopping dead, which reads as a much more natural, hand-nudged motion */
  --ease-natural: cubic-bezier(0.34, 1.45, 0.4, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Keep the footer pinned to the bottom of the viewport on short pages (the
     order confirmation screen especially) instead of floating mid-page. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  /* the site's own paper "grain" — a seamless tile cropped from an actual
     blank corner of one of Rachel's watercolour scans, so the page itself
     is made of the same paper as the art sitting on it */
  background-image: #efefef;
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Grow to fill leftover height so .site-footer stays at the bottom. */
main { flex: 1 0 auto; }

/* ---------- Rachel's scanned artwork, used as playful background decor ---------- */
/* Placed as absolutely-positioned decorative images inside a handful of
   position:relative sections. mix-blend-mode:multiply drops out each scan's
   own paper tone (since it's close to --paper) so only the ink/watercolour
   marks remain, and the mask fades the rectangular edges to nothing — the
   art dissolves straight into the page's own texture instead of sitting on
   top of it as a visible photo. Purely decorative, so alt="" + aria-hidden. */
.art-decor {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 50%, transparent 100%);
  z-index: 0;
}
@media (max-width: 700px) {
  /* keep things legible and uncluttered on small screens */
  .art-decor { display: none; }
}

h1, h2, h3, .hand {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  font-weight: 600;
}

.script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
}

a { color: var(--navy-deep); }

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

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */
.site-header {
  padding: 18px 0;
  border-bottom: 2px solid var(--ink);
  background: rgba(250, 246, 238, 0.92);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand img {
  width: 44px;
  height: 44px;
  animation: natural-sway 7s ease-in-out infinite;
  transform-origin: 50% 60%;
}
.brand__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.7rem;
}
.nav__toggle {
  display: none;
  background: none;
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-size: 1.3rem;
  padding: 4px 10px;
  cursor: pointer;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nav__menu a {
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: color 0.2s ease;
}
.nav__menu a:hover { color: var(--navy-deep); }
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cart-count {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.75rem;
  font-family: var(--font-body);
  font-weight: 700;
}

/* ---------- hero ---------- */
.hero {
  padding: 56px 0 40px;
  position: relative;
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 1; }
.art-hero-chair {
  width: 300px;
  right: 180px;
  bottom: -20px;
  opacity: 0.6;
  transform: rotate(-5deg);
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.1rem;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.hero p.lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.hero__art {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-wobble);
  padding: 30px;
  box-shadow: var(--shadow-sketch), var(--shadow-soft);
  animation: gentle-float 8s ease-in-out infinite;
  transform-origin: 50% 50%;
}

/* ---------- confetti art band ---------- */
/* A scattered watercolour "confetti" scan sitting behind a section heading —
   the most literal bit of "playful fun" from the brief. Full-bleed so it
   isn't boxed in by .wrap's max-width. */
.confetti-band {
  position: relative;
  overflow: hidden;
}
.art-confetti {
  width: 560px;
  max-width: 85vw;
  left: 50%;
  top: -6px;
  transform: translateX(-50%) rotate(-1deg);
  opacity: 0.6;
}
.confetti-band > *:not(.art-decor) { position: relative; z-index: 1; }

/* ---------- impact strip ---------- */
/* A bold, full-bleed stat band (inspired by circularsourcing.world's impact
   metrics) — gives the page one section of real color depth instead of
   everything sitting at the same pastel intensity. */
.impact-strip {
  background: var(--navy);
  padding: 36px 0;
}
.impact-strip__row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 28px;
  text-align: center;
}
.impact-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 230px;
}
.impact-stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  color: #ffd873;
  line-height: 1;
}
.impact-stat__label {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 1rem;
  padding: 10px 22px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-wobble);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 3px 3px 0 rgba(41, 52, 58, 0.16);
  transition: transform 0.4s var(--ease-natural), box-shadow 0.4s var(--ease-natural);
}
.btn:hover { transform: translate(-2px, -3px) rotate(-1.5deg); box-shadow: 5px 6px 0 rgba(41, 52, 58, 0.14); }
.btn:active { transform: translate(0, 0) rotate(0deg); transition: transform 0.15s ease; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn--accent { background: var(--navy); color: var(--white); border-color: var(--navy-deep); }
.btn--sage { background: var(--sage); color: var(--white); border-color: var(--sage); }
.btn--ghost { background: transparent; }
.btn--tiny { padding: 2px 10px; font-size: 1rem; box-shadow: none; }
.btn--big { font-size: 1.25rem; padding: 14px 30px; }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---------- badges ---------- */
.badge {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1.5px dashed currentColor;
  display: inline-block;
}
.badge--mustard { color: var(--gold); border-style: solid; border-color: var(--gold); }

/* ---------- section headers ---------- */
.section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.3rem;
  text-align: center;
  margin: 0 0 6px;
}
.section-sub {
  text-align: center;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto 34px;
}
.divider-wrap {
  position: relative;
  margin: 8px 0 32px;
}
.divider {
  display: block;
  width: 100%;
  height: 24px;
  margin: 0;
}
.divider__scissors {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  transform: translate(-50%, -50%) rotate(-4deg);
  background: var(--paper);
  padding: 0 6px;
}

/* ---------- cards / grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 28px;
  margin: 30px 0 60px;
}
.card {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-sketch);
  position: relative;
  transition: transform 0.45s var(--ease-natural), box-shadow 0.45s var(--ease-natural);
}
/* Varied, slightly irregular tilt angles (not a strict alternation) so a row
   of cards reads as hand-placed rather than machine-mirrored. */
.tilt-1 { transform: rotate(-1.6deg); }
.tilt-2 { transform: rotate(1.1deg); }
.tilt-3 { transform: rotate(-0.7deg); }
.tilt-4 { transform: rotate(1.8deg); }
.tilt-5 { transform: rotate(-1.1deg); }
/* legacy aliases */
.tilt-left { transform: rotate(-1.4deg); }
.tilt-right { transform: rotate(1.2deg); }
.card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-sketch), var(--shadow-soft); }
/* Every card's tilt transform makes it its own stacking context, so a fabric
   swatch dropdown can't out-rank a sibling card just via z-index — lift the
   whole card above its neighbours while the dropdown is open. Deliberately
   kept below .site-header's z-index (20): sibling cards sit at `auto`, so 10
   is more than enough to clear them, while leaving the sticky header on top
   as you scroll past an open dropdown. */
.card.swatch-open { z-index: 10; }

.product-card__img {
  width: 100%;
  border-radius: 12px;
  border: 2px solid var(--ink);
  margin-bottom: 12px;
}
.product-card__name { margin: 6px 0 4px; font-size: 1.3rem; }
.product-card__desc { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 8px; }
.product-card__materials { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 12px; }
.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.product-card__price { font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; }

/* ---------- fabric swatch picker ---------- */
/* Compact by default (just the current colour + name in a pill). The expanded
   grid is positioned absolutely, as an overlay on top of the rest of the card,
   rather than pushing the card's content (and everything after it in the
   grid) down — that reflow was liable to shift the "Add to cart" button out
   from under the pointer between picking a colour and the next click. */
.swatch-picker {
  position: relative;
  margin: 0 0 12px;
}
.swatch-picker__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 10px;
  border: 1.5px dashed var(--ink-soft);
  border-radius: 999px;
  list-style: none;
  user-select: none;
}
.swatch-picker__summary::-webkit-details-marker { display: none; }
.swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid var(--ink);
  display: inline-block;
  flex-shrink: 0;
}
.swatch-picker__chevron {
  font-size: 0.75rem;
  color: var(--ink-soft);
  transition: transform 0.2s ease;
}
.swatch-picker[open] .swatch-picker__chevron { transform: rotate(180deg); }
.swatch-picker__grid {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  /* Extra breathing room around the grid when it's scrolled into view, so it
     doesn't land flush against the edge of the screen. */
  scroll-margin: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0;
  padding: 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow-sketch), var(--shadow-soft);
}
.swatch-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 64px;
  cursor: pointer;
  font-size: 0.68rem;
  color: var(--ink-soft);
  text-align: center;
}
.swatch-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.swatch-option__color {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sketch);
  transition: transform 0.2s var(--ease-natural);
}
.swatch-option input:checked + .swatch-option__color {
  transform: scale(1.08);
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.swatch-option input:focus-visible + .swatch-option__color {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.swatch-option__name { line-height: 1.2; }

/* ---------- about / feature blocks ---------- */
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 40px 0;
}
.feature {
  text-align: center;
  padding: 20px;
}
.feature img { width: 64px; margin: 0 auto 12px; }
.feature h3 { margin: 0 0 6px; font-size: 1.3rem; }
.feature p { color: var(--ink-soft); font-size: 0.92rem; }

.about-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 50px 0;
}
.about-block img { border: 2px solid var(--ink); border-radius: var(--radius-wobble); box-shadow: var(--shadow-sketch), var(--shadow-soft); }

/* ---------- page-header art (About / Shop titles) ---------- */
.page-header {
  position: relative;
  overflow: hidden;
  padding-bottom: 6px;
}
.page-header > *:not(.art-decor) { position: relative; z-index: 1; }
.art-shop-tote {
  width: 260px;
  top: -20px;
  right: 6%;
  opacity: 0.42;
  transform: rotate(-3deg);
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 2px solid var(--ink);
  margin-top: 70px;
  padding: 40px 0 30px;
  background: var(--paper-dark);
  position: relative;
  overflow: hidden;
}
.art-footer {
  width: 220px;
  right: 24px;
  bottom: -30px;
  opacity: 0.42;
  transform: rotate(4deg);
}
.site-footer .wrap { position: relative; z-index: 1; }
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--font-body);
}
.site-footer p { margin: 4px 0; color: var(--ink-soft); font-family: var(--font-body); font-size: 0.9rem; }

/* ---------- cart page ---------- */
.cart-row {
  display: grid;
  grid-template-columns: 70px 1fr auto auto 30px;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1.5px dashed #e3dac6;
}
.cart-row__img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 2px solid var(--ink); }
.cart-row__info { min-width: 0; }
.cart-row__info h3 { margin: 0 0 4px; font-size: 1.1rem; }
.cart-row__price { font-size: 0.82rem; color: var(--ink-soft); margin: 0; overflow-wrap: break-word; }
.cart-row__swatch-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1.5px solid var(--ink);
  vertical-align: -1px;
  margin-right: 3px;
}
.cart-row__qty { display: flex; align-items: center; gap: 6px; }
.cart-row__qty input {
  width: 44px;
  text-align: center;
  font-family: var(--font-body);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 4px;
}
.cart-row__total { font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; min-width: 70px; text-align: right; }
.cart-row__remove {
  background: none;
  border: none;
  color: var(--clay);
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.3s var(--ease-natural);
}
.cart-row__remove:hover { transform: scale(1.15) rotate(-6deg); }

.summary-line {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 1rem;
}
.summary-line--muted { color: var(--ink-soft); font-size: 0.85rem; }
.summary-line--total {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.4rem;
  border-top: 2px solid var(--ink);
  margin-top: 8px;
  padding-top: 12px;
}

.cart-panel, .checkout-panel {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 30px;
  box-shadow: var(--shadow-sketch), var(--shadow-soft);
  max-width: 780px;
  margin: 30px auto;
}

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--paper);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(28, 74, 84, 0.18);
}
textarea { resize: vertical; min-height: 80px; }
.field { margin-bottom: 18px; }

.checkout-items { list-style: none; padding: 0; margin: 0 0 10px; }
.checkout-items li { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.95rem; }

.confirm-panel { text-align: center; }
.confirm-panel img { width: 70px; margin: 0 auto 16px; animation: natural-sway 5s ease-in-out infinite; }
.confirm-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

.error-note { color: var(--clay); font-family: var(--font-body); }
.empty-state { text-align: center; padding: 50px 20px; color: var(--ink-soft); }
.empty-state img { width: 80px; margin: 0 auto 16px; opacity: 0.7; }

/* ---------- natural, slightly irregular motion ---------- */
/* Multi-keyframe with uneven spacing/amplitude reads as organic rather than
   a robotic back-and-forth metronome. Kept small in amplitude and slow so it
   sits in the background rather than distracting. */
@keyframes natural-sway {
  0%   { transform: rotate(0deg); }
  22%  { transform: rotate(-3deg); }
  48%  { transform: rotate(2deg); }
  71%  { transform: rotate(-1.5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes gentle-float {
  0%   { transform: rotate(-1.5deg) translateY(0px); }
  30%  { transform: rotate(-0.4deg) translateY(-4px); }
  55%  { transform: rotate(-2deg) translateY(1px); }
  80%  { transform: rotate(-0.8deg) translateY(-2px); }
  100% { transform: rotate(-1.5deg) translateY(0px); }
}
@media (prefers-reduced-motion: reduce) {
  .brand img, .hero__art, .confirm-panel img { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 800px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .about-block { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .nav__toggle { display: inline-block; }
  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px;
    gap: 14px;
  }
  .nav__menu.is-open { display: flex; }
  /* The quantity stepper (–, number input, +) needs real width to render —
     a 50px column forced it to overflow past the edge of the screen and took
     the price/total with it. Give qty its own full-width row instead of
     squeezing it beside the total, and let the price line wrap. */
  .cart-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas: "img info" "img qty" "total total" "remove remove";
    row-gap: 10px;
  }
  .cart-row__img { grid-area: img; }
  .cart-row__info { grid-area: info; min-width: 0; }
  .cart-row__price { white-space: normal; overflow-wrap: break-word; }
  .cart-row__qty { grid-area: qty; }
  .cart-row__total { grid-area: total; min-width: 0; text-align: right; }
  .cart-row__remove { grid-area: remove; justify-self: start; }
}