/**
 * Juye - page layout: header, homepage sections, footer.
 * Design tokens live in style.css.
 */

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.juye-wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--juye-gutter);
}

.juye-main { display: block; }

.juye-sec { padding-block: var(--juye-sec-y); }

.juye-sec__head { max-width: 56ch; margin-bottom: clamp(32px, 4.5vw, 60px); }

.juye-sec__title { margin: 0; font-size: var(--juye-fs-h2); }

.juye-sec__text {
  margin: 16px 0 0;
  color: var(--juye-ink-soft);
  font-size: 1.05rem;
  max-width: 50ch;
}

.juye-sec__more { margin: clamp(34px, 4vw, 52px) 0 0; }

.juye-no-scroll { overflow: hidden; }

.juye-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--juye-forest);
  color: var(--juye-cream);
  padding: 14px 22px;
  border-radius: 0 0 10px 0;
}
.juye-skip:focus { left: 0; color: var(--juye-cream); }

/* Ordinary pages */
.page .page-title,
.single-post .page-title {
  font-size: var(--juye-fs-h2);
  margin: 0 0 clamp(22px, 3vw, 38px);
  padding-top: clamp(34px, 4.5vw, 60px);
}

.page .entry-content,
.single-post .entry-content {
  max-width: 68ch;
  color: var(--juye-ink-soft);
  font-size: 1.04rem;
  line-height: 1.8;
  padding-bottom: clamp(34px, 4.5vw, 62px);
}

.page .entry-content h2,
.single-post .entry-content h2 {
  color: var(--juye-forest);
  margin-top: 1.9em;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.juye-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--juye-radius-pill);
  padding: 16px 34px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 54px;
  transition: background var(--juye-t) var(--juye-ease),
              color var(--juye-t) var(--juye-ease),
              border-color var(--juye-t) var(--juye-ease),
              transform var(--juye-t) var(--juye-ease),
              box-shadow var(--juye-t) var(--juye-ease);
}

.juye-btn--saffron {
  background: var(--juye-saffron);
  color: var(--juye-forest);
  border-color: var(--juye-saffron);
  box-shadow: var(--juye-shadow-sm);
}
.juye-btn--saffron:hover {
  background: var(--juye-saffron-dk);
  border-color: var(--juye-saffron-dk);
  color: var(--juye-forest);
  transform: translateY(-2px);
  box-shadow: var(--juye-shadow);
}

.juye-btn--dark {
  background: var(--juye-forest);
  color: var(--juye-cream);
  border-color: var(--juye-forest);
}
.juye-btn--dark:hover { background: var(--juye-forest-dk); color: var(--juye-cream); transform: translateY(-2px); }

.juye-btn--ghost-light {
  background: transparent;
  color: var(--juye-cream);
  border-color: rgba(var(--c-on-dark-rgb), .4);
}
.juye-btn--ghost-light:hover { background: var(--c-overlay-light); color: var(--c-on-dark); border-color: var(--juye-cream); }

.juye-btn--quiet {
  background: transparent;
  color: var(--juye-forest);
  border-color: var(--juye-forest);
}
.juye-btn--quiet:hover { background: var(--juye-forest); color: var(--juye-cream); }

/* ==========================================================================
   Announcement
   ========================================================================== */
.juye-announce {
  background: var(--c-brand);
  color: var(--c-on-dark);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .05em;
  text-align: center;
  padding: var(--sp-3) 0;
}

.juye-announce a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Header
   ========================================================================== */
.juye-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(var(--c-surface-rgb), .93);
  backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--juye-t) var(--juye-ease);
}

.juye-header.is-stuck { border-bottom-color: var(--juye-line); }

.juye-header__inner { display: flex; align-items: center; gap: 20px; min-height: 78px; }

.juye-brand { margin-right: auto; }

.juye-wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--juye-forest);
  text-decoration: none;
}
.juye-wordmark:hover { color: var(--juye-terra); }

.custom-logo-link img { max-height: 48px; width: auto; display: block; }

.juye-nav { margin-inline: auto; }

.juye-menu { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; }

.juye-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 44px tall so a thumb can hit it, with the underline pinned to the text
     rather than the padding box. */
  min-height: var(--tap-min);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
}

.juye-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 11px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
  transition: width var(--juye-t) var(--juye-ease);
}

.juye-menu a:hover { color: var(--c-accent-ink); }
.juye-menu a:hover::after,
.juye-menu .current-menu-item > a::after { width: 100%; }

