/*
Theme Name: Sonoran Silk
Theme URI: https://example.com/eightfold
Author: Eightfold Studio
Description: All-in-one specimen-catalog WooCommerce theme for invert vendors — data layer and Sonoran Silk skin bundled. Install WooCommerce, activate this theme, done.
Version: 0.30.23
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: eightfold
*/

/* =========================================================
   1. TOKENS — the entire skin. Child themes override these.
   ======================================================= */
:root{
  --ef-bg:#0b0c10;
  --ef-bg-2:#101218;
  --ef-panel:rgba(255,255,255,.045);
  --ef-panel-2:rgba(255,255,255,.08);
  --ef-line:rgba(255,255,255,.1);
  --ef-line-2:rgba(255,255,255,.18);
  --ef-text:#edeff4;
  --ef-dim:#99a0af;
  /* Accent trio — the brand gradient & spider colors derive from these. */
  --ef-a1:#6b7cff;
  --ef-a2:#7d6bff;
  --ef-a3:#a75cff;
  --ef-grad:linear-gradient(100deg,var(--ef-a1),var(--ef-a2) 45%,var(--ef-a3));
  /* CTA roles — each call-to-action type gets its own accent so buttons stop
     competing. All overridable in the Customizer; blank falls back to these.
       buy    = reserve / add-to-cart (the primary pink-purple brand gradient)
       learn  = care guides, downloads, info (teal-cyan, distinct but on-palette)
       accent = secondary emphasis actions                                     */
  --ef-cta-buy:var(--ef-grad);
  --ef-cta-learn-1:#2fd8c3;
  --ef-cta-learn-2:#37a0e6;
  --ef-cta-learn:linear-gradient(100deg,var(--ef-cta-learn-1),var(--ef-cta-learn-2));
  /* upsell = cart enclosure "add to box" — distinct from Buy so it doesn't
     blend with Reserve buttons. Warm amber-gold by default; overridable. */
  --ef-cta-upsell-1:#ff9d4f;
  --ef-cta-upsell-2:#ff5ca0;
  --ef-cta-upsell:linear-gradient(110deg,var(--ef-cta-upsell-1),var(--ef-cta-upsell-2));
  /* Status */
  --ef-ok:#3fd6a6; --ef-warn:#ffb84f; --ef-hot:#ff7ab8;
  /* Type */
  --ef-display:'Unbounded',system-ui,sans-serif;
  --ef-ui:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --ef-latin:'Instrument Serif',Georgia,serif;
  /* Shape & rhythm */
  --ef-r:18px;
  --ef-pad:clamp(1.1rem,4vw,2.5rem);
  --ef-maxw:1180px;
}

/* =========================================================
   2. BASE
   ======================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ef-bg);color:var(--ef-text);font-family:var(--ef-ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ef-a2);color:#fff}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ef-a2)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ef-a2);outline-offset:3px;border-radius:6px}
.ef-wrap{max-width:var(--ef-maxw);margin:0 auto;padding-inline:var(--ef-pad)}
h1,h2,h3{font-family:var(--ef-display);letter-spacing:-.01em;line-height:1.06;text-wrap:balance}
.ef-latin,.ef-plate .woocommerce-loop-product__title{font-family:var(--ef-latin);font-style:italic;letter-spacing:0}
.ef-grad-text{background:var(--ef-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ef-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--ef-dim)}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;width:1px;height:1px;overflow:hidden}

/* Optional aurora backdrop — child enables via body class "ef-aurora". */
body.ef-aurora{background:
  radial-gradient(60% 45% at 12% 0%,color-mix(in srgb,var(--ef-a1) 14%,transparent),transparent 60%),
  radial-gradient(50% 40% at 88% 8%,color-mix(in srgb,var(--ef-a3) 12%,transparent),transparent 60%),
  radial-gradient(70% 55% at 50% 110%,color-mix(in srgb,var(--ef-a2) 9%,transparent),transparent 60%),
  var(--ef-bg)}

/* =========================================================
   3. TICKER (markup printed by the core plugin)
   ======================================================= */
.ef-ticker{background:linear-gradient(90deg,color-mix(in srgb,var(--ef-warn) 16%,transparent),color-mix(in srgb,var(--ef-warn) 10%,transparent));border-bottom:1px solid color-mix(in srgb,var(--ef-warn) 30%,transparent);overflow:hidden;white-space:nowrap;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ef-warn)}
.ef-ticker-track{display:inline-flex;gap:3rem;padding:.5rem 0;animation:ef-tick 26s linear infinite;will-change:transform}
.ef-ticker span{display:inline-flex;gap:.55rem;align-items:center}
.ef-ticker b{color:color-mix(in srgb,var(--ef-warn) 60%,#fff)}
@keyframes ef-tick{to{transform:translateX(-50%)}}

/* =========================================================
   4. HEADER / NAV
   ======================================================= */
.ef-nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ef-bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.ef-nav.scrolled{border-bottom-color:var(--ef-line)}
.ef-nav-in{max-width:var(--ef-maxw);margin:0 auto;padding:.85rem var(--ef-pad);display:flex;align-items:center;gap:1.4rem}
.ef-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--ef-display);font-weight:800;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase}
.ef-brand img{max-height:34px;width:auto}
.ef-nav ul{display:none;gap:1.6rem;margin-left:auto;list-style:none}
.ef-nav ul a{color:var(--ef-dim);font-size:.88rem;font-weight:500}
.ef-nav ul a:hover{color:var(--ef-text)}
.ef-cart{margin-left:auto;display:flex;align-items:center;gap:.5rem;border:1px solid var(--ef-line-2);border-radius:99px;padding:.5rem 1rem;font-weight:700;font-size:.82rem;transition:border-color .15s,background .15s}
.ef-cart:hover{border-color:var(--ef-a2);background:color-mix(in srgb,var(--ef-a2) 10%,transparent);color:var(--ef-text)}
.ef-count{background:var(--ef-grad);color:#fff;font-size:.7rem;font-weight:700;min-width:1.3rem;height:1.3rem;border-radius:99px;display:grid;place-items:center;padding-inline:.3rem}
@media(min-width:820px){.ef-nav ul{display:flex}.ef-cart{margin-left:0}}

/* =========================================================
   5. HERO & SECTIONS
   ======================================================= */
.ef-hero{padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,5vw,4rem)}
.ef-hero-grid{display:grid;gap:2.5rem;align-items:center;grid-template-columns:1fr}
.ef-hero h1{font-size:clamp(2rem,6.4vw,4.1rem);font-weight:800;margin:1rem 0 1.2rem;max-width:15ch}
.ef-lede{color:var(--ef-dim);font-size:clamp(.98rem,2.2vw,1.12rem);max-width:52ch;margin-bottom:1.9rem}
.ef-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2rem}
.ef-stats{display:flex;flex-wrap:wrap;gap:.6rem}
.ef-chipstat{border:1px solid var(--ef-line);background:var(--ef-panel);border-radius:99px;padding:.45rem 1rem;font-size:.8rem;color:var(--ef-dim)}
.ef-chipstat b{color:var(--ef-text)}
.ef-stage{position:relative;display:grid;place-items:center;min-height:300px}
.ef-stage svg{width:min(74vw,400px);height:auto;filter:drop-shadow(0 0 34px color-mix(in srgb,var(--ef-a2) 35%,transparent))}
.ef-float{animation:ef-float 7s ease-in-out infinite}
@keyframes ef-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(min-width:900px){.ef-hero-grid{grid-template-columns:1.05fr .95fr}}

.ef-section{padding:clamp(2.8rem,7vw,5rem) 0}
.ef-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem 1.3rem;margin-bottom:1.7rem}
.ef-sec-head h2{font-size:clamp(1.45rem,4vw,2.15rem);font-weight:800}
.ef-sec-tag{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ef-dim);border:1px solid var(--ef-line);border-radius:99px;padding:.32rem .85rem}
.ef-sec-tag b{color:var(--ef-text)}
.ef-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.ef-reveal.on{opacity:1;transform:none}

/* =========================================================
   6. BUTTONS (theme + WooCommerce)
   ======================================================= */
.ef-btn,.woocommerce .button,.woocommerce button.button,.woocommerce a.button,
.woocommerce #respond input#submit,.woocommerce input.button{
  font-family:var(--ef-ui);font-weight:700;font-size:.92rem;padding:.85rem 1.5rem;border-radius:99px;
  display:inline-flex;align-items:center;gap:.5rem;line-height:1.2;border:0;cursor:pointer;
  background:var(--ef-panel-2);color:var(--ef-text);transition:transform .15s,filter .15s}
