/* ============================================================
   Cylocybe — custom WooCommerce single-product design.
   Loaded only on spore product pages (see functions.php).
   Adapted from the approved bplus.html mockup, scoped under
   .cylo-product, plus skinning for WooCommerce's native
   variations form so add-to-cart / price stay fully wired.
   ============================================================ */
/* Design tokens now live once in style.css :root (site-wide). Not redefined here. */
.cylo-product{font-family:var(--san);color:var(--ink);line-height:1.6}
.cylo-product *,.cylo-product *::before,.cylo-product *::after{box-sizing:border-box}
.cylo-product img{display:block;max-width:100%;height:auto}
.cylo-product a{color:var(--pink);text-decoration:none}
.cylo-product h1,.cylo-product h2,.cylo-product h3{margin:0;color:var(--ink)}
.cylo-product .eye{font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--orange);font-weight:700;margin:0 0 1rem}
.cylo-product .eye--orange{color:var(--orange)} /* redundant now the base .eye is orange; kept as harmless alias */

.cylo-product .crumb{padding:1.6rem 0 .2rem;width:min(100% - 2 * var(--page-gutter),var(--page-max));margin-inline:auto;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cylo-product .crumb a{color:var(--mute)}.cylo-product .crumb a:hover{color:var(--soft)}.cylo-product .crumb span{color:var(--soft)}

/* product hero / buy block */
.cylo-product .shop{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5vw;padding:1vh 0 7vh;width:min(100% - 2 * var(--page-gutter),var(--page-max));margin-inline:auto;align-items:start}
@media(max-width:900px){.cylo-product .shop{grid-template-columns:1fr;gap:3vh}}
.cylo-product .gal__main{aspect-ratio:1;border-radius:4px;overflow:hidden;position:relative;border:1px solid var(--hair);background:radial-gradient(120% 120% at 30% 20%,#241526,#0a0a0a 70%)}
.cylo-product .gal__main img{width:100%;height:100%;object-fit:cover}
.cylo-product .gal__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cylo-product .gal__ph b{font-family:var(--anton);font-weight:400;font-size:clamp(3rem,7vw,5rem);color:rgba(255,154,82,.18);letter-spacing:-.02em}
.cylo-product .gal__badge{position:absolute;top:1rem;left:1rem;background:rgba(0,0,0,.65);border:1px solid var(--hair);backdrop-filter:blur(6px);padding:.35rem .7rem;border-radius:3px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);font-weight:700;z-index:2}
.cylo-product .gal__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:.7rem}
.cylo-product .gal__thumb{aspect-ratio:1;border-radius:3px;border:1px solid var(--hair);cursor:pointer;overflow:hidden;background:#0a0a0a;transition:border-color .25s,transform .25s}
.cylo-product .gal__thumb img{width:100%;height:100%;object-fit:cover}
.cylo-product .gal__thumb:hover{border-color:var(--orange-soft);transform:translateY(-2px)}
.cylo-product .gal__thumb.is-active{border-color:var(--orange)}

.cylo-product .buy{position:sticky;top:90px}
@media(max-width:900px){.cylo-product .buy{position:static}}
.cylo-product .buy__species{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--soft);margin:0 0 .2rem}
.cylo-product .buy__h1{font-family:var(--anton);font-weight:400;font-size:clamp(3rem,7vw,4.6rem);line-height:.9;letter-spacing:-.02em;margin:.1rem 0 .5rem}
.cylo-product .buy__sub{font-size:1.08rem;color:var(--soft);line-height:1.5;margin:0 0 1.1rem;max-width:34rem}
.cylo-product .buy__rate{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--mute);margin-bottom:1.4rem}
.cylo-product .buy__stars{color:var(--orange);letter-spacing:.1em}
.cylo-product .buy__micro{font-size:.78rem;color:var(--mute);font-style:italic;margin:1rem 0 1.3rem}
.cylo-product .trust{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;border-top:1px solid var(--hair);padding-top:1.2rem}
.cylo-product .trust div{font-size:.78rem;color:var(--soft)}.cylo-product .trust b{color:var(--ink)}

/* ---- skin WooCommerce native add-to-cart / variations form ---- */
.cylo-product .fmt__label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:700;margin:0 0 .7rem}
.cylo-product form.cart{margin:0 0 1rem}
.cylo-product .woocommerce-variation-price,.cylo-product .price{font-family:var(--anton)!important;font-weight:400;font-size:2.6rem;line-height:1;letter-spacing:-.02em;margin:.2rem 0 1rem;display:block}
.cylo-product .price .woocommerce-Price-amount,.cylo-product .price bdi,
.cylo-product .woocommerce-variation-price .woocommerce-Price-amount,.cylo-product .woocommerce-variation-price bdi{color:var(--orange)!important}
.cylo-product .price del{opacity:.45;font-size:1.3rem}
/* native variation select (kept as accessible fallback; pills overlay it) */
.cylo-product table.variations{border:0;margin:0 0 1.2rem;width:100%}
.cylo-product table.variations td,.cylo-product table.variations th{border:0;padding:0;display:block;background:none}
.cylo-product table.variations label{display:none}
/* Format selector — two layouts chosen by variant count (JS adds the modifier):
   .cylo-pills--cards = 2-3 formats (check cards) · .cylo-pills--list = 4+ (radio cards). */
.cylo-product .cylo-pills{margin-bottom:1rem}
.cylo-product .cylo-pills button{font:inherit;cursor:pointer;background:rgba(255,255,255,.02);border:1px solid var(--hair);border-radius:8px;text-align:left;transition:border-color .2s,background .2s}
.cylo-product .cylo-pills .n{font-weight:700;font-size:.92rem;color:var(--ink)}
.cylo-product .cylo-pills button[disabled]{cursor:not-allowed;opacity:.45} /* alerts off = genuinely unavailable, so dim it */
.cylo-product .cylo-pills--cards button[disabled]::after{display:none}      /* no selectable circle when there's nothing to do */
.cylo-product .cylo-pills .notify{display:none}
.cylo-product .cylo-pills button[disabled] .notify{color:var(--mute);border-color:var(--hair)} /* plain "Out of stock" when alerts are off */
/* buy-panel rating is a scroll link to the reviews section when reviews exist */
.cylo-product a.buy__rate:hover{color:var(--soft)}
.cylo-product #cylo-reviews{scroll-margin-top:100px}

/* CARDS (2-3 formats) — Option 6: tick-circle top-right */
.cylo-product .cylo-pills--cards{display:flex;flex-wrap:wrap;gap:10px}
.cylo-product .cylo-pills--cards button{position:relative;min-width:130px;padding:.9rem 2.4rem .9rem 1rem}
.cylo-product .cylo-pills--cards .n{display:block}
.cylo-product .cylo-pills--cards .pr{display:block;font-size:.8rem;color:var(--soft);margin-top:.25rem}
.cylo-product .cylo-pills--cards button::after{content:"";position:absolute;top:.75rem;right:.75rem;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--mute)}
.cylo-product .cylo-pills--cards button:hover{border-color:var(--orange-soft)}
.cylo-product .cylo-pills--cards button[aria-pressed="true"]{border-color:var(--orange)}
.cylo-product .cylo-pills--cards button[aria-pressed="true"] .n{color:var(--orange)}
.cylo-product .cylo-pills--cards button[aria-pressed="true"]::after{content:"\2713";background:var(--orange);border-color:var(--orange);color:#1a0d06;font-size:11px;font-weight:900;text-align:center;line-height:15px}
.cylo-product .cylo-pills--cards button.is-oos{border-color:rgba(255,255,255,.22)} /* clearly visible, not dimmed — must be easy to spot when every format is out of stock */
.cylo-product .cylo-pills--cards button.is-oos .n{color:var(--mute)}
.cylo-product .cylo-pills--cards button.is-oos[aria-pressed="true"]{border-color:var(--orange)}
.cylo-product .cylo-pills--cards button.is-oos[aria-pressed="true"] .n{color:var(--orange)}
.cylo-product .cylo-pills--cards button.is-oos .notify{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);font-weight:700;margin-top:.25rem}