/* Products dropdown

   The only nested menu in the theme, and deliberately CSS only: :focus-within
   opens it for a keyboard, so there is no script to load, nothing to initialise
   and nothing that can leave the panel stuck open after a page change. Below
   782px the whole nav is replaced by the drawer, which lays this same markup
   out as an indented list instead. */

.juye-menu .juye-products-item { position: relative; }

/* A caret, so the item reads as openable rather than as a plain link. The
   anchor is an inline-flex box, so order puts this after the label. */
.juye-menu .menu-item-has-children > a::before {
  content: "";
  order: 2;
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}

.juye-menu .menu-item-has-children:hover > a::before,
.juye-menu .menu-item-has-children:focus-within > a::before {
  transform: translateY(1px) rotate(225deg);
}

.juye-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  min-width: 210px;
  margin: 0;
  padding: var(--sp-2);
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-raised);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    visibility var(--t-fast);
}

.juye-menu .menu-item-has-children:hover > .sub-menu,
.juye-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Product names are proper nouns, so inside the panel they keep their own case
   and spacing rather than the uppercase tracking the top level uses. */
.juye-menu .sub-menu a {
  display: block;
  min-height: 0;
  padding: 10px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--c-ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

/* The sliding underline belongs to the top level only. */
.juye-menu .sub-menu a::after { content: none; }

.juye-menu .sub-menu a:hover,
.juye-menu .sub-menu a:focus-visible,
.juye-menu .sub-menu .current-menu-item > a {
  background: var(--c-bg);
  color: var(--c-accent-ink);
}

.juye-tools { display: flex; align-items: center; gap: 2px; }

.juye-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--c-brand);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--juye-t) var(--juye-ease), color var(--juye-t) var(--juye-ease);
}

.juye-icon-btn:hover { background: var(--c-bg); color: var(--c-accent-ink); }

.juye-icon { width: 21px; height: 21px; }

.juye-cart-count {
  position: absolute;
  top: 5px;
  right: 2px;
  /* Grown to carry 14px, the smallest type allowed anywhere on this site.
     The bubble gets bigger with it, which reads clearer at arm's length. */
  min-width: 22px;
  height: 22px;
  padding: 0 var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--c-sale);
  color: var(--c-on-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.juye-cart-count.is-empty { display: none; }

.juye-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.juye-burger__bars,
.juye-burger__bars::before,
.juye-burger__bars::after {
  display: block;
  width: 21px;
  height: 2px;
  background: var(--juye-forest);
  border-radius: 2px;
  content: "";
}

.juye-burger__bars { position: relative; }
.juye-burger__bars::before { position: absolute; top: -7px; }
.juye-burger__bars::after  { position: absolute; top: 7px; }

/* The bar slides rather than appears. [hidden] is display:none, which cannot
   be transitioned, so the collapsed state is a zero-height grid row instead:
   the row animates to the content's own height without anyone hard-coding one.
   It must be minmax(0, Nfr) and not a bare 0fr -- a bare 0fr still carries an
   automatic min-content floor, and the child's padding leaks through it as a
   13px strip under the header even when closed.
   `visibility` carries the accessibility job [hidden] used to do -- it keeps
   the collapsed form out of the tab order and out of screen readers -- and is
   delayed on the way out so the slide finishes before the bar goes. */
.juye-searchbar {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  border-top: 0 solid var(--juye-line);
  background: var(--juye-cream);
  padding-block: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--juye-t-slow) var(--juye-ease-out),
    padding-block      var(--juye-t-slow) var(--juye-ease-out),
    border-top-width   var(--juye-t-slow) var(--juye-ease-out),
    visibility         0s linear var(--juye-t-slow);
}

.juye-searchbar.is-open {
  grid-template-rows: minmax(0, 1fr);
  padding-block: 16px;
  border-top-width: 1.5px;
  visibility: visible;
  transition:
    grid-template-rows var(--juye-t-slow) var(--juye-ease-out),
    padding-block      var(--juye-t-slow) var(--juye-ease-out),
    border-top-width   var(--juye-t-slow) var(--juye-ease-out),
    visibility         0s;
}

/* The grid child has to clip, or the row cannot shrink below the form. Its own
   6px of padding is what the input's 3px focus ring sits in -- without it the
   ring is cut off by this very overflow. The 16px above plus this makes the
   22px the bar had before it learned to move. */
.juye-searchbar > * {
  min-height: 0;
  overflow: hidden;
  padding-block: 6px;
}

