/* Reference-led homepage. Kept separate so article layouts retain their own design. */
.botanical-home {
  --cream:#f7eee6; --ink:#252523; --charcoal:#5b5854;
  --magenta:#b44961; --magenta-text:#9b4156; --pine:#244d3c;
  --blush:#f3dcd5; --sand:#f2e3d5; --mint:#e6ede3;
  --container:1440px; --gutter:clamp(22px,5.8vw,84px); --header-h:112px;
  --line:1px solid var(--ink); --shadow:none; --shadow-lg:none;
  background:var(--cream);
}
.botanical-home .site-header {background:rgb(247 238 230 / .96);border-bottom:0}
.botanical-home .site-header.scrolled {box-shadow:0 1px 0 rgb(77 51 37 / .12)}
.botanical-home .header-inner {gap:24px}
.botanical-home .logo img {width:105px;height:auto}
.botanical-home .main-nav {gap:clamp(20px,2.4vw,35px)}
.botanical-home .main-nav a {font-family:var(--font-body);font-size:14px;font-weight:400}
.botanical-home .header-tools {gap:10px}
.botanical-home .search {width:clamp(185px,22vw,260px);background:transparent;border-color:#8b827b;height:46px}
.botanical-home .search input {font-size:13px}
.botanical-home .header-tools .icon-btn,.botanical-home .nav-toggle {width:46px;height:46px}
.botanical-home .nav-toggle {padding-inline:13px}
.botanical-home .search {border-color:#c9a9ad;background:#fff}
.botanical-home .search:focus-within {border-color:var(--pine);box-shadow:0 0 0 4px rgb(36 77 60 / .14)}
.botanical-home .btn {box-shadow:none;font-family:var(--font-body);font-weight:500;border-width:1px;min-height:54px;padding-inline:32px}
.botanical-home .btn:hover {box-shadow:none;transform:translateY(-2px);filter:brightness(.97)}
.botanical-home .btn-ghost {background:transparent}
.botanical-home .eyebrow {font-size:13px;letter-spacing:.105em;font-weight:600}
.botanical-home .hero {isolation:isolate;position:relative;padding:0;height:clamp(612px,calc(76vw - 48px),852px);overflow:hidden}
.hero-art {position:absolute;inset:0;z-index:-2;display:block;pointer-events:none;max-width:1600px;margin-inline:auto}
.hero-art img {width:100%;height:100%;object-fit:cover;object-position:center bottom}
.hero-art::after {content:'';position:absolute;inset:0;background:none;pointer-events:none}
.botanical-home .hero-inner {height:100%;display:block}
.botanical-home .hero-copy {position:relative;z-index:2;padding-top:clamp(34px,calc(10vw - 48px),92px);width:60%;max-width:750px}
.botanical-home .hero h1 {font-size:clamp(48px,5.3vw,68px);font-weight:800;line-height:1.09;letter-spacing:-.045em;margin-top:16px;text-wrap:initial}
.botanical-home .hero h1 em {font-size:1em;line-height:1.1;margin-top:3px;white-space:nowrap}
.botanical-home .hero .lead {max-width:39ch;font-size:clamp(16px,1.65vw,20px);line-height:1.5;margin-top:23px}
.botanical-home .hero-cta {gap:14px;margin-top:27px}
.botanical-home .hero-cta .btn {flex:0 0 auto}
.botanical-home .hero-cta .btn-ghost {background:#f0ddd4;border-color:#6d5b53;color:var(--ink)}
.hero-wave {position:absolute;width:100%;height:115px;bottom:-1px;left:0;fill:var(--cream);pointer-events:none}
.botanical-home .cats {padding:24px 0 52px;background:var(--cream)}
.botanical-home .category-heading {margin-bottom:34px;gap:30px;padding-inline:10px}
.botanical-home .category-heading h2 {font-size:clamp(36px,4.7vw,60px);line-height:1.1;letter-spacing:-.04em;margin-top:15px}
.botanical-home .category-shop {min-height:49px;gap:20px;font-size:14px;padding:0 26px;margin-bottom:7px;flex-shrink:0}
.category-shop svg {width:22px;height:22px}
/* One swipeable line: --cat-n tiles fit the width, so the next tile always peeks in as a hint to swipe. */
/* --cat-bleed = the space between the content column and the screen edge, so the row runs off the screen
   edge (not the column edge) on wide monitors too; on phones and laptops it is simply the gutter. */
.cat-scroller {--cat-bleed:calc((100vw - (min(100vw, var(--container)) - 2 * var(--gutter))) / 2);position:relative}
.botanical-home .cat-row {--cat-n:4.25;--cat-gap:16px;display:flex;align-items:flex-start;gap:var(--cat-gap);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--cat-bleed);margin:-8px calc(var(--cat-bleed) * -1);padding:8px var(--cat-bleed);scrollbar-width:none}
.botanical-home .cat-row::-webkit-scrollbar {display:none}
/* Arrow buttons are only for mouse users; touch screens swipe. They sit at the screen edges, low over the
   pictures (clear of each tile's own round arrow) and fade out at either end. */
.cat-nav {display:none;position:absolute;top:66%;z-index:3;width:46px;height:46px;margin-top:-23px;place-items:center;padding:0;border-radius:50%;border:1px solid #6d625a;background:rgb(247 238 230 / .96);color:var(--ink);cursor:pointer;box-shadow:0 6px 18px rgb(77 51 37 / .18);transition:opacity .2s ease,background .2s ease}
.cat-nav svg {width:20px;height:20px}
.cat-nav:hover {background:#fff}
.cat-nav:disabled {opacity:0;pointer-events:none}
.cat-prev {left:calc(var(--cat-bleed) * -1 + 20px)}
.cat-next {right:calc(var(--cat-bleed) * -1 + 20px)}
@media (hover:hover) and (pointer:fine) {.cat-nav {display:grid}}
.category-tile {flex:0 0 calc((100% - (var(--cat-n) - 1) * var(--cat-gap)) / var(--cat-n));scroll-snap-align:start;display:block;position:relative;isolation:isolate;aspect-ratio:.73;min-width:0;overflow:hidden;border-radius:15px;background:#f0d9cb;color:var(--ink);container-type:inline-size}
.category-tile img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.category-tile::after {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(249 231 220 / .45),transparent 52%)}
.category-copy {display:flex;flex-direction:column;align-items:flex-start;padding:clamp(18px,2vw,28px)}
.category-title {font-family:var(--font-display);font-size:min(11.8cqw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.15}
.category-description {font-size:clamp(11px,6.2cqw,17px);line-height:1.4;margin-top:7px}
.category-arrow {display:grid;place-items:center;width:38px;height:38px;border-radius:50%;margin-top:14px;background:#76253b;color:white;font-family:Arial,sans-serif;font-size:25px;font-weight:400;line-height:1}
.category-all {background:radial-gradient(90% 70% at 100% 100%,rgb(255 255 255 / .12),transparent 62%),linear-gradient(158deg,var(--pine),#1e3f35);color:#fbf3e8}
.category-all::after {display:none}
.category-all .category-arrow {background:#fbf3e8;color:#1e3f35}
.category-leaf {position:absolute;right:-8%;bottom:-3%;width:80%;height:auto;z-index:-1;color:#fbf3e8;opacity:.2;pointer-events:none}
.category-tile:hover img {transform:scale(1.035)}
.category-tile:focus-visible {outline-offset:5px}
.brand-values-wrap {max-width:1080px;margin:36px auto 0}
.brand-values {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.brand-values li {display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);font-size:14px;line-height:1.35;gap:10px}
.brand-values svg {width:36px;height:36px;color:#613543;stroke-width:1.2}
.brand-values .bv-dup {display:none}
.botanical-home .band {background:#284c3e;border:0;border-radius:22px}
.botanical-home .product-card,.botanical-home .post-card {border-color:rgb(98 74 55 / .16);box-shadow:none}
.botanical-home .product-card:hover,.botanical-home .post-card:hover {box-shadow:0 8px 24px rgb(77 51 37 / .08)}
.botanical-home .shop {padding-top:60px}
.botanical-home .chips .chip {box-shadow:none}

/* Compact cart controls and product-to-bag motion. */
.product-buy .add[hidden] { display:none !important; }
.sb-card-quantity { display:inline-flex; align-items:center; justify-content:space-between; min-width:104px; height:38px; border:1px solid #315b4b; border-radius:999px; overflow:hidden; background:#f5faf5; color:#254b3b; }
.sb-card-quantity button { border:0; background:transparent; color:inherit; cursor:pointer; width:34px; height:100%; font-size:20px; line-height:1; }
.sb-card-quantity button:hover:not(:disabled) { background:#dcebe0; }
.sb-card-quantity button:focus-visible { outline:2px solid #254b3b; outline-offset:-3px; }
.sb-card-quantity button:disabled { opacity:.45; cursor:wait; }
.sb-card-quantity span { min-width:25px; text-align:center; font-size:14px; font-weight:700; }
.sb-cart-flyer { position:fixed; z-index:999999; pointer-events:none; overflow:hidden; border-radius:20px; background:#fff; box-shadow:0 10px 30px rgb(37 75 59 / .28); }
.sb-cart-flyer img { width:100%; height:100%; object-fit:cover; }
.sb-bag-pop { animation:sb-bag-pop .48s cubic-bezier(.2,.8,.2,1); }
@keyframes sb-bag-pop { 0%,100% { transform:scale(1); } 40% { transform:scale(1.22) rotate(-8deg); } 70% { transform:scale(.94) rotate(4deg); } }
@media (prefers-reduced-motion:reduce) { .sb-bag-pop { animation:none; } }
.botanical-home .site-footer {background:#284538}
@media (min-width:1600px) {
  .hero-art {max-width:1350px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .hero-art::after {background:none}
}
@media (min-width:700px) and (max-width:999px) {
  .botanical-home {--header-h:88px;--gutter:32px}
  .botanical-home .main-nav {gap:0}
  .botanical-home .main-nav a {font-size:20px}
  .botanical-home .header-tools>.search {display:flex;width:230px}
  .botanical-home .hero {height:606px}
  .botanical-home .hero-copy {width:58%;padding-top:34px}
  .botanical-home .hero h1 {font-size:clamp(40px,5.6vw,55px)}
  .botanical-home .hero .lead {max-width:33ch}
  .botanical-home .category-heading {padding:0}
  .botanical-home .cat-row {--cat-n:3.3;--cat-gap:12px}
  .category-tile {aspect-ratio:.64}
  .category-copy {padding:16px 13px}
  .brand-values li {font-size:13px}
}
@media (max-width:699px) {
  .botanical-home {--header-h:114px;--gutter:22px}
  .botanical-home .header-inner {gap:8px}
  .botanical-home .logo img {width:94px;height:auto}
  .botanical-home .main-nav {gap:0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .botanical-home .main-nav a {font-size:20px}
  .botanical-home .header-tools>.search {width:100%;height:46px}
  .botanical-home .search input {font-size:16px}
  .botanical-home .hero {height:auto;min-height:0;padding-bottom:0}
  .botanical-home .hero-inner {display:flex;flex-direction:column;height:auto;padding-bottom:0}
  .botanical-home .hero-copy {padding-top:14px;width:100%;max-width:520px;align-self:center}
  .botanical-home .hero .eyebrow {font-size:10px;letter-spacing:.12em}
  .botanical-home .hero h1 {font-size:clamp(34px,8.7vw,56px);line-height:1.12;letter-spacing:-.045em;margin-top:13px}
  .botanical-home .hero .lead {font-size:14px;line-height:1.55;max-width:38ch;margin-top:17px}
  .botanical-home .hero-cta {gap:10px;margin-top:21px}
  .botanical-home .hero-cta .btn {min-height:48px;padding:0 24px;font-size:14px}
  .hero-art {inset:auto 0 0;height:clamp(340px,91vw,510px)}
  .hero-art::after {content:'';position:absolute;inset:0;background:none;pointer-events:none}
  .hero-art img {object-fit:cover;object-position:right 56%}
  .botanical-home .hero-inner::after {content:'';display:block;height:clamp(330px,87vw,490px);flex-shrink:0;pointer-events:none}
  .hero-wave {height:52px}
  .botanical-home .cats {padding:24px 0 36px}
  .botanical-home .category-heading {position:relative;display:block;padding:0;margin-bottom:22px}
  .botanical-home .category-heading .eyebrow {font-size:10px;letter-spacing:.09em}
  .botanical-home .category-heading h2 {font-size:clamp(28px,6.7vw,42px);margin-top:23px}
  .botanical-home .category-shop {position:absolute;right:0;top:-12px;padding:0 13px;font-size:11px;min-height:44px;gap:7px;margin:0}
  .category-shop svg {width:17px;height:17px}
  .botanical-home .cat-row {--cat-n:2.2;--cat-gap:12px}
  .category-tile {aspect-ratio:.66;border-radius:12px}
  .category-copy {padding:17px 14px}
  .category-description {margin-top:5px}
  .category-arrow {width:32px;height:32px;font-size:22px;margin-top:10px}
  /* promises: one line drifting right to left. The list is printed twice so the loop has no gap; the script at the
     end of the section moves it, lets a finger stretch it like rubber and springs it back. The CSS animation is only
     the fallback when the script does not run. */
  .brand-values-wrap {margin-top:48px;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .brand-values {display:flex;gap:0;width:max-content;animation:brand-marquee 30s linear infinite;will-change:transform}
  .brand-values.is-js {animation:none}
  .brand-values li {flex:0 0 172px;padding:0 12px;font-size:12px;gap:7px}
  .brand-values svg {width:31px;height:31px;-webkit-user-drag:none}
  .brand-values .bv-dup {display:flex}
  .botanical-home .shop {padding-top:36px}
}
@media (max-width:359px) {
  .botanical-home {--gutter:16px}
  .botanical-home .hero h1 {font-size:31px}
  .botanical-home .category-heading {flex-wrap:wrap}
  .category-copy {padding:14px 11px}
}
@keyframes brand-marquee {to {transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce) {
  .brand-values {animation:none}
  .brand-values .bv-dup {display:none}
  .brand-values-wrap {overflow-x:auto;scrollbar-width:none}
  .category-tile img {transition:none}
  .botanical-home .btn:hover,.category-tile:hover img {transform:none}
}
