/* ===========================================================
   Kiry's Corner — Design System
   Palette: blush rose, sage green & antique gold on warm cream —
   a soft floral look, framed by an original hand-drawn corner motif
   =========================================================== */

:root {
  --cream: #FBF6EC;
  --cream-dark: #F4EBD9;
  --cream-darker: #EAE0C8;
  --charcoal: #5E7F45;
  --charcoal-dark: #46602F;
  --charcoal-soft: #6E5650;
  --terracotta: #C1607A;
  --terracotta-dark: #9C4761;
  --sage: #8CA084;
  --sage-dark: #6B8062;
  --brass: #C9A227;
  --brass-dark: #A9841E;
  --line: #E7DCC4;
  --white: #FFFDF8;
  --blush-wash: #F6E4EA;
  --sky: #D8E6EC;
  --sky-dark: #C3D9E1;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-card: 0 2px 14px rgba(94, 127, 69, 0.12);
  --shadow-card-hover: 0 10px 28px rgba(94, 127, 69, 0.18);
  --max-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------- Full-site floral background ----------
   A fixed, very faint watermark behind every page, painted behind all real
   content because it lives in body::before (first in DOM, negative z-index). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../assets/floral/site-floral.jpg");
  background-size: 420px auto;
  background-position: center top;
  background-repeat: repeat;
  opacity: 0.22;
}
@media (max-width: 640px) {
  body::before { background-size: 260px auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal-soft);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 0.5em;
  color: var(--charcoal);
  line-height: 1.2;
}

p { margin: 0 0 1em; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sage-dark);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--charcoal);
  color: var(--white);
}
.btn-primary:hover { background: var(--charcoal-dark); }

.btn-secondary {
  background: transparent;
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.btn-secondary:hover { background: var(--charcoal); color: var(--cream); }

.btn-outline-light {
  background: transparent;
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.btn-outline-light:hover { background: var(--charcoal); color: var(--cream); }

.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--charcoal);
  color: var(--cream);
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  padding: 8px 16px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: var(--blush-wash);
  background-image:
    linear-gradient(rgba(246, 228, 234, 0.8), rgba(246, 228, 234, 0.8)),
    url("../assets/floral/site-floral.jpg");
  background-size: auto, 220px auto;
  background-repeat: repeat, repeat;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.topscroll {
  display: flex;
  justify-content: center;
  padding: 16px 16px 8px;
  /* Intentionally no background — the sitewide floral watermark (body::before)
     shows through here, same as the rest of the page. */
}
.topscroll img {
  width: 94%;
  max-width: 1300px;
  height: auto;
  display: block;
  opacity: 0.9;
}
@media (max-width: 640px) {
  .topscroll { padding: 10px 16px 4px; }
  .topscroll img { width: 92%; }
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 16px;
}

.logo-link img { height: 66px; width: auto; }

.main-nav { display: flex; gap: 28px; }
.main-nav a {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--charcoal-soft);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.main-nav a:hover,
.main-nav a.active { color: var(--charcoal); border-color: var(--charcoal); }

.header-actions { display: flex; align-items: center; gap: 18px; }

.icon-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--charcoal);
  display: inline-flex;
  align-items: center;
  padding: 4px;
}
.icon-btn svg { width: 22px; height: 22px; }

.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--terracotta);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