.juye-searchbar form {
  display: flex;
  gap: 10px;
  max-width: 600px;
  margin-inline: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity   calc(var(--juye-t-slow) * .7) var(--juye-ease-out),
    transform var(--juye-t-slow) var(--juye-ease-out);
}

/* Trailing the bar slightly is what stops it reading as one flat block. */
.juye-searchbar.is-open form {
  opacity: 1;
  transform: none;
  transition-delay: 60ms;
}

.juye-searchbar input[type="search"],
.juye-searchbar input[type="text"] {
  flex: 1;
  border: 1.5px solid var(--juye-line);
  border-radius: var(--juye-radius-pill);
  padding: 14px 22px;
  font-size: 15px;
  background: var(--c-surface);
  color: var(--juye-ink);
}

.juye-searchbar input:focus {
  outline: none;
  border-color: var(--juye-tea);
  box-shadow: 0 0 0 3px rgba(var(--c-brand-mid-rgb), .18);
}

.juye-searchbar button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--juye-radius-pill);
  border: none;
  background: var(--juye-forest);
  color: var(--juye-cream);
  padding: 14px 24px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition:
    background 180ms var(--juye-ease-out),
    transform  180ms var(--juye-ease-out);
}

/* juye_icon() draws in currentColor, so the glyph picks up the cream above. */
.juye-searchbar button .juye-icon { width: 20px; height: 20px; display: block; }

.juye-searchbar button:hover { background: var(--juye-forest-dk); }
.juye-searchbar button:active { transform: scale(.96); }

.juye-searchbar button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--juye-cream), 0 0 0 5px var(--juye-forest);
}

/* Keep the design, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .juye-searchbar,
  .juye-searchbar.is-open,
  .juye-searchbar form,
  .juye-searchbar.is-open form,
  .juye-searchbar button {
    transition: none;
  }
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */
.juye-drawer {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(var(--c-brand-deep-rgb), .5);
  opacity: 0;
  transition: opacity var(--juye-t) var(--juye-ease);
}

.juye-drawer.is-open { opacity: 1; }

.juye-drawer__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: min(86vw, 350px);
  background: var(--juye-cream);
  padding: 24px 26px 40px;
  transform: translateX(-100%);
  transition: transform .3s var(--juye-ease);
  overflow-y: auto;
}

.juye-drawer.is-open .juye-drawer__panel { transform: translateX(0); }

.juye-drawer__close {
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  cursor: pointer;
  margin: 0 0 20px -10px;
  color: var(--juye-forest);
}

.juye-drawer__menu { list-style: none; margin: 0 0 26px; padding: 0; }
.juye-drawer__menu li { border-bottom: 1px solid var(--c-border); }

.juye-drawer__menu a {
  display: block;
  padding: var(--sp-4) 0;
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
}

/* The drawer has no room for a hover panel, so the nested list is simply
   always open, indented under its parent. */
.juye-drawer__menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--sp-2) var(--sp-4);
}

.juye-drawer__menu .sub-menu li { border-bottom: none; }

.juye-drawer__menu .sub-menu a {
  padding: var(--sp-3) 0;
  min-height: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-ink-muted);
}

.juye-drawer__menu .sub-menu a:hover,
.juye-drawer__menu .sub-menu .current-menu-item > a { color: var(--c-accent-ink); }

.juye-drawer__account {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

/* ==========================================================================
   Hero - deep forest, colour-blocked
   ========================================================================== */
.juye-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-brand);
  color: var(--c-on-dark);
}

/* One deliberate warm glow behind the packs, not scattered confetti. */
.juye-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 44%;
  right: 2%;
  width: min(52vw, 720px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--c-accent-rgb), .42) 0%, rgba(var(--c-accent-rgb), 0) 66%);
}

/* Grain. A flat field of colour is the main thing that makes a large block
   read as a template; this gives it depth without a gradient or an image. */
.juye-hero::after,
.juye-promo::after,
.juye-cta::after,
.juye-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("grain.png");
  background-size: 160px 160px;
  opacity: .5;
  mix-blend-mode: overlay;
}

.juye-promo,
.juye-cta,
.juye-footer { position: relative; }

.juye-hero__inner,
.juye-promo__inner,
.juye-cta__inner,
.juye-footer__grid,
.juye-footer__bar,
.juye-rail { position: relative; z-index: 1; }

/* Deliberately not 50/50: the pack cluster gets the larger share and bleeds
   past the right edge, so the composition is not the default two-column hero. */
