/*
 * Phone app layer. Enqueued with media="(max-width: 768px)" (JP_MOBILE_APP_MEDIA): the browser
 * applies nothing here on wider screens, so the desktop layout is untouched. Loaded after
 * woocommerce.css and campaigns.css, so equal-specificity rules here win on phones.
 */

:root {
  --jp-app-header: 58px;
  --jp-app-titlebar: 56px;
  /* Sticky bars under the header (PDP section nav, scroll margins) follow the shorter header. */
  --jp-header-h: calc(var(--jp-app-header) + 1px);
  --jp-app-tabbar: calc(62px + env(safe-area-inset-bottom, 0px));
}

/* List, cart and account screens have the app bar instead of the site header; the product page
   has its photo at the top. */
body.jp-has-apptitle { --jp-header-h: var(--jp-app-titlebar); }
.single-product { --jp-header-h: 0px; }

/* ------------------------------------------------------------------ touch */

html { -webkit-tap-highlight-color: transparent; }

a, button, input, select, summary, label { touch-action: manipulation; }

/* A tap shows a short press instead of desktop hover lifts that stick after the finger leaves. */
.jp-product-card__link:hover { transform: none; box-shadow: none; }
.jp-product-card__link:hover .jp-product-card__img { transform: none; }

.jp-product-card__link,
.jp-tabbar__item,
.jp-header__searchpill,
.jp-app-chip,
.jp-app-flavours button,
.jp-app-buybar__add,
.jp-product-card__add { transition: transform 0.12s ease; }

.jp-product-card__link:active,
.jp-tabbar__item:active,
.jp-header__searchpill:active,
.jp-app-chip:active,
.jp-app-flavours button:active,
.jp-app-buybar__add:active,
.jp-product-card__add:active { transform: scale(0.96); }

/* ------------------------------------------------------------------ page transitions */

/* Chrome 126+ / Safari 18.2+ cross-fade between pages; other browsers navigate as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

.jp-header { view-transition-name: jp-header; }
.jp-tabbar { view-transition-name: jp-tabbar; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.18s; }

/* ------------------------------------------------------------------ header */

/* The delivery line sits under the home screen's header (header.php .jp-app-deliv). */
.jp-promo { display: none; }

.jp-js body.jp-has-apptitle .jp-header,
.jp-js .single-product .jp-header { display: none; }

/* Without scripts the app bar's search button has nothing to open. */
html:not(.jp-js) .jp-app-titlebar button[data-jp-sheet-open] { display: none; }
/* …and the header keeps its own search form (main.css hides it below 640px for the sheet's). */
html:not(.jp-js) .jp-header__inner > .jp-search { display: flex; }
/* …and the tab bar keeps only its links (Categories and Search open the sheet by script). */
html:not(.jp-js) .jp-tabbar { grid-template-columns: repeat(3, 1fr); }
html:not(.jp-js) .jp-tabbar button[data-jp-sheet-open] { display: none; }

/* The bottom sheet opens on its heading (for screen readers); it is not a control. */
.jp-appsheet__title:focus { outline: none; }

.jp-app-deliv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 2px 14px 8px;
  color: var(--jp-muted);
  font-size: 12px;
  line-height: 1.3;
}

.jp-app-deliv strong { color: var(--jp-green); font-weight: 600; }
.jp-app-deliv svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* App bar: back, title with count, search. */
.jp-app-titlebar {
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--jp-app-titlebar);
  padding: 6px 14px;
  border-bottom: 1px solid var(--jp-border);
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  view-transition-name: jp-header;
}

/* Lists: the sort and category chips under it draw the line. */
body:has(.jp-shop-toolbar) .jp-app-titlebar { border-bottom-color: transparent; }

.jp-app-titlebar__btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--jp-surface-2);
  color: var(--jp-text);
  cursor: pointer;
}

.jp-app-titlebar__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jp-app-titlebar__text { flex: 1; min-width: 0; }

.jp-app-titlebar__title {
  margin: 0;
  overflow: hidden;
  color: var(--jp-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jp-app-titlebar__sub { margin: 1px 0 0; color: var(--jp-muted); font-size: 12px; line-height: 1.2; }

.jp-header__inner {
  min-height: var(--jp-app-header);
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.jp-logo img { height: 34px; }

/* The header's own search form makes way for the pill that opens the sheet's search. */
.jp-js .jp-header__inner > .jp-search { display: none; }

.jp-js .jp-header__searchpill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--jp-border);
  border-radius: 999px;
  background: var(--jp-surface-2);
  color: var(--jp-muted);
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}

.jp-header__searchpill svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.jp-header__searchpill span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Cart and checkout keep their header cart and menu; everywhere else the tab bar has them. */
body:not(.jp-has-tabbar) .jp-header__searchpill { display: none; }
body:not(.jp-has-tabbar) .jp-header__actions { grid-column: -2; justify-self: end; }
body.jp-has-tabbar .jp-header__actions { display: none; }
body.jp-has-tabbar .jp-header__inner { grid-template-columns: auto minmax(0, 1fr); }

/* Installed app (no browser back button): a back arrow in the header on inner pages. */
.jp-app-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -0.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--jp-surface-2);
  color: var(--jp-text);
}

.jp-app-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.jp-header__inner:has(> .jp-app-back) { grid-template-columns: auto auto minmax(0, 1fr); }
body:not(.jp-has-tabbar) .jp-header__inner:has(> .jp-app-back) { grid-template-columns: auto auto minmax(0, 1fr) auto; }

/* Keyboard focus is visible on every control this layer adds. */
.jp-header__searchpill:focus-visible,
.jp-app-back:focus-visible,
.jp-app-chip:focus-visible,
.jp-appsheet__option:focus-visible,
.jp-appsheet__close:focus-visible,
.jp-app-flavours button:focus-visible,
.jp-app-buybar__add:focus-visible,
.jp-app-toast a:focus-visible,
.jp-app-titlebar__btn:focus-visible,
.jp-app-acc__head:focus-visible,
.jp-app-catchips a:focus-visible,
.jp-app-seeall:focus-visible,
.jp-sheet__chips a:focus-visible,
.jp-app-cartbar__go:focus-visible {
  outline: 3px solid #2ff56b;
  outline-offset: 2px;
}

