/* ============================================================================
   CYLOCYBE COMPONENTS - one definition each, shared by every page.

   Built 2026-09-07 from the CSS that had been copy-pasted into eight page bodies.
   Five pages carried their own copy of .cy-faq, 76-99% identical to each other, so
   changing the component meant editing five places and they had already drifted.

   RULES FOR THIS FILE
     - Values come from the ladder in style.css :root. No literal font stacks, no
       literal reading widths. If a value is missing from the ladder, add it there.
     - Never redefine a theme token inside a component. The copies did, which is why
       those pages stopped following the site palette.
     - Selectors are single class names. The copies carried a four-class prefix to
       out-specify the theme; a component in the theme has no need to fight it.

   The copies defined --accent and --line locally. They map onto the theme's own
   --orange and --hair, so the component follows the site palette instead of pinning
   its own colours.

   Page content uses these class names and carries NO <style> block of its own.
   `wp cyc standard` reports any page that breaks that.
   ============================================================================ */

.cy-faq{padding:clamp(3rem,7vw,5.5rem) 0;background:var(--bg,#f6f4f8)}
.cy-faq__in{max-width:none;margin:0;padding:0}
.cy-faq__eye{font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase; color:var(--orange);font-weight:700;margin:0 0 .6rem;text-align:center}
.cy-faq__h{font-family:var(--anton);font-weight:400; font-size:clamp(1.85rem,4.4vw,2.8rem);line-height:1.06;letter-spacing:.005em; margin:0 0 2.4rem;text-align:center;text-transform:uppercase; max-width:22ch;margin-inline:auto}
.cy-faq__sub{text-align:center;color:var(--mute);margin:0 auto 2.6rem;max-width:38rem;font-size:1rem}
.cy-faq__list{border-top:1px solid var(--hair)}
.cy-faq__item{border-bottom:1px solid var(--hair)}
.cy-faq__q{width:100%;display:flex;align-items:flex-start;gap:1rem; background:none;border:0;padding:1.35rem .2rem;cursor:pointer;text-align:left; font:inherit;font-weight:700;font-size:1.13rem;line-height:1.4;color:var(--ink)}
.cy-faq__q:hover{color:var(--pink)}
.cy-faq__q span{flex:1}
.cy-faq__q i{flex:0 0 22px;height:22px;position:relative;margin-top:2px;font-style:normal}
.cy-faq__q i:before,.cy-faq__q i:after{content:"";position:absolute;background:var(--orange); border-radius:2px;transition:transform .18s ease}
.cy-faq__q i:before{left:0;top:10px;width:22px;height:2px}
.cy-faq__q i:after{left:10px;top:0;width:2px;height:22px}
.cy-faq__item.is-open .cy-faq__q i:after{transform:scaleY(0)}
.cy-faq__item.is-open .cy-faq__q{color:var(--pink)}
.cy-faq__a{display:none;padding:0 3rem 1.6rem .2rem}
.cy-faq__item.is-open .cy-faq__a{display:block}
.cy-faq__a p{margin:0 0 .9em;color:var(--soft);font-size:1.02rem;line-height:1.75}
.cy-faq__a p:last-child{margin-bottom:0}
.cy-faq__a p.lead{font-weight:700;color:var(--ink)}
.cy-faq__a p.link{margin-top:1.1em}
.cy-faq__a p.link a{color:var(--pink);font-weight:700;text-decoration:none; border-bottom:2px solid rgba(207,22,103,.3)}
.cy-faq__a p.link a:hover{border-bottom-color:var(--pink)}
.cy-faq__a p.link a:after{content:" →"}
.cy-faq__tag{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; font-weight:700;color:var(--orange);margin:0 0 1rem;text-align:center}
.cy-faq__rule{border:0;border-top:2px solid var(--ink);margin:4rem 0 2.2rem}
.cy-faq__sec{font-family:var(--anton);font-weight:400;font-size:1.5rem; letter-spacing:.01em;text-transform:uppercase;color:var(--ink); margin:2.4rem 0 .2rem;padding-bottom:.4rem}
.cy-faq__sec:first-of-type{margin-top:.6rem}
.cy-faq__foot{margin-top:2.4rem;text-align:center;font-size:.98rem;color:var(--mute)}
.cy-faq__foot a{color:var(--pink);font-weight:700;text-decoration:none}
.cy-faq__foot a:hover{text-decoration:underline}
.cy-faq__q{font-size:1.03rem;padding:1.15rem .1rem}
.cy-faq__a{padding-right:1rem}
.cy-faq{padding:0;max-width:none;margin-inline:0}
.cylo-page__hero-inner{max-width:none;margin-inline:0}
.cylo-product.cylo-page .sec{padding-top:0}
.cy-faq__in{max-width:none;padding:0}
.cy-faq__sech{font-family:var(--anton);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);line-height:1.1;margin:3rem 0 1.2rem}
.cy-faq__group:first-child .cy-faq__sech{margin-top:0}
.cy-faq__group{text-transform:none}
.cy-faq__a ul,.cy-faq__a ol{margin:.2rem 0 1rem;padding-left:1.4rem;counter-reset:none}
.cy-faq__a ol{list-style:decimal}
.cy-faq__a li > ul{margin:.4rem 0 .2rem;list-style:circle}
.cy-faq__a ol li,.cy-faq__a ul li{counter-increment:none;border-top:0;border-bottom:0;padding:0;font-size:inherit;line-height:1.6;margin:0 0 .45rem}
.cy-faq__a ol li::before,.cy-faq__a ul li::before{content:none}
.cy-faq__a ul{list-style:disc}
.cy-faq__pg{border:1px solid var(--hair);border-radius:12px;padding:1rem 1.15rem;margin:0 0 .9em;background:rgba(0,0,0,.02)}
.cy-faq__pg p:last-child{margin-bottom:0}
.cy-faq__a a{color:var(--pink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cy-faq__seg{margin:2.1em 0 .9em;padding-top:1.4em;border-top:1px solid var(--hair);font-size:1.12rem;font-weight:700}
.cy-faq__seg:first-child{margin-top:0;padding-top:0;border-top:0}
.cy-faq__a p.cy-faq__sub{margin:1.6em 0 .55em;text-align:left}
.cy-faq__a p.cy-faq__sub + ul{margin-top:0}
.cy-faq__cplink{margin:1.3em 0 0}
.cy-faq__a a.cy-faq__cp{font-size:.82rem;color:var(--mute);font-weight:400;text-decoration:none;border-bottom:1px dotted var(--hair)}
.cy-faq__a a.cy-faq__cp:hover{color:var(--pink);border-bottom-color:var(--pink)}
.cy-faq__item:target > .cy-faq__q span{color:var(--pink)}
.cy-faq__a li{margin:0 0 .45rem;line-height:1.6}
.cy-faq__q,.cy-faq__a,.cy-faq__a p,.cy-faq__foot{font-family:var(--san)}
.cy-faq__a img{max-width:220px;height:auto;display:block;margin:.6rem 0}

/* ============================================================================
   WIDE. The escape hatch from the reading column, and the only one.

   The page body is a column capped at --measure so running text is readable.
   A card grid or a wide table needs the other container instead - the same
   min(100% - gutters, --page-max) every hero, product grid and section header
   on the site already uses. Rather than let a page invent its own width (which
   is how /guides/ ended up with max-width:1200px of its own), it says .cy-wide
   and gets the site container.

   Two widths on the whole site, both from the ladder. Nothing else sets one.
   ============================================================================ */
.cylo-page__body > .cy-wide{width:auto;max-width:none;margin-inline:0}
@media (min-width:1100px){
  /* spill across the gap and the rail, so a grid fills the page while the reading
     column beside it stays exactly where it is on every other page */
  .cylo-page__body > .cy-wide{width:auto}
}

/* ============================================================================
   GUIDE INDEX - the cards on /guides/.

   Was a <style> block in the page body with its own max-width:1200px, its own
   "Helvetica Neue"/"Anton" stacks and six literal hex colours, on a page using
   the printable single-guide template. So it agreed with no other page on width,
   type or colour. Same component, now on the ladder and the standard template.
   ============================================================================ */
.gk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.6rem;margin:1.5rem 0 0}
.gk-card{background:var(--panel);border:1px solid var(--hair);border-radius:14px;padding:1.35rem;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .3s,box-shadow .3s}
.gk-card:hover{border-color:var(--orange-soft);box-shadow:0 10px 26px rgba(21,23,28,.10)}
.gk-card .gk-art{aspect-ratio:1;background:#f1f0f3;border-radius:10px;margin-bottom:1.15rem;position:relative;overflow:hidden;display:block}
.gk-card .gk-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;box-shadow:none}
.gk-card .gk-name{font-family:var(--anton);font-weight:400;font-size:1.7rem;line-height:.95;letter-spacing:-.02em;color:var(--ink);margin:.1rem 0 .5rem;display:block}
.gk-card .gk-desc{font-family:var(--san);font-size:var(--fs-body);line-height:1.55;color:var(--soft);margin:0 0 1.2rem;display:block}
.gk-card .gk-cta{font-family:var(--san);font-size:var(--fs-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:var(--pink);font-weight:700;margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.gk-card .gk-meta{font-family:var(--anton);font-weight:400;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--orange)}

/* ============================================================================
   SMALL SHARED PIECES - the things pages were writing inline.

   .cy-ruled  a hairline above each h2, for pages whose sections want dividers.
              /about/ carried this inside a <style> block that ALSO redefined
              the page's measure (52rem), body size, line-height, ink and link
              colour. The divider was the only part worth keeping; the rest was
              /about/ quietly opting out of the site.
   .cy-shot   a framed screenshot. /ez-replace/ wrote the frame inline.
   .cy-cap    the caption under one. Same page, also inline.
   ============================================================================ */
.cy-ruled h2{border-top:1px solid var(--hair);padding-top:1.5rem}
.cy-ruled h2:first-child{border-top:0;padding-top:0}
.cy-fig{margin:1.4rem 0 0}
.cy-shot{max-width:100%;height:auto;border:1px solid var(--hair);border-radius:14px}
.cy-cap{font-size:var(--fs-small);color:var(--mute);margin-top:.5rem}

/* ============================================================================
   NEWS - the year rail and the entry cards on /news/.

   Was 8.5KB of <style> in the page body. It carried its own copy of the whole
   palette under different names (--n-ink, --n-soft, --n-mute, --n-line,
   --n-accent, --n-pink), its own reading width (--n-measure:46rem), and five
   rules that switched OFF the standard page: the hero's padding, the h1's
   margin, the hero width and the body's cap, three of them with !important.
   So /news/ agreed with no other page on width, colour or spacing, and a change
   to any of those tokens skipped it.

   Those five override rules are gone: the hero and the column are the standard
   ones now. What is left is the part that is genuinely a news page - a sticky
   year rail, a card per entry, an embedded video - on the ladder's values.

   Entry body copy (p, h4, ul, li) is deliberately NOT styled here. It is
   ordinary page copy and now takes the same rules as every other page.
   ============================================================================ */
.cyc-news *{box-sizing:border-box}

/* Sticky year filter. */
.cyc-news__rail{position:sticky;top:0;z-index:15;background:rgba(246,244,248,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);margin:0 0 4px;padding:14px 0 13px;display:block}
.cyc-news__rail-in{margin-inline:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start}
.cyc-news__rail a{display:inline-flex;align-items:baseline;gap:5px;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--hair);padding:6px 14px;border-radius:99px;font-size:var(--fs-small);font-weight:700;line-height:1.2}
.cyc-news__rail a:hover,.cyc-news__rail a.is-on{background:var(--pink);border-color:var(--pink);color:#fff}
.cyc-news__rail a i{font-style:normal;font-weight:600;font-size:var(--fs-eyebrow);opacity:.55}
.cyc-news__rail a.is-all{background:var(--ink);border-color:var(--ink);color:#fff}

/* Year heading. Anton at a display size - the one deliberate step above the
   ladder's h2, because it labels a whole year rather than a section. */
.cyc-news__yr{font-family:var(--anton);font-weight:400;font-size:2.6rem;line-height:1;color:var(--ink);margin:3.4rem 0 1.2rem;letter-spacing:0;scroll-margin-top:76px;border-bottom:2px solid var(--ink);padding-bottom:.5rem}
.cyc-news__yr:first-of-type{margin-top:2rem}

/* One entry. */
.cyc-news__item{background:var(--panel);border:1px solid var(--hair);border-radius:14px;padding:26px 30px 22px;margin:0 0 18px;scroll-margin-top:80px}
.cyc-news__date{font-family:var(--san);font-size:var(--fs-eyebrow);letter-spacing:.13em;text-transform:uppercase;color:var(--orange);font-weight:700;margin:0 0 9px;line-height:1.4}
.cyc-news__item h3{font-family:var(--san);font-weight:800;font-size:var(--fs-h2);line-height:1.28;letter-spacing:-.01em;color:var(--ink);margin:0 0 14px}
.cyc-news__item h3.is-date{font-size:var(--fs-h3)}
.cyc-news__link{display:inline-block;margin-top:16px;font-size:var(--fs-eyebrow);color:var(--mute);text-decoration:none;border:0;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.cyc-news__link:hover{color:var(--pink)}
.cyc-news__draft{display:inline-block;vertical-align:middle;margin-left:9px;font-family:var(--san);font-size:var(--fs-micro);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#fff;background:var(--pink);padding:3px 8px;border-radius:99px;position:relative;top:-2px}

/* A quiet aside, and the placeholder for a year with nothing in it. */
.cyc-news__note,.cyc-news__gap{margin:26px 0 0;padding:20px 24px;background:transparent;border:1px dashed var(--hair);border-radius:12px;font-family:var(--san);font-size:var(--fs-body);line-height:1.7;color:var(--mute)}
.cyc-news__gap{margin:0 0 18px;padding:22px 26px;border-radius:14px}
.cyc-news__gap p{margin:0;color:var(--mute)}

/* Figure and consent-gated video. */
.cyc-news__fig{margin:1.8em 0;max-width:100%}
.cyc-news__fig img,
.cyc-news__shot img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--hair)}
.cyc-news__yt{position:relative;margin:1.8em 0;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#100d16}
.cyc-news__yt img,.cyc-news__yt iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
.cyc-news__ytplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:66px;height:66px;border-radius:50%;border:0;cursor:pointer;color:#fff;background:rgba(16,13,22,.78);display:grid;place-items:center}
.cyc-news__ytplay:hover{background:var(--pink)}
.cyc-news__ytchoice{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(16,13,22,.88);padding:1rem}
.cyc-news__ytpanel{max-width:30rem;text-align:center;color:#fff}
.cyc-news__ytpanel p{color:#fff;font-size:var(--fs-small);line-height:1.6;margin:0 0 1rem}
.cyc-news__ytopt{display:inline-block;margin:.3rem;padding:.55rem 1rem;border:0;border-radius:999px;background:var(--pink);color:#fff;font:inherit;font-weight:700;font-size:var(--fs-small);cursor:pointer;text-decoration:none}
.cyc-news__ytopt:hover{filter:brightness(.86)}

/* Year filter. */
.cyc-news.is-filtered .cyc-news__yr,.cyc-news.is-filtered .cyc-news__item,.cyc-news.is-filtered .cyc-news__gap{display:none}
.cyc-news.is-filtered [data-y].is-show{display:block}

@media(max-width:700px){
  .cyc-news__item{padding:20px 18px 18px;border-radius:12px}
  .cyc-news__yr{font-size:2rem;margin-top:2.4rem}
  .cyc-news__rail{overflow-x:auto;padding:10px 2px}
  .cyc-news__rail-in{flex-wrap:nowrap;justify-content:flex-start}
  .cyc-news__rail a{flex:0 0 auto}
}

/* ============================================================================
   STRAIN NAV - twice on a page.

   Owner, 2026-09-07: "THE TOP version of this should have a little button saying
   'Expand All Strains', and it should be closed automatically. Then a 'Close All
   Strains'. The bottom page version shouldnt have it - it should just show fully
   all the time."

   The top one is a <details>: closed on load, opens on the button, no JavaScript
   and it works from the keyboard. The one above the footer is a plain block.

   Both are LAST in the HTML. Grid rows put one at the top and one at the bottom,
   so 58 strain names never land in the first hundred words a crawler reads.
   ============================================================================ */
.strain-nav{
  box-sizing:border-box;
  padding:1.1rem 1.2rem;
  border:1px solid var(--hair);
  border-radius:6px;
  background:var(--panel);
}
/* Closed, it is just the button - no panel around it. The panel appears with the list. */
.cylo-page .cylo-page__grid > .strain-nav--top{grid-column:text;grid-row:1;margin:2.2rem 0 0;padding:0;border:0;background:transparent}
/* Open adds NO box of its own - no padding, no border, no panel. Owner, 2026-09-07:
   "when i click on that expand all strains button, the button shifts positions because
   it opens a kind of container ... so i dont need to move my mouse positions just to
   close it again". The button stays exactly where it is; the list appears under it. */
.cylo-page .cylo-page__grid > .strain-nav--top[open]{padding:0;border:0;background:transparent}
.cylo-page .cylo-page__grid > .strain-nav--foot{grid-column:text;grid-row:3;margin:3.5rem 0 0}

/* the button */
/* Text only. No arrow, no plus, no icon of any kind - owner, 2026-09-07:
   "never ever ever put arrows, symbols, anything inside a button - TEXT ONLY". */
.strain-nav__toggle{
  display:inline-block;
  cursor:pointer;
  padding:.34rem .8rem;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-family:var(--san);
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:.02em;
  list-style:none;
  user-select:none;
}
.strain-nav__toggle::-webkit-details-marker{display:none}
.strain-nav__toggle::marker{content:""}
.strain-nav__toggle span::before{content:"Expand all strains"}
.strain-nav--top[open] .strain-nav__toggle span::before{content:"Close all strains"}
.strain-nav--top[open] .strain-nav__list{margin-top:.85rem}

.strain-nav__h{display:none}
.strain-nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.cylo-product .strain-nav .strain-nav__link,
.strain-nav__link{
  display:inline-block;
  white-space:nowrap;
  padding:.34rem .7rem;
  border-radius:999px;
  font-size:var(--fs-small);
  line-height:1.3;
  text-decoration:none;
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair);
  background:var(--panel);
}
.strain-nav__link:hover{box-shadow:inset 0 0 0 1px var(--mute)}
.cylo-product .strain-nav .strain-nav__link.is-current,
.strain-nav__link.is-current{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink);font-weight:700}
.strain-nav__link--up{font-weight:700}

/* The hero and the photo carry --hero-top to clear the site header. With the nav
   above them that space is already there, so they lose it. */
.cylo-page__grid:has(> .strain-nav) .cylo-page__flow > .cylo-page__hero{padding-top:2.6rem}

/* A screenshot at its own small size, rather than filling the entry. */
.cyc-news__shot{margin:1.6rem 0 0;max-width:340px}

/* ============================================================================
   ARTICLE TYPOGRAPHY - the body of a written page.

   Moved here from cylocybe-page.css on 2026-09-07, unchanged. It has to render in
   two places now: the strain pages themselves, and the About [strain] tab on the
   product page - and the page stylesheet is not loaded on products. Putting it in
   the component sheet, which every page loads, means one definition and no extra
   request on the product page, which has to stay fast.

   Selectors are verbatim, including the .cylo-product.cylo-page prefix: that prefix
   exists to out-rank cylocybe-product.css, and this file loads after it.
   ============================================================================ */
.cylo-product.cylo-page .sec__inner.cylo-page__body{max-width:50rem;font-family:var(--san);padding:0 0 10vh}
.cylo-product.cylo-page .sec__inner.cylo-page__body h2{font-family:var(--san);font-weight:700;font-size:var(--fs-h2,1.5rem);line-height:1.15;letter-spacing:0;color:var(--ink);margin:2.6em 0 .5em}
.cylo-product.cylo-page .sec__inner.cylo-page__body h2:first-child{margin-top:.5rem}
.cylo-product.cylo-page .sec__inner.cylo-page__body h3:not(.card__name){font-family:var(--san);font-style:normal;font-weight:700;font-size:var(--fs-h3,1.17rem);line-height:1.25;color:var(--ink);margin:1.9em 0 .35em}
.cylo-product.cylo-page .sec__inner.cylo-page__body p{font-size:var(--fs-body,1rem);line-height:1.6;color:var(--soft);max-width:none;margin:0 0 1.05em}
.cylo-product.cylo-page .sec__inner.cylo-page__body p strong,.cylo-product.cylo-page .sec__inner.cylo-page__body li strong{color:var(--ink);font-weight:600}
.cylo-product.cylo-page .sec__inner.cylo-page__body a{color:var(--orange);border-bottom:1px solid var(--orange-soft)}
.cylo-product.cylo-page .sec__inner.cylo-page__body ul,.cylo-product.cylo-page .sec__inner.cylo-page__body ol{margin:0 0 2rem;padding-left:0;list-style:none}
.cylo-product.cylo-page .sec__inner.cylo-page__body li{position:relative;color:var(--soft)}
/* bulleted lists */
.cylo-product.cylo-page .sec__inner.cylo-page__body ul li{padding:.3rem 0 .3rem 1.7rem;font-size:var(--fs-body);line-height:1.7}
.cylo-product.cylo-page .sec__inner.cylo-page__body ul li::before{content:"";position:absolute;left:0;top:calc(.3rem + (1.7em - 7px) / 2);width:7px;height:7px;border-radius:50%;background:var(--orange)}
/* numbered procedures rendered as MonoBox-style steps: big orange Anton number,
   optional bold step title (.cylo-step__t), body, optional meta (.cylo-step__m).
   Matches the "How it works" step convention on the product pages. */
.cylo-product.cylo-page .sec__inner.cylo-page__body ol{counter-reset:cylp;margin:2.6rem 0}
.cylo-product.cylo-page .sec__inner.cylo-page__body ol li{counter-increment:cylp;padding:.45rem 0 .45rem 4.4rem;font-size:var(--fs-body);line-height:1.72}
.cylo-product.cylo-page .sec__inner.cylo-page__body ol li::before{content:counter(cylp);position:absolute;left:0;top:calc(.45rem + (1.72em - 2.025rem) / 2);font-family:var(--anton);font-weight:400;font-size:2.7rem;line-height:.75;color:var(--orange)}
.cylo-product.cylo-page .sec__inner.cylo-page__body .cylo-step__t{display:block;font-family:var(--anton);font-weight:400;font-size:1.45rem;line-height:1.05;letter-spacing:.005em;color:var(--ink);margin:.1rem 0 .55rem}
.cylo-product.cylo-page .sec__inner.cylo-page__body .cylo-step__m{display:block;margin-top:.65rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}

/* plain-English callout */
/* Quiet panel rather than an orange wash: the tint fought the page and shouted louder than the
   text it was meant to set apart. A faint lift off the background plus a hairline is enough to
   read as "aside", and the radius matches the product cards so the site holds together. */
.cylo-product.cylo-page .sec__inner.cylo-page__body .note{background:#ffffff;border:1px solid rgba(0,0,0,.10);border-radius:12px;padding:1.5rem 1.7rem;margin:2.6rem 0}
.cylo-product.cylo-page .sec__inner.cylo-page__body .note p{font-size:1.1rem}
.cylo-product.cylo-page .sec__inner.cylo-page__body .note p:last-child{margin-bottom:0}
.cylo-product.cylo-page .sec__inner.cylo-page__body .note b,.cylo-product.cylo-page .sec__inner.cylo-page__body .note strong{color:var(--orange)}
.cylo-product.cylo-page .sec__inner.cylo-page__body hr{border:0;border-top:1px solid var(--hair);margin:3.5rem 0}
.cylo-product.cylo-page .sec__inner.cylo-page__body pre{background:#0c0c0c;border:1px solid var(--hair);border-left:3px solid var(--orange);border-radius:6px;padding:1.4rem 1.6rem;margin:1.8rem 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.7;color:var(--soft);white-space:pre-wrap;overflow-wrap:break-word}
.cylo-page__updated{font-size:.85rem;color:var(--mute);font-style:italic;margin-top:3.5rem}

/* password gate (Bonus Ball) styled to match the dark theme */
.cylo-product.cylo-page .sec__inner.cylo-page__body .post-password-form{max-width:32rem;margin:1.5rem 0}
.cylo-product.cylo-page .sec__inner.cylo-page__body .post-password-form label{display:block;color:var(--soft);font-size:1.1rem}
.cylo-product.cylo-page .sec__inner.cylo-page__body .post-password-form input[type=password]{display:block;width:100%;margin:.7rem 0 1.1rem;padding:.9rem 1rem;background:#0c0c0c;border:1px solid var(--hair);border-radius:6px;color:var(--ink);font-size:1.05rem;box-sizing:border-box}
.cylo-product.cylo-page .sec__inner.cylo-page__body .post-password-form input[type=password]:focus{outline:none;border-color:var(--orange)}
.cylo-product.cylo-page .sec__inner.cylo-page__body .post-password-form input[type=submit]{padding:.9rem 1.8rem;background:var(--orange);color:#1a0f06;border:0;border-radius:6px;font-weight:700;font-size:1rem;cursor:pointer;font-family:inherit}
.cylo-product.cylo-page .sec__inner.cylo-page__body .post-password-form input[type=submit]:hover{filter:brightness(1.08)}

.cylo-product.cylo-page .sec__inner.cylo-page__body .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.8rem 0 2.6rem;border:1px solid rgba(0,0,0,.10);border-radius:12px;background:#fff}
.cylo-product.cylo-page .sec__inner.cylo-page__body table{width:100%;border-collapse:collapse;font-family:var(--san);font-size:1rem;line-height:1.65;min-width:40rem}
.cylo-product.cylo-page .sec__inner.cylo-page__body th{text-align:left;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:1rem 1.1rem;border-bottom:1px solid rgba(0,0,0,.14);white-space:nowrap}
.cylo-product.cylo-page .sec__inner.cylo-page__body td{color:var(--soft);padding:.95rem 1.1rem;border-bottom:1px solid rgba(0,0,0,.07);vertical-align:top}
.cylo-product.cylo-page .sec__inner.cylo-page__body tr:last-child td{border-bottom:0}
.cylo-product.cylo-page .sec__inner.cylo-page__body td:first-child{color:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88rem;overflow-wrap:anywhere}
.cylo-product.cylo-page .sec__inner.cylo-page__body td:nth-child(2){color:var(--mute);font-size:.95rem}

/* ============================================================================
   ABOUT [STRAIN] - the strain write-up inside a tab on the product page.

   Owner, 2026-09-07: "show all strain info ... the EXACT same look and design we
   have but all within a tab."

   So it reuses the strain pages' own rules rather than restating them: the section
   carries .cylo-product.cylo-page and .cylo-page__body, which is exactly the prefix
   that typography is written against. Only the container and the head are set here,
   and they take the same tokens the strain page hero takes.
   ============================================================================ */
.cylo-product .sec--tabarticle .sec__inner.cyc-straintab{
  width:min(100% - 2 * var(--page-gutter), var(--content));
  max-width:none;
  margin-inline:auto;
}
.cylo-product.cylo-page .sec__inner.cylo-page__body .cyc-straintab__head{margin:0 0 2.2rem}
/* THE BIG TITLE. One definition, used by the About [strain] tab's strain name and
   by a Heading 1 in the product description - so "Psilocybe cubensis" typed into
   the description looks exactly like "White Golden Teacher" does in the tab. */
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc h1,
.cylo-product.cylo-page .sec__inner.cylo-page__body h2.cyc-straintab__h{
  font-family:var(--anton);font-weight:400;
  font-size:var(--hero-h1-size);line-height:var(--hero-h1-line);letter-spacing:var(--hero-h1-track);
  color:var(--ink);margin:0 0 var(--hero-h1-gap);max-width:none;
}
.cylo-product.cylo-page .sec__inner.cylo-page__body p.cyc-straintab__lede{
  font-family:var(--san);font-size:var(--hero-lede-size);line-height:var(--hero-lede-line);
  color:var(--hero-lede-color);margin:0;max-width:none;
}
.cylo-product.cylo-page .sec__inner.cylo-page__body p.cyc-straintab__more{margin:1.1rem 0 0;font-size:var(--fs-small)}
.cylo-product.cylo-page .sec__inner.cylo-page__body p.cyc-straintab__empty{color:var(--mute);text-align:center;margin:2.5rem 0}
/* The tab is inside the product page, which has no strain nav of its own. */
.cyc-straintab .strain-nav{display:none}

/* ============================================================================
   CONTENT-PAGE PALETTE. Moved out of template-cylocybe-page.php's inline <style>
   on 2026-09-07, unchanged, because the About [strain] tab needs it as well and
   that template never runs on a product page. Without it the tab inherited the
   product page's dark-background palette and drew the orange bullets in blue.
   ============================================================================ */
.cylo-product.cylo-page{--ink:#15171c;--soft:#4b4753;--mute:#736e7d;--orange:#b85c00;--orange-soft:rgba(184,92,0,.35);--hair:rgba(0,0,0,.12);--panel:#ffffff;--hero-lede-color:#4b4753}
/* The tab is an article, not a product section: it carries the vertical rhythm
   .sec used to give it.

   Keyed on .sec--tabarticle, not .sec--strain. These three rules - the container width, this
   padding, and the photo float below - are what make a tab read as an article rather than a
   raw block of text, and when the "Ps. cubensis" tab arrived on 2026-09-08 it inherited the
   typography (which is written against .cylo-product.cylo-page) but none of this, so it came
   out with the wrong spacing. Both sections carry .sec--tabarticle now; any future tab of this
   kind gets the whole layout by adding that one class instead of by three more selectors here
   that would have to be kept in step by hand. */
.cylo-product .sec--tabarticle{padding:5.25vh 0}

/* ============================================================================
   STRAIN PHOTO. Shared by the strain pages and the About [strain] tab, so it
   lives here rather than in the page stylesheet, which products never load.
   Same 4/5 box, same 3px black frame and 16px corner as the buy card beside it.
   ============================================================================ */
.cylo-page--shot .cylo-page__shot,
.cyc-straintab .cylo-page__shot,
.cyc-descsec .cyc-descshot{
  aspect-ratio:4/5;
  overflow:hidden;
  border:3px solid #000;
  border-radius:16px;
  box-sizing:border-box;
}
.cylo-page--shot .cylo-page__shot img,
.cyc-straintab .cylo-page__shot img,
.cyc-descsec .cyc-descshot img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%;border-radius:0;
}

/* In the tab the photo floats beside the write-up, exactly as it does on the page. */
@media (min-width:1100px){
  .cylo-product .sec--tabarticle .cyc-straintab .cylo-page__shot{
    float:right;
    clear:right;
    width:var(--rail);
    max-width:var(--rail);
    margin:.4rem 0 var(--rail-gap) var(--rail-gap);
  }
}

/* ============================================================================
   DESCRIPTION TAB - the same article treatment as About [strain].

   Owner, 2026-09-07: "make sure the description tab has the same sizing as the
   about for strains ... no point in the about tab looking great and the main
   description part looking differently."

   The markup now carries .cylo-product.cylo-page and .cylo-page__body, so the
   typography is the SAME rules - not a second copy. All that is set here is the
   container, and the neutralising of .cylo-desc's own widths, which were capping
   and centring paragraphs at 46rem while the About tab ran full width.
   ============================================================================ */
.cylo-product .cyc-descsec{padding:5.25vh 0}
.cylo-product .cyc-descsec .sec__inner.cylo-desc{
  width:min(100% - 2 * var(--page-gutter), var(--content));
  max-width:none;
  margin-inline:auto;
}
/* .cylo-desc carried its own 4.5vh, and #cylo-content .cylo-desc another 2.4vh on top
   of the section's 5.25vh - three paddings stacked, so the description started roughly
   7vh lower than the About tab and the photo with it. The section owns the spacing now,
   at ID weight because that is what the 2.4vh rule uses. */
.cylo-product #cylo-content .cyc-descsec .sec__inner.cylo-desc{padding:0}
.cylo-product.cylo-page .sec__inner.cylo-page__body.cylo-desc > *{max-width:none;margin-inline:0}
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc > p{max-width:none!important;margin-left:0!important;margin-right:0!important}

/* The photo beside the description copy, same box and float as everywhere else. */
@media (min-width:1100px){
  .cylo-product .cyc-descsec .cyc-descshot{
    float:right;
    clear:right;
    width:var(--rail);
    max-width:var(--rail);
    margin:.4rem 0 var(--rail-gap) var(--rail-gap);
  }
}

/* The description's own rules are written with an ID (#cylo-content), which outranks
   any number of classes - that is why the copy stayed capped at 46rem and the lists
   kept their grey discs on top of the article's orange dots. Same weight, same place. */
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc > *{max-width:none;margin-inline:0}
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc > h4{max-width:none;margin-inline:0}
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc ul{list-style:none;padding-left:0;margin:0 0 2rem}
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc ol{padding-left:0;margin:2.6rem 0}
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc li{margin:0;line-height:1.7}
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc li::marker{content:"";color:transparent}

/* Descendants, not children: the description's own HTML has a wrapper of its own, so
   "> *" reached only that wrapper and the headings inside kept their 46rem cap and
   auto margins. Every block in there fills the column now, like the About tab. */
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc h2,
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc h3,
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc h4,
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc p,
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc ul,
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc ol,
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc li,
.cylo-product #cylo-content .sec__inner.cylo-page__body.cylo-desc blockquote{max-width:none;margin-inline:0}

/* ============================================================================
   SAVED-PASSWORD NOTE on the two sign-in forms - checkout and /account.
   Rendered by mu-plugins/cyc-domain-note.php. On the ladder, so it follows the
   site if the palette or type scale changes.
   ============================================================================ */
.cyc-domain-note{
  margin:0 0 1.1rem;
  padding:.8rem 1rem;
  border-left:3px solid var(--orange);
  background:rgba(184,92,0,.07);
  border-radius:0 8px 8px 0;
  font-family:var(--san);
  font-size:var(--fs-small);
  line-height:1.55;
  color:var(--soft);
}

/* ============================================================================
   GLOVES ADD-ON picker, in the add-to-cart form on grow kits, spawn and spores.
   Rendered by snippet 54 "Gloves add-on".

   It uses the theme's own .cysw__grid / .cysw__pill classes, so the look comes
   from mu-plugins/cylo-square-pills.php and it matches the variety and quantity
   rows exactly - there is deliberately no bordered panel of its own here.

   The width rule is the load-bearing one. .woocommerce-variation-add-to-cart is
   display:flex;flex-wrap:wrap, so as an ordinary flex item this block sat beside
   the quantity stepper and pushed Add to Basket onto a line of its own. Taking a
   full row puts the stepper and the button back together underneath it.
   ============================================================================ */
.cylo-product .woocommerce-variation-add-to-cart .cyc-gloves,
.cylo-product form.cart .cyc-gloves{
  flex:0 0 100%;
  width:100%;
}
.cyc-gloves{ margin:0 0 .1rem; }
.cyc-gloves__label{
  display:block;
  font-family:var(--san);
  font-size:var(--fs-small);
  line-height:1.4;
  color:var(--soft);
  margin:0 0 .55rem;
}
/* Visually hidden, but it is what posts and what the add-to-cart hook reads. */
.cyc-gloves__native{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.cyc-gloves__grid{ margin:0; }

/* The Advanced toggle on spore pages. It borrows .cysw__more, the same underlined text control
   the "Show out of stock products" link uses, so it reads as part of the page rather than a new
   kind of button. Text only - no chevron, no arrow, no plus. */
.cyc-gloves__toggle{
  display:inline-block;
  margin:0 0 .1rem;
  cursor:pointer;
}
.cyc-gloves__body[hidden]{ display:none !important; }


/* ============================================================================
   SOURCED QUOTATION. Added 2026-09-08 for the Ps. Cubensis tab, which is built
   out of quotations rather than written prose - owner: "if we are quoting from
   reputable sources then i do not need to worry about reputational damage as it
   will be backed up by clicking on the text to go straight the the exact quote".

   The cite line is the load-bearing part: every quote carries a link with a
   #:~:text= fragment, so a browser scrolls the source page to that exact
   sentence and highlights it. Not to a page - to the sentence.
   ============================================================================ */
.cylo-product.cylo-page .sec__inner.cylo-page__body .cyc-quote,
.cylo-page .cylo-page__body .cyc-quote{
  margin:0 0 1.6rem;
  padding:.1rem 0 .1rem 1.15rem;
  border-left:3px solid var(--orange-soft);
}
.cylo-product.cylo-page .sec__inner.cylo-page__body .cyc-quote p,
.cylo-page .cylo-page__body .cyc-quote p{
  color:var(--ink);
  margin:0 0 .45rem;
}
.cylo-product.cylo-page .sec__inner.cylo-page__body .cyc-quote cite,
.cylo-page .cylo-page__body .cyc-quote cite{
  display:block;
  font-style:normal;
  font-size:var(--fs-small);
  color:var(--mute);
}
.cyc-quote cite a{ color:var(--mute);text-decoration:underline;text-underline-offset:2px }
.cyc-quote cite a:hover{ color:var(--orange) }

/* The molecule diagram sits inline in the text, not floated - it is small and
   reads as part of the sentence around it. */
.cyc-molecule{ margin:1.6rem 0 .4rem;max-width:300px }
.cyc-molecule img{ display:block;width:100%;height:auto;border:0;border-radius:0 }

/* The plain-English gloss that follows a quotation. Owner, 2026-09-08: "give a simple
   definition for what each of the things mean - as it is gobblegook - keep what we have and
   underneath, try to explain it." So the quotation stays exactly as the source wrote it and
   the translation sits under it, clearly ours and clearly separate. */
.cylo-product.cylo-page .sec__inner.cylo-page__body .cyc-plain,
.cylo-page .cylo-page__body .cyc-plain{
  margin:-.9rem 0 1.7rem;
  padding:0 0 0 1.15rem;
  border-left:3px solid transparent;
  font-size:var(--fs-small);
  line-height:1.62;
  color:var(--mute);
}
.cyc-plain b{ color:var(--soft);font-weight:600 }

/* The Ps. cubensis tab's top-right image is a molecule, not a mushroom. It uses the same slot,
   the same frame and the same float as a strain photo - owner: "EXACTLY how the image is
   situated for the about tab" - but a diagram must not be cropped to fill a 4:5 box the way a
   photo can, so it is contained inside the frame on white instead of covering it. */
.cylo-product .sec--cubensis .cyc-straintab .cylo-page__shotframe{
  background:#fff;
  padding:1.5rem;
}
.cylo-product .sec--cubensis .cyc-straintab .cylo-page__shot img{
  object-fit:contain;
  object-position:center;
}

/* ============================================================================
   SHIPPING & DISPATCH tab. Owner, 2026-09-08: "have the current text over on
   the left and another column on the right which says the Countries we ship to
   and lists them, and then lists the countries we don't ship to."

   The lists are generated from WooCommerce's own ship-to setting, so they are
   239 and 11 today and whatever the shop says tomorrow - the page cannot drift
   from the checkout. 239 names is a lot of vertical space, so the ship-to list
   runs in narrow columns; the refusal list is short and stays one column.
   ============================================================================ */
.cyc-ship{
  display:grid;
  grid-template-columns:1fr;
  gap:2.4rem;
  align-items:start;
}
@media (min-width:900px){
  .cyc-ship{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem }
}
.cyc-ship__main{ min-width:0 }
.cyc-ship__where{ min-width:0 }
.cyc-ship__where h3:first-child{ margin-top:0 }
.cyc-ship__count{
  font-size:var(--fs-small);
  color:var(--mute);
  margin:0 0 .8rem;
}
.cyc-ship__list{
  margin:0 0 1.8rem;
  padding:0;
  list-style:none;
  columns:2;
  column-gap:1.6rem;
  font-size:var(--fs-small);
  line-height:1.65;
  color:var(--soft);
}
.cyc-ship__list li{
  padding:0;
  margin:0;
  break-inside:avoid;
}
/* No bullet dot: at this count the dots become the loudest thing on the page. */
.cyc-ship__list li::before{ content:none }
.cyc-ship__list--no{
  columns:1;
  color:var(--ink);
}
@media (max-width:520px){
  .cyc-ship__list{ columns:1 }
}

/* The syringe video inside the Guide tab. .gal__video is position:absolute;inset:0 because in
   the gallery it fills the image stage; in an article it needs a box of its own, so the wrapper
   supplies a 16:9 one and the facade fills that instead. Everything else - poster, play button,
   privacy panel - is the gallery's own CSS, untouched. */
.cylo-product .cyc-guidevid{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  max-width:52rem;
  margin:0 0 1.2rem;
  border-radius:12px;
  overflow:hidden;
  background:#100d16;
}

/* A captioned shot. The figure stops being the frame - an inner span takes that over - so the
   caption can sit underneath it instead of being clipped by the frame's overflow:hidden. Only
   images that actually carry a caption get this class, so the strain photos keep the original
   single-element markup exactly as it was. */
.cyc-straintab .cylo-page__shot--cap{
  aspect-ratio:auto;
  overflow:visible;
  border:0;
  border-radius:0;
}
.cyc-straintab .cylo-page__shot--cap .cylo-page__shotframe{
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  border:3px solid #000;
  border-radius:16px;
  box-sizing:border-box;
}
.cyc-straintab .cylo-page__shot--cap .cy-cap{
  margin-top:.65rem;
  font-size:var(--fs-micro,.78rem);
  line-height:1.5;
  color:var(--mute);
}

/* Wide tables scroll inside their own box rather than pushing the page sideways. The article
   table rule sets min-width:40rem, which is right for legibility and wrong for a phone. */
.cyc-tablewrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 0 1.8rem;
}
/* The quotation block is written against the product tab; the content pages need it too, now
   that the shipping page quotes Royal Mail. Same look, one definition. */
.cylo-page .cylo-page__body .cyc-quote cite a{ color:var(--mute);text-decoration:underline;text-underline-offset:2px }
.cylo-page .cylo-page__body .cyc-quote cite a:hover{ color:var(--orange) }

/* The Shipping & Dispatch left column reads as an article, but it is a narrow column and the
   .cylo-desc rhythm it inherits was written for the full-width product description: 1.9em above
   every h3, and body leading to match. In half the width that reads as holes in the page rather
   than breathing room, so the whole column gets its own tighter rhythm here. */
.cylo-product .cyc-ship__main{ line-height:1.55 }
.cylo-product .cyc-ship__main > p{ margin:0 0 .75rem }
.cylo-product .cyc-ship__main > h3{ margin:1.6rem 0 .45rem; line-height:1.25 }
.cylo-product .cyc-ship__main > h3:first-child{ margin-top:0 }
.cylo-product .cyc-ship__main > ul{ margin:0 0 1rem; padding-left:1.2em }
.cylo-product .cyc-ship__main > ul > li{ margin:0 0 .25em; line-height:1.5 }
/* A source link belongs to the thing above it, not floating between two blocks. */
.cylo-product .cyc-ship__main > p.cyc-ship__src{
  margin:-.35rem 0 1.1rem;
  font-size:var(--fs-small);
  line-height:1.45;
}
/* The quotation component, unscoped, so it looks the same wherever it is used. The earlier
   definitions were tied to the content-page body and did not reach this column. */
.cyc-quote{
  margin:0 0 1rem;
  padding:.1rem 0 .1rem 1.05rem;
  border-left:3px solid var(--orange-soft,rgba(184,92,0,.35));
}
.cyc-quote > p{ margin:0 0 .35rem }
.cyc-quote > cite{
  display:block;
  font-style:normal;
  font-size:var(--fs-small);
  line-height:1.45;
  color:var(--mute);
}

/* Store reviews under the shop grid. Rendered by woocommerce/archive-product.php on the shop
   page only. */
.cyc-shopreviews{ border-top:1px solid var(--hair,rgba(0,0,0,.12)) }
.cyc-shopreviews__h{
  font-family:var(--anton,"Cylocybe Display",Impact,sans-serif);
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.15;
  color:var(--ink);
  margin:0 0 1.4rem;
}
.cyc-shopreviews__all{ margin:1.4rem 0 0;font-size:var(--fs-small) }
.cyc-shopreviews__all a{ color:var(--orange);text-decoration:underline;text-underline-offset:2px }