.juye-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  min-height: clamp(520px, 78vh, 780px);
  padding-block: clamp(56px, 7vw, 98px) clamp(56px, 6.5vw, 96px);
}

/* A ch-based limit is unreliable against the display face at hero sizes - it
   collapsed the headline to one word per line. A pixel cap behaves. */
.juye-hero__copy { max-width: 560px; }

.juye-hero .juye-eyebrow { color: var(--juye-saffron); }

.juye-hero__title {
  margin: 0 0 22px;
  font-size: var(--juye-fs-hero);
  line-height: .98;
  letter-spacing: -0.035em;
  color: var(--juye-cream);
}

.juye-hero__text {
  margin: 0 0 36px;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.65;
  color: rgba(var(--c-on-dark-rgb), .8);
  max-width: 38ch;
}

.juye-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Allowed to run past the right gutter so the cluster is cropped by the
   viewport rather than politely boxed inside the column. */
.juye-hero__media {
  position: relative;
  min-height: clamp(360px, 46vw, 600px);
  margin-right: calc(var(--juye-gutter) * -1.4);
}

.juye-hero__stack {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.juye-hero__pack {
  position: absolute;
  margin: 0;
  filter: drop-shadow(0 26px 42px rgba(var(--c-brand-deep-rgb), .42));
}

.juye-hero__pack img { display: block; width: 100%; height: auto; }
.juye-hero__pack.is-framed { border-radius: 8px; overflow: hidden; }

/* A cluster, not a line-up: the hero pack is markedly larger and sits lowest,
   with the other two smaller, higher and tucked behind it. */
.juye-hero__pack--1 { width: 44%; z-index: 1; left: 1%; transform: translateY(-20%) rotate(-9deg); }
.juye-hero__pack--2 { width: 66%; z-index: 3; transform: translateY(0); }
.juye-hero__pack--3 { width: 42%; z-index: 2; right: 0;  transform: translateY(-15%) rotate(9deg); }

/* A pair is not a three-pack with a gap in it. The lead moves off centre and
   the companion sits behind its shoulder, so two packs still read as a
   composition rather than as one pack that failed to load. */
.juye-hero__stack--2 .juye-hero__pack--1 {
  width: 60%; z-index: 3; left: 6%; transform: translateY(2%) rotate(-5deg);
}

.juye-hero__stack--2 .juye-hero__pack--2 {
  width: 44%; z-index: 2; right: 2%; transform: translateY(-16%) rotate(8deg);
}

/* ==========================================================================
   Hero carousel

   Every slide occupies the same grid cell, so the section is as tall as its
   tallest slide and never resizes as they change -- a hero that grows and
   shrinks under the fold is the thing that makes a carousel feel cheap.

   The first slide carries .is-active from PHP, so with no JavaScript at all
   the hero is exactly the static hero it was before.
   ========================================================================== */
.juye-hero__slides { display: grid; }

.juye-hero__slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  /* Not display:none -- that cannot be transitioned. visibility also keeps
     the inactive slides' links out of the tab order, which is the job
     [hidden] would otherwise be doing. */
  visibility: hidden;
}

.juye-hero__slide.is-active { opacity: 1; visibility: visible; }

.juye-hero__controls {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  padding-bottom: clamp(18px, 2.4vw, 30px);
  margin-top: calc(clamp(56px, 6.5vw, 96px) * -1);
}

.juye-hero__dots { display: flex; align-items: center; gap: 10px; }

.juye-hero__dot {
  position: relative;
  width: 44px;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(var(--c-on-dark-rgb), .22);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* The tap target is the pseudo-element, so the bar can stay 4px tall without
   being a 4px thing to hit on a phone. */
.juye-hero__dot::after {
  content: "";
  position: absolute;
  inset: -14px -4px;
}

.juye-hero__dot:hover { background: rgba(var(--c-on-dark-rgb), .38); }

.juye-hero__dot:focus-visible {
  outline: 2px solid var(--juye-saffron);
  outline-offset: 4px;
}

/* Fills across while the slide is showing, so the bar is a countdown rather
   than a decoration. JS drives the width; CSS only says how it moves. */
.juye-hero__dot-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--juye-saffron);
  transform-origin: left center;
}

.juye-hero__dot.is-active .juye-hero__dot-fill { width: 100%; }

.juye-hero__photo { position: relative; height: 100%; }

.juye-hero__photo img {
  width: 100%;
  height: 100%;
  min-height: clamp(340px, 44vw, 560px);
  object-fit: cover;
  border-radius: var(--juye-radius);
  display: block;
}