.ef-btn:active{transform:scale(.97)}
.ef-btn-primary,.woocommerce .button.alt,.woocommerce button.button.alt,
.woocommerce a.button.alt,.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,.woocommerce #place_order,
.woocommerce a.button.add_to_cart_button{
  background:var(--ef-grad);color:#fff;box-shadow:0 8px 30px -8px color-mix(in srgb,var(--ef-a2) 55%,transparent)}
.ef-btn-primary:hover,.woocommerce .button.alt:hover,.woocommerce a.button.add_to_cart_button:hover{filter:brightness(1.12);color:#fff}
.ef-btn-line{border:1px solid var(--ef-line-2);background:transparent}
.ef-btn-line:hover{border-color:var(--ef-dim);color:var(--ef-text)}

/* =========================================================
   7. FILTER CHIPS + SPECIMEN PLATES (shop archive)
   ======================================================= */
.ef-chips{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.6rem}
.ef-filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:1.6rem}
.ef-chips{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:0}
.ef-chip{border:1px solid var(--ef-line);background:var(--ef-panel);color:var(--ef-dim);font-weight:700;font-size:.8rem;padding:.5rem 1.05rem;border-radius:99px;transition:all .15s}
.ef-chip:hover{color:var(--ef-text);border-color:var(--ef-line-2)}
.ef-chip[aria-pressed="true"]{background:var(--ef-grad);border-color:transparent;color:#fff}
.ef-chip--sale[aria-pressed="true"]{background:var(--ef-ok);border-color:transparent;color:#0b0c10}
/* subtle separator between filter groups */
.ef-chip-div{width:1px;height:1.4rem;background:var(--ef-line-2);opacity:.5;margin:0 .15rem}
@media (max-width:640px){ .ef-chip-div{display:none} }
/* species selector — custom themed dropdown (native <select> is the fallback) */
.ef-species{position:relative;display:inline-flex;align-items:center}
.ef-species-sel{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}   /* kept for no-JS + value store */
.ef-select{position:relative;display:inline-block}
.ef-select-trigger{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--ef-ui);font-weight:700;font-size:.8rem;color:var(--ef-text);background:var(--ef-panel);border:1px solid var(--ef-line);border-radius:99px;padding:.55rem 1.1rem;cursor:pointer;transition:border-color .15s,background .15s}
.ef-select-trigger:hover{border-color:var(--ef-line-2)}
.ef-select-trigger.is-set{background:var(--ef-grad);border-color:transparent;color:#fff}
.ef-select-trigger[aria-expanded="true"]{border-color:var(--ef-a2)}
.ef-select-caret{width:.48rem;height:.48rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.75;transition:transform .18s}
.ef-select-trigger[aria-expanded="true"] .ef-select-caret{transform:translateY(2px) rotate(-135deg)}
.ef-select-panel{position:absolute;z-index:60;top:calc(100% + .55rem);left:0;min-width:240px;max-height:min(60vh,360px);overflow:auto;padding:.4rem;border-radius:16px;border:1px solid var(--ef-line-2);background:linear-gradient(180deg,#1b1731,#141020);box-shadow:0 26px 64px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);animation:efpop .14s ease}
@keyframes efpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.ef-select-panel::-webkit-scrollbar{width:10px}
.ef-select-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;border:3px solid transparent;background-clip:content-box}
.ef-opt{display:block;width:100%;text-align:left;font-family:var(--ef-ui);font-weight:600;font-size:.86rem;color:var(--ef-text);background:none;border:0;border-radius:10px;padding:.6rem .8rem;cursor:pointer;transition:background .12s,color .12s}
.ef-opt:hover{background:rgba(255,255,255,.07)}
.ef-opt[aria-selected="true"]{background:var(--ef-grad);color:#fff}
.ef-opt-group{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ef-dim);padding:.65rem .8rem .25rem}
.ef-opt-group:first-child{padding-top:.3rem}
/* clear button appears only when a filter is active */
.ef-clear{font-family:var(--ef-ui);font-weight:700;font-size:.8rem;color:var(--ef-dim);background:none;border:0;cursor:pointer;padding:.5rem .4rem;transition:color .15s}
.ef-clear:hover{color:var(--ef-text)}

ul.products{display:grid!important;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));list-style:none;margin:0!important;padding:0!important}
ul.products li.product{width:auto!important;margin:0!important;float:none!important}
li.product.ef-hide{display:none}
.ef-plate{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--ef-line);border-radius:var(--ef-r);background:linear-gradient(180deg,var(--ef-panel),rgba(255,255,255,.02));overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
li.product:hover .ef-plate{transform:translateY(-4px);border-color:var(--ef-line-2);box-shadow:0 18px 44px -18px color-mix(in srgb,var(--ef-a2) 35%,transparent)}
.ef-art{position:relative;aspect-ratio:16/11;display:grid;place-items:center;overflow:hidden;color:var(--ef-dim)}
.ef-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ef-art .ef-spec{width:60%;height:auto;transition:transform .35s}
li.product:hover .ef-art .ef-spec{transform:scale(1.07) rotate(-2deg)}
.ef-ringmark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.7}
.ef-catno{position:absolute;left:.85rem;top:.8rem;font-size:.64rem;font-weight:700;letter-spacing:.2em;color:var(--ef-dim);z-index:2}
.ef-flag{position:absolute;right:.85rem;top:.8rem;z-index:2;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.26rem .55rem;border-radius:6px;background:color-mix(in srgb,var(--ef-bg) 60%,transparent);border:1px solid var(--ef-line);color:var(--ef-dim);backdrop-filter:blur(4px)}
.ef-soldveil{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:color-mix(in srgb,var(--ef-bg) 66%,transparent);backdrop-filter:blur(2px)}
.ef-soldveil span{font-family:var(--ef-display);font-size:.7rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;border:1px solid var(--ef-line-2);border-radius:99px;padding:.5rem 1.1rem}
/* Per-colorway auras behind placeholder spiders */
.ef-aura-brand{background:radial-gradient(90% 90% at 50% 30%,color-mix(in srgb,var(--ef-a2) 18%,transparent),transparent 65%)}
.ef-aura-gbb{background:radial-gradient(90% 90% at 50% 30%,rgba(47,212,196,.16),transparent 65%)}
.ef-aura-chal{background:radial-gradient(90% 90% at 50% 30%,rgba(240,212,154,.14),transparent 65%)}
.ef-aura-div{background:radial-gradient(90% 90% at 50% 30%,rgba(122,92,255,.18),transparent 65%)}
.ef-aura-vers{background:radial-gradient(90% 90% at 50% 30%,rgba(180,79,255,.16),transparent 65%)}
.ef-aura-pul{background:radial-gradient(90% 90% at 50% 30%,rgba(140,150,175,.12),transparent 65%)}
.ef-aura-ham{background:radial-gradient(90% 90% at 50% 30%,rgba(255,106,47,.15),transparent 65%)}
.ef-aura-met{background:radial-gradient(90% 90% at 50% 30%,rgba(79,124,255,.2),transparent 65%)}
.ef-aura-alb{background:radial-gradient(90% 90% at 50% 30%,rgba(224,176,112,.14),transparent 65%)}

.ef-plate-body{padding:1.05rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.ef-plate .woocommerce-loop-product__title{font-size:1.32rem;line-height:1.12;font-weight:400}
.ef-common{color:var(--ef-dim);font-size:.84rem;margin-top:-.3rem}
.ef-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.15rem}
.ef-pill{font-size:.68rem;font-weight:700;letter-spacing:.04em;border:1px solid var(--ef-line);color:var(--ef-dim);padding:.24rem .6rem;border-radius:99px;white-space:nowrap}
.ef-pill--f{border-color:color-mix(in srgb,var(--ef-ok) 50%,transparent);color:var(--ef-ok)}
.ef-pill--m{color:#5cc8ff;border-color:color-mix(in srgb,#5cc8ff 45%,transparent)}
.ef-pill--ow{border-color:color-mix(in srgb,var(--ef-hot) 50%,transparent);color:var(--ef-hot)}
/* Life-stage pill: a touch brighter and lightly filled so the stage (Sling/
   Juvenile/Sub-adult/Adult) reads at a glance, without a loud colour that would
   compete with the green/purple availability pills. */
.ef-pill--stage{color:var(--ef-text);border-color:color-mix(in srgb,var(--ef-text) 24%,transparent);background:color-mix(in srgb,var(--ef-text) 8%,transparent);font-weight:800}
.ef-plate-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-top:.7rem;border-top:1px solid var(--ef-line)}
.ef-plate-foot .price,.ef-price{font-weight:700;font-size:1.18rem;font-variant-numeric:tabular-nums;color:var(--ef-text)}
.ef-plate-foot .price del{color:var(--ef-dim);font-size:.85em;margin-right:.35rem}
.ef-stock{font-size:.72rem;font-weight:700;letter-spacing:.06em}
.ef-stock--in{color:var(--ef-ok)}.ef-stock--low{color:var(--ef-warn)}.ef-stock--out{color:var(--ef-dim)}
.ef-plate .button{padding:.5rem .95rem;font-size:.78rem}
.ef-plate .added_to_cart{font-size:.74rem;color:var(--ef-a2);font-weight:700;margin-left:.4rem}

/* =========================================================
   8. SINGLE SPECIMEN
   ======================================================= */
.ef-single{display:grid;gap:2rem;grid-template-columns:1fr;padding-top:2.5rem}
.ef-single .ef-art{border:1px solid var(--ef-line);border-radius:var(--ef-r);aspect-ratio:16/12}
.ef-single .ef-art .ef-spec{width:46%}
.ef-single h1{font-family:var(--ef-latin);font-style:italic;font-weight:400;font-size:clamp(1.9rem,5vw,2.6rem)}
.ef-data{display:grid;grid-template-columns:1fr 1fr;gap:.65rem .9rem;margin:1.2rem 0 1.4rem;list-style:none}
.ef-data li{border:1px solid var(--ef-line);border-radius:12px;padding:.6rem .8rem;background:var(--ef-panel)}
.ef-data b{display:block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ef-dim);margin-bottom:.15rem;font-weight:700}
.ef-single .price{font-size:1.5rem;font-weight:700}
.ef-single form.cart{display:flex;gap:.8rem;align-items:center;margin:1.2rem 0;flex-wrap:wrap}
.ef-single .quantity .qty{width:4.5rem;padding:.7rem .5rem;border-radius:12px;border:1px solid var(--ef-line-2);background:var(--ef-panel);color:var(--ef-text);text-align:center}
.ef-holdnote{font-size:.8rem;color:var(--ef-dim);border-top:1px solid var(--ef-line);padding-top:1rem;margin-top:1.2rem}
.ef-desc{color:var(--ef-dim);margin-top:.6rem}
@media(min-width:860px){.ef-single{grid-template-columns:1.05fr .95fr}}

/* Accessory (supply) pages are content-light next to a big product photo, so
   the default 50/50 leaves the summary cramped and the image towering. Give the
   image a sensible cap and let the content breathe with more width. */
.ef-single.ef-single--acc{gap:3rem;align-items:start}
@media(min-width:860px){.ef-single.ef-single--acc{grid-template-columns:minmax(0,520px) 1fr}}
.ef-single--acc .ef-art,
.ef-single--acc .woocommerce-product-gallery{max-width:520px}
/* Image column follows the (taller) summary on scroll, so a short image leaves
   no dead space beneath it. */
@media(min-width:860px){.ef-single--acc>div:first-child{position:sticky;top:1.5rem;align-self:start}}
/* Show the WHOLE product (contain) rather than cropping to a square — a tall
   enclosure was losing its top and bottom. */
.ef-single--acc .woocommerce-product-gallery__image img,
.ef-single--acc .ef-art img{border-radius:var(--ef-r);width:100%;height:auto;max-height:75vh;object-fit:contain;background:var(--ef-panel)}
.ef-single--acc .summary{max-width:560px}

/* =========================================================
   9. TILES / CARE / EXPOS / ABOUT
   ======================================================= */
.ef-tiles{display:grid;gap:1.1rem;grid-template-columns:1fr}
.ef-tile{border:1px solid var(--ef-line);border-radius:var(--ef-r);background:var(--ef-panel);padding:1.5rem 1.4rem;position:relative;overflow:hidden}
.ef-tile::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--ef-grad)}
.ef-tile h3{font-family:var(--ef-ui);font-size:1.06rem;font-weight:700;margin-bottom:.5rem}
.ef-tile p{color:var(--ef-dim);font-size:.92rem}
@media(min-width:780px){.ef-tiles{grid-template-columns:repeat(3,1fr)}}

.ef-cards{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.ef-card{border:1px solid var(--ef-line);border-radius:var(--ef-r);background:var(--ef-panel);padding:1.3rem;display:flex;flex-direction:column;gap:.6rem;transition:border-color .15s,transform .15s}
.ef-card:hover{border-color:var(--ef-line-2);transform:translateY(-3px)}
.ef-lvl{font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;align-self:flex-start;padding:.3rem .65rem;border-radius:6px}
.ef-lvl--beginner{background:color-mix(in srgb,var(--ef-ok) 14%,transparent);color:var(--ef-ok)}
.ef-lvl--intermediate{background:color-mix(in srgb,var(--ef-warn) 14%,transparent);color:var(--ef-warn)}
.ef-lvl--advanced{background:color-mix(in srgb,var(--ef-hot) 14%,transparent);color:var(--ef-hot)}
.ef-card h3{font-family:var(--ef-latin);font-style:italic;font-weight:400;font-size:1.28rem}
.ef-card h3 a:hover{color:var(--ef-a2)}
.ef-card p{color:var(--ef-dim);font-size:.9rem;flex:1}
.ef-card .ef-link{color:var(--ef-a2);font-weight:700;font-size:.86rem}

.ef-expo{display:flex;gap:1.15rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--ef-line)}
.ef-expo:first-of-type{border-top:1px solid var(--ef-line)}
.ef-date{flex:none;width:66px;text-align:center;border:1px solid var(--ef-line);background:var(--ef-panel);border-radius:14px;padding:.55rem 0}
.ef-date b{display:block;font-family:var(--ef-display);font-weight:800;font-size:1.25rem;line-height:1.1}
.ef-date span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ef-dim)}
.ef-expo-info{flex:1;min-width:0}
.ef-expo-info h3{font-family:var(--ef-ui);font-size:1.02rem;font-weight:700}
.ef-expo-info p{color:var(--ef-dim);font-size:.85rem}
.ef-tableno{flex:none;font-size:.78rem;font-weight:700;color:var(--ef-a2);white-space:nowrap;text-transform:uppercase}

.ef-about{border:1px solid var(--ef-line);border-radius:calc(var(--ef-r) + 6px);background:var(--ef-panel);padding:clamp(1.6rem,5vw,3rem);position:relative;overflow:hidden}
.ef-about::after{content:"";position:absolute;right:-80px;bottom:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ef-a2) 22%,transparent),transparent 70%);pointer-events:none}
.ef-about h2{font-size:clamp(1.4rem,3.8vw,2rem);margin:.6rem 0 1rem}
.ef-about p{color:var(--ef-dim);max-width:60ch}
.ef-about a{color:var(--ef-a2);font-weight:600}

/* =========================================================
   10. SPIDER DECORATION UTILITIES
   ======================================================= */