/* LIST (4+ formats) — Option 11: radio cards, one per row */
.cylo-product .cylo-pills--list{display:flex;flex-direction:column;gap:8px} /* full buy-column width so the rows line up with the Add to Cart button */
.cylo-product .cylo-pills--list button{display:flex;align-items:center;gap:.9rem;width:100%;padding:.85rem 1rem;border-color:rgba(255,255,255,.16)} /* list rows get a slightly brighter border than the --hair default */
.cylo-product .cylo-pills--list .rd{width:18px;height:18px;border-radius:50%;border:2px solid var(--mute);flex:none;position:relative}
.cylo-product .cylo-pills--list .pr{margin-left:auto;font-size:.92rem;color:var(--soft)}
.cylo-product .cylo-pills--list button:hover{border-color:var(--orange-soft)}
.cylo-product .cylo-pills--list button[aria-pressed="true"]{border-color:var(--orange);background:rgba(255,154,82,.08)}
.cylo-product .cylo-pills--list button[aria-pressed="true"] .rd{border-color:var(--orange)}
.cylo-product .cylo-pills--list button[aria-pressed="true"] .rd::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--orange)}
.cylo-product .cylo-pills--list button[aria-pressed="true"] .n{color:var(--orange)}
.cylo-product .cylo-pills--list button.is-oos .n{color:var(--mute)} /* list OOS: muted name + NOTIFY pill distinguish it; border stays var(--hair) like in-stock. The lighter .22 border is ONLY for the 2-3 cards (where an all-OOS product could be missed). */
.cylo-product .cylo-pills--list button.is-oos[aria-pressed="true"]{border-color:var(--orange)}
.cylo-product .cylo-pills--list button.is-oos[aria-pressed="true"] .n{color:var(--orange)}
.cylo-product .cylo-pills--list button.is-oos .notify{display:inline-block;margin-left:auto;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);font-weight:700;border:1px solid var(--orange-soft);border-radius:999px;padding:.22rem .8rem}
.cylo-product select.cylo-fmt-select{width:100%;background:rgba(255,255,255,.04);color:var(--ink);border:1px solid var(--hair);border-radius:3px;padding:.8rem;font:inherit;margin-bottom:1rem}
.cylo-product .woocommerce-variation-add-to-cart{display:flex;gap:.8rem;align-items:stretch;flex-wrap:wrap}
.cylo-product .quantity{display:flex;align-items:center;border:1px solid var(--hair);border-radius:3px;overflow:hidden}
.cylo-product .quantity input{width:54px;text-align:center;background:none;border:0;color:var(--ink);font:inherit;font-weight:700;padding:.9rem 0}
.cylo-product .single_add_to_cart_button,.cylo-product .button.alt{flex:1;min-width:180px;background:var(--orange)!important;color:#1a0d06!important;border:0;border-radius:3px;font:inherit;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.86rem;padding:1.05rem 1rem;cursor:pointer;transition:transform .15s,box-shadow .2s}
.cylo-product .single_add_to_cart_button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,154,82,.25)}
.cylo-product .single_add_to_cart_button.disabled,.cylo-product .single_add_to_cart_button[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.cylo-product .woocommerce-variation.single_variation{margin-bottom:1rem}
.cylo-product .reset_variations{display:inline-block;margin:.3rem 0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.cylo-product .stock{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#5ad17e;margin:.2rem 0}
.cylo-product .stock.out-of-stock{color:var(--mute)}

/* content sections */
.cylo-product .sec{padding:7vh 0;border-top:1px solid var(--hair)}
.cylo-product .sec__inner{width:min(100% - 2 * var(--page-gutter),var(--page-max));margin-inline:auto}
.cylo-product .sec h2{font-family:var(--anton);font-weight:400;font-size:clamp(2rem,4.5vw,3.4rem);line-height:.98;letter-spacing:-.015em;margin:.6rem 0 1.4rem}
.cylo-product .sec h3{font-family:var(--anton);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;margin:0 0 .6rem}
.cylo-product .sec p:not(.eye){color:var(--soft);font-size:1.1rem;line-height:1.7;max-width:46rem;margin:0 0 1.1rem}
.cylo-product .sec p strong{color:var(--ink);font-weight:600}
.cylo-product .lead{font-size:1.3rem!important;color:var(--ink)!important;line-height:1.55!important;max-width:50rem}
.cylo-product .tldr{background:linear-gradient(180deg,rgba(255,154,82,.06),transparent);border-left:3px solid var(--orange)}

.cylo-product .fvl{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1rem}
@media(max-width:760px){.cylo-product .fvl{grid-template-columns:1fr}}
.cylo-product .fvl__col{background:var(--panel);border:1px solid var(--hair);border-radius:4px;padding:1.6rem 1.5rem}
.cylo-product .fvl__col--fact{border-color:rgba(90,209,126,.3)}.cylo-product .fvl__col--lore{border-color:rgba(255,45,138,.25)}
.cylo-product .fvl__h{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin:0 0 1rem}
.cylo-product .fvl__col--fact .fvl__h{color:#5ad17e}.cylo-product .fvl__col--lore .fvl__h{color:var(--pink)}
.cylo-product .fvl__col ul{list-style:none;margin:0;padding:0}
.cylo-product .fvl__col li{font-size:.98rem;color:var(--soft);line-height:1.5;padding:.55rem 0 .55rem 1.5rem;position:relative;border-bottom:1px solid rgba(255,255,255,.05)}
.cylo-product .fvl__col li:last-child{border-bottom:0}
.cylo-product .fvl__col--fact li::before{content:"\2713";position:absolute;left:0;color:#5ad17e}
.cylo-product .fvl__col--lore li::before{content:"\201C";position:absolute;left:0;color:var(--pink);font-family:var(--display);font-size:1.3rem;line-height:1}

.cylo-product .pq{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.35;color:var(--ink);border-left:3px solid var(--pink);padding:.4rem 0 .4rem 1.6rem;margin:2.2rem 0;max-width:44rem}

.cylo-product .spec{display:grid;grid-template-columns:1fr 1fr;gap:0 3vw;max-width:60rem;margin-top:1rem}
@media(max-width:680px){.cylo-product .spec{grid-template-columns:1fr}}
.cylo-product .spec__row{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--hair);align-items:center}
.cylo-product .spec__row dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:700}
.cylo-product .spec__row dd{margin:0;color:var(--soft);font-size:.98rem}.cylo-product .spec__row dd em{font-style:italic;color:var(--ink)}
/* _cylo_body spec/handling TABLES (supply + kit bodies use <table class="spec">).
   Match the .spec__row design language: orange uppercase labels, soft values,
   hairline rows on the dark ground — no bare browser table. */
.cylo-product table.spec{display:table;width:100%;max-width:60rem;border-collapse:collapse;margin-top:1.3rem}
.cylo-product table.spec th{text-align:left;vertical-align:top;width:11rem;padding:.8rem 1.3rem .8rem 0;border-bottom:1px solid var(--hair);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:700;line-height:1.45}
.cylo-product table.spec td{vertical-align:top;padding:.8rem 0;border-bottom:1px solid var(--hair);color:var(--soft);font-size:.98rem;line-height:1.6}
.cylo-product table.spec tr:last-child th,.cylo-product table.spec tr:last-child td{border-bottom:0}
@media(max-width:560px){.cylo-product table.spec th{width:8rem;white-space:normal}}
/* Sources list (_cylo_sources) — reputable references, orange links */
.cylo-product .cylo-sources{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.55rem}
.cylo-product .cylo-sources li{font-size:.9rem;line-height:1.5;color:var(--mute)}
.cylo-product .cylo-sources a{color:var(--orange);text-decoration:none;border-bottom:1px solid var(--orange-soft);word-break:break-word}
.cylo-product .cylo-sources a:hover{color:var(--ink)}
/* a short single-line value (e.g. GENUS) sharing a grid row with a
   two-line value (e.g. FAMILY) gets vertically centred in the taller row
   rather than clinging to the top - hence align-items:center on the row
   above, and we deliberately let the grid keep its default stretch so the
   row actually has the height to centre within. */

.cylo-product .marks{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.5rem}
@media(max-width:820px){.cylo-product .marks{grid-template-columns:repeat(2,1fr)}}
.cylo-product .mark{background:var(--panel);border:1px solid var(--hair);border-radius:4px;padding:1.3rem}
.cylo-product .mark__t{font-family:var(--display);font-style:italic;font-weight:700;font-size:1.15rem;color:var(--ink);margin:0 0 .4rem}
.cylo-product .mark p{font-size:.92rem;margin:0;line-height:1.5}

.cylo-product .scope{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center;margin-top:1.5rem}
@media(max-width:820px){.cylo-product .scope{grid-template-columns:1fr}}
.cylo-product .scope__art{aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;border:1px solid var(--hair);background:radial-gradient(closest-side,#1a1030 0%,#0a0a0a 78%,#000 100%);max-width:380px;margin:0 auto;width:100%}
.cylo-product .spore{position:absolute;width:30%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,180,120,.5),rgba(150,90,50,.35));border:1px solid rgba(255,200,150,.35);box-shadow:0 0 24px rgba(255,154,82,.12)}
.cylo-product .spore::after{content:"";position:absolute;width:16%;height:24%;border-radius:50%;background:rgba(255,220,180,.55);top:50%;right:-3%;transform:translateY(-50%)}
.cylo-product .spore.s1{top:30%;left:22%;transform:rotate(18deg)}
.cylo-product .spore.s2{top:54%;left:46%;transform:rotate(-22deg);width:26%;height:17%}
.cylo-product .spore.s3{top:20%;left:55%;transform:rotate(40deg);width:24%;height:16%;opacity:.85}
.cylo-product .scope__cap{position:absolute;bottom:8%;left:0;right:0;text-align:center;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.cylo-product .scope__pts{list-style:none;margin:0;padding:0}
.cylo-product .scope__pts li{padding:.7rem 0 .7rem 1.6rem;position:relative;border-bottom:1px solid var(--hair);color:var(--soft);font-size:1rem;line-height:1.5}
.cylo-product .scope__pts li::before{content:"";position:absolute;left:0;top:1.05rem;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.cylo-product .scope__pts b{color:var(--ink)}

.cylo-product .formats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.5rem}
@media(max-width:820px){.cylo-product .formats{grid-template-columns:1fr}}
.cylo-product .fcard{background:var(--panel);border:1px solid var(--hair);border-radius:4px;padding:1.7rem 1.5rem;display:flex;flex-direction:column}
.cylo-product .fcard h3{font-size:1.3rem;margin-bottom:.3rem}
.cylo-product .fcard .keeps{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);font-weight:700;margin:0 0 .9rem}
.cylo-product .fcard p{font-size:.95rem;margin:0;flex:1}

.cylo-product .faq{max-width:54rem}
.cylo-product .faq__item{border-bottom:1px solid var(--hair)}
.cylo-product .faq__q{width:100%;background:none;border:0;color:var(--ink);font:inherit;font-weight:600;font-size:1.08rem;text-align:left;padding:1.3rem 0;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.cylo-product .faq__q::after{content:"+";color:var(--orange);font-size:1.5rem;transition:transform .3s}
.cylo-product .faq__item.open .faq__q::after{transform:rotate(45deg)}
.cylo-product .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.cylo-product .faq__item.open .faq__a{grid-template-rows:1fr}
.cylo-product .faq__a>div{overflow:hidden}
.cylo-product .faq__a p{font-size:1rem;padding-bottom:1.3rem;margin:0;color:var(--soft);max-width:50rem}

.cylo-product .reading{list-style:none;padding:0;max-width:48rem;margin:1rem 0 0}
.cylo-product .reading li{padding:.7rem 0;border-bottom:1px solid var(--hair);color:var(--soft);font-size:1rem;line-height:1.5}
.cylo-product .reading li:last-child{border-bottom:0}
.cylo-product .reading a{color:var(--orange);border-bottom:1px solid var(--orange-soft)}

.cylo-product .rel{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.5rem}
@media(max-width:820px){.cylo-product .rel{grid-template-columns:repeat(2,1fr)}}
.cylo-product .relcard{background:var(--panel);border:1px solid var(--hair);border-radius:4px;padding:1.3rem;transition:transform .3s,border-color .3s;display:block}
.cylo-product .relcard:hover{transform:translateY(-5px);border-color:var(--orange-soft)}
.cylo-product .relcard .tag{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:700}
.cylo-product .relcard .nm{display:block;font-family:var(--display);font-style:italic;font-weight:700;font-size:1.2rem;color:var(--ink);margin:.4rem 0 .5rem}
.cylo-product .relcard .pr{display:block;font-family:var(--anton);font-weight:400;color:var(--orange);font-size:1.05rem}

/* Full-width fine-print band, centred text. MUST use `.sec p.legal` and an
   explicit `max-width:none`: the generic `.cylo-product .sec p{max-width:46rem}`
   readability cap (specificity 0,2,1) otherwise out-ranks a plain `.legal`
   (0,2,0) and silently pins the band to 46rem/736px, leaving the rules
   stopping two-thirds across - which is exactly what read as broken. */
.cylo-product .sec p.legal{max-width:none;text-align:center;margin:2vh 0 0;padding:.5rem 0;font-size:1rem}
.cylo-product .legal b{color:var(--orange);font-size:.86rem}.cylo-product .legal span{display:block;color:rgba(255,255,255,.45);font-size:.8rem;font-style:italic;margin-top:.4rem}

/* ============================================================
   the previous theme chrome overrides (this stylesheet only loads on spore
   product pages, so unscoped selectors here are safe). We render our
   own breadcrumb + price inside .cylo-product, so suppress the previous theme's
   duplicates and reskin WooCommerce's notices to the dark theme.
   ============================================================ */
/* the previous theme's grey breadcrumb/title bar - redundant with .cylo-product .crumb */
.product-page-title{display:none!important}

/* WooCommerce notices ("... has been added to your cart", errors, info).
   the previous theme styles these blue, which clashes hard with the black theme. */
.woocommerce-notices-wrapper{max-width:1280px;margin:1.2rem auto 0;padding:0 5vw;box-sizing:border-box}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:rgba(18,12,26,.92)!important;color:var(--soft)!important;
  border:1px solid rgba(255,154,82,.35)!important;border-left:3px solid var(--orange)!important;
  border-radius:5px!important;box-shadow:none!important;
  font-family:var(--san)!important;font-size:.95rem!important;line-height:1.5!important;
  padding:.95rem 1.2rem!important;list-style:none!important}
.woocommerce-error{border-left-color:var(--pink)!important;border-color:rgba(255,45,138,.35)!important}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{color:var(--orange)!important}
.woocommerce-message a:not(.button),.woocommerce-info a:not(.button){color:var(--ink)!important;text-decoration:underline}
.woocommerce-message .button,.woocommerce-info .button{
  background:var(--orange)!important;color:#1a0d06!important;border:0!important;
  border-radius:4px!important;font-weight:700!important;box-shadow:none!important;text-shadow:none!important}

/* our headline #cylo-price shows the range on load and the selected price
   once a format is picked (synced by JS), so hide WooCommerce's own
   in-form variation price to avoid showing the figure twice */
.cylo-product .woocommerce-variation-price{display:none}

/* ============================================================
   RARE & EXOTIC species sections, in the SAME cubensis look
   (orange accent, left-aligned editorial column). Used by the
   per-species _cylo_body blob for non-cubensis products
   (Psilocybe tampanensis, mexicana, Panaeolus, etc.).
   ============================================================ */
/* Philosopher's Stone / sclerotia feature */
.cylo-product .stone__top{display:grid;grid-template-columns:.8fr 1.2fr;gap:3vw;align-items:center;margin:1.2rem 0 1.8rem}
@media(max-width:820px){.cylo-product .stone__top{grid-template-columns:1fr;gap:2.5vh}}
.cylo-product .stone__art{aspect-ratio:1;border-radius:6px;border:1px solid var(--hair);position:relative;overflow:hidden;background:radial-gradient(120% 120% at 35% 25%,#241526,#0a0a0a 75%)}
.cylo-product .sclerotium{position:absolute;top:50%;left:50%;width:58%;height:46%;transform:translate(-50%,-50%) rotate(-12deg);border-radius:54% 46% 58% 42% / 60% 56% 44% 40%;background:radial-gradient(60% 60% at 42% 38%,#d8c6a4 0%,#a8895f 36%,#5a4026 66%,#2a1c10 90%);box-shadow:inset 0 0 0 5px rgba(20,12,6,.85),inset -8px -10px 26px rgba(0,0,0,.6),0 18px 50px rgba(0,0,0,.55)}
.cylo-product .stone__artcap{position:absolute;bottom:.9rem;width:100%;text-align:center;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.cylo-product .stone__lead p{margin:0;color:var(--soft);font-size:1.05rem;line-height:1.7}
.cylo-product .stone__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:.4rem}
@media(max-width:760px){.cylo-product .stone__cards{grid-template-columns:1fr}}
.cylo-product .stone__card{background:var(--panel);border:1px solid var(--hair);border-left:3px solid var(--orange);border-radius:4px;padding:1.3rem}
.cylo-product .stone__card h3{font-size:1rem;color:var(--ink);margin:0 0 .5rem}
.cylo-product .stone__card p{margin:0;color:var(--soft);font-size:.93rem;line-height:1.6}
.cylo-product .stonenote{background:rgba(255,154,82,.08);border:1px solid var(--orange-soft);border-radius:4px;padding:1.2rem 1.4rem;margin:1.6rem 0 0}
.cylo-product .stonenote b{color:var(--orange)}
.cylo-product .stonenote p{margin:.5rem 0 0;color:var(--soft);font-size:.93rem;line-height:1.6}
/* "How it survives" list */
.cylo-product .survive__item{padding:1.3rem 0;border-bottom:1px solid var(--hair)}
.cylo-product .survive__item:last-child{border-bottom:0}
.cylo-product .survive__item h3{font-family:var(--anton);font-weight:400;font-size:1.25rem;letter-spacing:-.005em;color:var(--ink);margin:0 0 .55rem}
.cylo-product .survive__item p{margin:0;color:var(--soft);font-size:1.02rem;line-height:1.7}
.cylo-product .survive__src{font-size:.82rem;color:var(--mute);font-style:italic;margin:1.4rem 0 0}
/* inline glossary tooltips (orange accent, to match cubensis) */
.cylo-product .term{border-bottom:1px dotted var(--orange);cursor:help;position:relative;font-style:normal}
.cylo-product .term:focus{outline:none}
.cylo-product .term__tip{visibility:hidden;opacity:0;position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);width:max-content;max-width:240px;white-space:normal;text-align:left;background:#150d20;border:1px solid var(--orange-soft);border-radius:6px;padding:.55rem .7rem;font:400 .8rem/1.45 var(--san);letter-spacing:normal;text-transform:none;font-style:normal;color:var(--soft);box-shadow:0 12px 32px rgba(0,0,0,.55);z-index:40;transition:opacity .15s;pointer-events:none}
.cylo-product .term:hover .term__tip,.cylo-product .term:focus .term__tip{visibility:visible;opacity:1}
.cylo-product .term__tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--orange-soft)}

/* black-spore microscope variant for Panaeolus (jet-black, not the amber of Psilocybe) */
.cylo-product .scope--dark .spore{background:radial-gradient(60% 60% at 42% 38%,#6b6675,#2c2932 52%,#0a090e 90%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.6)}
.cylo-product .scope--dark .spore::after{background:rgba(190,185,200,.75)}

/* ---- Stock alert panel (out-of-stock products / formats) ---- */
.cylo-stockalert{margin:18px 0 6px;padding:18px 20px;border:1px solid var(--hair);background:var(--panel);border-radius:4px}
.cylo-stockalert__eye{margin:0 0 4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.cylo-stockalert__h{margin:0 0 12px;font-size:16px;color:var(--ink);font-weight:700}
.cylo-stockalert__form{display:flex;flex-direction:column;gap:10px}
.cylo-stockalert__pick,.cylo-stockalert input[type=email],.cylo-stockalert input[type=text]:not(.cylo-stockalert__hp){width:100%;padding:11px 12px;background:rgba(255,255,255,.05);border:1px solid var(--hair);color:var(--ink);border-radius:3px;font-size:14px}
.cylo-stockalert__hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}
.cylo-stockalert__chan{display:flex;gap:16px;font-size:13px;color:var(--soft)}
.cylo-stockalert__chan label{display:inline-flex;align-items:center;gap:6px}
.cylo-stockalert__who{margin:0;font-size:13px;color:var(--soft)}
.cylo-stockalert__hint{margin:7px 0 0;font-size:12px;line-height:1.5;color:var(--mute)}
.cylo-stockalert__hint a{color:var(--soft);text-decoration:underline;text-underline-offset:2px}
.cylo-stockalert__hint a:hover{color:#fff}
.cylo-stockalert__btn{background:var(--orange);color:#1a0d06;border:0;border-radius:3px;padding:13px 22px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:opacity .15s,filter .15s}
.cylo-stockalert__btn:hover{filter:brightness(1.07)}
.cylo-stockalert__btn:disabled,.cylo-stockalert__btn.is-locked{opacity:.4;filter:grayscale(.4);cursor:not-allowed}
.cylo-stockalert__btn:disabled:hover,.cylo-stockalert__btn.is-locked:hover{filter:grayscale(.4)}
.cylo-stockalert__locked{margin:9px 0 0;font-size:12px;color:var(--mute)}
.cylo-stockalert__connect{margin:4px 0 10px}
.cylo-stockalert__note{margin:10px 0 0;font-size:12px;color:var(--mute)}
.cylo-stockalert__notices{margin:14px 0 0}
.cylo-stockalert__notices .woocommerce-message,.cylo-stockalert__notices .woocommerce-error li{background:var(--panel);border:1px solid var(--hair);color:var(--soft);padding:12px 14px;font-size:13px;border-radius:3px;list-style:none;margin:0 0 8px}
.cylo-stockalert.is-armed{border-color:var(--orange)}
/* Out-of-stock pills stay tappable as alert pickers. */
/* (old single-layout out-of-stock pill styles removed — now handled per layout in the
   .cylo-pills--cards / .cylo-pills--list blocks above.) */

/* WooCommerce notice icons render as broken glyphs on the dark templates - remove them and
   restyle the success state to the alert-panel language. */
.cylo-stockalert__notices .woocommerce-message::before,
.cylo-stockalert__notices .woocommerce-error::before,
.cylo-stockalert__notices .woocommerce-info::before,
.cylo-stockalert__notices li::before{display:none!important;content:none!important}
.cylo-stockalert__notices .woocommerce-message,.cylo-stockalert__notices .woocommerce-info{padding-left:14px!important}
.cylo-stockalert__notices .woocommerce-message .button,.cylo-stockalert__notices .woocommerce-info .button{float:right;margin-left:12px;background:var(--orange);color:#1a0d06;border:0;border-radius:3px;padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.cylo-stockalert__set{margin:18px 0 6px;padding:14px 20px;border:1px solid var(--hair);background:var(--panel);border-radius:4px;font-size:13px;color:var(--soft)}
.cylo-stockalert__set a{color:var(--orange);text-decoration:none}

/* The OOS picker is a native <select name="optin_product"> with NO class of its own
   (the old .cylo-stockalert__pick rule below matched nothing — that's why the popup
   showed white). Target the select inside the widget: dark popup + light text. */
.cylo-stockalert select{color-scheme:dark}
.cylo-stockalert select option{background:#1a1322;color:#fff}
.cylo-stockalert select option:checked{background:#2a2036;color:#fff}

/* Channel choice as cards (logos, not radio dots). */
.cylo-stockalert__chan{display:flex;gap:10px}
.cylo-chan-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px 12px;border:1px solid var(--hair);border-radius:6px;background:rgba(255,255,255,.03);cursor:pointer;text-align:center;transition:border-color .15s ease,background .15s ease}
.cylo-chan-card input{position:absolute;opacity:0;pointer-events:none}
.cylo-chan-card svg{width:26px;height:26px}
.cylo-chan-card__t{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.04em}
.cylo-chan-card__s{font-size:11px;color:var(--mute)}
.cylo-chan-card:hover{border-color:rgba(255,255,255,.25)}
.cylo-chan-card.is-on{border-color:var(--orange);background:rgba(255,154,82,.07)}

/* OOS mode: an out-of-stock format is selected, so buying controls step aside for the alert. */
.cylo-product form.cart.cylo-oos-mode .quantity,
.cylo-product form.cart.cylo-oos-mode .single_add_to_cart_button,
.cylo-product form.cart.cylo-oos-mode .woocommerce-variation-add-to-cart{display:none!important}

/* Quantity: a proper - / + stepper instead of the native micro-spinners. */
.cylo-product form.cart .quantity{display:inline-flex;align-items:stretch;border:1px solid var(--hair);border-radius:3px;overflow:hidden;background:rgba(255,255,255,.03)}
.cylo-product form.cart .quantity .qty{-moz-appearance:textfield;appearance:textfield;border:0;background:transparent;color:var(--ink);width:46px;min-height:46px;text-align:center;font-size:15px;font-weight:700}
.cylo-product form.cart .quantity .qty::-webkit-outer-spin-button,
.cylo-product form.cart .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cylo-qty__btn{width:38px;border:0;background:rgba(255,255,255,.06);color:var(--ink);font-size:19px;line-height:1;cursor:pointer;transition:background .12s ease}
.cylo-qty__btn:hover{background:rgba(255,154,82,.25)}
.cylo-qty__btn:active{background:rgba(255,154,82,.4)}

/* ============================================================
   Q&A section (CyCommerce cyc-qna), skinned to the product
   page language: hairline-divided section, Anton heading,
   orange accents, panel-dark forms.
   ============================================================ */
.cylo-product .cyc-qna{padding:7vh 5vw;border-top:1px solid var(--hair);--cyc-qna-accent:var(--orange);--cyc-qna-hair:var(--hair);--cyc-qna-soft:var(--panel)}
.cylo-product .cyc-qna__inner{max-width:1180px;margin:0 auto;padding:0}
.cylo-product .cyc-qna__eye{font-size:1.1rem;letter-spacing:.32em;text-transform:uppercase;color:var(--soft);font-weight:700;opacity:1;margin:0 0 1rem}
.cylo-product .cyc-qna__title{font-family:var(--anton);font-weight:400;font-size:clamp(2rem,4.5vw,3.4rem);line-height:.98;letter-spacing:-.015em;margin:.6rem 0 1.4rem}
.cylo-product .cyc-qna__askbtn{border-color:var(--orange);color:var(--orange)}
.cylo-product .cyc-qna__askbtn:hover{background:rgba(255,154,82,.1)}
.cylo-product .cyc-qna__send{background:var(--orange);color:#000}
.cylo-product .cyc-qna__form--answer .cyc-qna__send{background:#3a76f0;color:#000}
.cylo-product .cyc-qna__anon{color:var(--mute);opacity:1}
.cylo-product .cyc-qna__anon input{accent-color:var(--orange)}
.cylo-product .cyc-qna__signalhelp a{color:var(--orange);text-underline-offset:2px}
.cylo-product .cyc-qna__namelabel{color:var(--mute)}
.cylo-product .cyc-qna__namepill{border-color:var(--hair);color:var(--soft)}
.cylo-product .cyc-qna__namepill:hover{border-color:rgba(255,255,255,.25)}
.cylo-product .cyc-qna__namepill.is-on{border-color:var(--orange);background:rgba(255,154,82,.08);color:var(--ink)}
.cylo-product .cyc-qna__notice{color:var(--orange);border-color:var(--orange-soft)}
.cylo-product .cyc-qna__notice.is-error{color:#ff6b61;border-color:rgba(255,107,97,.5)}
.cylo-product .cyc-qna__form{background:var(--panel);border-color:var(--hair)}
.cylo-product .cyc-qna__form textarea,
.cylo-product .cyc-qna__form input[type="text"],
.cylo-product .cyc-qna__form input[type="email"]{background:rgba(255,255,255,.05);border-color:var(--hair);color:var(--ink);color-scheme:dark}
.cylo-product .cyc-qna__form textarea:focus,
.cylo-product .cyc-qna__form input:focus{border-color:var(--orange)}
/* Answer form: blue accents throughout (orange for questions, blue for answers). */
.cylo-product .cyc-qna__form--answer textarea:focus,
.cylo-product .cyc-qna__form--answer input:focus{border-color:#3a76f0}
.cylo-product .cyc-qna__form--answer .cyc-qna__namepill.is-on{border-color:#3a76f0;background:rgba(58,118,240,.1)}
.cylo-product .cyc-qna-chan{border-color:var(--hair);background:rgba(255,255,255,.03)}
.cylo-product .cyc-qna-chan:hover{border-color:rgba(255,255,255,.25)}
.cylo-product .cyc-qna-chan.is-on{border-color:var(--orange);background:rgba(255,154,82,.07)}
.cylo-product .cyc-qna-chan__t{color:var(--ink)}
.cylo-product .cyc-qna-chan__s{color:var(--mute);opacity:1}
.cylo-product .cyc-qna-chan svg{stroke:var(--orange)}
.cylo-product .cyc-qna-chan svg [fill="#3A76F0"]{stroke:none}
.cylo-product .cyc-qna__search input{background:rgba(255,255,255,.05);border-color:var(--hair);color:var(--ink)}
.cylo-product .cyc-qna__search input:focus{border-color:var(--orange)}
/* Q&A entries: editorial redesign — no circle markers, eyebrow labels, the
   store reply nested in a warm panel with an orange rule. */
.cylo-product .cyc-qna-item{border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.025);padding:1.7rem 1.9rem;margin:0 0 2rem}
.cylo-product .cyc-qna-item:last-child{margin-bottom:0;border-bottom:1px solid rgba(255,255,255,.2)}
.cylo-product .cyc-qna-item__mark{display:none}

/* question */
.cylo-product .cyc-qna-item__q{display:block}
.cylo-product .cyc-qna-item__qbody::before{
  content:"Question";display:block;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--orange);font-weight:700;margin:0 0 .65rem}
.cylo-product .cyc-qna-item__q .cyc-qna-item__text{
  color:var(--ink);font-weight:400;
  font-size:1.08rem;line-height:1.5;letter-spacing:-.01em;
  margin:0 0 .8rem}

/* meta + inline actions */
.cylo-product .cyc-qna-item__meta{color:var(--mute);opacity:1;font-size:.8rem;letter-spacing:.01em}
.cylo-product .cyc-qna-item__meta span{color:rgba(125,114,144,.45)}
.cylo-product .cyc-qna-item__vote{color:var(--soft);text-decoration:none;font-weight:600}
.cylo-product .cyc-qna-item__vote:hover{color:var(--orange)}
.cylo-product .cyc-qna-item__vote [data-qna-votes]{color:inherit;opacity:1}
.cylo-product .cyc-qna-item__answerbtn{
  display:inline-block;vertical-align:middle;
  padding:.4rem 1.1rem;border:1px solid #3a76f0;border-radius:999px;
  background:none;color:#3a76f0;font-weight:700;
  text-decoration:none;font-size:.82rem;line-height:1.3}
.cylo-product .cyc-qna-item__answerbtn:hover{background:rgba(58,118,240,.12);color:#3a76f0}
.cylo-product .cyc-qna-item__vote.is-done{color:var(--orange);font-weight:700}

/* answer — nested warm panel */
.cylo-product .cyc-qna-item__a{
  display:block;margin:1.4rem 0 0;padding:1.3rem 1.5rem;
  background:rgba(58,118,240,.07);
  border:1px solid var(--hair);border-left:2px solid #3a76f0;border-radius:5px}
.cylo-product .cyc-qna-item__abody::before{
  content:"Community answer";display:block;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:#3a76f0;font-weight:700;margin:0 0 .6rem}
.cylo-product .cyc-qna-item__a.is-team{background:rgba(255,45,138,.06);border-left-color:var(--pink)}
.cylo-product .cyc-qna-item__a.is-team .cyc-qna-item__abody::before{content:"Our answer";color:var(--pink)}
.cylo-product .cyc-qna-item__a .cyc-qna-item__text{color:var(--soft);font-size:1.02rem;line-height:1.62;margin:0 0 .55rem}
.cylo-product .cyc-qna-item__a .cyc-qna-item__meta{color:var(--mute);font-size:.76rem}
.cylo-product .cyc-qna-item__badge{display:none}

/* pending + reply form (no longer indented past a circle) */
.cylo-product .cyc-qna-item__pendinganswer{
  margin:1.1rem 0 0;color:var(--mute);font-style:normal;opacity:.8;
  font-size:.82rem;letter-spacing:.02em}
.cylo-product .cyc-qna__form--answer{margin:1.2rem 0 0}
.cylo-product .cyc-qna__more{border-color:var(--hair);color:var(--ink)}
.cylo-product .cyc-qna__more:hover{border-color:var(--orange);color:var(--orange)}

/* ============================================================
   GROW-KIT + SUPPLY additions (merged in from the former
   cylocybe-product-kit.css, 2026-06-17 — one stylesheet now).
   All .cylo-kit-scoped, so spore pages ignore them.
   ============================================================ */
/* numbered "how a kit grow works" step flow */
.cylo-kit .kit-steps{margin-top:1.6rem;counter-reset:kstep}
.cylo-kit .kit-step{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding:1.5rem 0;border-bottom:1px solid var(--hair);align-items:start}
.cylo-kit .kit-step:last-child{border-bottom:0}
.cylo-kit .kit-step__n{font-family:var(--anton);font-weight:400;font-size:2.6rem;line-height:.8;color:var(--orange);min-width:2.2rem}
.cylo-kit .kit-step h3{font-family:var(--anton);font-weight:400;font-size:1.4rem;letter-spacing:-.01em;color:var(--ink);margin:.2rem 0 .5rem}
.cylo-kit .kit-step p{font-size:1.02rem;line-height:1.65;margin:0;color:var(--soft)}
.cylo-kit .kit-step p strong{color:var(--ink);font-weight:600}
.cylo-kit .kit-step .meta{display:inline-block;margin-top:.5rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--mute)}

/* The buy panel builds its own .cylo-pills from the variation <select> (same as the
   spore pages). the previous theme also renders attribute "swatches" for this attribute, which
   double up with our pills and leak a ": XXL" label that changes on hover. Hide the
   the previous theme swatch widget so only our pills show; the hidden <select> still drives the
   WooCommerce form. */
.cylo-kit .ux-swatches,
.cylo-kit .ux-swatch,
.cylo-kit .ux-swatch-selected-value{display:none!important}

/* neutral two-up "what's in the box" (reuses panel look, no fact/legend colour) */
.cylo-kit .kitbox{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.4rem}
@media(max-width:760px){.cylo-kit .kitbox{grid-template-columns:1fr}}
.cylo-kit .kitbox__col{background:var(--panel);border:1px solid var(--hair);border-radius:4px;padding:1.6rem 1.5rem}
.cylo-kit .kitbox__h{font-family:var(--display);font-style:italic;font-weight:700;font-size:1.3rem;color:var(--ink);margin:0 0 .2rem}
.cylo-kit .kitbox__need{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--orange);margin:0 0 1rem}
.cylo-kit .kitbox__col ul{list-style:none;margin:0;padding:0}
.cylo-kit .kitbox__col li{font-size:.96rem;color:var(--soft);line-height:1.5;padding:.5rem 0 .5rem 1.4rem;position:relative;border-bottom:1px solid rgba(255,255,255,.05)}
.cylo-kit .kitbox__col li:last-child{border-bottom:0}
.cylo-kit .kitbox__col li::before{content:"";position:absolute;left:0;top:1.05rem;width:7px;height:7px;border-radius:50%;background:var(--orange)}

/* at-a-glance stats strip, directly under the hero */
.cylo-kit .kit-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 2.5rem;padding:3.2vh 0;border-bottom:1px solid var(--hair);width:min(100% - 2 * var(--page-gutter),var(--page-max));margin-inline:auto}
@media(max-width:760px){.cylo-kit .kit-stats{grid-template-columns:repeat(2,1fr)}}
.cylo-kit .kit-stat{display:flex;flex-direction:column;gap:.4rem;border-left:2px solid var(--orange);padding-left:1rem}
.cylo-kit .kit-stat__k{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:700}
.cylo-kit .kit-stat__v{font-size:1rem;color:var(--ink);line-height:1.35;font-weight:600}

/* sterile vs pre-colonised comparison (CSS grid rows, not a <table>) */
.cylo-kit .kit-compare{margin-top:1.6rem;border:1px solid var(--hair);border-radius:5px;overflow:hidden}
.cylo-kit .kit-compare__row{display:grid;grid-template-columns:1fr 1.35fr 1.35fr;gap:1px;background:var(--hair)}
.cylo-kit .kit-compare__row>span{background:#0b0712;padding:1rem 1.15rem;font-size:.96rem;color:var(--soft);line-height:1.45}
.cylo-kit .kit-compare__row>span:nth-child(2){background:rgba(255,154,82,.05);color:var(--ink)}
.cylo-kit .kit-compare__head>span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.cylo-kit .kit-compare__k{color:var(--ink)!important;font-weight:600}
@media(max-width:680px){
  .cylo-kit .kit-compare__row{grid-template-columns:1fr 1fr}
  .cylo-kit .kit-compare__k{grid-column:1/-1;background:rgba(255,255,255,.04)!important}
}

/* reviews (real WooCommerce data only) */
.cylo-product .kit-reviews__head{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;font-size:1rem;color:var(--soft);margin:.6rem 0 1.6rem}
.cylo-product .kit-reviews__head .buy__stars{color:var(--orange);letter-spacing:.1em}
.cylo-product .kit-reviews__head b{color:var(--ink);font-size:1.25rem}
.cylo-product .kit-reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media(max-width:760px){.cylo-product .kit-reviews{grid-template-columns:1fr}}
.cylo-product .kit-review{background:var(--panel);border:1px solid var(--hair);border-radius:4px;padding:1.4rem 1.5rem}
.cylo-product .kit-review .buy__stars{color:var(--orange);font-size:.85rem;letter-spacing:.1em}
.cylo-product .kit-review__b{font-size:.98rem;color:var(--soft);line-height:1.55;margin:.6rem 0 .8rem}
.cylo-product .kit-review__m{font-size:.8rem;color:var(--mute);margin:0}

/* Legacy WooCommerce description fallback on supply pages (shown until a proper
   _cylo_body is authored for the product). Keep it readable + roomy in the dark theme. */
.cylo-product .cylo-legacy-desc{max-width:46rem}
.cylo-product .cylo-legacy-desc p{color:var(--soft);font-size:1.12rem;line-height:1.75;margin:0 0 1.2rem}
.cylo-product .cylo-legacy-desc h2,.cylo-product .cylo-legacy-desc h3,.cylo-product .cylo-legacy-desc h4{font-family:var(--anton);font-weight:400;color:var(--ink);letter-spacing:-.01em;margin:2rem 0 .8rem}
.cylo-product .cylo-legacy-desc ul,.cylo-product .cylo-legacy-desc ol{margin:0 0 1.4rem;padding-left:1.3rem}
.cylo-product .cylo-legacy-desc li{color:var(--soft);font-size:1.06rem;line-height:1.6;margin:.4rem 0}
.cylo-product .cylo-legacy-desc strong{color:var(--ink)}
.cylo-product .cylo-legacy-desc a{color:var(--orange)}
.cylo-product .cylo-legacy-desc img{border-radius:6px;margin:1rem 0}

/* ============================================================
   CyCommerce Q&A product section (.cyc-qna) — skinned from the
   theme to match the .sec/.eye design system + the site container.
   The plugin renders it with a grey 1.1rem eyebrow and its own
   gutter; these overrides (scoped .cylo-product, 0,2,0) bring it
   into line with every other section. Plugin stays generic.
   ============================================================ */
.cylo-product .cyc-qna{padding-left:0;padding-right:0}
.cylo-product .cyc-qna__inner{width:min(100% - 2 * var(--page-gutter),var(--page-max));max-width:none;margin-inline:auto}
.cylo-product .cyc-qna__eye{font-size:.74rem;color:var(--orange)} /* match .eye (was 1.1rem, --soft) */
.cylo-product .cyc-qna__title{line-height:.98;margin-top:0} /* match .sec h2; margin-top:0 because in the flex head it can't collapse with the eyebrow margin like a normal section does */
.cylo-product .cyc-qna__empty{color:var(--soft);font-size:1.1rem;line-height:1.7;margin-top:0} /* match .sec p (was 16px white, sat 17.6px too low) */

/* Stock-alert / notify panel: the opt-in form (select + channel cards + button) carried
   a 420px max-width + auto margins, so it sat narrower and centred while the eyebrow +
   heading spanned the panel. Let it fill the panel so everything lines up on the same
   left edge (one fix, every product's notify panel). Scoped to data-purpose="stock" so
   the Q&A opt-in is untouched. */
.cylo-product .cyc-stockalert .cyc-optin{max-width:none;margin-left:0;margin-right:0}

/* ============================================================
   Product reviews — Layout B list, store replies, "this
   reviewer also reviewed" hover, Ordered/Reviewed dates.
   ============================================================ */
.cylo-product .cyc-rv__summary{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;color:var(--soft);font-size:1rem;margin:0 0 1.6rem}
.cylo-product .cyc-rv__summary b{color:var(--ink);font-size:1.2rem}
.cylo-product .cyc-rv__stars{color:var(--orange);letter-spacing:.1em}
.cylo-product .cyc-rv__stars--lg{font-size:1.1rem}
.cylo-product .cyc-rv__dim{color:var(--mute)}
.cylo-product .cyc-rv__allv{margin-left:.6rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#5ad17e;font-weight:700}
.cylo-product .cyc-rv__list{max-width:760px}
.cylo-product .cyc-rv{padding:1.5rem 0;border-bottom:1px solid var(--hair);scroll-margin-top:100px}
.cylo-product .cyc-rv:first-child{border-top:1px solid var(--hair)}
.cylo-product .cyc-rv__line{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.5rem}
.cylo-product .cyc-rv__name{font:inherit;font-weight:700;font-size:.95rem;color:var(--ink);background:none;border:0;border-bottom:1px dotted var(--orange-soft);padding:0;cursor:pointer}
.cylo-product .cyc-rv__name:hover,.cylo-product .cyc-rv__name:focus{color:var(--orange);border-bottom-color:var(--orange);outline:none}
.cylo-product .cyc-rv__v{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#5ad17e}
.cylo-product .cyc-rv__incent{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--mute);border:1px solid var(--hair);border-radius:3px;padding:1px 5px}
.cylo-product .cyc-rv__date{margin-left:auto;font-size:.76rem;color:var(--mute)}
.cylo-product .cyc-rv__date .cyc-rv__d{color:var(--soft)}
.cylo-product .cyc-rv__date .cyc-rv__sep{opacity:.45;margin:0 .25rem}
.cylo-product .cyc-rv p.cyc-rv__b{color:var(--soft);font-size:1rem;line-height:1.6;margin:0;max-width:none}
.cylo-product .cyc-rv__reply{margin:.85rem 0 0 1.3rem;padding:.8rem 1rem;border-left:2px solid var(--orange-soft);background:rgba(255,154,82,.04);border-radius:0 6px 6px 0}
.cylo-product .cyc-rv p.cyc-rv__reply-h{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--orange);margin:0 0 .3rem;line-height:1.3;max-width:none}
.cylo-product .cyc-rv p.cyc-rv__reply-b{font-size:.92rem;color:var(--soft);line-height:1.55;margin:0;max-width:none}
.cylo-product .cyc-rv__more{display:flex;align-items:center;gap:1.2rem;margin-top:1.6rem}
.cylo-product .cyc-rv__morebtn{font:inherit;cursor:pointer;background:none;border:1px solid var(--orange-soft);color:var(--orange);border-radius:999px;padding:.7rem 1.4rem;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;transition:.18s}
.cylo-product .cyc-rv__morebtn:hover{border-color:var(--orange);background:rgba(255,154,82,.08)}
.cylo-product .cyc-rv__allbtn{font:inherit;cursor:pointer;background:none;border:1px solid var(--hair);color:var(--mute);border-radius:999px;padding:.7rem 1.4rem;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;transition:.18s}
.cylo-product .cyc-rv__allbtn:hover{border-color:var(--orange-soft);color:var(--orange)}
.cylo-product .cyc-rv__count{font-size:.82rem;color:var(--mute)}
.cylo-product .cyc-rv--hl{animation:cycRvHl 2.4s ease}
@keyframes cycRvHl{0%,45%{background:rgba(255,154,82,.13)}100%{background:transparent}}
/* persistent highlight for a deep-linked review (stays so it's clear which one the link points to) */
.cylo-product .cyc-rv.cyc-rv--target{background:rgba(255,154,82,.06);border-radius:10px;box-shadow:0 0 0 2px rgba(255,154,82,.42);padding:1.4rem 1.2rem;border-bottom-color:transparent}
/* hover popover (appended to <body>, so not scoped under .cylo-product) */
.cyc-rv__tip{position:absolute;z-index:120;min-width:210px;max-width:300px;background:#14101c;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:.8rem .9rem;box-shadow:0 14px 36px rgba(0,0,0,.55);font-family:-apple-system,"Segoe UI",Roboto,sans-serif}
.cyc-rv__tip h6{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#aba1bd;font-weight:700;margin:0 0 .5rem}
.cyc-rv__tip a{display:flex;justify-content:space-between;gap:.6rem;color:#cfc6dc;font-size:.85rem;text-decoration:none;padding:.32rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.cyc-rv__tip a:last-child{border-bottom:0}.cyc-rv__tip a:hover{color:#ff9a52}
.cyc-rv__tip .s{color:#ff9a52;font-size:.72rem;white-space:nowrap}
.cyc-rv__tip .empty{color:#aba1bd;font-size:.82rem}

/* ---- reviews 2-column grid + write-a-review panel ---- */
.cylo-product .cyc-reviews-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:4vw;align-items:start}
@media(max-width:900px){.cylo-product .cyc-reviews-grid{grid-template-columns:1fr;gap:3rem}}
.cylo-product .cyc-reviews-main h2{margin-bottom:.7rem}
.cylo-product .cyc-reviews-main .cyc-rv__list{max-width:none}
.cylo-product .cyc-reviews-aside{position:sticky;top:90px}
@media(max-width:900px){.cylo-product .cyc-reviews-aside{position:static}}
.cylo-product .cyc-rvw{border:1px solid var(--hair);border-radius:16px;padding:2rem;background:rgba(255,255,255,.018)}
.cylo-product .cyc-rvw__h{font-family:var(--anton);font-weight:400;font-size:2.2rem;line-height:1;letter-spacing:-.01em;margin:0 0 .8rem}
.cylo-product .cyc-rvw p.cyc-rvw__sub{color:var(--soft);font-size:.95rem;line-height:1.55;margin:0 0 1.5rem;max-width:none}
.cylo-product .cyc-rvw__sub b{color:var(--ink)}
.cylo-product .cyc-rvw p.cyc-rvw__lbl{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:700;margin:0 0 .7rem;max-width:none}
.cylo-product .cyc-rvw__form>.cyc-rvw__lbl:not(:first-child){margin-top:1.5rem}
.cylo-product .cyc-rvw__orders{display:flex;flex-direction:column;gap:.6rem}
.cylo-product .cyc-rvw__order{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;font:inherit;cursor:pointer;background:rgba(255,255,255,.02);border:1px solid var(--hair);border-radius:10px;padding:.9rem 1.1rem;transition:border-color .18s,background .18s}
/* My Account cards carry a single fixed order as a hidden span; honour [hidden] over the flex rule above. */
.cylo-product .cyc-rvw__order[hidden]{display:none}
.cylo-product .cyc-rvw__order:hover{border-color:var(--orange-soft)}
.cylo-product .cyc-rvw__order.is-sel{border-color:var(--orange);background:rgba(255,154,82,.06)}
.cylo-product .cyc-rvw__order .o-n{font-weight:700;color:var(--ink)}
.cylo-product .cyc-rvw__order.is-sel .o-n{color:var(--orange)}
.cylo-product .cyc-rvw__order .o-d{font-size:.82rem;color:var(--mute)}
.cylo-product .cyc-rvw__stars{display:flex;gap:.3rem}
.cylo-product .cyc-rvw__star{font:inherit;font-size:1.9rem;line-height:1;cursor:pointer;background:none;border:0;padding:0;color:var(--mute);transition:color .12s}
.cylo-product .cyc-rvw__star.on{color:var(--orange)}
/* sub-rating criteria, custom questions, consent (Phase 2 form extras) */
.cylo-product .cyc-rvw__criteria{display:flex;flex-direction:column;gap:.5rem;margin:0 0 .4rem}
.cylo-product .cyc-rvw__criterion{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cylo-product .cyc-rvw__clabel{font-size:.9rem;color:var(--soft)}
.cylo-product .cyc-rvw__cstars{display:flex;gap:.15rem}
.cylo-product .cyc-rvw__cstar{font:inherit;font-size:1.1rem;line-height:1;cursor:pointer;background:none;border:0;padding:0;color:var(--mute);transition:color .12s}
.cylo-product .cyc-rvw__cstar.on{color:var(--orange)}
.cylo-product .cyc-rvw__qinput{display:block;width:100%;background:rgba(0,0,0,.25);border:1px solid var(--hair);border-radius:10px;color:var(--ink);font:inherit;font-size:.92rem;line-height:1.5;padding:.7rem 1rem;resize:vertical;min-height:56px}
.cylo-product .cyc-rvw__qinput:focus{outline:none;border-color:var(--orange-soft)}
.cylo-product .cyc-rvw__qinput::placeholder{color:var(--mute)}
.cylo-product .cyc-rvw__consent{display:flex;align-items:flex-start;gap:.55rem;margin:.5rem 0 .2rem;font-size:.86rem;color:var(--soft);line-height:1.45}
.cylo-product .cyc-rvw__consent input{margin-top:.2rem;flex:0 0 auto}
.cylo-product .cyc-rvw__consent a{color:var(--orange);text-decoration:underline}
.cylo-product .cyc-rvw__consent-links{color:var(--mute)}
/* display: criteria bars + Q&A on each review */
.cylo-product .cyc-rv__criteria{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin:.5rem 0 .2rem}
.cylo-product .cyc-rv__crit{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--mute)}
.cylo-product .cyc-rv__cstars{color:var(--orange);letter-spacing:.05em;font-size:.78rem}
.cylo-product .cyc-rv__qa{margin:.55rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.cylo-product .cyc-rv__qa-q{font-size:.72rem;letter-spacing:.04em;color:var(--mute);text-transform:uppercase;font-weight:700;margin:0 0 .15rem}
.cylo-product .cyc-rv__qa-a{font-size:.92rem;color:var(--soft);margin:0;line-height:1.5}
.cylo-product .cyc-rvw__lownote{margin-top:1rem;padding:.9rem 1rem;border:1px solid var(--orange-soft);border-radius:10px;background:rgba(255,154,82,.05);color:var(--soft);font-size:.86rem;line-height:1.55}
.cylo-product .cyc-rvw__lownote a{color:var(--orange);text-decoration:underline}
.cylo-product .cyc-rvw__text{display:block;width:100%;background:rgba(0,0,0,.25);border:1px solid var(--hair);border-radius:10px;color:var(--ink);font:inherit;font-size:.95rem;line-height:1.55;padding:.9rem 1rem;resize:vertical;min-height:120px}
.cylo-product .cyc-rvw__text:focus{outline:none;border-color:var(--orange-soft)}
.cylo-product .cyc-rvw__text::placeholder{color:var(--mute)}
.cylo-product .cyc-rvw__names{display:flex;flex-wrap:wrap;gap:.6rem}
.cylo-product .cyc-rvw__name{font:inherit;font-size:.9rem;cursor:pointer;background:rgba(255,255,255,.02);border:1px solid var(--hair);border-radius:999px;padding:.55rem 1.1rem;color:var(--soft);transition:border-color .18s,color .18s,background .18s}
.cylo-product .cyc-rvw__name:hover{border-color:var(--orange-soft)}
.cylo-product .cyc-rvw__name.is-sel{border-color:var(--orange);color:var(--orange);background:rgba(255,154,82,.06)}
.cylo-product .cyc-rvw__submit{display:inline-block;margin-top:1.6rem;font:inherit;cursor:pointer;background:var(--orange);color:#1a0d06;border:0;border-radius:999px;padding:.85rem 1.8rem;font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;transition:filter .18s}
.cylo-product .cyc-rvw__submit:hover{filter:brightness(1.08)}
.cylo-product .cyc-rvw__submit--link{text-decoration:none}
.cylo-product .cyc-rvw p.cyc-rvw__foot{margin:1.2rem 0 0;font-size:.78rem;color:var(--mute);line-height:1.5;max-width:none}
.cylo-product .cyc-rvw__foot a{color:var(--orange)}

/* ---- review submission: title, honeypot, message line, review headline ---- */
.cylo-product .cyc-rvw__hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.cylo-product .cyc-rvw__opt{color:var(--mute);font-weight:400;text-transform:none;letter-spacing:0}
.cylo-product .cyc-rvw__title-in{display:block;width:100%;background:rgba(0,0,0,.25);border:1px solid var(--hair);border-radius:10px;color:var(--ink);font:inherit;font-size:.95rem;padding:.7rem 1rem}
.cylo-product .cyc-rvw__title-in:focus{outline:none;border-color:var(--orange-soft)}
.cylo-product .cyc-rvw__title-in::placeholder{color:var(--mute)}
.cylo-product .cyc-rvw p.cyc-rvw__msg{color:#e88;font-size:.85rem;line-height:1.5;margin:.9rem 0 0;max-width:none}
.cylo-product .cyc-rv p.cyc-rv__title{font-weight:700;color:var(--ink);font-size:1rem;line-height:1.35;margin:0 0 .25rem;max-width:none}

/* ---- power features: quantity badge, photos, helpful vote, volume stat ---- */
.cylo-product .cyc-rv__qty{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--soft);border:1px solid var(--hair);border-radius:999px;padding:.12rem .5rem}
.cylo-product .cyc-rv__photos{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0 0}
.cylo-product .cyc-rv__photo{display:block;width:74px;height:74px;border-radius:6px;overflow:hidden;border:1px solid var(--hair)}
.cylo-product .cyc-rv__photo img{width:100%;height:100%;object-fit:cover}
.cylo-product .cyc-rv__helpful{margin:.8rem 0 0;display:flex;align-items:center;gap:.55rem}
.cylo-product .cyc-rv__helpful-btn{font:inherit;font-size:.78rem;cursor:pointer;background:none;border:1px solid var(--hair);color:var(--soft);border-radius:999px;padding:.34rem .9rem;transition:.18s}
.cylo-product .cyc-rv__helpful-btn:hover{border-color:var(--orange-soft);color:var(--orange)}
.cylo-product .cyc-rv__helpful-btn[disabled]{opacity:.7;cursor:default}
.cylo-product .cyc-rv__helpful-n{font-size:.78rem;color:var(--mute)}
.cylo-product .cyc-rvw__photos-in{display:block;font:inherit;font-size:.85rem;color:var(--soft)}
.cylo-product .cyc-rv__volume{margin-left:.5rem;font-size:.74rem;color:var(--mute)}

/* ---- My Account: review cards (product-card style, expand to a form) ---- */
/* The page now has a big injected "Reviews" title, so these are SECTION labels, not titles: a small orange
   eyebrow (like the step-tile labels) that clearly sits below the page title rather than competing with it. */
.cylo-product .cyca-acc-rv__h{font-family:var(--san);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:2.4rem 0 .9rem}
.cylo-product .cyca-acc-rv__h:first-child{margin-top:.2rem}
.cylo-product .cyca-acc-rv__lead{color:var(--soft);margin:0 0 1.2rem;font-size:.95rem}
.cylo-product .cyca-rvgrid{display:grid;grid-template-columns:1fr;gap:1rem;margin:0 0 2rem}
.cylo-product .cyca-rvcard{border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.025)}
.cylo-product .cyca-rvcard__head{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem}
.cylo-product .cyca-rvcard__art{width:64px;height:64px;flex:0 0 auto;border-radius:8px;overflow:hidden;border:1px solid var(--hair);background:radial-gradient(120% 120% at 30% 20%,#241526,#0a0a0a 70%);display:flex;align-items:center;justify-content:center}
.cylo-product .cyca-rvcard__art img{width:100%;height:100%;object-fit:cover}
.cylo-product .cyca-rvcard__shop{color:var(--orange);font-size:1.5rem;line-height:1}
.cylo-product .cyca-rvcard__info{flex:1 1 auto;min-width:0}
.cylo-product .cyca-rvcard__name{font-weight:700;color:var(--ink);font-size:1rem;line-height:1.3;margin:0 0 .2rem}
.cylo-product .cyca-rvcard__meta{font-size:.8rem;color:var(--mute);margin:0}
.cylo-product .cyca-rvcard__btn{flex:0 0 auto;font:inherit;cursor:pointer;background:var(--orange);color:#1a0d06;border:0;border-radius:999px;padding:.6rem 1.2rem;font-weight:800;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;transition:filter .18s}
.cylo-product .cyca-rvcard__btn:hover{filter:brightness(1.08)}
.cylo-product .cyca-rvcard__form{padding:0 1.1rem 1.3rem;border-top:1px solid var(--hair)}
.cylo-product .cyca-rvcard__form .cyc-rvw{border:0;padding:1rem 0 0;background:none;border-radius:0}
@media(max-width:560px){.cylo-product .cyca-rvcard__head{flex-wrap:wrap}.cylo-product .cyca-rvcard__btn{width:100%;order:3}}