/* ==========================================================================
   Hero rail - the trust points, anchored to the hero
   ========================================================================== */
.juye-rail { border-top: 1px solid rgba(var(--c-on-dark-rgb), .16); }

.juye-rail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
}

.juye-rail__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 34px) clamp(22px, 2.6vw, 32px) 0;
  border-right: 1px solid rgba(var(--c-on-dark-rgb), .16);
}

.juye-rail__grid > .juye-rail__item:last-child { border-right: none; }

.juye-rail__item + .juye-rail__item { padding-left: clamp(20px, 2.4vw, 34px); }

.juye-rail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--juye-saffron);
}

.juye-rail__icon .juye-icon { width: 22px; height: 22px; }

.juye-rail__title {
  margin: var(--sp-1) 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-on-dark);
}

.juye-rail__text { margin: 0; color: var(--c-on-dark-mut); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* ==========================================================================
   Products
   ========================================================================== */
.juye-products { background: var(--juye-cream); }

/* ==========================================================================
   Category cards
   ========================================================================== */
.juye-cats { background: var(--juye-milk); }

.juye-cats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.juye-cat-card {
  position: relative;
  border-radius: var(--juye-radius);
  overflow: hidden;
  min-height: 260px;
}

.juye-cat-card a {
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-height: 260px;
  padding: 28px;
  text-decoration: none;
  position: relative;
}

.juye-cat-card__text { position: relative; z-index: 2; max-width: 60%; }

.juye-cat-card__name {
  display: block;
  font-family: var(--juye-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.juye-cat-card__count {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: 16px;
}

.juye-cat-card__go {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.juye-cat-card__go svg { width: 15px; height: 15px; transition: transform var(--juye-t) var(--juye-ease); }
.juye-cat-card a:hover .juye-cat-card__go svg { transform: translateX(5px); }

.juye-cat-card__pack {
  position: absolute;
  right: -14%;
  bottom: -12%;
  width: 62%;
  z-index: 1;
  filter: drop-shadow(0 14px 28px rgba(var(--c-brand-deep-rgb), .26));
  transition: transform .45s var(--juye-ease);
}

.juye-cat-card a:hover .juye-cat-card__pack { transform: translateY(-8px) rotate(-3deg); }

.juye-cat-card--forest   { background: var(--juye-forest); }
.juye-cat-card--terra    { background: var(--juye-terra); }
.juye-cat-card--saffron  { background: var(--juye-saffron); }
.juye-cat-card--tea      { background: var(--juye-tea); }
.juye-cat-card--cardamom { background: var(--juye-cardamom); }

.juye-cat-card--forest a,
.juye-cat-card--terra a,
.juye-cat-card--tea a { color: var(--juye-cream); }

.juye-cat-card--saffron a,
.juye-cat-card--cardamom a { color: var(--juye-forest); }

/* ==========================================================================
   Story
   ========================================================================== */
.juye-story { background: var(--juye-terra-soft); }

.juye-story__inner.has-image {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(30px, 6vw, 86px);
  align-items: center;
}

/* Quote variant, used when no story image has been uploaded. */
.juye-story--quote { text-align: center; }

.juye-story__quote { max-width: 760px; }

.juye-story__mark {
  display: block;
  font-family: var(--juye-display);
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: .7;
  color: var(--juye-terra);
  opacity: .35;
  margin-bottom: 10px;
}

.juye-story__line {
  margin: 0 0 22px;
  font-family: var(--juye-display);
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--juye-forest);
}

.juye-story--quote .juye-story__text {
  margin-inline: auto;
  max-width: 54ch;
  font-size: 1.08rem;
}

.juye-story__rule {
  display: block;
  width: 52px;
  height: 2px;
  background: var(--juye-terra);
  margin: 32px auto 16px;
}

.juye-story__sign {
  font-family: var(--juye-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--juye-terra);
}

.juye-story__copy .juye-sec__title { margin-bottom: 22px; }

.juye-story__text { color: var(--juye-ink-soft); font-size: 1.06rem; line-height: 1.8; }
.juye-story__text p:last-child { margin-bottom: 0; }

.juye-story__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--juye-radius);
  display: block;
  box-shadow: var(--juye-shadow-lg);
}

/* ==========================================================================
   Promo band
   ========================================================================== */
.juye-promo {
  background: var(--juye-saffron);
  overflow: hidden;
}

.juye-promo__inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  padding-block: clamp(48px, 6vw, 86px);
}