/* On the white photo the ring is dark. */
.jp-app-pdp-back:focus-visible,
.jp-app-pdp-share:focus-visible,
.single-product div.product .jp-product-stage .woocommerce-product-gallery__trigger:focus-visible { outline: 3px solid #111; outline-offset: 2px; }

/* ------------------------------------------------------------------ home */

.jp-categories {
  padding: 0.65rem 0 0.15rem;
  background: transparent;
  border-bottom: 0;
}

.jp-categories__wrap::after { display: none; }

.jp-categories__track { gap: 0.55rem; padding-bottom: 0.2rem; }

/* Categories only, as on the app's home screen; Sale, Clearance and All products sit in the
   Categories sheet. */
.jp-js .jp-categories__track > a[href$="/sale/"],
.jp-js .jp-categories__track > a[href$="/clearance/"],
.jp-js .jp-categories__track > a[href$="/shop/"] { display: none; }

.jp-cat-tile,
.jp-cat-tile--banner {
  flex: 0 0 72px;
  width: 72px;
  height: auto;
  gap: 0.35rem;
}

.jp-cat-tile__visual,
.jp-cat-tile--banner .jp-cat-tile__visual {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  margin-inline: auto;
  padding: 2px;
  overflow: hidden;
  border: 2px solid var(--jp-green);
  border-radius: 50%;
  background: #111;
  box-shadow: none;
}

.jp-cat-tile__banner,
.jp-cat-tile__solo {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 50%;
}

.jp-cat-tile__collage { border-radius: 50%; overflow: hidden; background: #fff; }

.jp-cat-tile__label,
.jp-cat-tile--banner .jp-cat-tile__label {
  max-width: 72px;
  color: var(--jp-text);
  font-size: 0.68rem;
  line-height: 1.2;
}

/* A short banner card: copy on the left, no slide dots. */
.jp-hero {
  min-height: 0;
  margin: 6px 16px 0;
  overflow: hidden;
  border: 1px solid var(--jp-border);
  border-radius: 20px;
}

.jp-hero__slide { min-height: 168px; padding: 0; align-items: flex-start; }
.jp-hero__content { display: block; padding: 18px; }
.jp-hero__copy { max-width: 64%; }
.jp-hero .jp-eyebrow { margin: 0; font-size: 10.5px; letter-spacing: 0.12em; }
.jp-hero h1 { margin: 6px 0 12px; font-size: 21px; line-height: 1.1; letter-spacing: -0.01em; }
.jp-hero h1 br { display: none; }
.jp-hero h1 br + span::before { content: " "; }
.jp-hero__text,
.jp-hero__dots { display: none; }

.jp-hero .jp-btn {
  min-height: 40px;
  padding: 0 18px;
  font-size: 14px;
  box-shadow: 0 6px 18px var(--jp-green-glow);
}

.jp-app-install__go:focus-visible,
.jp-app-install__close:focus-visible { outline: 3px solid #2ff56b; outline-offset: 2px; }

/* "Get the app" (mobile-app.js) under the home banner, and the steps sheet it can open. */
.jp-app-install {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 10px 6px 10px 12px;
  border: 1px solid var(--jp-border);
  border-radius: 16px;
  background: var(--jp-surface);
}

.jp-app-install img { flex: none; width: 44px; height: 44px; border-radius: 11px; }
.jp-app-install__text { flex: 1; min-width: 0; }
.jp-app-install__text strong { display: block; color: var(--jp-text); font-size: 14px; line-height: 1.3; }
.jp-app-install__text span { display: block; color: var(--jp-muted); font-size: 12px; line-height: 1.35; }

.jp-app-install__go {
  position: relative;
  flex: none;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--jp-green);
  color: #000;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.jp-app-install__go::after { content: ""; position: absolute; inset: -4px 0; }

.jp-app-install__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--jp-muted);
  cursor: pointer;
}

.jp-app-install__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.jp-app-steps { margin: 4px 0 8px; padding: 0; list-style: none; counter-reset: jp-step; }

.jp-app-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--jp-border);
  color: var(--jp-text);
  font-size: 15px;
  line-height: 1.4;
}

.jp-app-steps li:last-child { border-bottom: 0; }

.jp-app-steps li::before {
  content: counter(jp-step);
  counter-increment: jp-step;
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--jp-surface-2);
  color: var(--jp-green);
  font-size: 13px;
  font-weight: 700;
}

