/* =============================================================
   EPSS — shop-single-v2.css
   PDP v2 (OPMS-style 3-column redesign). Loaded only on ?pdp2=1.
   Palette: green-only. dark green #1a3328 / brand green #1E7A52.
   ============================================================= */

.epss-v2-main{
  /* tokens matched to the location/store pages */
  --eg-dark:#2d2d2d;     /* body text */
  --eg-h1:#34C26E;       /* store-page h1 (bright green, weight 800 Roboto) */
  --eg-h2:#15663D;       /* store-page h2 (Roboto Slab) */
  --eg-green:#1E7A52;    /* brand green (buttons/accents) */
  --eg-link:#2CA660;     /* store-page link green */
  --eg-green-soft:#e3f2eb;
  --eg-bg-soft:#f5faf7;
  --eg-line:#e3e3e3;
  --eg-line-soft:#f0f0f0;
  --eg-muted:#5a5a5a;    /* store-page paragraph grey */
  --eg-star:#de7921;
  --eg-out:#b12704;
  color:var(--eg-dark);
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  width:100%;background:#fff;
}
/* Centered inner column (util strip stays full-bleed above this) */
.epss-v2-container{max-width:1480px;margin:0 auto;padding:0 28px;}
@media(max-width:720px){.epss-v2-container{padding:0 16px}}
.epss-v2-main h1,.epss-v2-main h2,.epss-v2-main h3,
.epss-v2-card-title,.epss-v2-about h2{
  font-family:'Roboto Slab',Georgia,serif;
}

/* Utility strip */
.epss-v2-util{
  display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;align-items:center;
  background:var(--eg-dark);color:#dff0e7;font-size:12.5px;letter-spacing:.2px;
  padding:8px 16px;text-align:center;
}
.epss-v2-util span[aria-hidden]{opacity:.5}

/* Breadcrumb */
.epss-v2-crumb{padding:12px 0 4px;font-size:13px;color:var(--eg-muted)}
.epss-v2-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.epss-v2-crumb a{color:var(--eg-link);text-decoration:none}
.epss-v2-crumb a:hover{text-decoration:underline}
.epss-v2-sep{color:#bbb;margin-left:6px}

/* Product wrapper — neutralize WooCommerce/GeneratePress grid + width caps
   that would otherwise squeeze our custom layout into one cell.
   box-sizing:border-box is critical: WooCommerce's .product adds ~20px left/right
   padding, and with content-box + width:100% that pushed the whole wrapper ~40px
   wider than its column, spilling everything to the RIGHT on mobile (the "everything
   is to the right" bug, 2026-06-18). border-box keeps padding inside the 100%. */
.epss-v2-pdp{display:block !important;max-width:none !important;width:100% !important;margin:0 !important;float:none !important;box-sizing:border-box !important;}
/* On phones, drop that wrapper padding entirely so the gallery uses the full column
   width and sits centered between the container's own 16px gutters. */
@media(max-width:720px){.epss-v2-pdp{padding-left:0 !important;padding-right:0 !important;}}

/* Grid — fr units (with minmax(0,…) so long words can't blow out a column)
   let the 28px gaps subtract from track sizing → no horizontal overflow. */
.epss-v2-grid{
  display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.12fr) minmax(0,0.86fr);
  gap:28px;align-items:start;padding:8px 0 24px;
}
@media(max-width:1080px){.epss-v2-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.epss-v2-rail{grid-column:1/-1}}
/* minmax(0,1fr) (not bare 1fr) so a non-shrinkable child — e.g. the gallery's
   fixed-width thumbnail strip — can't blow the single mobile column past the
   viewport and get clipped by overflow-x:clip (the "page cut in half / main
   image off-screen on iPhone" bug, 2026-06-18). */
@media(max-width:720px){.epss-v2-grid{grid-template-columns:minmax(0,1fr);gap:22px}}

/* Gallery column — let the plugin gallery breathe, framed */
.epss-v2-gallery{position:sticky;top:14px}
@media(max-width:1080px){.epss-v2-gallery{position:static}}
.epss-v2-gallery .epss-product-gallery{max-width:100%;margin:0}
/* Suppress the Loyverse plugin's full-gallery lightbox: its JS targets a different DOM,
   so in the v2 layout expanding renders all images inline and breaks the page. Guests
   view every image by swiping/scrolling the carousel below (and the per-variant row). */
