/* SnapSellGo — Botanical collection ("Made from…") */
/* Design tokens: every colour / size below comes from here (contrast checked: WCAG AA on all paper tones) */
:root{
  --ink:#304337;--text-2:#5c6452;--sage:#6f805a;--line:#dddccf;--gold:#b19a61;
  --paper:#f8f5eb;--paper-2:#faf8f1;--paper-3:#faf6e9;--card:#fffdf6;--accent:#4d1637;--accent-ink:var(--accent);
  --muted:var(--text-2);
  --fs-xs:11px;--fs-sm:12px;--fs-base:14px;--fs-md:16px;--fs-lg:19px;--fs-xl:24px;--fs-2xl:31px;--fs-3xl:42px;
  --r-sm:6px;--r-md:8px;--r-pill:999px;
  --tap:44px;
  --font-serif:Georgia,'Times New Roman',serif;--font-sans:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 Arial,Helvetica,sans-serif;overflow-x:hidden}
button{font:inherit;cursor:pointer;color:inherit}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #9a7c41;outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.bt-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 38px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper-2) 88%,transparent);backdrop-filter:blur(6px)}
.bt-brand{font-size:23px;font-weight:600;letter-spacing:-1px;text-decoration:none}
.bt-brand span{color:var(--sage)}
.bt-brand i{font-style:normal;padding-left:8px;color:var(--sage)}
.bt-header nav{display:flex;gap:26px;font-size:13px}
.bt-header nav a{text-decoration:none;padding-bottom:3px}
.bt-header nav a[aria-current]{border-bottom:1px solid var(--ink)}
.bt-locale{font-size:12px;color:var(--text-2)}