.jp-app-steps svg { display: inline-block; width: 20px; height: 20px; margin: 0 2px; vertical-align: -4px; fill: none; stroke: var(--jp-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ product cards */

.woocommerce ul.products,
.jp-campaign__products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Small tablets (560–768px): three columns, so cards stay phone-sized. */
@media (min-width: 560px) {
  .woocommerce ul.products,
  .jp-campaign__products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Dark card, white photo square, green brand, round green "+". */
.jp-product-card {
  overflow: hidden;
  border: 1px solid var(--jp-border);
  border-radius: 16px;
  background: var(--jp-surface);
}

.jp-product-card__link {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--jp-text);
}

.jp-product-card__media { min-height: 0; padding: 7%; background: #fff; }
.jp-product-card__rule,
.jp-product-card__badge { display: none; }

.jp-product-card__wish {
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  font-size: 17px;
}

.jp-product-card__brand {
  margin: 9px 10px 0;
  overflow: hidden;
  color: var(--jp-green);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jp-product-card__body { gap: 0; padding: 3px 10px 12px; }
.jp-product-card__title-wrap { gap: 3px; }

/* Woo's "ul.products li.product h3 { font-size: 1em }" outranks the plain class in grids. */
.jp-product-card__title,
.woocommerce ul.products li.product .jp-product-card__title {
  display: -webkit-box;
  min-height: 2.5em;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--jp-text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.jp-product-card__options { display: none; }

.jp-product-card__compact,
.jp-product-card__detail {
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--jp-muted);
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The round button sits beside the last two lines. */
.jp-product-card:has(.jp-product-card__add) .jp-product-card__compact,
.jp-product-card:has(.jp-product-card__add) .jp-product-card__detail { padding-right: 30px; }

.jp-product-card__price,
.jp-top-products .jp-product-card__price {
  min-height: 0;
  margin-top: 6px;
  padding-right: 0;
  color: var(--jp-text);
  font-size: 14.5px;
  line-height: 1.25;
}

.jp-product-card__price ins,
.jp-top-products .jp-product-card__price .amount,
.jp-top-products .jp-product-card__price .woocommerce-Price-amount { color: var(--jp-text); }
.jp-product-card__price del,
.jp-product-card__price del .amount { color: var(--jp-muted); }
.jp-product-card__price .jp-price-request,
.jp-top-products .jp-price-request { color: var(--jp-muted); font-size: 12.5px; }

/* Room for the round button only where the card has one. */
.jp-product-card:has(.jp-product-card__add) .jp-product-card__price { padding-right: 36px; }

.jp-product-card__price .woocommerce-price-suffix { display: none; }

/* 44px to tap, a 32px green circle to see, a "+" inside (the cart icon is for desktop). */
.jp-product-card__add,
.jp-product-card span.jp-product-card__add--choose {
  right: 3px;
  bottom: 4px;
  display: grid;
  width: 44px;
  height: 44px;
  background: none;
  color: #000;
  box-shadow: none;
}

.jp-product-card__add::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--jp-green);
  box-shadow: 0 4px 12px var(--jp-green-glow);
}

.jp-product-card__add::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  margin: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jp-product-card__add svg { display: none; }
.jp-product-card__add:hover { background: none; }
.jp-product-card__add.is-busy { opacity: 0.55; pointer-events: none; }
/* Drawn only: a tap there lands on the card link underneath (the product page). */
.jp-product-card span.jp-product-card__add--choose { pointer-events: none; }

/* Scroll rows run to the screen edges; the "next" arrow is for mice. */
.jp-product-carousel { margin-inline: -1rem; }

.jp-product-carousel__track {
  gap: 10px;
  padding: 0 1rem 4px;
  scroll-padding-inline: 1rem;
  scroll-snap-type: x mandatory;
}

.jp-product-carousel .jp-product-card { flex: 0 0 150px; }
.jp-product-carousel__next { display: none; }

/* App screens start right under the header or app bar. An empty notices box would still push
   them down by its margin. */
.woocommerce-notices-wrapper:empty { display: none; }
.jp-main,
body.woocommerce-account .jp-main { padding-top: 0.6rem; }
.single-product .jp-main,
body.jp-has-apptitle .jp-main { padding-top: 0; }
.jp-main--shop > .jp-container { padding-top: 0; }

/* ------------------------------------------------------------------ home sections */

.jp-section { padding-block: 1.6rem 1.8rem; }
.jp-section__head { margin-bottom: 0.9rem; }
.jp-section__head h2 { font-size: 1.35rem; }

/* Product rows: a 17px title with "See all" beside it. */
.jp-top-products,
.jp-section.jp-section--carousel {
  padding: 14px 0 4px;
  background: transparent;
}

.jp-top-products__head,
.jp-section--carousel .jp-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 10px;
}

.jp-top-products__head h2,
.jp-section--carousel .jp-section__head h2 {
  margin: 0;
  color: var(--jp-text);
  font-size: 17px;
  letter-spacing: 0;
}

.jp-top-products__head p,
.jp-section--carousel .jp-eyebrow,
.jp-app-hide { display: none; }
.jp-app-only { display: inline; }

.jp-app-seeall {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -12px;
  color: var(--jp-green);
  font-size: 13px;
  font-weight: 600;
}

/* "New in store": four cards in the two-column grid instead of a row. */
.jp-section--carousel .jp-product-carousel { margin-inline: 0; }

.jp-section--carousel .jp-product-carousel__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  overflow: visible;
}

.jp-section--carousel .jp-product-carousel .jp-product-card:nth-child(n + 5) { display: none; }

/* Bundle promotion: compact banner card matching the Pre-Workout hero banner (.jp-hero). */
.jp-bundle-promo {
  padding: 14px 0 4px;
  background: transparent;
}

.jp-bundle-promo__head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 10px;
}

.jp-bundle-promo__head .jp-eyebrow { display: none; }

.jp-bundle-promo__head h2 {
  margin: 0;
  color: var(--jp-text);
  font-size: 17px;
  letter-spacing: 0;
}

.jp-bundle-promo__head .jp-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -12px;
  color: var(--jp-green);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.jp-bundle-slider { border-radius: 20px; }

.jp-bundle-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 10px;
  min-height: 168px;
  padding: 16px 14px 16px 18px;
}

.jp-bundle-slide[hidden] { display: none; }

.jp-bundle-slide::after {
  display: block;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.8) 58%, rgba(10, 10, 10, 0.35) 100%);
}

.jp-bundle-slide__copy {
  grid-column: 1;
  grid-row: 1;
  align-items: flex-start;
  padding: 0;
  background: none;
}