.juye-promo .juye-eyebrow { color: var(--juye-forest); opacity: .75; }

.juye-promo__title {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  color: var(--juye-forest);
}

.juye-promo__text {
  margin: 0 0 30px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(var(--c-brand-rgb), .78);
  max-width: 38ch;
}

.juye-promo__media { position: relative; display: flex; justify-content: center; }

.juye-promo__media img {
  width: min(64%, 300px);
  filter: drop-shadow(0 22px 40px rgba(var(--c-brand-rgb), .3));
  transform: rotate(-5deg);
}

/* ==========================================================================
   Steps
   ========================================================================== */
.juye-steps { background: var(--juye-milk); }

.juye-steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(26px, 3.5vw, 56px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.juye-step { padding-top: 22px; border-top: 1px solid var(--juye-line); }

/* The numeral is the graphic element, not a badge: oversized, outlined, and
   part of the typography rather than another coloured circle. */
.juye-step__num {
  display: block;
  font-family: var(--juye-display);
  font-size: clamp(3.4rem, 6vw, 5rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--juye-saffron);
  margin-bottom: 20px;
}

.juye-step__title { margin: 0 0 9px; font-size: 1.18rem; }
.juye-step__text  { margin: 0; color: var(--juye-ink-soft); font-size: 14.5px; line-height: 1.7; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.juye-reviews { background: var(--juye-cream); }

.juye-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.juye-review {
  margin: 0;
  background: var(--juye-milk);
  border-radius: var(--juye-radius);
  padding: 30px;
  box-shadow: var(--juye-shadow-sm);
}

.juye-review__stars { color: var(--juye-saffron); letter-spacing: 3px; margin-bottom: 16px; font-size: 14px; }

.juye-review blockquote {
  margin: 0 0 20px;
  padding: 0;
  border: none;
  font-family: var(--juye-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--juye-forest);
}

.juye-review figcaption { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.juye-review figcaption strong { display: block; color: var(--juye-ink); margin-bottom: 2px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.juye-faq { background: var(--juye-cream); }

.juye-faq__wrap { max-width: 820px; }

.juye-faq__list { border-top: 2px solid var(--juye-forest); }

.juye-faq__item { border-bottom: 1.5px solid rgba(var(--c-brand-rgb), .14); }

.juye-faq__item summary {
  cursor: pointer;
  padding: 24px 44px 24px 0;
  font-family: var(--juye-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--juye-forest);
  position: relative;
  list-style: none;
}

.juye-faq__item summary::-webkit-details-marker { display: none; }

.juye-faq__item summary::before,
.juye-faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--juye-terra);
  border-radius: 2px;
  transition: transform var(--juye-t) var(--juye-ease), opacity var(--juye-t) var(--juye-ease);
}

.juye-faq__item summary::before { width: 15px; height: 2.5px; margin-top: -1.25px; }
.juye-faq__item summary::after  { width: 2.5px; height: 15px; margin-top: -7.5px; right: 12.25px; }

.juye-faq__item[open] summary::after { transform: rotate(90deg); opacity: 0; }

.juye-faq__answer {
  padding: 0 44px 26px 0;
  color: var(--juye-ink-soft);
  font-size: 15.5px;
  line-height: 1.8;
  max-width: 64ch;
}
.juye-faq__answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.juye-cta {
  background: var(--juye-forest);
  color: var(--juye-cream);
  padding-block: clamp(64px, 8vw, 120px);
  text-align: center;
}

.juye-cta__title {
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  color: var(--juye-cream);
}

.juye-cta__text {
  margin: 0 auto 34px;
  max-width: 40ch;
  font-size: 1.06rem;
  color: rgba(var(--c-on-dark-rgb), .76);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.juye-footer { background: var(--c-brand-deep); color: var(--c-on-dark-mut); }

.juye-footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: clamp(32px, 4vw, 58px);
  padding-block: clamp(54px, 7vw, 86px);
}

.juye-footer__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-on-dark);
  display: block;
  margin-bottom: var(--sp-3);
}

.juye-footer__tagline {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-width: 32ch;
}

.juye-footer__heading {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 var(--sp-4);
}

.juye-footer__menu,
.juye-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.juye-footer__social { flex-direction: row; gap: 20px; }

.juye-footer__menu a,
.juye-footer__social a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--c-on-dark-mut);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}

.juye-footer__menu a:hover,
.juye-footer__social a:hover { color: var(--c-accent); }