.epss-v2-gallery .epss-gallery-lightbox{display:none !important;}
/* Carousel model (2026-06-18): ALL images stay visible as side-by-side slides so the
   gallery can be swiped/scrolled left↔right. (Replaces the old "show only .active,
   display:none the rest" single-image model.) */
.epss-v2-gallery .epss-product-gallery .epss-gallery-item{display:block !important;}
/* Clean click-to-zoom lightbox (our replacement for the broken plugin one). */
.epss-v2-zoom{position:fixed;inset:0;z-index:99999;background:rgba(15,30,22,.93);display:none;align-items:center;justify-content:center}
.epss-v2-zoom.is-open{display:flex}
.epss-v2-zoom-img{max-width:90vw;max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:8px;background:#fff}
.epss-v2-zoom-x{position:absolute;top:16px;right:22px;background:none;border:0;color:#fff;font-size:40px;line-height:1;cursor:pointer;opacity:.85}
/* On-brand green nav buttons, chevron FLEX-CENTERED (was a translucent grey box with the
   chevron sitting low off-center). 2026-06-19. */
.epss-v2-zoom-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;background:rgba(30,122,82,.55);border:0;color:#fff;font-size:30px;line-height:1;width:46px;height:58px;border-radius:10px;cursor:pointer;opacity:.92;transition:background .12s,opacity .12s}
.epss-v2-zoom-prev{left:18px}.epss-v2-zoom-next{right:18px}
.epss-v2-zoom-x:hover{opacity:1}
.epss-v2-zoom-nav:hover{opacity:1;background:#1E7A52}
@media(max-width:600px){.epss-v2-zoom-nav{width:42px;height:54px;font-size:30px}}
/* Main gallery = horizontal swipe/scroll carousel. Each image is a full-width
   scroll-snap slide laid out in a row; guests swipe (touch) or scroll (trackpad) to
   move through them, or tap a thumbnail / pick a flavor to jump (JS-driven).
   box-sizing:border-box keeps the framed box INSIDE its grid column (the old
   content-box + 10px padding made it ~22px wider than the column, so the image looked
   shoved to the right — fixed here). object-fit:contain centers each image both axes. */
.epss-v2-gallery .epss-gallery-main{
  border:1px solid var(--eg-line);border-radius:10px;background:#fff;
  box-sizing:border-box;width:100%;max-width:100%;
  aspect-ratio:auto !important;height:auto !important;min-height:0 !important;
  /* !important on the layout trio so the Loyverse plugin's inline gallery <style>
     (.epss-gallery-main{position:relative;padding-bottom:100%}) and its abs-positioned
     images can NEVER turn this back into a stacked/grid box on a real phone. */
  display:flex !important;flex-wrap:nowrap !important;align-items:stretch;justify-content:flex-start;padding:0;
  overflow-x:auto !important;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scrollbar-width:none;
}
.epss-v2-gallery .epss-gallery-main::-webkit-scrollbar{display:none}
/* Constant green scroll-progress bar (built by JS, only when there's >1 image). The
   carousel's own scrollbar is hidden + iOS hides overlay scrollbars, so this is the
   always-visible "swipe for more" hint. The thumb width = visible fraction and slides
   right as the guest scrolls. */
.epss-v2-gallery .epss-v2-scrollhint{
  position:relative;height:5px;width:100%;max-width:100%;
  border-radius:5px;background:var(--eg-green-soft);overflow:hidden;
  margin:10px auto 2px;
}
/* DESKTOP: no scroll-progress bar — the wrapped thumbnail grid IS the navigation, so the
   "swipe for more" hint is redundant (owner request 2026-06-18). Mobile keeps it (scroll model). */
@media(min-width:721px){ .epss-v2-gallery .epss-v2-scrollhint{display:none !important} }
.epss-v2-gallery .epss-v2-scrollhint__thumb{
  position:absolute;top:0;left:0;height:100%;width:20%;border-radius:5px;
  background:var(--eg-green);transition:left .08s linear,width .08s linear;
}
.epss-v2-gallery .epss-gallery-item{
  position:static !important;flex:0 0 100% !important;scroll-snap-align:center;
  width:100% !important;max-width:100% !important;height:440px !important;max-height:440px !important;
  object-fit:contain;margin:0 !important;padding:12px;box-sizing:border-box;cursor:zoom-in;
}
/* Carousel thumbnails — uniform square tiles. Source images vary in aspect (square
   lineup grids 344x350/784x800 vs tall portrait flavors 843x1559 vs 500x925), and the
   plugin left the thumb <img> height unconstrained, so tall sources overflowed the fixed
   box (rendered ~80x205, raggedly spilling out of the row). Force every thumb image to
   fill the same box with object-fit:contain (whole product shown, no crop, consistent). */
/* Thumbnail strip = a single horizontal SCROLL row (not a wrapped 2-row grid — which
   read as "still a grid" on mobile, 2026-06-18). nowrap keeps one row; overflow-x:auto
   lets it scroll AND gives it 0 min-content width, so it can't drag the column wider
   than the viewport (the grid's minmax(0,1fr) track is the backstop either way). */
/* DESKTOP: thumbnails WRAP into a tidy multi-row grid under the main image (owner request 2026-06-18 —
   no horizontal scroll on the website). MOBILE keeps the single scroll row (overridden in the @media
   block below) so a phone column isn't forced into many short rows. */
.epss-v2-gallery .epss-gallery-thumbnails{flex-wrap:wrap !important;overflow:visible !important;justify-content:flex-start;}
.epss-v2-gallery .epss-gallery-thumbnails .epss-gallery-thumb{
  flex:0 0 66px !important;width:66px !important;height:66px !important;
  overflow:hidden;padding:3px;box-sizing:border-box;
}
.epss-v2-gallery .epss-gallery-thumbnails .epss-gallery-thumb img{
  width:100% !important;height:100% !important;object-fit:contain !important;
  display:block;margin:0;
}
.epss-v2-gallery .epss-swipe-indicator{display:none}
/* Gallery prev/next toggle buttons — on-brand green (the plugin default was an
   off-theme translucent-white circle). */
.epss-v2-gallery .epss-gallery-nav{
  background:var(--eg-green) !important;color:#fff !important;border:none !important;
  width:38px;height:38px;border-radius:50% !important;opacity:.96;
  box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:20px;
}
.epss-v2-gallery .epss-gallery-nav:hover{background:var(--eg-h2) !important;opacity:1}
.epss-v2-ph{
  border:1px solid var(--eg-line);border-radius:10px;min-height:320px;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.epss-v2-ph img{max-width:70%;height:auto}

/* Info column */
.epss-v2-brand{color:var(--eg-link);font-size:13.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-bottom:4px}
.epss-v2-brand-cat{color:var(--eg-muted);font-weight:400;text-transform:none}
/* Brand heading treatment — green-light fill + black text-stroke (the signature
   "black outline" used on the homepage + location pages). Matches the store pages.
   Higher specificity + !important to beat WooCommerce's .product_title styling. */
.epss-v2-info h1.epss-v2-title{
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,sans-serif!important;
  font-weight:800!important;color:var(--eg-h1)!important;
  font-size:30px;line-height:1.2;margin:0 0 10px;letter-spacing:.005em;
  -webkit-text-stroke:2px #000;paint-order:stroke fill;
}
/* Fallback for browsers without paint-order: simulate the outline with shadows. */
@supports not (paint-order: stroke fill){
  .epss-v2-info h1.epss-v2-title{
    -webkit-text-stroke:0;
    text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 0 rgba(0,0,0,.4);
  }
}
.epss-v2-rating{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--eg-muted)}
.epss-v2-stars{color:var(--eg-star);font-size:15px;letter-spacing:1px}
.epss-v2-rule{border-top:1px solid var(--eg-line);margin:14px 0}

.epss-v2-pricerow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Brand logo: a uniform, readable chip pushed to the far RIGHT of the row (after the
   stock pill). Price + pill keep their original left placement. The fixed box gives
   every product's logo the SAME footprint (wide wordmark vs square mark alike); white
   "mask" logos sit on their bg color (inline style). */
/* No framed box (owner): the logo sits bare on the row, pushed right. Background
   comes only from the brand's own logo_bg (inline) for white-mask logos; default
   transparent, no border. */
.epss-v2-brandlogo{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  margin-left:auto;
  /* Taller chip (owner 2026-06-18) so a SQUARE mark grows with the height and reads
     on-par with a wide wordmark (which stays capped by max-width). */
  height:48px;max-width:150px;box-sizing:border-box;background:transparent;
}
/* Override WooCommerce/GeneratePress product-image rules (max-width/height/aspect-
   ratio !important) so the logo is contained in the chip at its real proportions. */
.epss-v2-brandlogo img{
  max-width:100% !important;max-height:100% !important;
  /* height:100% (not auto) so a dimensionless SVG (e.g. One Tank: viewBox only, no
     width/height attrs) gets a concrete size instead of collapsing in this chip. */
  width:auto !important;height:100% !important;aspect-ratio:auto !important;
  object-fit:contain !important;margin:0 !important;padding:0 !important;
  border-radius:0 !important;display:block;
}
.epss-v2-price{font-size:28px;font-weight:700;color:var(--eg-h2)}
.epss-v2-price .woocommerce-Price-amount{font-weight:700}
.epss-v2-price del{color:var(--eg-muted);font-weight:400;font-size:18px;margin-right:6px}
/* Availability badge — sits next to the price */
.epss-v2-avail{display:inline-flex;align-items:center;gap:7px;background:var(--eg-green-soft);color:var(--eg-green-dark);font-weight:700;font-size:12.5px;line-height:1.2;padding:6px 13px;border-radius:20px}
.epss-v2-avail::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--eg-green);flex:none}
.epss-v2-avail.is-out{background:#f3f3f3;color:var(--eg-muted)}
.epss-v2-avail.is-out::before{background:#d32f2f}

/* Swatches */
.epss-v2-swatch-wrap{margin-top:16px}
/* "Choose your <flavor/color/size>:" — EPSS signature look: light-green fill + black outline,
   bigger so it's clearly visible. The variant WORD is dynamic (set in PHP from the attribute).
   2026-06-19. */
.epss-v2-lab{
  font-family:'Roboto Slab',Georgia,serif;font-size:22px;font-weight:800;
  color:#34C26E;-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:none;
  letter-spacing:.005em;margin-bottom:12px;text-transform:capitalize;
}
/* Older engines without paint-order would draw the stroke OVER the fill (all black) — drop the
   stroke there and keep a bold dark-green label so it stays readable. */
@supports not (paint-order: stroke fill){ .epss-v2-lab{-webkit-text-stroke:0;color:var(--eg-h2)} }
@media(max-width:600px){ .epss-v2-lab{font-size:18px;-webkit-text-stroke:1.5px #000} }
/* Desktop swatches: organic flex-wrap that lands ~5 per row, NOT a rigid repeat(5) grid (that read
   as "too boxy"). flex:1 1 82px = each chip wants ~82px (so ~5 fit the ~460px info column) but the row
   flexes to fill its width and the last/short row sizes naturally — the organic look, just tidier.
   max-width caps a lonely chip from ballooning; image + name/price keep their size. */
.epss-v2-swatches{display:flex;flex-wrap:wrap;gap:10px}
/* 2-dimension (size x flavor) grouped picker: stack a row per size, flavors inside. 2026-06-19 */
.epss-v2-swatches.is-grouped{flex-direction:column;flex-wrap:nowrap;gap:14px;align-items:stretch}
.epss-v2-swgroup{display:flex;flex-direction:column;gap:10px}
.epss-v2-swgroup-label{font-weight:800;font-size:17px;color:var(--eg-dark);text-transform:uppercase;letter-spacing:.04em}
.epss-v2-swgroup-row{display:flex;flex-wrap:wrap;gap:12px}
/* Grouped (size x flavor) tiles read bigger than the flat picker: larger image + name/price
   so "6oz / 16oz" + "Gold $14.99" aren't tiny. (owner 2026-06-19) */
/* Each flavor tile takes ~1/3 of its size-row (minus the gap), so a 3-flavor size ALWAYS lands 3
   across — at full desktop, a half-width column, or mobile — and the image SCALES to fill the tile
   instead of a fixed px that only let 2 fit in a narrow column. >3 flavors wrap to a second row of 3.
   (owner 2026-06-19) */
.epss-v2-swatches.is-grouped .epss-v2-sw{flex:1 1 calc(33.333% - 8px);max-width:calc(33.333% - 8px);min-width:0;padding:9px 8px}
.epss-v2-swatches.is-grouped .epss-v2-sw img{width:100%;max-width:110px;height:auto;aspect-ratio:1/1;object-fit:contain;margin:0 auto 5px}
.epss-v2-swatches.is-grouped .epss-v2-sw-name{font-size:15px;line-height:1.15}
.epss-v2-swatches.is-grouped .epss-v2-sw-price{font-size:15px;line-height:1.15}
@media(max-width:600px){
  /* GROUPED (size x flavor) picker on mobile — BLOCK-stacked so groups can NEVER overlap (the
     flex/scroll-row version layered 16oz over 6oz). Each size is a full-width block: bold label on
     its own line, then a wrapping row of flavor tiles below it, with clear space between sizes.
     name/price never wrap ("Gold $14.99"). General to ALL 2-dimension products. (owner 2026-06-19) */
  .epss-v2-swatches.is-grouped{display:block}
  .epss-v2-swgroup{display:block;margin:0 0 20px}
  .epss-v2-swgroup:last-child{margin-bottom:0}
  .epss-v2-swgroup-label{display:block;font-size:15px;margin:0 0 8px}
  .epss-v2-swgroup-row{display:flex;flex-wrap:wrap;gap:10px;overflow:visible}
  .epss-v2-swatches.is-grouped .epss-v2-sw{flex:1 1 calc(33.333% - 7px);max-width:calc(33.333% - 7px);min-width:0;width:auto;padding:7px}
  .epss-v2-swatches.is-grouped .epss-v2-sw img{width:100%;max-width:90px;height:auto;aspect-ratio:1/1;object-fit:contain;margin:0 auto 4px}
  .epss-v2-swatches.is-grouped .epss-v2-sw-name,.epss-v2-swatches.is-grouped .epss-v2-sw-price{font-size:13px;line-height:1.2;letter-spacing:0;white-space:nowrap;overflow-wrap:normal;word-break:normal}
}
.epss-v2-sw{
  border:1px solid #d5d9d9;border-radius:10px;background:#fff;cursor:pointer;color:var(--eg-dark);
  padding:6px 8px;flex:1 1 82px;max-width:122px;min-width:0;text-align:center;transition:border-color .12s,box-shadow .12s;
}
.epss-v2-sw:hover{border-color:var(--eg-green);background:var(--eg-green);color:#fff}
.epss-v2-sw:hover .epss-v2-sw-name,.epss-v2-sw:hover .epss-v2-sw-price{color:#fff}
.epss-v2-sw.is-on{border:2px solid var(--eg-green);box-shadow:0 0 0 3px var(--eg-green-soft);padding:5px 9px;background:#fff;color:var(--eg-dark)}
.epss-v2-sw.is-on .epss-v2-sw-name{color:var(--eg-dark)}
.epss-v2-sw.is-on .epss-v2-sw-price{color:var(--eg-green)}
/* Kill the lingering BLACK UA focus ring left after a click/tap (it persisted until a click
   elsewhere repainted the swatch). Mouse selection = no ring; keyboard focus still gets the
   green ring for accessibility. Selected state is the clean white + green .is-on above. */
.epss-v2-sw:focus{outline:none}
.epss-v2-sw:focus:not(:focus-visible){outline:none;box-shadow:none}
.epss-v2-sw.is-on:focus:not(:focus-visible){box-shadow:0 0 0 3px var(--eg-green-soft)}
.epss-v2-sw:focus-visible{outline:none;border-color:var(--eg-green);box-shadow:0 0 0 3px var(--eg-green-soft)}
/* Bigger, more visible variant image; tighter name/price so the swatch stays compact. */
.epss-v2-sw img{width:62px;height:62px;object-fit:contain;display:block;margin:0 auto 3px}
.epss-v2-sw .epss-v2-sw-name{font-size:11.5px;font-weight:700;display:block;line-height:1.1;color:var(--eg-dark)}
.epss-v2-sw .epss-v2-sw-price{font-size:11.5px;color:var(--eg-green);font-weight:700;line-height:1.1;display:block}
.epss-v2-sw.is-out{opacity:.5}
.epss-v2-sw.is-out .epss-v2-sw-price{color:var(--eg-out)}
/* Store filter (owner 2026-06-19): flavors out of stock at the SELECTED store blur
   out; in-stock ones stay sharp. Still clickable — clicking a blurred one reverts to
   the All Stores view. */
.epss-v2-sw.is-oos-store{filter:blur(1.6px) grayscale(.5);opacity:.45;cursor:pointer;transition:opacity .15s,filter .15s}
.epss-v2-sw.is-oos-store:hover{opacity:.7;background:#fff;border-color:var(--eg-border,#e3e3e3)}
.epss-v2-sw.is-oos-store:hover .epss-v2-sw-name,.epss-v2-sw.is-oos-store:hover .epss-v2-sw-price{color:inherit}
/* Mobile: pack exactly 5 flavors per row (owner request 2026-06-18). Grid with
   minmax(0,1fr) = 5 equal columns that can never overflow the column at any phone
   width; compact image + type keeps it tidy rather than cluttered. Desktop keeps the
   roomier flex-wrap layout above. */
/* Mobile: 4 flavors per row (owner request 2026-06-20, up-sized from 5) so the
   image + name + price are bigger and clearer. Wider tiles let whole flavor words
   stay on one line (no wrapping); ellipsis guards the rare extra-long name. */
@media(max-width:720px){
  .epss-v2-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .epss-v2-sw{min-width:0;padding:6px 3px;flex:none;max-width:none}
  .epss-v2-sw.is-on{padding:5px 2px}
  .epss-v2-sw img{width:58px;height:58px;margin:0 auto 3px}
  /* Phone keeps the thumbnail strip as a single horizontal SCROLL row. */
  .epss-v2-gallery .epss-gallery-thumbnails{flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:hidden !important;}
  .epss-v2-sw .epss-v2-sw-name{font-size:10.5px;line-height:1.15;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .epss-v2-sw .epss-v2-sw-price{font-size:10.5px}
}

/* "Images for this size" — per-variant image set */
.epss-v2-varzone{margin-top:14px}
.epss-v2-varzone-lbl{font-size:12px;color:var(--eg-muted);margin-bottom:6px}
.epss-v2-varzone-row{display:flex;gap:10px;flex-wrap:wrap}
.epss-v2-vi{border:1px solid #d5d9d9;border-radius:8px;background:#fff;padding:5px;width:72px;height:72px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.epss-v2-vi.is-on{border:2px solid var(--eg-green);box-shadow:0 0 0 2px var(--eg-green-soft)}
.epss-v2-vi:focus{outline:none}
.epss-v2-vi:focus:not(:focus-visible){box-shadow:none}
.epss-v2-vi:focus-visible{outline:none;border-color:var(--eg-green);box-shadow:0 0 0 2px var(--eg-green-soft)}
.epss-v2-vi img{max-width:100%;max-height:100%;object-fit:contain}

/* About */
.epss-v2-about{margin-top:20px}
.epss-v2-about h2{font-size:16px;margin:0 0 6px;color:var(--eg-h2)}
.epss-v2-about-body{font-size:14px;line-height:1.6}
.epss-v2-about-body ul{margin:0;padding-left:18px}
.epss-v2-about-body li{margin:3px 0}
.epss-v2-bullets{margin:0;padding-left:18px;font-size:14px;line-height:1.65}
.epss-v2-bullets li{margin:4px 0}

/* FAQ — numbered accordion (<details>/<summary>). Unique classes (faqq/faqa) so they
   never collide with the stock table's .epss-v2-q cell. Content stays in the DOM, so
   it's fully indexable + AI-scrapable; the accordion just improves scannability. */
.epss-v2-faq{max-width:900px;counter-reset:epssfaq;border-top:1px solid var(--eg-line)}
.epss-v2-qa{border-bottom:1px solid var(--eg-line)}
.epss-v2-faqq{
  list-style:none;cursor:pointer;display:flex;gap:9px;align-items:flex-start;
  font-weight:700;color:var(--eg-dark);font-size:15px;line-height:1.4;
  padding:14px 30px 14px 0;position:relative;counter-increment:epssfaq;
}
.epss-v2-faqq::-webkit-details-marker{display:none}     /* hide native triangle */
.epss-v2-faqq::before{content:counter(epssfaq) ".";color:var(--eg-green);font-weight:800;flex:none}
.epss-v2-faqq::after{
  content:"+";position:absolute;right:2px;top:11px;
  font-size:21px;font-weight:400;color:var(--eg-green);line-height:1;
}
.epss-v2-qa[open] .epss-v2-faqq::after{content:"\2212"}  /* minus when open */
.epss-v2-qa[open] .epss-v2-faqq{color:var(--eg-h2)}
.epss-v2-faqq:hover{color:var(--eg-h2)}
.epss-v2-faqa{margin:0 0 16px;padding-left:19px;color:var(--eg-muted);font-size:14px;line-height:1.6}

/* Hide the real WC add-to-cart form in v1 (buying = coming soon) but keep it in DOM for JS */
.epss-v2-wcform{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Availability rail */
.epss-v2-rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:14px}
@media(max-width:1080px){.epss-v2-rail{position:static}}
.epss-v2-getit{border:1px solid #d5d9d9;border-radius:12px;background:var(--eg-bg-soft);padding:16px}
.epss-v2-card-title{font-size:16px;margin:0 0 10px;color:var(--eg-h2)}
.epss-v2-card-sub{font-size:12.5px;color:var(--eg-muted);margin:0 0 10px}

/* Fulfillment tab row (visual; all disabled = coming soon, each with its own badge) */
.epss-v2-ff{display:flex;gap:8px;margin-bottom:12px}
.epss-v2-ffc{flex:1;border:1px solid #d5d9d9;border-radius:9px;background:#fff;padding:8px;text-align:left;cursor:not-allowed;opacity:.95}
/* Label was inheriting white (invisible on the light buttons) — force dark green. */
.epss-v2-ffc b{display:block;font-size:12.5px;line-height:1.2;color:var(--eg-h2);font-weight:700}
.epss-v2-ffc span{font-size:10px;color:var(--eg-muted);display:block;margin-top:2px}
/* Per-button "Coming soon" mini banner */
.epss-v2-ffc-soon{display:block;margin-top:7px;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--eg-green);background:var(--eg-green-soft);border-radius:4px;text-align:center;padding:2px 3px}

/* Store filter — pivot the stock table to one store's per-flavor stock */
.epss-v2-storefilter{margin:0 0 12px}
.epss-v2-storefilter label{display:block;font-size:12px;font-weight:700;color:var(--eg-muted);margin-bottom:5px}
.epss-v2-storefilter select{
  /* Store picker pops via the GREEN border + green arrow + the brand stroked-outline text
     (green fill, black -webkit-text-stroke, scaled down from the 2px heading version to
     suit 13px). Inner stays WHITE (owner: no green fill inside the box).
     color-scheme:light pins it to our colors even when the visitor's OS is in dark mode
     (otherwise the browser themes the native select dark on a light page). */
  color-scheme:light;
  width:100%;border:2px solid #2CA660;border-radius:9px;background:#fff;
  padding:9px 32px 9px 11px;font-size:15px;color:#2CA660;font-weight:800;
  -webkit-text-stroke:0.6px #000;paint-order:stroke fill;
  font-family:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232CA660' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}
.epss-v2-storefilter select:focus{outline:none;border-color:#2CA660;box-shadow:0 0 0 3px var(--eg-green-soft)}

.epss-v2-availh{font-size:13px;font-weight:700;color:var(--eg-dark);margin-bottom:6px}
.epss-v2-stock{width:100%;border-collapse:collapse;font-size:12.5px}
.epss-v2-stock td{padding:6px 2px;border-bottom:1px solid #e8efe9;vertical-align:middle}
.epss-v2-store{color:var(--eg-dark);line-height:1.25}
.epss-v2-store a{color:var(--eg-link);text-decoration:none;font-weight:500}
.epss-v2-store a:hover{text-decoration:underline}
.epss-v2-q{text-align:right;font-weight:700;color:var(--eg-green);white-space:nowrap;width:90px}
.epss-v2-q--out{color:var(--eg-muted);font-weight:400}
.epss-v2-stock-empty{color:var(--eg-muted);font-style:italic;text-align:center;padding:14px 4px}
.epss-v2-pickupnote{font-size:11px;color:var(--eg-muted);margin:10px 0 0;line-height:1.4}

.epss-v2-cta{display:block;width:100%;margin-top:12px;background:var(--eg-green);color:#fff;border:none;border-radius:24px;padding:12px;font-weight:700;font-size:14px;cursor:not-allowed;opacity:.9}
.epss-v2-ctanote{text-align:center;font-size:10.5px;color:var(--eg-muted);margin-top:5px}

/* Full-width details */
.epss-v2-full{padding:8px 0 44px}
.epss-v2-section{margin-bottom:26px}
.epss-v2-section h2{font-size:19px;color:var(--eg-h2);border-bottom:2px solid var(--eg-h2);padding-bottom:6px;margin:0 0 12px}
.epss-v2-desc{font-size:14.5px;line-height:1.7;max-width:900px}
.epss-v2-desc h3{font-size:17px;font-weight:600;color:#222;margin:18px 0 6px}
/* Specifications — CSS multi-column so pairs flow DOWN column 1 then column 2
   (length/width/weight stay consecutive, not split across), and the browser
   auto-balances the two columns to near-equal length. */
.epss-v2-spec{columns:2;column-gap:56px;margin:0;max-width:1100px}
.epss-v2-spec-item{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:9px 2px;border-bottom:1px solid #eaeaea;font-size:14px;break-inside:avoid;-webkit-column-break-inside:avoid}
.epss-v2-spec-k{color:var(--eg-muted);font-weight:600;margin:0}
.epss-v2-spec-v{color:var(--eg-dark);text-align:right;margin:0}
@media(max-width:780px){.epss-v2-spec{columns:1}}
.epss-v2-compliance{font-size:12px;color:var(--eg-muted);font-style:italic;border-top:1px solid var(--eg-line);padding-top:14px;margin-top:8px;max-width:980px}

/* You might also like — carousel */
.epss-v2-related{padding:18px 0 36px}
.epss-v2-related-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px}
.epss-v2-related-head h2{font-family:'Roboto Slab',Georgia,serif;font-size:19px;color:var(--eg-h2);margin:0}
.epss-v2-related-nav{display:flex;gap:8px}
.epss-v2-related-arrow{width:38px;height:38px;border:1px solid #d5d9d9;border-radius:50%;background:#fff;cursor:pointer;color:var(--eg-h2);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .12s,background .12s}
.epss-v2-related-arrow:hover{border-color:var(--eg-green);background:var(--eg-bg-soft)}
.epss-v2-related-arrow:disabled{opacity:.3;cursor:default}
.epss-v2-related-track{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.epss-v2-related-track::-webkit-scrollbar{height:6px}
.epss-v2-related-track::-webkit-scrollbar-thumb{background:#d5d9d9;border-radius:6px}
.epss-v2-related-card{flex:0 0 205px;scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid #eaeaea;border-radius:12px;padding:12px;text-decoration:none;color:var(--eg-dark);background:#fff;transition:box-shadow .15s,border-color .15s}
.epss-v2-related-card:hover{border-color:var(--eg-green);box-shadow:0 6px 18px rgba(3,115,91,.10)}
.epss-v2-related-img{height:155px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.epss-v2-related-img img{max-width:100%;max-height:100%;object-fit:contain}
.epss-v2-related-name{font-size:13.5px;font-weight:600;line-height:1.32;margin-bottom:6px;min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.epss-v2-related-price{font-size:14px;font-weight:700;color:var(--eg-h2);margin-top:auto}
@media(max-width:720px){.epss-v2-related-card{flex-basis:158px}.epss-v2-related-img{height:120px}}