/* ============================================================ Bud Buggy shared design system One stylesheet across every template so the ontology's pages cannot drift apart. Light is the default surface; the homepage opts into dark with . ============================================================ */ :root{ --primary:#174E2A; --primary-2:#299746; --cta:#FFDB2D; --accent:#DB4A19; --bg:#FFF5EA; --surface:#ffffff; --surface-2:#f5efe5; --text:#171A1B; --muted:#5c6260; --line:#ded7cc; --on-primary:#ffffff; --shadow:0 10px 30px rgba(16,32,24,.08); --radius:18px; --radius-sm:12px; --r-pill:999px; --max:1440px; --gutter:clamp(1.25rem,4vw,2.5rem); --z-sticky:100; --z-bar:120; --z-gate:900; --ease:cubic-bezier(.16,1,.3,1); --sage:#A7CF79; --smoke:#AEB2AD; --ico-1:var(--primary); --ico-2:var(--cta); } body[data-theme="dark"]{ --bg:#101412; --surface:#17201b; --surface-2:#1d2822; --text:#f3f6f2; --muted:#aab5ad; --line:#2b3a31; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text); font-family:Montserrat,system-ui,-apple-system,Arial,sans-serif;line-height:1.55; -webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select{font:inherit} h1,h2,h3,h4{margin:0} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} :focus-visible{outline:3px solid var(--primary-2);outline-offset:2px;border-radius:4px} body[data-theme="dark"] :focus-visible{outline-color:var(--cta)} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .display{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.035em;line-height:.98;text-wrap:balance} .h1{font-size:clamp(2.1rem,4.4vw,3.6rem)} .h2{font-size:clamp(1.55rem,3vw,2.35rem)} .h3{font-size:1.05rem;font-weight:900;letter-spacing:.02em;text-transform:uppercase} .lede{font-size:1.08rem;color:var(--muted);max-width:62ch;text-wrap:pretty} .muted{color:var(--muted)} .small{font-size:.86rem} .eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--primary-2)} body[data-theme="dark"] .eyebrow{color:var(--cta)} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:.85rem 1.4rem;border-radius:var(--r-pill);border:0;cursor:pointer; font-weight:800;font-size:.88rem;letter-spacing:.01em; transition:filter .2s,transform .12s var(--ease),background-color .2s,border-color .2s} .btn:active{transform:translateY(1px)} .btn svg{width:17px;height:17px;flex:none} .btn-cta{background:var(--cta);color:#111} .btn-cta:hover{filter:brightness(.95)} .btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{filter:brightness(1.15)} .btn-ghost{background:none;border:1.5px solid var(--line);color:var(--text)} .btn-ghost:hover{border-color:var(--text)} .link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:800;font-size:.88rem; border-bottom:2px solid var(--cta);padding-bottom:2px;transition:gap .2s var(--ease)} .link-arrow:hover{gap:.7rem} .link-arrow svg{width:15px;height:15px} .badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--primary-2);color:#fff; border-radius:var(--r-pill);padding:5px 11px;font-weight:800;font-size:.7rem; letter-spacing:.05em;text-transform:uppercase} .badge svg{width:13px;height:13px} .badge-cta{background:var(--cta);color:#111} .badge-quiet{background:var(--surface-2);color:var(--muted)} /* ---------- global header ---------- */ .hdr{background:var(--primary);color:#fff;position:sticky;top:0;z-index:var(--z-sticky)} .hdr a{color:#fff} .hdr-top{display:flex;align-items:center;gap:1rem;min-height:62px} .brand{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.03em; font-size:1.4rem;color:var(--cta);flex:none} .hdr-nav{display:none;gap:1.35rem;font-size:.86rem;font-weight:700;margin-inline-start:.5rem} .hdr-nav a{opacity:.9} .hdr-nav a:hover,.hdr-nav a[aria-current]{opacity:1;color:var(--cta)} .hdr-tools{margin-inline-start:auto;display:flex;align-items:center;gap:.35rem} .icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-pill); position:relative;color:#fff;transition:background-color .2s} .icon-btn:hover{background:rgba(255,255,255,.14)} .icon-btn svg{width:19px;height:19px} .cart-n{position:absolute;top:2px;right:2px;min-width:17px;height:17px;border-radius:var(--r-pill); background:var(--cta);color:#111;font-size:.62rem;font-weight:900;display:grid;place-items:center;padding-inline:4px} /* ---------- persistent fulfilment bar (ontology §3) ---------- */ .method-bar{background:var(--surface-2);border-bottom:1px solid var(--line);color:var(--text); font-size:.84rem;z-index:var(--z-bar)} .method-in{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding-block:.6rem} .method-in svg{width:17px;height:17px;flex:none;color:var(--primary-2)} .method-in b{font-weight:800} .method-in .change{margin-inline-start:auto;font-weight:800;color:var(--primary-2); border-bottom:1.5px solid currentColor;cursor:pointer;background:none;border-top:0;border-inline:0;padding:0 0 1px} .method-bar[data-state="unset"]{background:#fdf3d8;border-bottom-color:#e8cf8a} .method-bar[data-state="unset"] svg{color:var(--accent)} /* ---------- footer ---------- */ .ftr{background:var(--primary);color:#fff;margin-top:2rem;padding:2.2rem 0 1.2rem} .ftr a{color:#fff;opacity:.9;display:block;font-size:.85rem;margin:.35rem 0} .ftr a:hover{opacity:1;color:var(--cta)} .ftr-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem} .ftr h4{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6rem} .ftr-brand p{font-size:.85rem;opacity:.9;max-width:26ch;margin-top:.5rem} .legal{border-top:1px solid rgba(255,255,255,.16);margin-top:1.4rem;padding-top:1rem; display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.2rem;font-size:.76rem;opacity:.85} /* ---------- shared blocks ---------- */ .section{padding-block:clamp(2rem,4vw,3.2rem)} .grid-2{display:grid;grid-template-columns:1fr;gap:1rem} .grid-3{display:grid;grid-template-columns:1fr;gap:1rem} .grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem} .pad{padding:clamp(1.25rem,2.4vw,1.75rem)} .stack{display:grid;gap:.85rem} .facts{display:grid;gap:1rem} .fact{display:grid;grid-template-columns:34px 1fr;gap:.7rem;align-items:start} .fact svg{width:24px;height:24px;color:var(--primary-2)} .fact strong{display:block;font-size:.92rem} .fact span{font-size:.86rem;color:var(--muted)} .kv{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.9rem} .kv:last-child{border-bottom:0} .kv b{font-weight:800;text-align:right} .steps{counter-reset:s;display:grid;gap:1rem} .step{counter-increment:s;display:grid;grid-template-columns:38px 1fr;gap:.8rem;align-items:start} .step::before{content:counter(s);width:38px;height:38px;border-radius:var(--r-pill); background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:900;font-size:.9rem} .step strong{display:block} .step span{font-size:.87rem;color:var(--muted)} details.faq{border-top:1px solid var(--line)} details.faq summary{padding:.9rem 0;font-weight:800;cursor:pointer;display:flex; justify-content:space-between;gap:1rem;align-items:center;list-style:none;font-size:.94rem} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:"+";font-size:1.2rem;color:var(--muted)} details.faq[open] summary::after{content:"\2212"} details.faq p{padding:0 0 .9rem;font-size:.89rem;color:var(--muted)} details.faq p strong{color:var(--text)} .crumbs{padding:.9rem 0 .2rem;font-size:.84rem;color:var(--muted)} .crumbs a:hover{color:var(--text)} .cat-links{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem} .cat-link{display:flex;align-items:center;justify-content:space-between;gap:.6rem; padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm); background:var(--surface);font-weight:700;font-size:.9rem;transition:border-color .2s,transform .18s var(--ease)} .cat-link:hover{border-color:var(--cta);transform:translateY(-2px)} .cat-link svg{width:15px;height:15px;color:var(--muted)} .notice{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1rem;border-radius:var(--radius-sm); background:var(--surface-2);border:1px solid var(--line);font-size:.86rem} .notice svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--primary-2)} .notice.warn{background:#fdf3d8;border-color:#e8cf8a} .notice.warn svg{color:var(--accent)} @media (min-width:700px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .cat-links{grid-template-columns:repeat(3,1fr)} .ftr-grid{grid-template-columns:1.3fr repeat(4,1fr)} } @media (min-width:1000px){ .hdr-nav{display:flex} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important} } /* ---- brand icon chips (kit signature: 2-tone icon on a soft tinted ground) ---- */ .fact svg,.trust svg,.route .go svg,.notice svg,.method-in svg, .kv svg,.step svg,.diff svg{ overflow:visible } /* facts / trust / service: give the icon a sage chip so the 2-tone always pops */ .fact svg,.service svg{ width:38px;height:38px;padding:7px;border-radius:12px; background:color-mix(in oklab,var(--sage) 42%,transparent); --ico-1:var(--primary);--ico-2:var(--cta);box-sizing:border-box} .trust svg{ width:34px;height:34px;padding:6px;border-radius:10px;flex:none; background:rgba(255,219,45,.16);--ico-1:#FFF5EA;--ico-2:var(--cta)} /* dark surfaces: body goes cream so it reads on deep green */ .hdr .method-in svg,.method-bar svg{--ico-1:var(--primary);--ico-2:var(--cta)} .method-bar[data-state="unset"] svg{--ico-1:var(--accent);--ico-2:#fff} /* eligibility check on product cards keeps the green ring */ .elig svg{--ico-1:var(--primary-2);--ico-2:#fff} /* ---- homepage trust cards: icon chip + stat ---- */ .trust-card{display:flex;gap:1rem;align-items:flex-start} .trust-ico{width:52px;height:52px;flex:none;padding:11px;border-radius:14px; background:color-mix(in oklab,var(--sage) 42%,transparent); --ico-1:var(--primary);--ico-2:var(--cta);box-sizing:border-box} .trust-card .stat{display:block;font-weight:900;font-style:italic;text-transform:uppercase; font-size:clamp(1.6rem,2.8vw,2.1rem);color:var(--primary-2);letter-spacing:-.03em;line-height:1;margin-bottom:.35rem} /* ---- footer service strip ---- */ .ftr-services{display:grid;grid-template-columns:1fr;gap:1rem;padding-bottom:1.6rem; margin-bottom:1.6rem;border-bottom:1px solid rgba(255,255,255,.16)} .ftr-svc{display:flex;gap:.7rem;align-items:center} .ftr-svc svg{width:40px;height:40px;flex:none;padding:8px;border-radius:11px; background:rgba(255,255,255,.08);--ico-1:#FFF5EA;--ico-2:var(--cta);box-sizing:border-box} .ftr-svc b{display:block;font-size:.86rem;color:#fff} .ftr-svc span{font-size:.78rem;color:rgba(255,255,255,.8);line-height:1.35} @media (min-width:640px){ .ftr-services{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ .ftr-services{grid-template-columns:repeat(5,1fr)} } /* ================= product page brand sections ================= */ .bb-attrs{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1.1rem 0} .bb-attr{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem; padding:.85rem .5rem;border-radius:var(--radius-sm);background:var(--surface-2)} .bb-attr svg{width:40px;height:40px;--ico-1:var(--primary);--ico-2:var(--cta)} .bb-attr strong{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .bb-attr span{font-size:.9rem;font-weight:800} @media(min-width:560px){ .bb-attrs{grid-template-columns:repeat(4,1fr)} } .bb-strain{padding-block:clamp(1.5rem,4vw,2.5rem);display:grid;gap:1rem} .bb-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:clamp(1.1rem,2.5vw,1.6rem)} .bb-panel .h3{margin-bottom:.15rem} .bb-panel .sub{margin-bottom:1rem} .bb-two{display:grid;grid-template-columns:1fr;gap:1rem} @media(min-width:760px){ .bb-two{grid-template-columns:1fr 1fr} } .bb-terps{display:grid;grid-template-columns:1fr;gap:.9rem} @media(min-width:560px){ .bb-terps{grid-template-columns:repeat(3,1fr)} } .bb-terp{display:flex;gap:.7rem;align-items:center} .bb-drop{width:46px;height:46px;flex:none;--ico-1:var(--primary);--ico-2:var(--sage); filter:drop-shadow(0 3px 5px rgba(23,78,42,.18))} .bb-terp strong{display:block;font-size:.92rem} .bb-chips{display:flex;flex-wrap:wrap;gap:.5rem} .bb-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem .5rem .55rem; border-radius:999px;background:var(--surface-2);border:1px solid var(--line); font-weight:700;font-size:.85rem} .bb-chip svg{width:26px;height:26px;--ico-1:var(--primary);--ico-2:var(--cta)} .bb-diffs{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:.4rem; background:var(--primary);border-radius:var(--radius);padding:clamp(1.2rem,3vw,1.8rem)} .bb-diff{display:flex;gap:.75rem;align-items:flex-start;color:#fff} .bb-diff svg{width:40px;height:40px;flex:none;padding:7px;border-radius:11px; background:rgba(255,255,255,.08);--ico-1:#FFF5EA;--ico-2:var(--cta);box-sizing:border-box} .bb-diff b{display:block;font-size:.9rem} .bb-diff span{font-size:.82rem;color:rgba(255,255,255,.82);line-height:1.4} @media(min-width:640px){ .bb-diffs{grid-template-columns:repeat(2,1fr)} } @media(min-width:1080px){ .bb-diffs{grid-template-columns:repeat(4,1fr)} } .bb-seed-note{margin-top:.4rem;font-style:italic} .bb-genetics{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--muted);margin-bottom:.3rem} .bb-genetics svg{width:30px;height:30px;flex:none;--ico-1:var(--primary);--ico-2:var(--cta)} .bb-genetics strong{color:var(--text)} /* ---- WooCommerce single product: brand the controls, drop stock chrome ---- */ .woocommerce div.product form.cart .button, .woocommerce div.product .single_add_to_cart_button, .wc-block-components-button{ background:var(--cta)!important;color:#111!important;font-weight:900!important; text-transform:uppercase!important;letter-spacing:.02em;border:0!important;border-radius:999px!important; padding:.85rem 1.6rem!important;transition:filter .2s} .woocommerce div.product form.cart .button:hover, .woocommerce div.product .single_add_to_cart_button:hover{filter:brightness(.95)!important} .woocommerce div.product form.cart .quantity input{border-radius:999px;border:1.5px solid var(--line);padding:.6rem} /* the imported _bb_* fields already show as brand sections — hide the raw attributes table + tabs dupe */ .woocommerce-product-details__short-description .bb-dup, .woocommerce div.product .woocommerce-tabs .wc-tab table.shop_attributes, .product .woocommerce-product-attributes{display:none} .woocommerce div.product .product_meta{font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.8rem;margin-top:1rem} /* ---- product gallery (custom, no flexslider) ---- */ .bb-gallery{display:grid;gap:.7rem} .bb-gallery-main{border-radius:var(--radius);overflow:hidden;background:var(--surface-2);border:1px solid var(--line)} .bb-gallery-main img{width:100%;aspect-ratio:1;object-fit:cover;display:block} .bb-gallery-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem} .bb-thumb{padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--surface-2);aspect-ratio:1} .bb-thumb.is-active{border-color:var(--cta)} .bb-thumb img{width:100%;height:100%;object-fit:cover;display:block} /* let WooCommerce's own gallery wrapper collapse; ours replaces it */ .woocommerce div.product div.images .woocommerce-product-gallery__wrapper{margin:0} /* ---- real brand logo ---- */ .brand{display:inline-flex;align-items:center;flex:none} /* .hdr/.ftr prefix raises specificity above WooCommerce's `.woocommerce img{height:auto}` */ .hdr .brand-logo{height:46px;width:auto;max-width:none;display:block} .ftr .ftr-logo{height:64px;width:auto;max-width:none;margin-bottom:.4rem;display:block} @media (max-width:520px){ .hdr .brand-logo{height:40px} } /* ---- real brand-kit icons (extracted PNGs; cream ground blends with chips) ---- */ .bb-kit-ico{display:block;object-fit:contain;background:#FFF5EA} .bb-terp .bb-drop.bb-kit-ico{width:54px;height:54px;flex:none;border-radius:12px; box-shadow:0 2px 6px rgba(23,78,42,.12)} .bb-chip .bb-kit-ico{width:30px;height:30px;border-radius:8px;flex:none} .bb-chip{padding-left:.5rem} /* real kit icons in the attribute row + differentiators (cream ground = kit tile look) */ .bb-attr .bb-attr-ico{width:48px;height:48px;border-radius:10px;margin:0 auto .1rem} .bb-diff .bb-diff-ico{width:46px;height:46px;border-radius:11px;flex:none} /* ---- product top: cap gallery so it doesn't tower over the summary (dead space) ---- */ @media (min-width:820px){ .woocommerce div.product > .bb-gallery{max-width:460px;align-self:start} /* summary sits beside the gallery; strain sections follow immediately below */ .woocommerce div.product > .summary, .woocommerce div.product > .entry-summary{align-self:start} } .bb-strain{padding-block:clamp(1rem,2vw,1.6rem)} .bb-gallery-main img{max-height:460px;object-fit:cover} /* ---- header search + icon colours on the dark bar ---- */ .hdr .icon-btn svg{--ico-1:#fff;--ico-2:var(--cta)} .hdr-search{display:none;align-items:center;position:relative;margin-inline-start:auto} .hdr-search input{width:min(15rem,26vw);background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.28); color:#fff;border-radius:999px;padding:.5rem 2.4rem .5rem .9rem;font-size:.85rem;transition:background .2s,border-color .2s} .hdr-search input::placeholder{color:rgba(255,255,255,.7)} .hdr-search input:focus{outline:none;border-color:var(--cta);background:rgba(255,255,255,.18)} .hdr-search-btn{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);background:none;border:0; width:28px;height:28px;display:grid;place-items:center;cursor:pointer} .hdr-search-btn svg{width:17px;height:17px;--ico-1:#fff} .hdr-tools{display:flex;align-items:center;gap:.6rem;margin-inline-start:auto} @media (min-width:720px){ .hdr-search{display:flex} } /* ---- stock + sale badges ---- */ .bb-badge{display:inline-block;padding:.3rem .7rem;border-radius:999px;font-size:.72rem; font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1} .bb-badge-out{background:var(--muted);color:#fff} .bb-badge-back{background:var(--accent);color:#fff} .bb-badge-soon{background:var(--primary);color:#fff} .bb-badge-row{margin:.2rem 0 .6rem} ul.products li.product{position:relative} ul.products li.product .bb-badge{position:absolute;top:.6rem;left:.6rem;z-index:2} /* WooCommerce native sale flash -> on-brand */ .woocommerce span.onsale{background:var(--cta);color:#111;font-weight:900;text-transform:uppercase; font-size:.72rem;letter-spacing:.03em;border-radius:999px;padding:.3rem .7rem;min-height:0;min-width:0; line-height:1;top:.6rem;right:.6rem;left:auto;margin:0;position:absolute} .woocommerce div.product span.onsale{top:.8rem;left:.8rem;right:auto} /* sale price: struck regular + bold sale so the deal reads */ .woocommerce del{opacity:.6;font-weight:600;margin-right:.4rem} .woocommerce ins{text-decoration:none;font-weight:900;color:var(--accent)}