@media (max-width: 860px) {
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    top: 0;
    height: 100vh;
    width: 78%;
    max-width: 320px;
    background: var(--cream);
    flex-direction: column;
    padding: 90px 32px 32px;
    gap: 22px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .main-nav.open { transform: translateX(0); }
  .nav-toggle { display: inline-flex; }
  .nav-scrim {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 55;
  }
  .nav-scrim.open { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  /* transparent so the sitewide floral watermark (body::before) shows through;
     swap back to a solid/gradient fill, or give .hero its own stronger
     background-image at higher opacity, if a more prominent hero look is wanted */
  border-bottom: 1px solid var(--line);
}
.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 64px;
}
.hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-style: italic;
  margin-bottom: 0.3em;
}
.hero p.lede {
  font-size: 1.08rem;
  color: var(--charcoal-soft);
  max-width: 46ch;
}
.hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.hero-art {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.hero-art .frame {
  position: relative;
  background-color: var(--cream-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-art .frame:nth-child(2) { margin-top: 28px; }
.hero-art .frame:nth-child(3) { margin-top: -28px; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; }
  .hero-art { order: -1; }
}

/* ---------- Section headings ---------- */
.section { padding: 64px 0; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0; }
.section-head .sub { color: var(--charcoal-soft); max-width: 60ch; margin-top: 6px; }

/* ---------- Product grid & cards ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1000px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

.product-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }

.product-card .thumb {
  position: relative;
  aspect-ratio: 1;
  background-color: var(--sky);
  overflow: hidden;
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Alternate the mat color by position in the grid — blue, then pink, repeating —
   instead of leaving it to whichever placeholder icon happens to be shown.
   Real product photos are opaque and fill the thumb completely, so this only
   shows through the (intentionally transparent) placeholder icons for now;
   it'll show as a subtle mat edge once real photos replace them if the photos
   don't fully bleed to the corners. Shop by Room tiles set their own inline
   background and are unaffected (inline styles win over this rule). */
.product-grid .product-card:nth-child(even) .thumb { background-color: var(--blush-wash); }

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--sage);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.badge.sold { background: var(--charcoal); }

.product-card .info { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.product-card .cat { font-size: 0.72rem; color: var(--sage-dark); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.product-card h3 { font-size: 1rem; font-style: italic; margin-bottom: 6px; }
.product-card .price { font-weight: 600; color: var(--terracotta-dark); margin-top: auto; font-family: var(--font-body); }
.product-card .add-btn { margin-top: 10px; font-size: 0.82rem; padding: 9px 16px; }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.chip {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--charcoal-soft);
  transition: all 0.15s ease;
}
.chip:hover { border-color: var(--charcoal); color: var(--charcoal); }
.chip.active { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }

.results-empty { text-align: center; padding: 60px 20px; color: var(--charcoal-soft); }

/* ---------- Brand story split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 28px; } }
.split .art-block {
  background: var(--cream-dark);
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.split .art-block img { width: 40%; opacity: 0.85; }
/* A real photo (e.g. the founder portrait) should fill the frame at full
   opacity, not sit shrunk and faded like the decorative icon graphics. */
.split .art-block.photo { box-shadow: var(--shadow-card); }
.split .art-block.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

/* ---------- Etsy / channel callout ---------- */
.callout {
  background: var(--blush-wash);
  color: var(--charcoal-soft);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.callout h3 { color: var(--charcoal); margin-bottom: 6px; }
.callout p { color: var(--charcoal-soft); margin-bottom: 0; max-width: 48ch; }

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--charcoal);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
}
.newsletter h2 { color: var(--cream); }
.newsletter p { color: rgba(250,246,239,0.75); max-width: 50ch; margin: 0 auto 24px; }
.newsletter-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 13px 16px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.form-note { font-size: 0.78rem; color: rgba(250,246,239,0.55); margin-top: 14px; }

/* ---------- Forms (contact) ---------- */
.form-group { margin-bottom: 18px; text-align: left; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.94rem;
  background: var(--white);
  color: var(--charcoal);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-success {
  display: none;
  background: var(--sage);
  color: var(--white);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-top: 18px;
}
.form-success.show { display: block; }

.form-error {
  display: none;
  background: var(--terracotta);
  color: var(--white);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-top: 18px;
}
.form-error.show { display: block; }

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--blush-wash);
  background-image:
    linear-gradient(rgba(246, 228, 234, 0.8), rgba(246, 228, 234, 0.8)),
    url("../assets/floral/site-floral.jpg");
  background-size: auto, 220px auto;
  background-repeat: repeat, repeat;
  border-top: 1px solid var(--line);
  padding: 56px 0 28px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.78rem;
  color: var(--charcoal-soft);
  margin-bottom: 14px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { font-size: 0.9rem; color: var(--charcoal); font-weight: 700; }
.footer-grid a:hover { color: var(--charcoal); }
.footer-grid a.disabled { color: #B3A392; pointer-events: none; }

.social-row { display: flex; gap: 12px; margin-top: 14px; }
.social-row a {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.social-row svg { width: 17px; height: 17px; }
.social-row a:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--charcoal-soft);
}

/* ---------- Cart drawer ---------- */
.cart-scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 90;
}
.cart-scrim.open { display: block; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 400px;
  background: var(--cream);
  z-index: 95;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 30px rgba(0,0,0,0.2);
}
.cart-drawer.open { transform: translateX(0); }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.cart-head h3 { margin: 0; font-size: 1.2rem; }
.cart-close { background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--charcoal); }
.cart-items { flex: 1; overflow-y: auto; padding: 16px 22px; }
.cart-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 62px; height: 62px; object-fit: cover; border-radius: var(--radius-sm); background: var(--cream-dark); }
.cart-item .ci-info { flex: 1; }
.cart-item h4 { font-size: 0.92rem; margin: 0 0 4px; font-style: italic; }
.cart-item .ci-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; color: var(--charcoal-soft); }
.cart-item .remove { background: none; border: none; color: var(--terracotta); cursor: pointer; font-size: 0.78rem; text-decoration: underline; padding: 0; }
.cart-empty { text-align: center; padding: 60px 20px; color: var(--charcoal-soft); }
.cart-footer { padding: 20px 22px 26px; border-top: 1px solid var(--line); }
.cart-subtotal { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 14px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--charcoal);
  color: var(--cream);
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 0.88rem;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------- Modal ---------- */
.modal-scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 110;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-scrim.open { display: flex; }
.modal {
  background: var(--cream);
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: 100%;
  padding: 32px;
  text-align: center;
}
.modal h3 { margin-bottom: 10px; }
.modal p { color: var(--charcoal-soft); }

/* ---------- Page header (interior pages) ---------- */
.page-header {
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--line);
  /* transparent so the sitewide floral watermark shows through, same as .hero */
  text-align: center;
}
.page-header h1 { font-style: italic; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.breadcrumb { font-size: 0.82rem; color: var(--charcoal-soft); margin-bottom: 10px; }
.breadcrumb a { color: var(--sage-dark); }

/* ---------- Product detail ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 860px) { .product-detail { grid-template-columns: 1fr; gap: 28px; } }
.pd-media {
  position: relative;
  background-color: var(--sky);
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.pd-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-info .cat { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--sage-dark); margin-bottom: 8px; }
.pd-info h1 { font-style: italic; font-size: 2rem; margin-bottom: 8px; }
.pd-price { font-size: 1.4rem; font-weight: 600; color: var(--terracotta-dark); margin-bottom: 18px; }
.pd-details {
  margin: 22px 0;
  padding: 18px 20px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.pd-details dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--charcoal-soft); margin-top: 12px; }
.pd-details dt:first-child { margin-top: 0; }
.pd-details dd { margin: 2px 0 0; font-size: 0.95rem; }
.pd-note {
  font-size: 0.85rem;
  color: var(--sage-dark);
  background: rgba(124,139,111,0.12);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-top: 18px;
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.narrow { max-width: 680px; margin: 0 auto; }

.policy-block { margin-bottom: 40px; }
.policy-block h2 { font-size: 1.3rem; }

.two-col-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 780px) { .two-col-info { grid-template-columns: 1fr; } }