.juye-footer__plain { font-size: var(--fs-sm); }

.juye-footer__bar { border-top: 1px solid var(--c-border-dark); }

.juye-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-block: 22px;
}

.juye-footer__copy { margin: 0; font-size: var(--fs-xs); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .juye-footer__grid { grid-template-columns: 1fr 1fr; }
  .juye-story__inner.has-image { grid-template-columns: 1fr; }
  .juye-story__media { order: -1; max-width: 400px; }
  .juye-promo__inner { grid-template-columns: 1fr; text-align: center; }
  .juye-promo__text { margin-inline: auto; }
  .juye-promo__media { order: -1; }
  .juye-promo__media img { width: min(52%, 220px); }
}

@media (max-width: 860px) {
  .juye-hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: var(--sp-5);
    padding-block: clamp(28px, 5vw, 44px) 0;
  }
  /* The narrow measure belongs to the display heading, which wants to break
     into three strong lines -- not to the whole column. Capping the column
     was squeezing the sentence underneath to four cramped lines. Constrain
     the heading in em, so it tracks its own clamped size, and the sentence
     gets the full width: same three-line heading, two-line sentence. */
  .juye-hero__copy { max-width: none; }
  .juye-hero__title { max-width: 6.2em; }
  /* No bleed on narrow screens: the cluster needs the full column. */
  .juye-hero__media { min-height: clamp(230px, 56vw, 320px); margin-right: 0; }
  .juye-rail__item { border-right: none; border-top: 1px solid rgba(var(--c-on-dark-rgb), .16); padding-inline: 0 !important; }
  .juye-rail { border-top: none; }
  .juye-hero::before { right: 50%; transform: translate(50%, -50%); width: min(90vw, 480px); }
}

@media (max-width: 782px) {
  .juye-nav { display: none; }
  .juye-burger { display: flex; }
  .juye-brand { margin-inline: auto 0; }
  .juye-header__inner { min-height: 66px; gap: 4px; }
  .juye-value { gap: 12px; }

  /* The mobile header carries four controls and nothing else: menu, logo,
     search, cart. Account already lives in the drawer, so the fifth icon was
     only stealing width and thumb room from the cart. */
  .juye-account-link { display: none; }

  /* WhatsApp is a desktop-header affordance; on mobile the floating button
     covers it, so showing both would be two of the same control. */
  .juye-header .juye-wa-header { display: none; }
}

