:root {
  --background: #fbf6ea;
  --foreground: #24160f;
  --card: #fffdf7;
  --card-foreground: #24160f;
  --popover: #fffdf7;
  --popover-foreground: #24160f;
  --primary: #352117;
  --primary-foreground: #fffaf0;
  --secondary: #eee0c5;
  --secondary-foreground: #352117;
  --muted: #f2eadb;
  --muted-foreground: #756253;
  --accent: #f4b44b;
  --accent-foreground: #2e190f;
  --destructive: #b42028;
  --border: #d8c6a8;
  --input: #d8c6a8;
  --ring: #c45e24;
  --radius: 0.9rem;
  --ink: #24160f;
  --ink-soft: #5d4a3d;
  --cream: #fbf6ea;
  --paper: #fffdf7;
  --sunset: #c75924;
  --sunset-dark: #8f3218;
  --danger: #b42028;
}


* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: "Segoe UI", Aptos, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(196, 94, 36, 0.38);
  outline-offset: 3px;
}

::selection { color: #24160f; background: #e8a044; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-shell {
  width: min(1280px, calc(100% - 3rem));
  margin-inline: auto;
}

.top-ribbon {
  min-height: 2.15rem;
  display: grid;
  place-items: center;
  padding: 0.35rem 1rem;
  color: #f9ead2;
  background: linear-gradient(90deg, rgba(255,255,255,.03), transparent 22%, transparent 78%, rgba(255,255,255,.03)), #24160f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.top-ribbon p { display: flex; align-items: center; gap: 0.8rem; margin: 0; }
.top-ribbon span { color: #ffc75d; }
.top-ribbon i { width: 4px; height: 4px; border-radius: 50%; background: #bb4a24; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  min-height: 5.25rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 0.7rem max(1.5rem, calc((100vw - 1280px) / 2));
  background: rgba(251, 246, 234, 0.94);
  border-bottom: 1px solid rgba(112, 81, 56, 0.17);
  backdrop-filter: blur(18px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  width: fit-content;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.04em;
}

.wordmark strong { color: var(--sunset-dark); font-weight: 800; }

.wordmark small {
  margin-left: 0.15rem;
  font-family: "Segoe UI", sans-serif;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.wordmark-mark {
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  color: #f8e9cd;
  background: linear-gradient(145deg, #c96c2a, #7f2b17);
  border: 2px solid #e2a547;
  border-radius: 50% 50% 46% 54%;
  box-shadow: inset 0 0 0 3px #2d1b13, 0 5px 16px rgba(63,30,14,.16);
  transform: rotate(-3deg);
}

.wordmark-mark svg { width: 1.28rem; height: 1.28rem; }

.desktop-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.desktop-nav a {
  position: relative;
  padding: 0.8rem 0;
  color: #4f3c30;
  font-size: 0.92rem;
  font-weight: 700;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.45rem;
  height: 2px;
  background: var(--sunset);
  transition: right 180ms ease;
}

.desktop-nav a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 0.55rem; }

.nav-cart {
  height: 2.75rem !important;
  padding-inline: 1rem !important;
  border-color: #bca27d !important;
  background: rgba(255,255,255,.46) !important;
  color: #382219 !important;
  border-radius: 999px !important;
  font-size: 0.9rem !important;
  font-weight: 750 !important;
}

.nav-cart span {
  min-width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  padding-inline: 0.25rem;
  color: white;
  background: var(--sunset);
  border-radius: 999px;
  font-size: 0.72rem;
}

.mobile-menu {
  display: none !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: 50% !important;
}

.hero-section {
  position: relative;
  min-height: 690px;
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(540px,1.18fr);
  align-items: center;
  gap: clamp(2rem,5vw,5.8rem);
  padding-block: 5.5rem 6.2rem;
}

.hero-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 27rem;
  height: 27rem;
  left: -18rem;
  top: 2rem;
  border: 1px solid rgba(199,89,36,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(199,89,36,.03), 0 0 0 8rem rgba(199,89,36,.025);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
  color: #9b421f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.eyebrow > span { width: 2.1rem; height: 2px; background: currentColor; }
.eyebrow.light { color: #efbd6e; }
.eyebrow.red { color: var(--danger); }

.hero-copy h1,
.section-heading h2,
.community-copy h2,
.safety-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.hero-copy h1 { max-width: 650px; font-size: clamp(3.5rem,6.2vw,6.8rem); }
.hero-copy h1::first-line { color: #8e321b; }

.hero-lead {
  max-width: 620px;
  margin: 1.8rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem,1.6vw,1.3rem);
  line-height: 1.72;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }

.button-large {
  min-height: 3.25rem !important;
  padding-inline: 1.35rem !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
  font-weight: 750 !important;
}

.button-sunset {
  color: #fff9ef !important;
  background: linear-gradient(135deg,#ce6127,#9e371b) !important;
  border: 1px solid #8b3018 !important;
  box-shadow: 0 9px 24px rgba(153,51,24,.2), inset 0 1px rgba(255,255,255,.24) !important;
}

.button-sunset:hover { filter: brightness(1.08); transform: translateY(-1px); }
.button-ink { border-color: #bba580 !important; color: #352218 !important; background: rgba(255,255,255,.4) !important; }
.button-ink:hover { background: white !important; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  margin-top: 2.3rem;
  padding-top: 1.6rem;
  border-top: 1px solid #dbcbae;
}

.hero-proof > div, .community-values > div { display: flex; align-items: center; gap: 0.72rem; }
.hero-proof svg { width: 1.7rem; color: var(--sunset); }
.hero-proof span, .community-values span { display: grid; }
.hero-proof strong, .community-values strong { font-size: 0.93rem; line-height: 1.3; }
.hero-proof small, .community-values small { color: #806e5e; font-size: 0.78rem; }

.hero-visual { position: relative; }

.hero-image-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 8px solid #2a1a13;
  border-radius: 46% 46% 2.2rem 2.2rem / 19% 19% 2.2rem 2.2rem;
  background: #c77735;
  box-shadow: 0 28px 70px rgba(57,28,14,.25), 0 0 0 1px #d99c48, 0 0 0 7px #f1c36f;
}

.hero-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -40px 60px rgba(37,18,9,.16);
  pointer-events: none;
}

.hero-image-frame img { object-fit: cover; }

.hero-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 10.5rem;
  padding: 0.8rem 1rem;
  color: #352118;
  background: rgba(255,252,241,.94);
  border: 1px solid rgba(111,73,43,.2);
  border-radius: 1rem;
  box-shadow: 0 14px 32px rgba(65,31,14,.2);
  backdrop-filter: blur(10px);
}

.hero-note svg { width: 1.4rem; color: var(--sunset); }
.hero-note span { display: grid; font-size: 0.74rem; line-height: 1.35; }
.hero-note strong { font-size: 0.86rem; }
.hero-note-top { top: 7.5%; right: -2rem; }
.hero-note-bottom { left: -2.4rem; bottom: 7%; }

.promise-strip { color: #f7ead3; background: #2c1d16; border-block: 1px solid #6b482e; }
.promise-grid { min-height: 4.7rem; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; }

.promise-grid p {
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0;
  padding-inline: 1rem;
  border-right: 1px solid rgba(250,228,193,.16);
  font-size: 0.82rem;
  font-weight: 650;
  text-align: center;
}

.promise-grid p:last-child { border-right: 0; }
.promise-grid svg { width: 1rem; color: #efaa44; }

.shop-section { padding-block: 7.4rem; }
.heading-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.45fr); align-items: end; gap: 3rem; }
.section-heading h2, .community-copy h2, .safety-copy h2 { font-size: clamp(2.85rem,5vw,5.4rem); }
.heading-note { margin: 0 0 .5rem; color: #6d594b; font-size: 1.05rem; line-height: 1.75; }

.category-bar {
  display: flex;
  gap: 0.55rem;
  margin: 2.7rem 0 2rem;
  padding-bottom: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.category-bar button {
  min-height: 2.65rem;
  padding: .45rem 1.15rem;
  border: 1px solid #cdb998;
  border-radius: 999px;
  color: #5b4434;
  background: rgba(255,255,255,.52);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: 160ms ease;
}

.category-bar button:hover, .category-bar button.active { color: #fff7eb; background: #3a251a; border-color: #3a251a; }
.product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.15rem; }

.product-card {
  overflow: hidden;
  background: rgba(255,253,247,.84);
  border: 1px solid #ddccb0;
  border-radius: 1.25rem;
  box-shadow: 0 15px 34px rgba(80,49,30,.07);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.product-card:hover { transform: translateY(-5px); box-shadow: 0 22px 45px rgba(80,49,30,.13); }

.product-art { position: relative; height: 220px; overflow: hidden; background: #cc7a39; }

.product-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18) 0 2px, transparent 2.5px);
  background-size: 24px 24px;
  opacity: .5;
}

.product-art-sunset { background: linear-gradient(145deg,#f0ae3d,#b6401e 70%); }
.product-art-olive { background: linear-gradient(145deg,#acba58,#485522 72%); }
.product-art-clay { background: linear-gradient(145deg,#d58c60,#7f2c2a 72%); }
.product-art-gold { background: linear-gradient(145deg,#e6bd62,#9c6121 72%); }
.product-art-plum { background: linear-gradient(145deg,#a45670,#4c2037 72%); }
.product-art-sky { background: linear-gradient(145deg,#86adc5,#354c68 72%); }

.product-art-orbit {
  position: absolute;
  width: 8rem;
  height: 8rem;
  top: -3rem;
  right: -1rem;
  border: 1px solid rgba(255,250,226,.45);
  border-radius: 50%;
  box-shadow: 0 0 0 1.6rem rgba(255,255,255,.06), 0 0 0 3rem rgba(255,255,255,.035);
}

.product-art-band { position: absolute; width: 140%; left: -20%; border-radius: 50%; transform: rotate(-7deg); }
.product-art-band-back { height: 4rem; bottom: .8rem; background: rgba(255,241,202,.14); }
.product-art-band-front { height: 3.2rem; bottom: -1.5rem; background: rgba(38,24,15,.25); }

.product-art-icon {
  position: absolute;
  z-index: 2;
  width: 5.5rem;
  height: 5.5rem;
  top: 50%;
  left: 50%;
  padding: 1rem;
  color: #fff7df;
  background: rgba(40,24,14,.22);
  border: 1px solid rgba(255,246,219,.58);
  border-radius: 50%;
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.06), 0 12px 30px rgba(39,20,9,.2);
  transform: translate(-50%,-50%);
}

.product-art-location {
  position: absolute;
  z-index: 3;
  top: .8rem;
  left: .8rem;
  padding: .3rem .65rem;
  color: #fff8e9;
  background: rgba(38,23,14,.55);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.product-card-body { padding: 1.25rem; }

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .55rem;
  color: #8c3c20;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-meta span:last-child { display: flex; align-items: center; gap: .25rem; color: #7e6a59; font-size: .66rem; letter-spacing: 0; text-transform: none; }
.product-meta svg { width: .75rem; }
.product-card h3 { margin: 0; font-family: Georgia,serif; font-size: 1.35rem; line-height: 1.2; }
.product-maker { margin: .2rem 0 0; color: #9a4928; font-size: .82rem; font-weight: 650; }
.product-description { min-height: 3.3rem; margin: .85rem 0 1rem; color: #715f51; font-size: .9rem; line-height: 1.55; }
.product-footer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .9rem; border-top: 1px solid #eadbc3; }
.product-footer > strong { font-family: Georgia,serif; font-size: 1.18rem; }

.add-button {
  min-height: 2.45rem !important;
  padding-inline: .85rem !important;
  color: #fff8e9 !important;
  background: #382319 !important;
  border-radius: 999px !important;
}

.catalogue-note { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 1.35rem 0 0; color: #786556; font-size: .82rem; text-align: center; }
.catalogue-note svg { width: 1rem; color: var(--sunset); }

.seller-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.35rem;
  margin-top: 3.2rem;
  padding: 2.2rem 2.4rem;
  overflow: hidden;
  color: #f7ead4;
  background: radial-gradient(circle at 84% -30%,rgba(235,172,64,.27),transparent 38%), linear-gradient(120deg,#2a1a13,#4b2a1b);
  border: 1px solid #6b452d;
  border-radius: 1.4rem;
  box-shadow: 0 22px 50px rgba(50,25,13,.16);
}

.seller-mark { width: 4.8rem; height: 4.8rem; display: grid; place-items: center; color: #f3bd64; border: 1px solid #8d6544; border-radius: 50%; background: rgba(255,255,255,.045); }
.seller-mark svg { width: 2rem; }
.seller-banner h3 { margin: 0; font-family: Georgia,serif; font-size: clamp(1.5rem,2.5vw,2.3rem); }
.seller-banner p:not(.eyebrow) { margin: .35rem 0 0; color: #d8c6ae; }

.button-cream {
  min-height: 3rem !important;
  padding-inline: 1.15rem !important;
  color: #352017 !important;
  background: #f7e9cf !important;
  border-radius: 999px !important;
  font-weight: 750 !important;
}

.community-section {
  position: relative;
  padding-block: 7.5rem;
  overflow: hidden;
  color: #f3e6d0;
  background: radial-gradient(circle at 0 0,rgba(196,86,36,.22),transparent 34%), radial-gradient(circle at 100% 100%,rgba(224,169,61,.09),transparent 32%), #211711;
}

.community-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .1;
  background-image: linear-gradient(35deg,transparent 48%,rgba(255,255,255,.09) 49%,rgba(255,255,255,.09) 51%,transparent 52%);
  background-size: 42px 42px;
  pointer-events: none;
}

.community-grid { position: relative; display: grid; grid-template-columns: minmax(0,.78fr) minmax(520px,1.22fr); align-items: center; gap: clamp(3rem,7vw,7rem); }
.community-copy h2 { color: #fff6e6; }
.community-copy > p:not(.eyebrow) { max-width: 560px; margin: 1.5rem 0 0; color: #cbbba7; font-size: 1.08rem; line-height: 1.8; }
.community-values { display: grid; gap: 1.2rem; margin-top: 2.1rem; }
.community-values > div { align-items: flex-start; }
.community-values svg { width: 1.4rem; margin-top: .15rem; color: #e7a64b; }
.community-values strong { color: #faeedb; font-size: 1rem; }
.community-values small { color: #aa9987; font-size: .84rem; }

.chat-card {
  overflow: hidden;
  color: #2b1b13;
  background: #fffaf0;
  border: 1px solid #8b684c;
  border-radius: 1.5rem;
  box-shadow: 0 28px 70px rgba(0,0,0,.27), 0 0 0 5px rgba(241,184,93,.06);
}

.chat-header { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #ead7b8; background: #fffdf7; }
.chat-header > div, .chat-header > div > span:last-child { display: flex; align-items: center; }
.chat-header > div { gap: .75rem; }
.chat-header > div > span:last-child { align-items: flex-start; flex-direction: column; line-height: 1.35; }
.chat-header strong { font-family: Georgia,serif; font-size: 1.15rem; }
.chat-header small { color: #826d5b; font-size: .76rem; }

.chat-mark { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; color: white; background: #a43b1f; border-radius: 50%; }
.chat-mark svg { width: 1.2rem; }

.chat-status { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .32rem .65rem; color: #556322; background: #edf0d8; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.chat-status i { width: .5rem; height: .5rem; border-radius: 50%; background: #71832e; box-shadow: 0 0 0 4px rgba(113,131,46,.12); }
.chat-status.loading i, .chat-status.posting i { animation: pulse-status 1.1s infinite; }
.chat-status.preview { color: #8b5b21; background: #f5e8cc; }
.chat-status.preview i { background: #bf7c2d; }

@keyframes pulse-status { 50% { opacity: .35; transform: scale(.75); } }

.message-list {
  height: 360px;
  padding: 1.2rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c8ac83 transparent;
  background: radial-gradient(circle at 100% 0,rgba(232,183,95,.13),transparent 30%), #f7eedf;
}

.message { display: grid; grid-template-columns: auto 1fr; gap: .7rem; margin-bottom: 1rem; }
.message-avatar { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; color: #fff7e8; background: linear-gradient(145deg,#c35a28,#71311d); border-radius: .75rem; font-family: Georgia,serif; font-weight: 700; }

.message > div {
  width: fit-content;
  max-width: min(100%,470px);
  padding: .72rem .9rem;
  background: rgba(255,253,247,.9);
  border: 1px solid #e5d4b9;
  border-radius: .25rem 1rem 1rem 1rem;
  box-shadow: 0 4px 12px rgba(75,44,27,.04);
}

.message p { margin: 0; font-size: .9rem; line-height: 1.55; }
.message-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin-bottom: .25rem !important; }
.message-name strong { color: #8c351c; font-size: .8rem; }
.message-name span { color: #947f6b; font-size: .67rem; }

.chat-form { padding: 1rem 1.15rem .8rem; border-top: 1px solid #e8d7bc; background: #fffdf8; }
.chat-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: .65rem; }

.chat-form label, .checkout-form label, .seller-form label {
  display: grid;
  gap: .28rem;
  color: #5e4939;
  font-size: .78rem;
  font-weight: 750;
}

.chat-fields input, .chat-fields select, .checkout-form input, .seller-form input, .seller-form select, .seller-form textarea {
  min-height: 2.7rem;
  border-color: #d9c6a7;
  background: #fffdf8;
  font-size: .9rem;
}

.chat-fields > label:last-child > div, .seller-form > label > div { width: 100%; }
.message-field { position: relative; display: block !important; }

.message-field textarea {
  min-height: 5.1rem;
  padding: .75rem 3.7rem .75rem .85rem;
  resize: none;
  border-color: #d6bf9c;
  background: #fffaf0;
  font-size: .92rem;
}

.message-field button { position: absolute; right: .6rem; bottom: .6rem; width: 2.65rem; height: 2.65rem; padding: 0; color: white; background: #a23b1f; border-radius: 50%; }
.chat-form-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .35rem; color: #8c7461; font-size: .7rem; }
.chat-form-meta span:first-child { color: #8b341e; }

.safety-section { display: grid; grid-template-columns: minmax(470px,.9fr) minmax(0,1.1fr); align-items: center; gap: clamp(3rem,8vw,8rem); padding-block: 8rem; }
.safety-visual { position: relative; min-height: 610px; display: grid; place-items: center; isolation: isolate; }

.safety-visual::before {
  content: "";
  position: absolute;
  z-index: -3;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(201,67,48,.15),rgba(201,67,48,.03) 52%,transparent 70%);
}

.signal-ring { position: absolute; z-index: -2; border: 1px solid rgba(180,32,40,.15); border-radius: 50%; }
.signal-ring-one { width: 25rem; height: 25rem; }
.signal-ring-two { width: 33rem; height: 33rem; }

.phone-shell {
  position: relative;
  width: 310px;
  min-height: 590px;
  padding: .6rem;
  overflow: hidden;
  color: #f9f2e5;
  background: #13100e;
  border: 2px solid #4b3a31;
  border-radius: 2.75rem;
  box-shadow: 0 35px 70px rgba(48,23,14,.28), inset 0 0 0 2px #0b0908;
  transform: rotate(-2.5deg);
}

.phone-shell::before { content: ""; position: absolute; z-index: 5; width: 6rem; height: 1.15rem; top: .55rem; left: 50%; border-radius: 0 0 1rem 1rem; background: #080706; transform: translateX(-50%); }
.phone-top { height: 2rem; display: flex; align-items: center; justify-content: space-between; padding-inline: 1rem; font-size: .67rem; }
.phone-top svg { width: .9rem; }

.phone-map {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: linear-gradient(30deg,transparent 49%,rgba(111,134,92,.25) 50%,transparent 51%) 0 0 / 42px 42px, linear-gradient(150deg,transparent 49%,rgba(111,134,92,.17) 50%,transparent 51%) 0 0 / 58px 58px, #273022;
  border-radius: 1.8rem 1.8rem .7rem .7rem;
}

.map-road { position: absolute; height: .26rem; background: #c6af87; box-shadow: 0 0 0 2px rgba(31,28,24,.7); border-radius: 999px; }
.road-one { width: 130%; left: -15%; top: 48%; transform: rotate(-24deg); }
.road-two { width: 100%; left: 16%; top: 64%; transform: rotate(45deg); }
.road-three { width: 90%; left: -35%; top: 25%; transform: rotate(75deg); }
.map-label { position: absolute; padding: .12rem .35rem; color: #ded0b4; background: rgba(26,28,20,.74); border-radius: .3rem; font-size: .55rem; }
.label-one { top: 42%; left: 19%; }
.label-two { top: 18%; right: 20%; }

.location-pulse {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 3.8rem;
  height: 3.8rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(192,31,42,.85);
  border: 3px solid #ffd8c7;
  border-radius: 50%;
  box-shadow: 0 0 0 9px rgba(191,31,42,.2), 0 0 0 20px rgba(191,31,42,.08);
  transform: translate(-50%,-50%);
}

.location-pulse svg { width: 1.35rem; }
.phone-panel { padding: 1rem 1rem 1.2rem; text-align: center; }
.phone-panel > p:first-child { margin: 0; color: #d89668; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.phone-panel h3 { margin: .2rem 0 .9rem; font-family: Georgia,serif; font-size: 1.5rem; }

.sos-button {
  width: 9.5rem;
  height: 9.5rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: radial-gradient(circle at 38% 28%,#ed5e58,#b31420 60%,#740a13);
  border: 7px solid #291518;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #d16561, 0 13px 28px rgba(153,18,28,.42), inset 0 4px 7px rgba(255,255,255,.24);
  cursor: pointer;
}

.sos-button span { font-size: 2.35rem; font-weight: 900; letter-spacing: .03em; line-height: 1; }
.sos-button small { margin-top: .4rem; font-size: .5rem; font-weight: 800; letter-spacing: .12em; }
.phone-caption { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: 1rem 0 0; color: #94867a; font-size: .62rem; }
.phone-caption svg { width: .75rem; }

.floating-alert {
  position: absolute;
  right: 0;
  top: 18%;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  color: #332016;
  background: rgba(255,253,247,.95);
  border: 1px solid #d7bda0;
  border-radius: 1rem;
  box-shadow: 0 16px 35px rgba(67,36,22,.2);
  backdrop-filter: blur(9px);
}

.floating-alert > svg { width: 1.5rem; color: var(--danger); }
.floating-alert span { display: grid; line-height: 1.3; }
.floating-alert strong { font-size: .82rem; }
.floating-alert small { color: #83705f; font-size: .68rem; }
.safety-copy h2 { font-size: clamp(3rem,5.2vw,5.8rem); }
.safety-lead { max-width: 650px; margin: 1.6rem 0 0; color: #655143; font-size: 1.08rem; line-height: 1.8; }

.safety-steps { display: grid; gap: 0; margin: 2.1rem 0; border-block: 1px solid #dbc8a9; }
.safety-steps > div { display: grid; grid-template-columns: 3.4rem 1fr; gap: .8rem; padding-block: 1rem; border-bottom: 1px solid #e4d3b7; }
.safety-steps > div:last-child { border-bottom: 0; }
.safety-steps > div > span { color: #b83f2c; font-family: Georgia,serif; font-size: 1.15rem; font-weight: 700; }
.safety-steps strong { font-size: 1rem; }
.safety-steps p { margin: .08rem 0 0; color: #756152; font-size: .88rem; }

.future-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  margin-bottom: 1.4rem;
  padding: .95rem 1rem;
  color: #69423a;
  background: #f4ded2;
  border: 1px solid #e6c1b0;
  border-radius: .9rem;
}

.future-note svg { width: 1.35rem; color: #a72c2d; }
.future-note p { margin: 0; font-size: .82rem; line-height: 1.55; }

.button-danger {
  color: #fff !important;
  background: linear-gradient(135deg,#c12730,#87101b) !important;
  border: 1px solid #790d16 !important;
  box-shadow: 0 10px 25px rgba(160,20,29,.19) !important;
  border-radius: 999px !important;
}

.story-section { padding-block: 4rem; background: #f0e2c9; border-block: 1px solid #dcc5a1; }
.story-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.story-grid > div { padding: 1rem 3rem; border-right: 1px solid #cfb58c; }
.story-grid > div:first-child { padding-left: 0; }
.story-grid > div:last-child { padding-right: 0; border-right: 0; }
.story-number { margin: 0 0 .35rem; color: #b04925; font-family: Georgia,serif; font-size: .95rem; font-weight: 700; }
.story-grid h3 { margin: 0; font-family: Georgia,serif; font-size: 1.6rem; }
.story-grid p:last-child { margin: .55rem 0 0; color: #6a5647; font-size: .92rem; }

footer { color: #ddcdb8; background: #1b120e; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .65fr .75fr 1fr; gap: 4rem; padding-block: 4.2rem; }
.footer-wordmark { color: #fff4df; }
.footer-grid > div:first-child > p { max-width: 300px; color: #978676; font-size: .9rem; }
.footer-grid > div:nth-child(2), .footer-grid > div:nth-child(3) { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.footer-grid > div > strong { margin-bottom: .4rem; color: #f0dfc6; font-size: .83rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-grid a:not(.wordmark), .footer-grid button { padding: 0; color: #aa9887; background: none; border: 0; font-size: .85rem; cursor: pointer; }
.footer-grid a:hover, .footer-grid button:hover { color: #efb55a; }

.footer-cta { padding: 1.1rem; background: rgba(255,255,255,.035); border: 1px solid #493328; border-radius: 1rem; }
.footer-cta svg { width: 1.45rem; color: #d35a34; }
.footer-cta strong { display: block; margin: .45rem 0 0 !important; color: #f0dfc6 !important; font-size: .86rem !important; }
.footer-cta p { margin: .4rem 0 0; color: #9b8a7a; font-size: .8rem; }
.footer-bottom { min-height: 4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #796b60; border-top: 1px solid #33241d; font-size: .75rem; }

.menu-sheet, .cart-sheet { color: #2c1b13 !important; background: #fffaf0 !important; border-color: #d7bea0 !important; }
.menu-sheet { width: min(90vw,390px) !important; max-width: 390px !important; padding: 1rem !important; }
.menu-sheet nav { display: grid; margin-top: 1rem; }
.menu-sheet nav a { min-height: 3.5rem; display: flex; justify-content: space-between; align-items: center; padding-inline: .7rem; border-bottom: 1px solid #e5d3b6; font-family: Georgia,serif; font-size: 1.15rem; }
.menu-sheet nav svg { width: 1rem; color: var(--sunset); }
.menu-sheet > button:last-child { margin-top: auto; min-height: 3rem; }

.cart-sheet { width: min(100vw,490px) !important; max-width: 490px !important; padding: 0 !important; gap: 0 !important; }
.cart-sheet-header { padding: 1.4rem 1.5rem 1rem !important; border-bottom: 1px solid #e5d2b4; }
.cart-sheet-header [data-slot="sheet-title"] { font-family: Georgia,serif; font-size: 1.7rem; }
.cart-scroll { flex: 1; padding: 1.2rem 1.5rem 2rem; overflow-y: auto; }
.cart-lines { display: grid; gap: .85rem; }
.cart-line { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; padding: .8rem; background: #fffdf8; border: 1px solid #e3d0b2; border-radius: .9rem; }
.cart-line-icon { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; color: white; border-radius: .75rem; }
.cart-line-icon svg { width: 1.35rem; }
.tone-sunset { background: #bd4d22; }
.tone-olive { background: #64732c; }
.tone-clay { background: #97483e; }
.tone-gold { background: #aa7628; }
.tone-plum { background: #74344f; }
.tone-sky { background: #46677e; }
.cart-line > div { min-width: 0; }
.cart-line strong { display: block; overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.cart-line small { color: #7a6758; font-size: .75rem; }

.quantity-control { width: fit-content; display: flex; align-items: center; gap: .2rem; margin-top: .45rem; overflow: hidden; border: 1px solid #d7c2a3; border-radius: 999px; }
.quantity-control button, .remove-button { display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.quantity-control button { width: 1.8rem; height: 1.8rem; }
.quantity-control button:hover { background: #f0e2c9; }
.quantity-control svg { width: .75rem; }
.quantity-control span { min-width: 1rem; text-align: center; font-size: .75rem; font-weight: 800; }
.remove-button { width: 2rem; height: 2rem; color: #9b7e68; }
.remove-button:hover { color: var(--danger); }
.remove-button svg { width: 1rem; }

.cart-total { display: flex; justify-content: space-between; align-items: center; margin-top: 1.1rem; padding: 1rem 0; border-block: 1px solid #dbc7a8; }
.cart-total span { color: #675345; font-size: .9rem; }
.cart-total strong { font-family: Georgia,serif; font-size: 1.45rem; }
.checkout-note { margin: .8rem 0; color: #806c5c; font-size: .78rem; }
.checkout-form, .seller-form { display: grid; gap: .8rem; }
.checkout-button { min-height: 3rem !important; margin-top: .3rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-error { margin: 0; color: #a32128; font-size: .78rem; font-weight: 650; }

.honeypot { position: absolute !important; width: 1px !important; height: 1px !important; left: -10000px !important; opacity: 0 !important; }

.empty-cart, .order-success, .dialog-success { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-cart > svg, .order-success > svg, .dialog-success > svg { width: 3.5rem; height: 3.5rem; color: #ac4626; }
.empty-cart h3, .order-success h3 { margin: 1rem 0 0; font-family: Georgia,serif; font-size: 1.65rem; }
.empty-cart p, .order-success p { max-width: 330px; margin: .45rem 0 1.2rem; color: #766253; font-size: .9rem; }
.order-success strong { margin: .3rem 0 .6rem; color: #9a351e; font-family: ui-monospace,monospace; font-size: 1.05rem; }

.seller-dialog, .safety-dialog {
  max-height: min(90vh,760px) !important;
  overflow-y: auto !important;
  color: #2d1c14 !important;
  background: #fffaf0 !important;
  border-color: #d8bea0 !important;
  border-radius: 1.3rem !important;
}

.seller-dialog { width: min(calc(100% - 2rem),660px) !important; max-width: 660px !important; padding: 1.5rem !important; }
.seller-dialog [data-slot="dialog-title"], .safety-dialog [data-slot="dialog-title"] { font-family: Georgia,serif; font-size: 1.8rem; }
.seller-dialog textarea { min-height: 7rem; resize: vertical; }
.full-select { width: 100% !important; }
.dialog-success { min-height: 360px; }
.dialog-success [data-slot="dialog-title"] { margin-top: 1rem; line-height: 1.2; }
.dialog-success [data-slot="dialog-description"] { max-width: 420px; margin: .7rem 0 1.2rem; line-height: 1.6; }

.safety-dialog { width: min(calc(100% - 2rem),590px) !important; max-width: 590px !important; }
.safety-dialog-icon { width: 3rem; height: 3rem; display: grid; place-items: center; margin: 0 0 .3rem; color: #fff; background: #a81925; border-radius: 50%; }
.safety-dialog-icon svg { width: 1.4rem; }
.safety-dialog-list { display: grid; gap: .6rem; }
.safety-dialog-list p { display: grid; grid-template-columns: auto 1fr; gap: .75rem; margin: 0; padding: .8rem; background: #f5ead8; border: 1px solid #e6d3b5; border-radius: .8rem; }
.safety-dialog-list > p > svg { width: 1.3rem; margin-top: .1rem; color: #a22a2d; }
.safety-dialog-list span { display: grid; }
.safety-dialog-list strong { font-size: .88rem; }
.safety-dialog-list small { color: #756253; font-size: .76rem; line-height: 1.45; }

.prototype-warning { display: grid; grid-template-columns: auto 1fr; gap: .7rem; padding: .85rem; color: #654235; background: #f1dcd0; border: 1px solid #e2bcae; border-radius: .8rem; }
.prototype-warning svg { width: 1.2rem; color: var(--danger); }
.prototype-warning p { margin: 0; font-size: .78rem; line-height: 1.5; }

@media (max-width: 1120px) {
  .hero-section { grid-template-columns: minmax(0,.9fr) minmax(450px,1.1fr); gap: 3rem; }
  .hero-copy h1 { font-size: clamp(3.7rem,6.7vw,5.3rem); }
  .community-grid { grid-template-columns: .8fr 1.2fr; gap: 3.5rem; }
  .safety-section { grid-template-columns: 430px 1fr; gap: 4rem; }
  .footer-grid { grid-template-columns: 1.3fr .7fr .9fr; gap: 2rem; }
  .footer-cta { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .section-shell { width: min(100% - 2rem,760px); }
  .desktop-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; min-height: 4.7rem; padding-inline: 1rem; }
  .mobile-menu { display: inline-flex !important; }
  .nav-cart { font-size: 0 !important; gap: .35rem !important; }
  .nav-cart svg { width: 1.2rem; }
  .nav-cart span { font-size: .72rem; }
  .hero-section { grid-template-columns: 1fr; min-height: 0; padding-block: 4.5rem 5rem; }
  .hero-copy { max-width: 700px; }
  .hero-visual { width: min(100%,700px); margin: 0 auto; }
  .hero-note-top { right: -.5rem; }
  .hero-note-bottom { left: -.5rem; }
  .promise-grid { grid-template-columns: 1fr 1fr; padding-block: .5rem; }
  .promise-grid p:nth-child(2) { border-right: 0; }
  .heading-row { grid-template-columns: 1fr; gap: 1rem; }
  .heading-note { max-width: 620px; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .seller-banner { grid-template-columns: auto 1fr; }
  .seller-banner > button { grid-column: 2; justify-self: start; }
  .community-grid { grid-template-columns: 1fr; }
  .community-copy { max-width: 680px; }
  .safety-section { grid-template-columns: 1fr; padding-block: 6rem; }
  .safety-visual { order: 2; min-height: 620px; }
  .safety-copy { order: 1; max-width: 700px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-grid > div { padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid #cfb58c; }
  .story-grid > div:last-child { border-bottom: 0; }
  .footer-grid { grid-template-columns: 1.3fr .7fr .9fr; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 6rem; }
  .top-ribbon { font-size: .64rem; letter-spacing: .08em; }
  .top-ribbon p { gap: .45rem; }
  .top-ribbon p > :nth-child(n+4) { display: none; }
  .wordmark { font-size: 1.25rem; }
  .wordmark-mark { width: 2.35rem; height: 2.35rem; }
  .hero-section { gap: 3.2rem; padding-top: 3.4rem; }
  .hero-copy h1 { font-size: clamp(3.25rem,15.5vw,5rem); }
  .hero-lead { font-size: 1.05rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions a { width: 100%; }
  .hero-proof { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
  .hero-proof > div { align-items: flex-start; }
  .hero-image-frame { border-width: 5px; border-radius: 2rem; box-shadow: 0 20px 50px rgba(57,28,14,.22), 0 0 0 1px #d99c48, 0 0 0 4px #f1c36f; }
  .hero-note { min-width: 0; padding: .65rem .75rem; }
  .hero-note-top { top: -1.1rem; right: .5rem; }
  .hero-note-bottom { left: .5rem; bottom: -1.2rem; }
  .promise-grid { grid-template-columns: 1fr; padding-block: .75rem; }
  .promise-grid p { min-height: 2.45rem; justify-content: flex-start; border-right: 0; border-bottom: 1px solid rgba(250,228,193,.12); }
  .promise-grid p:last-child { border-bottom: 0; }
  .shop-section { padding-block: 5rem; }
  .section-heading h2, .community-copy h2, .safety-copy h2 { font-size: clamp(2.65rem,12vw,4rem); }
  .product-grid { gap: .7rem; }
  .product-art { height: 155px; }
  .product-art-icon { width: 4.2rem; height: 4.2rem; padding: .85rem; }
  .product-art-location { top: .55rem; left: .55rem; max-width: calc(100% - 1.1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .61rem; }
  .product-card-body { padding: .85rem; }
  .product-meta { display: block; margin-bottom: .35rem; }
  .product-meta span:last-child { display: none; }
  .product-card h3 { font-size: 1.05rem; }
  .product-maker { font-size: .72rem; }
  .product-description { display: none; }
  .product-footer { display: grid; gap: .55rem; margin-top: .7rem; padding-top: .65rem; }
  .product-footer > strong { font-size: 1rem; }
  .add-button { width: 100%; min-height: 2.35rem !important; }
  .catalogue-note { align-items: flex-start; text-align: left; }
  .seller-banner { grid-template-columns: 1fr; padding: 1.5rem; }
  .seller-mark { width: 3.5rem; height: 3.5rem; }
  .seller-banner > button { grid-column: auto; width: 100%; }
  .community-section { padding-block: 5.5rem; }
  .chat-card { border-radius: 1.1rem; }
  .message-list { height: 330px; padding: .9rem; }
  .chat-fields { grid-template-columns: 1fr; }
  .chat-form-meta { font-size: .64rem; }
  .safety-visual { min-height: 590px; transform: scale(.92); margin-inline: -1rem; }
  .floating-alert { right: 0; top: 12%; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; padding-block: 3.2rem; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-cta { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 1rem; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .section-shell { width: calc(100% - 1.35rem); }
  .site-header { padding-inline: .7rem; }
  .wordmark { gap: .45rem; font-size: 1.05rem; }
  .wordmark-mark { width: 2.1rem; height: 2.1rem; }
  .nav-cart { height: 2.35rem !important; padding-inline: .75rem !important; }
  .mobile-menu { width: 2.35rem !important; height: 2.35rem !important; }
  .hero-copy h1 { font-size: 3.25rem; }
  .hero-proof small { font-size: .7rem; }
  .product-art { height: 135px; }
  .product-art-location { display: none; }
  .product-card-body { padding: .72rem; }
  .product-card h3 { font-size: .96rem; }
  .product-maker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .add-button { font-size: .74rem !important; }
  .chat-header { padding: .8rem; }
  .chat-status { padding: .25rem .45rem; }
  .message > div { padding: .65rem .72rem; }
  .message p { font-size: .82rem; }
  .safety-visual { transform: scale(.85); margin-block: -2.5rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child, .footer-cta { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* cPanel conversion helpers */
[hidden] { display: none !important; }
.db-warning { position: relative; z-index: 100; padding: .7rem 1rem; color: #fff; background: #9f2027; text-align: center; font-weight: 700; }
.db-warning a { text-decoration: underline; }
.kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid transparent; cursor: pointer; transition: 160ms ease; }
.mini-icon { display: inline-grid; place-items: center; min-width: 1.55rem; font-size: 1.4rem; color: var(--sunset); }
.hero-image-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-art-glyph { display: grid; place-items: center; font-size: 3.2rem; line-height: 1; }
.product-card[hidden] { display: none !important; }
.chat-mark { display: grid; place-items: center; font-size: 1rem; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

.kb-layer { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; }
.kb-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(31,18,12,.62); backdrop-filter: blur(4px); cursor: default; }
.kb-drawer, .kb-modal { position: relative; z-index: 1; background: #fffaf0; box-shadow: -20px 0 60px rgba(36,22,15,.28); }
.kb-drawer { height: 100%; overflow: auto; }
.kb-modal { align-self: center; margin: auto; max-height: min(90vh, 860px); overflow: auto; border: 1px solid #d7bea0; border-radius: 1.2rem; box-shadow: 0 28px 80px rgba(36,22,15,.35); }
.kb-close { position: absolute; z-index: 5; top: .75rem; right: .8rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #efe0c7; color: #3a251a; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.kb-close:hover { background: #e4cfac; }
body.kb-locked { overflow: hidden; }

.menu-sheet h2, .cart-sheet h2, .seller-dialog h2, .safety-dialog h2 { margin: 0; color: var(--ink); font-family: Georgia,serif; line-height: 1.1; }
.menu-sheet > div:first-of-type { padding: 2rem .7rem 0; }
.menu-sheet > div:first-of-type p { color: #756253; }
.menu-sheet > .kb-btn { width: calc(100% - 1.4rem); margin: auto .7rem 1rem; }
.cart-sheet { position: relative; }
.cart-sheet-header h2 { font-size: 1.7rem; }
.cart-sheet-header p { margin: .3rem 0 0; color: #756253; }
.cart-scroll { height: calc(100% - 96px); overflow: auto; padding: 1rem 1.5rem 2rem; }
.cart-lines { display: grid; gap: .7rem; }
.cart-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .75rem 0; border-bottom: 1px solid #eadbc2; }
.cart-line-icon { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: .75rem; color: #fff; font-size: 1.35rem; }
.tone-sunset { background:#b6401e; }.tone-gold { background:#9c6121; }.tone-sky { background:#354c68; }.tone-olive { background:#485522; }.tone-plum { background:#4c2037; }.tone-clay { background:#7f2c2a; }
.cart-line > div { min-width: 0; display: grid; }
.cart-line strong { line-height: 1.25; }
.cart-line small { color: #7c6757; }
.quantity-control { width: fit-content; display: grid; grid-template-columns: 1.8rem 2rem 1.8rem; align-items: center; margin-top: .45rem; border: 1px solid #dbc7a8; border-radius: 999px; overflow: hidden; }
.quantity-control button { border-radius: 0; }
.quantity-control span { text-align: center; font-weight: 800; }
.remove-button { font-size: 1rem; }
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 2px solid #3a251a; }
.cart-total strong { font-family: Georgia,serif; font-size: 1.5rem; }
.checkout-note { padding: .75rem; color: #755d4c; background: #f4e8d3; border-radius: .7rem; font-size: .82rem; }
.checkout-form, .seller-form { display: grid; gap: .8rem; }
.checkout-form label, .seller-form label, .chat-form label { display: grid; gap: .32rem; }
.checkout-form label > span, .seller-form label > span, .chat-form label > span { font-size: .76rem; font-weight: 800; color: #5f4838; }
.checkout-form input, .seller-form input, .seller-form select, .seller-form textarea, .chat-fields input, .chat-fields select, .message-field textarea { width: 100%; border: 1px solid #d7c3a4; border-radius: .7rem; background: #fffdf8; color: #2b1b13; }
.checkout-form input, .seller-form input, .seller-form select, .chat-fields input, .chat-fields select { min-height: 2.8rem; padding: .55rem .75rem; }
.seller-form textarea { min-height: 7rem; padding: .7rem; resize: vertical; }
.checkout-button, .seller-form > .kb-btn { min-height: 3rem; }
.form-error { margin: 0; color: #9f2027; font-size: .83rem; font-weight: 700; }
.empty-cart, .order-success { padding: 2rem .5rem; }
.empty-cart h3, .order-success h3 { margin: .8rem 0 .25rem; font-family: Georgia,serif; font-size: 1.5rem; }
.empty-cart p, .order-success p { color: #756253; }
.success-icon { width: 3.8rem; height: 3.8rem; display: grid; place-items: center; color: white; background: #2f7d4a; border-radius: 50%; font-size: 2rem; }
.order-success > strong { padding: .45rem .75rem; color: #7f2b17; background: #f1dfbd; border-radius: .45rem; letter-spacing: .05em; }

.seller-dialog, .safety-dialog { padding: 1.6rem !important; }
.seller-dialog > p, .safety-dialog > p { color: #756253; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.safety-dialog-list b { width: 1.5rem; color: #a22a2d; font-size: 1.1rem; }
.prototype-warning { display: grid; grid-template-columns: auto 1fr; gap: .7rem; margin: .8rem 0; padding: .8rem; color: #6a231f; background: #f6ded4; border: 1px solid #e8b7aa; border-radius: .8rem; }
.prototype-warning p { margin: 0; font-size: .82rem; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .kb-modal { width: calc(100% - 1rem) !important; max-height: 94vh; border-radius: 1rem; }
  .cart-scroll { padding-inline: 1rem; }
}

/* Multi-page additions */
.desktop-nav a.active { color: var(--sunset-dark); }
.desktop-nav a.active::after { right: 0; }

.page-intro {
  padding-block: 5.6rem 2.6rem;
}
.page-intro h1,
.about-hero h1 {
  max-width: 900px;
  margin: .35rem 0 1.1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.4rem, 7vw, 6.6rem);
  line-height: .94;
  letter-spacing: -.055em;
}
.page-intro > p:last-child {
  max-width: 760px;
  margin: 0;
  color: #715d4e;
  font-size: 1.08rem;
  line-height: 1.8;
}

.portal-section { padding-block: 7rem; }
.portal-heading { max-width: 800px; margin-bottom: 2.4rem; }
.portal-heading h2 { margin-bottom: .8rem; }
.portal-heading > p:last-child { max-width: 650px; margin: 0; color: #756253; }
.portal-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.portal-card {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem;
  overflow: hidden;
  border: 1px solid #d9c4a4;
  border-radius: 1.25rem;
  box-shadow: 0 15px 34px rgba(80,49,30,.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.portal-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(80,49,30,.15); }
.portal-card .portal-icon { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; margin-bottom: auto; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(255,255,255,.12); font-size: 1.35rem; }
.portal-card > p { margin: 1.4rem 0 .25rem; font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.portal-card h3 { margin: 0; font-family: Georgia,serif; font-size: 1.65rem; line-height: 1.1; }
.portal-card > span:last-child { margin-top: .7rem; font-size: .82rem; font-weight: 750; }
.portal-shop { color: #fff4df; background: linear-gradient(145deg,#b84c25,#6d241b); }
.portal-community { color: #fff4df; background: linear-gradient(145deg,#3f2a1d,#1f1610); }
.portal-safety { color: #fff4df; background: linear-gradient(145deg,#a71927,#541019); }
.portal-sell { color: #fff4df; background: linear-gradient(145deg,#76802f,#39451f); }

.home-featured { padding-block: 2rem 7rem; }
.product-grid-featured { margin-top: 2rem; }
.heading-side .text-link { display: inline-block; margin-top: .8rem; color: #a84422; font-weight: 800; }

.home-community-tease { padding-block: 6.5rem; color: #f6ead7; background: radial-gradient(circle at 10% 0,rgba(193,82,34,.2),transparent 35%), #221710; }
.tease-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.7fr); align-items: center; gap: clamp(3rem,8vw,8rem); }
.tease-grid h2 { max-width: 700px; margin: .4rem 0 1rem; color: #fff5e4; font-family: Georgia,serif; font-size: clamp(2.7rem,5vw,4.8rem); line-height: 1; }
.tease-grid > div:first-child > p:not(.eyebrow) { max-width: 650px; color: #baa894; }
.tease-chat { min-height: 270px; display: flex; flex-direction: column; justify-content: center; padding: 2rem; background: #fffaf0; border: 1px solid #8b684c; border-radius: 1.4rem; box-shadow: 0 25px 60px rgba(0,0,0,.25); color: #2b1b13; }
.tease-chat > span { width: 3.3rem; height: 3.3rem; display: grid; place-items: center; margin-bottom: 1rem; color: white; background: #a43b1f; border-radius: 50%; }
.tease-chat strong { font-family: Georgia,serif; font-size: 1.8rem; }
.tease-chat p { margin: .5rem 0 1.3rem; color: #715f51; }
.tease-chat small { color: #9a7f6b; font-weight: 700; }

.shop-page-section { padding-top: 2rem; }
.community-page-section { margin-top: 1rem; }
.safety-page-section { padding-top: 3rem; }

.community-guidelines { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; padding-block: 4.5rem; }
.community-guidelines > div { padding: 1.5rem; border: 1px solid #dcc9ab; border-radius: 1rem; background: rgba(255,253,247,.75); }
.community-guidelines span { color: #b04925; font-family: Georgia,serif; font-weight: 800; }
.community-guidelines h3 { margin: .55rem 0 .35rem; font-family: Georgia,serif; font-size: 1.4rem; }
.community-guidelines p { margin: 0; color: #756253; font-size: .9rem; }

.safety-principles { padding-block: 6.5rem; color: #f5ead7; background: #271814; }
.safety-principles .section-heading { max-width: 800px; margin-bottom: 2rem; }
.safety-principles h2 { color: #fff3df; }
.principle-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.principle-grid article { min-height: 230px; padding: 1.4rem; background: rgba(255,255,255,.045); border: 1px solid #59392d; border-radius: 1rem; }
.principle-grid article > span { font-size: 1.6rem; }
.principle-grid h3 { margin: 1.2rem 0 .5rem; color: #fff0d7; font-family: Georgia,serif; font-size: 1.3rem; }
.principle-grid p { margin: 0; color: #b5a18f; font-size: .88rem; }

.about-hero { display: grid; grid-template-columns: minmax(0,.9fr) minmax(480px,1.1fr); align-items: center; gap: 4rem; padding-block: 6rem; }
.about-hero > div:first-child > p:last-child { max-width: 700px; color: #715d4e; font-size: 1.08rem; line-height: 1.8; }
.about-hero-art { position: relative; min-height: 520px; overflow: hidden; border: 1px solid #c8ae86; border-radius: 1.5rem; box-shadow: 0 25px 60px rgba(66,36,18,.16); }
.about-hero-art img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; display: block; }
.about-hero-art > div { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; display: flex; justify-content: space-between; gap: .6rem; padding: .8rem 1rem; color: #fff4df; background: rgba(35,22,15,.74); border: 1px solid rgba(255,255,255,.2); border-radius: .8rem; backdrop-filter: blur(12px); }
.about-copy-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6rem; padding-block: 7rem; }
.about-copy-grid h2 { margin: .5rem 0 0; font-family: Georgia,serif; font-size: clamp(2.6rem,5vw,4.7rem); line-height: 1; }
.about-copy-grid > div:last-child { color: #6f5b4c; font-size: 1.06rem; line-height: 1.85; }
.about-copy-grid > div:last-child p:first-child { margin-top: 0; }
.about-cta { padding-block: 4.5rem; color: #f7ead4; background: #352118; }
.about-cta > div { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.about-cta h2 { margin: .35rem 0 0; color: #fff4e0; font-family: Georgia,serif; font-size: clamp(2.4rem,4vw,4rem); }
.about-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.sell-page { display: grid; grid-template-columns: minmax(320px,.75fr) minmax(0,1.25fr); gap: 2rem; padding-block: 1.5rem 7rem; }
.seller-benefits { min-height: 610px; padding: 2rem; color: #f8ead3; background: radial-gradient(circle at 90% 0,rgba(230,168,68,.18),transparent 34%), #2a1b14; border: 1px solid #6b452d; border-radius: 1.4rem; }
.seller-benefits h2 { margin: .45rem 0 2rem; color: #fff4df; font-family: Georgia,serif; font-size: clamp(2.6rem,4vw,4.2rem); line-height: 1; }
.seller-benefits > div { display: grid; grid-template-columns: 2.5rem 1fr; gap: .8rem; padding-block: 1.1rem; border-top: 1px solid #533629; }
.seller-benefits > div > span { color: #e2a64e; font-family: Georgia,serif; font-weight: 800; }
.seller-benefits p { margin: 0; }
.seller-benefits strong { display: block; color: #f5e7d2; }
.seller-benefits small { display: block; margin-top: .3rem; color: #ad9986; line-height: 1.55; }
.seller-page-card { padding: 2rem; background: #fffaf0; border: 1px solid #d7bea0; border-radius: 1.4rem; box-shadow: 0 20px 50px rgba(80,49,30,.09); }
.seller-page-card h2 { margin: .4rem 0 .6rem; font-family: Georgia,serif; font-size: clamp(2.2rem,4vw,3.5rem); }
.seller-page-card #sellerFormWrap > p:not(.eyebrow) { margin: 0 0 1.4rem; color: #756253; }
.seller-page-card .seller-form { gap: 1rem; }
.seller-page-success { min-height: 520px; }
.seller-page-success h2 { margin: 1rem 0 .4rem; }
.seller-page-success p { color: #756253; }

@media (max-width: 1050px) {
  .portal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .principle-grid { grid-template-columns: repeat(2,1fr); }
  .about-hero { grid-template-columns: 1fr; }
  .about-hero-art { min-height: 420px; }
  .about-hero-art img { min-height: 420px; }
}

@media (max-width: 900px) {
  .page-intro { padding-block: 4rem 2rem; }
  .tease-grid { grid-template-columns: 1fr; }
  .community-guidelines { grid-template-columns: 1fr; }
  .about-copy-grid { grid-template-columns: 1fr; gap: 2rem; padding-block: 5rem; }
  .about-cta > div { align-items: flex-start; flex-direction: column; }
  .sell-page { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .page-intro h1, .about-hero h1 { font-size: clamp(2.8rem,14vw,4.2rem); }
  .portal-section { padding-block: 5rem; }
  .portal-grid { grid-template-columns: 1fr; }
  .portal-card { min-height: 230px; }
  .home-featured { padding-bottom: 5rem; }
  .home-community-tease { padding-block: 5rem; }
  .principle-grid { grid-template-columns: 1fr; }
  .about-hero { padding-block: 4rem; }
  .about-hero-art { min-height: 330px; }
  .about-hero-art img { min-height: 330px; }
  .about-hero-art > div { flex-wrap: wrap; }
  .sell-page { padding-bottom: 5rem; }
  .seller-benefits, .seller-page-card { padding: 1.25rem; }
}