/* Silk-thread scroll spider (markup in footer.php) */
.ef-silk{position:fixed;top:0;right:clamp(.6rem,2.5vw,1.6rem);height:100dvh;width:24px;z-index:40;pointer-events:none}
.ef-silk::before{content:"";position:absolute;inset:0 auto 0 50%;width:1px;background:linear-gradient(180deg,transparent,var(--ef-line-2) 12%,var(--ef-line-2) 88%,transparent)}
.ef-silk .ef-spider{position:absolute;left:50%;translate:-50% 0;top:0;transition:top .18s ease-out;opacity:.85}
@media(max-width:700px){.ef-silk{display:none}}
/* Spider list bullets: add class ef-list to any ul */
ul.ef-list{list-style:none;padding-left:0}
ul.ef-list li{position:relative;padding-left:2rem;margin-bottom:.5rem}
ul.ef-list li::before{content:"";position:absolute;left:0;top:.32em;width:1.05em;height:1.05em;background:var(--ef-a2);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g fill="none" stroke="black" stroke-linecap="round"><path d="M88 74 C66 58 56 50 40 30" stroke-width="14"/><path d="M85 86 C58 80 44 76 22 66" stroke-width="15"/><path d="M85 99 C56 104 42 110 20 122" stroke-width="15"/><path d="M89 110 C68 126 56 138 44 160" stroke-width="14"/><path d="M112 74 C134 58 144 50 160 30" stroke-width="14"/><path d="M115 86 C142 80 156 76 178 66" stroke-width="15"/><path d="M115 99 C144 104 158 110 180 122" stroke-width="15"/><path d="M111 110 C132 126 144 138 156 160" stroke-width="14"/></g><ellipse cx="100" cy="126" rx="28" ry="36" fill="black"/><ellipse cx="100" cy="87" rx="22" ry="26" fill="black"/></svg>') no-repeat center/contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g fill="none" stroke="black" stroke-linecap="round"><path d="M88 74 C66 58 56 50 40 30" stroke-width="14"/><path d="M85 86 C58 80 44 76 22 66" stroke-width="15"/><path d="M85 99 C56 104 42 110 20 122" stroke-width="15"/><path d="M89 110 C68 126 56 138 44 160" stroke-width="14"/><path d="M112 74 C134 58 144 50 160 30" stroke-width="14"/><path d="M115 86 C142 80 156 76 178 66" stroke-width="15"/><path d="M115 99 C144 104 158 110 180 122" stroke-width="15"/><path d="M111 110 C132 126 144 138 156 160" stroke-width="14"/></g><ellipse cx="100" cy="126" rx="28" ry="36" fill="black"/><ellipse cx="100" cy="87" rx="22" ry="26" fill="black"/></svg>') no-repeat center/contain}
/* Divider with a spider sitting mid-line: <div class="ef-divider">[spider svg]</div> */
.ef-divider{display:flex;align-items:center;gap:1rem;margin:2.5rem 0}
.ef-divider::before,.ef-divider::after{content:"";flex:1;height:1px;background:var(--ef-line)}

/* =========================================================
   11. WOOCOMMERCE PAGES BASELINE (cart / checkout / notices)
   ======================================================= */
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-radius:12px;border:1px solid var(--ef-line-2);background:var(--ef-panel);color:var(--ef-text);padding:1rem 1.2rem;list-style:none;margin-bottom:1.4rem}
.woocommerce-error{border-color:color-mix(in srgb,var(--ef-hot) 50%,transparent)}
.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--ef-line);border-radius:var(--ef-r);overflow:hidden}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:.9rem 1rem;border-bottom:1px solid var(--ef-line);text-align:left}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{background:var(--ef-panel);border:1px solid var(--ef-line-2);border-radius:12px;color:var(--ef-text);padding:.75rem .9rem;width:100%}
.woocommerce form .form-row label{font-size:.8rem;color:var(--ef-dim);margin-bottom:.3rem;display:block}
.ef-main{min-height:55vh}
.ef-page{padding:clamp(2.5rem,7vw,4.5rem) 0}
.ef-page h1{font-size:clamp(1.8rem,5vw,2.6rem);margin-bottom:1.4rem}
/* Community hub: self-heading, full-width page (see index.php). The title
   centres over its own centred hero, and the 68ch reading column is dropped so
   the leaderboards and card grids can breathe. */
.ef-page--wide h1{text-align:center;margin-bottom:.2rem}
.ef-page--wide .ef-desc{max-width:none;margin-top:0}

/* =========================================================
   11b. WOOCOMMERCE CHECKOUT BLOCK — brand it, and make the
        final "pay" step actually look like the commitment.
   ======================================================= */
/* Fields */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-address-form input,
.wc-block-components-textarea,
.wc-block-components-select__select{
  background:var(--ef-panel)!important;border:1px solid var(--ef-line-2)!important;
  border-radius:12px!important;color:var(--ef-text)!important;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-totals-item__label{color:var(--ef-text)}
.wc-block-components-text-input.is-active label{color:var(--ef-a2)}
.wc-block-components-checkout-step__description,
.wc-block-components-address-card{color:var(--ef-dim)}

/* Selectable rows: shipping options + payment methods */
.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package,
.wc-block-checkout__payment-method .wc-block-components-radio-control{
  background:var(--ef-panel);border:1px solid var(--ef-line);border-radius:14px;
}
.wc-block-components-radio-control__option{padding:.85rem 1rem;margin-bottom:.5rem}
.wc-block-components-radio-control__option--checked-option-highlight,
.wc-block-components-radio-control__option[aria-checked="true"]{
  border-color:var(--ef-a2);box-shadow:0 0 0 1px var(--ef-a2);
}

/* Order summary + totals */
.wc-block-components-order-summary__content,
.wc-block-components-totals-wrapper{color:var(--ef-text)}
.wc-block-components-totals-item{color:var(--ef-dim)}
.wc-block-components-totals-footer-item{
  color:var(--ef-text)!important;font-weight:800;font-size:1.2rem;
  border-top:1px solid var(--ef-line);padding-top:.8rem;
}

/* THE commitment button — brand gradient, full width, unmistakably the action */
.wc-block-components-checkout-place-order-button{
  background:var(--ef-grad)!important;color:#fff!important;border:none!important;
  border-radius:999px!important;font-weight:800!important;font-size:1.05rem!important;
  letter-spacing:.01em!important;padding:1.05rem 1.4rem!important;width:100%!important;
  box-shadow:0 12px 30px -12px color-mix(in srgb,var(--ef-a2) 70%,transparent)!important;
  transition:transform .15s ease, box-shadow .15s ease!important;
}
.wc-block-components-checkout-place-order-button:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 16px 38px -12px color-mix(in srgb,var(--ef-a2) 90%,transparent)!important;
}
.wc-block-components-checkout-place-order-button__text{font-weight:800}

/* Express-checkout divider + section spacing so it reads as steps, not a pile */
.wc-block-components-checkout-step{margin-bottom:1.4rem}
.wc-block-components-express-payment-continue-rule{color:var(--ef-dim)}

/* =========================================================
   11c. CHECKOUT (classic shortcode) — single focused column,
        mobile-first. One clear path to pay: express wallets up
        top, card + trust below. Precision over decoration.
   ======================================================= */

/* One centred column — same on mobile and desktop, just wider.
   Everything (incl. the before-form ship bar/express/coupon) shares it. */
.ee-checkout-wrap{max-width:600px;margin:0 auto;padding:0 1.1rem;box-sizing:border-box;display:flex;flex-direction:column;gap:1.5rem}
.ee-checkout{display:flex;flex-direction:column;gap:1.5rem;width:100%}
.ee-checkout #customer_details{display:block}

/* --- Free-shipping bar (LR_Bundle) — branded progress pill --- */
.lr-shipbar{background:var(--ef-panel);border:1px solid var(--ef-line);border-radius:16px;padding:1rem 1.15rem;color:var(--ef-text)}
.lr-shipbar[data-empty]{display:none;padding:0;border:0}
.lr-shipbar-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:700;font-size:.94rem}
.lr-shipbar-row b{color:#fff}
.lr-shipbar-count{color:var(--ef-dim);font-weight:700;font-size:.8rem;white-space:nowrap}
.lr-shipbar-track{height:6px;border-radius:99px;background:rgba(255,255,255,.09);margin:.65rem 0 .5rem;overflow:hidden}
.lr-shipbar-fill{height:100%;border-radius:99px;background:var(--ef-grad);transition:width .4s ease}
.lr-shipbar-sub{color:var(--ef-dim);font-size:.8rem;line-height:1.45}
.lr-shipbar--won{border-color:color-mix(in srgb,#3fc7a1 45%,transparent)}
.lr-shipbar--won .lr-shipbar-row span:first-child{color:#3fc7a1}
.lr-shipbar a,.lr-shipbar .ef-shop-cta{display:inline-block;margin-top:.55rem;color:var(--ef-a2);font-weight:700;font-size:.84rem;text-decoration:none}
.lr-shipbar a:hover{filter:brightness(1.15)}

/* --- Coupon toggle --- */
.woocommerce-form-coupon-toggle .woocommerce-info{
  background:transparent;border:1px dashed var(--ef-line-2);border-radius:12px;color:var(--ef-dim);padding:.7rem 1rem;margin:0;font-size:.88rem;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before{display:none}
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-checkout .checkout_coupon .button{color:var(--ef-a2)}
.woocommerce-checkout form.checkout_coupon{background:var(--ef-panel);border:1px solid var(--ef-line);border-radius:14px;padding:1rem}

/* --- Express wallets (Apple/Google Pay/Link) — the mobile fast path --- */
/* On product pages these are hidden (browse ≠ buy); they belong at checkout. */
.single-product .wc-stripe-payment-request-wrapper,
.single-product .wc-stripe-express-checkout-wrapper,
.single-product .wc-stripe-express-checkout-element,
.single-product #wc-stripe-payment-request-wrapper,
.single-product #wc-stripe-payment-request-button,
.single-product #wc-stripe-express-checkout-element,
.single-product .wc-stripe-payment-request-custom-button{display:none!important}
.wc-stripe-payment-request-wrapper,
.wc-stripe-express-checkout-wrapper,
.wc-stripe-express-checkout-element,
#wc-stripe-express-checkout-element{margin:0}
.wc-stripe-express-checkout-element{min-height:46px}

/* --- HIGHLIGHT the express wallets so they don't vanish into the dark theme.
   The Apple/Google Pay buttons are drawn by Stripe (we can't restyle their
   interiors), so we frame the whole block: a brand-tinted panel with a soft glow
   and a "fast path" label. Stripe's exact wrapper class varies by plugin
   version, so we target EVERY known express wrapper directly — no :has(), no
   body-class prefix — so the frame lands whatever the DOM happens to be. The
   product-page hide rule above still wins there (it's more specific + !important
   already), so this only shows on cart/checkout where those wrappers render. */
.wc-stripe-express-checkout-wrapper,
.wc-stripe-payment-request-wrapper,
#wc-stripe-express-checkout-element,
.woocommerce-checkout .wc-stripe-express-checkout-element,
.woocommerce-cart .wc-stripe-express-checkout-element{
  position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ef-a2) 12%,transparent),transparent 72%),var(--ef-panel);
  border:1px solid color-mix(in srgb,var(--ef-a2) 50%,var(--ef-line));
  border-radius:16px;
  padding:2.2rem 1.15rem 1.3rem;
  margin:0 0 .4rem;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ef-a2) 14%,transparent),0 12px 34px -12px color-mix(in srgb,var(--ef-a2) 45%,transparent);
}
/* The element sits INSIDE the wrapper on most versions — if so, only the outer
   wrapper should carry the frame, so strip it back off the inner element. */
.wc-stripe-express-checkout-wrapper .wc-stripe-express-checkout-element,
.wc-stripe-payment-request-wrapper .wc-stripe-express-checkout-element{
  background:none;border:0;border-radius:0;padding:0;margin:0;box-shadow:none;
}
/* "Fastest checkout" ribbon label pinned to the top edge of the frame. */
.wc-stripe-express-checkout-wrapper::before,
.wc-stripe-payment-request-wrapper::before,
#wc-stripe-express-checkout-element::before{
  content:"⚡ Fastest checkout — skip the form";
  position:absolute;top:.75rem;left:0;right:0;text-align:center;
  font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ef-a2);
  pointer-events:none;
}
/* Don't double the label when the element is nested inside a wrapper. */
.wc-stripe-express-checkout-wrapper .wc-stripe-express-checkout-element::before,
.wc-stripe-payment-request-wrapper .wc-stripe-express-checkout-element::before{content:none}
/* The Stripe "— OR —" divider — make it read as a deliberate separator. */
.wc-block-components-express-payment-continue-rule{
  color:var(--ef-dim);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
}

