/* Shared identity layer. Load after the storefront's component styles. */
:root {
  --paper: #f5f1e9;
  --white: #fffdf8;
  --ink: #214e43;
  --muted: #59685f;
  --rust: #a9362a;
  --line: #d6ddd3;
  --sage: #e5ebe2;
  --peach: #f0dfd1;
  --jade-dark: #0c3028;
}

::selection { background: #ceddcb; color: var(--jade-dark); }

/* The mark is an abstract folded square, paired with a readable name. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.045em;
  text-align: left;
}
.wordmark > .brand-mark {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin: 0;
  background-color: currentColor;
  -webkit-mask: url('assets/brand-mark.svg') center / contain no-repeat;
  mask: url('assets/brand-mark.svg') center / contain no-repeat;
}
.wordmark > .brand-label {
  display: block;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.wordmark .brand-label > span {
  display: block;
  margin: 6px 0 0 2px;
  color: var(--muted);
  font: 600 10px/1.2 var(--sans);
  letter-spacing: .26em;
}
.header-main { min-height: 88px; }
.desktop-nav { min-height: 48px; }
.desktop-nav .nav-item > a { font-weight: 600; letter-spacing: .07em; }
.demo-banner { background: #e8ecdf; color: #47594f; }
.header-search input { font-size: 13px; }

/* A strong opening, with the quieter editorial type retained below it. */
.hero {
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.hero-copy {
  min-width: 0;
  min-height: 0;
  padding: 56px clamp(34px, 5.4vw, 86px);
}
.hero-copy > .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 23px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .13em;
}
.hero-copy > .eyebrow::before {
  content: '';
  display: block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  background: var(--rust);
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}
.hero .hero-copy h1 {
  max-width: 11.5ch;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(52px, 4.7vw, 74px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.hero-copy h1 em { color: var(--rust); font-style: normal; }
.hero-copy > p {
  max-width: 36ch;
  margin-top: 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.hero-actions { flex-wrap: wrap; gap: 17px 24px; margin-top: 27px; }
.hero-actions .button { min-height: 50px; padding: 14px 23px; font-size: 13px; font-weight: 600; }
.hero-actions .text-link { font-size: 12px; font-weight: 550; }
.hero-footnote { max-width: 400px; margin-top: 29px; font-size: 11px; line-height: 1.6; }
.hero-image { min-height: 560px; height: 100%; background: #e7e2d3; }
.hero-image img { min-height: 560px; height: 100%; object-fit: cover; object-position: center; }
.hero-image .image-caption,
.hero-image .hero-caption {
  left: 24px;
  right: auto;
  bottom: 22px;
  max-width: calc(100% - 48px);
  padding: 7px 10px;
  background: #f5f1e9ed;
  color: #385047;
  font-size: 10px;
  line-height: 1.5;
}

/* Component-level changes leave form, price, and stock labels intact. */
.button { font-weight: 550; }
.button:hover { background: var(--jade-dark); border-color: var(--jade-dark); }
.button.secondary:hover { background: var(--sage); color: var(--ink); border-color: var(--ink); }
.button.light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.text-link { text-underline-offset: 5px; }
.eyebrow { font-weight: 600; }
.values-bar { gap: 20px; padding-block: 22px; }
.values-bar > span,
.values-bar > a { font-size: 12px; line-height: 1.5; }
.values-bar svg { flex-shrink: 0; color: var(--rust); }
.discovery-shortcuts { background: var(--white); }
.discovery-shortcuts strong { font-weight: 600; }
.discovery-shortcut-symbol { font-family: var(--sans); font-weight: 500; }
.discovery-spotlights > a { border-top: 2px solid var(--ink); }
.discovery-spotlights > a:nth-child(2) { border-top-color: var(--rust); }
.discovery-spotlights h3 { letter-spacing: .05em; font-weight: 600; }
.product-card .product-brand { color: #53675a; font-size: 10px; font-weight: 650; letter-spacing: .1em; }
.product-card .product-copy h3 { color: var(--ink); font-weight: 550; }
.product-card .product-meta { color: var(--muted); }
.product-card .product-label { color: #3c5146; }
.product-card .product-bottom strong { color: var(--ink); font-weight: 600; }
.product-add:hover { background: var(--ink); color: var(--white); }
.product-card .product-save { color: var(--ink); }
.product-card .product-save.is-saved svg { fill: currentColor; }
.product-card .product-quick { background: #fffdf8ed; color: var(--ink); font-weight: 550; }
.catalog-note { color: var(--muted); line-height: 1.65; }
.footer .wordmark,
.footer .wordmark > .brand-label { color: var(--paper); }
.footer .wordmark > .brand-mark { background-color: var(--paper); }
.footer .wordmark .brand-label > span { color: #cad7cb; }

@media (min-width: 761px) and (max-width: 1100px) {
  .wordmark { gap: 10px; font-size: 24px; }
  .wordmark > .brand-mark { flex-basis: 38px; width: 38px; height: 38px; }
  .hero-copy { padding: 46px 34px; }
  .hero .hero-copy h1 { font-size: clamp(46px, 5.4vw, 60px); }
  .hero, .hero-image, .hero-image img { min-height: 525px; }
  .hero-copy > p { font-size: 14px; }
  .hero-actions { gap: 17px; }
  .values-bar > span, .values-bar > a { font-size: 11px; }
}

@media (max-width: 760px) {
  .header-main { min-height: 72px; gap: 9px; }
  .header-main .mobile-toggle { flex: 0 0 30px; }
  .header-main .wordmark { gap: 0; font-size: 21px; }
  .header-main .wordmark > .brand-mark { display: none; }
  .header-main .wordmark > .brand-label { font: inherit; letter-spacing: inherit; }
  .header-main .wordmark .brand-label > span { margin: 4px 0 0 1px; font-size: 9px; letter-spacing: .25em; }
  .header-main .header-actions { gap: 6px; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { padding: 33px 22px 30px; min-height: 0; }
  .hero-copy > .eyebrow { margin-bottom: 17px; font-size: 10px; letter-spacing: .1em; }
  .hero .hero-copy h1 { max-width: 12ch; font-size: clamp(40px, 10.8vw, 54px); line-height: 1.03; letter-spacing: -.05em; }
  .hero-copy > p { max-width: 37ch; margin-top: 18px; font-size: 14px; line-height: 1.6; }
  .hero-actions { gap: 16px 23px; margin-top: 22px; }
  .hero-actions .button { min-height: 48px; padding: 13px 20px; font-size: 12px; }
  .hero-actions .text-link { font-size: 12px; }
  .hero-footnote { margin-top: 21px; font-size: 10px; }
  .hero-image { min-height: 0; height: clamp(260px, 70vw, 350px); }
  .hero-image img { min-height: 0; height: 100%; object-position: center 56%; }
  .hero-image .image-caption,
  .hero-image .hero-caption { bottom: 15px; left: 18px; max-width: calc(100% - 36px); padding: 6px 8px; font-size: 9px; }
  .values-bar { gap: 14px 20px; padding-block: 20px; }
  .values-bar > span, .values-bar > a { font-size: 11px; }
  .product-card .product-brand { font-size: 10px; }
  .product-card .product-copy h3 { font-size: 14px; line-height: 1.45; }
  .product-card .product-meta { font-size: 11px; line-height: 1.5; }
  .product-card .product-label { font-size: 9px; letter-spacing: .08em; }
  .product-card .product-quick { font-size: 11px; }
  .product-card .product-bottom strong { font-size: 14px; }
  .footer .wordmark { font-size: 30px; gap: 10px; }
  .footer .wordmark > .brand-mark { flex-basis: 38px; width: 38px; height: 38px; }
}

@media (max-width: 360px) {
  .header-main.container { width: calc(100% - 24px); gap: 6px; }
  .header-main .wordmark { font-size: 19px; gap: 0; }
  .header-main .wordmark > .brand-mark { flex-basis: 28px; width: 28px; height: 28px; }
  .header-main .header-actions { gap: 2px; }
  .hero-copy { padding-inline: 20px; }
  .hero .hero-copy h1 { font-size: 39px; }
  .hero-actions { gap: 15px; }
  .hero-actions .button { padding-inline: 16px; }
  .hero-actions .text-link { font-size: 11px; }
}

.mobile-menu .mobile-country { display:flex; align-items:center; flex-wrap:wrap; gap:10px; width:100%; margin-top:16px; padding:16px 0; border:0; border-top:1px solid var(--line); background:transparent; color:var(--ink); font:12px var(--sans); text-align:left; cursor:pointer; }
.mobile-menu .mobile-country strong { margin-left:auto; font-weight:600; }

/* KCJ skin: supplied floral emblem and three-origin discovery. */
.origin-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.origin-card{padding:32px;border:1px solid var(--line);background:var(--white);min-width:0}.origin-card:nth-child(2){background:var(--sage)}.origin-card:nth-child(3){background:var(--peach)}.origin-card h2,.origin-card h3{font-size:35px;margin:14px 0}.origin-card p{font-size:14px;line-height:1.7;margin-bottom:25px}.origin-card .text-link{font-size:12px}.origin-note{font-size:12px;color:var(--muted);margin-top:25px}.origin-snapshot{margin-top:35px;padding:30px;background:var(--sage);display:flex;justify-content:space-between;align-items:center;gap:25px}.origin-snapshot p{font-size:13px;max-width:680px;margin:12px 0}.about-brand-signature{width:min(420px,100%);height:auto;margin:0 0 32px}.footer .wordmark{font-size:26px}.header-main .wordmark{white-space:nowrap}.origin-home{padding-top:55px;padding-bottom:30px}@media(max-width:760px){.origin-cards{grid-template-columns:1fr}.origin-card{padding:26px}.origin-card h2,.origin-card h3{font-size:30px}.origin-snapshot{align-items:flex-start;flex-direction:column;padding:25px}.origin-home{padding-top:30px}.header-main .mobile-search{display:none!important}}