.jp-bundle-slide__copy .jp-eyebrow {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

.jp-bundle-slide__copy h3 {
  display: -webkit-box;
  margin: 4px 0 6px;
  font-size: 16.5px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jp-bundle-slide__copy > p:not(.jp-eyebrow),
.jp-bundle-slider__controls { display: none; }

.jp-bundle-slide__offer {
  gap: 6px;
  margin: 0 0 10px;
}

.jp-bundle-slide__offer strong { font-size: 15px; }

.jp-bundle-slide__offer .jp-bundle-badge {
  padding: 3px 8px;
  font-size: 10px;
}

.jp-bundle-slide__copy .jp-btn {
  width: auto;
  min-height: 38px;
  padding: 0 16px;
  font-size: 13.5px;
  box-shadow: 0 6px 18px var(--jp-green-glow);
}

.jp-bundle-slide__media {
  position: relative;
  inset: auto;
  right: auto;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  width: 120px;
  height: 136px;
  aspect-ratio: auto;
  padding: 0;
}

.jp-bundle-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.jp-bundle-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 10px;
  min-height: 168px;
  padding: 16px 14px 16px 18px;
  border-radius: 20px;
}

.jp-bundle-card__media {
  grid-column: 2;
  grid-row: 1;
  width: 120px;
  height: 136px;
  aspect-ratio: auto;
  border-radius: 12px;
}

.jp-bundle-card__copy {
  grid-column: 1;
  grid-row: 1;
  gap: 6px;
  padding: 0;
}

.jp-bundle-card__copy h3 {
  display: -webkit-box;
  font-size: 16.5px;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jp-bundle-card__copy p { display: none; }

/* Lists: the app bar names the category; its banner and heading stay for screen readers. */
body.jp-has-apptitle .jp-category-hero {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sort and category chips ride under the app bar while the grid scrolls; the bar has the count. */
.woocommerce .jp-shop-toolbar {
  position: sticky;
  top: var(--jp-header-h);
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0 -1rem 12px;
  padding: 8px 14px 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--jp-border);
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}

.woocommerce .jp-shop-toolbar::-webkit-scrollbar { display: none; }

body.jp-has-apptitle .jp-shop-toolbar .woocommerce-result-count { display: none; }

.woocommerce .jp-shop-toolbar .woocommerce-ordering { flex: none; margin: 0; }

/* mobile-app.js turns the sort select into a chip with a bottom sheet. Until it runs the select is
   the chip's 36px, so the toolbar keeps its height and the grid under it does not shift (CLS). */
.jp-js .woocommerce .woocommerce-ordering select.orderby { min-height: 36px; height: 36px; }
.woocommerce-ordering.is-app select.orderby { display: none; }

.jp-app-catchips { display: flex; flex: none; gap: 8px; }

.jp-app-chip,
.jp-app-catchips a {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--jp-border);
  border-radius: 999px;
  background: var(--jp-surface);
  color: var(--jp-text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

/* 44px to tap. */
.jp-app-chip::after,
.jp-app-catchips a::after { content: ""; position: absolute; inset: -4px 0; }

.jp-app-chip {
  border-color: var(--jp-green);
  background: var(--jp-green);
  color: #000;
  font-weight: 700;
}

.jp-app-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ bottom sheet (sort) */

.jp-appsheet { position: fixed; inset: 0; z-index: 400; }
.jp-appsheet[hidden] { display: none; }

.jp-appsheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.jp-appsheet__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 88dvh;
  padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--jp-border);
  border-radius: 22px 22px 0 0;
  background: var(--jp-surface);
  transform: translateY(105%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jp-appsheet.is-open .jp-appsheet__backdrop { opacity: 1; }
.jp-appsheet.is-open .jp-appsheet__panel { transform: none; }

/* The page behind a sheet stays put. */
body.jp-appsheet-open { overflow: hidden; }

.jp-appsheet__grip { display: block; width: 40px; height: 5px; margin: 0 auto 0.5rem; border-radius: 3px; background: #444; }

.jp-appsheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.2rem; }

.jp-appsheet__title { margin: 0; font-size: 1.1rem; }

.jp-appsheet__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--jp-text);
  cursor: pointer;
}

.jp-appsheet__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.jp-appsheet__option {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.15rem;
  border: 0;
  border-bottom: 1px solid var(--jp-border);
  background: none;
  color: var(--jp-text);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

.jp-appsheet__option:last-child { border-bottom: 0; }
.jp-appsheet__option[aria-checked="true"] { color: var(--jp-green); font-weight: 700; }
.jp-appsheet__option svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ------------------------------------------------------------------ product page */

/* A wide row (the flavour chips) must scroll inside the column, not widen it. */
.single-product .jp-product-stage { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* Photo edge to edge on white from the top of the screen; the details sheet overlaps it. The
   theme's PDP rules use !important (".single-product div.product .woocommerce-product-gallery"),
   so these must too, one step more specific. */
.single-product div.product .jp-product-stage .woocommerce-product-gallery {
  position: relative !important;
  width: 100vw !important;
  margin: 0 0 0 calc(50% - 50vw) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

/* A classic (non-overlay) scrollbar makes 100vw wider than the page: clip, never scroll sideways. */
.single-product .jp-main { overflow-x: clip; }

/* "Sale!" sits beside the back button, not on it. */
.single-product div.product .jp-product-stage span.onsale {
  top: 1rem !important;
  left: calc(max(14px, env(safe-area-inset-left, 0px)) + 52px) !important;
  right: auto !important;
  z-index: 6;
}

.single-product div.product .jp-product-stage .woocommerce-product-gallery__wrapper { min-height: 0 !important; padding: 22px 10% 38px !important; }

.single-product div.product .jp-product-stage .woocommerce-product-gallery__image img { max-height: 22rem !important; object-fit: contain; }

/* More photos: the slider's frame loses the desktop card chrome and each photo takes the full
   width of its slide. */
.single-product div.product .jp-product-stage .flex-viewport {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The slider moves the wrapper as its track and measures each slide (step = slide width minus
   its padding; frame height = slide content height): track and slides stay bare, and the photo's
   white margin sits on the link inside each slide. */
.single-product div.product .jp-product-stage .flex-viewport .woocommerce-product-gallery__wrapper {
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: visible !important;
}

.single-product div.product .jp-product-stage .flex-viewport .woocommerce-product-gallery__image {
  flex: 0 0 100% !important;
  padding: 0 !important;
}

.single-product div.product .jp-product-stage .flex-viewport .woocommerce-product-gallery__image > a {
  box-sizing: border-box;
  padding: 22px 10% 38px;
}

/* More photos: dots instead of thumbnails. */
.single-product div.product .jp-product-stage .flex-control-thumbs {
  position: absolute;
  right: 0;
  bottom: 26px;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.single-product div.product .jp-product-stage .flex-control-thumbs li {
  width: 6px !important;
  height: 6px;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
}

.single-product div.product .jp-product-stage .flex-control-thumbs li:has(img.flex-active) { width: 18px !important; background: #111; }
.single-product div.product .jp-product-stage .flex-control-thumbs img { width: 100%; height: 100%; opacity: 0; }

/* Round white buttons over the photo: back on the left; zoom and share on the right. */
.jp-app-pdp-back,
.jp-app-pdp-share,
.single-product div.product .jp-product-stage .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 10px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.jp-app-pdp-back { left: max(14px, env(safe-area-inset-left, 0px)); }
.jp-app-pdp-share { right: max(14px, env(safe-area-inset-right, 0px)); }
.single-product div.product .jp-product-stage .woocommerce-product-gallery__trigger {
  top: 10px !important;
  right: max(14px, env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  width: 44px !important;
  height: 44px !important;
}

.single-product div.product .jp-product-stage .woocommerce-product-gallery:has(.jp-app-pdp-share) .woocommerce-product-gallery__trigger { right: calc(max(14px, env(safe-area-inset-right, 0px)) + 52px) !important; }

.jp-app-pdp-back svg,
.jp-app-pdp-share svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The details sheet: full width, rounded top, page black. */
.single-product div.product .jp-product-stage .jp-product-summary {
  z-index: 1;
  gap: 0 !important;
  width: 100vw !important;
  margin: -16px 0 0 calc(50% - 50vw) !important;
  padding: 18px 16px 8px !important;
  border: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background: #0a0a0a !important;
}

/* Brand, name, price with stock, flavour, size, summary, then the rest. */
.single-product .jp-product-summary > * { order: 10; }
.single-product .jp-product-summary > .jp-product-title { order: 1; }
.single-product .jp-product-summary > .price,
.single-product .jp-product-summary > .jp-enquire { order: 2; }
.single-product .jp-product-summary > .jp-product-options { order: 3; }
.single-product .jp-product-summary > .woocommerce-product-details__short-description { order: 4; }
/* The ticked highlights ("4 g pure L-citrulline") follow the summary line. */
.single-product .jp-product-summary > .jp-product-benefits { order: 5; margin-top: 14px !important; }
.single-product .jp-product-summary > form.cart { order: 6; margin-top: 14px; }
.single-product .jp-product-summary > .jp-product-commerce { order: 7; margin-top: 14px; }

.single-product div.product .jp-product-summary .jp-product-title__brand {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
}

.single-product div.product .jp-product-summary h1.product_title.jp-product-title__name {
  margin: 4px 0 8px !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

.single-product div.product .jp-product-summary .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--jp-text) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.single-product div.product .jp-product-summary .price .amount,
.single-product div.product .jp-product-summary .price bdi,
.single-product div.product .jp-product-summary .price ins .amount { color: var(--jp-text) !important; font-weight: 700 !important; }
.single-product div.product .jp-product-summary .price .woocommerce-price-suffix { display: none; }

/* mobile-app.js: "In stock" beside the price. */
.jp-app-stock {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(61, 255, 110, 0.12);
  color: var(--jp-green);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.jp-app-stock.is-out { background: rgba(255, 255, 255, 0.08); color: var(--jp-muted); }

.single-product div.product .jp-product-summary .jp-product-tags,
.single-product div.product .jp-product-summary .jp-product-specs,
.single-product div.product .jp-product-summary .jp-product-trust,
.single-product .jp-product-nav { display: none !important; }

.single-product .jp-product-summary .jp-product-options { gap: 0; }
.single-product .jp-product-summary .jp-product-options__group { gap: 0; }

/* "Flavour: Chocolate" (a flex row drops the gap the hidden dot leaves). */
.single-product .jp-product-summary .jp-product-options__label {
  display: flex;
  align-items: baseline;
  margin: 18px 0 8px;
  color: var(--jp-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.jp-app-optval { white-space: pre; }

.single-product .jp-product-summary .jp-product-options__label b { color: var(--jp-text) !important; font-weight: 700; }
.single-product .jp-product-summary .jp-product-options__req { display: none; }

/* Flavours as tappable chips (mobile-app.js); the select stays for the page's own logic. */
.jp-product-options__group.has-app-flavours select.jp-product-options__flavour { display: none; }

.jp-app-flavours {
  display: flex;
  gap: 8px;
  padding: 4px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.jp-app-flavours::-webkit-scrollbar { display: none; }

/* The row runs edge to edge; where more chips wait off screen the edge fades out and a round
   arrow shows (mobile-app.js .jp-app-scroller, .has-prev / .has-next). */
.jp-app-scroller { position: relative; margin: 0 -16px; }

.jp-app-scroller::before,
.jp-app-scroller::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 72px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.jp-app-scroller::before { left: 0; background: linear-gradient(90deg, #0a0a0a 35%, rgba(10, 10, 10, 0)); }
.jp-app-scroller::after { right: 0; background: linear-gradient(270deg, #0a0a0a 35%, rgba(10, 10, 10, 0)); }
.jp-app-scroller.has-prev::before,
.jp-app-scroller.has-next::after { opacity: 1; }

.jp-app-scroller__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border: 1px solid var(--jp-border);
  border-radius: 50%;
  background: var(--jp-surface-2);
  color: var(--jp-text);
  cursor: pointer;
}

.jp-app-scroller__arrow--prev { left: 10px; }
.jp-app-scroller__arrow--next { right: 10px; }
.jp-app-scroller.has-prev .jp-app-scroller__arrow--prev,
.jp-app-scroller.has-next .jp-app-scroller__arrow--next { display: grid; }
.jp-app-scroller__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.jp-app-flavours button {
  position: relative;
  flex: none;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--jp-border);
  border-radius: 999px;
  background: var(--jp-surface);
  color: var(--jp-text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.jp-app-flavours button::after { content: ""; position: absolute; inset: -4px 0; }

.jp-app-flavours button[aria-checked="true"] {
  border-color: var(--jp-green);
  background: var(--jp-green);
  color: #000;
  font-weight: 700;
}

.jp-app-flavours button:disabled { opacity: 0.4; text-decoration: line-through; }

/* Sizes as one segmented control. */
.single-product .jp-product-summary .jp-product-options__sizes {
  display: inline-flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 3px;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--jp-border);
  border-radius: 12px;
  background: var(--jp-surface);
}

/* Sizes this flavour does not come in stay visible, dimmed: choosing one switches to a flavour
   that has it (product-variations.js). */
.single-product .jp-product-summary .jp-product-options__size.is-unavailable[hidden] { display: inline-flex !important; align-items: center; opacity: 0.35; }

.single-product .jp-product-summary .jp-product-options__size {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--jp-muted);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

.single-product .jp-product-summary .jp-product-options__size.is-selected { background: var(--jp-green); color: #000; }

.single-product div.product .jp-product-summary .woocommerce-product-details__short-description {
  margin: 16px 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #cfcfcf;
  font-size: 14.5px;
  line-height: 1.55;
}

.single-product div.product .jp-product-summary .woocommerce-product-details__short-description p { margin: 0; color: #cfcfcf !important; font-size: 14.5px !important; line-height: 1.55 !important; }

/* The bar below adds to cart, so the page's own form (still the one that submits) is set aside. */
body.jp-app-pdp-bar .jp-product-summary form.cart:not(.jpb-bundle),
body.jp-app-pdp-bar .jp-product-summary form.cart.jpb-bundle .quantity,
body.jp-app-pdp-bar .jp-product-summary form.cart.jpb-bundle .single_add_to_cart_button {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%);
}

.single-product .jp-product-summary form.cart.jpb-bundle .jpb-bundle__items:not(:has(.jpb-bundle__choice)) {
  display: none;
}

/* Description, nutrition, delivery and the rest as one list of folds (mobile-app.js .jp-app-acc). */
.single-product .jp-main div.product { gap: 0 !important; padding: 0 0 1.75rem !important; }
.single-product div.product .jp-product-stage .summary.entry-summary { border: 0 !important; background: none !important; box-shadow: none !important; }

/* Full width like the sheet above, so the folds line up with its text. */
.single-product div.product .jp-product-details {
  width: 100vw !important;
  max-width: none;
  margin: 0 0 0 calc(50% - 50vw) !important;
  padding: 0 16px !important;
  border: 0;
  box-sizing: border-box;
}
.single-product .jp-product-details__body { display: block; padding: 0; }
.single-product .jp-product-desc { display: flex !important; flex-direction: column; gap: 0 !important; }

.single-product .jp-product-desc .jp-app-acc,
.single-product .jp-product-desc .jp-desc-section--collapsible,
.single-product .jp-product-summary .jp-app-acc {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--jp-border) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  grid-column: 1 / -1;
}

.single-product .jp-product-desc > :last-child { border-bottom: 1px solid var(--jp-border) !important; }

.jp-app-acc__head,
.single-product .jp-product-desc .jp-desc-fold__summary {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 15px 0;
  border: 0;
  background: none;
  color: var(--jp-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.jp-app-acc__head svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.jp-app-acc.is-open > .jp-app-acc__h .jp-app-acc__head svg { transform: rotate(180deg); }

/* The fold's heading only carries its button. */
.single-product .jp-app-acc > .jp-app-acc__h {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Closed: only the heading row shows. */
.jp-app-acc:not(.is-open) > :not(.jp-app-acc__h) { display: none !important; }
.jp-app-acc.is-open { padding-bottom: 14px !important; }
.jp-app-acc__orig { display: none !important; }

.single-product .jp-product-desc .jp-app-acc,
.single-product .jp-product-desc .jp-app-acc p,
.single-product .jp-product-desc .jp-app-acc li { color: #cfcfcf; font-size: 14px !important; line-height: 1.55 !important; }

/* The theme's ingredients and warnings folds join the same list. */
.single-product div.product .jp-product-desc .jp-desc-fold {
  border: 0;
  border-radius: 0;
  background: none;
}

.single-product div.product .jp-product-desc .jp-desc-fold__title { color: var(--jp-text); font-size: 15px; font-weight: 600; }
.single-product div.product .jp-product-desc .jp-desc-fold__chevron { margin-right: 5px; border-color: currentColor; color: var(--jp-text); }
.single-product div.product .jp-product-desc .jp-desc-fold__body { padding: 0 0 14px; }

/* Price and Add to cart stay above the tab bar while the product page scrolls. */
.jp-app-buybar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 10px 14px;
  border-top: 1px solid var(--jp-border);
  background: rgba(10, 10, 10, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateY(110%);
  transition: transform 0.24s ease;
}

body.jp-has-tabbar .jp-app-buybar { bottom: var(--jp-app-tabbar); }

body:not(.jp-has-tabbar) .jp-app-buybar { padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); }

.jp-app-buybar.is-visible { transform: none; }

.jp-app-buybar__price { flex: none; min-width: 92px; max-width: 45%; }
.jp-app-buybar__price .price { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--jp-text); }
.jp-app-buybar__price .price del { font-size: 0.8rem; opacity: 0.6; }
.jp-app-buybar__price .woocommerce-price-suffix { display: none; }

.jp-app-buybar__option {
  display: block;
  max-width: 120px;
  overflow: hidden;
  color: var(--jp-muted);
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jp-app-buybar__add {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: var(--jp-green);
  color: #000;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 18px var(--jp-green-glow);
  cursor: pointer;
}

.jp-app-buybar__add::before {
  content: "";
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 11.2a1 1 0 0 0 1 .8h9.6a1 1 0 0 0 1-.8L20.5 8H6'/%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 11.2a1 1 0 0 0 1 .8h9.6a1 1 0 0 0 1-.8L20.5 8H6'/%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.jp-has-app-buybar { padding-bottom: calc(var(--jp-app-tabbar) + 70px); }
body.jp-has-app-buybar:not(.jp-has-tabbar) { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

/* "Added to cart" floats as a toast instead of pushing the page down; errors stay inline. */
.single-product .woocommerce-notices-wrapper .woocommerce-message {
  position: fixed;
  right: 0.75rem;
  bottom: calc(var(--jp-app-tabbar) + 78px);
  left: 0.75rem;
  z-index: 160;
  margin: 0;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  animation: jp-app-toast-out 0.3s ease 6s forwards;
}

/* It waits while a finger, pointer or keyboard focus is on it ("View cart"). */
.single-product .woocommerce-notices-wrapper .woocommerce-message:hover,
.single-product .woocommerce-notices-wrapper .woocommerce-message:focus-within { animation-play-state: paused; }

@keyframes jp-app-toast-out {
  to { opacity: 0; visibility: hidden; transform: translateY(12px); }
}

/* ------------------------------------------------------------------ toast (quick add) */

.jp-app-toast {
  position: fixed;
  right: 0.75rem;
  bottom: calc(var(--jp-app-tabbar) + 12px);
  left: 0.75rem;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  border-radius: 14px;
  background: #f5f5f5;
  color: #111;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.jp-app-toast[hidden] { display: none; }

.jp-app-toast.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.jp-app-toast span { flex: 1; min-width: 0; }
.jp-app-toast a { color: #0a7a2f; font-weight: 700; white-space: nowrap; }
.jp-app-toast a:focus-visible { outline-color: #0a7a2f; }

.jp-tabbar__badge.is-bumped { animation: jp-app-bump 0.45s ease; }

@keyframes jp-app-bump {
  30% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ search screen */

/* Search opens the shop sheet as a full screen above the tab bar (mobile-app.js .is-search): the
   field and Cancel in one row, popular searches and the category list until suggestions come. */
.jp-sheet.is-search { bottom: var(--jp-app-tabbar); }
body:not(.jp-has-tabbar) .jp-sheet.is-search { bottom: 0; }
.jp-sheet.is-search .jp-sheet__backdrop { display: none; }

.jp-sheet.is-search .jp-sheet__panel {
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  column-gap: 12px;
  max-width: none;
  max-height: none;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 16px;
  border: 0;
  border-radius: 0;
  background: #0a0a0a;
  transform: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.jp-sheet.is-search.is-open .jp-sheet__panel { opacity: 1; }
.jp-sheet.is-search .jp-sheet__panel > * { grid-column: 1 / -1; }
.jp-sheet.is-search .jp-sheet__head { display: contents; }
.jp-sheet.is-search .jp-sheet__grip,
.jp-sheet.is-search .jp-sheet__title,
.jp-sheet.is-search .jp-catmenu__offers,
.jp-sheet.is-search .jp-sheet__account { display: none; }

/* The field is one green-edged pill with the search icon first. */
.jp-sheet.is-search .jp-sheet__search {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  height: 40px;
  margin: 6px 0;
  border-color: var(--jp-green);
  background: var(--jp-surface-2);
}

.jp-sheet.is-search .jp-sheet__search input[type="search"] {
  min-width: 0;
  height: 38px;
  padding: 0 14px 0 6px;
  font-size: 15px;
}

.jp-sheet.is-search .jp-sheet__search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.jp-sheet.is-search .jp-sheet__search button[type="submit"] { order: -1; display: grid; place-items: center; align-self: stretch; height: auto; padding: 0 0 0 14px; color: var(--jp-muted); font-size: 0; line-height: 0; }

.jp-sheet.is-search .jp-sheet__search button[type="submit"]::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The tab bar shows Search as the current tab while the search screen is open. */
body:has(.jp-sheet.is-search.is-open) .jp-tabbar__item.is-active { color: var(--jp-muted); }
body:has(.jp-sheet.is-search.is-open) .jp-tabbar__item[data-jp-sheet-focus="search"] { color: var(--jp-green); }

.jp-sheet.is-search .jp-sheet__close {
  grid-row: 1;
  grid-column: 2;
  width: auto;
  height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--jp-green);
  font-size: 0;
}

.jp-sheet.is-search .jp-sheet__close::after { content: "Cancel"; font-size: 14px; font-weight: 600; }

/* Suggestions as a plain list under the field. */
.jp-sheet.is-search .jp-suggest--inline {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.jp-sheet.is-search .jp-suggest__option {
  padding: 10px 2px;
  border-bottom: 1px solid var(--jp-border);
  border-radius: 0;
}

.jp-sheet.is-search .jp-sheet__popular { display: block; }
.jp-sheet.is-search .jp-sheet__panel:has(.jp-suggest--inline:not([hidden])) .jp-sheet__popular,
.jp-sheet.is-search .jp-sheet__panel:has(.jp-suggest--inline:not([hidden])) .jp-catmenu { display: none; }

.jp-sheet__kicker {
  margin: 0;
  padding: 16px 2px 8px;
  color: var(--jp-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jp-sheet__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.jp-sheet__chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--jp-border);
  border-radius: 999px;
  background: var(--jp-surface);
  color: var(--jp-text);
  font-size: 13px;
  font-weight: 500;
}

.jp-sheet__chips a::before,
.jp-sheet.is-search .jp-catcard::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Categories as rows with a chevron. */
.jp-sheet.is-search .jp-catmenu__grid { display: block; margin: 0; }
.jp-sheet.is-search .jp-catmenu__grid li { list-style: none; }

.jp-sheet.is-search .jp-catmenu--sheet .jp-catcard {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  height: auto;
  min-height: 56px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--jp-border);
  border-radius: 0;
  background: none;
  text-align: left;
}

.jp-sheet.is-search .jp-catcard__visual { display: none; }
.jp-sheet.is-search .jp-catcard__text { flex: 1; min-width: 0; align-items: flex-start; padding: 0; }
.jp-sheet.is-search .jp-catcard__label { font-size: 14.5px; }
.jp-sheet.is-search .jp-catcard__count { font-size: 12px; }

.jp-sheet.is-search .jp-catcard::after {
  width: 18px;
  height: 18px;
  color: var(--jp-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ cart */

/* The app bar says "Cart · 3 items"; the page heading stays for screen readers. */
body.woocommerce-cart .entry-title,
body.woocommerce-cart .jp-page > h1,
body.woocommerce-account .jp-page > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.jp-freebar {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--jp-border);
  border-radius: 14px;
  background: var(--jp-surface);
  font-size: 13.5px;
}

/* One dark list, no white cards. */
body.woocommerce-cart .wp-block-woocommerce-cart { margin: 0 0 1rem; padding: 0; }
body.woocommerce-cart .wc-block-cart { gap: 0; }

body.woocommerce-cart .wc-block-cart__main,
body.woocommerce-cart .wc-block-cart__sidebar {
  position: static;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--jp-text);
  box-shadow: none;
}

body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wc-block-cart-items tbody,
body.woocommerce-cart .wc-block-cart-items tr,
body.woocommerce-cart .wc-block-cart-items td {
  border-color: var(--jp-border) !important;
  color: var(--jp-text);
}

body.woocommerce-cart .wc-block-cart-items { margin: 0; border-bottom: 1px solid var(--jp-border); }
body.woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row { padding: 14px 0; }

/* Woo's phone row is a grid (80px | 132px | total); the 76px photo needs a wider first column. */
body.woocommerce-cart .wc-block-cart:is(.is-mobile, .is-small, .is-medium) .wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 92px 1fr auto; }
body.woocommerce-cart .wc-block-cart-items .wc-block-cart-item__image { padding-right: 16px; }

body.woocommerce-cart .wc-block-cart-item__image img {
  width: 76px !important;
  max-width: none;
  height: 76px;
  padding: 5px;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}

body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-name { color: var(--jp-text) !important; font-size: 14.5px !important; font-weight: 700 !important; }
body.woocommerce-cart .wc-block-cart-items .wc-block-cart-item__prices { display: none; }

body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-metadata,
body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-metadata p {
  margin: 2px 0 0;
  color: var(--jp-muted) !important;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

body.woocommerce-cart .wc-block-cart-items .wc-block-components-quantity-selector {
  height: 32px;
  border-color: var(--jp-border);
  background: none;
}

body.woocommerce-cart .wc-block-cart-items .wc-block-components-quantity-selector__button,
body.woocommerce-cart .wc-block-cart-items .wc-block-components-quantity-selector__input { color: var(--jp-text) !important; }
body.woocommerce-cart .wc-block-cart-items .wc-block-cart-item__remove-link { color: var(--jp-muted) !important; }

body.woocommerce-cart .wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price,
body.woocommerce-cart .wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price__value { color: var(--jp-text) !important; font-size: 14.5px; font-weight: 700; }

/* Totals: muted rows, the total in white. */
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper { padding-inline: 0; border-color: var(--jp-border) !important; }
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-item { color: var(--jp-muted); font-size: 14px; }

body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--jp-text); font-size: 17px; }

body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item-tax,
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-panel__button { color: var(--jp-muted); }

/* mobile-app.js: total and Checkout in one bar above the tab bar; Woo's own button steps aside. */
body.jp-app-cartbar-on .wc-block-cart__submit { display: none; }

.jp-app-cartbar {
  position: fixed;
  right: 0;
  bottom: var(--jp-app-tabbar);
  left: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--jp-border);
  background: rgba(10, 10, 10, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.jp-app-cartbar[hidden] { display: none; }
.jp-app-cartbar__total { flex: none; min-width: 92px; }
.jp-app-cartbar__total b { display: block; color: var(--jp-text); font-size: 19px; line-height: 1.2; }
.jp-app-cartbar__total small { display: block; color: var(--jp-muted); font-size: 11.5px; }

.jp-app-cartbar__go {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: var(--jp-green);
  color: #000;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 18px var(--jp-green-glow);
  cursor: pointer;
}

/* Woo is still saving a change: wait. */
.jp-app-cartbar__go[aria-disabled="true"] { opacity: 0.5; box-shadow: none; cursor: progress; }
body.jp-app-cartbar-on { padding-bottom: calc(var(--jp-app-tabbar) + 72px); }

/* The legal guarantee note folds like the product page's rows. The official image keeps its
   white ground. */
body.woocommerce-cart .jp-legal-guarantee { margin: 0 auto 1.5rem; padding: 0 1rem; }

body.woocommerce-cart .jp-legal-guarantee details {
  padding: 0;
  border-top: 1px solid var(--jp-border);
  border-bottom: 1px solid var(--jp-border);
  border-radius: 0;
  background: none;
  color: #cfcfcf;
  box-shadow: none;
}

body.woocommerce-cart .jp-legal-guarantee details[open] { padding-bottom: 14px; }
body.woocommerce-cart .jp-legal-guarantee summary { padding: 15px 0; color: var(--jp-text); font-size: 15px; font-weight: 600; }
body.woocommerce-cart .jp-legal-guarantee img { padding: 6px; border-radius: 8px; background: #fff; }
body.woocommerce-cart .jp-legal-guarantee .jp-legal-guarantee__links a { color: var(--jp-green); }
body.woocommerce-cart .jp-legal-guarantee summary:focus-visible,
body.woocommerce-cart .jp-legal-guarantee a:focus-visible { outline-color: #2ff56b; }

/* ------------------------------------------------------------------ checkout */

/* On a phone Woo prints the order summary twice: folded at the top and in full above "Place
   order". Keep the one at the bottom (it is only there when Woo stacks the layout). */
body.woocommerce-checkout .wc-block-components-sidebar-layout:has(.checkout-order-summary-block-fill-wrapper) > .wc-block-checkout__sidebar { display: none; }

/* Express payment (Apple Pay, Google Pay, Link): one full-width button per row. In the desktop
   three-column row each phone column is under 90px, too narrow for the wallet buttons. */
body.woocommerce-checkout .wc-block-components-express-payment__event-buttons { grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* ------------------------------------------------------------------ account */

/* Sign in, register and password pages: dark card, light text, dark fields. The signed-in
   account pages keep their white content cards (and the light ink they are drawn for). */
body.woocommerce-account.jp-auth-page,
body.woocommerce-account.jp-auth-single {
  --jp-ink: var(--jp-text);
  --jp-ink-2: #cfcfcf;
  --jp-ink-muted: var(--jp-muted);
  --jp-line: var(--jp-border);
  --jp-field: var(--jp-surface-2);
  --jp-field-line: rgba(255, 255, 255, 0.14);
  --jp-ink-link: var(--jp-green);
  --jp-card-shadow: none;
}

body.jp-auth-page .jp-content > .woocommerce,
body.jp-auth-single .jp-content > .woocommerce {
  margin-top: 12px;
  border: 1px solid var(--jp-border);
  border-radius: 18px;
  background: var(--jp-surface);
}

:is(body.jp-auth-page, body.jp-auth-single) .woocommerce form .form-row input.input-text:focus,
:is(body.jp-auth-page, body.jp-auth-single) .woocommerce form .form-row textarea:focus,
:is(body.jp-auth-page, body.jp-auth-single) .woocommerce form .form-row select:focus { background: var(--jp-surface-2); }

/* Success and error notices keep their pale cards, so their text stays dark. */
body.woocommerce-account:is(.jp-auth-page, .jp-auth-single) .woocommerce .woocommerce-message,
body.woocommerce-account:is(.jp-auth-page, .jp-auth-single) .woocommerce .woocommerce-error { color: #111827 !important; }
body.woocommerce-account:is(.jp-auth-page, .jp-auth-single) .woocommerce :is(.woocommerce-message, .woocommerce-error) a { color: #0f7a35 !important; }

/* The password eye is drawn dark for a light field. */
:is(body.jp-auth-page, body.jp-auth-single) .woocommerce form .show-password-input::before { filter: invert(1); opacity: 0.75; }

.jp-auth__tabs { background: var(--jp-surface-2); }
.jp-auth__tabs label { color: var(--jp-muted); }

#jp-auth-tab-login:checked ~ .jp-auth__tabs label[for="jp-auth-tab-login"],
#jp-auth-tab-register:checked ~ .jp-auth__tabs label[for="jp-auth-tab-register"] {
  background: var(--jp-green);
  color: #000;
  box-shadow: none;
}

.jp-freebar strong { color: var(--jp-green); }

.jp-freebar__text { display: block; }

.jp-freebar__track {
  display: block;
  height: 6px;
  margin-top: 0.55rem;
  overflow: hidden;
  border-radius: 3px;
  background: var(--jp-surface-2);
}

.jp-freebar__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--jp-green);
  transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .jp-app-buybar,
  .jp-app-toast,
  .jp-appsheet__panel,
  .jp-appsheet__backdrop,
  .jp-freebar__fill,
  .jp-product-card__link,
  .jp-tabbar__item,
  .jp-header__searchpill,
  .jp-app-chip,
  .jp-app-flavours button,
  .jp-app-buybar__add,
  .jp-product-card__add,
  .jp-app-acc__head svg,
  .jp-sheet.is-search .jp-sheet__panel,
  .jp-app-scroller::before,
  .jp-app-scroller::after { transition: none; }
  .jp-product-card__link:active,
  .jp-tabbar__item:active,
  .jp-header__searchpill:active,
  .jp-app-chip:active,
  .jp-app-flavours button:active,
  .jp-app-buybar__add:active,
  .jp-product-card__add:active { transform: none; }
  .jp-tabbar__badge.is-bumped { animation: none; }
  /* Without the fade-out the notice stays where it was: in the page, not floating. */
  .single-product .woocommerce-notices-wrapper .woocommerce-message { position: static; margin: 0 0 1rem; box-shadow: none; animation: none; }
}