/* --- Section headings --- */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3{
  color:var(--ef-text);font-weight:800;letter-spacing:-.01em;font-size:1.12rem;margin:0 0 .85rem;
}

/* --- Fields --- */
.woocommerce-checkout .form-row{margin:0 0 .8rem}
.woocommerce-checkout .form-row label,
.woocommerce-checkout .woocommerce-input-wrapper label{color:var(--ef-dim);font-size:.84rem;margin-bottom:.28rem;display:inline-block}
.woocommerce-checkout .required{color:var(--ef-a3);border:0;text-decoration:none}
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection{
  background:var(--ef-panel)!important;border:1px solid var(--ef-line-2)!important;border-radius:12px!important;
  color:var(--ef-text)!important;padding:.8rem .95rem!important;min-height:auto!important;
  font-size:.98rem!important;line-height:1.35!important;box-shadow:none!important;
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection{
  border-color:var(--ef-a2)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ef-a2) 22%,transparent)!important;outline:none!important;
}
.woocommerce-checkout .select2-selection__rendered{color:var(--ef-text)!important;line-height:1.6!important;padding:0!important}
.woocommerce-checkout .select2-selection__arrow{top:.55rem!important}
.woocommerce-checkout ::placeholder{color:var(--ef-dim);opacity:.6}
@media(min-width:480px){
  .woocommerce-checkout .form-row-first{float:none;display:inline-block;width:calc(50% - .45rem);margin-right:.8rem;vertical-align:top}
  .woocommerce-checkout .form-row-last{float:none;display:inline-block;width:calc(50% - .45rem);vertical-align:top}
}

/* Checkboxes = native controls (fixes the broken glyph on "Ship to a different address") */
.woocommerce-checkout input[type=checkbox],
.woocommerce-checkout input[type=radio]{
  width:1.05rem!important;height:1.05rem!important;min-height:0!important;padding:0!important;
  margin:0 .5rem 0 0!important;accent-color:var(--ef-a2);vertical-align:middle;flex:0 0 auto;
  appearance:auto!important;-webkit-appearance:auto!important;
}
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout .woocommerce-form__label-for-checkbox{
  display:flex;align-items:center;gap:.15rem;color:var(--ef-text);font-weight:700;font-size:1rem;cursor:pointer;
}
.woocommerce-checkout #ship-to-different-address{margin:.4rem 0 1rem}

/* --- Order summary card --- */
.woocommerce-checkout-review-order{background:var(--ef-panel);border:1px solid var(--ef-line);border-radius:16px;padding:1.1rem 1.2rem}
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;font-size:.92rem}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{color:var(--ef-text);padding:.5rem 0;border-bottom:1px solid var(--ef-line);text-align:left;vertical-align:top}
.woocommerce-checkout-review-order-table thead th{color:var(--ef-dim);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout-review-order-table .amount{text-align:right;white-space:nowrap}
.woocommerce-checkout-review-order-table .product-name{color:var(--ef-text);font-weight:600}
.woocommerce-checkout-review-order-table .cart-subtotal th,.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .tax-rate th,.woocommerce-checkout-review-order-table .tax-rate td,
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals th,.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td{color:var(--ef-dim);font-weight:600}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{color:#fff;font-weight:800;font-size:1.15rem;border-bottom:none;padding-top:.85rem}

/* --- Payment --- */
.ee-co-pay{margin-top:.1rem}
.woocommerce-checkout #payment{background:transparent}
.woocommerce-checkout #payment ul.payment_methods{background:var(--ef-panel);border:1px solid var(--ef-line);border-radius:16px;padding:1.1rem;list-style:none;margin:0 0 1.1rem}
.woocommerce-checkout #payment ul.payment_methods li{color:var(--ef-text);line-height:1.5}
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout #payment .wc-stripe-upe-element,
.woocommerce-checkout #payment .wc-stripe-elements-field{
  background:rgba(255,255,255,.03)!important;border:1px solid var(--ef-line-2)!important;border-radius:12px!important;padding:1rem!important;margin-top:.6rem;box-sizing:border-box;
}
.woocommerce-checkout #payment .payment_box::before{display:none}
.woocommerce-checkout .woocommerce-privacy-policy-text{color:var(--ef-dim);font-size:.8rem;line-height:1.5;margin:.8rem 0 1rem}

/* --- Place Order — the commitment --- */
.woocommerce-checkout #place_order{
  /* WooCommerce's own stylesheet floats this button right. Overriding display
     and width doesn't take it out of the float, so it stays out of normal flow
     and the trust block below flows UP behind it — the button ends up sitting
     on top of the panel. Woo's small-screen CSS sets float:none, which is why
     this only ever showed on desktop. */
  float:none!important;
  display:block;width:100%;padding:1.1rem 1.4rem!important;font-size:1.08rem!important;font-weight:800!important;
  border-radius:999px!important;border:none!important;letter-spacing:.01em;margin:0;
}
/* Belt and braces: even if another plugin re-floats the button, the trust block
   starts on its own line rather than sliding underneath it. */
.woocommerce-checkout .place-order::after{content:"";display:table;clear:both}
.lr-ct{clear:both}
.woocommerce-checkout #place_order:hover{transform:translateY(-2px);filter:brightness(1.08)}
.woocommerce-checkout #place_order:active{transform:translateY(0)}