/* Page shell */
.bt-main{position:relative;max-width:1440px;margin:auto;background:radial-gradient(ellipse at 50% 4%,#fffdf7 0,transparent 60%)}
.bt-main:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(115deg,transparent 5%,#f8e7a319 13%,transparent 26%,#fff8d917 38%,transparent 48%)}

/* Hero */
.bt-hero{position:relative;z-index:2;text-align:center;padding:72px 24px 48px}
.bt-hero:before,.bt-hero:after{content:'';position:absolute;z-index:-1;pointer-events:none;width:280px;height:290px;top:-110px;background:url('assets/ui/palm-frond.webp') center/contain no-repeat;opacity:.7;animation:bt-sway 11s ease-in-out infinite alternate}
.bt-hero:before{left:-90px;rotate:100deg}
.bt-hero:after{right:-90px;transform:scaleX(-1);rotate:-100deg;animation-delay:-5s}
.bt-eyebrow{font-size:11px;letter-spacing:2.1px;color:var(--text-2);text-transform:uppercase}
.bt-hero h1{font:400 clamp(36px,5.6vw,64px)/1.08 Georgia,'Times New Roman',serif;letter-spacing:-1.5px;margin:20px 0}
.bt-hero h1 em{color:var(--text-2)}
.bt-hero p{color:var(--text-2);font-size:15px;margin:0 0 26px}
.bt-ambient{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.bt-ambient button{display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;color:var(--text-2);background:#f5f3e9;font-size:11px;transition:background .25s,border-color .25s}
.bt-ambient button svg{width:13px;height:13px}
.bt-ambient button[aria-pressed=true]{background:#e6ecde;border-color:#c8d2bd}

/* First-visit guide (same pattern as the seller dashboard tips) */
.bt-tip{position:absolute;z-index:40;width:min(300px,calc(100vw - 32px));background:#fffdf6;border:1px solid #e3dccb;border-radius:14px;padding:16px 18px;box-shadow:0 18px 50px -10px #1d2a2466;text-align:left;animation:bt-tip-in .35s ease}
.bt-tip-arrow{position:absolute;top:-8px;left:var(--arrow,40px);width:14px;height:14px;background:#fffdf6;border-left:1px solid #e3dccb;border-top:1px solid #e3dccb;transform:rotate(45deg)}
.bt-tip-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#8aa66b,#4f6b33);margin-bottom:10px}
.bt-tip-ico svg{width:18px;height:18px}
.bt-tip h3{margin:0 0 6px;font:17px Georgia,serif;color:var(--ink)}
.bt-tip p{margin:0;font:13px/1.55 Arial,sans-serif;color:var(--text-2)}
.bt-tip-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.bt-tip-dots{display:flex;gap:5px}.bt-tip-dots i{width:7px;height:7px;border-radius:50%;background:#dcd5c2}.bt-tip-dots i.on{background:#4f6b33;width:18px;border-radius:4px}
.bt-tip-btns{display:flex;gap:6px}
.bt-tip-btns button{min-height:36px;padding:0 14px;border-radius:999px;font:13px Arial,sans-serif;border:1px solid #d8d0bd;background:transparent;color:var(--text-2)}
.bt-tip-btns .next{background:var(--ink);border-color:var(--ink);color:#fff}
.bt-ambient button.bt-tip-target{box-shadow:0 0 0 4px #c8d2bd80;border-color:#8aa66b}
@keyframes bt-tip-in{from{opacity:0;transform:translateY(6px)}}

/* Collection */
.bt-explore{position:relative;z-index:4;padding:0 85px 30px}
.bt-head{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:16px 0 22px}
.bt-head h2{font:italic 31px Georgia,serif;margin:3px 0}
.bt-tabs{display:flex;gap:7px;flex-wrap:wrap}
.bt-tabs button{border:0;background:transparent;min-height:var(--tap);padding:10px 16px;border-radius:var(--r-pill);color:var(--text-2);font-size:12px}
.bt-tabs button[aria-pressed=true]{color:#fff;background:var(--ink)}
.bt-search{display:flex;align-items:center;gap:18px;color:var(--text-2);font-size:12px;margin:0 0 28px}
.bt-search input{border:1px solid var(--line);border-radius:var(--r-pill);background:#fffdf7;padding:12px 18px;font:inherit;width:min(330px,65%);color:var(--ink)}
.bt-empty{text-align:center;font:italic 17px Georgia,serif;color:var(--text-2);padding:40px 0}
.bt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:32px}
.bt-hero-keys{font-size:var(--fs-sm)!important;letter-spacing:.4px;color:var(--text-2)!important;margin-top:-12px!important}
.bt-index{text-align:center;font-size:var(--fs-sm);line-height:2;color:var(--text-2);padding:0 0 20px;max-width:900px;margin:auto}
.bt-index span{display:block;letter-spacing:2px;text-transform:uppercase;font-size:var(--fs-xs)}
.bt-index a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line)}
.bt-index a:hover{color:var(--ink)}
.bt-bottom{text-align:center;font:italic 18px Georgia,serif;color:var(--text-2);padding:36px 0 18px}

/* Card — the original illustration, untouched */
.bt-card{position:relative;display:block;width:100%;padding:0;border:0;background:none;text-align:left}
.bt-card-face{position:relative;display:block;aspect-ratio:1122/1402;border-radius:var(--r-sm);overflow:hidden;background:#f3efe1;box-shadow:0 6px 18px #3e423412;transition:box-shadow .4s}
.bt-flat{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bt-card:hover .bt-card-face,.bt-card:focus-visible .bt-card-face{box-shadow:0 12px 30px #384c3224}
/* the card is cut into aligned layers: only the fruit steps out, the corner foliage parts gently */
.bt-card-face.layered{overflow:visible}
.bt-plate{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--r-sm);object-fit:cover;display:block}
.bt-layer{position:absolute;display:block;max-width:none;pointer-events:none;transition:transform .7s cubic-bezier(.2,.65,.2,1),filter .9s}
.bt-leaf{z-index:2}
.bt-leaf.tl{transform-origin:0 0}.bt-leaf.tr{transform-origin:100% 0}.bt-leaf.bl{transform-origin:0 100%}.bt-leaf.br{transform-origin:100% 100%}
.bt-fruit{z-index:3;transform-origin:50% 100%}
.bt-card:hover .bt-fruit,.bt-card:focus-visible .bt-fruit{transform:translateX(var(--fx,0px)) rotate(var(--rot,0deg)) scale(1.08);filter:drop-shadow(0 18px 14px #3a2b2050)}
.bt-card:hover .bt-leaf.tl,.bt-card:focus-visible .bt-leaf.tl{transform:translate(-1.5px,-1px) rotate(-1deg)}
.bt-card:hover .bt-leaf.tr,.bt-card:focus-visible .bt-leaf.tr{transform:translate(1.5px,-1px) rotate(1deg)}
.bt-card:hover .bt-leaf.bl,.bt-card:focus-visible .bt-leaf.bl{transform:translate(-1px,1px) rotate(.8deg)}
.bt-card:hover .bt-leaf.br,.bt-card:focus-visible .bt-leaf.br{transform:translate(1px,1px) rotate(-.8deg)}
.bt-caption{display:flex;justify-content:space-between;align-items:center;padding:12px 2px 0;font-size:12px}
.bt-caption span:last-child{color:var(--text-2)}

/* Living garden: plants sit BEHIND the cards, creatures fly above */
.bt-plants,.bt-creatures{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.bt-plants{z-index:0}
.bt-creatures{z-index:30}
.bt-plant{position:absolute;bottom:-70px;width:300px;height:460px;transform-origin:bottom center;animation:bt-sway 9s ease-in-out infinite alternate;opacity:.9;filter:drop-shadow(6px 8px 9px #253e2525)}
.bt-plant img{width:100%;height:100%;object-fit:contain}
.bt-plant.left{left:-170px}
.bt-plant.right{right:-170px;transform:scaleX(-1);animation-delay:-4s}
.bt-actor{position:absolute;left:0;top:0;will-change:transform}
.bt-bird{width:150px;height:100px;filter:drop-shadow(0 5px 4px #243b2025)}
.bt-bird>div,.bt-bee>div{position:relative;width:100%;height:100%}
.bt-bird img,.bt-bee img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bt-bird .rest{display:none}
.bt-bird .body{clip-path:polygon(0 65%,36% 64%,72% 59%,77% 50%,100% 44%,100% 100%,0 100%)}
.bt-bird .wing{clip-path:polygon(32% 0,80% 0,80% 49%,74% 59%,36% 67%,32% 46%);transform-origin:72% 61%;animation:bt-bird-flap .52s ease-in-out infinite alternate}
.bt-bird.resting .rest{display:block;animation:bt-look 3s infinite}
.bt-bird.resting .flight{display:none}
.bt-bee{width:37px;height:25px}
.bt-bee .wing{clip-path:polygon(8% 0,57% 0,65% 48%,36% 54%,5% 37%);transform-origin:58% 47%;animation:bt-bee-flap .07s linear infinite alternate;opacity:.7}
.bt-butterfly{width:94px;height:63px;opacity:.95;filter:drop-shadow(0 3px 3px #263e3022);transition:scale 1s}
.bt-butterfly.small{width:53px;height:35px;opacity:.9;filter:hue-rotate(-14deg) drop-shadow(0 2px 2px #263e301a)}
.bt-butterfly.landed{scale:.8}
.bt-wings{position:relative;width:100%;height:100%;perspective:280px;transform-style:preserve-3d}
.bt-wings span{position:absolute;top:0;height:100%;background:url('assets/ui/morpho-autumn.webp') no-repeat;background-size:200% 100%}
.bt-wings .l{left:0;width:50%;background-position:left center;transform-origin:100% 50%;animation:bt-left-flap 1.35s ease-in-out infinite}
.bt-wings .r{left:50%;width:50%;background-position:right center;transform-origin:0 50%;animation:bt-right-flap 1.35s ease-in-out infinite}
.bt-wings .b{left:46%;width:8%;z-index:2;background-size:1250% 100%;background-position:50% 50%}
.bt-butterfly.small .l,.bt-butterfly.small .r{animation-duration:1.12s;animation-delay:-.4s}
.bt-butterfly.landed .l,.bt-butterfly.landed .r{animation-duration:4s}
.bt-seed{position:absolute;width:3px;height:3px;border-radius:50%;background:#cab976;opacity:.45}
.bt-paused .bt-creatures{display:none}
.bt-paused .bt-plant,.bt-paused .bt-hero:before,.bt-paused .bt-hero:after{animation:none}


/* Footer */
.bt-footer{position:relative;z-index:4;display:flex;justify-content:space-between;gap:15px;padding:22px 38px;border-top:1px solid var(--line);font-size:11px;color:var(--text-2);background:var(--paper)}
.bt-footer strong{color:var(--ink)}

/* The field journal (dialog) */
.bt-journal{padding:0;border:0;background:transparent;color:#34452f;width:min(1040px,94vw);max-width:1040px;max-height:92dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border-radius:var(--r-md);box-shadow:0 30px 100px #17231270;--accent:#4d1637}
.bt-journal::backdrop{background:#1d2a24ac;backdrop-filter:blur(7px)}
.bt-book{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:640px;background:#faf6e9;perspective:1800px}
.bt-page{position:relative;padding:44px 36px;min-width:0}
.bt-page-left{display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(90deg,transparent 93%,#5e47381a),radial-gradient(ellipse,#fffdf2,#f3e9d4)}
.bt-page-left:before{content:'';position:absolute;inset:14px;border:1px solid #b7b191;outline:1px solid #b7b19166;outline-offset:-5px;pointer-events:none}
.bt-page-right{padding-top:52px;background:linear-gradient(90deg,#5e473812,transparent 7%)}
.bt-close{position:absolute;right:12px;top:12px;z-index:10;width:var(--tap);height:var(--tap);border:1px solid #d8d4c3;border-radius:50%;background:#fffaf0;color:var(--accent);font-size:24px;line-height:1}
.bt-kicker{font:11px/1.5 Arial,sans-serif;letter-spacing:2px;color:var(--text-2);text-transform:uppercase}
.bt-journal h2{font:42px/1.1 Georgia,serif;color:var(--accent);margin:13px 0 4px}
.bt-latin{font:italic 15px Georgia,serif;color:var(--text-2);margin:0}
.bt-specimen{width:100%;max-height:290px;object-fit:contain;margin:20px 0 14px;filter:drop-shadow(0 14px 9px #41272c22);animation:bt-float 6s ease-in-out infinite}
.bt-story{font:italic 16px/1.55 Georgia,serif;color:var(--text-2);max-width:330px;margin:0}
.bt-page-foot{margin-top:auto;padding-top:18px;font:11px Georgia,serif;letter-spacing:2px;color:var(--text-2)}
.bt-journal h3{font:29px/1.2 Georgia,serif;color:var(--accent);margin:12px 0}
.bt-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.bt-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:var(--r-pill);font:14px Georgia,serif;text-decoration:none;border:1px solid var(--accent-ink);transition:transform .2s,box-shadow .2s}
.bt-btn.primary{background:var(--accent-ink);color:#fff}
.bt-btn.ghost{color:var(--accent-ink);background:transparent}
.bt-btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px #3e423422}
.bt-concept{font:11px/1.6 Arial,sans-serif;color:var(--text-2);border-top:1px solid #dfd7c4;padding-top:12px;margin-top:18px}

/* engraved sketches from the card's bottom corners, at their true proportions */
.bt-deco{position:absolute;inset:15px;pointer-events:none;z-index:0;overflow:hidden}
.bt-deco img{position:absolute;bottom:0;width:36%;height:auto;max-height:31%;object-fit:contain}
.bt-deco .l{left:0;object-position:left bottom}.bt-deco .r{right:0;object-position:right bottom}
.bt-page-left>*:not(.bt-deco){position:relative;z-index:1}
@media(max-width:700px){.bt-deco{display:none}}
/* herbalist's notes */
.bt-virtues{list-style:none;margin:14px 0 10px;padding:0;display:grid;gap:11px}
.bt-virtues li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font:15px/1.55 Georgia,serif;color:#4c5641}
.bt-virtues svg{width:20px;height:20px;margin-top:2px;color:var(--accent);opacity:.85}
.bt-parts-line{margin:12px 0 0;padding-top:10px;border-top:1px dashed #d9d0bb;font:12px/1.5 Arial,sans-serif;color:var(--text-2)}
.bt-parts-line span{letter-spacing:1.6px;text-transform:uppercase;font-size:11px;margin-right:6px}
.bt-parts-line em{font:italic 14px Georgia,serif;color:#5d664f}
/* real products from the makers */
.bt-makers{margin-top:24px}
.bt-makers-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.bt-makers-head h4{margin:0;font:italic 19px Georgia,serif;color:var(--accent)}
.bt-arrows{display:flex;gap:6px}
.bt-arrows button{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid #d8d0bd;background:#fffaf0;color:var(--accent);font-size:20px;line-height:1}
.bt-makers.empty .bt-arrows,.bt-makers.empty .bt-all{display:none}
.bt-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 6px}
.bt-track::-webkit-scrollbar{display:none}
.bt-product{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:#3e4a36;background:#fffdf6;border:1px solid #e3dccb;border-radius:var(--r-md);padding:8px;transition:border-color .25s,box-shadow .25s}
.bt-product:hover{border-color:var(--accent);box-shadow:0 6px 14px #3e423418}
.bt-product-img{display:block;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:#f1ebdc}
.bt-product-img img{width:100%;height:100%;object-fit:cover;display:block}
.bt-product-name{font:13px/1.35 Georgia,serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.bt-product-price{font:11px Arial,sans-serif;color:var(--accent-ink)}
.bt-product.skeleton{height:220px;background:linear-gradient(90deg,#f3eddf,#faf6ec,#f3eddf);background-size:200% 100%;animation:bt-shimmer 1.4s linear infinite;border-color:#ece5d4}
.bt-none{margin:6px 0;font:italic 15px/1.6 Georgia,serif;color:var(--text-2)}
.bt-none a{color:var(--accent-ink)}
@keyframes bt-shimmer{to{background-position:-200% 0}}
/* book opening */
.bt-cover{position:absolute;inset:0 50% 0 0;z-index:8;display:grid;place-content:center;gap:14px;text-align:center;background:radial-gradient(ellipse,#fffdf2,#eee2c8);transform-origin:right center;backface-visibility:hidden;pointer-events:none;box-shadow:5px 0 16px #4c342230}
.bt-cover strong{font:38px Georgia,serif;color:var(--accent)}
.bt-cover img{width:70%;max-height:260px;object-fit:contain;margin:auto}
.bt-cover span{font:italic 16px Georgia,serif;color:var(--text-2)}
.bt-journal[open] .bt-cover{animation:bt-open-book 1.25s cubic-bezier(.3,.1,.2,1) forwards}
.bt-journal[open] .bt-page-right{animation:bt-ink 1.5s ease both}
.bt-journal.still *{animation:none!important;transition:none!important}
.bt-journal.still .bt-cover{display:none}

@keyframes bt-sway{to{rotate:3deg}}
.bt-hero:before{animation-name:bt-sway-l}.bt-hero:after{animation-name:bt-sway-r}
@keyframes bt-sway-l{from{rotate:100deg}to{rotate:104deg}}
@keyframes bt-sway-r{from{rotate:-100deg}to{rotate:-104deg}}
@keyframes bt-float{50%{transform:translateY(-8px) rotate(-1deg)}}
@keyframes bt-bird-flap{from{transform:scaleY(1) rotate(-3deg)}to{transform:scaleY(.22) rotate(12deg)}}
@keyframes bt-bee-flap{to{transform:rotate(-12deg) scaleY(.6)}}
@keyframes bt-look{40%,65%{transform:rotate(-6deg)}}
@keyframes bt-left-flap{0%,100%{transform:rotateY(8deg)}35%{transform:rotateY(-66deg)}58%,80%{transform:rotateY(-16deg)}}
@keyframes bt-right-flap{0%,100%{transform:rotateY(-8deg)}35%{transform:rotateY(66deg)}58%,80%{transform:rotateY(16deg)}}
@keyframes bt-open-book{0%,10%{transform:rotateY(0);opacity:1}90%{opacity:1}100%{transform:rotateY(175deg);opacity:0;visibility:hidden}}
@keyframes bt-ink{0%,40%{opacity:0;transform:translateX(-15px)}100%{opacity:1;transform:none}}

@media(max-width:900px){.bt-explore{padding:0 40px 25px}}
@media(max-width:700px){
  .bt-header{padding:14px 16px}.bt-locale{display:none}
  .bt-hero{padding:48px 16px 36px}.bt-hero:before,.bt-hero:after{width:180px;opacity:.45}
  .bt-explore{padding:0 16px 20px}
  .bt-head{flex-direction:column;align-items:start;gap:10px}
  .bt-search{flex-direction:column;align-items:stretch;gap:8px}.bt-search input{width:100%}
  .bt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.bt-caption span:last-child{display:none}
  .bt-plant{width:200px;height:310px;bottom:-45px;opacity:.6}.bt-plant.left{left:-140px}.bt-plant.right{right:-140px}
  .bt-bird{width:110px;height:74px}
  .bt-footer{padding:18px 16px;flex-wrap:wrap}
  .bt-journal{width:96vw}
  .bt-book{grid-template-columns:1fr;min-height:0}
  .bt-page{padding:30px 22px}.bt-page-left{padding-top:36px}.bt-page-left .bt-number{padding:0 40px}
  .bt-specimen{max-height:150px;width:65%;margin:10px 0}
  .bt-story{font-size:14px}
  .bt-journal h2{font-size:31px}.bt-journal h3{font-size:24px}
  .bt-page-right{padding-top:18px}
  .bt-cover{inset:0;transform-origin:left center}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.bt-creatures{display:none}.bt-cover{display:none}}