@media (max-width: 560px) {
  .juye-footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .juye-wordmark { font-size: 1.35rem; }
  .juye-hero__pack--1 { width: 42%; left: 2%; transform: translateY(-17%) rotate(-9deg); }
  .juye-hero__pack--2 { width: 60%; transform: translateY(2%); }
  .juye-hero__pack--3 { width: 40%; right: 2%; transform: translateY(-13%) rotate(9deg); }

  .juye-hero__stack--2 .juye-hero__pack--1 { width: 56%; left: 4%; transform: translateY(2%) rotate(-5deg); }
  .juye-hero__stack--2 .juye-hero__pack--2 { width: 42%; right: 2%; transform: translateY(-14%) rotate(8deg); }

  /* Full-bleed buttons below stack, so the dots need their own breathing
     room rather than hugging the last one. */
  .juye-hero__controls { margin-top: calc(clamp(56px, 6.5vw, 96px) * -0.6); }
  .juye-hero__dot { width: 34px; }
  .juye-cat-card a { padding: 22px; min-height: 220px; }
  .juye-cat-card__text { max-width: 66%; }
  .juye-btn { width: 100%; }
  .juye-hero__actions { gap: var(--sp-3); }

  /* One call to action in the hero. Two stacked full-width buttons read as
     two equal choices and cost about 64px of a first screen that already had
     no product on it, so the secondary becomes a quiet link beneath the
     primary -- still a 44px target, just no longer competing with it. */
  .juye-hero__actions .juye-btn--ghost-light {
    width: auto;
    min-height: var(--tap-min);
    padding: 0;
    background: none;
    border-color: transparent;
    color: var(--c-on-dark-mut);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .juye-hero__actions .juye-btn--ghost-light:hover {
    background: none;
    border-color: transparent;
    color: var(--c-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .juye-drawer,
  .juye-drawer__panel,
  .juye-btn,
  .juye-cat-card__pack,
  .juye-cat-card__go svg,
  .juye-faq__item summary::before,
  .juye-faq__item summary::after { transition: none; }
  .juye-btn:hover,
  .juye-cat-card a:hover .juye-cat-card__pack { transform: none; }
}

/* ==========================================================================
   Premium pass: tactility, condensed header, category rail
   ========================================================================== */

/* Buttons need a floor as well as a lift. Without a press state a button
   animates away from the finger and never answers it. */
.juye-btn:active {
  transform: translateY(0) scale(.975);
  transition-duration: .08s;
}

/* A single sweep of light across the primary action on hover. The gradient is
   painted on a pseudo-element so it never disturbs the button's own
   background or its hover colour. */
.juye-btn--saffron { position: relative; overflow: hidden; }

.juye-btn--saffron::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(var(--c-highlight-rgb), .5) 50%, transparent 62%);
  transform: translate3d(-120%, 0, 0);
  transition: transform .7s var(--juye-ease-out, var(--juye-ease));
  pointer-events: none;
}

.juye-btn--saffron:hover::after { transform: translate3d(120%, 0, 0); }

/* The header earns its weight only once the page has moved under it. */
.juye-header {
  transition:
    box-shadow var(--juye-t) var(--juye-ease),
    background var(--juye-t) var(--juye-ease);
}

.juye-header.is-stuck {
  box-shadow: 0 6px 24px rgba(var(--c-brand-rgb), .09);
  background: rgba(var(--c-surface-rgb), .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.juye-header__inner { transition: min-height .35s var(--juye-ease-out, var(--juye-ease)); }
.juye-header.is-stuck .juye-header__inner { min-height: 64px; }

/* Four categories, so four across: auto-fit was leaving a single orphan card
   on a row of its own at mid widths. Revisit the count here if the shop grows
   past four collections. */
@media (min-width: 1000px) {
  .juye-cats__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Below that it becomes a swipeable rail, which suits a thumb far better than
   a stack of full-width blocks and keeps the next card visible as a hint. */
@media (max-width: 999px) {
  .juye-cats__grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Bleed to the screen edges so the rail reads as continuing off-screen,
       while the first card still lines up with the page gutter. */
    margin-inline: calc(var(--juye-gutter) * -1);
    padding: 2px var(--juye-gutter) 8px;
    scroll-padding-left: var(--juye-gutter);
    scrollbar-width: none;
  }

  .juye-cats__grid::-webkit-scrollbar { display: none; }

  .juye-cat-card {
    flex: 0 0 min(74%, 300px);
    scroll-snap-align: start;
  }
}

/* Category cards lift like product cards do, so the two grids feel related. */
.juye-cat-card {
  transition:
    transform  .45s var(--juye-ease-out, var(--juye-ease)),
    box-shadow .45s var(--juye-ease-out, var(--juye-ease));
}

.juye-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--juye-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  .juye-btn--saffron::after,
  .juye-header__inner,
  .juye-menu .sub-menu,
  .juye-menu .menu-item-has-children > a::before,
  .juye-cat-card { transition: none; }

  .juye-btn:active { transform: none; }
  .juye-cat-card:hover { transform: none; }
}


/* ==========================================================================
   Footer marks - how you pay, who delivers

   Monochrome wordmarks, not logos: the store has no licence to reproduce
   courier or wallet branding, and a row of full-colour logos fights every
   other colour on the page. The payment row is built from the gateways that
   are actually switched on, so the footer can never promise a method the
   checkout does not offer.
   ========================================================================== */
.juye-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-4);
}

.juye-marks + .juye-marks { border-top: 1px solid var(--c-border-dark); }

.juye-marks__label {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-accent);
}

.juye-marks__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.juye-marks__list li {
  border: 1px solid var(--c-border-dark);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-on-dark-mut);
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* The label stops competing for the row and sits above its own marks. */
  .juye-marks { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* ==========================================================================
   404 and empty states
   ========================================================================== */
.juye-404__inner { max-width: 44ch; }

.juye-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.juye-404__search { margin-top: var(--sp-7); max-width: 420px; }

.juye-archive-head__cta { margin-top: var(--sp-4); }

/* ==========================================================================
   Cart and checkout are layouts, not prose

   `.page .entry-content` carries a 68ch reading measure, which is right for
   Our Story and the policy pages. On cart and checkout it was capping the
   whole page at 690px inside a 1290px container -- so Blocksy's 2fr/1fr grid
   had only 650px to divide and the totals column collapsed to 217px. That is
   why "SUBTOTAL" broke mid-word and the panels read as slim.

   Only the measure is lifted; the colour and size set alongside it stay.
   ========================================================================== */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
  max-width: none;
}