/* --- Living Record trust block (under the button) — compact & mobile-first --- */
.lr-ct{margin-top:2.1rem;padding:1.25rem 1.3rem;border:1px solid rgba(138,92,255,.32);border-radius:16px;background:rgba(138,92,255,.06)}
.lr-ct-head{margin:0 0 .9rem;text-align:center;font-size:1.05rem;font-weight:800;color:#fff;line-height:1.25}
.lr-ct-sub{margin:0 0 1rem;color:var(--ef-dim);font-size:.88rem;line-height:1.45}
.lr-ct-badges{display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;margin:0 0 1rem}
.lr-ct-badge{display:inline-flex;align-items:center;gap:.4em;font-size:.84rem;color:#cfd3dc;font-weight:600}
.lr-ct-badge i{color:#3fc7a1;font-weight:800;font-style:normal}
.lr-ct-record{background:rgba(255,255,255,.045);border-radius:12px;padding:.9rem 1rem;margin:0 0 1rem}
.lr-ct-record-t{display:block;font-weight:700;color:#fff;font-size:.92rem;line-height:1.45;margin-bottom:.45rem}
.lr-ct-watch{display:block;color:#c9a6ff;font-size:.87rem;font-weight:600;line-height:1.45}
.lr-ct-watch::before{content:"\25B6";margin-right:.5em;font-size:.65em;position:relative;top:-1px}
.lr-ct-steps{list-style:none;counter-reset:s;margin:0 0 1rem;padding:0;display:grid;gap:.6rem}
.lr-ct-steps li{counter-increment:s;position:relative;padding-left:2rem;font-size:.85rem;color:#cfd3dc;line-height:1.4}
.lr-ct-steps li::before{content:counter(s);position:absolute;left:0;top:-.1rem;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--ef-grad);color:#fff;font-weight:800;font-size:.76rem;display:flex;align-items:center;justify-content:center}
.lr-ct-grow{margin:0;background:rgba(255,183,77,.09);border:1px solid rgba(255,183,77,.28);border-radius:10px;padding:.8rem .9rem;color:#e8c98a;font-size:.85rem;line-height:1.45}
.lr-ct-grow::before{content:"\1F331";margin-right:.4em}
.lr-ct-human{margin:1rem 0 0;color:#8b909c;font-size:.8rem;line-height:1.45}

/* Privacy line — quiet, at the very bottom, outside the trust box */
.woocommerce-checkout .ee-co-pay .woocommerce-privacy-policy-text,
.woocommerce-checkout #payment .place-order .woocommerce-privacy-policy-text{
  margin:1.4rem 0 0;color:#767b86;font-size:.76rem;line-height:1.5;text-align:center;
}
/* Safety net: if the move via hooks doesn't catch, still hide the copy in its
   old spot (inside the terms wrapper, above the button). The moved copy renders
   OUTSIDE this wrapper, so it stays visible at the very bottom. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text{display:none}

/* Cart page (custom [ee_custom_cart]) — clear the phone edges, like checkout */
.lr-cc{padding-left:1.1rem;padding-right:1.1rem;box-sizing:border-box}

/* Card field: drop the competing outer border so it doesn't double up on Stripe's */
.woocommerce-checkout #payment .payment_box{background:transparent!important;border:0!important;padding:.2rem 0 0!important}

/* --- Notices --- */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info{border-radius:12px;border:1px solid var(--ef-line-2);background:var(--ef-panel);color:var(--ef-text)}

/* --- Mobile: tighten, keep the fast path obvious --- */
@media(max-width:560px){
  .ee-checkout-wrap,.ee-checkout{gap:1.1rem;max-width:100%}
  .woocommerce-checkout h3,.woocommerce-checkout #order_review_heading{font-size:1.02rem}
  .woocommerce-checkout-review-order,.woocommerce-checkout #payment ul.payment_methods,.lr-shipbar{padding:.9rem 1rem}
  .woocommerce-checkout #place_order{padding:1rem 1.2rem!important;font-size:1.02rem!important}
  .lr-ct{margin-top:1.7rem;padding:1.05rem 1.1rem}
  .lr-ct-head{font-size:1rem}
  .lr-ct-sub,.lr-ct-record{margin-bottom:.8rem}
  .lr-ct-steps{gap:.5rem}
}

/* =========================================================
   12. FOOTER & 404
   ======================================================= */
.ef-footer{border-top:1px solid var(--ef-line);padding:2.8rem 0 2.2rem;margin-top:2rem}
.ef-foot-grid{display:grid;gap:1.9rem;grid-template-columns:1fr}
.ef-foot-grid h4{font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ef-dim);margin-bottom:.7rem;font-family:var(--ef-ui)}
.ef-foot-grid p{font-size:.92rem;margin-bottom:.25rem}
.ef-foot-grid .ef-muted{color:var(--ef-dim)}
.ef-credit{margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--ef-line);display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;color:var(--ef-dim);font-size:.8rem}
.ef-credit a{color:var(--ef-text);font-weight:600}
.ef-credit a:hover{color:var(--ef-a2)}
@media(min-width:780px){.ef-foot-grid{grid-template-columns:2fr 1fr 1fr}}
.ef-404{min-height:60vh;display:grid;place-items:center;text-align:center;padding:3rem var(--ef-pad)}
.ef-404 h1{font-size:clamp(1.8rem,6vw,3rem);margin:1.2rem 0 .6rem}
.ef-404 p{color:var(--ef-dim);margin-bottom:1.6rem}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .ef-reveal{opacity:1;transform:none}
}
:root{
  --ef-bg:#07080c;
  --ef-bg-2:#0c0e15;

  /* Accent trio → brand gradient, buttons, links, AND the
     brand-colorway spiders (the sprite reads these vars). */
  --ef-a1:#4f7cff;   /* electric blue   */
  --ef-a2:#8a5cff;   /* violet          */
  --ef-a3:#ff4fa3;   /* magenta         */

  --ef-text:#eef1f7;
  --ef-dim:#98a1b3;
}

/* Example of going past tokens when a client wants it: */
.ef-hero h1{letter-spacing:-.02em}

/* v0.1.1 — hero spider leg sway (paths are inline now, so CSS can reach them) */
.ef-stage .ef-legs-l{animation:ef-swayL 5.5s ease-in-out infinite;transform-origin:100px 95px}
.ef-stage .ef-legs-r{animation:ef-swayR 5.5s ease-in-out infinite;transform-origin:100px 95px}
@keyframes ef-swayL{0%,100%{transform:rotate(0)}50%{transform:rotate(1.6deg)}}
@keyframes ef-swayR{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.6deg)}}

/* v0.2.1 — mobile menu */
.ef-burger{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--ef-line-2);border-radius:12px;color:var(--ef-text);flex:none}
.ef-burger:hover{border-color:var(--ef-a2)}
.ef-nav.open .ef-burger{background:color-mix(in srgb,var(--ef-a2) 14%,transparent);border-color:var(--ef-a2)}
.ef-nav.open nav ul{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;margin:0;padding:.5rem var(--ef-pad) 1rem;list-style:none;background:color-mix(in srgb,var(--ef-bg) 96%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--ef-line)}
.ef-nav.open nav ul a{display:block;padding:.85rem 0;font-size:1rem;border-bottom:1px solid var(--ef-line)}
.ef-nav.open nav ul li:last-child a{border-bottom:0}
@media(min-width:820px){.ef-burger{display:none}.ef-nav.open nav ul{position:static;flex-direction:row;gap:1.6rem;padding:0;background:none;border:0;backdrop-filter:none}.ef-nav.open nav ul a{border:0;padding:0;font-size:.88rem}}

/* v0.3.1 — compact header on small screens (Reserve list was wrapping) */
@media(max-width:640px){
  .ef-nav-in{gap:.7rem}
  .ef-brand{font-size:.8rem;gap:.45rem}
  .ef-cart{padding:.45rem .7rem;font-size:.74rem;gap:.4rem;white-space:nowrap}
  .ef-count{min-width:1.15rem;height:1.15rem;font-size:.64rem}
  .ef-burger{width:2.3rem;height:2.3rem}
}

/* v0.4.1 — kind-glyph auras */
.ef-aura-moss{background:radial-gradient(90% 90% at 50% 30%,rgba(63,214,166,.16),transparent 65%)}
.ef-aura-roach{background:radial-gradient(90% 90% at 50% 30%,rgba(242,178,106,.15),transparent 65%)}

/* v0.5.0 — cycling hero glyphs */
.ef-stage .ef-cycle{position:relative;width:min(74vw,400px);aspect-ratio:1}
.ef-stage .ef-cycle svg{position:absolute;inset:0;width:100%;height:100%}
.ef-cycle .ef-cycle-ring{opacity:.7}
/* Cycling glyphs.
   Timing is keyed to the COUNT, because adding custom artwork makes it four and
   the original 12s/4s rhythm only worked for three — a fourth would have shared
   the stage with a third. Each glyph holds for 4s regardless; only the loop
   length and the fade percentages change. */
.ef-cycle[data-n="3"] .ef-cy1{animation:ef-cyfade3 12s ease-in-out infinite}
.ef-cycle[data-n="3"] .ef-cy2{opacity:0;animation:ef-cyfade3 12s ease-in-out 4s infinite}
.ef-cycle[data-n="3"] .ef-cy3{opacity:0;animation:ef-cyfade3 12s ease-in-out 8s infinite}
@keyframes ef-cyfade3{0%,26%{opacity:1}34%,92%{opacity:0}100%{opacity:1}}

.ef-cycle[data-n="4"] .ef-cy1{animation:ef-cyfade4 16s ease-in-out infinite}
.ef-cycle[data-n="4"] .ef-cy2{opacity:0;animation:ef-cyfade4 16s ease-in-out 4s infinite}
.ef-cycle[data-n="4"] .ef-cy3{opacity:0;animation:ef-cyfade4 16s ease-in-out 8s infinite}
.ef-cycle[data-n="4"] .ef-cy4{opacity:0;animation:ef-cyfade4 16s ease-in-out 12s infinite}
@keyframes ef-cyfade4{0%,19%{opacity:1}25%,94%{opacity:0}100%{opacity:1}}

/* No data-n (older markup / cache): behave exactly as before. */
.ef-cycle:not([data-n]) .ef-cy1{animation:ef-cyfade3 12s ease-in-out infinite}
.ef-cycle:not([data-n]) .ef-cy2{opacity:0;animation:ef-cyfade3 12s ease-in-out 4s infinite}
.ef-cycle:not([data-n]) .ef-cy3{opacity:0;animation:ef-cyfade3 12s ease-in-out 8s infinite}

/* ---------- Custom artwork glyph -------------------------------------------
   Not an <svg>, so it needs the sizing the stage gives svg children. The mark
   is a mask: --grad shows through --mark, which is why the artwork's own colour
   never matters and per-species colorways still apply to it. */
.ef-glyph-custom{position:relative;display:inline-block;vertical-align:middle;line-height:0}
.ef-stage .ef-glyph-custom{width:min(74vw,400px);aspect-ratio:1;filter:drop-shadow(0 0 34px color-mix(in srgb,var(--ef-a2) 35%,transparent))}
.ef-cycle .ef-glyph-custom{position:absolute;inset:0;width:100%;height:100%}
.ef-stage .ef-glyph-custom__ring,.ef-cycle .ef-glyph-custom__ring,.ef-glyph-custom__ring{position:absolute;inset:0;width:100%;height:100%}
/* The ring is an <svg> inside .ef-stage, so `.ef-stage svg{width:min(74vw,400px)}`
   (0,1,1) would otherwise outrank a lone class (0,1,0) and blow it up. */
.ef-glyph-custom__art{
	position:absolute;inset:9%;
	background:var(--grad,var(--ef-grad));
	/* Longhand, not the `center/contain` shorthand. Mobile Chrome and iOS
	   Safari intermittently drop a mask when the size is bundled into the
	   position with a slash — the box renders with a background but no mask,
	   so you get a blank hole exactly where the art should be, which is what
	   showed on the phone. The longhand form is honoured everywhere. */
	-webkit-mask-image:var(--mark);
	        mask-image:var(--mark);
	-webkit-mask-repeat:no-repeat;
	        mask-repeat:no-repeat;
	-webkit-mask-position:center;
	        mask-position:center;
	-webkit-mask-size:contain;
	        mask-size:contain;
}
@supports not (mask-image:url(#x)){
	.ef-glyph-custom__art{
		background:var(--mark) no-repeat center/contain;
		-webkit-mask:none;mask:none;
	}
}

/* v0.5.2 — tappable expo rows */
a.ef-expo{color:inherit;transition:background .15s;border-radius:12px;padding-inline:.5rem;margin-inline:-.5rem}
a.ef-expo:hover{background:var(--ef-panel);color:inherit}
a.ef-expo:hover .ef-tableno{filter:brightness(1.25)}

/* v0.5.3 — expo street address */
.ef-expo-addr{font-size:.74rem;color:var(--ef-dim);opacity:.75;margin-top:.1rem}

/* v0.6.0 — care sheet system */
.ef-care-thumb{display:block;margin:-1.3rem -1.3rem .9rem;border-bottom:1px solid var(--ef-line);border-radius:var(--ef-r) var(--ef-r) 0 0;overflow:hidden}
.ef-care-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ef-care-hero{margin:1.6rem 0;max-width:680px}
.ef-care-hero-img{display:block;width:auto;height:auto;max-width:100%;max-height:440px;border:1px solid var(--ef-line);border-radius:var(--ef-r)}
@media (max-width:640px){ .ef-care-hero-img{max-height:340px} }
.ef-care-single h1{font-weight:400;font-size:clamp(1.9rem,5vw,2.7rem);margin:.5rem 0 .4rem}
.ef-care-stats{max-width:680px}
.ef-careh{font-family:var(--ef-ui);font-size:.74rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ef-a2);margin:1.9rem 0 .5rem}
.ef-carep{color:var(--ef-dim);max-width:68ch}
.ef-carep p{margin-bottom:.8rem}
.ef-back{color:var(--ef-dim);font-size:.85rem}
.ef-back:hover{color:var(--ef-a2)}

/* =========================================================
   ACCESSIBILITY — skip link + visible keyboard focus
   ======================================================= */
.ef-skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  padding:12px 18px;border-radius:0 0 10px 0;
  background:var(--ef-bg-2,#101218);color:#fff;
  font-weight:700;text-decoration:none;
}
.ef-skip-link:focus{left:0;outline:3px solid #fff;outline-offset:2px}

/* Keyboard users get a clear ring; mouse users see nothing change. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
  border-radius:6px;
}

/* Gradient buttons: keep label large + bold so white-on-pink clears
   the 3:1 contrast bar WCAG sets for large text. */
.ef-btn,.lr-reserve,.wp-element-button,.button{
  font-weight:700;
  font-size:1.0625rem;
}

/* =========================================================
   FOOTER v2 — gradient hairline, 4-up grid, socials
   ======================================================= */
.ef-footer{
  position:relative;
  margin-top:6rem;
  padding:4.5rem 0 2rem;
  background:linear-gradient(180deg,transparent, rgba(255,255,255,.025));
}
.ef-footer::before{ /* the brand hairline */
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--ef-grad);
  opacity:.9;
}
.ef-foot-grid{
  display:grid;gap:2.5rem 2rem;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  align-items:start;
}
@media (max-width:900px){ .ef-foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .ef-foot-grid{grid-template-columns:1fr;gap:2rem} }

.ef-foot-brand .ef-brand{
  display:inline-flex;align-items:center;gap:.55rem;
  margin-bottom:.9rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:inherit;
}
.ef-foot-tagline{max-width:34ch;line-height:1.6;margin:0 0 1.2rem}

.ef-footer h4{
  margin:0 0 .9rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.6;font-weight:600;
}
.ef-foot-menu{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ef-foot-menu a{
  color:inherit;text-decoration:none;opacity:.78;
  transition:opacity .15s ease, translate .15s ease;
  display:inline-block;
}
.ef-foot-menu a:hover{opacity:1;translate:3px 0}
.ef-foot-menu li{opacity:.78;line-height:1.5}
.ef-foot-widget + .ef-foot-widget{margin-top:1.6rem}

/* Socials */
.ef-socials{display:flex;gap:.5rem}
.ef-soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  color:inherit;opacity:.72;text-decoration:none;
  border:1px solid var(--ef-line,rgba(255,255,255,.1));
  background:var(--ef-panel,rgba(255,255,255,.045));
  transition:opacity .15s ease, translate .15s ease, border-color .15s ease;
}
.ef-soc:hover{opacity:1;translate:0 -2px;border-color:rgba(255,255,255,.32)}

/* Bottom bar */
.ef-credit{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;
  margin-top:3.5rem;padding-top:1.5rem;
  border-top:1px solid var(--ef-line,rgba(255,255,255,.1));
  font-size:.85rem;opacity:.6;line-height:1.5;
}

/* =========================================================
   LOGO — constrain by HEIGHT, never width.
   The uploaded file can be any size; the header decides how
   tall it renders. Retina stays sharp because the source is
   3–4x the displayed height.
   ======================================================= */
.ef-brand .ef-logo,
.ef-brand img.custom-logo{
  height:auto;
  width:auto;
  max-height:var(--ef-logo-h,38px);
  max-width:min(58vw,240px);   /* never crowd the nav on small screens */
  object-fit:contain;
  display:block;
}
@media (max-width:900px){
  .ef-brand .ef-logo,
  .ef-brand img.custom-logo{ max-height:var(--ef-logo-h-mobile,28px); max-width:52vw }
}
/* When a logo is present the wordmark text is redundant. */
.ef-brand:has(.ef-logo){gap:0}


.ef-footer{position:relative}

/* Availability pills — ships-now vs grow-out */
.ef-avail{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3em .7em;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.ef-avail--now{color:var(--ef-ok,#4ade80)}
.ef-avail--grow{color:var(--ef-a2,#8d7bff)}

/* Card CTA — a clear, tappable button. Outlined pill for grow-out (reserve),
   filled gradient for ships-now. Sized as a card element, not as loud as the
   tracker's hero button, but unmistakably clickable. */
.ef-card-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  align-self:stretch;                 /* full card width — reads as an action bar */
  margin:.7rem 0 0;padding:.62rem 1.1rem;
  border:1px solid transparent;
  border-radius:99px;background:var(--ef-grad);
  font-weight:800;font-size:.86rem;letter-spacing:.01em;
  color:#fff;text-decoration:none;
  box-shadow:0 8px 24px -10px color-mix(in srgb,var(--ef-a2) 60%,transparent);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ef-card-cta span{transition:translate .15s ease;color:#fff}
.ef-card-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -10px color-mix(in srgb,var(--ef-a2) 75%,transparent);
}
.ef-card-cta:hover span{translate:3px 0}
/* is-now retained for back-compat — every card CTA is now the primary gradient,
   so ships-now and grow-out cards read as one consistent action. */
.ef-card-cta.is-now{background:var(--ef-grad);border-color:transparent;color:#fff}
.ef-card-cta.is-now span{color:#fff}
.ef-card-cta.is-now:hover{background:var(--ef-grad);transform:translateY(-2px);box-shadow:0 12px 28px -10px color-mix(in srgb,var(--ef-a2) 75%,transparent)}
.ef-avail-legend{
  display:grid;gap:.8rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:.4rem 0 1.9rem;
}
@media (max-width:760px){ .ef-avail-legend{grid-template-columns:1fr} }
.ef-legend-item{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.95rem 1.05rem;
  border:1px solid var(--ef-line,rgba(255,255,255,.1));
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.ef-avail--now-item{box-shadow:inset 3px 0 0 var(--ef-ok,#4ade80)}
.ef-avail--grow-item{box-shadow:inset 3px 0 0 var(--ef-a2,#8d7bff)}
.ef-legend-item .ef-avail{flex:0 0 auto;margin-top:.15rem}
.ef-legend-item p{margin:0;font-size:.88rem;line-height:1.55;opacity:.68}

/* One-of-one stock pill — every animal is unique; "low stock" undersold it. */
.ef-stock--one{color:rgba(255,255,255,.72)}

/* Filter empty-state */
ul.products.ef-empty::after{
  content:"Nothing matches that filter here right now.";
  display:block;grid-column:1/-1;padding:1.6rem .2rem;
  font-size:.95rem;opacity:.55;
}

/* Home → full shop CTA (replaces on-home filtering) */
.ef-shop-cta{margin-top:2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.ef-shop-cta .ef-btn{font-size:1rem;padding:.95rem 1.8rem}
.ef-shop-cta-count{opacity:.85;font-weight:600;padding-left:.55rem;margin-left:.25rem;border-left:1px solid rgba(255,255,255,.35)}
.ef-shop-cta-sub{margin:0;font-size:.85rem;opacity:.55}

/* Care-guide CTA — lives in the tracker header, beside Reserve. Uses the distinct
   "learn" teal accent so it complements rather than competes with the Buy button. */
.lr-careguide{margin:1rem 0 0;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.lr-careguide-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--ef-cta-learn);color:#04201d;
  font-weight:800;font-size:.88rem;letter-spacing:.01em;
  padding:.62rem 1.2rem;border-radius:99px;text-decoration:none;
  box-shadow:0 6px 22px -10px color-mix(in srgb,var(--ef-cta-learn-1) 65%,transparent);
  transition:transform .15s,box-shadow .15s;
}
.lr-careguide-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px -10px color-mix(in srgb,var(--ef-cta-learn-1) 80%,transparent)}
@media (max-width:520px){ .lr-careguide{width:100%} .lr-careguide-btn{flex:1;justify-content:center} }

/* Care-sheet PDF download link */
.ef-care-download{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.9rem;color:var(--ef-cta-learn-1);text-decoration:none;border:1px solid color-mix(in srgb,var(--ef-cta-learn-1) 40%,transparent);border-radius:99px;padding:.6rem 1.2rem;transition:border-color .15s,color .15s,background .15s}
.ef-care-download:hover{border-color:transparent;background:var(--ef-cta-learn);color:#04201d}

/* Reusable learn-accent button (for the care-sheet CTA and anywhere info-led) */
.ef-btn-learn{background:var(--ef-cta-learn)!important;color:#04201d!important;box-shadow:0 8px 30px -8px color-mix(in srgb,var(--ef-cta-learn-1) 60%,transparent)!important}
.lr-careguide-pdf{font-size:.84rem;font-weight:700;color:var(--ef-cta-learn-1);text-decoration:none;border:1px solid color-mix(in srgb,var(--ef-cta-learn-1) 40%,transparent);border-radius:99px;padding:.5rem .9rem;transition:border-color .15s,color .15s}
.lr-careguide-pdf:hover{border-color:var(--ef-cta-learn-1);color:#fff}

/* ============================================================
   Care library — the browsable species index (archive-ef_care)
   ============================================================ */
.ef-carelib-intro{max-width:66ch;color:var(--ef-dim);font-size:1rem;line-height:1.6;margin:.2rem 0 1.8rem}
.ef-carelib-tools{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:1.8rem}
.ef-carelib-search{
  flex:1;min-width:240px;
  font:inherit;font-size:.95rem;color:var(--ef-text);
  background:var(--ef-panel);border:1px solid var(--ef-line);border-radius:99px;
  padding:.7rem 1.2rem;transition:border-color .15s;
}
.ef-carelib-search:focus{outline:none;border-color:var(--ef-a2)}
.ef-carelib-search::placeholder{color:var(--ef-dim)}

.ef-carelib-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1.3rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.ef-carelib-card{
  border:1px solid var(--ef-line);border-radius:16px;overflow:hidden;
  background:var(--ef-panel);display:flex;flex-direction:column;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.ef-carelib-card:hover{
  border-color:var(--ef-line-2);transform:translateY(-4px);
  box-shadow:0 20px 46px -20px color-mix(in srgb,var(--ef-a2) 40%,transparent);
}
.ef-carelib-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#141020}
.ef-carelib-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.ef-carelib-card:hover .ef-carelib-media img{transform:scale(1.05)}
.ef-carelib-noimg{position:absolute;inset:0;display:grid;place-items:center;font-size:3rem;opacity:.35}
.ef-carelib-badges{position:absolute;top:.7rem;left:.7rem;display:flex;gap:.4rem;flex-wrap:wrap}
/* These badges sit OVER the photo, so a faint tint washes out on a busy image.
   Give them a dark glass pill that reads on ANY photo: crisp label + a glowing
   difficulty dot. Scoped to the archive so the on-card home badges are untouched. */
.ef-carelib-badges .ef-lvl{
  display:inline-flex;align-items:center;gap:.42rem;
  background:rgba(9,11,15,.72);color:#eef1f5;
  border:1px solid rgba(255,255,255,.16);border-radius:99px;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  font-size:.62rem;letter-spacing:.16em;padding:.34rem .62rem;
}
.ef-carelib-badges .ef-lvl::before{
  content:"";width:.48rem;height:.48rem;border-radius:50%;flex:none;
  background:var(--lvl-dot,#8b9099);box-shadow:0 0 7px var(--lvl-dot,transparent);
}
.ef-carelib-badges .ef-lvl--beginner{--lvl-dot:var(--ef-ok)}
.ef-carelib-badges .ef-lvl--intermediate{--lvl-dot:var(--ef-warn)}
.ef-carelib-badges .ef-lvl--advanced{--lvl-dot:var(--ef-hot)}
/* Care-library pagination: pill page buttons with a clear current-page state,
   given real breathing room under the grid. */
.ef-carelib-pagination{margin-top:2.4rem;display:flex;justify-content:center;align-items:center;gap:.45rem;flex-wrap:wrap}
.ef-carelib-pagination[hidden]{display:none}
.ef-carelib-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.4rem;height:2.4rem;padding:0 .75rem;
  border:1px solid var(--ef-line);border-radius:9px;background:transparent;
  color:var(--ef-dim);text-decoration:none;font-family:inherit;font-weight:700;font-size:.9rem;line-height:1;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s;
}
.ef-carelib-pagination .page-numbers:not(.current):hover{color:var(--ef-text);border-color:color-mix(in srgb,var(--ef-a2) 65%,transparent)}
.ef-carelib-pagination .page-numbers.current{color:#fff;border-color:transparent;background:var(--ef-a2);box-shadow:0 3px 12px color-mix(in srgb,var(--ef-a2) 40%,transparent);cursor:default}
.ef-carelib-pagination .prev.page-numbers,.ef-carelib-pagination .next.page-numbers{font-size:.82rem;letter-spacing:.02em}
.ef-carelib-venom{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(9,11,15,.72);color:var(--ef-warn);
  border:1px solid color-mix(in srgb,var(--ef-warn) 45%,rgba(255,255,255,.14));
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  padding:.34rem .62rem;border-radius:99px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.ef-carelib-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.ef-carelib-body h3{margin:0;font-size:1.12rem;line-height:1.25;font-style:italic}
.ef-carelib-body h3 a{color:var(--ef-text);text-decoration:none}
.ef-carelib-body h3 a:hover{color:var(--ef-a2)}
.ef-carelib-meta{margin:0;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ef-dim);display:flex;gap:.5rem;align-items:center}
.ef-carelib-actions{margin-top:auto;display:flex;align-items:center;gap:.9rem;padding-top:.4rem}
.ef-carelib-view{font-weight:800;font-size:.88rem;color:var(--ef-cta-learn-1);text-decoration:none}
.ef-carelib-view:hover{color:#fff}
.ef-carelib-pdf{font-weight:700;font-size:.82rem;color:var(--ef-dim);text-decoration:none}
.ef-carelib-pdf:hover{color:var(--ef-cta-learn-1)}
.ef-carelib-stock{
  margin-left:auto;font-size:.72rem;font-weight:700;
  color:var(--ef-ok);border:1px solid color-mix(in srgb,var(--ef-ok) 40%,transparent);
  border-radius:99px;padding:.2em .6em;
}
.ef-carelib-empty{color:var(--ef-dim);font-size:1rem;padding:2rem 0;text-align:center}
@media (max-width:560px){
  .ef-carelib-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
  .ef-carelib-body{padding:.8rem .85rem 1rem}
  .ef-carelib-body h3{font-size:.98rem}
  .ef-carelib-actions{flex-wrap:wrap;gap:.5rem}
}

/* Scientific name lines (care sheet + library cards) */
.ef-care-sci{margin:.1rem 0 0;font-style:italic;color:var(--ef-dim);font-size:1.05rem}
.ef-carelib-sci{margin:-.15rem 0 0;font-style:italic;color:var(--ef-dim);font-size:.82rem}

/* Photo credit — small caption directly under the care sheet hero image */
.ef-photo-credit{margin:-0.9rem 0 1.6rem;font-size:.76rem;color:var(--ef-dim);opacity:.6;letter-spacing:.02em}
.ef-photo-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ef-photo-credit a:hover{color:var(--ef-text);opacity:1}

/* ============================================================================
   FOOTER — the mark                                            (v0.23.0)
   ----------------------------------------------------------------------------
   The logo is line art, so it is used as a MASK: the brand gradient is painted
   THROUGH the drawing rather than the drawing being tinted. The mark is then
   literally made of the brand, and re-tints for free if the palette changes.

   Requires artwork with real transparency — a PNG/SVG on alpha. A JPEG has no
   alpha channel, so its black background would mask as a solid rectangle and
   you'd get a gradient block instead of a spider.
   ========================================================================= */

.ef-footer{position:relative;overflow:hidden;isolation:isolate}

/* Bleeds off the bottom-right so it reads as the plate the page is printed on,
   rather than a sticker dropped in a corner. Deliberately dim: it is texture,
   not content — the footer's words still have to be the thing you read. */
.ef-foot-mark{
	position:absolute;z-index:-1;pointer-events:none;
	right:-5%;bottom:-34%;
	width:min(46%,540px);aspect-ratio:1400/1058;
}
.ef-foot-mark--img{
	background:var(--ef-grad);
	-webkit-mask:var(--mark) no-repeat center/contain;
	        mask:var(--mark) no-repeat center/contain;
	opacity:.16;
}
.ef-foot-mark--svg{opacity:.10;display:grid;place-items:center}
.ef-foot-mark--svg svg{width:100%;height:auto}

/* Mobile: the mark centres behind the columns as a watermark instead of
   crowding a narrow column, and drops in opacity — the same 16% that reads as
   texture on a wide footer reads as noise behind a phone-width one. */
@media(max-width:760px){
	.ef-foot-mark{
		right:50%;translate:50% 0;bottom:auto;top:-4%;
		width:min(88%,400px)
	}
	.ef-foot-mark--img{opacity:.10}
	.ef-foot-mark--svg{opacity:.05}
}

/* Rich accessory (supply) product page                          (0.24.6) */
.ef-acc-data{margin-bottom:1.3rem;grid-template-columns:1fr !important}
.ef-acc-data li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.ef-acc-data li b{margin-bottom:0;white-space:nowrap}
.ef-acc-data li span{text-align:right;color:var(--ef-text)}
.ef-acc-lead{font-size:1.05rem;color:var(--ef-text);opacity:.95}
.ef-acc-desc{color:var(--ef-text);line-height:1.6;margin:1rem 0}
.ef-acc-desc p{margin:0 0 .8rem}
.ef-acc-desc:empty{display:none}
.ef-single .ef-holdnote{border:1px solid color-mix(in srgb,var(--ef-ok) 30%,transparent);background:color-mix(in srgb,var(--ef-ok) 6%,transparent);border-radius:12px;padding:.9rem 1.1rem;color:var(--ef-text);font-size:.9rem;margin-top:1.2rem}

/* accessory shipping note — accurate for standalone or bundled (0.24.9) */
.ef-acc-ship{font-size:.82rem;color:var(--ef-dim);border-top:1px solid var(--ef-line);padding-top:.9rem;margin-top:1.3rem;line-height:1.5}

/* unique animal code on shop cards (0.24.10) */
.ef-card-code{font-family:var(--ef-mono,ui-monospace,monospace);font-size:.62rem;letter-spacing:.18em;color:var(--ef-dim);margin:.15rem 0 .3rem;opacity:.7}

/* scientific name on shop cards — clean sans-serif italic, distinct from the
   serif common-name title above it so the two names read as different registers
   (display name vs. technical binomial) without clashing (0.24.11) */
.ef-common.ef-sci{font-family:var(--ef-ui);font-style:italic;font-size:.82rem;letter-spacing:.01em;color:var(--ef-dim);opacity:.85}

/* =========================================================
   13. PARTNER / WHOLESALE SHEET  (/partners)
   ======================================================= */
.eep{max-width:1020px;margin:0 auto;padding:2.4rem 1.2rem 3rem;display:flex;flex-direction:column;gap:2rem}
.eep-eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ef-a2);font-weight:700;margin-bottom:.7rem}
.eep-k{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ef-dim);font-weight:700;margin-bottom:.5rem}
.eep-k--a{color:var(--ef-a2)}
.eep-h1{font-size:clamp(2rem,5.5vw,3.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.04;margin:0}
.eep-h2{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:800;letter-spacing:-.01em;margin:.1rem 0 0}
.eep-h3{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;margin:0}
.eep-h4{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;margin:.3rem 0 0}
.eep-intro{color:var(--ef-dim);font-size:1rem;line-height:1.6;margin:.9rem 0 0;max-width:34rem}
.eep-rule{display:block;width:52px;height:3px;border-radius:3px;background:var(--ef-grad);margin-top:1.1rem}

/* hero */
.eep-hero{display:grid;grid-template-columns:1fr 1.35fr;gap:2rem;align-items:center}
.eep-hero-photo{border-radius:18px;overflow:hidden;aspect-ratio:1/1.05;border:1px solid var(--ef-line-2)}
.eep-hero-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* moat */
.eep-moat{display:grid;grid-template-columns:250px 1fr;gap:2.2rem;align-items:start}
.eep-moat-copy .eep-lede{color:var(--ef-dim);font-size:.98rem;line-height:1.55;margin:.8rem 0 1.1rem}
.eep-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.eep-pts li{position:relative;padding-left:1.9rem;font-size:.96rem;line-height:1.5;color:var(--ef-text)}
.eep-pts li strong{color:#fff;font-weight:700}
.eep-pts li::before{content:"";position:absolute;left:0;top:.28rem;width:16px;height:16px;border-radius:50%;background:var(--ef-grad);box-shadow:0 0 0 4px rgba(138,92,255,.13)}
.eep-pts li::after{content:"";position:absolute;left:5.4px;top:.52rem;width:5px;height:2.5px;border-left:1.7px solid #fff;border-bottom:1.7px solid #fff;transform:rotate(-45deg)}

/* phone / tracker mockup */
.eep-tracker{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.eep-phone{width:250px;border-radius:26px;border:1px solid var(--ef-line-2);background:#0c0d12;padding:9px;box-shadow:0 24px 50px -24px rgba(0,0,0,.75)}
.eep-phone .eep-phead{display:flex;align-items:center;gap:6px;padding:4px 8px 8px}
.eep-mark{width:18px;height:18px;display:inline-flex;color:var(--ef-a2)}
.eep-mark svg{width:100%;height:100%}
.eep-plabel{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ef-dim);font-weight:700}
.eep-psel{margin-left:auto;font-size:.58rem;color:var(--ef-gold,#d8b45a);border:1px solid var(--ef-line);border-radius:20px;padding:2px 7px;font-weight:700;letter-spacing:.1em}
.eep-phero{margin:0 8px;border-radius:11px;overflow:hidden;height:96px}
.eep-phero img{width:100%;height:100%;object-fit:cover}
.eep-pbody{padding:9px 11px 11px}
.eep-pcode{font-size:.56rem;letter-spacing:.18em;color:#d8b45a;font-weight:700}
.eep-pname{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:1.02rem;font-weight:700;line-height:1.05;margin:2px 0 1px}
.eep-pcommon{font-size:.66rem;color:var(--ef-dim)}
.eep-ppill-g{display:inline-block;margin-top:7px;font-size:.58rem;color:var(--ef-green,#3fc7a1);border:1px solid rgba(63,199,161,.4);background:rgba(63,199,161,.08);border-radius:20px;padding:3px 8px;font-weight:600}
.eep-prow{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.eep-ppill{font-size:.54rem;color:var(--ef-dim);border:1px solid var(--ef-line);border-radius:20px;padding:2px 7px}
.eep-pcard{display:block;background:var(--ef-panel);border:1px solid var(--ef-line);border-radius:9px;padding:7px 9px;margin-top:8px}
.eep-pcard .k{display:block;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ef-green,#3fc7a1);font-weight:700}
.eep-pcard .v{display:block;font-size:.66rem;color:var(--ef-text);margin-top:3px}
.eep-ptl{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.eep-tl{display:flex;gap:7px;align-items:flex-start}
.eep-tl .ic{width:17px;height:17px;border-radius:6px;background:var(--ef-panel);border:1px solid var(--ef-line);flex:0 0 auto;font-size:9px;display:flex;align-items:center;justify-content:center}
.eep-tl .c{font-size:.6rem;line-height:1.35}.eep-tl .c b{font-weight:700}.eep-tl .c i{color:var(--ef-dim);font-style:normal;font-size:.52rem}
.eep-pbadges{margin-top:9px;border-top:1px solid var(--ef-line);padding-top:9px;display:flex;flex-wrap:wrap;gap:5px}
.eep-badge{font-size:.55rem;color:var(--ef-text);background:var(--ef-panel);border:1px solid var(--ef-line);border-radius:20px;padding:3px 7px}
.eep-live{font-size:.85rem;font-weight:700;color:var(--ef-a2);text-decoration:none}
.eep-live:hover{filter:brightness(1.2)}

/* why */
.eep-why{display:grid;grid-template-columns:1.25fr 1fr;gap:2rem;align-items:center;background:rgba(255,255,255,.028);border:1px solid var(--ef-line);border-radius:18px;padding:1.6rem;overflow:hidden}
.eep-whys{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.eep-whys li{position:relative;padding-left:1rem;font-size:.92rem;line-height:1.45;color:var(--ef-dim)}
.eep-whys li strong{color:var(--ef-text);font-weight:600}
.eep-whys li::before{content:"";position:absolute;left:0;top:.5rem;width:6px;height:6px;border-radius:50%;background:var(--ef-a2)}
.eep-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:280px;min-height:0}
.eep-grid img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:12px;border:1px solid var(--ef-line-2);display:block}
.eep-grid .tall{grid-row:1/3}

/* cta */
.eep-cta{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
 border:1px solid var(--ef-line-2);border-radius:18px;padding:1.5rem 1.8rem;
 background:linear-gradient(100deg,rgba(79,124,255,.10),rgba(255,79,163,.08))}
.eep-cta-l p{font-size:.95rem;color:var(--ef-dim);margin:.5rem 0 0;max-width:32rem}
.eep-contact{text-align:right;min-width:190px}
.eep-contact .nm{font-weight:700;font-size:1.05rem}
.eep-contact .row{font-size:.9rem;color:var(--ef-dim);margin-top:3px}
.eep-contact .row b{color:var(--ef-text);font-weight:600}
.eep-contact .web{margin-top:5px;font-weight:700;background:var(--ef-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* form */
.eep-form{border:1px solid var(--ef-line);border-radius:18px;padding:1.7rem 1.8rem;background:var(--ef-panel)}
.eep-form-head p,.eep-form-thanks p{color:var(--ef-dim);font-size:.95rem;margin:.5rem 0 0}
.eep-form-err{color:#ff8a8a!important}
.eep-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.1rem;margin-top:1.2rem}
.eep-form-grid .f{display:flex;flex-direction:column;gap:.35rem}
.eep-form-grid .f--full{grid-column:1/-1}
.eep-form-grid .f span{font-size:.8rem;color:var(--ef-dim)}
.eep-form-grid input,.eep-form-grid textarea{background:rgba(255,255,255,.03);border:1px solid var(--ef-line-2);border-radius:12px;color:var(--ef-text);padding:.75rem .9rem;font:inherit;font-size:.95rem}
.eep-form-grid input:focus,.eep-form-grid textarea:focus{outline:none;border-color:var(--ef-a2);box-shadow:0 0 0 3px rgba(138,92,255,.2)}
.eep-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.eep-submit{grid-column:1/-1;justify-self:start;margin-top:.3rem;background:var(--ef-grad);color:#fff;border:none;border-radius:999px;font-weight:800;font-size:1rem;padding:.85rem 1.6rem;cursor:pointer;transition:transform .15s,filter .15s}
.eep-submit:hover{transform:translateY(-2px);filter:brightness(1.08)}

/* responsive */
@media(max-width:820px){
  .eep-hero,.eep-moat,.eep-why{grid-template-columns:1fr}
  .eep-tracker{order:2}
  .eep-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;gap:8px}
  .eep-grid img{aspect-ratio:1/1;height:auto}
  .eep-grid .tall{grid-column:1/-1;grid-row:auto;aspect-ratio:16/9}
  .eep-cta{flex-direction:column;align-items:flex-start}
  .eep-contact{text-align:left}
  .eep-form-grid{grid-template-columns:1fr}
  .eep-phones{flex-direction:column;align-items:center}
}

/* keeper community + logging mockups ("it keeps going") */
.eep-keeper{display:flex;flex-direction:column;gap:1.4rem}
.eep-keeper-copy{text-align:center;max-width:44rem;margin:0 auto}
.eep-keeper-copy .eep-lede{color:var(--ef-dim);font-size:.98rem;line-height:1.55;margin:.7rem auto 0}
.eep-keeper-copy .eep-k{color:var(--ef-a2)}
.eep-phones{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap}
.eep-psel--v{color:var(--ef-green,#3fc7a1)!important;border-color:rgba(63,199,161,.4)!important}
.eep-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.eep-act{font-size:.55rem;border:1px solid var(--ef-line);border-radius:20px;padding:3px 8px;color:var(--ef-dim)}
.eep-act--g{background:var(--ef-grad);color:#fff;border:none;font-weight:700}
.you{font-size:.48rem;background:rgba(63,199,161,.16);color:var(--ef-green,#3fc7a1);border-radius:4px;padding:1px 4px;font-weight:800;vertical-align:middle;margin-left:2px}
.eep-keeper-name{font-size:1.15rem;font-weight:800;line-height:1.1}
.eep-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.eep-stats div{background:var(--ef-panel);border:1px solid var(--ef-line);border-radius:8px;padding:7px 3px;text-align:center}
.eep-stats b{display:block;font-size:1rem;background:var(--ef-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.eep-stats span{font-size:.44rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ef-dim)}
.eep-pcard-k{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ef-a2);font-weight:700;margin:11px 0 6px}
.eep-badgewall{display:flex;flex-wrap:wrap;gap:5px}

/* print — clean one-pager export (hides site chrome + the form) */
@media print{
  header.ef-header,.ef-header,.ef-footer,footer,.eep-form,.eep-live{display:none!important}
  body{background:#0a0b0f!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .eep{padding:.3in .4in;gap:1.1rem;max-width:100%}
  .eep-hero-photo{aspect-ratio:1/.66}
  .eep-grid{height:1.4in}
}

/* ============================================================================
   Living Record Tracker landing page (template-tracker.php)          v0.26.0
   Uses the theme's own tokens so it stays on-brand if the palette changes.
   ========================================================================= */
.eet{max-width:1080px;margin:0 auto;padding:2.2rem 1.15rem 4rem;color:var(--ef-text)}
.eet-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ef-dim);margin-bottom:.6rem}
.eet-h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1.08;margin:0 0 1rem;font-weight:800;letter-spacing:-.01em}
.eet-h2{font-size:clamp(1.4rem,3.6vw,2.1rem);line-height:1.18;margin:0 0 .85rem;font-weight:800;letter-spacing:-.01em}
.eet-intro,.eet-lede{font-size:clamp(1rem,2.1vw,1.16rem);line-height:1.62;color:var(--ef-dim);max-width:62ch}
.eet-intro strong,.eet-lede strong{color:var(--ef-text)}

/* Hero */
.eet-hero{padding:1.4rem 0 2.4rem;border-bottom:1px solid var(--ef-line)}
.eet-cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.eet-cta-center{justify-content:center}
.eet-btn{display:inline-block;padding:.85rem 1.5rem;border-radius:99px;font-weight:800;font-size:.95rem;text-decoration:none;transition:filter .15s,border-color .15s}
.eet-btn-primary{background:var(--ef-cta-buy);color:#fff;border:none}
.eet-btn-primary:hover{filter:brightness(1.08)}
.eet-btn-ghost{background:transparent;color:var(--ef-text);border:1px solid var(--ef-line-2)}
.eet-btn-ghost:hover{border-color:rgba(255,255,255,.4)}
.eet-code-note{margin-top:.9rem;font-size:.86rem;color:var(--ef-dim)}
.eet-code-note strong{color:var(--ef-text)}

/* Bands & cards */
.eet-band{padding:2.6rem 0;border-bottom:1px solid var(--ef-line)}
.eet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1.5rem}
.eet-card{background:rgba(255,255,255,.035);border:1px solid var(--ef-line);border-radius:16px;padding:1.15rem 1.2rem}
.eet-ico{font-size:1.5rem;line-height:1;margin-bottom:.55rem}
.eet-card h3{font-size:1.02rem;margin:0 0 .4rem;font-weight:800}
.eet-card p{margin:0;font-size:.92rem;line-height:1.58;color:var(--ef-dim)}

/* Feature band */
.eet-feature{padding:2.8rem 0;border-bottom:1px solid var(--ef-line)}
.eet-feature-in{background:rgba(255,255,255,.04);border:1px solid var(--ef-line-2);border-radius:20px;padding:1.9rem 1.6rem}
.eet-feature-in p{color:var(--ef-dim);line-height:1.62;max-width:62ch;margin:0 0 1.2rem}

/* Steps */
.eet-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin:1.5rem 0 1.3rem}
.eet-step{display:flex;gap:.75rem;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid var(--ef-line);border-radius:14px;padding:.9rem 1rem}
.eet-step span{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ef-grad);color:#fff;font-weight:800;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.eet-step p{margin:0;font-size:.92rem;line-height:1.5;color:var(--ef-dim)}

/* Promise callout */
.eet-promise{background:rgba(63,214,166,.08);border:1px solid rgba(63,214,166,.3);border-radius:14px;padding:1rem 1.15rem;font-size:.94rem;line-height:1.6;color:var(--ef-dim)}
.eet-promise strong{color:var(--ef-text)}

/* Closer */
.eet-closer{padding:2.8rem 0 0;text-align:center}
.eet-closer p{color:var(--ef-dim);line-height:1.65;max-width:60ch;margin:0 auto 1rem}
.eet-sign{font-style:italic;opacity:.8}

@media(max-width:640px){
  .eet-cta-row{flex-direction:column}
  .eet-btn{text-align:center}
}

/* ============================================================================
   Nav dropdowns (menu items with children)                          v0.26.2
   The header renders two levels; these give the second level a home. Desktop
   opens on hover AND focus-within so it's keyboard-reachable; mobile just
   nests the children inline, which needs no JS and never traps a tap.
   ========================================================================= */
.ef-nav li{position:relative}
.ef-nav .sub-menu{display:none;list-style:none;margin:0;padding:0}
.ef-nav .menu-item-has-children > a::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.42em;vertical-align:middle;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-.1em);opacity:.7}

@media(min-width:820px){
  /* Bridges the gap between the parent and the panel so it doesn't
     close while the pointer travels down. */
  .ef-nav .menu-item-has-children::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
  .ef-nav .menu-item-has-children:hover > .sub-menu,
  .ef-nav .menu-item-has-children:focus-within > .sub-menu{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:calc(100% + 12px);left:-.85rem;z-index:70;min-width:210px;
    padding:.4rem 0;border:1px solid var(--ef-line-2);border-radius:14px;
    background:color-mix(in srgb,var(--ef-bg) 97%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  .ef-nav .sub-menu a{display:block;padding:.6rem .95rem;font-size:.86rem;white-space:nowrap;border:0}
  .ef-nav .sub-menu a:hover{color:var(--ef-text);background:rgba(255,255,255,.06)}
}

@media(max-width:819px){
  /* In the open burger panel, children sit indented under their parent. */
  .ef-nav.open nav .sub-menu{display:block;padding-left:1rem}
  .ef-nav.open nav .sub-menu a{font-size:.94rem;opacity:.85}
  .ef-nav .menu-item-has-children > a::after{transform:rotate(45deg) translateY(-.1em)}
}

/* ---- Mobile submenu fix (v0.26.3) --------------------------------------
   The open-burger rule styles every <ul>, which was also catching .sub-menu
   and pinning it absolutely over the last menu item. Reset it back to normal
   flow and gate it behind a tap toggle so nothing sits permanently open. */
.ef-sub-toggle{display:none}
@media(max-width:819px){
  .ef-nav.open nav .menu-item-has-children{display:grid;grid-template-columns:1fr auto;align-items:center}
  .ef-nav.open nav .menu-item-has-children > a{border-bottom:0}
  .ef-nav.open nav .menu-item-has-children > a::after{display:none}
  .ef-nav.open nav .sub-menu{
    grid-column:1 / -1;
    position:static;inset:auto;display:none;
    margin:0;padding:0 0 .5rem 1rem;
    background:none;border:0;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .ef-nav.open nav .menu-item-has-children.is-open > .sub-menu{display:block}
  .ef-nav.open nav .sub-menu a{padding:.6rem 0;font-size:.94rem;opacity:.85;border-bottom:0}
  .ef-nav.open nav .ef-sub-toggle{display:flex;align-items:center;justify-content:center;
    background:none;border:0;color:var(--ef-dim);cursor:pointer;padding:.85rem .35rem;
    border-bottom:1px solid var(--ef-line)}
  .ef-sub-toggle span{display:block;width:.45em;height:.45em;font-size:1rem;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-.12em);transition:transform .2s}
  .ef-nav.open nav .menu-item-has-children.is-open > .ef-sub-toggle span{transform:rotate(-135deg) translateY(-.12em)}
}

/* ---------------------------------------------------------- tracker signin ---
   New keepers get the big CTA; returning ones were left with no way in. */
/* Quiet enough not to compete with the two buttons above it, loud enough to
   find. The label stays dim; the link itself carries accent colour, weight and
   a rule under it so it reads as a link rather than a sentence. */
.eet-signin{margin:1.1rem 0 0;font-size:.95rem;color:rgba(255,255,255,.58)}
.eet-signin a{
  color:var(--ef-a1,#7c5cff);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(124,92,255,.45);
  padding-bottom:1px;
  transition:color .15s,border-color .15s;
}
.eet-signin a::after{content:" →";opacity:.7}
.eet-signin a:hover,
.eet-signin a:focus-visible{
  color:var(--ef-a3,#ef5a8c);
  border-bottom-color:currentColor;
}
.eet-signin--center{text-align:center}

/* ------------------------------------------------- WooCommerce My Account ---
   Woo ships this page unstyled, so the endpoint nav rendered as a bare stack of
   oversized links flush to the viewport edge. Padding and type sizing only —
   an earlier attempt put a grid on .u-columns and collapsed the login/register
   columns into strips, so nothing here touches the login/register layout: no
   grid, float or width anywhere. The one display: is on the nav anchors, which
   are self-contained and need it for their padding to work. */
.woocommerce-account .woocommerce{
  padding-left:clamp(1rem,4vw,2rem);
  padding-right:clamp(1rem,4vw,2rem);
  padding-bottom:3rem;
}

/* The endpoint nav — Dashboard / My Collection / Orders / … */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0 0 2rem;padding:0;
  border:1px solid rgba(255,255,255,.1);border-radius:16px;
  background:rgba(255,255,255,.03);
  overflow:hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-account .woocommerce-MyAccount-navigation li + li{
  border-top:1px solid rgba(255,255,255,.07);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; /* anchors are inline — without this the vertical padding
                    does nothing and the rows collapse into each other */
  padding:.8rem 1.1rem;
  font-size:.95rem;font-weight:500;line-height:1.3;
  text-decoration:none;color:inherit;opacity:.7;
  transition:opacity .15s,background .15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  opacity:1;background:rgba(255,255,255,.05);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  opacity:1;font-weight:600;
  box-shadow:inset 3px 0 0 var(--ef-a2,#8a5cff);
}

/* Login / register cards (cosmetics only). */
.woocommerce-account form.login,
.woocommerce-account form.register{
  border:1px solid rgba(255,255,255,.11);border-radius:18px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(124,92,255,.07),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:0 24px 60px -32px rgba(0,0,0,.95);
  padding:26px 24px;
}
.woocommerce-account #customer_login h2{
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;opacity:.5;margin:0 0 .85rem;
}
.woocommerce-account form.login label,
.woocommerce-account form.register label{font-size:.82rem;opacity:.62}
.woocommerce-account form.login input[type=text],
.woocommerce-account form.login input[type=email],
.woocommerce-account form.login input[type=password],
.woocommerce-account form.register input[type=text],
.woocommerce-account form.register input[type=email],
.woocommerce-account form.register input[type=password]{
  padding:.8rem .9rem;
  border:1px solid rgba(255,255,255,.13);border-radius:12px;
  background:rgba(0,0,0,.28);color:inherit;font:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.woocommerce-account form.login input:focus,
.woocommerce-account form.register input:focus{
  outline:none;border-color:rgba(150,120,255,.6);
  box-shadow:0 0 0 3px rgba(150,120,255,.16);
}
.woocommerce-account button.woocommerce-form-login__submit,
.woocommerce-account button.woocommerce-form-register__submit{
  border:0;border-radius:999px;padding:.8rem 1.75rem;
  background:linear-gradient(135deg,#7c5cff,#c94fa5 55%,#ef5a8c);
  color:#fff;font-weight:600;cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(201,79,165,.75);
  transition:filter .15s,transform .15s;
}
.woocommerce-account button.woocommerce-form-login__submit:hover,
.woocommerce-account button.woocommerce-form-register__submit:hover{
  filter:brightness(1.08);transform:translateY(-1px);
}
.woocommerce-account .woocommerce-form-login__rememberme{opacity:.6;font-size:.9rem}
.woocommerce-account .woocommerce-privacy-policy-text p{font-size:.8rem;opacity:.5;line-height:1.55}
.woocommerce-account .woocommerce-LostPassword{font-size:.9rem;opacity:.6}
.woocommerce-account .woocommerce-LostPassword a{color:inherit;text-underline-offset:3px}

/* ------------------------------------------------- clickable nav parents -----
   A caret says "this opens a menu"; it does not say "this also goes somewhere".
   Shop and Tracker are real pages, so the label gets a link's underline on
   hover and the dropdown opens with an explicit way in. */
.ef-nav .menu-item-has-children > a:hover,
.ef-nav .menu-item-has-children > a:focus-visible{
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1.5px;
}
/* The caret is decoration, not part of the link text. */
.ef-nav .menu-item-has-children > a::after{text-decoration:none}

.ef-nav .sub-menu .ef-parent-self > a{
  font-weight:700;
  color:var(--ef-text);
}
@media (min-width:981px){
  /* Sits above the children as a distinct destination, not another sibling. */
  .ef-nav .sub-menu .ef-parent-self{
    border-bottom:1px solid rgba(255,255,255,.1);
    margin-bottom:.25rem;
    padding-bottom:.25rem;
  }
  .ef-nav .sub-menu .ef-parent-self > a::after{
    content:" →";
    opacity:.55;
  }
}