/* ==========================================================================
   FONTS — self-hosted.
   Google Fonts meant two extra connections before a glyph could paint, and
   fonts.googleapis.com was never preconnected, so the CSS request itself
   paid a full DNS+TLS round trip. With font-display:swap that shows the
   system Hebrew serif first — which on some machines is a slanted face, so
   headings intermittently rendered in the wrong font. Served from the
   theme, preloaded, this cannot happen.
   ========================================================================== */
@font-face{
  font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/frank-ruhl-libre-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/frank-ruhl-libre-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Assistant'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/assistant-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Assistant'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/assistant-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   JEWELRY ONE — design system
   RTL-first. Frank Ruhl Libre (display) + Assistant (UI).
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#1a1613;          /* warm near-black, never a cold pure black */
  --ink-2:#57504a;
  --mute:#938a80;
  --line:#ebe4da;         /* softer rules: structure you feel, not lines you count */
  --line-2:#f4efe8;
  --paper:#fffdfa;
  --cream:#f9f5ef;
  --sand:#f0e9df;
  --gold:#9c7639;
  --gold-2:#c8a768;
  --blush:#f6efe9;        /* the warm accent ground */
  --r:12px;               /* one radius language across the whole site */
  --r-sm:9px;
  --shadow:0 12px 34px -22px rgba(26,22,19,.42);
  --good:#1c6a45;
  --warn:#9c3a2a;
  --star:#e0a52b;
  --star-off:#e2dbd0;

  /* Headings use Assistant, the same face as the navigation. This used to
     be Frank Ruhl Libre and every heading was pulled back to Assistant by
     an !important list — which leaked, because any heading not on the list
     stayed serif. Flipping the token fixes it at the source. */
  --f-disp:'Assistant', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-ui:'Assistant', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-logo:'Frank Ruhl Libre', Georgia, serif;   /* Latin logotype only */

  --wrap:1360px;
  --gut:clamp(16px, 4vw, 48px);
  --hd:64px;

  --e:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.2; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.jo-wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.jo-skip{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.jo-skip:focus{
  width:auto; height:auto; overflow:visible; clip:auto; clip-path:none;
  inset-inline-start:12px; top:12px; background:var(--ink); color:#fff;
  padding:10px 16px; z-index:999;
}
.jo-i{ width:18px; height:18px; flex:0 0 auto; }

/* ---------- type scale ---------- */
.jo-eyebrow{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); font-weight:600;
}

/* ---------- buttons ---------- */
.jo-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button, button.single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:54px; padding:0 30px;
  font-family:var(--f-ui); font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); border-radius:0;
  transition:background .25s var(--e), color .25s var(--e), border-color .25s var(--e);
  cursor:pointer; text-align:center;
}
.jo-btn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
button.single_add_to_cart_button:hover{
  background:var(--gold); border-color:var(--gold); color:#fff;
}
.jo-btn--ghost,
.woocommerce a.button.jo-btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--line);
  min-height:44px; font-size:11px; padding:0 18px;
}
.jo-btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.jo-btn[disabled], .single_add_to_cart_button.disabled,
.single_add_to_cart_button.wc-variation-selection-needed{
  background:var(--cream); color:var(--mute); border-color:var(--line); cursor:not-allowed;
}

/* ---------- form controls ---------- */
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=search],input[type=password],textarea,select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100%; min-height:52px; padding:14px 16px;
  font-family:var(--f-ui); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:0;
  transition:border-color .2s var(--e); box-shadow:none; -webkit-appearance:none; appearance:none;
}
textarea{ min-height:110px; resize:vertical; }
input:focus,textarea:focus,select:focus{ border-color:var(--ink); outline:none; }
::placeholder{ color:#bdb5ab; }
select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(0% + 20px) calc(50% + 1px), calc(0% + 25px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-inline-start:44px; cursor:pointer;
}
/* ==========================================================================
   HEADER
   ========================================================================== */
.jo-promo{
  background:var(--ink); color:var(--paper);
  font-size:12px; letter-spacing:.04em; text-align:center; padding:9px 16px;
}
.jo-promo p{ margin:0; }
.jo-promo strong{ font-weight:700; }

.jo-hd{ position:sticky; top:0; z-index:200; background:var(--paper); border-bottom:1px solid var(--line-2); }
.jo-hd__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  height:var(--hd); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
.jo-hd__burger{ display:none; }
.jo-logo{ text-align:center; line-height:1; }
.jo-logo__m{
  display:block; font-family:var(--f-disp); font-size:23px; font-weight:400;
  letter-spacing:.24em; text-indent:.24em;
}
.jo-logo__s{
  display:block; font-size:9px; letter-spacing:.42em; text-indent:.42em;
  color:var(--mute); margin-top:3px;
}
.jo-hd__act{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.jo-ico{ display:grid; place-items:center; width:40px; height:40px; color:var(--ink); transition:opacity .2s var(--e); }
.jo-ico:hover{ opacity:.55; }
.jo-cart{ position:relative; display:grid; place-items:center; width:40px; height:40px; }
.jo-cart__n{
  position:absolute; inset-block-start:4px; inset-inline-start:4px;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--ink); color:var(--paper);
  font-size:10px; font-weight:700; display:grid; place-items:center;
}

/* nav */
.jo-nav__ul{ display:flex; align-items:center; gap:30px; }
.jo-nav__ul > li{ position:relative; }
.jo-nav__ul > li > a{
  display:inline-block; padding:20px 0; font-size:13px; font-weight:600;
  letter-spacing:.1em; position:relative;
}
.jo-nav__ul > li > a::after{
  content:""; position:absolute; inset-inline:0; bottom:14px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .3s var(--e);
}
.jo-nav__ul > li:hover > a::after{ transform:scaleX(1); }
.jo-nav__ul .sub-menu{
  position:absolute; top:100%; inset-inline-start:0; min-width:210px;
  background:var(--paper); border:1px solid var(--line);
  padding:10px 0; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .22s var(--e), transform .22s var(--e), visibility .22s;
  box-shadow:0 12px 40px rgba(18,16,14,.07);
}
.jo-nav__ul > li:hover .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.jo-nav__ul .sub-menu a{ display:block; padding:9px 22px; font-size:13.5px; color:var(--ink-2); }
.jo-nav__ul .sub-menu a:hover{ background:var(--cream); color:var(--ink); }

/* search */
.jo-search{ border-top:1px solid var(--line-2); background:var(--paper); }
.jo-search form{ max-width:var(--wrap); margin-inline:auto; padding:16px var(--gut); display:flex; gap:10px; }
.jo-search input{ flex:1; border-color:var(--line); }
.jo-search button{ width:54px; display:grid; place-items:center; background:var(--ink); color:var(--paper); }

/* drawer */
/* Physical properties only. inset-inline-start + a physical translateX
   disagreed under RTL, leaving the panel floating off the edge. */
/* Visibility-driven, not [hidden]: a class-level display:flex overrides
   the UA's [hidden]{display:none}, which is why the panel rendered on
   every page load. */
/* Closed = display:none, so the panel has NO box at all. Every previous
   version parked it off-screen with a transform, which left a real
   323px-wide element sitting past the viewport edge — the source of the
   sideways scroll and the phantom gap. It cannot recur now: an element
   with display:none contributes no geometry to anything. */
.jo-drawer{
  position:fixed !important;
  top:0; bottom:0; right:0; left:auto;
  width:min(86vw,360px); max-width:360px;
  background:var(--paper); z-index:400; padding:0;
  overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 0 60px rgba(18,16,14,.18);
  display:none;
}
html[dir=ltr] .jo-drawer{ right:auto; left:0; }
.jo-drawer.is-open{
  display:flex; flex-direction:column;
  animation:jo-drawer-in .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes jo-drawer-in{ from{ transform:translateX(100%); } to{ transform:none; } }
html[dir=ltr] .jo-drawer.is-open{ animation-name:jo-drawer-in-ltr; }
@keyframes jo-drawer-in-ltr{ from{ transform:translateX(-100%); } to{ transform:none; } }

/* search panel: same treatment */
.jo-search{ display:none; }
.jo-search.is-open{ display:block; }
.jo-search[hidden]{ display:none !important; }
.jo-drawer__hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--line-2); flex:0 0 auto;
  font-size:13px; letter-spacing:0; text-transform:none; color:var(--ink); font-weight:600;
}
.jo-drawer__hd button{ width:34px; height:34px; display:grid; place-items:center; color:var(--mute); }
.jo-drawer__hd button:hover{ color:var(--ink); }
.jo-drawer__ul{ flex:1 1 auto; }
.jo-drawer__ul li{ border-bottom:1px solid var(--line-2); }
.jo-drawer__ul li:last-child{ border-bottom:0; }
.jo-drawer__ul a{
  display:block; padding:15px 20px; font-size:15px; font-weight:600; color:var(--ink);
  border-bottom:0;
}
.jo-drawer__ul a:hover{ background:var(--cream); }
.jo-drawer__ul .sub-menu{ background:#fdfcfa; border-top:1px solid var(--line-2); }
.jo-drawer__ul .sub-menu li{ border-bottom:1px solid rgba(0,0,0,.04); }
.jo-drawer__ul .sub-menu a{
  padding:12px 20px 12px 34px; font-size:13.5px; font-weight:400; color:var(--ink-2);
}
[dir=rtl] .jo-drawer__ul .sub-menu a{ padding:12px 34px 12px 20px; }
.jo-scrim{ position:fixed; inset:0; background:rgba(18,16,14,.4); z-index:399; opacity:0; transition:opacity .3s var(--e); }
.jo-scrim.is-on{ opacity:1; }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.jo-crumb{
  padding:22px 0 0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
  display:flex; gap:8px; align-items:center;
}
.jo-crumb a:hover{ color:var(--ink); }

.jo-pdp__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,84px); padding-block:26px 90px; align-items:start;
}

/* gallery: vertical rail, the way premium jewelry sites do it */
.jo-gal__stack{ display:grid; gap:10px; }
.jo-gal__f{ margin:0; background:var(--cream); overflow:hidden; }
.jo-gal__img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform 1.1s var(--e);
}
.jo-gal__f:hover .jo-gal__img{ transform:scale(1.045); }
.jo-gal__empty{ aspect-ratio:1/1; background:var(--cream); display:grid; place-items:center; color:var(--sand); }
.jo-gal__empty .jo-i{ width:56px; height:56px; }
.jo-gal__dots{ display:none; }

/* buy column */
.jo-buy__stick{ position:sticky; top:calc(var(--hd) + 26px); }
.jo-buy__t{
  font-family:var(--f-disp); font-size:clamp(26px,2.6vw,36px); font-weight:400;
  line-height:1.15; margin-bottom:14px;
}
.jo-buy__price{
  font-size:23px; font-weight:700; letter-spacing:-.01em; margin-bottom:4px;
}
.jo-buy__price del{ color:var(--mute); font-weight:400; font-size:.68em; margin-inline-end:8px; }
.jo-buy__price ins{ text-decoration:none; }
.jo-instal{ font-size:13px; color:var(--mute); margin:0 0 20px; }
.jo-instal strong{ color:var(--ink-2); font-weight:700; }

.jo-urg{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--ink-2);
  background:var(--cream); padding:9px 14px; margin:0 0 20px;
}
.jo-urg .jo-i{ width:15px; height:15px; }
.jo-urg strong{ font-weight:700; color:var(--ink); }
.jo-urg.is-low{ background:#fbf1ef; color:var(--warn); }
.jo-urg.is-low strong{ color:var(--warn); }
.jo-urg.is-ship{ background:#f9f5ec; }
.jo-dot{ width:7px; height:7px; border-radius:50%; background:var(--good); animation:jo-pulse 1.9s infinite; }
@keyframes jo-pulse{
  0%{ box-shadow:0 0 0 0 rgba(28,106,69,.45); }
  70%{ box-shadow:0 0 0 7px rgba(28,106,69,0); }
  100%{ box-shadow:0 0 0 0 rgba(28,106,69,0); }
}

.jo-buy__lede{ font-size:15px; line-height:1.75; color:var(--ink-2); margin-bottom:24px; }

/* add to cart */
.jo-buy__form .variations{ margin:0 0 20px; border:0; width:100%; }
.jo-buy__form .variations tr{ display:block; margin-bottom:14px; }
.jo-buy__form .variations td{ display:block; padding:0; border:0; }
.jo-buy__form .variations .label label{ margin-bottom:8px; }
.jo-buy__form .reset_variations{ font-size:11px; color:var(--mute); letter-spacing:.06em; }
.jo-buy__form form.cart,
.jo-buy__form .woocommerce-variation-add-to-cart{
  display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; margin:0;
}
.jo-buy__form .variations_form.cart{ display:block; }
.jo-buy__form .single_variation_wrap{ display:block; }
.jo-buy__form .quantity, .jo-buy__form .ux-quantity{
  flex:0 0 112px; display:flex; border:1px solid var(--line);
}
.jo-buy__form .quantity input.qty{
  min-height:54px; border:0; text-align:center; font-weight:600; padding:0;
}
.jo-buy__form button.single_add_to_cart_button{ flex:1 1 auto; min-width:210px; }
.jo-buy__form .woocommerce-variation-price{ margin:0 0 14px; font-size:19px; font-weight:700; }
.jo-buy__form .stock{ font-size:12px; color:var(--good); font-weight:600; margin:10px 0 0; }
.jo-buy__form .stock.out-of-stock{ color:var(--warn); }

.jo-buy__micro{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin:18px 0 0;
  font-size:11.5px; color:var(--mute);
}
.jo-buy__micro li{ display:inline-flex; align-items:center; gap:6px; }
.jo-buy__micro .jo-i{ width:14px; height:14px; color:var(--mute); stroke-width:1.2; }

.jo-pay{ display:flex; flex-wrap:wrap; gap:5px; margin:16px 0 0; }
.jo-pay li{
  font-size:9.5px; letter-spacing:.06em; color:var(--mute);
  background:var(--cream); padding:6px 10px; white-space:nowrap;
}

/* accordion */
.jo-acc{ margin-top:34px; border-top:1px solid var(--line-2); }
.jo-acc__i{ border-bottom:1px solid var(--line-2); }
.jo-acc__i > summary{
  list-style:none; cursor:pointer; padding:17px 2px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  transition:color .2s var(--e);
}
.jo-acc__i > summary::-webkit-details-marker{ display:none; }
.jo-acc__i > summary:hover{ color:var(--gold); }
.jo-acc__i > summary .jo-i{ width:15px; height:15px; color:var(--mute); transition:transform .28s var(--e); }
.jo-acc__i[open] > summary .jo-i{ transform:rotate(180deg); }
.jo-acc__b{ padding:2px 2px 22px; font-size:14.5px; line-height:1.85; color:var(--ink-2); }
.jo-specs > div{ display:flex; justify-content:space-between; gap:18px; padding:9px 0; }
.jo-specs > div:last-child{ border-bottom:0; }
.jo-specs dt{ color:var(--mute); font-size:13px; margin:0; }
.jo-specs dd{ margin:0; font-weight:600; font-size:13.5px; }

.jo-copy{ display:flex; gap:8px; margin-top:18px; opacity:.5; transition:opacity .2s var(--e); }
.jo-copy:hover{ opacity:1; }
.jo-copy input{ min-height:38px; font-size:11px; background:var(--cream); }
.jo-copy button{ min-height:38px; padding:0 14px; font-size:11px; border:1px solid var(--line); }

/* sticky buy bar */
.jo-stick{
  position:fixed; inset-inline:0; bottom:0; z-index:180;
  background:rgba(255,254,252,.97); backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(102%); transition:transform .34s var(--e);
  padding:10px var(--gut); padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.jo-stick.is-on{ transform:translateY(0); }
.jo-stick__in{ max-width:820px; margin-inline:auto; display:flex; align-items:center; gap:14px; }
.jo-stick__img img{ width:46px; height:46px; object-fit:cover; background:var(--cream); }
.jo-stick__meta{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.jo-stick__meta b{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jo-stick__meta em{ font-style:normal; font-size:13px; font-weight:700; }
.jo-stick__meta del{ display:none; }
.jo-stick .jo-btn{ min-height:46px; padding:0 26px; font-size:11.5px; }

/* related */
.related.products, .up-sells.products{
  max-width:var(--wrap); margin:0 auto; padding:20px var(--gut) 88px;
}
.related.products > h2, .up-sells.products > h2{
  font-family:var(--f-disp); font-size:26px; font-weight:400;
  text-align:center; margin-bottom:38px;
}

/* ==========================================================================
   PRODUCT GRID
   ========================================================================== */
.jo-arch__hd{ padding:44px 0 10px; text-align:center; }
.jo-arch__hd h1{ font-family:var(--f-disp); font-size:clamp(28px,3.4vw,42px); }
.jo-arch__desc{ max-width:620px; margin:14px auto 0; color:var(--ink-2); font-size:15px; }
.jo-arch__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 0 26px; margin-bottom:12px; font-size:12.5px; color:var(--mute);
}
.jo-arch__bar .woocommerce-ordering select{ min-height:44px; font-size:13px; }
.woocommerce-result-count{ margin:0; }

ul.products{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,34px) clamp(12px,1.8vw,26px); margin:0 0 56px;
}
.jo-card{ position:relative; }
.jo-card__media{ position:relative; background:var(--cream); overflow:hidden; aspect-ratio:1/1; }
.jo-card__img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--e), opacity .5s var(--e);
}
.jo-card__img--hov{ position:absolute; inset:0; opacity:0; }
.jo-card:hover .jo-card__img--hov{ opacity:1; }
/* Positioning only — the timing lives in the hover-intent block below. */
.jo-card:hover .jo-card__img{ transform:scale(1.05); }
.jo-card__ph{ display:grid; place-items:center; height:100%; color:var(--sand); }
.jo-card__ph .jo-i{ width:40px; height:40px; }
.jo-card__tag{
  position:absolute; inset-block-start:10px; inset-inline-start:10px;
  background:var(--ink); color:var(--paper);
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px;
}
.jo-card__tag.is-out{ background:var(--sand); color:var(--ink-2); }
.jo-card__body{ padding:14px 2px 0; text-align:center; }
.jo-card__t{
  font-size:14px; font-weight:400; line-height:1.45; margin-bottom:6px; color:var(--ink);
}
.jo-card:hover .jo-card__t{ color:var(--gold); }
.jo-card__price{ font-size:14px; font-weight:700; }
.jo-card__price del{ color:var(--mute); font-weight:400; font-size:.85em; margin-inline-end:6px; }
.jo-card__price ins{ text-decoration:none; }
.jo-card__cta{ margin-top:12px; text-align:center; opacity:0; transform:translateY(4px); transition:opacity .25s var(--e), transform .25s var(--e); }
.jo-card:hover .jo-card__cta{ opacity:1; transform:translateY(0); }
.jo-card__cta .button{ width:100%; }

.woocommerce-pagination ul{ display:flex; justify-content:center; gap:6px; }
.woocommerce-pagination a,.woocommerce-pagination span{
  display:grid; place-items:center; min-width:42px; height:42px;
  border:1px solid var(--line); font-size:13px;
}
.woocommerce-pagination .current{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.jo-empty{ text-align:center; color:var(--mute); padding:70px 0; }

/* ==========================================================================
   MISC COMMERCE
   ========================================================================== */
.jo-meter{ background:var(--cream); padding:14px 16px; margin-bottom:22px; }
.jo-meter__t{ margin:0 0 9px; font-size:12.5px; text-align:center; }
.jo-meter__t strong{ font-weight:700; }
.jo-meter__bar{ height:3px; background:var(--sand); overflow:hidden; }
.jo-meter__bar span{ display:block; height:100%; background:var(--gold); transition:width .6s var(--e); }
.jo-meter.is-done{ background:#f2f7f4; }
.jo-meter.is-done .jo-meter__bar span{ background:var(--good); }
.jo-meter.is-done .jo-meter__t{ color:var(--good); }

.jo-assure-band{ background:var(--cream); }
.jo-assure{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  padding:44px 0; text-align:center;
}
.jo-assure li{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.jo-assure .jo-i{ width:24px; height:24px; color:var(--gold); stroke-width:1.1; }
.jo-assure b{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.jo-assure span{ display:block; font-size:11.5px; color:var(--mute); }
.jo-assure.is-compact{ grid-template-columns:repeat(2,1fr); gap:14px; padding:0; text-align:start; }
.jo-assure.is-compact li{ flex-direction:row; align-items:flex-start; gap:9px; }

.jo-secure{
  text-align:center; font-size:11.5px; color:var(--mute); margin-top:14px;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.jo-secure .jo-i{ width:14px; height:14px; }

.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--cream); border:1px solid var(--line); border-radius:0;
  padding:16px 18px; font-size:14px; color:var(--ink); margin-bottom:22px; list-style:none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.jo-ft{ background:var(--ink); color:#d9d2c9; padding-top:64px; }
.jo-ft__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:44px; padding-bottom:56px;
}
.jo-ft__brand .jo-logo__m{ color:var(--paper); font-size:19px; margin-bottom:16px; }
.jo-ft__brand p{ font-size:13.5px; line-height:1.8; max-width:330px; color:#a9a199; }
.jo-ft__social{ display:flex; gap:18px; margin-top:18px; font-size:12px; letter-spacing:.08em; }
.jo-ft__social a:hover{ color:var(--gold-2); }
.jo-ft__col h3{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:16px; font-weight:700;
}
.jo-ft__col li{ margin-bottom:9px; }
.jo-ft__col a{ font-size:13.5px; color:#c2bab1; }
.jo-ft__col a:hover{ color:var(--paper); }
.jo-ft__contact li{ font-size:13.5px; color:#a9a199; margin-bottom:9px; }
.jo-ft__base{ border-top:1px solid rgba(255,255,255,.09); padding:20px 0 26px; }
.jo-ft__base .jo-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.jo-ft__base p{ margin:0; font-size:11.5px; color:#8b837b; }
.jo-ft__base .jo-pay{ margin:0; }
.jo-ft__base .jo-pay li{ border-color:rgba(255,255,255,.16); color:#8b837b; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .jo-ft__grid{ grid-template-columns:1fr 1fr; gap:36px; }
}

@media (max-width:900px){
  .jo-hd__in{ grid-template-columns:auto 1fr auto; }
  .jo-hd__burger{ display:grid; place-items:center; width:40px; height:40px; }
  .jo-nav{ display:none; }
  .jo-logo{ justify-self:center; }
  .jo-logo__m{ font-size:18px; letter-spacing:.2em; text-indent:.2em; }
  .jo-hide-sm{ display:none; }

  .jo-pdp__grid{ grid-template-columns:1fr; gap:26px; padding-block:16px 60px; }

  /* gallery becomes a swipe rail on mobile */
  .jo-gal__stack{
    display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .jo-gal__stack::-webkit-scrollbar{ display:none; }
  .jo-gal__f{ flex:0 0 100%; scroll-snap-align:center; }
  .jo-gal__dots{ display:flex; justify-content:center; gap:7px; padding-top:14px; }
  .jo-gal__dots button{
    width:6px; height:6px; border-radius:50%; background:var(--sand); transition:background .2s var(--e);
  }
  .jo-gal__dots button.is-on{ background:var(--ink); }

  .jo-buy__stick{ position:static; }
  .jo-buy__t{ font-size:24px; }

  .jo-assure{ grid-template-columns:repeat(2,1fr); gap:26px 16px; padding:34px 0; }
  .related.products,.up-sells.products{ padding:44px var(--gut) 60px; }
  body.single-product{ padding-bottom:74px; }
  .jo-card__cta{ opacity:1; transform:none; }
}

@media (max-width:640px){
  ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
  .jo-ft__grid{ grid-template-columns:1fr; gap:30px; padding-bottom:40px; }
  .jo-ft__base .jo-wrap{ justify-content:center; text-align:center; }
  .jo-arch__hd{ padding:26px 0 6px; }
  .jo-arch__bar{ padding:18px 0 16px; margin-bottom:22px; }
  .jo-buy__form .quantity,.jo-buy__form .ux-quantity{ flex:0 0 96px; }
  .jo-buy__form button.single_add_to_cart_button{ min-width:0; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ==========================================================================
   CART PAGE
   ========================================================================== */
.jo-cartpage{ padding:44px 0 84px; }
.jo-cartpage__t,.jo-co__t{
  font-family:var(--f-disp); font-size:clamp(26px,3vw,36px); margin-bottom:26px; text-align:center;
}
.jo-cartpage__grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr); gap:clamp(24px,4vw,56px); align-items:start; }
.jo-lines{ }
.jo-line{ display:grid; grid-template-columns:100px 1fr auto; gap:18px; padding:22px 0; border-bottom:1px solid var(--line-2); align-items:start; }
.jo-line__img img{ width:100px; height:100px; object-fit:cover; background:var(--cream); }
.jo-line__t{ font-size:15px; font-weight:600; margin-bottom:5px; line-height:1.4; }
.jo-line__t a:hover{ color:var(--gold); }
.jo-line__sku{ font-size:11.5px; color:var(--mute); margin:0 0 10px; }
.jo-line__foot{ display:flex; align-items:center; gap:16px; margin-top:12px; flex-wrap:wrap; }
.jo-line__foot .quantity{ display:flex; border:1px solid var(--line); max-width:104px; }
.jo-line__foot .quantity input.qty{ min-height:44px; border:0; text-align:center; font-weight:600; }
.jo-line__price{ font-size:15px; font-weight:700; }
.jo-line__x{ font-size:22px; color:var(--mute); line-height:1; padding:4px; }
.jo-line__x:hover{ color:var(--warn); }
.jo-cartpage__acts{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:22px; }
.jo-coupon{ display:flex; gap:8px; flex:1 1 260px; }
.jo-coupon input{ min-height:44px; }
.jo-cart-empty{ text-align:center; padding:90px 0 110px; }
.jo-cart-empty .jo-i{ width:44px; height:44px; margin:0 auto 18px; color:var(--sand); stroke-width:1; }
.jo-cart-empty .jo-empty__t{ font-family:var(--f-disp); font-size:28px; margin-bottom:10px; }
.jo-cart-empty p{ color:var(--mute); margin-bottom:26px; }

/* order summary panel — shared by cart + checkout */
.jo-sum{ background:var(--cream); padding:26px; position:sticky; top:calc(var(--hd) + 22px); }
.jo-sum h2{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--mute); padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px;
}
.jo-sum table{ width:100%; border-collapse:collapse; }
.jo-sum th,.jo-sum td{ padding:11px 0; border:0; font-size:14px; text-align:start; font-weight:400; }
.jo-sum td{ text-align:end; }
.jo-sum .order-total th,.jo-sum .order-total td{
  font-size:19px; font-weight:700; border-top:1px solid var(--line); padding-top:16px;
}
.jo-sum .jo-btn{ width:100%; margin-top:18px; }
.jo-sum .jo-assure{ padding:20px 0 0; }
.jo-sum .jo-pay{ justify-content:center; }
.jo-sum .woocommerce-shipping-destination,
.jo-sum .shipping-calculator-button{ font-size:12px; color:var(--mute); }

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.jo-co{ padding:40px 0 90px; }
.jo-co__trust{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  background:var(--cream); padding:18px; margin-bottom:32px; text-align:center;
}
.jo-co__trust li{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.jo-co__trust .jo-i{ width:19px; height:19px; color:var(--gold); }
.jo-co__trust b{ font-size:12px; font-weight:700; }
.jo-co__trust span{ font-size:11px; color:var(--mute); }
.jo-co__grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr); gap:clamp(24px,4vw,56px); align-items:start; }
.jo-co h3{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--mute); padding-bottom:14px; border-bottom:1px solid var(--line); margin:0 0 22px;
}
.woocommerce form .form-row{ margin-bottom:18px; padding:0; }
.woocommerce form .form-row-first,.woocommerce form .form-row-last{ width:48.5%; float:none; display:inline-block; vertical-align:top; }
.woocommerce form .form-row-first{ margin-inline-end:3%; }
.woocommerce-checkout #payment{ background:transparent; border-radius:0; }
.woocommerce-checkout #payment ul.payment_methods{ border:0; padding:0; margin:0 0 18px; }
.woocommerce-checkout #payment ul.payment_methods li{
  border:1px solid var(--line); background:var(--paper); padding:15px 16px; margin-bottom:8px; list-style:none;
  transition:border-color .2s var(--e), box-shadow .2s var(--e);
}
.woocommerce-checkout #payment ul.payment_methods li:hover{ border-color:#cfc7bc; }
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked){ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.woocommerce-checkout #payment ul.payment_methods li label{
  display:inline; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); cursor:pointer;
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--paper); font-size:12.5px; color:var(--ink-2); margin-top:10px; padding:13px;
}
.woocommerce-checkout #payment div.payment_box::before{ display:none; }
#place_order{ width:100%; min-height:60px; font-size:13px; margin-top:8px; }
.woocommerce-terms-and-conditions-wrapper{ font-size:13px; margin:16px 0; }
.woocommerce-privacy-policy-text{ font-size:11px; color:var(--mute); }

@media (max-width:900px){
  .jo-cartpage__grid,.jo-co__grid{ grid-template-columns:1fr; }
  .jo-sum{ position:static; }
  .jo-line{ grid-template-columns:78px 1fr auto; gap:14px; }
  .jo-line__img img{ width:78px; height:78px; }
  .jo-co__trust{ grid-template-columns:1fr; gap:10px; text-align:start; }
  .jo-co__trust li{ flex-direction:row; align-items:center; gap:9px; }
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{ width:100%; margin-inline-end:0; }
}

/* ---------- guard: WooCommerce ships #7f54b3 on .button.alt ---------- */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit.alt{
  background-color:var(--ink); border-color:var(--ink); color:var(--paper);
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover{ background-color:var(--gold); border-color:var(--gold); }
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled{
  background-color:var(--cream); border-color:var(--line); color:var(--mute);
}

/* ---------- third-party float widgets ----------
   The WhatsApp bubble (click-to-chat) sat on top of the quantity
   field and the sticky buy bar. Lift it clear and drop it under. */
.ht-ctc, .ht-ctc-chat, #ht-ctc-chat, .ht_ctc_chat_style{
  z-index:150 !important;
  bottom:86px !important;
}
body:not(.single-product) .ht-ctc,
body:not(.single-product) .ht-ctc-chat,
body:not(.single-product) #ht-ctc-chat{ bottom:22px !important; }

/* ---------- breadcrumb: never overflow ---------- */
.jo-crumb{ flex-wrap:wrap; row-gap:2px; }
@media (max-width:640px){
  .jo-crumb{ padding-top:16px; font-size:10.5px; letter-spacing:.06em; }
  .jo-crumb a{ white-space:nowrap; }
}

/* ==========================================================================
   HOME
   ========================================================================== */
.jo-hero{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
  min-height:min(78vh,660px); background:var(--cream);
}
.jo-hero__media{ position:relative; overflow:hidden; background:var(--sand); }
.jo-hero__media img{ width:100%; height:100%; object-fit:cover; }
.jo-hero__copy{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:clamp(32px,6vw,86px); gap:6px;
}
.jo-hero__copy .jo-hero__h{
  font-family:var(--f-disp); font-size:clamp(30px,4.4vw,54px); font-weight:300;
  line-height:1.12; margin:10px 0 18px;
}
.jo-hero__lede{ font-size:15.5px; line-height:1.8; color:var(--ink-2); max-width:44ch; margin-bottom:28px; }

.jo-sec{ padding:clamp(48px,6vw,88px) var(--gut); }
.jo-sec__t{
  font-family:var(--f-disp); font-size:clamp(22px,2.6vw,32px); font-weight:400;
  text-align:center; margin-bottom:clamp(24px,3vw,42px);
}
.jo-sec__more{ text-align:center; margin:14px 0 0; }

.jo-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.8vw,26px); }
.jo-cats a{ display:block; text-align:center; }
.jo-cats__img{ display:block; aspect-ratio:4/5; background:var(--cream); overflow:hidden; }
.jo-cats__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e); }
.jo-cats a:hover .jo-cats__img img{ transform:scale(1.05); }
.jo-cats__ph{ display:grid; place-items:center; height:100%; color:var(--sand); }
.jo-cats__ph .jo-i{ width:34px; height:34px; }
.jo-cats__n{ display:block; margin-top:13px; font-size:14.5px; font-weight:600; }
.jo-cats__c{ display:block; font-size:11px; color:var(--mute); margin-top:2px; }

.jo-story{ background:var(--ink); color:#ded7ce; }
.jo-story__in{ max-width:720px; text-align:center; padding:clamp(52px,7vw,96px) var(--gut); }
.jo-story__in .jo-eyebrow{ color:var(--gold-2); }
.jo-story h2{
  font-family:var(--f-disp); font-size:clamp(24px,3vw,36px); font-weight:300;
  color:var(--paper); margin:12px 0 18px;
}
.jo-story p{ font-size:15.5px; line-height:1.9; color:#b0a89f; }

@media (max-width:900px){
  .jo-hero{ grid-template-columns:1fr; min-height:0; }
  .jo-hero__media{ aspect-ratio:4/3; }
  .jo-hero__copy{ padding:34px var(--gut) 44px; }
  .jo-cats{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   PDP v2 — editorial split. The container-bound layout read as timid:
   small type marooned in white, packshots on white with no contrast.
   Gallery now runs to the viewport edge; type carries real weight.
   ========================================================================== */
@media (min-width:900px){
  .jo-pdp__grid{
    max-width:none; padding:0 0 0 0;
    grid-template-columns:minmax(0,56%) minmax(0,44%);
    gap:0; align-items:stretch;
  }

  /* gallery: flush to the edge of the screen, tinted so silver/gold pops */
  .jo-gal{
    background:linear-gradient(160deg,#f4efe7 0%,#efe8dd 55%,#e9e0d3 100%);
    padding:0;
  }
  .jo-gal__stack{ gap:0; }
  .jo-gal__f{ background:transparent; }
  .jo-gal__img{ aspect-ratio:4/5; object-fit:contain; padding:7%; mix-blend-mode:multiply; }

  /* buy column: room to breathe */
  .jo-buy{ padding:clamp(46px,5vw,88px) clamp(28px,5vw,86px) clamp(56px,6vw,96px); }
  .jo-buy__stick{ top:calc(var(--hd) + 44px); max-width:520px; }

  .jo-crumb{ max-width:none; padding:18px clamp(28px,5vw,86px) 0; justify-content:flex-start; }
}

/* type with conviction */
.jo-buy__t{
  font-size:clamp(28px,3.6vw,48px) !important;
  font-weight:300; line-height:1.08; letter-spacing:-.025em; margin-bottom:18px;
}
.jo-buy__price{ font-size:clamp(20px,2vw,27px); font-weight:600; letter-spacing:-.02em; }
.jo-buy__form{ margin-top:26px; }
.jo-buy__form button.single_add_to_cart_button{ min-height:62px; font-size:12.5px; letter-spacing:.16em; }

.jo-acc__i > summary{ padding:19px 2px; font-size:12px; letter-spacing:.15em; }
.jo-acc__b{ font-size:15px; }

/* one image is not a gallery — soften the single-image case */
.jo-gal__stack:has(> .jo-gal__f:only-child) .jo-gal__img{ aspect-ratio:1/1; }

/* social-proof slot: honest when there are no reviews yet */
.jo-rev0{
  display:flex; align-items:center; gap:9px; margin:0 0 22px;
  font-size:12.5px; color:var(--mute);
}
.jo-rev0 .jo-stars{ display:flex; gap:2px; color:var(--sand); }
.jo-rev0 .jo-i{ width:13px; height:13px; fill:currentColor; }
.jo-rev0 a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.jo-rev0 a:hover{ color:var(--gold); }

/* cross-sell strip inside the buy column — fills space with product, lifts AOV */
.jo-xsell{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line-2); }
.jo-xsell__t{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); font-weight:700; margin-bottom:16px;
}
.jo-xsell__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.jo-xsell__row a{ display:block; }
.jo-xsell__row img{
  width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream);
  transition:opacity .25s var(--e);
}
.jo-xsell__row a:hover img{ opacity:.82; }
.jo-xsell__n{
  display:block; font-size:11.5px; margin-top:7px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2);
}
.jo-xsell__p{ display:block; font-size:11.5px; font-weight:700; margin-top:1px; }

/* ==========================================================================
   PDP CONVERSION COMPONENTS
   ========================================================================== */

/* materials at a glance */
.jo-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 24px; }
.jo-chips li{
  font-size:11.5px; letter-spacing:.02em; color:var(--ink-2);
  border:1px solid var(--line); padding:7px 12px; border-radius:999px; background:var(--paper);
}

/* size guide link */
.jo-sizelink{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 18px;
  font-size:12px; letter-spacing:.04em; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line);
}
.jo-sizelink:hover{ color:var(--gold); }
.jo-sizelink .jo-i{ width:14px; height:14px; }

/* dated delivery promise */
.jo-deliver{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--cream); padding:15px 16px; margin:20px 0 0;
  border-inline-start:2px solid var(--gold);
}
.jo-deliver__i{ flex:0 0 auto; color:var(--gold); }
.jo-deliver__i .jo-i{ width:19px; height:19px; }
.jo-deliver__b{ font-size:13.5px; line-height:1.5; color:var(--ink-2); }
.jo-deliver__b strong{ color:var(--ink); font-weight:700; }
.jo-deliver__b em{ display:block; font-style:normal; font-size:12px; color:var(--mute); margin-top:3px; }

/* why buy */
.jo-why{ background:var(--cream); margin-top:8px; }
.jo-why .jo-sec__t{ padding-top:clamp(48px,6vw,80px); }
.jo-why__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px);
  padding:0 0 clamp(52px,6vw,88px);
}
.jo-why__grid li{ text-align:center; }
.jo-why__grid .jo-i{ width:26px; height:26px; color:var(--gold); stroke-width:1; margin:0 auto 14px; }
.jo-why__grid h3{ font-size:14px; font-weight:700; margin-bottom:8px; letter-spacing:-.005em; }
.jo-why__grid p{ font-size:13px; line-height:1.7; color:var(--ink-2); }

/* size guide modal */
.jo-modal{
  border:0; padding:clamp(26px,4vw,44px); max-width:520px; width:calc(100% - 32px);
  background:var(--paper); color:var(--ink); box-shadow:0 30px 90px rgba(18,16,14,.28);
}
.jo-modal::backdrop{ background:rgba(18,16,14,.55); backdrop-filter:blur(3px); }
.jo-modal h2{ font-family:var(--f-disp); font-size:24px; margin-bottom:8px; }
.jo-modal__lede{ font-size:13.5px; color:var(--ink-2); margin-bottom:20px; }
.jo-modal__x{ position:absolute; inset-block-start:14px; inset-inline-end:14px; color:var(--mute); }
.jo-modal__x:hover{ color:var(--ink); }
.jo-modal__note{ font-size:12.5px; color:var(--mute); margin-top:16px; }
.jo-sizetable{ width:100%; border-collapse:collapse; font-size:13.5px; }
.jo-sizetable th{
  text-align:start; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); font-weight:700; padding:0 0 10px; border-bottom:1px solid var(--line);
}
.jo-sizetable td{ padding:11px 0; border-bottom:1px solid var(--line-2); }
.jo-sizetable tr:last-child td{ border-bottom:0; }

/* gift wrap */
.jo-gift{ background:var(--paper); border:1px dashed var(--line); padding:14px 16px; margin-bottom:16px; }
.jo-gift__row{ display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:13px;
  text-transform:none; letter-spacing:0; color:var(--ink-2); font-weight:400; margin:0; }
.jo-gift__row input{ width:17px; height:17px; min-height:0; margin-top:2px; accent-color:var(--ink); flex:0 0 auto; }
.jo-gift__row strong{ color:var(--ink); font-weight:700; }

@media (max-width:900px){
  .jo-why__grid{ grid-template-columns:repeat(2,1fr); gap:28px 18px; }
}
@media (max-width:520px){
  .jo-why__grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Trust row v2 — was 11.5px crammed on one line, effectively unreadable.
   Payment badges removed from the PDP entirely: they belong at checkout
   and in the footer, not competing with the buy button.
   ========================================================================== */
.jo-buy__micro{
  display:grid; gap:0; margin:24px 0 0;
  border-top:1px solid var(--line-2);
}
.jo-buy__micro li{
  display:flex; align-items:flex-start; gap:13px;
  padding:15px 2px; border-bottom:1px solid var(--line-2);
  font-size:inherit;
}
.jo-buy__micro .jo-i{
  width:18px; height:18px; color:var(--gold); stroke-width:1.1;
  margin-top:2px; flex:0 0 auto;
}
.jo-buy__micro span{ display:flex; flex-direction:column; gap:2px; }
.jo-buy__micro b{
  font-size:13.5px; font-weight:700; color:var(--ink); letter-spacing:-.005em; line-height:1.35;
}
.jo-buy__micro span > *:last-child,
.jo-buy__micro b + *{ font-size:12.5px; color:var(--mute); line-height:1.45; }
.jo-buy__micro li > span{ font-size:12.5px; color:var(--mute); line-height:1.45; }

/* keep the payment strip for checkout + footer only */
.jo-buy .jo-pay{ display:none; }

/* ==========================================================================
   LARGE-SCREEN CORRECTION
   The full-bleed split held at 1280-1440 and fell apart above it:
   the gallery image reached 99% of viewport height while every UI
   string stayed at 12-13px. Cap the image, scale the interface.
   ========================================================================== */

/* never let a product photo eat the whole screen */
.jo-gal__f{ display:flex; align-items:center; justify-content:center; }
.jo-gal__img{ max-height:76vh; }

@media (min-width:1500px){
  .jo-pdp__grid{ grid-template-columns:minmax(0,54%) minmax(0,46%); }
  .jo-gal__img{ max-height:70vh; }
  .jo-buy{ padding:clamp(56px,4.4vw,92px) clamp(40px,4.4vw,96px); }
  .jo-buy__stick{ max-width:620px; }

  body{ font-size:17px; }
  .jo-nav__ul > li > a{ font-size:14.5px; letter-spacing:.11em; }
  .jo-nav__ul{ gap:38px; }
  .jo-logo__m{ font-size:26px; }
  .jo-hd__in{ height:76px; }
  .jo-btn, .woocommerce button.button, .single_add_to_cart_button{ font-size:14px; min-height:60px; }
  .jo-buy__form button.single_add_to_cart_button{ min-height:66px; font-size:14px; }
}

@media (min-width:1800px){
  .jo-pdp__grid{ grid-template-columns:minmax(0,52%) minmax(0,48%); }
  .jo-gal__img{ max-height:66vh; }
  .jo-buy__stick{ max-width:660px; }
}

/* ---------- type scale: fill the gap between 48px and 12px ---------- */
.jo-buy__price{ font-size:clamp(22px,1.7vw,30px); }
.jo-buy__lede{ font-size:clamp(15px,1.05vw,17px); line-height:1.8; }
.jo-buy__micro b{ font-size:clamp(13.5px,.95vw,15px); }
.jo-buy__micro li > span,
.jo-buy__micro b + *{ font-size:clamp(12.5px,.82vw,13.5px); }
.jo-deliver__b{ font-size:clamp(13.5px,.95vw,15.5px); }
.jo-deliver__b em{ font-size:clamp(12px,.8vw,13px); }
.jo-chips li{ font-size:clamp(11.5px,.8vw,13px); padding:8px 14px; }
.jo-acc__i > summary{ font-size:clamp(11.5px,.85vw,13px); }
.jo-acc__b{ font-size:clamp(14.5px,1vw,16px); }
.jo-sizelink{ font-size:clamp(12px,.85vw,13.5px); }
.jo-rev0{ font-size:clamp(12.5px,.88vw,14px); }
.jo-crumb{ font-size:clamp(11px,.78vw,12.5px); }

/* ---------- quantity: a real stepper, not a bare number box ---------- */
.jo-qty{
  display:flex; align-items:stretch; border:1px solid var(--line); background:var(--paper);
  flex:0 0 auto;
}
.jo-qty button{
  width:46px; display:grid; place-items:center;
  font-size:17px; font-weight:400; color:var(--ink-2); line-height:1;
  transition:background .18s var(--e), color .18s var(--e);
}
.jo-qty button:hover{ background:var(--cream); color:var(--ink); }
.jo-qty button:disabled{ opacity:.3; cursor:not-allowed; }
.jo-qty input.qty{
  width:46px; min-height:0; border:0 !important; text-align:center;
  font-size:15px; font-weight:600; padding:0; background:transparent;
  -moz-appearance:textfield;
}
.jo-qty input.qty::-webkit-outer-spin-button,
.jo-qty input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.jo-buy__form .quantity{ border:0; }

/* ---------- stock line: quieter, it was shouting in green ---------- */
.jo-buy__form .stock{
  font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--mute); margin:0 0 10px;
  display:inline-flex; align-items:center; gap:7px;
}
.jo-buy__form .stock::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--good);
}
.jo-buy__form .stock.out-of-stock{ color:var(--warn); }
.jo-buy__form .stock.out-of-stock::before{ background:var(--warn); }

/* ==========================================================================
   OUR STORY
   ========================================================================== */
.jo-story2{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,44%) minmax(0,56%); align-items:center;
}
.jo-story2__img{ height:100%; }
.jo-story2__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.jo-story2__in{
  max-width:660px; margin-inline:auto; text-align:center;
  padding:clamp(48px,6vw,92px) var(--gut);
}
.jo-story2 h2{
  font-family:var(--f-disp); font-size:clamp(26px,3.2vw,40px); font-weight:400; margin-bottom:22px;
}
.jo-story2 p{ font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.95; color:var(--ink-2); margin-bottom:14px; }
.jo-story2__sig{ font-style:italic; color:var(--ink) !important; margin-top:20px !important; }
.jo-story2 .jo-btn{ margin-top:26px; background:transparent; border-color:var(--ink); color:var(--ink); }
.jo-story2 .jo-btn:hover{ background:var(--ink); color:var(--paper); }

/* ==========================================================================
   LEAD CAPTURE
   ========================================================================== */
.jo-lead{ background:var(--cream); }
.jo-lead__form{ padding:clamp(34px,4.5vw,60px) 0; }
.jo-lead__copy{ text-align:center; margin-bottom:24px; }
.jo-lead__copy h2{ font-family:var(--f-disp); font-size:clamp(21px,2.4vw,30px); margin-bottom:8px; }
.jo-lead__copy p{ font-size:14px; color:var(--ink-2); }
.jo-lead__fields{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:10px; max-width:1000px; margin-inline:auto;
}
.jo-lead__fields input{ background:var(--paper); }
.jo-lead__fields .jo-btn{ min-width:150px; }
.jo-lead__ok{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:16px auto 0; max-width:1000px;
  font-size:12px; color:var(--mute); text-transform:none; letter-spacing:0; font-weight:400;
}
.jo-lead__ok input{ width:16px; height:16px; min-height:0; accent-color:var(--ink); flex:0 0 auto; }
.jo-lead__ok a{ text-decoration:underline; text-underline-offset:3px; }
.jo-lead__msg{ text-align:center; font-size:13px; margin:12px 0 0; min-height:18px; }
.jo-lead__msg.is-ok{ color:var(--good); }
.jo-lead__msg.is-err{ color:var(--warn); }

/* ==========================================================================
   PAYMENT / SECURITY STRIP
   ========================================================================== */
.jo-secure{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.jo-secure__t{
  display:flex; align-items:center; gap:10px; margin:0;
  font-size:11.5px; letter-spacing:.06em; color:#9a938b;
}
.jo-secure__badge{
  border:1px solid rgba(255,255,255,.32); color:#e9e3db;
  font-size:9px; font-weight:700; letter-spacing:.1em; padding:4px 7px;
}
.jo-secure__marks{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.jo-secure__marks li{
  background:#fff; border-radius:3px; padding:5px 7px;
  width:56px; height:26px; display:grid; place-items:center;
}
.jo-secure__marks svg{ width:100%; height:100%; fill:#12100e; }
.jo-secure__marks .is-mc svg circle:first-child{ fill:#eb001b; }
.jo-secure__marks .is-mc svg circle:last-child{ fill:#f79e1b; }
.jo-secure__marks .is-visa svg text{ fill:#1a1f71; }
.jo-secure__marks .is-paypal svg text{ fill:#003087; }
.jo-secure__marks .is-bit svg rect{ fill:#00b0f0; opacity:.9; }
.jo-secure__marks .is-bit svg text{ fill:#fff; }

/* ==========================================================================
   PDP EDITORIAL BLOCKS
   ========================================================================== */
.jo-speccards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px);
  max-width:1100px; margin:clamp(40px,5vw,72px) auto 0; padding-inline:var(--gut);
}
.jo-speccards li{
  border:1px solid #e3d6bd; background:var(--paper);
  padding:clamp(20px,2.4vw,30px) 16px; text-align:center;
}
.jo-speccards__big{
  display:block; font-family:var(--f-disp); font-size:clamp(26px,2.8vw,38px);
  color:var(--gold); line-height:1;
}
.jo-speccards__ico{ display:block; }
.jo-speccards__ico .jo-i{ width:30px; height:30px; margin:0 auto; color:var(--gold); stroke-width:1; }
.jo-speccards__rule{
  display:block; width:64px; height:1px; background:#e0d2b6; margin:14px auto; position:relative;
}
.jo-speccards__rule::after{
  content:"✦"; position:absolute; inset-inline-start:50%; top:50%;
  transform:translate(-50%,-50%); background:var(--paper); padding:0 5px;
  font-size:8px; color:var(--gold);
}
.jo-speccards__l{ display:block; font-size:clamp(13px,1vw,15px); font-weight:600; color:var(--ink); }

.jo-onyou{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px); }
.jo-onyou li{ background:var(--cream); overflow:hidden; }
.jo-onyou img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform 1.1s var(--e); }
.jo-onyou li:hover img{ transform:scale(1.04); }

.jo-love{ padding:clamp(20px,3vw,40px) 0 clamp(40px,5vw,72px); }
.jo-love__in{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(24px,4vw,64px);
}
.jo-love__copy h2{ font-family:var(--f-disp); font-size:clamp(22px,2.4vw,32px); margin-bottom:14px; }
.jo-love__copy{ font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.9; color:var(--ink-2); }
.jo-love__img img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }

@media (max-width:900px){
  .jo-lead__fields{ grid-template-columns:1fr; }
  .jo-lead__fields .jo-btn{ width:100%; }
  .jo-speccards{ grid-template-columns:1fr; }
  .jo-onyou{ grid-template-columns:1fr; }
  .jo-love__in{ grid-template-columns:1fr; }
  .jo-love__img{ order:-1; }
}

@media (max-width:900px){
  .jo-story2{ grid-template-columns:1fr; }
  .jo-story2__img{ aspect-ratio:16/10; }
}

/* ==========================================================================
   CONVERSION MECHANICS (from nano-jewelry / francoorodesign)
   ========================================================================== */

/* buy now */
.jo-btn--now{
  background:transparent !important; color:var(--ink) !important;
  border:1px solid var(--ink) !important; width:100%; margin-top:10px;
}
.jo-btn--now:hover{ background:var(--ink) !important; color:var(--paper) !important; }
.jo-buy__form .woocommerce-variation-add-to-cart,
.jo-buy__form form.cart{ flex-wrap:wrap; }
.jo-buy__form .jo-btn--now{ flex:1 0 100%; }

/* real order count */
.jo-sold{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 16px;
  font-size:12.5px; color:var(--good); font-weight:600;
}
.jo-sold .jo-i{ width:14px; height:14px; }
.jo-sold strong{ font-weight:700; }

/* back-in-stock waitlist */
.jo-wait{ background:var(--cream); padding:22px; margin:22px 0 0; }
.jo-wait h3{ font-size:15px; font-weight:700; margin-bottom:6px; }
.jo-wait > p{ font-size:13px; color:var(--ink-2); margin-bottom:16px; }
.jo-wait__form{ display:grid; gap:9px; }
.jo-wait__form input{ background:var(--paper); }
.jo-wait__msg{ font-size:12.5px; margin:10px 0 0; }
.jo-wait__msg.is-ok{ color:var(--good); }
.jo-wait__msg.is-err{ color:var(--warn); }
.jo-wait__wa{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font-size:12.5px; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line);
}
.jo-wait__wa:hover{ color:var(--gold); }
.jo-wait__wa .jo-i{ width:14px; height:14px; }

/* ask on whatsapp */
.jo-ask{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-size:12.5px; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line);
}
.jo-ask:hover{ color:var(--gold); }
.jo-ask .jo-i{ width:15px; height:15px; color:var(--good); }

/* structured spec table */
.jo-spectable{ width:100%; border-collapse:collapse; }
.jo-spectable th,.jo-spectable td{
  padding:11px 0; border-bottom:1px solid var(--line-2);
  font-size:13.5px; text-align:start; vertical-align:top;
}
.jo-spectable th{ font-weight:400; color:var(--mute); width:42%; }
.jo-spectable td{ font-weight:600; color:var(--ink); }
.jo-spectable tr:last-child th,.jo-spectable tr:last-child td{ border-bottom:0; }

/* FAQ */
.jo-faq{ background:var(--paper); padding:clamp(44px,5vw,76px) 0; }
.jo-faq__in{ max-width:820px; }
.jo-faq__list{ border-top:1px solid var(--line-2); }
.jo-faq__list .jo-acc__i > summary{
  text-transform:none; letter-spacing:0; font-size:clamp(14px,1.05vw,16px); font-weight:600;
  padding:19px 2px;
}
.jo-faq__list .jo-acc__b{ font-size:clamp(14px,1vw,15.5px); }

/* ==========================================================================
   HEBREW TYPOGRAPHY CORRECTION + BUTTON REBUILD
   The whole label system was built on Latin conventions (uppercase +
   .12em tracking). Hebrew has no uppercase and letter-spacing actively
   damages its legibility -- that's why every button read as "off".
   ========================================================================== */

/* --- buttons: no tracking, no uppercase, more weight, real size --- */
.jo-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button, button.single_add_to_cart_button,
#place_order, .checkout-button{
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  min-height:58px;
  border-radius:2px !important;
  padding:0 34px;
}
.jo-buy__form button.single_add_to_cart_button{
  min-height:62px; font-size:16px !important;
}
.jo-btn--ghost, .woocommerce a.button.jo-btn--ghost{
  font-size:14px !important; min-height:48px; padding:0 22px;
}
.jo-btn--now{ font-size:15px !important; min-height:56px; }
.jo-stick .jo-btn{ font-size:14px !important; min-height:48px; padding:0 28px; }
.jo-card__cta .button{ font-size:13px !important; min-height:44px; }

/* --- labels & section heads: drop the tracking on Hebrew --- */
.jo-eyebrow,
.jo-sec__t,
.jo-acc__i > summary,
.jo-xsell__t,
.jo-co__t,
.jo-sum h2,
.woocommerce-checkout h3,
.jo-ft__col h3,
.jo-crumb,
.jo-sec__t{ font-size:clamp(20px,2.2vw,28px); font-weight:500; color:var(--ink); }
.jo-eyebrow{ font-size:12.5px; font-weight:600; color:var(--gold); }
.jo-acc__i > summary{ font-size:15px; font-weight:600; }
.jo-xsell__t{ font-size:13.5px; font-weight:700; color:var(--ink); }
.jo-ft__col h3{ font-size:13px; font-weight:700; }
label, .jo-crumb{ font-size:13px; }
.jo-buy__form .variations .label label{ font-size:13.5px; color:var(--ink); }

/* keep tracking only where the text is genuinely Latin */
.jo-logo__m, .jo-logo__s, .jo-secure__badge{ letter-spacing:.24em !important; }
.jo-logo__s{ letter-spacing:.42em !important; }

/* --- kill the tinted ground behind product photography --- */
.jo-gal,
.jo-gal__f,
.wvg-single-gallery-image-container{
  background:#fff !important;
}
.jo-gal__img{ mix-blend-mode:normal !important; padding:4%; }
.jo-card__media, .jo-cats__img, .jo-onyou li,
.jo-love__img img, .jo-stick__img img, .jo-xsell__row img,
.cart-container .shop_table.cart td.product-thumbnail img,
.jo-line__img img{ background:#fafafa !important; }

/* --- breadcrumb: stop it sitting on the image --- */
.jo-crumb{ padding-block:26px 22px !important; }
@media (min-width:900px){
  .jo-pdp__grid{ padding-top:8px; }
  .jo-crumb{ padding-block:30px 26px !important; }
}

/* --- Hebrew/Latin word spacing in titles --- */
.jo-buy__t, .jo-card__t, .jo-stick__meta b, .jo-line__t{ word-spacing:.06em; }

/* ==========================================================================
   GALLERY v3 — one main image, thumbnails, zoom lightbox
   (the vertical stack was not a gallery)
   ========================================================================== */
.jo-gal{ background:#fff !important; }
.jo-gal__main{
  position:relative; background:#fff; overflow:hidden; cursor:zoom-in;
  aspect-ratio:1/1; max-height:74vh;
}
.jo-gal__f{
  position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .38s var(--e), visibility .38s;
}
.jo-gal__f.is-on{ opacity:1; visibility:visible; }
.jo-gal__img{
  width:100%; height:100%; object-fit:contain; padding:4%;
  max-height:none !important; transition:transform .8s var(--e);
}
.jo-gal__main:hover .jo-gal__f.is-on .jo-gal__img{ transform:scale(1.03); }

.jo-gal__zoom{
  position:absolute; inset-block-start:16px; inset-inline-end:16px; z-index:3;
  width:40px; height:40px; display:grid; place-items:center;
  background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:50%;
  color:var(--ink); transition:background .2s var(--e);
}
.jo-gal__zoom svg{ width:19px; height:19px; }
.jo-gal__zoom:hover{ background:#fff; }

.jo-gal__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; display:grid; place-items:center;
  background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:50%;
  color:var(--ink); opacity:0; transition:opacity .25s var(--e), background .2s var(--e);
}
.jo-gal__nav svg{ width:20px; height:20px; }
.jo-gal__main:hover .jo-gal__nav{ opacity:1; }
.jo-gal__nav:hover{ background:#fff; }
.jo-gal__nav.is-prev{ inset-inline-start:14px; }
.jo-gal__nav.is-next{ inset-inline-end:14px; }

.jo-gal__thumbs{
  display:flex; gap:10px; padding:14px 0 0; flex-wrap:wrap; justify-content:center;
}
.jo-gal__thumbs button{
  width:72px; height:72px; padding:4px; background:#fafafa;
  border:1px solid transparent; transition:border-color .2s var(--e), opacity .2s var(--e);
  opacity:.6;
}
.jo-gal__thumbs button img{ width:100%; height:100%; object-fit:contain; }
.jo-gal__thumbs button:hover{ opacity:1; }
.jo-gal__thumbs button.is-on{ border-color:var(--ink); opacity:1; }

/* lightbox */
/* ==========================================================================
   READABILITY + SPACING CORRECTIONS
   ========================================================================== */
/* trust rows were unreadable */
.jo-buy__micro b{ font-size:15px !important; }
.jo-buy__micro li > span,
.jo-buy__micro b + *{ font-size:14px !important; color:var(--ink-2) !important; }
.jo-buy__micro li{ padding:17px 2px; }
.jo-buy__micro .jo-i{ width:20px; height:20px; }
.jo-deliver__b{ font-size:15px !important; }
.jo-deliver__b em{ font-size:13.5px !important; }
.jo-ask{ font-size:14px !important; }
.jo-sold{ font-size:13.5px !important; }
.jo-chips li{ font-size:13px !important; }

/* nav → content gap was too large */
.jo-crumb{ padding-block:14px 12px !important; }
@media (min-width:900px){
  .jo-crumb{ padding-block:16px 14px !important; }
  .jo-pdp__grid{ padding-top:0; }
}

/* ==========================================================================
   TEXTURE — kills the dead white in the editorial sections
   ========================================================================== */
/* One patterned band only. Stacking texture on three consecutive
   sections produced hard seams at every boundary; and a woven-cloth
   photo is the wrong material language for a jewellery store.
   This is a fine geometric lattice, drawn in CSS so it's seamless
   at any size and costs nothing to load. */
.jo-why{
  background-color:#faf7f2;
  background-image:
    repeating-linear-gradient(45deg,  rgba(160,125,56,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(160,125,56,.05) 0 1px, transparent 1px 26px);
}
/* every other band stays plain */
.jo-love{ background:var(--paper); }
.jo-faq{ background:#fdfbf8; }
.jo-assure-band{ background:var(--cream); background-image:none; }
.jo-story2{ background-color:var(--cream); background-image:none; }
.jo-love{ padding:clamp(48px,6vw,84px) 0; }
.jo-love__in{ align-items:center; }
.jo-love__copy h2{ font-size:clamp(24px,2.6vw,34px); }
.jo-love__copy{ font-size:clamp(15px,1.1vw,17px); }
.jo-love__img img{ box-shadow:0 20px 60px rgba(18,16,14,.09); }
.jo-speccards{ margin-bottom:clamp(40px,5vw,72px); }
.jo-speccards li{ background:var(--paper); }

@media (max-width:900px){
  .jo-gal__main{ aspect-ratio:1/1; max-height:none; }
  .jo-gal__nav{ opacity:1; width:38px; height:38px; }
  .jo-gal__thumbs button{ width:58px; height:58px; }
}

/* ==========================================================================
   PDP GEOMETRY FIX
   .jo-gal__main was aspect-ratio:1/1 + max-height:74vh, so on wide
   screens the square capped by height while the column stayed wide —
   leaving hundreds of px of dead space and pushing the image to one
   edge. The buy column's top padding also dropped its content below
   the gallery's top edge.
   ========================================================================== */
@media (min-width:900px){
  /* cap the split so it stops sprawling on large monitors */
  .jo-pdp__grid{
    max-width:1560px; margin-inline:auto;
    grid-template-columns:minmax(0,53%) minmax(0,47%);
    align-items:start;
  }

  /* gallery: box centred in its column, sized by width not height */
  .jo-gal{ display:flex; flex-direction:column; align-items:center; padding-inline:clamp(12px,2vw,32px); }
  .jo-gal__main{
    width:100%; max-width:660px; aspect-ratio:1/1; max-height:none;
  }
  .jo-gal__thumbs{ width:100%; max-width:660px; justify-content:flex-start; }

  /* tops align: gallery and title start on the same line */
  .jo-buy{ padding-block:0 clamp(48px,5vw,84px); padding-inline:clamp(28px,3.4vw,64px); }
  .jo-buy__stick{ top:calc(var(--hd) + 20px); max-width:560px; padding-top:0; }
  .jo-buy__t{ margin-top:0; }
}

@media (min-width:1500px){
  .jo-pdp__grid{ grid-template-columns:minmax(0,52%) minmax(0,48%); }
  .jo-gal__main, .jo-gal__thumbs{ max-width:700px; }
  .jo-buy__stick{ max-width:600px; }
}

@media (min-width:1800px){
  .jo-pdp__grid{ max-width:1640px; }
  .jo-gal__main, .jo-gal__thumbs{ max-width:740px; }
}

/* breadcrumb sits inside the same measure as the grid */
@media (min-width:900px){
  .jo-crumb{ max-width:1560px; margin-inline:auto; padding-inline:clamp(28px,3.4vw,64px) !important; }
}

/* ==========================================================================
   PDP v4 — gallery beside thumbs, readability, price-on-request
   ========================================================================== */

/* thumbnails now sit BESIDE the main image so they're above the fold */
@media (min-width:900px){
  .jo-gal{
    flex-direction:row-reverse; align-items:flex-start; gap:14px;
    justify-content:center;
  }
  .jo-gal__thumbs{
    flex-direction:column; width:auto; max-width:none; padding:0;
    gap:9px; flex:0 0 78px;
  }
  .jo-gal__main{ flex:1 1 auto; max-width:620px; }
}
.jo-gal__thumbs button{
  width:78px; height:78px; padding:0; background:#fff;
  border:1px solid var(--line); border-radius:2px; opacity:1; overflow:hidden;
  transition:border-color .2s var(--e), box-shadow .2s var(--e);
}
.jo-gal__thumbs button img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.jo-gal__thumbs button:hover{ border-color:#c9c1b6; }
.jo-gal__thumbs button.is-on{
  border-color:var(--ink); box-shadow:0 0 0 1px var(--ink);
}
.jo-gal__main{ cursor:zoom-in; }

/* lightbox: always fill the stage, even when the source file is small */
@media (max-aspect-ratio:1/1){
  }

/* readability: the trust block again, bigger */
.jo-buy__micro b{ font-size:16px !important; }
.jo-buy__micro li > span,
.jo-buy__micro b + *{ font-size:14.5px !important; }
.jo-buy__micro li{ padding:18px 2px; }

/* one rule, not two — the block had a top border AND a bottom border
   on its last row, stacking against the next element */
.jo-buy__micro{ border-top:1px solid var(--line-2); }
.jo-buy__micro li{ border-bottom:1px solid var(--line-2); }
.jo-buy__micro li:last-child{ border-bottom:0; }
.jo-acc{ border-top:1px solid var(--line-2); margin-top:26px; }
.jo-xsell{ border-top:1px solid var(--line-2); }

/* price on request — the dead end becomes a lead */
.jo-pricereq{
  background:var(--cream); border:1px solid #e6dcc9; padding:24px; margin:22px 0 0;
}
.jo-pricereq h3{ font-size:17px; font-weight:700; margin-bottom:8px; }
.jo-pricereq > p{ font-size:14px; line-height:1.7; color:var(--ink-2); margin-bottom:18px; }
.jo-pricereq__form{ display:grid; gap:9px; }
.jo-pricereq__form input{ background:#fff; }
.jo-pricereq__form .jo-btn{ width:100%; }
.jo-pricereq__msg{ font-size:13.5px; margin:12px 0 0; }
.jo-pricereq__msg.is-ok{ color:var(--good); }
.jo-pricereq__msg.is-err{ color:var(--warn); }
.jo-pricereq__wa{
  display:inline-block; margin-top:14px; font-size:13.5px; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line);
}
.jo-pricereq__wa:hover{ color:var(--gold); }

/* ==========================================================================
   PDP v5 — proportions, rhythm, hierarchy
   Implements the UX brief: 55/45 split, 520–580px measure, 32–38px title,
   8–16px intra-group / 24–32px inter-group rhythm, single primary CTA.
   ========================================================================== */
@media (min-width:900px){
  .jo-pdp__grid{ grid-template-columns:minmax(0,55%) minmax(0,45%); }

  /* text column: real measure, aligned to the reading edge (not centred) */
  .jo-buy{ padding-block:0 clamp(48px,5vw,80px); padding-inline:clamp(28px,3vw,56px); }
  .jo-buy__stick{ max-width:560px; margin-inline-start:0; text-align:start; }

  /* thumbnails attached UNDER the main image, not floating between columns */
  .jo-gal{ flex-direction:column; align-items:center; gap:0; }
  .jo-gal__main{ max-width:600px; width:100%; }
  .jo-gal__thumbs{
    flex-direction:row; width:100%; max-width:600px;
    justify-content:flex-start; gap:8px; padding-top:10px; flex:0 0 auto;
  }
  .jo-gal__thumbs button{ width:66px; height:66px; }
}

/* --- title: down ~28% --- */
.jo-buy__t{
  font-size:clamp(24px,2.5vw,36px) !important;
  line-height:1.18; letter-spacing:-.02em; margin:0 0 10px !important;
}

/* --- everything left-aligned to the reading edge --- */
.jo-buy__stick,
.jo-buy__lede,
.jo-buy__lede p,
.jo-buy__lede ul,
.jo-buy__lede li,
.jo-rev0,
.jo-buy__pricegrp,
.jo-chips,
.jo-buy__micro{ text-align:start; }
.jo-chips{ justify-content:flex-start; }
.jo-rev0{ justify-content:flex-start; }

/* description bullets: right-aligned and scannable */
.jo-buy__lede ul{ list-style:none; padding:0; margin:0; }
.jo-buy__lede li,
.jo-buy__lede p{
  position:relative; padding-inline-start:16px; margin:0 0 7px;
  font-size:15px; line-height:1.65; color:var(--ink-2);
}
.jo-buy__lede li::before,
.jo-buy__lede p::before{
  content:"·"; position:absolute; inset-inline-start:2px; color:var(--gold); font-weight:700;
}
.jo-buy__lede p:only-child::before{ content:none; }
.jo-buy__lede p:only-child{ padding-inline-start:0; }

/* --- tight groups (8–16px) / clear sections (24–32px) --- */
.jo-rev0{ margin:0 0 14px; }
.jo-buy__pricegrp{ margin:0 0 12px; }
.jo-buy__price{ margin:0 0 4px !important; }
.jo-instal{ margin:0 !important; font-size:13.5px; }
.jo-buy__avail{ display:flex; flex-direction:column; gap:8px; margin:0 0 24px; }
.jo-sold{ margin:0 !important; }
.jo-urg{ margin:0 !important; }
.jo-buy__lede{ margin:0 0 16px !important; }
.jo-chips{ margin:0 0 24px !important; }
.jo-sizelink{ margin:0 0 16px; }
.jo-buy__form{ margin:0 0 20px !important; }
.jo-deliver{ margin:0 0 24px !important; }
.jo-buy__micro{ margin:0 0 8px; }
.jo-acc{ margin-top:28px; }

/* --- one primary action; buy-now demoted to a quiet secondary --- */
.jo-buy__form form.cart,
.jo-buy__form .woocommerce-variation-add-to-cart{
  display:grid; grid-template-columns:112px 1fr; gap:10px; align-items:stretch;
}
.jo-buy__form .quantity,
.jo-buy__form .ux-quantity,
.jo-qty{ width:112px; height:56px; }
.jo-qty button{ width:34px; }
.jo-qty input.qty{ width:44px; font-size:15px; }
.jo-buy__form button.single_add_to_cart_button{
  min-height:56px !important; height:56px; font-size:16px !important; width:100%;
}
.jo-btn--now{
  grid-column:1 / -1; min-height:44px !important; height:44px;
  background:transparent !important; border:0 !important;
  color:var(--ink-2) !important; font-size:14px !important; font-weight:600 !important;
  text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--line);
  margin-top:2px !important; padding:0 !important;
}
.jo-btn--now:hover{
  background:transparent !important; color:var(--gold) !important;
  text-decoration-color:var(--gold);
}

/* --- delivery: sits against the CTA, with real contrast --- */
.jo-deliver{
  background:#f4efe6; border-inline-start:3px solid var(--gold); padding:14px 16px;
}
.jo-deliver__b{ color:var(--ink) !important; }
.jo-deliver__b em{ color:var(--ink-2) !important; }

/* --- contrast pass: borders and secondary text were too weak --- */
:root{
  --line:#ded7cc;
  --line-2:#e9e3d9;
  --mute:#7d746a;
}
.jo-crumb{ color:var(--ink-2); font-weight:500; }
.jo-crumb a{ color:var(--ink-2) !important; }
.jo-crumb a:hover{ color:var(--ink) !important; text-decoration:underline; text-underline-offset:3px; }
.jo-buy__micro li > span,
.jo-buy__micro b + *{ color:#5c554c !important; }
.jo-instal{ color:#5c554c; }
.jo-rev0{ color:#5c554c; }

/* --- header balance --- */
@media (min-width:900px){
  .jo-hd__in{
    grid-template-columns:1fr auto 1fr; gap:24px;
    max-width:1560px; padding-inline:clamp(24px,3vw,56px);
  }
  .jo-nav__ul{ gap:26px; }
  .jo-hd__act{ gap:2px; }
}

@media (max-width:900px){
  .jo-buy__form form.cart,
  .jo-buy__form .woocommerce-variation-add-to-cart{ grid-template-columns:96px 1fr; }
  .jo-buy__form .quantity, .jo-qty{ width:96px; }
}

/* ==========================================================================
   PDP v6 — COMPRESSION
   Brief: nine screens -> five. Sections were sized by padding rather
   than by content, every band was weighted equally, and the page lost
   momentum the moment you passed the CTA.
   ========================================================================== */

/* global: sections sized to their content, not to a padding constant */
.jo-sec{ padding:clamp(32px,3.4vw,52px) var(--gut); }
.jo-sec__t{ margin-bottom:clamp(16px,1.8vw,26px); }

/* spec cards: compact strip, not a screen */
.jo-speccards{
  margin:clamp(24px,3vw,40px) auto clamp(24px,3vw,40px);
  gap:10px; max-width:1000px;
}
.jo-speccards li{ padding:16px 14px; }
.jo-speccards__big{ font-size:clamp(22px,2vw,28px); }
.jo-speccards__rule{ margin:9px auto; width:48px; }
.jo-speccards__l{ font-size:13px; }
.jo-speccards__ico .jo-i{ width:24px; height:24px; }

/* merged detail band: copy + three shots, one section */
.jo-detail{ padding:clamp(32px,3.6vw,56px) 0; background:var(--paper); }
.jo-detail__copy{ max-width:660px; margin:0 auto clamp(20px,2.4vw,34px); text-align:center; }
.jo-detail__copy h2{
  font-family:var(--f-disp); font-size:clamp(22px,2.2vw,30px); font-weight:400; margin-bottom:10px;
}
.jo-detail__copy div{ font-size:15px; line-height:1.75; color:var(--ink-2); }
.jo-detail__copy p{ margin:0 0 6px; }
.jo-detail__shots{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.1vw,14px);
}
.jo-detail__shots li{ background:#fafafa; overflow:hidden; }
.jo-detail__shots img{
  width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform 1s var(--e);
}
.jo-detail__shots li:hover img{ transform:scale(1.04); }

/* reviews: scaled to the content that exists */
.jo-reviews{ padding:clamp(28px,3vw,44px) 0; border-top:1px solid var(--line-2); }
.jo-reviews__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.jo-reviews__head .jo-sec__t{ margin:0; }
.jo-reviews__score{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-2); }
.jo-reviews__empty{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  padding:18px; background:var(--cream); font-size:14px; color:var(--ink-2);
}
.jo-reviews__empty .jo-stars{ display:flex; gap:2px; color:#d8cdb8; }
.jo-reviews__empty .jo-i{ width:15px; height:15px; fill:currentColor; }
.jo-reviews__empty a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* FAQ: half the padding */
.jo-faq{ padding:clamp(26px,2.8vw,42px) 0; }
.jo-faq__in{ max-width:760px; }
.jo-faq__list .jo-acc__i > summary{ padding:15px 2px; font-size:15px; }
.jo-faq__list .jo-acc__b{ padding-bottom:16px; }

/* single trust strip, tightened */
.jo-why{ margin-top:0; }
.jo-why .jo-sec__t{ padding-top:clamp(30px,3.2vw,46px); }
.jo-why__grid{ padding:0 0 clamp(32px,3.4vw,50px); gap:clamp(16px,2.2vw,32px); }
.jo-why__grid .jo-i{ width:22px; height:22px; margin-bottom:10px; }
.jo-why__grid h3{ font-size:14px; margin-bottom:6px; }
.jo-why__grid p{ font-size:13px; line-height:1.6; }

/* recently viewed: compact horizontal row, not another full section */
.jo-seen{ padding:clamp(22px,2.4vw,34px) 0 clamp(28px,3vw,44px); border-top:1px solid var(--line-2); }
.jo-seen__t{ font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:14px; }
.jo-seen__row{
  display:flex; gap:14px; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity; padding-bottom:4px;
}
.jo-seen__row::-webkit-scrollbar{ display:none; }
.jo-seen__row li{ flex:0 0 132px; scroll-snap-align:start; }
.jo-seen__row img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:#fafafa; }
.jo-seen__n{
  display:block; font-size:12.5px; color:var(--ink-2); margin-top:7px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.jo-seen__p{ display:block; font-size:12.5px; font-weight:700; margin-top:2px; }

/* sticky buy bar: was a thin accidental overlay */
.jo-stick{
  padding:12px var(--gut); padding-bottom:calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); box-shadow:0 -6px 28px rgba(18,16,14,.10);
  background:rgba(255,254,252,.985);
}
.jo-stick__in{ max-width:1000px; gap:16px; }
.jo-stick__img img{ width:54px; height:54px; }
.jo-stick__meta b{ font-size:14px; }
.jo-stick__meta em{ font-size:15px; }
.jo-stick .jo-btn{ min-height:52px !important; height:52px; font-size:15px !important; padding:0 40px; }

@media (max-width:900px){
  .jo-detail__shots{ grid-template-columns:1fr; }
  .jo-seen__row li{ flex:0 0 116px; }
  .jo-stick .jo-btn{ padding:0 26px; }
}

/* ==========================================================================
   OFFER BLOCK — category eyebrow, countdown, tiers, purchase options
   ========================================================================== */
.jo-eyebrow--link{
  display:inline-block; margin:0 0 6px; color:var(--gold);
  font-size:12px; font-weight:600;
}
.jo-eyebrow--link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* live countdown to the real dispatch cutoff */
.jo-count{
  background:#faf5ec; border:1px solid #ecdfc4; padding:12px 14px; margin:0 0 16px;
}
.jo-count__t{
  display:flex; align-items:center; gap:8px; margin:0 0 9px;
  font-size:13px; font-weight:600; color:var(--ink);
}
.jo-count__t .jo-i{ width:16px; height:16px; color:var(--gold); }
.jo-count__row{ display:flex; gap:8px; }
.jo-count__row span{
  flex:1; background:#fff; border:1px solid #eadfc8; padding:7px 4px; text-align:center;
}
.jo-count__row b{
  display:block; font-size:19px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.jo-count__row i{ display:block; font-style:normal; font-size:10.5px; color:var(--mute); margin-top:2px; }

/* quantity tiers */
.jo-offer{ margin:0 0 20px; }
.jo-offer__tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.jo-tier{
  border:1px solid var(--line); background:#fff; padding:11px 6px; text-align:center;
  transition:border-color .18s var(--e), box-shadow .18s var(--e), background .18s var(--e);
}
.jo-tier:hover{ border-color:#c5bcae; }
.jo-tier.is-on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:#fdfcfa; }
.jo-tier__q{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); }
.jo-tier__save{
  display:block; font-size:11px; font-weight:700; color:var(--good); margin-top:3px;
}

/* purchase-option cards */
.jo-offer__opts{ display:grid; gap:8px; }
.jo-opt{
  display:block; cursor:pointer; border:1px solid var(--line); background:#fff;
  padding:13px 14px; margin:0; text-transform:none; letter-spacing:0; font-weight:400;
  transition:border-color .18s var(--e), box-shadow .18s var(--e);
}
.jo-opt:hover{ border-color:#c5bcae; }
.jo-opt.is-on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.jo-opt input{ position:absolute; opacity:0; pointer-events:none; }
.jo-opt__body{ display:block; }
.jo-opt__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px;
}
.jo-opt__head b{ font-size:14.5px; font-weight:700; color:var(--ink); }
.jo-opt__price{
  font-style:normal; font-size:15px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.jo-opt__tag{
  display:inline-block; font-size:10px; font-weight:700; color:var(--gold);
  background:#f7efdd; padding:2px 7px; margin-inline-start:6px; vertical-align:middle;
}
.jo-opt__feat{ display:flex; flex-direction:column; gap:3px; }
.jo-opt__feat i{
  display:flex; align-items:center; gap:6px; font-style:normal;
  font-size:12.5px; color:var(--ink-2);
}
.jo-opt__feat .jo-i{ width:13px; height:13px; color:var(--good); flex:0 0 auto; }

@media (max-width:420px){
  .jo-offer__tiers{ grid-template-columns:1fr; }
}

/* ==========================================================================
   PDP GRID AREAS — title above the image on mobile
   Reference order: category > title > rating > image > price > CTA.
   Ours buried them under a full-screen image with thumbnails on top.
   ========================================================================== */
.jo-pdp__grid{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:"head" "gal" "buy";
  gap:0;
}
.jo-pdp__head{ grid-area:head; }
.jo-gal{ grid-area:gal; }
.jo-buy{ grid-area:buy; }

@media (min-width:900px){
  .jo-pdp__grid{
    grid-template-columns:minmax(0,55%) minmax(0,45%);
    grid-template-areas:
      "gal head"
      "gal buy";
    align-items:start;
  }
  .jo-pdp__head{
    padding-inline:clamp(28px,3vw,56px); padding-block:0 4px;
    max-width:560px; margin-inline-start:0;
  }
}

.jo-pdp__head .jo-buy__t{ margin-bottom:8px !important; }
.jo-pdp__head .jo-rev0{ margin-bottom:0; }

/* ---------- mobile: match the reference stack ---------- */
@media (max-width:900px){
  .jo-pdp__head{ padding:16px var(--gut) 12px; }
  .jo-pdp__head .jo-buy__t{ font-size:22px !important; line-height:1.22; }

  /* thumbnails BELOW the image, not stealing the top of the screen */
  .jo-gal{ display:flex; flex-direction:column; padding:0; }
  .jo-gal__main{ order:1; aspect-ratio:1/1; max-height:none; }
  .jo-gal__thumbs{
    order:2; display:flex; gap:7px; padding:9px var(--gut) 0;
    overflow-x:auto; scrollbar-width:none; justify-content:flex-start;
  }
  .jo-gal__thumbs::-webkit-scrollbar{ display:none; }
  .jo-gal__thumbs button{ flex:0 0 54px; width:54px; height:54px; }

  .jo-buy{ padding:16px var(--gut) 40px; }
  .jo-buy__stick{ max-width:none; }

  /* keep the CTA reachable without a long scroll */
  .jo-buy__pricegrp{ margin-bottom:10px; }
  .jo-count{ margin-bottom:12px; }
  .jo-offer{ margin-bottom:14px; }
}

/* ---------- payment reassurance at the CTA ----------
   The Semrush piece cites 40% of shoppers preferring visible secure
   payment options; ours only appeared in the footer and at checkout. */
.jo-paynote{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  margin:10px 0 0; font-size:12px; color:var(--mute);
}
.jo-paynote .jo-i{ width:14px; height:14px; }
.jo-paynote b{ color:var(--ink-2); font-weight:600; }

/* ==========================================================================
   REFERENCE CLONE — geometry, sizing and spacing copied 1:1 from the
   supplied PDP. Palette stays Jewelry One (ink/gold), everything else
   — proportions, radii, rhythm, controls — matches the reference.
   ========================================================================== */

/* ---------- gallery: peek carousel, no thumbnails on mobile ---------- */
@media (max-width:900px){
  .jo-gal{ padding:0 var(--gut); }
  .jo-gal__main{
    position:relative; display:flex; gap:10px; overflow-x:auto;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    aspect-ratio:auto; max-height:none; border-radius:14px; background:transparent;
  }
  .jo-gal__main::-webkit-scrollbar{ display:none; }
  .jo-gal__f{
    position:static; flex:0 0 88%; opacity:1; visibility:visible;
    scroll-snap-align:center; border-radius:14px; overflow:hidden;
    background:#f7f5f2; aspect-ratio:1/1;
  }
  .jo-gal__img{ width:100%; height:100%; object-fit:cover; padding:0; }
  .jo-gal__nav{ display:none; }
  .jo-gal__thumbs{ display:none; }          /* reference has none */
  .jo-gal__dots{
    display:flex; justify-content:center; gap:6px; padding-top:12px;
  }
  .jo-gal__dots button{
    width:6px; height:6px; border-radius:50%; background:#ddd6cb; padding:0;
    border:0; transition:background .2s var(--e), width .2s var(--e);
  }
  .jo-gal__dots button.is-on{ background:var(--ink); width:18px; border-radius:3px; }
}
@media (min-width:900px){
  .jo-gal__dots{ display:none; }
  .jo-gal__main{ border-radius:14px; background:#f7f5f2; }
  .jo-gal__f{ border-radius:14px; overflow:hidden; }
}

/* badge on the image, as in the reference */
.jo-gal__badge{
  position:absolute; inset-block-start:12px; inset-inline-start:12px; z-index:4;
  background:var(--good); color:#fff; font-size:11px; font-weight:700;
  padding:5px 12px; border-radius:999px; letter-spacing:0;
}
.jo-gal__badge.is-hot{ background:var(--ink); }
@media (max-width:900px){
  .jo-gal__badge{ inset-inline-start:22px; }
}

/* ---------- head block sizing ---------- */
.jo-pdp__head .jo-eyebrow--link{ font-size:12px; margin-bottom:4px; color:var(--mute); }
.jo-pdp__head .jo-buy__t{ font-size:clamp(23px,2.3vw,32px) !important; font-weight:700; margin-bottom:6px !important; }
.jo-rev0{ font-size:12.5px; gap:7px; }
.jo-rev0 .jo-stars{ gap:1px; }
.jo-rev0 .jo-i{ width:12px; height:12px; }

/* ---------- price line: now / was / saving pill ---------- */
.jo-priceline{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.jo-priceline__now{ font-size:clamp(22px,2vw,27px); font-weight:700; color:var(--ink); }
.jo-priceline__was{ font-size:14px; color:var(--mute); text-decoration:line-through; }
.jo-priceline__save{
  font-size:11px; font-weight:700; color:#fff; background:var(--good);
  padding:4px 10px; border-radius:999px;
}
.jo-buy__price{ display:none; }

/* ---------- description clamped + read more ---------- */
.jo-buy__lede{
  font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:10px 0 0 !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.jo-buy__lede.is-open{ -webkit-line-clamp:unset; overflow:visible; }
.jo-buy__lede li::before, .jo-buy__lede p::before{ content:none; }
.jo-buy__lede li, .jo-buy__lede p{ padding-inline-start:0; font-size:13.5px; margin:0 0 4px; }
.jo-more{
  font-size:12.5px; font-weight:700; color:var(--ink); padding:0; margin:6px 0 0;
  text-decoration:underline; text-underline-offset:3px;
}

/* ---------- countdown: single bordered pill row ---------- */
.jo-count{
  background:transparent; border:1px solid var(--line); border-radius:8px;
  padding:9px 12px; margin:16px 0 12px;
}
/* The label was hidden here, which left a bare row of digits ticking down
   with nothing saying what it counts. A countdown with no stated reason
   reads as a pressure tactic; a countdown to a real dispatch cutoff is
   useful information. Say what it is. */
.jo-count__t{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:0 0 6px; font-size:12.5px; font-weight:600; color:var(--ink);
}
.jo-count__row{ display:flex; align-items:center; justify-content:center; gap:0; }
.jo-count__row span{
  flex:0 0 auto; background:transparent; border:0; padding:0 10px;
  display:flex; align-items:baseline; gap:4px; position:relative;
}
.jo-count__row span + span::before{
  content:":"; position:absolute; inset-inline-start:-2px; color:var(--mute); font-weight:400;
}
.jo-count__row b{
  display:inline; font-size:15px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;
}
.jo-count__row i{ display:inline; font-size:11px; color:var(--mute); margin-top:0; }

/* ---------- buy tiers: joined segmented control ---------- */
.jo-offer__tiers{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-bottom:12px;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.jo-tier{
  border:0; border-inline-end:1px solid var(--line); border-radius:0;
  padding:11px 6px; background:#fff;
}
.jo-tier:last-child{ border-inline-end:0; }
.jo-tier.is-on{
  background:#faf5e9; box-shadow:none; border-color:var(--line);
}
.jo-tier.is-on .jo-tier__q{ color:var(--ink); }
.jo-tier__q{ font-size:13.5px; font-weight:600; }
.jo-tier__save{ font-size:10.5px; margin-top:2px; }

/* ---------- purchase options: ONE bordered container ---------- */
.jo-offer__opts{
  display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.jo-opt{
  border:0; border-radius:0; border-bottom:1px solid var(--line);
  padding:13px 14px; position:relative; background:#fff;
}
.jo-opt:last-child{ border-bottom:0; }
.jo-opt.is-on{ box-shadow:none; background:#fdfbf6; }
.jo-opt__head{ align-items:center; margin-bottom:5px; }
.jo-opt__head b{
  font-size:14px; display:flex; align-items:center; gap:7px;
}
/* radio dot, drawn */
.jo-opt__head b::before{
  content:""; width:15px; height:15px; border-radius:50%;
  border:1.5px solid #c3bbae; flex:0 0 auto; transition:border-color .18s var(--e);
}
.jo-opt.is-on .jo-opt__head b::before{
  border-color:var(--ink); border-width:4.5px;
}
.jo-opt__price{ font-size:14.5px; }
.jo-opt__feat{
  display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; padding-inline-start:22px;
}
.jo-opt__feat i{ font-size:10.5px; }
.jo-opt__feat .jo-i{ width:11px; height:11px; }
.jo-opt__tag{ font-size:9.5px; padding:2px 6px; border-radius:999px; }

/* ---------- CTA: pill, full width, as in the reference ---------- */
.jo-buy__form button.single_add_to_cart_button,
.jo-btn--now{
  border-radius:999px !important;
}
.jo-buy__form button.single_add_to_cart_button{
  min-height:52px !important; height:52px; font-size:15.5px !important; font-weight:700 !important;
}
.jo-buy__form form.cart,
.jo-buy__form .woocommerce-variation-add-to-cart{ grid-template-columns:104px 1fr; gap:9px; }
.jo-buy__form .quantity, .jo-qty{ width:104px; height:52px; border-radius:999px; overflow:hidden; }
.jo-btn--now{
  grid-column:1 / -1; min-height:46px !important; height:46px;
  border:1px solid var(--line) !important; background:#fff !important;
  color:var(--ink) !important; font-size:14px !important; text-decoration:none;
  margin-top:0 !important;
}
.jo-btn--now:hover{ background:var(--cream) !important; color:var(--ink) !important; }

/* ---------- rhythm to match the reference ---------- */
.jo-buy__pricegrp{ margin:12px 0 0; }
.jo-instal{ margin-top:5px !important; font-size:12.5px; }
.jo-buy__avail{ margin:10px 0 0; gap:6px; }
.jo-chips{ margin:14px 0 0 !important; }
.jo-offer{ margin:14px 0 12px; }
.jo-buy__form{ margin:0 0 14px !important; }
.jo-deliver{ margin:0 0 16px !important; border-radius:8px; }
.jo-paynote{ margin-top:8px; }

/* ==========================================================================
   REFERENCE PARITY — density pass
   Their whole PDP (category -> Add To Cart) fits one 812px viewport.
   Ours pushed the CTA past the fold: square image at ~55% of screen,
   loose rhythm, and small text everywhere it should be readable.
   ========================================================================== */
@media (max-width:900px){

  /* breadcrumb: readable, tight to the head */
  .jo-crumb{
    padding:10px var(--gut) 0 !important;
    font-size:13px !important; gap:6px;
  }

  /* head: tight stack */
  .jo-pdp__head{ padding:8px var(--gut) 10px; }
  .jo-pdp__head .jo-eyebrow--link{ font-size:12.5px; margin-bottom:3px; }
  .jo-pdp__head .jo-buy__t{
    font-size:25px !important; line-height:1.2; margin-bottom:5px !important;
  }
  .jo-rev0{ font-size:13px; margin-bottom:0; }
  .jo-rev0 .jo-i{ width:14px; height:14px; }

  /* image: 4:3 and capped, like the reference — not a square screen-eater */
  .jo-gal{ padding:0 var(--gut); }
  .jo-gal__f{ aspect-ratio:4/3; max-height:34vh; }

  /* dots BELOW the image */
  .jo-gal__dots{ padding-top:9px; }

  /* buy column: tight */
  .jo-buy{ padding:10px var(--gut) 34px; }
  .jo-buy__pricegrp{ margin:12px 0 0; }
  .jo-priceline__now{ font-size:25px; }
  .jo-priceline__was{ font-size:14.5px; }
  .jo-priceline__save{ font-size:11.5px; }
  .jo-instal{ margin-top:4px !important; font-size:13px; }

  .jo-buy__avail{ margin:8px 0 0; gap:5px; }
  .jo-sold{ font-size:13px !important; }
  .jo-urg{ font-size:12.5px; padding:6px 10px; }

  .jo-buy__lede{ margin:9px 0 0 !important; font-size:14px; }
  .jo-more{ margin-top:5px; font-size:13px; }

  /* the reference carries no material chips — they cost a row we need */
  .jo-chips{ display:none; }

  .jo-count{ margin:12px 0 10px; padding:8px 10px; }
  .jo-count__row b{ font-size:15px; }
  .jo-count__row i{ font-size:11px; }
  .jo-count__row span{ padding:0 8px; }

  .jo-offer{ margin:0 0 10px; }
  .jo-tier{ padding:9px 4px; }
  .jo-tier__q{ font-size:13.5px; }
  .jo-tier__save{ font-size:10.5px; }

  .jo-opt{ padding:11px 12px; }
  .jo-opt__head{ margin-bottom:4px; }
  .jo-opt__head b{ font-size:14px; }
  .jo-opt__price{ font-size:14.5px; }
  .jo-opt__feat{ gap:2px 8px; }
  .jo-opt__feat i{ font-size:10.5px; }

  .jo-buy__form{ margin:0 0 10px !important; }
  .jo-buy__form button.single_add_to_cart_button{ min-height:52px !important; height:52px; }

  /* below the CTA — present, but no longer competing for the fold */
  .jo-paynote{ margin-top:8px; font-size:11.5px; }
  .jo-deliver{ margin:12px 0 0 !important; padding:11px 13px; }
  .jo-deliver__b{ font-size:13.5px !important; }
  .jo-deliver__b em{ font-size:12px !important; }
  .jo-buy__micro{ margin-top:14px; }
  .jo-buy__micro li{ padding:13px 2px; }
  .jo-buy__micro b{ font-size:14.5px !important; }
  .jo-buy__micro li > span, .jo-buy__micro b + *{ font-size:13px !important; }
  .jo-acc{ margin-top:18px; }
  .jo-acc__i > summary{ padding:14px 2px; font-size:14.5px; }
}

/* small phones: shave the image further so the CTA still lands */
@media (max-width:380px){
  .jo-pdp__head .jo-buy__t{ font-size:23px !important; }
  .jo-gal__f{ max-height:30vh; }
  .jo-opt__feat{ grid-template-columns:1fr; }
}

/* ==========================================================================
   OVERFLOW GUARD
   Negative margins on the gallery scroller were widening the document and
   letting the whole page slide sideways. Removed at source; this is the
   backstop. overflow-x:clip is used rather than hidden so position:sticky
   keeps working in the buy column.
   ========================================================================== */
/* overflow-x on <body> (while <html> stays visible) propagates to the
   viewport: it stops sideways scroll and, because body is then treated
   as visible, it does not clip position:fixed overlays. */
html{ overflow-x:visible; }
body{ overflow-x:hidden; }
.jo-main{ overflow-x:clip; }
.jo-pdp__grid, .jo-gal, .jo-buy{ min-width:0; max-width:100%; }
.jo-gal__main{ max-width:100%; }
img, table, iframe{ max-width:100%; }
.jo-spectable{ table-layout:fixed; word-break:break-word; }

@media (max-width:900px){
  /* peek comes from the slide being narrower than the track */
  .jo-gal__main{ padding-inline-end:12%; }
  .jo-gal__f{ flex:0 0 88%; }
}

/* ==========================================================================
   LIGHTBOX — rebuilt. It rendered as a partial overlay and could not be
   dismissed: the close target was unreliable and body scroll was left on.
   ========================================================================== */
/* Visible by default: the element only exists in the DOM while open, so
   there is no state to toggle and nothing to get stuck at opacity:0.
   The fade is a CSS animation, which runs on insert with no JS timing. */
@keyframes jo-lb-in{ from{ opacity:0; } to{ opacity:1; } }
body@media (max-width:900px){
  }

/* ==========================================================================
   SLIDE-IN CART
   ========================================================================== */
.jo-mini{ position:fixed; inset:0; z-index:9998; visibility:hidden; }
.jo-mini.is-on{ visibility:visible; }
body.jo-mini-open{ overflow:hidden; }
.jo-mini__scrim{
  position:absolute; inset:0; background:rgba(18,16,14,.45);
  opacity:0; transition:opacity .28s var(--e);
}
.jo-mini.is-on .jo-mini__scrim{ opacity:1; }
.jo-mini__panel{
  position:absolute; inset-block:0; inset-inline-end:0;
  width:min(92vw,392px); background:var(--paper);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .32s var(--e);
  box-shadow:-8px 0 40px rgba(18,16,14,.16);
}
[dir=rtl] .jo-mini__panel{ transform:translateX(-100%); }
.jo-mini.is-on .jo-mini__panel{ transform:translateX(0) !important; }
.jo-mini__hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--line-2); flex:0 0 auto;
}
.jo-mini__hd strong{ font-size:15px; font-weight:700; }
.jo-mini__x{ width:34px; height:34px; display:grid; place-items:center; color:var(--mute); }
.jo-mini__x:hover{ color:var(--ink); }
.jo-mini__body{ flex:1 1 auto; overflow-y:auto; }
.jo-mini__inner{ padding:16px 18px 22px; }
.jo-mini__empty{ color:var(--mute); font-size:14px; text-align:center; padding:30px 0; }
.jo-mini__list{ display:flex; flex-direction:column; gap:14px; margin:0 0 16px; }
.jo-mini__list li{ display:flex; align-items:flex-start; gap:12px; }
.jo-mini__img img{ width:62px; height:62px; object-fit:cover; background:#fafafa; }
.jo-mini__meta{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.jo-mini__meta b{ font-size:13.5px; font-weight:600; line-height:1.35; }
.jo-mini__meta em{ font-style:normal; font-size:12.5px; color:var(--mute); }
.jo-mini__rm{ color:var(--mute); font-size:20px; line-height:1; padding:2px 4px; }
.jo-mini__rm:hover{ color:var(--warn); }
.jo-mini__sum{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-top:14px; border-top:1px solid var(--line); font-size:14px; margin-bottom:14px;
}
.jo-mini__sum b{ font-size:18px; font-weight:700; }
.jo-mini__go{ width:100%; border-radius:999px !important; }
.jo-mini__cart{
  display:block; text-align:center; margin-top:10px; font-size:13px; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:4px;
}
.jo-mini .jo-meter{ margin-bottom:16px; }

/* button loading state */
.single_add_to_cart_button.is-loading{ opacity:.65; pointer-events:none; position:relative; }
.single_add_to_cart_button.is-loading::after{
  content:""; position:absolute; inset-inline-end:16px; top:50%; margin-top:-8px;
  width:16px; height:16px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:jo-spin .7s linear infinite;
}
@keyframes jo-spin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   SOCIAL-PROOF BAND
   ========================================================================== */
.jo-proof{ padding:clamp(36px,4vw,64px) 0; background:var(--cream); overflow:hidden; }
.jo-proof__num{
  font-family:var(--f-disp); font-size:clamp(46px,8vw,104px); font-weight:300;
  line-height:1; text-align:center; margin:0 0 10px;
  color:transparent; -webkit-text-stroke:1px #cbbfa6; letter-spacing:-.02em;
}
.jo-proof__sub{
  text-align:center; font-size:clamp(14px,1.1vw,16px); color:var(--ink-2);
  max-width:440px; margin:0 auto clamp(24px,3vw,40px); line-height:1.6;
}
.jo-proof__sub--solo{
  font-family:var(--f-disp); font-size:clamp(22px,2.4vw,32px); color:var(--ink);
}
.jo-proof__row{
  display:flex; gap:clamp(10px,1.4vw,18px); overflow-x:auto;
  scroll-snap-type:x proximity; scrollbar-width:none;
  padding-inline:var(--gut); padding-bottom:4px;
}
.jo-proof__row::-webkit-scrollbar{ display:none; }
.jo-proof__row li{
  flex:0 0 clamp(240px,30vw,340px); scroll-snap-align:start;
  background:var(--paper); overflow:hidden;
}
.jo-proof__img{ display:block; background:#fafafa; }
.jo-proof__img img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  transition:transform 1s var(--e);
}
.jo-proof__row li:hover .jo-proof__img img{ transform:scale(1.04); }
.jo-proof__row h3{
  font-size:15.5px; font-weight:700; margin:16px 18px 6px; line-height:1.35;
}
.jo-proof__row p{
  font-size:13.5px; line-height:1.65; color:var(--ink-2); margin:0 18px 20px;
}
@media (min-width:1100px){
  .jo-proof__row{
    justify-content:center; max-width:var(--wrap); margin-inline:auto; overflow:visible;
  }
}

/* ==========================================================================
   EXIT INTENT
   ========================================================================== */
.jo-exit{ position:fixed; inset:0; z-index:99997; visibility:hidden; }
.jo-exit.is-on{ visibility:visible; }
.jo-exit__scrim{
  position:absolute; inset:0; background:rgba(18,16,14,.55);
  opacity:0; transition:opacity .3s var(--e);
}
.jo-exit.is-on .jo-exit__scrim{ opacity:1; }
.jo-exit__panel{
  position:absolute; inset-inline:0; inset-block-start:50%;
  transform:translateY(-46%) scale(.97); opacity:0;
  transition:transform .34s var(--e), opacity .34s var(--e);
  width:min(92vw,440px); margin-inline:auto;
  background:var(--paper); padding:34px 30px 26px; text-align:center;
  box-shadow:0 30px 90px rgba(18,16,14,.26);
}
.jo-exit.is-on .jo-exit__panel{ transform:translateY(-50%) scale(1); opacity:1; }
.jo-exit__x{
  position:absolute; inset-block-start:12px; inset-inline-end:12px;
  width:34px; height:34px; display:grid; place-items:center; color:var(--mute);
}
.jo-exit__x:hover{ color:var(--ink); }
.jo-exit__eyebrow{
  font-size:12px; font-weight:600; color:var(--gold); margin:0 0 8px;
}
.jo-exit__panel h2{
  font-family:var(--f-disp); font-size:clamp(23px,3vw,29px); font-weight:400;
  line-height:1.25; margin:0 0 10px;
}
.jo-exit__panel h2 span{ color:var(--gold); font-weight:500; }
.jo-exit__lede{ font-size:13.5px; color:var(--ink-2); margin:0 0 20px; line-height:1.6; }
.jo-exit__form{ display:grid; gap:9px; }
.jo-exit__form input{ text-align:center; }
.jo-exit__form .jo-btn{ width:100%; border-radius:999px !important; }
.jo-exit__msg{ font-size:13px; margin:12px 0 0; min-height:18px; }
.jo-exit__msg.is-ok{ color:var(--good); }
.jo-exit__msg.is-err{ color:var(--warn); }
.jo-exit__trust{
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
  margin:18px 0 0; font-size:11.5px; color:var(--mute);
}
.jo-exit__trust li{ display:inline-flex; align-items:center; gap:6px; }
.jo-exit__trust .jo-i{ width:14px; height:14px; color:var(--gold); }
.jo-exit__no{
  display:block; margin:16px auto 0; font-size:12px; color:var(--mute);
  text-decoration:underline; text-underline-offset:3px;
}
.jo-exit__no:hover{ color:var(--ink); }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.jo-news{ background:var(--cream); padding:clamp(38px,4.4vw,68px) var(--gut); }
.jo-news__panel{
  max-width:440px; margin-inline:auto; background:var(--paper);
  padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,32px); text-align:center;
  border:1px solid var(--line-2);
}
.jo-news__panel h2{
  font-family:var(--f-disp); font-size:clamp(20px,2.2vw,27px); font-weight:400;
  line-height:1.3; margin:0 0 8px;
}
.jo-news__lede{ font-size:13.5px; color:var(--ink-2); margin:0 0 20px; line-height:1.6; }
.jo-news__form{ display:grid; gap:10px; text-align:start; }
.jo-news__form input[type=text],
.jo-news__form input[type=email],
.jo-news__form input[type=tel]{ min-height:50px; }
.jo-news__ok{
  display:flex; align-items:flex-start; gap:9px; margin:4px 0 6px;
  font-size:12px; line-height:1.5; color:var(--ink-2);
  text-transform:none; letter-spacing:0; font-weight:400;
}
.jo-news__ok input{
  width:17px; height:17px; min-height:0; margin-top:1px; flex:0 0 auto;
  accent-color:var(--ink);
}
.jo-news__form .jo-btn{ width:100%; }
.jo-news__msg{ font-size:13px; margin:4px 0 0; min-height:18px; text-align:center; }
.jo-news__msg.is-ok{ color:var(--good); }
.jo-news__msg.is-err{ color:var(--warn); }
.jo-news__fine{
  font-size:11px; color:var(--mute); text-align:center; margin:6px 0 0; line-height:1.5;
}

/* on the dark footer side, invert the band */
.jo-news--dark{ background:var(--ink); }
.jo-news--dark .jo-news__panel{ background:transparent; border-color:rgba(255,255,255,.14); }
.jo-news--dark h2{ color:var(--paper); }
.jo-news--dark .jo-news__lede,
.jo-news--dark .jo-news__ok{ color:#b3aba2; }
.jo-news--dark input{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.16) !important; color:#fff !important; }
.jo-news--dark ::placeholder{ color:#8a827a; }

/* drawer scrim (built in JS) must sit under the panel, over the page */
.jo-scrim{ z-index:399; }

/* ==========================================================================
   BREATHING ROOM — nav / breadcrumb / head -> gallery
   ========================================================================== */
@media (max-width:900px){
  .jo-crumb{ padding:14px var(--gut) 0 !important; }
  .jo-pdp__head{ padding:10px var(--gut) 16px; }
  .jo-gal{ padding-top:2px; }
  .jo-gal__dots{ padding-top:12px; padding-bottom:4px; }
  .jo-buy{ padding-top:14px; }
}
@media (min-width:900px){
  .jo-crumb{ padding-block:20px 16px !important; }
  .jo-pdp__grid{ padding-top:4px; }
  .jo-gal{ padding-top:4px; }
}

/* ==========================================================================
   ADDED-TO-CART CONFIRMATION
   ========================================================================== */
.jo-mini__hd strong{ display:flex; align-items:center; gap:9px; }
.jo-mini__tick{
  width:22px; height:22px; border-radius:50%; background:var(--good);
  display:grid; place-items:center; flex:0 0 auto;
  animation:jo-pop .34s cubic-bezier(.34,1.56,.64,1);
}
.jo-mini__tick svg{ width:13px; height:13px; color:#fff; stroke-width:2.6; }
@keyframes jo-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }
.jo-mini.is-on .jo-mini__list li{ animation:jo-rise .34s var(--e) both; }
@keyframes jo-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* cart bubble reacts when the count changes */
.jo-cart__n.is-bump{ animation:jo-bump .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes jo-bump{ 0%{transform:scale(1);} 40%{transform:scale(1.45);} 100%{transform:scale(1);} }

/* ==========================================================================
   CART — colour, rhythm, hierarchy
   ========================================================================== */
.jo-cartpage{ padding:clamp(22px,3vw,44px) 0 clamp(48px,5vw,80px); }
.jo-cartpage__t{ text-align:start; margin-bottom:18px; font-size:clamp(24px,2.6vw,34px); }

/* WooCommerce notices were raw grey blocks */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#f5f8f5 !important; border:0 !important;
  border-inline-start:3px solid var(--good) !important;
  border-radius:6px; padding:14px 16px !important; font-size:13.5px; color:var(--ink) !important;
}
.woocommerce-error{ background:#fdf3f1 !important; border-inline-start-color:var(--warn) !important; }
.woocommerce-info{ background:#faf6ee !important; border-inline-start-color:var(--gold) !important; }
.woocommerce-message .button,.woocommerce-info .button{
  min-height:38px !important; font-size:13px !important; padding:0 16px; margin-inline-start:auto;
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{ display:none !important; }

/* line items */
.jo-line{ grid-template-columns:88px 1fr auto; gap:14px; padding:18px 0; align-items:center; }
.jo-line__img img{ width:88px; height:88px; border-radius:6px; }
.jo-line__t{ font-size:14.5px; margin-bottom:3px; }
.jo-line__foot{ margin-top:9px; gap:12px; }
.jo-line__foot .quantity{ border-radius:999px; overflow:hidden; max-width:104px; }
.jo-line__price{ font-size:15.5px; }
.jo-line__x{ font-size:19px; opacity:.5; }
.jo-line__x:hover{ opacity:1; }

/* summary panel */
.cart-sidebar .cart_totals,
.jo-sum{ border-radius:8px; border:1px solid var(--line); background:var(--cream); }
.jo-sum .jo-btn{ border-radius:999px !important; min-height:56px; }
.jo-sum__note{
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:11.5px; color:var(--mute); margin:10px 0 0;
}
.jo-sum__note .jo-i{ width:14px; height:14px; }
.cart-sidebar .cart_totals .order-total th,
.cart-sidebar .cart_totals .order-total td{ font-size:20px !important; }

/* coupon + actions row */
.jo-cartpage__acts{ gap:9px; padding-top:18px; }
.jo-coupon input{ border-radius:999px; padding-inline:18px !important; }
.jo-cartpage__acts .jo-btn--ghost{ border-radius:999px !important; }

/* gift wrap box */
.jo-gift{ border-radius:8px; border-style:solid; border-color:var(--line); background:var(--paper); }

/* cart cross-sell */
.jo-cartx{ margin-top:18px; padding:18px; background:var(--paper); border:1px solid var(--line-2); border-radius:8px; }
.jo-cartx__t{ font-size:13px; font-weight:700; margin:0 0 12px; }
.jo-cartx ul{ display:flex; flex-direction:column; gap:12px; }
.jo-cartx li{ display:flex; align-items:center; gap:11px; }
.jo-cartx li > a:first-child{ display:flex; align-items:center; gap:11px; flex:1 1 auto; min-width:0; }
.jo-cartx img{ width:52px; height:52px; object-fit:cover; border-radius:5px; background:#fafafa; flex:0 0 auto; }
.jo-cartx__n{ font-size:12.5px; color:var(--ink); line-height:1.3; }
.jo-cartx__p{ font-size:12.5px; font-weight:700; margin-inline-start:auto; white-space:nowrap; }
.jo-cartx__add{
  flex:0 0 auto; font-size:11.5px; font-weight:700; padding:7px 13px;
  border:1px solid var(--ink); border-radius:999px; color:var(--ink);
}
.jo-cartx__add:hover{ background:var(--ink); color:var(--paper); }

@media (max-width:900px){
  .jo-line{ grid-template-columns:72px 1fr auto; gap:11px; }
  .jo-line__img img{ width:72px; height:72px; }
  .jo-cartpage__grid{ gap:22px; }
}

/* ==========================================================================
   HERO SLIDER + TICKER
   ========================================================================== */
/* .jo-hero was a two-column grid back when the hero was a single static
   panel. Once it became a slider the track had to own the full width, but
   the old grid was never reset — so the track sat in column 1 (1.05fr =
   1042px of 1985) and column 2 stayed empty cream. Back to a plain block. */
.jo-hero{
  display:block !important;
  grid-template-columns:none !important;
  position:relative; background:var(--cream); overflow:hidden;
}

/* All slides share one grid cell, so the section is exactly as tall as
   its tallest slide and nothing reflows when the active one changes.
   The previous version made both :first-child and .is-on position:
   relative, so after the first advance two slides were in flow at once
   — the section doubled in height and the page jumped on scroll. */
/* The single column must be an explicit minmax(0,1fr). Left as an implicit
   auto track it sized to max-content — the track collapsed to ~1042px inside
   a 1985px hero and sat flush against the RTL start edge, so half the hero
   was dead cream and the copy looked squeezed into a narrow strip. */
.jo-hero__track{
  display:grid; grid-template-areas:"slide";
  grid-template-columns:minmax(0,1fr);
  width:100%;
}
.jo-hero__slide{
  grid-area:slide;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
  min-height:min(74vh,620px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s var(--e), visibility .6s;
}
.jo-hero__slide.is-on{ opacity:1; visibility:visible; pointer-events:auto; }
.jo-hero__media{ position:relative; overflow:hidden; background:var(--sand); }
.jo-hero__media img{ width:100%; height:100%; object-fit:cover; }
.jo-hero__slide.is-on .jo-hero__media img{ animation:jo-kb 9s ease-out both; }
@keyframes jo-kb{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
.jo-hero__copy{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:clamp(30px,5vw,80px); gap:4px;
}
.jo-hero__slide.is-on .jo-hero__copy > *{ animation:jo-up .6s var(--e) both; }
.jo-hero__slide.is-on .jo-hero__copy > *:nth-child(2){ animation-delay:.07s; }
.jo-hero__slide.is-on .jo-hero__copy > *:nth-child(3){ animation-delay:.14s; }
.jo-hero__slide.is-on .jo-hero__copy > *:nth-child(4){ animation-delay:.21s; }
@keyframes jo-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.jo-hero__copy .jo-hero__h{
  font-family:var(--f-disp); font-size:clamp(28px,4.2vw,52px); font-weight:300;
  line-height:1.14; margin:8px 0 16px;
}
.jo-hero__lede{ font-size:clamp(14px,1.1vw,16px); line-height:1.75; color:var(--ink-2); max-width:42ch; margin-bottom:24px; }
.jo-hero__copy .jo-btn{ border-radius:999px !important; }
.jo-hero__dots{
  position:absolute; inset-block-end:18px; inset-inline-start:0; inset-inline-end:0;
  display:flex; justify-content:center; gap:7px; z-index:3;
}
.jo-hero__dots button{
  width:7px; height:7px; border-radius:50%; background:rgba(18,16,14,.22);
  transition:background .25s var(--e), width .25s var(--e);
}
.jo-hero__dots button.is-on{ background:var(--ink); width:22px; border-radius:4px; }

/* scrolling value ticker */
.jo-ticker{ background:var(--ink); color:#ded7ce; overflow:hidden; padding:11px 0; }
.jo-ticker__track{
  display:flex; align-items:center; gap:22px; white-space:nowrap; width:max-content;
  animation:jo-tick 34s linear infinite;
}
/* the copies are laid out as one flat flex row (display:contents) so the gap
   stays even across a copy boundary, and the loop shifts by exactly one copy */
.jo-ticker__grp{ display:contents; }
.jo-ticker:hover .jo-ticker__track{ animation-play-state:paused; }
@keyframes jo-tick{ from{ transform:translateX(0); } to{ transform:translateX(calc(-100% / var(--jo-tick-copies,8))); } }
[dir=rtl] .jo-ticker__track{ animation-name:jo-tick-rtl; }
@keyframes jo-tick-rtl{ from{ transform:translateX(0); } to{ transform:translateX(calc(100% / var(--jo-tick-copies,8))); } }
.jo-ticker span{ font-size:12.5px; letter-spacing:.02em; }
.jo-ticker i{ font-style:normal; color:var(--gold-2); font-size:10px; }

@media (max-width:900px){
  .jo-hero__slide{ grid-template-columns:1fr; min-height:0; }
  .jo-hero__media{ aspect-ratio:4/3; }
  .jo-hero__copy{ padding:26px var(--gut) 46px; }
  .jo-hero__dots{ inset-block-end:12px; }
}
@media (prefers-reduced-motion:reduce){
  .jo-ticker__track{ animation:none; }
  .jo-hero__media img{ animation:none; }
}

/* ==========================================================================
   CATEGORY TILES — real imagery, no placeholder icons
   ========================================================================== */
.jo-cats__img{ position:relative; border-radius:8px; }
.jo-cats__ph{
  background:linear-gradient(140deg,#f4efe6,#e9e0d3);
  position:relative;
}
.jo-cats__ph::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.55), transparent 60%);
}
.jo-cats a{ position:relative; }
.jo-cats__n{ font-size:15px; font-weight:600; }
.jo-cats__c{ font-size:11.5px; }

/* Hero: keep a stable height on mobile too, so the ticker and the
   sections beneath never shift while the slider runs. */
@media (max-width:900px){
  .jo-hero__slide{ min-height:0; grid-template-columns:1fr; }
  .jo-hero__media{ aspect-ratio:4/3; }
}

/* ==========================================================================
   CATEGORY / ARCHIVE
   ========================================================================== */
.jo-arch{ padding-bottom:clamp(30px,4vw,56px); }
.jo-arch .jo-crumb{ padding-block:14px 6px !important; }
.jo-crumb .is-here{ color:var(--ink); font-weight:600; }

.jo-arch__hd{ padding:6px 0 4px; text-align:start; }
.jo-arch__hd h1{
  font-family:var(--f-disp); font-size:clamp(26px,3vw,40px); font-weight:400; margin:0 0 8px;
}
.jo-arch__lede{
  font-size:14.5px; line-height:1.7; color:var(--ink-2);
  max-width:64ch; margin:0;
}

/* subcategory chips */
.jo-chipnav{ padding:16px var(--gut) 0; }
.jo-chipnav ul{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
  max-width:var(--wrap); margin-inline:auto;
}
.jo-chipnav ul::-webkit-scrollbar{ display:none; }
.jo-chipnav li{ flex:0 0 auto; }
.jo-chipnav a{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:999px; padding:9px 15px;
  font-size:13px; font-weight:600; color:var(--ink); background:#fff; white-space:nowrap;
  transition:border-color .18s var(--e), background .18s var(--e);
}
.jo-chipnav a:hover{ border-color:var(--ink); }
.jo-chipnav a em{ font-style:normal; font-size:11px; color:var(--mute); }
.jo-chipnav li.is-on a{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.jo-chipnav li.is-on a em{ color:rgba(255,255,255,.6); }

/* toolbar */
.jo-arch__bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 0 20px; font-size:13px; color:var(--mute);
  border-bottom:1px solid var(--line-2); margin-bottom:24px;
}
.woocommerce-result-count{ margin:0 !important; font-size:13px; }
.woocommerce-ordering select{
  min-height:42px !important; font-size:13.5px !important; border-radius:999px !important;
  padding-inline:38px 18px !important; background-position:calc(0% + 16px) calc(50% + 1px), calc(0% + 21px) calc(50% + 1px) !important;
}

/* SEO copy, collapsed, after the grid */
.jo-arch__seo{ margin-top:clamp(28px,3vw,48px); border-top:1px solid var(--line-2); }
.jo-arch__seo details{ max-width:820px; margin-inline:auto; padding:6px 0 4px; }
.jo-arch__seo summary{
  list-style:none; cursor:pointer; padding:18px 2px; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.jo-arch__seo summary::-webkit-details-marker{ display:none; }
.jo-arch__seo summary .jo-i{ width:15px; height:15px; color:var(--mute); transition:transform .25s var(--e); }
.jo-arch__seo details[open] summary .jo-i{ transform:rotate(180deg); }
.jo-arch__seobody{
  font-size:14.5px; line-height:1.9; color:var(--ink-2); padding:0 2px 24px; max-width:70ch;
}
.jo-arch__seobody p{ margin:0 0 12px; }

/* empty state */
.jo-empty{ text-align:center; padding:60px 0; }
.jo-empty p{ color:var(--mute); margin-bottom:18px; }

/* cards a touch tighter on mobile */
@media (max-width:640px){
  ul.products{ gap:20px 10px; }
  .jo-card__body{ padding:11px 2px 0 !important; }
  .jo-card__t{ font-size:13px !important; }
  .jo-card__price{ font-size:13.5px !important; }
  .jo-card__cta .button{ min-height:40px !important; font-size:12px !important; }
  .jo-arch__bar{ padding:14px 0 16px; margin-bottom:18px; }
}

/* ==========================================================================
   LIGHTBOX — <dialog> in the browser's TOP LAYER.
   Every previous attempt positioned a fixed div, which kept getting
   confined to a containing block created by a transform somewhere up
   the tree: the overlay covered only part of the screen, the close
   button sat outside it, and the page scrolled behind. The top layer
   is outside the normal stacking/containing-block model entirely, so
   no ancestor can clip it.
   ========================================================================== */
.jo-lb{
  width:100vw; height:100dvh; max-width:100vw; max-height:100dvh;
  margin:0; padding:0; border:0; background:transparent; overflow:hidden;
  display:none; inset:0; position:fixed;
}
.jo-lb[open]{ display:flex; align-items:center; justify-content:center; }
.jo-lb::backdrop{ background:rgba(16,14,12,.94); }
/* pre-dialog browsers */
.jo-lb.is-fallback{ z-index:2147483000; background:rgba(16,14,12,.94); display:flex; }
body.jo-lb-open{ overflow:hidden; }

.jo-lb__stage{
  position:relative; background:#fff; border-radius:8px; overflow:hidden; cursor:zoom-in;
  max-width:min(90vw,880px); max-height:78dvh;
  display:flex; align-items:center; justify-content:center;
}
.jo-lb__stage.is-zoom{ cursor:zoom-out; }
.jo-lb__stage img{
  display:block; width:auto; height:auto;
  max-width:min(90vw,880px); max-height:78dvh;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.jo-lb__stage.is-zoom img{ transform:scale(2.2); }

.jo-lb__x{
  position:absolute; top:14px; right:16px; z-index:3;
  width:46px; height:46px; display:grid; place-items:center;
  font-size:30px; line-height:1; color:#fff;
  background:rgba(255,255,255,.16); border-radius:50%; border:0; cursor:pointer;
}
.jo-lb__x:hover{ background:rgba(255,255,255,.3); }
.jo-lb__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; display:grid; place-items:center;
  font-size:28px; line-height:1; color:#fff;
  background:rgba(255,255,255,.16); border-radius:50%; border:0; cursor:pointer;
}
.jo-lb__nav:hover{ background:rgba(255,255,255,.3); }
.jo-lb__nav.is-prev{ left:12px; }
.jo-lb__nav.is-next{ right:12px; }

@media (max-width:900px){
  .jo-lb__stage, .jo-lb__stage img{ max-width:92vw; max-height:70dvh; }
  .jo-lb__x{ top:10px; right:12px; width:42px; height:42px; }
  .jo-lb__nav{ width:40px; height:40px; font-size:24px; }
}

/* ==========================================================================
   WISHLIST
   ========================================================================== */
.jo-wllink{
  position:relative; display:grid; place-items:center; width:40px; height:40px; color:var(--ink);
}
.jo-wllink:hover{ opacity:.6; }
.jo-wllink__n{
  position:absolute; inset-block-start:4px; inset-inline-start:4px;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--gold); color:#fff; font-size:10px; font-weight:700;
  display:grid; place-items:center;
}

/* heart button */
.jo-wl{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; border:0; background:none; color:var(--ink-2);
  transition:color .18s var(--e), transform .18s var(--e);
}
.jo-wl .jo-i{ width:19px; height:19px; transition:fill .2s var(--e), color .2s var(--e); fill:none; }
.jo-wl:hover{ color:var(--warn); }
.jo-wl.is-on{ color:var(--warn); }
.jo-wl.is-on .jo-i{ fill:currentColor; }
.jo-wl.is-beat .jo-i{ animation:jo-beat .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes jo-beat{ 0%{transform:scale(1);} 45%{transform:scale(1.35);} 100%{transform:scale(1);} }

/* icon variant — floats over the product card image */
.jo-card{ position:relative; }
.jo-wl--icon{
  position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:3;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); box-shadow:0 1px 6px rgba(18,16,14,.10);
}
.jo-wl--icon .jo-i{ width:17px; height:17px; }
.jo-wl--icon:hover{ background:#fff; }

/* text variant — on the product page */
.jo-wl--text{
  width:100%; min-height:46px; margin-top:10px;
  border:1px solid var(--line); border-radius:999px;
  font-size:14px; font-weight:600; color:var(--ink);
}
.jo-wl--text:hover{ border-color:var(--warn); }
.jo-wl--text.is-on{ border-color:var(--warn); background:#fdf6f4; }

/* toast */
.jo-toast{
  position:fixed; inset-block-end:calc(16px + env(safe-area-inset-bottom));
  inset-inline:0; margin-inline:auto; width:max-content; max-width:88vw;
  background:var(--ink); color:var(--paper); font-size:13.5px;
  padding:12px 20px; border-radius:999px; z-index:2147482000;
  box-shadow:0 8px 30px rgba(18,16,14,.28);
  animation:jo-toast-in .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes jo-toast-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
body.single-product .jo-toast{ inset-block-end:calc(84px + env(safe-area-inset-bottom)); }

/* wishlist page */
.jo-wlpage{ padding:clamp(24px,3vw,44px) var(--gut) clamp(40px,5vw,72px); }
.jo-wlpage h1{ font-family:var(--f-disp); font-size:clamp(24px,2.8vw,36px); margin-bottom:22px; }

/* ==========================================================================
   HEADER — search beside the hamburger on mobile
   ========================================================================== */
.jo-hd__navside{ display:flex; align-items:center; gap:2px; }
.jo-hd__search-m{ display:none; }

@media (max-width:900px){
  .jo-hd__search-m{ display:grid; }        /* RTL: burger right, search to its left */
  .jo-hd__act .jo-hide-sm{ display:none; }
  .jo-hd__in{ grid-template-columns:auto 1fr auto; }
}
@media (min-width:900px){
  .jo-hd__navside{ gap:0; }
  .jo-hd__burger{ display:none; }
}

/* Category eyebrow removed from the PDP — the breadcrumb already says it. */
.jo-pdp__head .jo-eyebrow--link{ display:none; }
@media (max-width:900px){
  .jo-pdp__head{ padding-top:6px; }
}

/* ==========================================================================
   CTA HIERARCHY — Buy Now is primary, Add to Cart secondary
   Buy Now sits on the quantity row (filled); Add to Cart drops below it
   as an outlined action. Falls back cleanly when Buy Now is absent
   (out of stock / price on request), where Add to Cart stays primary.
   ========================================================================== */
.jo-buy__form form.cart,
.jo-buy__form .woocommerce-variation-add-to-cart{
  display:grid; grid-template-columns:104px 1fr; gap:9px; align-items:stretch;
}

/* default: no Buy Now -> Add to Cart is the primary, beside quantity */
.jo-buy__form button.single_add_to_cart_button{ grid-column:2; grid-row:1; }
.jo-buy__form .quantity,
.jo-buy__form .ux-quantity,
.jo-buy__form .jo-qty{ grid-column:1; grid-row:1; }

/* Buy Now present -> it takes the primary slot */
.jo-buy__form form.cart:has(.jo-btn--now) button.single_add_to_cart_button,
.jo-buy__form .woocommerce-variation-add-to-cart:has(.jo-btn--now) button.single_add_to_cart_button{
  grid-column:1 / -1; grid-row:2;
  background:transparent !important; color:var(--ink) !important;
  border:1px solid var(--ink) !important;
  min-height:50px !important; height:50px; font-size:14.5px !important;
}
.jo-buy__form form.cart:has(.jo-btn--now) button.single_add_to_cart_button:hover,
.jo-buy__form .woocommerce-variation-add-to-cart:has(.jo-btn--now) button.single_add_to_cart_button:hover{
  background:var(--ink) !important; color:var(--paper) !important;
}

.jo-buy__form .jo-btn--now{
  grid-column:2; grid-row:1;
  background:var(--ink) !important; color:var(--paper) !important;
  border:1px solid var(--ink) !important;
  min-height:56px !important; height:56px;
  font-size:15.5px !important; font-weight:700 !important;
  text-decoration:none !important; margin:0 !important; padding:0 24px !important;
  border-radius:999px !important;
}
.jo-buy__form .jo-btn--now:hover{
  background:var(--gold) !important; border-color:var(--gold) !important; color:#fff !important;
}

/* browsers without :has() — keep both usable and clearly ranked */
@supports not selector(:has(*)){
  .jo-buy__form .jo-btn--now{ grid-column:1 / -1; grid-row:2; }
  .jo-buy__form button.single_add_to_cart_button{ grid-column:2; grid-row:1; }
}

@media (max-width:900px){
  .jo-buy__form form.cart,
  .jo-buy__form .woocommerce-variation-add-to-cart{ grid-template-columns:96px 1fr; }
  .jo-buy__form .jo-btn--now{ min-height:54px !important; height:54px; font-size:15px !important; }
}

/* ==========================================================================
   RADIUS — matched to the reference store (--rounded-button: 0.5rem = 8px)
   ========================================================================== */
.jo-btn, button, input[type=submit],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button, button.single_add_to_cart_button,
#place_order, .checkout-button,
.jo-buy__form button.single_add_to_cart_button,
.jo-buy__form .jo-btn--now,
.jo-sum .jo-btn, .jo-mini__go, .jo-news__form .jo-btn,
.jo-exit__form .jo-btn, .jo-stick .jo-btn, .jo-hero__copy .jo-btn,
.jo-card__cta .button, .jo-btn--ghost{
  border-radius:8px !important;
}
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=search], input[type=password], textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.jo-coupon input, .jo-chipnav a, .woocommerce-ordering select{
  border-radius:8px !important;
}
.jo-qty, .jo-buy__form .quantity, .jo-buy__form .ux-quantity,
.jo-line__foot .quantity{ border-radius:8px !important; }
/* genuinely circular controls stay circular */
.jo-lb__x, .jo-lb__nav, .jo-gal__zoom, .jo-gal__nav,
.jo-cart__n, .jo-mini__tick, .jo-hero__dots button{ border-radius:50% !important; }
.jo-hero__dots button.is-on{ border-radius:4px !important; }
.jo-chips li, .jo-priceline__save, .jo-gal__badge, .jo-opt__tag,
.jo-cartx__add{ border-radius:999px !important; }

/* ==========================================================================
   PROOF BAND — number was near-invisible, cards were stuck to it
   ========================================================================== */
.jo-proof__num{
  color:var(--ink);
  -webkit-text-stroke:0;
  font-weight:400;
  opacity:.92;
  font-size:clamp(40px,7vw,88px);
  margin-bottom:14px;
}
.jo-proof__sub{
  font-size:clamp(14.5px,1.15vw,16.5px); color:var(--ink-2);
  max-width:520px; margin:0 auto clamp(30px,4vw,52px);
}
.jo-proof__row{ padding-top:4px; }
.jo-proof{ padding:clamp(40px,4.6vw,72px) 0 clamp(44px,5vw,76px); }

/* ==========================================================================
   NEWSLETTER — pin the light variant's colours
   The consent copy was rendering dark-on-dark: the band inherits colour
   from whatever precedes it, so nothing here is left to inheritance.
   ========================================================================== */
.jo-news--band{ background:var(--cream) !important; }
.jo-news--band .jo-news__panel{
  background:#fff !important; color:var(--ink) !important;
  border:1px solid var(--line) !important;
}
.jo-news--band .jo-news__panel h2{ color:var(--ink) !important; }
.jo-news--band .jo-news__lede{ color:var(--ink-2) !important; }
.jo-news--band .jo-news__ok,
.jo-news--band .jo-news__ok span{ color:#4a443d !important; }
.jo-news--band .jo-news__ok a{ color:var(--ink) !important; text-decoration:underline; }
.jo-news--band .jo-news__fine{ color:var(--mute) !important; }
.jo-news--band input[type=text],
.jo-news--band input[type=email],
.jo-news--band input[type=tel]{
  background:#fff !important; color:var(--ink) !important; border-color:var(--line) !important;
}
.jo-news--band ::placeholder{ color:#a9a29a !important; }

/* checkbox itself must read on white */
.jo-news__ok input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; border:1.5px solid #b8b0a6; border-radius:4px;
  background:#fff; cursor:pointer; position:relative; flex:0 0 auto;
  transition:background .15s ease, border-color .15s ease;
}
.jo-news__ok input[type=checkbox]:checked{ background:var(--ink); border-color:var(--ink); }
.jo-news__ok input[type=checkbox]:checked::after{
  content:""; position:absolute; inset-inline-start:5px; top:2px;
  width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.jo-news--dark .jo-news__ok input[type=checkbox]{ border-color:rgba(255,255,255,.4); background:transparent; }
.jo-news--dark .jo-news__ok input[type=checkbox]:checked{ background:#fff; border-color:#fff; }
.jo-news--dark .jo-news__ok input[type=checkbox]:checked::after{ border-color:var(--ink); }

/* ==========================================================================
   THIRD-PARTY FLOAT WIDGETS
   The accessibility plugin's button was colliding with the sticky buy
   bar and getting clipped behind it. Give each float its own lane.
   ========================================================================== */
#sogo-accessibility-icon,
.sogo-accessibility-icon,
[id*="accessibility"][class*="icon"],
.acc-icon-wrap, .pojo-a11y-toolbar-toggle{
  z-index:170 !important;
  inset-block-end:88px !important;
  inset-inline-start:14px !important;
  inset-inline-end:auto !important;
}
.ht-ctc, .ht-ctc-chat, #ht-ctc-chat, .ht_ctc_chat_style{
  z-index:170 !important;
  bottom:88px !important;
}
body:not(.single-product) #sogo-accessibility-icon,
body:not(.single-product) .sogo-accessibility-icon,
body:not(.single-product) .pojo-a11y-toolbar-toggle{ inset-block-end:18px !important; }
body:not(.single-product) .ht-ctc,
body:not(.single-product) .ht-ctc-chat,
body:not(.single-product) #ht-ctc-chat{ bottom:18px !important; }

/* never let a float sit on top of an open overlay */
body.jo-lb-open .ht-ctc, body.jo-lb-open #sogo-accessibility-icon,
body.jo-mini-open .ht-ctc, body.jo-mini-open #sogo-accessibility-icon,
body.jo-lb-open .pojo-a11y-toolbar-toggle,
body.jo-mini-open .pojo-a11y-toolbar-toggle{ display:none !important; }

/* ==========================================================================
   ADMIN PREVIEW BAR
   ========================================================================== */
.jo-dev{
  max-width:820px; margin:22px auto; padding:16px 18px;
  border:1px dashed #c9a961; background:#fffaf0; border-radius:8px;
}
.jo-dev__t{ margin:0 0 12px; font-size:13px; line-height:1.5; }
.jo-dev__t strong{ display:block; color:#8a6d2f; font-size:13.5px; }
.jo-dev__t span{ color:var(--ink-2); }
.jo-dev__row{ display:flex; gap:9px; flex-wrap:wrap; }
.jo-dev__btn{
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  border-radius:8px; padding:10px 16px; font-size:13px; font-weight:600; cursor:pointer;
}
.jo-dev__btn:hover{ background:var(--gold); border-color:var(--gold); }
.jo-dev__btn.is-danger{ background:transparent; color:#9c3a2a; border-color:#d9b5ae; }
.jo-dev__btn.is-danger:hover{ background:#9c3a2a; color:#fff; border-color:#9c3a2a; }
.jo-dev__btn:disabled{ opacity:.45; cursor:not-allowed; }
.jo-dev__msg{ margin:10px 0 0; font-size:12.5px; min-height:16px; }
.jo-dev__msg.is-ok{ color:var(--good); }
.jo-dev__msg.is-err{ color:var(--warn); }

/* ==========================================================================
   SCROLL REVEALS — subtle, and off entirely under reduced-motion
   ========================================================================== */
.jo-rv{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--e), transform .6s var(--e);
  transition-delay:var(--rv-d,0ms);
}
.jo-rv.is-in{ opacity:1; transform:none; }

/* gentle lift on interactive cards */
.jo-card, .jo-proof__row li, .jo-detail__shots li, .jo-cats li{
  transition:transform .4s var(--e), box-shadow .4s var(--e);
}
.jo-card:hover, .jo-proof__row li:hover, .jo-cats li:hover{
  transform:translateY(-3px);
}
.jo-detail__shots li:hover{ transform:translateY(-2px); }

/* price + stock get a soft entrance so the buy column is not static */
.jo-priceline__now{ animation:jo-fade .5s var(--e) both .05s; }
.jo-urg, .jo-sold{ animation:jo-fade .5s var(--e) both .12s; }
@keyframes jo-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* live dot on the stock line */
.jo-buy__form .stock::before{ animation:jo-pulse 2s infinite; }

@media (prefers-reduced-motion:reduce){
  .jo-rv{ opacity:1 !important; transform:none !important; }
  .jo-priceline__now, .jo-urg, .jo-sold{ animation:none !important; }
  .jo-card:hover, .jo-proof__row li:hover, .jo-cats li:hover,
  .jo-detail__shots li:hover{ transform:none; }
}

/* ==========================================================================
   BUY ROW — Buy Now and the quantity stepper must match exactly.
   The button carried its own min-height while the stepper sized from
   content, so they rendered at different heights and baselines.
   ========================================================================== */
.jo-buy__form form.cart,
.jo-buy__form .woocommerce-variation-add-to-cart{
  align-items:stretch;                    /* both fill the row */
}
.jo-buy__form form.cart > *,
.jo-buy__form .woocommerce-variation-add-to-cart > *{ margin:0; }

.jo-buy__form .jo-btn--now,
.jo-buy__form .quantity,
.jo-buy__form .ux-quantity,
.jo-buy__form .jo-qty{
  height:56px !important;
  min-height:56px !important;
  max-height:56px !important;
  align-self:stretch;
  box-sizing:border-box;
}
.jo-buy__form .jo-btn--now{
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; padding-block:0 !important;
}
.jo-buy__form .jo-qty{
  display:flex; align-items:stretch; overflow:hidden;
}
.jo-buy__form .jo-qty button{
  height:100%; display:grid; place-items:center; padding:0;
}
.jo-buy__form .jo-qty input.qty,
.jo-buy__form .quantity input.qty{
  height:100% !important; min-height:0 !important; padding:0 !important;
  line-height:1; text-align:center; align-self:stretch;
}

@media (max-width:900px){
  .jo-buy__form .jo-btn--now,
  .jo-buy__form .quantity,
  .jo-buy__form .ux-quantity,
  .jo-buy__form .jo-qty{
    height:54px !important; min-height:54px !important; max-height:54px !important;
  }
}

/* ==========================================================================
   HEADING FONT — every heading, explicitly.

   Headings use Assistant, the same face as the navigation. Frank Ruhl
   Libre is a Hebrew serif and reads dated at heading sizes; it is kept
   only for the Latin logotype, where the wide tracking earns it. Verified
   by computed style: the page title the client pointed at as correct
   resolves to Assistant, the one they rejected to Frank Ruhl Libre.
   ========================================================================== */
.jo-sec__t,
.jo-arch__hd h1,
.jo-buy__t,
.jo-cartpage__t,
.jo-co__t,
.jo-hero__copy .jo-hero__h,
.jo-story2 h2,
.jo-detail__copy h2,
.jo-love__copy h2,
.jo-story h2,
.jo-news__panel h2,
.jo-lead__copy h2,
.jo-exit__panel h2,
.jo-modal h2,
.jo-wlpage h1,
.jo-proof__sub--solo,
.related.products > h2,
.up-sells.products > h2,
.jo-cart-empty .jo-empty__t{
  font-family:var(--f-ui) !important;   /* Assistant — the same face as the nav */
  font-weight:600 !important;
  font-style:normal !important;
  font-synthesis:none;
  letter-spacing:0;
}

/* ==========================================================================
   NEWSLETTER — the consent row was rendering dark-on-dark
   ========================================================================== */
.jo-news{ background:var(--cream) !important; }
.jo-news__panel{
  background:var(--paper) !important; border:1px solid var(--line) !important;
  border-radius:10px;
}
.jo-news__panel h2{ color:var(--ink) !important; }
.jo-news__lede{ color:var(--ink-2) !important; }
.jo-news__ok{
  background:transparent !important; color:var(--ink-2) !important;
  padding:0; border-radius:0;
}
.jo-news__ok span{ color:var(--ink-2) !important; }
.jo-news__fine{ color:var(--mute) !important; }
.jo-news__form input{
  background:var(--paper) !important; color:var(--ink) !important;
  border-color:var(--line) !important;
}
.jo-news__form input::placeholder{ color:#b5ada3 !important; }
.jo-news__form .jo-btn{ border-radius:999px !important; }

/* ==========================================================================
   DESKTOP HOME — hero was sprawling
   ========================================================================== */
@media (min-width:900px){
  /* header: fixed three-column grid, actions can never wrap out of the row */
  .jo-hd__in{
    grid-template-columns:1fr auto 1fr !important;
    grid-template-areas:"nav logo act" !important;
    align-items:center; min-height:76px;
  }
  .jo-nav{ grid-area:nav; justify-self:start; }
  .jo-logo{ grid-area:logo; justify-self:center; }
  .jo-hd__act{ grid-area:act; justify-self:end; display:flex; align-items:center; }
  .jo-hd__burger{ display:none !important; }

  /* hero: copy gets a real measure and sits centred in its half */
  .jo-hero__slide{
    grid-template-columns:1fr 1fr;
    min-height:min(66vh,560px);
  }
  .jo-hero__copy{
    align-items:flex-start; justify-content:center;
    padding:clamp(40px,4vw,72px);
    max-width:560px; margin-inline:auto; width:100%;
  }
  .jo-hero__copy .jo-hero__h{
    font-size:clamp(30px,2.7vw,42px) !important;
    line-height:1.16; margin:8px 0 14px;
    max-width:14ch;
  }
  .jo-hero__lede{ font-size:15.5px; max-width:40ch; margin-bottom:22px; }
  .jo-hero__media{ min-height:100%; }
}

@media (min-width:1500px){
  .jo-hero__slide{ min-height:min(62vh,600px); }
  .jo-hero__copy{ max-width:600px; }
  .jo-hero__copy .jo-hero__h{ font-size:clamp(34px,2.4vw,44px) !important; max-width:15ch; }
}

/* home sections: consistent measure so nothing floats */
.jo-sec{ max-width:var(--wrap); margin-inline:auto; }
.jo-cats{ max-width:var(--wrap); margin-inline:auto; }

/* ==========================================================================
   FOOTER — reordered and rebalanced
   ========================================================================== */
.jo-ft{ background:var(--ink); color:#cdc5bb; padding-top:clamp(40px,4.4vw,68px); }
.jo-ft__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr;
  gap:clamp(24px,3vw,52px); padding-bottom:clamp(32px,3.4vw,52px);
  align-items:start;
}
.jo-ft__brand .jo-logo__m{ color:var(--paper); font-size:19px; display:block; margin-bottom:14px; }
.jo-ft__brand p{ font-size:13.5px; line-height:1.8; color:#a49c93; max-width:36ch; margin:0 0 16px; }
.jo-ft__social{ display:flex; gap:16px; margin-bottom:20px; font-size:12.5px; }
.jo-ft__social a{ color:#cdc5bb; }
.jo-ft__social a:hover{ color:var(--gold-2); }

.jo-ft__col h3{
  font-size:12.5px; font-weight:700; color:var(--gold-2);
  margin:0 0 14px; letter-spacing:0; text-transform:none;
}
.jo-ft__col ul{ display:flex; flex-direction:column; gap:9px; }
.jo-ft__col a{ font-size:13.5px; color:#b8b0a7; }
.jo-ft__col a:hover{ color:var(--paper); }
.jo-ft__contact li{ font-size:13.5px; color:#a49c93; }
.jo-ft__wa{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:13px; color:#cdc5bb;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:9px 15px;
}
.jo-ft__wa:hover{ border-color:var(--gold-2); color:var(--paper); }
.jo-ft__wa .jo-i{ width:15px; height:15px; color:#4ec26a; }

/* payment strip sits with the brand, not floating in the baseline */
.jo-ft__brand .jo-secure{ align-items:flex-start; gap:9px; }
.jo-ft__brand .jo-secure__t{ font-size:11px; }
.jo-ft__brand .jo-secure__marks{ justify-content:flex-start; }

.jo-ft__base{ border-top:1px solid rgba(255,255,255,.09); padding:16px 0 22px; }
.jo-ft__base .jo-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.jo-ft__base p{ margin:0; font-size:11.5px; color:#867e76; }

@media (max-width:1000px){
  .jo-ft__grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .jo-ft__brand{ grid-column:1 / -1; }
}
@media (max-width:600px){
  .jo-ft__grid{ grid-template-columns:1fr; }
  .jo-ft__base .jo-wrap{ justify-content:center; text-align:center; }
}

/* ==========================================================================
   ARCHIVE TOOLBAR — was flung to opposite edges of a 2000px screen
   ========================================================================== */
.jo-arch__bar{
  max-width:var(--wrap); margin-inline:auto;
}
@media (min-width:900px){
  .jo-arch__hd, .jo-arch__lede{ max-width:var(--wrap); margin-inline:auto; }
  .jo-arch__lede{ max-width:70ch; }
  .jo-arch__bar{ padding-inline:0; }
}

/* ==========================================================================
   RTL ARROW DIRECTION
   The nav buttons sit on logical sides (inset-inline-start/end), so in RTL
   "previous" lands on the right — but the glyphs inside were still drawn
   for LTR, leaving the right button pointing left and vice versa.
   ========================================================================== */
[dir=rtl] .jo-gal__nav svg,
[dir=rtl] .jo-lb__nav{ transform:scaleX(-1); }
[dir=rtl] .jo-lb__nav{ transform:translateY(-50%) scaleX(-1); }

/* ==========================================================================
   BUY COLUMN — +10% type
   ========================================================================== */
.jo-instal{ font-size:14.5px !important; }
.jo-sold{ font-size:14.5px !important; }
.jo-sold .jo-i{ width:16px; height:16px; }
.jo-buy__lede,
.jo-buy__lede p,
.jo-buy__lede li{ font-size:15px !important; line-height:1.7; }
.jo-more{ font-size:14px !important; }
.jo-urg{ font-size:13.5px !important; }
.jo-rev0{ font-size:14px !important; }
.jo-chips li{ font-size:14px !important; }
.jo-sizelink{ font-size:14px !important; }
.jo-deliver__b{ font-size:15px !important; }
.jo-deliver__b em{ font-size:13.5px !important; }
.jo-ask{ font-size:14px !important; }
.jo-tier__q{ font-size:14.5px !important; }
.jo-tier__save{ font-size:11.5px !important; }
.jo-opt__head b{ font-size:15px !important; }
.jo-opt__price{ font-size:16px !important; }
.jo-opt__feat i{ font-size:12px !important; }
.jo-buy__micro b{ font-size:16px !important; }
.jo-buy__micro li > span,
.jo-buy__micro b + *{ font-size:14px !important; }
.jo-paynote{ font-size:13px !important; }
.jo-count__row b{ font-size:17px !important; }
.jo-count__row i{ font-size:12px !important; }
.jo-acc__i > summary{ font-size:16px !important; }
.jo-acc__b{ font-size:15.5px !important; }
.jo-spectable th,.jo-spectable td{ font-size:14.5px !important; }
.jo-wl--text{ font-size:15px !important; }


/* ==========================================================================
   REVIEWS  — own markup end to end.
   WooCommerce's default prints a gravatar, an English "(verified owner)",
   an English date, and a star widget that only works with its stylesheet.
   None of that survives here.
   ========================================================================== */

/* ---------- star primitive ---------- */
.jo-stars{
  position:relative; display:inline-block; line-height:0; white-space:nowrap;
  --sz:16px;
}
.jo-stars__bg,
.jo-stars__fg{ display:flex; gap:2px; }
.jo-stars__fg{
  position:absolute; inset-block-start:0; inset-inline-start:0;
  overflow:hidden; width:0;
}
.jo-stars .jo-star{
  width:var(--sz); height:var(--sz); flex:none;
  fill:var(--star-off);
}
.jo-stars__fg .jo-star{ fill:var(--star); }
.jo-stars.is-sm{ --sz:15px; }
.jo-stars.is-lg{ --sz:23px; }

/* No RTL override here on purpose: inset-inline-start already resolves to
   the right edge in RTL, and the flex row packs from that same edge, so the
   two layers stay in register. Forcing inset-inline-end:0 shifted the gold
   layer away from the grey one and let the grey show through. */

/* ---------- rating line in the buy column ---------- */
.jo-rev0{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--ink-2);
}
.jo-rev0 b{ color:var(--ink); font-weight:700; }
.jo-rev0 span{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }
.jo-rev0:hover span{ text-decoration-color:var(--gold); }

/* ---------- section shell ---------- */
.jo-reviews{ padding:clamp(34px,4vw,60px) 0; border-top:1px solid var(--line-2); }
.jo-revs{ margin-block-start:22px; }

/* ---------- summary panel ---------- */
.jo-revs__sum{
  display:grid; gap:clamp(20px,3vw,40px); align-items:center;
  grid-template-columns:minmax(150px,auto) minmax(200px,1fr) minmax(180px,auto);
  padding:clamp(20px,2.4vw,30px);
  background:linear-gradient(160deg,#fdfbf7,var(--cream));
  border:1px solid var(--line); border-radius:12px;
  margin-block-end:clamp(22px,2.6vw,34px);
}
.jo-revs__score{ display:grid; gap:6px; justify-items:center; text-align:center; }
.jo-revs__num{
  font-family:var(--f-disp); font-size:52px; line-height:1; font-weight:600; color:var(--ink);
}
.jo-revs__of{ font-size:13px; color:var(--mute); }

.jo-revs__bars{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.jo-revs__bars li{ display:grid; grid-template-columns:34px 1fr 26px; gap:10px; align-items:center; }
.jo-revs__lab{
  display:inline-flex; align-items:center; gap:3px; justify-content:flex-end;
  font-size:12.5px; color:var(--ink-2);
}
.jo-revs__lab .jo-i{ width:11px; height:11px; fill:var(--star); stroke:var(--star); }
.jo-revs__track{
  height:7px; border-radius:99px; background:var(--sand); overflow:hidden;
}
.jo-revs__track i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--gold-2),var(--star));
  transition:width .7s var(--e);
}
.jo-revs__n{ font-size:12.5px; color:var(--mute); text-align:start; }

.jo-revs__cta{
  text-align:center; padding-inline-start:clamp(0px,2vw,24px);
  border-inline-start:1px solid var(--line);
}
.jo-revs__cta p{ margin:0 0 10px; font-size:13.5px; color:var(--ink-2); }

@media (max-width:820px){
  .jo-revs__sum{ grid-template-columns:1fr; text-align:center; }
  .jo-revs__cta{ border-inline-start:0; border-block-start:1px solid var(--line); padding:16px 0 0; }
}

/* ---------- the cards ---------- */
.jo-revs__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.jo-revs__list .children{ display:none; }

.jo-rev__in{
  height:100%; padding:18px 20px 20px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  transition:border-color .25s var(--e), box-shadow .25s var(--e), transform .25s var(--e);
}
.jo-rev__in:hover{
  border-color:var(--gold-2);
  box-shadow:0 10px 26px -18px rgba(18,16,14,.4);
  transform:translateY(-2px);
}

.jo-rev__hd{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  margin-block-end:10px;
}
.jo-rev__disc{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--tint,#a07d38); color:#fff;
  font-family:var(--f-disp); font-size:17px; font-weight:600; line-height:1;
}
.jo-rev__who{ display:grid; gap:2px; min-width:0; }
.jo-rev__name{ font-size:14.5px; font-weight:700; color:var(--ink); }
.jo-rev__ok{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:600; color:var(--good);
}
/* jo_icon() draws with a stroke and no fill. Setting fill:currentColor on
   it floods the open check path into a solid wedge, and the stroke then
   runs past the viewBox and clips. Stroke it, do not fill it. */
.jo-rev__ok .jo-i{
  width:14px; height:14px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
}
.jo-rev__when{ font-size:12px; color:var(--mute); white-space:nowrap; align-self:start; }

.jo-rev__body{ margin-block-start:9px; }
.jo-rev__body p{
  margin:0; font-size:15px; line-height:1.65; color:var(--ink-2);
}
.jo-rev__hold{ margin:8px 0 0; font-size:12px; color:var(--warn); }

/* ---------- empty state ---------- */
.jo-revs__empty{
  display:grid; gap:12px; justify-items:center; text-align:center;
  padding:clamp(28px,4vw,46px) 20px;
  background:var(--cream); border:1px solid var(--line); border-radius:12px;
}
.jo-revs__empty p{ margin:0; font-size:14.5px; color:var(--ink-2); }
.jo-revs__empty p b{ display:block; font-size:17px; color:var(--ink); margin-block-end:4px; }

/* ---------- write-a-review form ---------- */
.jo-revs__form{ margin-block-start:clamp(24px,3vw,38px); }
.jo-revs__ft{
  font-family:var(--f-disp); font-size:22px; font-weight:600; margin:0 0 14px; color:var(--ink);
}
.jo-revs__form .comment-form{
  display:grid; gap:14px; max-width:620px;
  padding:clamp(18px,2.4vw,28px);
  background:var(--cream); border:1px solid var(--line); border-radius:12px;
}
.jo-f{ margin:0; display:grid; gap:6px; }
.jo-f label{ font-size:13px; font-weight:600; color:var(--ink); }
.jo-f .req{ color:var(--warn); }
.jo-f small{ font-size:11.5px; color:var(--mute); }
.jo-f input[type=text],
.jo-f input[type=email],
.jo-f textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  padding:12px 14px; background:var(--paper);
  border:1px solid var(--line); border-radius:8px;
}
.jo-f input:focus, .jo-f textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(160,125,56,.13);
}
.jo-f textarea{ resize:vertical; min-height:110px; }

/* interactive star picker — radios reversed so hover fills right-to-left */
.jo-rate{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; }
.jo-rate input{ position:absolute; opacity:0; width:0; height:0; }
.jo-rate label{ cursor:pointer; line-height:0; }
.jo-rate .jo-i{ width:29px; height:29px; fill:var(--star-off); stroke:var(--star-off);
  transition:fill .12s var(--e), stroke .12s var(--e); }
.jo-rate label:hover .jo-i,
.jo-rate label:hover ~ label .jo-i,
.jo-rate input:checked ~ label .jo-i{ fill:var(--star); stroke:var(--star); }
.jo-rate input:focus-visible + label .jo-i{ outline:2px solid var(--gold); outline-offset:2px; }

.jo-revs__form .form-submit{ margin:0; }
.jo-revs__gate{
  padding:16px 18px; background:var(--cream); border:1px solid var(--line);
  border-radius:10px; font-size:14px; color:var(--ink-2); margin:0;
}

/* ---------- pagination ---------- */
.jo-revs__pg{ margin-block-start:20px; }
.jo-revs__pg ul{ list-style:none; display:flex; gap:6px; padding:0; margin:0; justify-content:center; }
.jo-revs__pg a, .jo-revs__pg span{
  display:grid; place-items:center; min-width:36px; height:36px; padding:0 10px;
  border:1px solid var(--line); border-radius:8px; font-size:13.5px;
}
.jo-revs__pg .current{ background:var(--ink); color:#fff; border-color:var(--ink); }


/* ---------- sticky bar: rating between the name and the price ---------- */
.jo-stick__rate{
  display:inline-flex; align-items:center; gap:6px;
  margin-block:1px 2px; font-size:12px; color:var(--ink-2);
}
.jo-stick__rate .jo-stars{ --sz:13px; }
.jo-stick__rate i{ font-style:normal; font-weight:700; color:var(--ink); }
.jo-stick__rate u{ text-decoration:none; color:var(--mute); }
@media (max-width:520px){ .jo-stick__rate u{ display:none; } }

/* ---------- honeypot: out of sight, still in the tab order for nobody ---------- */
.jo-hp{
  position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- the purchase-only note above the review form ---------- */
.jo-revs__note{
  display:flex; align-items:flex-start; gap:8px; margin:0 0 4px;
  padding:11px 13px; border-radius:8px;
  background:var(--paper); border:1px solid var(--line);
  font-size:12.5px; line-height:1.55; color:var(--ink-2);
}
.jo-revs__note .jo-i{ width:15px; height:15px; flex:none; margin-top:2px; color:var(--good); }


/* ==========================================================================
   REFINEMENT PASS
   Softer ground, warmer neutrals, one radius language, and the buy column
   laid out so the choice is obvious rather than crowded.
   ========================================================================== */

/* ---------- header can never force the page wider than the viewport ----------
   .jo-hd__in is a 1fr auto 1fr grid. Grid items default to min-width:auto, so
   a long menu makes the nav column refuse to shrink and pushes the grid past
   its own max-width — the page then gets clipped by body{overflow-x:hidden}
   and the last nav item disappears off the edge. min-width:0 lets it shrink. */
.jo-hd__in > *{ min-width:0; }
.jo-nav{ min-width:0; }
.jo-nav__ul{ flex-wrap:nowrap; min-width:0; }
.jo-nav__ul > li{ flex:0 1 auto; min-width:0; }
.jo-nav__ul > li > a{ white-space:nowrap; }
@media (min-width:1024px){
  .jo-nav__ul{ gap:clamp(14px,1.7vw,30px); }
}

/* ---------- gallery: the image and its navigation share one screen ----------
   The photo was rendering 852-1028px tall, which pushed the thumbnails to
   ~1200px — below the fold on every laptop. Cap it against the viewport so
   the thumbs are always reachable without scrolling. */
@media (min-width:1024px){
  /* The slides are absolutely positioned for the cross-fade, so the frame
     gets its height from aspect-ratio alone — capping max-height would
     collapse it to zero. Cap the WIDTH against the viewport height instead:
     the square shrinks as a unit and the thumbnails ride up with it. */
  .jo-gal__main{
    max-width:min(62vh, 620px);
    margin-inline:auto;
  }
  .jo-gal__thumbs{ padding-top:14px; max-width:min(62vh, 620px); margin-inline:auto; }
}
@media (min-width:1440px){
  .jo-gal__main,
  .jo-gal__thumbs{ max-width:min(64vh, 680px); }
}

/* ---------- buy column: save and add, equal weight, one row ----------
   Grid placement fought the quantity stepper here (its column is auto-sized,
   so "50/50" came out lopsided and the two buttons landed in the same cell
   and overlapped). Flex wrapping gives an honest half each. */
.jo-wl--text{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:54px; padding:0 18px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  font:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:border-color .22s var(--e), background .22s var(--e), color .22s var(--e);
}
.jo-wl--text:hover{ border-color:var(--gold); background:var(--blush); }
.jo-wl--text .jo-i{ width:18px; height:18px; }
.jo-wl--text.is-on{ border-color:var(--gold); background:var(--blush); color:var(--gold); }
.jo-wl--text.is-on .jo-i{ fill:var(--gold); }

/* ---------- purchase options: one benefit per line, actually readable ---------- */
.jo-opt__feat{
  display:grid !important;
  grid-template-columns:1fr;
  gap:3px;
  margin-block-start:5px;
}
.jo-opt__feat i{
  display:grid; grid-template-columns:14px 1fr; gap:7px;
  align-items:center; font-style:normal;
  font-size:12.5px; line-height:1.45; color:var(--ink-2);
}
.jo-opt__feat i .jo-i{
  width:13px; height:13px;
  color:var(--good); stroke-width:2.2;
}
/* Deliberately no radius or blush tint here — the squared rows with the
   quiet #fdfbf6 selected state read tighter than the rounded, pinker
   version that replaced them. */

/* ---------- one radius language, softer edges everywhere ---------- */
.jo-btn,
.jo-card__img,
.jo-cats__img,
.jo-gal__main,
.jo-gal__f,
.jo-acc__i,
.jo-revs__sum,
.jo-rev__in,
.jo-revs__empty,
.jo-revs__form .comment-form,
.jo-f input, .jo-f textarea,
.jo-chips li,
.jo-speccards li{ border-radius:var(--r); }
.jo-gal__thumbs button{ border-radius:var(--r-sm); }

/* ---------- buttons: warmth on contact ---------- */
.jo-btn{
  transition:background .24s var(--e), color .24s var(--e),
             border-color .24s var(--e), box-shadow .24s var(--e), transform .18s var(--e);
}
.jo-btn:hover{ box-shadow:var(--shadow); }
.jo-btn:active{ transform:translateY(1px); }
.jo-btn--ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---------- focus you can actually see, in the brand colour ---------- */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ---------- Hebrew reads better with a little more air ---------- */
.jo-buy__lede, .jo-acc__b, .jo-rev__body p, .jo-why__grid li p{ line-height:1.72; }


/* The big rating number sat in the serif; it now matches its headings. */
.jo-revs__num{ font-family:var(--f-ui); font-weight:700; letter-spacing:-.02em; }
/* The Latin logotype keeps the serif — that is where it belongs. */
.jo-logo__m{ font-family:var(--f-disp) !important; font-weight:400 !important; }


/* Hero on desktop: the media half is now ~half the viewport wide, and an
   aspect-ratio inherited from the mobile rules made it square — a 993px
   tall hero. Height comes from the slide, the image covers it. */
@media (min-width:1024px){
  .jo-hero__slide{
    min-height:min(64vh,560px);
    max-height:min(72vh,640px);
  }
  .jo-hero__media{ aspect-ratio:auto !important; height:100%; min-height:0; }
  .jo-hero__media img{ width:100%; height:100%; object-fit:cover; }
  .jo-hero__copy{ height:auto; align-self:center; }
}


/* ---------- add-to-cart form: qty + primary, then two equal alternatives ----------
   Row 1: quantity and the single primary action.
   Row 2: add-to-cart and save, half each.
   This is the same shape at every width. It used to only apply from 820px
   up, so on a phone the wishlist stacked full width below and its label
   wrapped onto two lines — a different, worse layout on the device most of
   the traffic arrives on. */
.jo-buy__form form.cart:not(.variations_form),
.jo-buy__form .woocommerce-variation-add-to-cart{
  display:flex !important;
  flex-wrap:wrap;
  align-items:stretch;
  gap:10px;
}
.jo-buy__form .quantity{ flex:0 0 auto; order:1; margin:0; }
.jo-buy__form .jo-btn--now{ flex:1 1 200px; order:2; margin:0; }

/* an earlier rule sets width:100% on the cart button, which would force a
   wrap and stack the two alternatives instead of pairing them */
.jo-buy__form .single_add_to_cart_button{
  flex:1 1 calc(50% - 5px) !important; order:3; margin:0 !important;
  width:calc(50% - 5px) !important; min-width:0 !important;
}
.jo-buy__form .jo-wl-slot{
  flex:1 1 calc(50% - 5px) !important; order:4; display:block;
  width:calc(50% - 5px) !important; min-width:0;
}
.jo-buy__form .jo-wl-slot > .jo-wl{ width:100%; height:100%; margin:0; }

/* keep the label on one line in a half-width button */
.jo-wl--text{ white-space:nowrap; }
.jo-wl--text .jo-wl__t{ overflow:hidden; text-overflow:ellipsis; }

@media (max-width:420px){
  .jo-buy__form .single_add_to_cart_button,
  .jo-buy__form .jo-wl-slot > .jo-wl{ font-size:13.5px; padding-inline:10px; }
  .jo-wl--text{ gap:6px; }
}
/* below this the two labels genuinely cannot share a line — drop the
   wishlist to its icon rather than wrapping it */
@media (max-width:360px){
  .jo-buy__form .jo-wl-slot{ flex:0 0 54px !important; width:54px !important; }
  .jo-wl--text .jo-wl__t{ display:none; }
}



/* ==========================================================================
   PDP: pin the photography, let the information scroll past it.

   It was the other way round — the buy column was sticky and the gallery
   scrolled away. Because the buy column is far taller than the gallery,
   everything below the fold showed a tall empty white band where the photo
   used to be. Every serious jewellery PDP pins the image instead: the
   product stays in front of her the whole time she reads the details.

   align-self:start is required — a stretched grid item is exactly as tall
   as its row, so it can never move relative to it and sticky does nothing.
   .jo-main uses overflow-x:clip rather than hidden precisely so this keeps
   working; clip does not create a scroll container, hidden does.
   ========================================================================== */
@media (min-width:1024px){
  .jo-pdp__grid{ align-items:start; }

  .jo-gal{
    position:sticky;
    top:calc(var(--hd) + 20px);
    align-self:start;
    z-index:1;
  }

  /* the buy column now scrolls normally */
  .jo-buy__stick{ position:static !important; top:auto !important; }
}

/* Very short viewports: pinning a tall image would trap the page, so the
   gallery scrolls away normally again. */
@media (min-width:1024px) and (max-height:680px){
  .jo-gal{ position:static; }
}


/* ==========================================================================
   MY ACCOUNT
   Was raw WooCommerce output: a bare <ul> of links and two paragraphs of
   prose. Rebuilt as a navigation card plus real content.
   ========================================================================== */
.jo-acct{ max-width:var(--wrap); margin-inline:auto; padding:clamp(20px,3vw,44px) var(--gut) clamp(48px,6vw,90px); }
.jo-acct__grid{ display:grid; gap:clamp(18px,2.4vw,34px); grid-template-columns:1fr; }
@media (min-width:900px){ .jo-acct__grid{ grid-template-columns:290px minmax(0,1fr); align-items:start; } }

/* ---------- navigation ---------- */
.jo-acct__nav{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; position:sticky; top:calc(var(--hd) + 20px);
}
@media (max-width:899px){ .jo-acct__nav{ position:static; } }

.jo-acct__me{
  display:flex; align-items:center; gap:12px;
  padding:18px; background:linear-gradient(160deg,var(--blush),var(--cream));
  border-bottom:1px solid var(--line);
}
.jo-acct__disc{
  width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--tint,#9c7639); color:#fff; font-size:20px; font-weight:600; line-height:1;
}
.jo-acct__who{ display:grid; gap:2px; min-width:0; }
.jo-acct__who b{ font-size:15px; color:var(--ink); }
.jo-acct__who em{ font-style:normal; font-size:12px; color:var(--mute); overflow:hidden; text-overflow:ellipsis; }

.jo-acct__nav ul{ list-style:none; margin:0; padding:8px; display:grid; gap:2px; }
.jo-acct__nav li a{
  display:flex; align-items:center; gap:11px;
  padding:11px 12px; border-radius:var(--r-sm);
  font-size:14.5px; color:var(--ink-2);
  transition:background .2s var(--e), color .2s var(--e);
}
.jo-acct__nav li a .jo-i{ width:18px; height:18px; flex:none; color:var(--mute); transition:color .2s var(--e); }
.jo-acct__nav li a:hover{ background:var(--cream); color:var(--ink); }
.jo-acct__nav li a:hover .jo-i{ color:var(--gold); }
.jo-acct__nav li.is-active > a,
.jo-acct__nav li.woocommerce-MyAccount-navigation-link--dashboard.is-active > a{
  background:var(--ink); color:var(--paper);
}
.jo-acct__nav li.is-active > a .jo-i{ color:var(--gold-2); }
.jo-acct__n{
  margin-inline-start:auto; min-width:22px; height:22px; padding:0 6px;
  display:grid; place-items:center; border-radius:11px;
  background:var(--gold); color:#fff; font-size:11.5px; font-weight:700;
}
.jo-acct__nav li.woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--warn); }

/* ---------- content ---------- */
.jo-acct__main{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2.6vw,34px); min-width:0;
}
.jo-acct__main > h2:first-child{ margin-top:0; }
.jo-acct__main .woocommerce-Message,
.jo-acct__main .woocommerce-info,
.jo-acct__main .woocommerce-error{
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--cream); padding:14px 16px; margin:0 0 18px; font-size:14px;
}

/* ---------- dashboard ---------- */
.jo-dash__hd h2{ margin:0 0 6px; font-size:clamp(21px,2.2vw,28px); }
.jo-dash__hd p{ margin:0 0 22px; color:var(--ink-2); font-size:14.5px; }

.jo-dash__last{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--cream); padding:16px 18px; margin-bottom:22px;
}
.jo-dash__lasthd{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.jo-dash__lastt{ font-size:13px; font-weight:700; color:var(--ink); }
.jo-dash__status{
  font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:99px;
  background:var(--sand); color:var(--ink-2);
}
.jo-dash__status.is-good{ background:#e4f0e9; color:var(--good); }
.jo-dash__status.is-wait{ background:#f6ecdf; color:#8a6320; }

.jo-dash__lastbody{ display:grid; gap:16px; }
@media (min-width:680px){ .jo-dash__lastbody{ grid-template-columns:minmax(0,1fr) auto; align-items:start; } }

.jo-dash__items{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.jo-dash__items li{ display:flex; align-items:center; gap:11px; font-size:14px; color:var(--ink-2); }
.jo-dash__thumb{ width:44px; height:44px; flex:none; border-radius:var(--r-sm); overflow:hidden; background:var(--paper); }
.jo-dash__thumb img{ width:100%; height:100%; object-fit:contain; }
.jo-dash__n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jo-dash__q{ margin-inline-start:auto; color:var(--mute); font-size:13px; }

.jo-dash__meta{ margin:0; display:grid; gap:7px; }
.jo-dash__meta > div{ display:flex; gap:10px; justify-content:space-between; font-size:13px; }
.jo-dash__meta dt{ color:var(--mute); margin:0; }
.jo-dash__meta dd{ margin:0; font-weight:700; color:var(--ink); }
.jo-dash__last .jo-btn{ margin-top:16px; }

.jo-dash__cards{
  list-style:none; margin:0 0 22px; padding:0;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.jo-dash__cards li{
  position:relative; padding:18px 16px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  display:grid; gap:4px; align-content:start;
  transition:border-color .22s var(--e), box-shadow .22s var(--e), transform .22s var(--e);
}
.jo-dash__cards li:hover{ border-color:var(--gold-2); box-shadow:var(--shadow); transform:translateY(-2px); }
.jo-dash__cards .jo-i{ width:21px; height:21px; color:var(--gold); margin-bottom:6px; }
.jo-dash__cards b{ font-size:14.5px; color:var(--ink); }
.jo-dash__cards span{ font-size:12.5px; color:var(--mute); line-height:1.5; }
.jo-dash__cards a{ position:absolute; inset:0; border-radius:var(--r); }
.jo-dash__go{ margin:0 0 22px; }

.jo-acct__help{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px; border-radius:var(--r);
  background:linear-gradient(160deg,var(--blush),var(--cream)); border:1px solid var(--line);
}
.jo-acct__help b{ display:block; font-size:14.5px; color:var(--ink); }
.jo-acct__help span{ font-size:13px; color:var(--ink-2); }

/* ---------- trust strip ---------- */
.jo-acct__trust{
  list-style:none; margin:clamp(22px,3vw,38px) 0 0; padding:clamp(18px,2.2vw,26px);
  background:var(--cream); border-radius:var(--r);
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  text-align:center;
}
.jo-acct__trust li{ display:grid; gap:3px; justify-items:center; }
.jo-acct__trust .jo-i{ width:20px; height:20px; color:var(--gold); margin-bottom:4px; }
.jo-acct__trust b{ font-size:13px; color:var(--ink); }
.jo-acct__trust span{ font-size:12px; color:var(--mute); }

/* ---------- login / register ---------- */
.jo-login{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(24px,3vw,48px) var(--gut) 0;
  display:grid; gap:clamp(16px,2.4vw,28px); grid-template-columns:1fr;
}
@media (min-width:820px){ .jo-login.has-reg{ grid-template-columns:1fr 1fr; align-items:start; } }
.jo-login__panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.8vw,36px);
}
.jo-login__panel.is-alt{ background:linear-gradient(165deg,var(--blush),var(--cream)); }
.jo-login__panel h2{ margin:0 0 6px; font-size:clamp(20px,2vw,26px); }
.jo-login__lede{ margin:0 0 20px; font-size:14px; color:var(--ink-2); line-height:1.6; }
.jo-login__panel form{ display:grid; gap:14px; }
.jo-login__panel .jo-btn{ width:100%; }
.jo-login__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.jo-check{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); cursor:pointer; }
.jo-check input{ width:17px; height:17px; accent-color:var(--gold); }
.jo-login__lost{ font-size:13.5px; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.jo-login__lost:hover{ color:var(--gold); }
.jo-login ~ .jo-acct__trust{ max-width:var(--wrap); margin-inline:auto; margin-block:clamp(24px,3vw,40px) clamp(48px,6vw,80px); }

/* ---------- WooCommerce tables inside the account ---------- */
.jo-acct__main table.woocommerce-orders-table,
.jo-acct__main table.shop_table{
  width:100%; border-collapse:collapse; font-size:14px;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.jo-acct__main table th{
  background:var(--cream); font-size:12.5px; font-weight:700; color:var(--ink-2);
  padding:12px 14px; text-align:start;
}
.jo-acct__main table td{ padding:14px; border-top:1px solid var(--line-2); }
.jo-acct__main table .jo-btn,
.jo-acct__main table .button{ font-size:12.5px !important; min-height:38px !important; padding:0 14px !important; }
@media (max-width:640px){
  .jo-acct__main table.shop_table thead{ display:none; }
  .jo-acct__main table.shop_table tr{ display:grid; gap:4px; padding:12px 0; border-top:1px solid var(--line-2); }
  .jo-acct__main table.shop_table td{ display:flex; justify-content:space-between; gap:12px; border:0; padding:3px 14px; }
  .jo-acct__main table.shop_table td::before{ content:attr(data-title); color:var(--mute); font-size:12.5px; }
}

/* address + edit-account forms */
.jo-acct__main form .form-row{ display:grid; gap:6px; margin:0 0 14px; }
.jo-acct__main form label{ font-size:13px; font-weight:600; color:var(--ink); }
.jo-acct__main form input[type=text],
.jo-acct__main form input[type=email],
.jo-acct__main form input[type=tel],
.jo-acct__main form input[type=password],
.jo-acct__main form select,
.jo-acct__main form textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  padding:12px 14px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-sm);
}
.jo-acct__main form input:focus,
.jo-acct__main form select:focus,
.jo-acct__main form textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(156,118,57,.13);
}
.jo-acct__main fieldset{ border:1px solid var(--line); border-radius:var(--r); padding:18px; margin:22px 0 0; }
.jo-acct__main legend{ padding:0 8px; font-size:13.5px; font-weight:700; }
.jo-acct__main .woocommerce-Address{ border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.jo-acct__main .woocommerce-Address-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.jo-acct__main .woocommerce-Address-title h2,
.jo-acct__main .woocommerce-Address-title h3{ margin:0; font-size:16px; }
.jo-acct__main .u-columns{ display:grid; gap:16px; }
@media (min-width:720px){ .jo-acct__main .u-columns{ grid-template-columns:1fr 1fr; } }

/* Reviews sub-line: the purchase gate is a real trust asset, so say it. */
.jo-reviews__sub{
  margin:-14px 0 0; text-align:center;
  font-size:13.5px; color:var(--mute);
}
.jo-reviews__sub::before{ content:"\2713"; color:var(--good); margin-inline-end:6px; font-weight:700; }

.jo-dev__btn.is-alt{
  background:transparent; color:var(--gold); border-color:var(--gold);
  display:inline-flex; align-items:center; text-decoration:none;
}
.jo-dev__btn.is-alt:hover{ background:var(--gold); color:#fff; }


/* ==========================================================================
   TYPE, FINAL WORD
   ========================================================================== */

/* The serif survives in exactly one place: the Latin logotype, where the
   wide tracking earns it. Hebrew never renders in it. */
.jo-logo__m{ font-family:var(--f-logo) !important; font-weight:400 !important; }

/* Headings written for a serif carried weights of 300-400, which read thin
   and washed out in a sans. These four were never on the old override list,
   so they were still rendering in the serif entirely. */
.jo-revs__ft,
.jo-speccards__big,
.jo-proof__num,
.jo-rev__disc{
  font-family:var(--f-disp) !important;
  font-style:normal !important;
}
.jo-revs__ft,
.jo-speccards__big{ font-weight:600 !important; }
.jo-proof__num{ font-weight:500 !important; letter-spacing:-.02em; }
.jo-rev__disc{ font-weight:700 !important; }

/* Any display heading still asking for 300 now sits at a weight that holds
   on screen. */
.jo-hero__copy .jo-hero__h,
.jo-story h2,
.jo-story2 h2{ font-weight:600 !important; }


/* ---------- category grid: fits however many categories the menu has ----------
   A fixed four-column grid left a hole when the header carried three. */
.jo-cats{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
@media (max-width:640px){ .jo-cats{ grid-template-columns:repeat(2,1fr); gap:12px; } }
@media (max-width:380px){ .jo-cats{ grid-template-columns:1fr; } }

/* ==========================================================================
   SWATCHES
   A colour dropdown makes her read a name and guess. Show the colour.
   ========================================================================== */
.jo-sws{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 4px; }

/* the select still drives WooCommerce; it just stops being the interface */
.jo-buy__form .variations td.value select{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* Reveal only on real keyboard focus of the select itself. This was
   :focus-within on the whole cell, so tapping a swatch — which lives in
   that same cell — popped the native dropdown open underneath it. */
.jo-buy__form .variations td.value select:focus-visible{
  position:static; width:auto; height:auto; clip:auto; clip-path:none;
}

.jo-sw{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px 7px 9px; min-height:42px;
  background:var(--paper); border:1px solid var(--line); border-radius:99px;
  font:inherit; font-size:13.5px; color:var(--ink-2); cursor:pointer;
  transition:border-color .2s var(--e), color .2s var(--e), box-shadow .2s var(--e);
}
.jo-sw:hover{ border-color:var(--gold-2); color:var(--ink); }
.jo-sw.is-on{
  border-color:var(--ink); color:var(--ink); font-weight:600;
  box-shadow:inset 0 0 0 1px var(--ink);
}
.jo-sw.is-out{ opacity:.4; }
.jo-sw.is-out .jo-sw__t{ text-decoration:line-through; }

.jo-sw__c{
  width:20px; height:20px; border-radius:50%; flex:none;
  background:var(--sw,#ddd);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
.jo-sw.is-colour.has-no-hex{ padding-inline-start:13px; }

/* size / plain-text attributes read better as square chips */
.jo-sw.is-text{
  border-radius:var(--r-sm); min-width:46px; justify-content:center;
  padding:7px 14px;
}


/* ==========================================================================
   ACCESSIBILITY TOGGLE — SOGO
   Its markup is <button id="open_sogoacc"><i class="fa fa-universal-access">.
   We dequeue Font Awesome (three separate plugins were each loading it), so
   that <i> renders as a 0x0 box and the button collapses to its 10px padding
   — a 21px blue square wedged into the corner at left:0/bottom:0.

   Re-adding an icon font for one glyph is not worth ~30KB and two requests,
   so the icon is drawn here as a mask instead, and the button is given the
   size and clearance it should always have had. None of our earlier rules
   matched it: they targeted #sogo-accessibility-icon, and this is
   #open_sogoacc.
   ========================================================================== */
#open_sogoacc,
button.toggle_sogoacc{
  width:46px !important;
  height:46px !important;
  min-width:46px; min-height:46px;
  padding:0 !important;
  border:0; border-radius:50% !important;
  display:grid !important; place-items:center;
  inset-block-end:18px !important;
  inset-inline-start:16px !important;
  inset-inline-end:auto !important;
  z-index:170 !important;
  color:#fff;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5);
  cursor:pointer;
  transition:transform .2s var(--e), box-shadow .2s var(--e);
}
#open_sogoacc:hover,
button.toggle_sogoacc:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(0,0,0,.55); }

/* the dead Font Awesome <i> carries no glyph — replace it outright */
#open_sogoacc > i,
button.toggle_sogoacc > i{ display:none !important; }

#open_sogoacc::before,
button.toggle_sogoacc::before{
  content:"";
  width:25px; height:25px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%223.6%22%20r%3D%222.1%22%2F%3E%3Cpath%20d%3D%22M20%207.4a1%201%200%200%201-1.1%201l-3.9-.5v3.3l2.6%208.5a1%201%200%200%201-1.9.6L13.2%2014h-2.4l-2.5%206.3a1%201%200%200%201-1.9-.6l2.6-8.5V7.9l-3.9.5A1%201%200%200%201%205%206.4l6-.8h2l6%20.8a1%201%200%200%201%201%201z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%223.6%22%20r%3D%222.1%22%2F%3E%3Cpath%20d%3D%22M20%207.4a1%201%200%200%201-1.1%201l-3.9-.5v3.3l2.6%208.5a1%201%200%200%201-1.9.6L13.2%2014h-2.4l-2.5%206.3a1%201%200%200%201-1.9-.6l2.6-8.5V7.9l-3.9.5A1%201%200%200%201%205%206.4l6-.8h2l6%20.8a1%201%200%200%201%201%201z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* clear the sticky buy bar on product pages */
body.single-product #open_sogoacc,
body.single-product button.toggle_sogoacc{ inset-block-end:88px !important; }

/* and never sit on top of an open overlay */
body.jo-lb-open #open_sogoacc,
body.jo-mini-open #open_sogoacc,
body.jo-lb-open button.toggle_sogoacc,
body.jo-mini-open button.toggle_sogoacc{ display:none !important; }


/* The admin bar is absolutely positioned on mobile, so body{overflow-x}
   cannot clip it. Clamp it to the viewport as a backstop — it only ever
   affects logged-in staff, but that is who judges the site. */
#wpadminbar{ max-width:100vw !important; overflow:hidden; }


/* ---------- buy actions: equal heights, and no dead air above them ----------
   Add-to-cart measured 50px against a 54px wishlist, so the pair sat
   visibly out of line. And the variation block reserved space for things
   that were not on screen: the empty single_variation panel, and the reset
   link, which WooCommerce hides with visibility:hidden — invisible but
   still occupying a full line. */
/* An explicit height, not min-height: three earlier rules set min-height on
   this button (62px, 66px, 60px at different breakpoints) and flex stretch
   was not resolving it against the wishlist, so the pair measured 50 vs 54. */
.jo-buy__form button.single_add_to_cart_button,
.jo-buy__form .jo-wl-slot > .jo-wl{
  height:54px !important;
  min-height:54px !important;
}
.jo-buy__form .jo-btn--now,
.jo-buy__form .quantity,
.jo-buy__form .jo-qty{ min-height:56px; }

.jo-buy__form .variations{ margin:0 0 12px !important; }
.jo-buy__form .variations tr{ margin-bottom:10px; }
.jo-buy__form .variations tr:last-child{ margin-bottom:0; }
.jo-buy__form .variations td.value{ position:relative; }

/* visibility:hidden still takes a line — take it out of flow entirely */
.jo-buy__form .reset_variations[style*="hidden"],
.jo-buy__form .reset_variations[style*="Hidden"]{ display:none !important; }
.jo-buy__form .reset_variations{ display:inline-block; margin:2px 0 0; }

.jo-buy__form .single_variation_wrap{ margin:0; }
.jo-buy__form .woocommerce-variation.single_variation{ margin:0; }
.jo-buy__form .woocommerce-variation.single_variation:empty{ display:none !important; }
.jo-buy__form .woocommerce-variation-description:empty,
.jo-buy__form .woocommerce-variation-price:empty,
.jo-buy__form .woocommerce-variation-availability:empty{ display:none !important; }

/* the swatch row is the control now — it owns the spacing under the label */
.jo-sws{ margin:0 0 2px; }


/* ---------- spec cards stay a single row on every screen ----------
   A mobile media query was collapsing them to one column, so three short
   facts became three full-width blocks and a whole screen of scrolling.
   They are a glanceable strip, not content — they belong side by side. */
.jo-speccards{ grid-template-columns:repeat(3,1fr) !important; }

@media (max-width:640px){
  .jo-speccards{ gap:8px; margin-block:clamp(20px,4vw,30px); }
  .jo-speccards li{ padding:14px 6px; }
  .jo-speccards__big{ font-size:21px !important; }
  .jo-speccards__rule{ width:26px; margin:6px auto; }
  .jo-speccards__ico .jo-i{ width:21px; height:21px; }
  .jo-speccards__l{
    font-size:11px; line-height:1.35;
    display:block; text-wrap:balance;
  }
}
@media (max-width:380px){
  .jo-speccards{ gap:6px; }
  .jo-speccards li{ padding:12px 4px; }
  .jo-speccards__big{ font-size:19px !important; }
  .jo-speccards__l{ font-size:10.5px; }
}


/* ---------- cross-sell as a section, not a column widget ----------
   It used to live inside the buy column at ~11px, competing with the CTA.
   Below the case for the product it can be a proper row of four. */
.jo-xsell.jo-wrap{
  margin-block:clamp(30px,4vw,56px) 0;
  padding-block-start:0; border-top:0;
}
.jo-xsell.jo-wrap .jo-xsell__row{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.6vw,22px);
}
.jo-xsell.jo-wrap .jo-xsell__row a{ display:block; text-align:center; }
.jo-xsell.jo-wrap .jo-xsell__row img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:contain;
  background:var(--cream); border-radius:var(--r); padding:8%;
  transition:transform .5s var(--e);
}
.jo-xsell.jo-wrap .jo-xsell__row a:hover img{ transform:scale(1.03); opacity:1; }
.jo-xsell.jo-wrap .jo-xsell__n{
  display:block; margin-top:10px;
  font-size:14px; line-height:1.4; color:var(--ink);
}
.jo-xsell.jo-wrap .jo-xsell__p{
  display:block; margin-top:3px; font-size:14px; font-weight:700; color:var(--ink);
}
.jo-xsell.jo-wrap .jo-xsell__p del{ font-weight:400; color:var(--mute); margin-inline-end:6px; }

@media (max-width:900px){ .jo-xsell.jo-wrap .jo-xsell__row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){
  .jo-xsell.jo-wrap .jo-xsell__row{ grid-template-columns:repeat(2,1fr); }
  .jo-xsell.jo-wrap .jo-xsell__n{ font-size:13px; }
  .jo-xsell.jo-wrap .jo-xsell__p{ font-size:13px; }
}


/* ---------- horizontal rails must not swallow the page scroll ----------
   These set overflow-x:auto and left overflow-y at visible. Per spec, when
   one axis is not visible the other computes to auto — so every one of them
   was also a VERTICAL scroll container, and on touch a finger landing inside
   scrolled the rail instead of the page. Pin the block axis shut and stop
   the inline axis chaining to the document. */
.jo-proof__row,
.jo-gal__thumbs,
.jo-chips,
.jo-detail__shots,
.jo-recent__row,
.jo-arch__toolbar,
.jo-xsell__row{
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  overscroll-behavior-block:auto;
  touch-action:pan-x pan-y;
}
@media (min-width:1100px){
  /* the proof row is centred and unscrolled here — do not clip it */
  .jo-proof__row{ overflow:visible; }
}


/* ---------- spec cards: icon above, figure below ---------- */
.jo-speccards__ico{ display:block; }
.jo-speccards__ico .jo-i{
  width:26px; height:26px; margin:0 auto 6px;
  color:var(--gold); stroke-width:1.4;
}
.jo-speccards__big{ display:block; line-height:1; margin-bottom:4px; }
@media (max-width:640px){
  .jo-speccards__ico .jo-i{ width:20px; height:20px; margin-bottom:4px; }
}


/* ---------- spec cards: balance a card that has no figure ----------
   The middle card carries an icon and a label but no numeral, so its label
   sat on a different baseline from its neighbours and the row looked
   broken. Centring the content in each card means a card with fewer parts
   still reads as deliberate rather than as something missing. */
.jo-speccards li{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px;
}
.jo-speccards__ico{ display:flex; }
.jo-speccards__ico .jo-i{ margin:0 0 4px; }
.jo-speccards__big{ margin:0; }
.jo-speccards__l{ margin:0; }


/* ==========================================================================
   MAGAZINE
   A narrow measure, generous leading and real hierarchy. Hebrew body copy
   needs more line-height than Latin to stay comfortable, and a shorter
   line than you would set in English.
   ========================================================================== */

/* ---------- index ---------- */
.jo-mag{ padding-block:clamp(24px,3vw,48px) clamp(40px,5vw,72px); }
.jo-mag__hd{ text-align:center; margin-block-end:clamp(28px,3.4vw,48px); }
.jo-mag__hd .jo-sec__t{ margin-block:6px 10px; }
.jo-mag__lede{
  margin:0 auto; max-width:52ch;
  font-size:clamp(15px,1.2vw,17px); line-height:1.7; color:var(--ink-2);
}

.jo-mag__list{
  display:grid; gap:clamp(16px,2.2vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.jo-post{ min-width:0; }
.jo-post__link{ display:grid; gap:14px; height:100%; }
.jo-post__img{
  display:block; overflow:hidden; border-radius:var(--r);
  background:var(--cream); aspect-ratio:4/3;
}
.jo-post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e); }
.jo-post__link:hover .jo-post__img img{ transform:scale(1.04); }
.jo-post__ph{ display:grid; place-items:center; height:100%; }
.jo-post__ph .jo-i{ width:38px; height:38px; color:var(--sand); }
.jo-post__body{ display:grid; gap:7px; align-content:start; }
.jo-post__t{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(17px,1.5vw,21px); line-height:1.35; color:var(--ink);
}
.jo-post__x{ font-size:14px; line-height:1.65; color:var(--ink-2); }
.jo-post__meta{ font-size:12.5px; color:var(--mute); display:flex; gap:7px; }

/* the first article on page one gets the room it deserves */
@media (min-width:820px){
  .jo-post--lead{ grid-column:1 / -1; }
  .jo-post--lead .jo-post__link{
    grid-template-columns:1.15fr 1fr; gap:clamp(20px,3vw,44px); align-items:center;
  }
  .jo-post--lead .jo-post__img{ aspect-ratio:16/11; }
  .jo-post--lead .jo-post__t{ font-size:clamp(24px,2.4vw,34px); }
  .jo-post--lead .jo-post__x{ font-size:15.5px; }
}

/* ---------- article ---------- */
.jo-art{ padding-block:clamp(20px,2.6vw,40px) clamp(40px,5vw,72px); }
.jo-art__hd{
  max-width:760px; margin-inline:auto; padding-inline:var(--gut);
  text-align:center;
}
.jo-art__crumb{ justify-content:center; margin-block-end:18px; }
.jo-art__t{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(27px,3.4vw,46px); line-height:1.2;
  margin:6px 0 14px; color:var(--ink);
  text-wrap:balance;
}
.jo-art__dek{
  margin:0 auto 18px; max-width:56ch;
  font-size:clamp(16px,1.3vw,18.5px); line-height:1.7; color:var(--ink-2);
}
.jo-art__meta{
  margin:0; display:flex; gap:8px; justify-content:center;
  font-size:12.5px; color:var(--mute);
}

.jo-art__lead{
  margin:clamp(24px,3vw,40px) auto; max-width:1100px;
  padding-inline:var(--gut);
}
.jo-art__lead img{
  width:100%; height:auto; border-radius:var(--r);
  aspect-ratio:16/9; object-fit:cover;
}

.jo-art__body{
  max-width:660px; margin-inline:auto; padding-inline:var(--gut);
  font-size:clamp(16px,1.2vw,17.5px); line-height:1.85; color:var(--ink-2);
}
.jo-art__body > p:first-of-type{ font-size:1.06em; color:var(--ink); }
.jo-art__body p{ margin:0 0 1.15em; }
.jo-art__body h2{
  font-family:var(--f-disp); font-weight:600; color:var(--ink);
  font-size:clamp(20px,1.9vw,26px); line-height:1.3;
  margin:1.9em 0 .55em;
}
.jo-art__body h3{
  font-family:var(--f-disp); font-weight:600; color:var(--ink);
  font-size:clamp(17px,1.5vw,20px); line-height:1.35;
  margin:1.6em 0 .45em;
}
.jo-art__body ul,
.jo-art__body ol{ margin:0 0 1.3em; padding-inline-start:1.15em; }
.jo-art__body li{ margin-bottom:.5em; }
.jo-art__body li::marker{ color:var(--gold); }
.jo-art__body strong{ color:var(--ink); font-weight:700; }
.jo-art__body em{ font-style:normal; color:var(--gold); }
.jo-art__body a:not([class]),
.jo-art__body p a:not(.jo-btn),
.jo-art__body li a:not(.jo-btn){
  color:var(--ink); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--gold-2);
}
.jo-art__body a:hover{ text-decoration-color:var(--gold); }
.jo-art__body img{ border-radius:var(--r); margin-block:1.6em; }
.jo-art__body figcaption{ font-size:13px; color:var(--mute); text-align:center; margin-top:8px; }
.jo-art__body blockquote{
  margin:1.8em 0; padding:18px 22px;
  background:var(--cream); border-inline-start:3px solid var(--gold);
  border-radius:var(--r-sm);
  font-family:var(--f-disp); font-size:1.1em; line-height:1.6; color:var(--ink);
}
.jo-art__body blockquote p:last-child{ margin:0; }
.jo-art__body hr{ border:0; border-top:1px solid var(--line); margin:2.2em 0; }

.jo-art__ft{
  max-width:660px; margin:clamp(30px,4vw,52px) auto 0;
  padding-inline:var(--gut); text-align:center;
}

/* ---------- read next ---------- */
.jo-rel{ margin-block-start:clamp(40px,5vw,72px); padding-block-start:clamp(28px,3vw,44px); border-top:1px solid var(--line-2); }
.jo-rel__row{
  display:grid; gap:clamp(12px,1.8vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.jo-rel__i{ display:grid; gap:10px; }
.jo-rel__img{ display:block; overflow:hidden; border-radius:var(--r); background:var(--cream); aspect-ratio:4/3; }
.jo-rel__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--e); }
.jo-rel__i:hover .jo-rel__img img{ transform:scale(1.04); }
.jo-rel__t{ font-family:var(--f-disp); font-weight:600; font-size:16px; line-height:1.4; color:var(--ink); }
.jo-rel__m{ font-size:12.5px; color:var(--mute); }

/* ---------- pagination ---------- */
.jo-mag .navigation.pagination{ margin-block-start:clamp(28px,3vw,44px); }
.jo-mag .nav-links{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.jo-mag .page-numbers{
  display:grid; place-items:center; min-width:40px; height:40px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r-sm); font-size:14px; color:var(--ink-2);
}
.jo-mag .page-numbers:hover{ border-color:var(--gold); color:var(--ink); }
.jo-mag .page-numbers.current{ background:var(--ink); color:var(--paper); border-color:var(--ink); }


/* ==========================================================================
   TL;DR — the summary at the top of the buy column

   This block was clamped with -webkit-line-clamp:2 on the whole element.
   On a bullet list that does three bad things at once: it turns the <ul>
   into a -webkit-box so the list layout collapses, it kills the markers,
   and it puts a "read more" toggle on four short lines that had nothing
   hidden behind it. It is the first thing she reads about the product —
   it should be four scannable facts, not a truncated paragraph.
   ========================================================================== */
.jo-buy__lede{
  display:block !important;
  -webkit-line-clamp:none !important;
  overflow:visible !important;
  font-size:15px !important; line-height:1.6 !important;
  margin:10px 0 18px !important;
}

.jo-buy__lede ul{
  list-style:none; margin:0; padding:0;
  display:grid; gap:9px;
}
/* Deliberately NOT display:grid. Grid promotes every child to a grid item,
   so the <strong> lead-in landed in the 17px marker column and wrapped one
   character per line — a single bullet measured 234px tall. Normal flow
   with an absolutely positioned marker keeps the text inline. */
.jo-buy__lede li{
  display:block !important;
  position:relative;
  padding-inline-start:24px !important; margin:0 !important;
  font-size:14.5px !important; line-height:1.6 !important; color:var(--ink-2);
}
.jo-buy__lede li::before{
  content:"" !important;
  position:absolute !important;
  inset-inline-start:0; top:4px;
  width:15px; height:15px; margin-top:0;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.jo-buy__lede li strong{ color:var(--ink); font-weight:700; }

/* Prose with no list still gets a clamp and a real read-more, because a
   wall of unbroken text at the top of the buy column pushes the price
   and the CTA off the screen. */
.jo-buy__lede:not(:has(ul)){
  display:-webkit-box !important;
  -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden !important;
}
.jo-buy__lede:not(:has(ul)).is-open{
  -webkit-line-clamp:unset; overflow:visible !important;
}
.jo-buy__lede:has(ul) ~ .jo-more{ display:none; }


/* ---------- countdown: state its purpose ---------- */
.jo-count{ text-align:center; }
.jo-count__t .jo-i{ width:15px; height:15px; color:var(--gold); flex:none; }
@media (max-width:420px){
  .jo-count__t{ font-size:11.5px; gap:5px; }
}


/* ---------- countdown: the reason has to arrive before the digits ----------
   The label was there but set at 12.5px in a muted grey above a row of
   large numerals, so the eye went straight to the clock and skipped the
   sentence. A ticking clock with no stated reason reads as a pressure
   tactic. This one counts to a real dispatch cutoff, which is genuinely
   useful, so the promise leads and the numbers finish the sentence. */
.jo-count{
  background:linear-gradient(160deg,var(--blush),var(--cream)) !important;
  border:1px solid var(--gold-2) !important;
  border-radius:var(--r) !important;
  padding:12px 14px !important;
}
.jo-count__t{
  font-size:14px !important; font-weight:500 !important;
  color:var(--ink) !important; margin:0 0 8px !important;
}
.jo-count__t b{ font-weight:800; color:var(--gold); }
.jo-count__t .jo-i{ width:17px; height:17px; color:var(--gold); }
.jo-count__row b{ color:var(--ink); }
.jo-count__row i{ color:var(--ink-2) !important; }


/* ---------- arriving somewhere ----------
   Anchor targets clear the sticky header, and the section breathes once on
   arrival so the eye knows it moved rather than the page having blinked. */
[id]{ scroll-margin-top:calc(var(--hd) + 24px); }

.jo-landed{ outline:none; animation:jo-land 1.3s var(--e) both; }
@keyframes jo-land{
  0%   { opacity:.55; transform:translateY(7px); }
  45%  { opacity:1;   transform:none; }
  100% { opacity:1;   transform:none; }
}
.jo-landed:focus{ outline:none; }

/* The rating line should look like it goes somewhere. */
.jo-rev0{ cursor:pointer; transition:color .2s var(--e); }
.jo-rev0:hover{ color:var(--ink); }
.jo-rev0:hover span{ text-decoration-color:var(--gold); }

@media (prefers-reduced-motion: reduce){
  .jo-landed{ animation:none; }
}


/* ---------- a required choice that has not been made ---------- */
.jo-btn--now.is-blocked{
  opacity:.55;
  cursor:not-allowed;
}
.jo-btn--now.is-blocked:hover{ box-shadow:none; transform:none; }

.jo-pick{
  margin:8px 0 0; font-size:13px; font-weight:600; color:var(--warn);
  display:flex; align-items:center; gap:6px;
}
.jo-pick::before{ content:"!"; display:grid; place-items:center;
  width:16px; height:16px; border-radius:50%;
  background:var(--warn); color:#fff; font-size:11px; font-weight:700; flex:none; }

@keyframes jo-shake{
  0%,100%{ transform:translateX(0); }
  18%{ transform:translateX(-5px); }
  38%{ transform:translateX(4px); }
  58%{ transform:translateX(-3px); }
  78%{ transform:translateX(2px); }
}
.jo-shake{ animation:jo-shake .45s var(--e); }
.jo-shake .jo-sw{ border-color:var(--warn); }

@media (prefers-reduced-motion: reduce){
  .jo-shake{ animation:none; }
}


/* ==========================================================================
   NOTICES
   The success state was WooCommerce green on a mint panel — a shipping-app
   colour on a jewellery store. Success here is the brand's own gold on
   cream: it should feel like confirmation, not like a system alert.
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews{
  display:flex !important; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(160deg,var(--blush),var(--cream)) !important;
  border:1px solid var(--gold-2) !important;
  border-radius:var(--r) !important;
  padding:14px 16px !important;
  margin:0 0 14px !important;
  font-size:14px !important; line-height:1.55;
  color:var(--ink) !important;
  list-style:none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  content:"" !important; display:block !important;
  width:18px; height:18px; flex:none;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8.5%2012.3%202.4%202.4%204.6-4.9%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8.5%2012.3%202.4%202.4%204.6-4.9%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  position:static !important;
}

.woocommerce-error{
  background:#fdf5f3 !important;
  border-color:#e3c3ba !important;
  color:var(--ink) !important;
}
.woocommerce-error::before{
  background:var(--warn);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207.6v5.2%22%2F%3E%3Cpath%20d%3D%22M12%2016.3h.01%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207.6v5.2%22%2F%3E%3Cpath%20d%3D%22M12%2016.3h.01%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.woocommerce-error li{ list-style:none; margin:0; }
.woocommerce-error li + li{ margin-top:4px; }

.woocommerce-info{
  background:var(--cream) !important;
  border-color:var(--line) !important;
}
.woocommerce-info::before{ background:var(--ink-2); }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-message .jo-btn{
  min-height:40px !important; font-size:13px !important;
  padding:0 18px !important; margin-inline-start:auto !important;
}

/* on the product page the notice belongs with the buy column, not adrift */
.jo-notices{ margin:0 0 14px; }
.jo-notices:empty{ display:none; }


/* ==========================================================================
   PAYMENT MARKS
   These were plain words set in body copy, which read as a footnote rather
   than as reassurance. Drawn as small marks instead: no third-party request,
   crisp at any density, and legible at a glance next to the CTA.
   ========================================================================== */
.jo-pay{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
}
.jo-pay__m{
  width:40px; height:26px; flex:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  border-radius:4px;
  opacity:.92; transition:opacity .2s var(--e);
}
.jo-pay__m:hover{ opacity:1; }
.jo-pay__sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
@media (max-width:520px){
  .jo-pay__m{ width:34px; height:22px; }
  .jo-pay{ gap:5px; }
}

.jo-pay__m.is-visa{ background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2026%22%3E%3Crect%20x%3D%22.5%22%20y%3D%22.5%22%20width%3D%2239%22%20height%3D%2225%22%20rx%3D%224%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23e2dcd3%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2217.5%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-size%3D%2210%22%20font-weight%3D%22700%22%20font-style%3D%22italic%22%20fill%3D%22%231a1f71%22%20text-anchor%3D%22middle%22%3EVISA%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.jo-pay__m.is-mastercard{ background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2026%22%3E%3Crect%20x%3D%22.5%22%20y%3D%22.5%22%20width%3D%2239%22%20height%3D%2225%22%20rx%3D%224%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23e2dcd3%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2213%22%20r%3D%227%22%20fill%3D%22%23eb001b%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2213%22%20r%3D%227%22%20fill%3D%22%23f79e1b%22%2F%3E%3Cpath%20d%3D%22M20%207.7a7%207%200%200%200%200%2010.6%207%207%200%200%200%200-10.6z%22%20fill%3D%22%23ff5f00%22%2F%3E%3C%2Fsvg%3E"); }
.jo-pay__m.is-isracard{ background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2026%22%3E%3Crect%20x%3D%22.5%22%20y%3D%22.5%22%20width%3D%2239%22%20height%3D%2225%22%20rx%3D%224%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23e2dcd3%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2217%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-size%3D%227.5%22%20font-weight%3D%22700%22%20fill%3D%22%230a3d62%22%20text-anchor%3D%22middle%22%3Eisracard%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.jo-pay__m.is-bit{ background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2026%22%3E%3Crect%20x%3D%22.5%22%20y%3D%22.5%22%20width%3D%2239%22%20height%3D%2225%22%20rx%3D%224%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23e2dcd3%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226.5%22%20width%3D%2228%22%20height%3D%2213%22%20rx%3D%226.5%22%20fill%3D%22%2300a0e3%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2216%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-size%3D%228.5%22%20font-weight%3D%22700%22%20fill%3D%22%23fff%22%20text-anchor%3D%22middle%22%3Ebit%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.jo-pay__m.is-applepay{ background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2026%22%3E%3Crect%20x%3D%22.5%22%20y%3D%22.5%22%20width%3D%2239%22%20height%3D%2225%22%20rx%3D%224%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23e2dcd3%22%2F%3E%3Cpath%20d%3D%22M14.6%209.4c.5-.6.8-1.4.7-2.2-.7%200-1.6.5-2.1%201.1-.5.5-.9%201.4-.7%202.2.8.05%201.6-.4%202.1-1.1z%22%20fill%3D%22%23111%22%2F%3E%3Cpath%20d%3D%22M15.3%2010.7c-1.2-.07-2.2.66-2.7.66-.6%200-1.4-.63-2.3-.61-1.2.02-2.3.7-2.9%201.77-1.24%202.16-.32%205.35.89%207.1.59.86%201.29%201.82%202.21%201.79.88-.04%201.22-.57%202.29-.57s1.37.57%202.3.55c.95-.02%201.55-.87%202.13-1.73.67-.99.95-1.95.96-2-.02-.01-1.84-.71-1.86-2.81-.02-1.76%201.43-2.6%201.5-2.64-.82-1.21-2.1-1.35-2.55-1.38z%22%20fill%3D%22%23111%22%20transform%3D%22translate%280%2C-1.6%29%20scale%28.92%29%20translate%281.2%2C1%29%22%2F%3E%3Ctext%20x%3D%2227.5%22%20y%3D%2217.2%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-size%3D%228%22%20font-weight%3D%22600%22%20fill%3D%22%23111%22%20text-anchor%3D%22middle%22%3EPay%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.jo-pay__m.is-googlepay{ background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2026%22%3E%3Crect%20x%3D%22.5%22%20y%3D%22.5%22%20width%3D%2239%22%20height%3D%2225%22%20rx%3D%224%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23e2dcd3%22%2F%3E%3Ctext%20x%3D%2216%22%20y%3D%2217.2%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-size%3D%229%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%3E%3Ctspan%20fill%3D%22%234285f4%22%3EG%3C%2Ftspan%3E%3Ctspan%20fill%3D%22%23ea4335%22%3Eo%3C%2Ftspan%3E%3Ctspan%20fill%3D%22%23fbbc04%22%3Eo%3C%2Ftspan%3E%3Ctspan%20fill%3D%22%234285f4%22%3Eg%3C%2Ftspan%3E%3Ctspan%20fill%3D%22%2334a853%22%3El%3C%2Ftspan%3E%3Ctspan%20fill%3D%22%23ea4335%22%3Ee%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%2231%22%20y%3D%2217.2%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-size%3D%228%22%20font-weight%3D%22600%22%20fill%3D%22%235f6368%22%20text-anchor%3D%22middle%22%3EPay%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.jo-pay__m.is-paypal{ background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2026%22%3E%3Crect%20x%3D%22.5%22%20y%3D%22.5%22%20width%3D%2239%22%20height%3D%2225%22%20rx%3D%224%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23e2dcd3%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2217%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-size%3D%228.5%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%3E%3Ctspan%20fill%3D%22%23003087%22%3EPay%3C%2Ftspan%3E%3Ctspan%20fill%3D%22%23009cde%22%3EPal%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E"); }


/* ---------- chosen variation in the cart ----------
   WooCommerce prints attributes as a <dl>, so the label and its value sat
   on separate lines and the value was a bare word. One line, with the
   actual colour beside it. */
.woocommerce .variation,
.jo-line .variation,
.jo-mini__i .variation{
  display:flex !important; flex-wrap:wrap; align-items:center;
  gap:4px 7px; margin:3px 0 0 !important;
  font-size:12.5px; color:var(--mute);
}
.woocommerce .variation dt,
.woocommerce .variation dd{
  display:inline-flex !important; align-items:center;
  margin:0 !important; padding:0 !important; float:none !important;
  font-weight:400; clear:none !important;
}
.woocommerce .variation dd{ color:var(--ink-2); }
.woocommerce .variation dd p{ margin:0 !important; display:inline-flex; align-items:center; gap:6px; }
.woocommerce .variation dt::after{ content:""; }

.jo-cartsw{
  width:14px; height:14px; border-radius:50%;
  background:var(--sw,#ddd);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
  display:inline-block; vertical-align:middle;
  margin-inline-end:6px; flex:none;
}

/* ---------- cart columns ----------
   Original order restored: the line items lead at the RTL start, the
   summary sits beside them. I had swapped these, which was never asked
   for.

   The behaviour: the summary scrolls normally, and the shorter item list
   pins once it has been read so it holds in place while the taller summary
   carries on past it. Sticky needs align-self:start — a stretched grid
   item is exactly as tall as its row and can never move within it. */
@media (min-width:900px){
  .jo-cartpage__grid{
    grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) !important;
    align-items:start !important;
  }
  .jo-cartpage__side{ order:0; }

  .jo-cartpage__items{
    position:sticky;
    top:calc(var(--hd) + 22px);
    align-self:start;
  }
  .jo-sum{ position:static !important; }
}

/* If the list is taller than the screen there is nothing to gain from
   pinning it — it would just trap the page. */
@media (min-width:900px) and (max-height:760px){
  .jo-cartpage__items{ position:static; }
}


/* ==========================================================================
   GENERIC PAGES
   page.php had no styling whatsoever, which is why the title sat flush
   against the header and notices crowded straight up under it. Cart,
   checkout, account and every content page run through here.
   ========================================================================== */
.jo-page{
  padding-block:clamp(30px,4vw,60px) clamp(48px,6vw,92px);
}
.jo-entry__t{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(26px,3vw,38px); line-height:1.22;
  margin:0 0 clamp(20px,2.6vw,30px);
  color:var(--ink);
}

/* room between the title and whatever WooCommerce has to say */
.woocommerce-notices-wrapper{ display:block; margin:0 0 clamp(18px,2.4vw,28px); }
.woocommerce-notices-wrapper:empty{ margin:0; }
.jo-entry__t + .woocommerce-notices-wrapper,
.jo-entry__t + .woocommerce,
.jo-cartpage__t + .woocommerce-notices-wrapper{ margin-block-start:clamp(6px,1vw,12px); }

/* content pages — terms, about, shipping — were unstyled prose */
/* Prose measure — for pages that are actually prose.
   Cart, checkout and account all render inside .jo-entry__b too, so an
   unqualified max-width here squeezed every shop screen into a 74-character
   column. The measure is opt-out for anything WooCommerce owns. */
.jo-entry__b{
  max-width:74ch; font-size:16px; line-height:1.85; color:var(--ink-2);
}
.woocommerce-page .jo-entry__b,
.woocommerce-cart .jo-entry__b,
.woocommerce-checkout .jo-entry__b,
.woocommerce-account .jo-entry__b,
.jo-entry__b:has(.woocommerce),
.jo-entry__b:has(form.checkout),
.jo-entry__b:has(.jo-acct),
.jo-entry__b:has(.jo-cartpage){
  max-width:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
}
.jo-entry__b > *:first-child{ margin-top:0; }
.jo-entry__b h2{
  font-family:var(--f-disp); font-weight:600; color:var(--ink);
  font-size:clamp(19px,1.8vw,24px); margin:1.8em 0 .5em;
}
.jo-entry__b h3{
  font-family:var(--f-disp); font-weight:600; color:var(--ink);
  font-size:clamp(17px,1.5vw,20px); margin:1.5em 0 .4em;
}
.jo-entry__b p{ margin:0 0 1.15em; }
.jo-entry__b ul, .jo-entry__b ol{ margin:0 0 1.25em; padding-inline-start:1.15em; }
.jo-entry__b li{ margin-bottom:.45em; }
.jo-entry__b li::marker{ color:var(--gold); }
/* Prose links only. The cart, checkout and account screens all render
   inside .jo-entry__b, so an unscoped "a" rule here reaches their buttons
   too — it was painting the empty-cart CTA in var(--ink) on a var(--ink)
   background, and the gold line under it was this rule's underline. */
.jo-entry__b a:not([class]),
.jo-entry__b p a,
.jo-entry__b li a{
  color:var(--ink); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--gold-2);
}
.jo-entry__b p a.jo-btn,
.jo-entry__b li a.jo-btn,
.jo-entry__b a.jo-btn,
.jo-entry__b a.button{ text-decoration:none; }
.jo-entry__b strong{ color:var(--ink); }
.jo-entry__b img{ border-radius:var(--r); margin-block:1.4em; }

/* the cart and checkout titles come from the same template */
.jo-cartpage, .jo-acct, .jo-login{ padding-block-start:clamp(24px,3vw,44px); }


/* ==========================================================================
   COUPON
   Sat beside the line items as an open input. An empty coupon box is an
   invitation to leave and go looking for a code, and a share of those
   people do not come back. It belongs under the total, closed, phrased so
   that not having one costs nothing.
   ========================================================================== */
.jo-cpn{
  margin:14px 0 0;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.jo-cpn > summary{
  display:flex; align-items:center; gap:8px;
  cursor:pointer; list-style:none;
  font-size:13.5px; color:var(--ink-2);
  padding:2px 0;
  transition:color .2s var(--e);
}
.jo-cpn > summary::-webkit-details-marker{ display:none; }
.jo-cpn > summary:hover{ color:var(--ink); }
.jo-cpn > summary .jo-i:first-child{ width:15px; height:15px; color:var(--gold); flex:none; }
.jo-cpn > summary .jo-i:last-child{
  width:15px; height:15px; margin-inline-start:auto; color:var(--mute); flex:none;
  transition:transform .25s var(--e);
}
.jo-cpn[open] > summary .jo-i:last-child{ transform:rotate(180deg); }
.jo-cpn > summary span{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }
.jo-cpn > summary:hover span{ text-decoration-color:var(--gold); }

.jo-cpn__form{
  display:flex; gap:8px; margin-top:12px;
  animation:jo-cpn-in .28s var(--e) both;
}
@keyframes jo-cpn-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

.jo-cpn__form input[type=text]{
  flex:1 1 auto; min-width:0;
  font:inherit; font-size:14px; color:var(--ink);
  padding:0 14px; height:46px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
}
.jo-cpn__form input[type=text]:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(156,118,57,.13);
}
.jo-cpn__form .jo-btn{
  flex:0 0 auto; min-height:46px !important; height:46px;
  padding:0 20px !important; border-radius:var(--r-sm) !important;
  width:auto !important; margin:0 !important;
}
.jo-cpn__sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* the summary CTA follows the coupon, not the other way round */
.jo-sum .jo-cpn + .jo-btn{ margin-top:16px; }

@media (prefers-reduced-motion: reduce){
  .jo-cpn__form{ animation:none; }
}

/* checkout carries WooCommerce's own coupon toggle — same treatment */
.woocommerce-form-coupon-toggle .woocommerce-info{
  background:var(--cream) !important;
  border-color:var(--line) !important;
  font-size:13.5px !important;
}
.checkout_coupon.woocommerce-form-coupon{
  display:flex !important; gap:8px; flex-wrap:wrap;
  border:1px solid var(--line) !important; border-radius:var(--r) !important;
  padding:14px !important; margin:0 0 18px !important;
  background:var(--cream) !important;
}
.checkout_coupon.woocommerce-form-coupon p{ margin:0 !important; }
.checkout_coupon.woocommerce-form-coupon .form-row{ flex:1 1 200px; padding:0 !important; }


/* ==========================================================================
   BIDI IN ORDER SUMMARIES
   Product names mix Hebrew with Latin brand names, and the quantity is a
   separate element appended after the name. Without isolation the bidi
   algorithm treats them as one run, so "× 2" got dragged into the Latin
   tail and landed in the wrong place. Isolate each part so the name reads
   in its own direction and the quantity stays put.
   ========================================================================== */
.woocommerce table.shop_table .product-name,
.woocommerce-checkout-review-order-table .product-name,
.jo-line__name, .jo-mini__n, .jo-sum .product-name{
  unicode-bidi:isolate;
  text-align:start;
}
.woocommerce .product-quantity,
.woocommerce-checkout-review-order-table .product-quantity{
  unicode-bidi:isolate;
  display:inline-block;
  margin-inline-start:6px;
  white-space:nowrap;
  color:var(--ink-2);
}

/* the review table generally */
.woocommerce-checkout-review-order-table{ width:100%; border-collapse:collapse; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  text-align:start; padding:12px 0; vertical-align:top; border:0;
}
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child{ text-align:end; white-space:nowrap; }
.woocommerce-checkout-review-order-table tbody tr + tr td{ border-top:1px solid var(--line-2); }

/* one name field wants the full row */
.woocommerce form .form-row-wide{ width:100% !important; float:none !important; }


/* ==========================================================================
   HERO NAVIGATION
   The arrow markup shipped without any styles, so the buttons were in the
   DOM, unstyled and effectively invisible — there was no way to move
   between slides except waiting.
   ========================================================================== */
.jo-hero__nav{
  position:absolute;
  top:50%; transform:translateY(-50%);
  z-index:4;
  width:50px; height:50px;
  display:grid; place-items:center;
  padding:0; margin:0;
  background:rgba(255,253,250,.86);
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 8px 22px -14px rgba(26,22,19,.55);
  transition:background .22s var(--e), border-color .22s var(--e),
             opacity .25s var(--e), transform .22s var(--e);
}
.jo-hero__nav svg{ width:22px; height:22px; }
.jo-hero__nav:hover{
  background:var(--paper); border-color:var(--gold);
  transform:translateY(-50%) scale(1.06);
}
.jo-hero__nav:active{ transform:translateY(-50%) scale(.97); }

.jo-hero__nav.is-prev{ inset-inline-start:clamp(10px,2vw,26px); }
.jo-hero__nav.is-next{ inset-inline-end:clamp(10px,2vw,26px); }

/* The glyphs are drawn for LTR. In RTL "previous" has to point the other
   way, exactly as on the product gallery. */
[dir=rtl] .jo-hero__nav svg{ transform:scaleX(-1); }

/* Quiet until she looks at the hero — but always present on touch, where
   there is no hover to reveal them. */
@media (hover:hover) and (pointer:fine){
  .jo-hero__nav{ opacity:0; }
  .jo-hero:hover .jo-hero__nav,
  .jo-hero__nav:focus-visible{ opacity:1; }
}
@media (max-width:640px){
  .jo-hero__nav{ width:42px; height:42px; background:rgba(255,253,250,.78); }
  .jo-hero__nav svg{ width:19px; height:19px; }
}

/* ---------- swipe must not cost her the page scroll ----------
   pan-y leaves vertical scrolling to the browser and gives us the
   horizontal axis, so a swipe changes the slide and a flick still scrolls
   the page. */
.jo-hero{ touch-action:pan-y; }
.jo-hero__slide{ touch-action:pan-y; }

/* ---------- cleaner cross-fade ----------
   Both slides were readable at once during the change, which is what the
   double-exposure looks like. The incoming slide sits above and arrives a
   little slower than the outgoing one leaves, so they never share the
   frame at equal strength. */
.jo-hero__slide{ z-index:1; }
.jo-hero__slide.is-on{ z-index:2; }
.jo-hero__slide:not(.is-on){
  transition:opacity .28s var(--e), visibility 0s linear .28s !important;
}
.jo-hero__slide.is-on{
  transition:opacity .5s var(--e), visibility 0s !important;
}

/* a drag should never leave text selected behind it */
.jo-hero.is-dragging{ user-select:none; cursor:grabbing; }


/* ---------- sale mark ----------
   A hard black square with tracked uppercase belongs on a sportswear site.
   Here it is a small gold pill carrying the actual percentage, which is
   information rather than decoration. */
/* The wishlist heart already owns the inline-end corner. Putting the sale
   pill there too stacked one on the other. Opposite corner. */
.jo-card__tag{
  inset-block-start:12px !important;
  inset-inline-start:12px !important;
  inset-inline-end:auto !important;
  background:var(--gold) !important;
  color:#fff !important;
  border-radius:99px !important;
  padding:5px 11px !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  line-height:1.2;
  box-shadow:0 4px 12px -6px rgba(26,22,19,.45);
}
.jo-card__tag.is-out{
  background:rgba(255,253,250,.94) !important;
  color:var(--ink-2) !important;
  border:1px solid var(--line);
  box-shadow:none;
}


/* ==========================================================================
   CATEGORY BROWSER
   Fourteen categories in a flat grid is a list to get through. Three
   parents, and the children appear only once she has chosen one — two
   decisions instead of one long scan.
   ========================================================================== */
.jo-browse{ padding-block:clamp(36px,5vw,72px); }
.jo-browse__hd{ text-align:center; margin-block-end:clamp(22px,2.6vw,34px); }
.jo-browse__hd .jo-sec__t{ margin:6px 0 0; }

.jo-browse__row{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(12px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.jo-browse__i{ min-width:0; }

.jo-browse__card{
  position:relative; display:block; width:100%;
  padding:0; margin:0; border:0; background:none;
  text-align:start; cursor:pointer;
  border-radius:var(--r); overflow:hidden;
  isolation:isolate;
}
.jo-browse__img{
  display:block; aspect-ratio:5/6; overflow:hidden;
  background:var(--cream); border-radius:var(--r);
}
.jo-browse__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--e), filter .5s var(--e);
}
.jo-browse__card:hover .jo-browse__img img{ transform:scale(1.045); }

/* the name sits on the image, over a wash that only darkens the lower third */
.jo-browse__card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(to top, rgba(20,17,14,.62), rgba(20,17,14,.14) 55%, transparent);
  pointer-events:none; z-index:1;
  transition:opacity .4s var(--e);
}
.jo-browse__meta{
  position:absolute; inset-inline:0; inset-block-end:0; z-index:2;
  display:grid; gap:2px; padding:clamp(14px,1.8vw,22px);
  color:#fff;
}
.jo-browse__n{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(18px,1.7vw,23px); line-height:1.25;
}
.jo-browse__c{ font-size:12.5px; color:rgba(255,255,255,.78); }

.jo-browse__more{
  position:absolute; inset-block-start:14px; inset-inline-end:14px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,253,250,.9); color:var(--ink);
  transition:transform .3s var(--e), background .25s var(--e);
}
.jo-browse__more .jo-i{ width:17px; height:17px; }
.jo-browse__card[aria-expanded=true] .jo-browse__more{
  transform:rotate(180deg); background:var(--gold); color:#fff;
}
.jo-browse__card[aria-expanded=true] .jo-browse__img img{ filter:saturate(1.06); }

/* ---------- the panel ---------- */
.jo-browse__panel{
  margin-block-start:clamp(12px,1.8vw,22px);
  overflow:hidden;
}
.jo-browse__panel[hidden]{ display:none; }

.jo-browse__kids{
  list-style:none; margin:0; padding:clamp(16px,2.2vw,26px);
  background:linear-gradient(160deg,var(--blush),var(--cream));
  border:1px solid var(--line); border-radius:var(--r);
  display:grid; gap:clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.jo-browse__kids a{ display:grid; gap:9px; }
.jo-browse__kimg{
  display:block; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--r-sm); background:var(--paper);
}
.jo-browse__kimg img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--e);
}
.jo-browse__kids a:hover .jo-browse__kimg img{ transform:scale(1.05); }
.jo-browse__kn{
  font-size:14px; line-height:1.35; color:var(--ink);
  display:flex; align-items:center; gap:6px;
}
.jo-browse__kc{ font-size:12px; color:var(--mute); }

.jo-browse__all a{
  height:100%; align-content:center; justify-items:center; text-align:center;
  border:1px dashed var(--gold-2); border-radius:var(--r-sm);
  padding:16px 12px; gap:6px;
  transition:background .25s var(--e), border-color .25s var(--e);
}
.jo-browse__all a:hover{ background:var(--paper); border-color:var(--gold); }
.jo-browse__all .jo-i{ width:18px; height:18px; color:var(--gold); }
[dir=rtl] .jo-browse__all .jo-i{ transform:scaleX(-1); }

/* each child fades up in turn, so the panel opens rather than appears */
.jo-browse__panel.is-open .jo-browse__kids > li{
  animation:jo-kid-in .42s var(--e) both;
}
.jo-browse__panel.is-open .jo-browse__kids > li:nth-child(1){ animation-delay:.02s; }
.jo-browse__panel.is-open .jo-browse__kids > li:nth-child(2){ animation-delay:.05s; }
.jo-browse__panel.is-open .jo-browse__kids > li:nth-child(3){ animation-delay:.08s; }
.jo-browse__panel.is-open .jo-browse__kids > li:nth-child(4){ animation-delay:.11s; }
.jo-browse__panel.is-open .jo-browse__kids > li:nth-child(5){ animation-delay:.14s; }
.jo-browse__panel.is-open .jo-browse__kids > li:nth-child(6){ animation-delay:.17s; }
.jo-browse__panel.is-open .jo-browse__kids > li:nth-child(n+7){ animation-delay:.2s; }
@keyframes jo-kid-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

@media (max-width:640px){
  .jo-browse__row{ grid-template-columns:1fr 1fr; gap:10px; }
  .jo-browse__img{ aspect-ratio:4/5; }
  .jo-browse__kids{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .jo-browse__kn{ font-size:13px; }
}
@media (prefers-reduced-motion: reduce){
  .jo-browse__panel.is-open .jo-browse__kids > li{ animation:none; }
}


/* ---------- live viewers ----------
   The only signal on the page that is happening right now, so it gets a
   live dot. Both urgency lines can be on screen at once, so they need to
   sit apart rather than collapse into each other. */
.jo-buy__avail{ display:grid; gap:8px; }
.jo-urg{ margin:0 !important; }
.jo-urg.is-live{
  background:var(--cream);
  color:var(--ink-2);
}
.jo-urg.is-live strong{ color:var(--ink); }
.jo-dot{
  display:inline-block; flex:none;
  width:7px; height:7px; border-radius:50%;
  background:var(--good);
  box-shadow:0 0 0 3px rgba(28,106,69,.16);
  animation:jo-pulse 1.9s infinite;
}
@media (prefers-reduced-motion: reduce){
  .jo-dot{ animation:none; }
}


/* ==========================================================================
   CLAMPED PROSE
   The description is open by default — a collapsed section reads as though
   there is nothing to say — but capped at roughly six lines and faded, so
   it never pushes the price and the CTA off the screen.
   ========================================================================== */
.jo-clamp{
  --lines:6;
  position:relative;
  max-height:calc(var(--lines) * 1.85em);
  overflow:hidden;
  transition:max-height .42s var(--e);
}
.jo-clamp::after{
  content:"";
  position:absolute; inset-inline:0; inset-block-end:0;
  height:4.6em; pointer-events:none;
  background:linear-gradient(to top, var(--paper) 12%, rgba(255,253,250,.85) 45%, transparent);
  opacity:1; transition:opacity .3s var(--e);
}
.jo-clamp.is-open{ max-height:none; }
.jo-clamp.is-open::after{ opacity:0; }
.jo-clamp.is-measuring{ max-height:none !important; }

/* nothing to hide — no fade, no control */
.jo-clamp.is-short{ max-height:none; }
.jo-clamp.is-short::after{ content:none; }

.jo-clamp__btn{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; padding:0;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--ink);
}
.jo-clamp__btn span{
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--gold-2);
  transition:text-decoration-color .2s var(--e);
}
.jo-clamp__btn:hover span{ text-decoration-color:var(--gold); }
.jo-clamp__btn .jo-i{
  width:15px; height:15px; color:var(--gold);
  transition:transform .3s var(--e);
}
.jo-clamp__btn[aria-expanded=true] .jo-i{ transform:rotate(180deg); }

@media (prefers-reduced-motion: reduce){
  .jo-clamp{ transition:none; }
}


/* ---------- a button is never a prose link ----------
   Whatever container it lands in, a button keeps its own colours. This is
   the safety net for the dark-on-dark the empty cart was showing. */
a.jo-btn,
.jo-btn,
.woocommerce a.button,
.woocommerce button.button{
  text-decoration:none !important;
}
a.jo-btn:not(.jo-btn--ghost):not(.jo-btn--go),
.jo-btn:not(.jo-btn--ghost):not(.jo-btn--go){
  color:var(--paper) !important;
}
.jo-btn--ghost{ color:var(--ink) !important; }
.jo-btn--ghost:hover{ color:var(--paper) !important; }
.jo-btn--go{ color:var(--paper) !important; }


/* Belt and braces: if any build still manages to print the bubble, it does
   not get to sit over the buy bar. */
.ht-ctc, .ht-ctc-chat, #ht-ctc-chat, .ht_ctc_chat_style, .ctc-analytics{
  display:none !important;
}


/* ==========================================================================
   COLOUR SWATCHES ON THE CARD
   A variable product shows one photograph in a grid, so its other colours
   stay invisible unless she opens it — and most never do.

   The row lives inside .jo-card__media, which has a fixed aspect ratio, so
   it anchors to the bottom of the photograph at every width. The first
   version hung off the card with a guessed 92px offset for the text below,
   which was never going to hold on a phone.
   ========================================================================== */
.jo-cardsw{
  position:absolute; z-index:3;
  inset-block-end:10px;
  inset-inline-start:10px;
  display:flex; align-items:center; gap:2px;
  max-width:calc(100% - 20px);
  padding:4px 6px;
  background:rgba(255,253,250,.92);
  backdrop-filter:blur(4px);
  border-radius:99px;
  box-shadow:0 4px 14px -8px rgba(26,22,19,.4);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
}
.jo-cardsw::-webkit-scrollbar{ display:none; }

.jo-cardsw__b{
  flex:none;
  width:32px; height:32px; padding:0; margin:0;
  border:0; background:none; cursor:pointer; border-radius:50%;
  display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.jo-cardsw__b span{
  display:block; width:15px; height:15px; border-radius:50%;
  background:var(--sw,#ddd);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  transition:transform .2s var(--e), box-shadow .2s var(--e);
}
.jo-cardsw__b:hover span,
.jo-cardsw__b:focus-visible span{ transform:scale(1.15); }
.jo-cardsw__b.is-on span{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px var(--paper), 0 0 0 3.5px var(--gold);
}

.jo-cardsw__n{
  position:absolute; z-index:3;
  inset-block-end:16px; inset-inline-end:12px;
  font-size:11px; color:var(--ink-2);
  background:rgba(255,253,250,.92);
  padding:3px 9px; border-radius:99px;
  pointer-events:none;
}

/* ---------- with a mouse ----------
   Quiet until she looks at the card, and the count stands in for the row
   until then. */
@media (hover:hover) and (pointer:fine){
  .jo-cardsw{
    opacity:0; transform:translateY(4px); pointer-events:none;
    transition:opacity .28s var(--e), transform .28s var(--e);
  }
  .jo-card:hover .jo-cardsw,
  .jo-cardsw:focus-within{ opacity:1; transform:none; pointer-events:auto; }
  .jo-card:hover .jo-cardsw__n{ opacity:0; }
  .jo-cardsw__n{ transition:opacity .28s var(--e); }
}

/* ---------- on a phone ----------
   There is no hover to reveal anything, so the colours are simply there.
   Targets go to 44px, the row scrolls sideways rather than overflowing the
   card, and the separate count is redundant once the dots are visible. */
@media (hover:none), (pointer:coarse){
  .jo-cardsw{
    opacity:1; transform:none; pointer-events:auto;
    inset-block-end:8px; inset-inline-start:8px;
    max-width:calc(100% - 16px);
    gap:0; padding:3px 5px;
  }
  .jo-cardsw__b{ width:44px; height:44px; }
  .jo-cardsw__b span{ width:17px; height:17px; }
  .jo-cardsw__n{ display:none; }
}

/* two-up grids leave little room, so shrink the furniture rather than the
   tap target */
@media (max-width:520px){
  .jo-cardsw{ inset-block-end:6px; inset-inline-start:6px; padding:2px 4px; }
  .jo-cardsw__b{ width:40px; height:40px; }
  .jo-cardsw__b span{ width:16px; height:16px; }
}

.jo-card__img{ transition:opacity .25s var(--e); }
.jo-card.is-swapping .jo-card__img{ opacity:.35; }


/* ==========================================================================
   LOGO SHIMMER
   One soft highlight travelling across the wordmark, then a long pause.

   Two background layers, and the order matters. The first is the sheen and
   it moves; the second is flat ink and it never does. The first attempt
   used a single moving gradient as the text's only colour, so once it slid
   past there was no background left under part of the wordmark — and with
   text-fill-color:transparent that half simply vanished. The base layer
   means the letters are always painted whatever the sheen is doing.
   ========================================================================== */
.jo-hd .jo-logo__m{
  background-image:
    linear-gradient(100deg,
      rgba(255,255,255,0) 42%,
      rgba(224,196,138,.85) 48%,
      rgba(255,246,224,.95) 50%,
      rgba(224,196,138,.85) 52%,
      rgba(255,255,255,0) 58%),
    linear-gradient(var(--ink), var(--ink));
  background-size:260% 100%, 100% 100%;
  background-position:135% 0, 0 0;
  background-repeat:no-repeat, no-repeat;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:jo-sheen 6s cubic-bezier(.45,0,.25,1) infinite;
}

@keyframes jo-sheen{
  0%   { background-position:135% 0, 0 0; }
  /* The sweep itself still takes about a second; the rest of the six is
     the pause. Keeping the pass the same speed and shortening only the
     gap is what makes it read as more frequent rather than faster. */
  17%  { background-position:-35% 0, 0 0; }
  100% { background-position:-35% 0, 0 0; }
}

/* No clip support, or motion turned down: plain ink, fully opaque. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .jo-hd .jo-logo__m{
    background:none; color:var(--ink);
    -webkit-text-fill-color:currentColor; animation:none;
  }
}
@media (prefers-reduced-motion: reduce){
  .jo-hd .jo-logo__m{
    animation:none;
    background:none; color:var(--ink);
    -webkit-text-fill-color:currentColor;
  }
}


/* ---------- welcome offer ---------- */
.jo-welc{
  margin:0 0 18px; padding:13px 15px;
  background:var(--paper); border:1px solid var(--gold-2);
  border-radius:var(--r);
}
.jo-welc__t{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.jo-welc__t strong{ color:var(--gold); font-weight:800; }
.jo-welc__s{ margin:5px 0 0; font-size:11.5px; color:var(--mute); }


/* ---------- shop screens keep their own layout ----------
   The generic page styling is for terms, about and shipping. Nothing it
   sets should reach a cart, a checkout or an account, which bring their
   own grids and their own type. */
.woocommerce-page .jo-page,
.woocommerce-cart .jo-page,
.woocommerce-checkout .jo-page,
.woocommerce-account .jo-page{
  padding-block-start:clamp(24px,3vw,44px);
}
.woocommerce-page .jo-entry__b > *:first-child{ margin-top:0; }
.woocommerce-page .jo-entry__b p,
.woocommerce-account .jo-entry__b p,
.woocommerce-checkout .jo-entry__b p{ margin:0 0 1em; }
.woocommerce-page .jo-entry__b ul,
.woocommerce-page .jo-entry__b ol{ padding-inline-start:0; margin:0; }
.woocommerce-page .jo-entry__b li{ margin-bottom:0; }
.woocommerce-page .jo-entry__b li::marker{ color:transparent; }


/* ---------- read more sits under the middle of the text ---------- */
.jo-clamp__btn{
  display:flex; margin-inline:auto; justify-content:center;
}

/* ==========================================================================
   WHY BUY FROM US
   Four thin outlines over four paragraphs of grey, all the same weight, in
   a band the eye slides straight past. Background kept; everything on top
   of it rebuilt as cards with a real hierarchy — the promise first, the
   detail underneath, and the icon given a disc so it reads as a mark
   rather than a hairline.
   ========================================================================== */
.jo-why{ padding-block:clamp(40px,5vw,72px) !important; }
.jo-why .jo-sec__t{ margin-bottom:clamp(24px,3vw,40px) !important; }

.jo-why__grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
  gap:clamp(12px,1.6vw,20px) !important;
  max-width:var(--wrap); margin-inline:auto;
}

.jo-why__grid li{
  text-align:start !important;
  display:grid; align-content:start; gap:8px;
  padding:clamp(20px,2.2vw,26px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .25s var(--e), box-shadow .25s var(--e), transform .25s var(--e);
}
.jo-why__grid li:hover{
  border-color:var(--gold-2);
  box-shadow:0 14px 30px -24px rgba(26,22,19,.5);
  transform:translateY(-2px);
}

.jo-why__grid .jo-i{
  width:20px !important; height:20px !important;
  margin:0 !important;
  color:var(--gold) !important;
  stroke-width:1.6 !important;
}
.jo-why__grid li > .jo-i,
.jo-why__grid li > span:first-child{
  display:grid; place-items:center;
  width:44px; height:44px; box-sizing:content-box;
  padding:0; margin-bottom:4px !important;
  background:linear-gradient(160deg,var(--blush),var(--cream));
  border-radius:50%;
}

.jo-why__grid h3{
  font-size:15.5px !important; font-weight:700 !important;
  color:var(--ink); margin:0 !important; line-height:1.35;
}
.jo-why__grid p{
  font-size:13.5px !important; line-height:1.65 !important;
  color:var(--ink-2); margin:0 !important;
  text-wrap:pretty;
}

@media (max-width:640px){
  .jo-why__grid{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .jo-why__grid li{ padding:16px 14px; }
  .jo-why__grid li > .jo-i,
  .jo-why__grid li > span:first-child{ width:36px; height:36px; }
  .jo-why__grid h3{ font-size:14px !important; }
  .jo-why__grid p{ font-size:12.5px !important; }
}
@media (max-width:400px){
  .jo-why__grid{ grid-template-columns:1fr !important; }
}


/* ---------- hover intent on the card ----------
   The second photograph appeared the instant the cursor crossed the card,
   so dragging the mouse over a grid flickered every image on the way past.
   A delay before it starts means a pass-through never triggers it, and
   only a deliberate pause does. Leaving snaps back with no delay, so it
   never feels sticky. */
.jo-card__img--hov{
  transition:opacity .42s var(--e);
  transition-delay:0s;
}
.jo-card:hover .jo-card__img--hov{
  transition-delay:.22s;
}
.jo-card__img:not(.jo-card__img--hov){
  transition:opacity .25s var(--e);
}

/* colours with no photograph of their own still mark themselves */
.jo-cardsw__b.has-no-img span{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }


/* ==========================================================================
   PRODUCT RAILS — cross-sell and recently viewed
   Both were rendering as default-looking rows: mismatched photograph
   heights on white boxes, titles at body weight, prices smaller than the
   names, and no hover. They sit at the end of the page where the argument
   is already made, so they have to look like part of the shop rather than
   like a plugin.
   ========================================================================== */

/* ---------- shared frame ---------- */
.jo-xsell.jo-wrap .jo-xsell__row a,
.jo-seen__row li a{
  display:grid; gap:10px;
  align-content:start;
}

.jo-xsell.jo-wrap .jo-xsell__row img,
.jo-seen__row img{
  width:100%; height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  background:var(--cream);
  border-radius:var(--r);
  padding:9%;
  transition:transform .7s var(--e), background .3s var(--e);
}
.jo-xsell.jo-wrap .jo-xsell__row a:hover img,
.jo-seen__row li a:hover img{
  transform:scale(1.04);
  background:var(--blush);
}

/* ---------- cross-sell ---------- */
.jo-xsell.jo-wrap{
  padding-block:clamp(34px,4vw,56px) 0;
}
.jo-xsell.jo-wrap .jo-sec__t{ margin-bottom:clamp(20px,2.4vw,30px); }
.jo-xsell.jo-wrap .jo-xsell__n{
  display:block; margin:0;
  font-size:14px; line-height:1.4; color:var(--ink);
  text-align:center;
}
.jo-xsell.jo-wrap .jo-xsell__p{
  display:block; margin:0;
  font-size:14.5px; font-weight:700; color:var(--ink);
  text-align:center;
}
.jo-xsell.jo-wrap .jo-xsell__p del{
  font-weight:400; color:var(--mute); font-size:13px; margin-inline-start:6px;
}
.jo-xsell.jo-wrap .jo-xsell__p ins{ text-decoration:none; }

/* ---------- recently viewed ----------
   Was a small right-aligned strip that looked like a leftover. Same grid
   as the cross-sell above it, so the page ends on two matched rows rather
   than one designed section and one afterthought. */
.jo-seen{
  padding-block:clamp(30px,4vw,54px) clamp(40px,5vw,72px) !important;
  border-top:1px solid var(--line-2);
}
.jo-seen > .jo-wrap{ max-width:var(--wrap); margin-inline:auto; }
.jo-seen__t{
  font-family:var(--f-disp) !important;
  font-size:clamp(18px,1.8vw,24px) !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  text-align:center;
  margin-bottom:clamp(18px,2.2vw,26px) !important;
}
.jo-seen__row{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:clamp(12px,1.8vw,24px) !important;
  overflow:visible !important;
  padding:0 !important;
}
.jo-seen__row li{ flex:none !important; min-width:0; }
.jo-seen__n{
  display:block; margin-top:0 !important;
  font-size:14px; line-height:1.4; color:var(--ink);
  text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.jo-seen__p{
  display:block; margin-top:0 !important;
  font-size:14.5px !important; font-weight:700; color:var(--ink);
  text-align:center;
}
.jo-seen__p del{ font-weight:400; color:var(--mute); font-size:13px; margin-inline-start:6px; }
.jo-seen__p ins{ text-decoration:none; }

@media (max-width:900px){
  .jo-seen__row{ grid-template-columns:repeat(3,1fr) !important; }
  .jo-xsell.jo-wrap .jo-xsell__row{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .jo-seen__row{ grid-template-columns:repeat(2,1fr) !important; }
  .jo-seen__n, .jo-xsell.jo-wrap .jo-xsell__n{ font-size:13px; }
  .jo-seen__p, .jo-xsell.jo-wrap .jo-xsell__p{ font-size:13.5px !important; }
}


/* ---------- payment marks need air above them ----------
   They were sitting tight under the assurance grid, so the two blocks read
   as one crowded lump. The marks are a closing reassurance, not another
   row of the list above. */
.jo-sum .jo-pay,
.jo-buy .jo-pay,
.jo-assure + .jo-pay,
.jo-acct .jo-pay{
  margin-block-start:clamp(16px,2vw,22px) !important;
  padding-block-start:clamp(14px,1.6vw,18px);
  border-top:1px solid var(--line);
  justify-content:center;
}
.jo-sum .jo-assure{ padding-bottom:0 !important; }


/* ==========================================================================
   FREE-SHIPPING METER
   The completed state was a mint panel with a pharmacy-green bar — a
   system colour, and the loudest thing on the page at the moment it fires.
   Reaching free shipping is a small pleasure, not an alert: warm ground,
   gold bar, the brand's own deep green kept only for the tick.
   ========================================================================== */
.jo-meter{
  background:var(--cream) !important;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:13px 16px !important;
}
.jo-meter__t{ color:var(--ink-2); font-size:12.5px !important; }
.jo-meter__t strong{ color:var(--ink); }
.jo-meter__bar{
  height:4px !important;
  background:var(--sand) !important;
  border-radius:99px; overflow:hidden;
}
.jo-meter__bar span{
  background:linear-gradient(90deg, var(--gold-2), var(--gold)) !important;
  border-radius:99px;
}

.jo-meter.is-done{
  background:linear-gradient(160deg,var(--blush),var(--cream)) !important;
  border-color:var(--gold-2);
}
.jo-meter.is-done .jo-meter__t{
  color:var(--ink) !important;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.jo-meter.is-done .jo-meter__t strong{ color:var(--gold); font-weight:800; }
.jo-meter.is-done .jo-meter__t::before{
  content:""; width:15px; height:15px; flex:none;
  background:var(--good);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.jo-meter.is-done .jo-meter__bar{ background:rgba(156,118,57,.18) !important; }
.jo-meter.is-done .jo-meter__bar span{
  background:linear-gradient(90deg, var(--gold-2), var(--gold)) !important;
}


/* ---------- gift wrap, beside the button it belongs to ---------- */
.jo-sum .jo-giftrow,
.jo-sum .jo-gift{
  margin:14px 0 0 !important;
  padding:13px 15px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  display:flex; align-items:center; gap:11px;
  font-size:13px; line-height:1.5; color:var(--ink-2);
  cursor:pointer;
  transition:border-color .22s var(--e), background .22s var(--e);
}
.jo-sum .jo-giftrow:hover,
.jo-sum .jo-gift:hover{ border-color:var(--gold-2); background:var(--blush); }
.jo-sum .jo-giftrow strong,
.jo-sum .jo-gift strong{ color:var(--ink); }
.jo-sum .jo-giftrow input[type=checkbox],
.jo-sum .jo-gift input[type=checkbox]{
  width:18px; height:18px; flex:none; accent-color:var(--gold); cursor:pointer;
}


/* ---------- checkout trust row, now beside the order ---------- */
.jo-co__side .jo-co__trust{
  list-style:none; margin:0 0 14px; padding:14px 16px;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  text-align:center;
}
.jo-co__side .jo-co__trust li{ display:grid; gap:2px; justify-items:center; }
.jo-co__side .jo-co__trust .jo-i{ width:18px; height:18px; color:var(--gold); margin-bottom:2px; }
.jo-co__side .jo-co__trust b{ font-size:12px; color:var(--ink); line-height:1.3; }
.jo-co__side .jo-co__trust span{ font-size:11px; color:var(--mute); }

@media (max-width:900px){
  .jo-co__side .jo-co__trust{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:420px){
  .jo-co__side .jo-co__trust{ padding:12px; gap:8px; }
  .jo-co__side .jo-co__trust b{ font-size:11px; }
  .jo-co__side .jo-co__trust span{ display:none; }
}

/* the old full-width version is gone from the top of the page */
.jo-co > .jo-co__trust{ display:none; }


/* ---------- an icon that leads a sentence stays on its line ----------
   The reset sets svg{display:block}, which is right for photographs and
   wrong for an icon sitting in front of a line of text — the shield was
   breaking onto a line of its own above the sentence it belongs to. */
/* Note: .jo-secure is used by two different components. The PCI strip in
   the footer is a flex COLUMN of a title, a badge and card marks; only the
   one-line variety — a paragraph with an icon in front of a sentence —
   should become a row. :has() keeps them apart. */
p.jo-secure,
.jo-secure:not(:has(.jo-secure__badge)):not(:has(.jo-secure__marks)),
.jo-sum__note,
.jo-paynote,
.jo-co__note{
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:7px; flex-wrap:wrap;
  text-align:center;
}
p.jo-secure .jo-i,
.jo-secure:not(:has(.jo-secure__badge)) .jo-i,
.jo-sum__note .jo-i,
.jo-paynote .jo-i,
.jo-co__note .jo-i{
  display:inline-block; flex:none;
  width:15px; height:15px;
  color:var(--gold);
  vertical-align:middle;
}


/* ==========================================================================
   CHECKOUT — rebuilt

   What was wrong: a bare form floating beside a tinted card, so the two
   halves did not belong to the same page. A badge strip bolted on above
   the card with a gap. Dead space at the top of the summary. Tracked-out
   Hebrew in the headings. Labels whispering above wide flat inputs with
   nothing marking one group from the next.

   This is the last screen before money changes hands. It should feel like
   the calmest page on the site, not the least finished.
   ========================================================================== */

.jo-co{ padding-block:clamp(26px,3.4vw,48px) clamp(56px,7vw,110px) !important; }

.jo-co__grid{
  grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) !important;
  gap:clamp(20px,3vw,44px) !important;
  align-items:start !important;
}

/* ---------- the form is a panel, not loose text on the page ---------- */
.jo-co__main{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(20px,2.6vw,34px);
}

.jo-co__main h3,
.jo-co__main .woocommerce-billing-fields > h3,
.jo-co__main .woocommerce-shipping-fields > h3,
.jo-co__main #order_review_heading{
  font-family:var(--f-ui) !important;
  font-size:clamp(17px,1.5vw,20px) !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  color:var(--ink) !important;
  margin:0 0 4px !important;
  padding:0 !important;
  border:0 !important;
}
.jo-co__main .woocommerce-billing-fields::before{
  content:"פרטים ליצירת קשר ומשלוח";
  display:block; font-size:12.5px; color:var(--mute);
  margin-bottom:18px;
}
.jo-co__main .woocommerce-billing-fields > h3{ margin-bottom:2px !important; }

/* ---------- fields ---------- */
.woocommerce form .form-row{
  margin-bottom:16px !important;
  display:grid; gap:6px;
}
.woocommerce form .form-row label{
  font-size:12.5px !important; font-weight:600 !important;
  color:var(--ink-2) !important; margin:0 !important;
}
.woocommerce form .form-row .required{ color:var(--warn); text-decoration:none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  height:52px !important; min-height:52px;
  padding:0 15px !important;
  font-size:15.5px !important;
  color:var(--ink) !important;
  background:var(--paper) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  transition:border-color .2s var(--e), box-shadow .2s var(--e), background .2s var(--e);
}
.woocommerce form .form-row textarea{ height:auto !important; padding:13px 15px !important; }
.woocommerce form .form-row input.input-text:hover{ border-color:#ddd4c7 !important; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:none !important;
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(156,118,57,.13) !important;
  background:var(--paper) !important;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text{
  border-color:#d9b5ae !important; background:#fdf7f5 !important;
}
.woocommerce form .form-row.woocommerce-validated input.input-text{ border-color:#cfd9cf !important; }

/* city and phone read better side by side than stacked full width */
@media (min-width:620px){
  .woocommerce form #customer_details .form-row-first,
  .woocommerce form #customer_details .form-row-last{
    width:calc(50% - 8px) !important;
    display:inline-grid !important; vertical-align:top;
  }
  .woocommerce form #customer_details .form-row-first{ margin-inline-end:16px !important; }
}

/* ---------- the summary ---------- */
.jo-co__side .jo-sum{
  padding:clamp(18px,2.2vw,26px) !important;
  border-radius:var(--r) !important;
  border:1px solid var(--line) !important;
  background:var(--cream) !important;
}
.jo-co__side .jo-sum h2{
  font-family:var(--f-ui) !important;
  font-size:clamp(16px,1.4vw,19px) !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-align:start !important;
  margin:0 0 14px !important;
  padding:0 0 12px !important;
  border-bottom:1px solid var(--line) !important;
}

/* badges tuck onto the summary instead of floating above it */
.jo-co__side .jo-co__trust{
  margin:0 0 12px !important;
  border-radius:var(--r) !important;
}

/* ---------- review table ---------- */
.woocommerce-checkout-review-order-table th{
  font-size:11.5px !important; font-weight:700 !important;
  letter-spacing:.02em; color:var(--mute) !important;
  padding:0 0 8px !important; border-bottom:1px solid var(--line) !important;
}
.woocommerce-checkout-review-order-table td{
  padding:12px 0 !important; font-size:14px; color:var(--ink-2);
  border-bottom:1px solid var(--line-2) !important;
}
.woocommerce-checkout-review-order-table .product-name{ color:var(--ink); line-height:1.45; }
.woocommerce-checkout-review-order-table .product-total{ font-weight:700; color:var(--ink); }
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td{
  border-bottom:0 !important; padding:9px 0 !important; font-size:14px;
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td{
  padding-top:13px !important;
  border-top:1px solid var(--line) !important;
  font-size:17px !important; font-weight:800 !important; color:var(--ink) !important;
}

/* ---------- the button ---------- */
.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order{
  width:100% !important;
  min-height:58px !important;
  border-radius:999px !important;
  font-size:15.5px !important; font-weight:700 !important;
  margin-top:6px !important;
}
.woocommerce-checkout #payment{
  background:transparent !important; border-radius:0 !important; padding:0 !important;
}
.woocommerce-checkout #payment ul.payment_methods{
  background:var(--paper) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  padding:10px 12px !important; margin:14px 0 !important;
}
.woocommerce-checkout #payment div.form-row{ padding:0 !important; }
.woocommerce-checkout #payment .payment_box{
  background:var(--cream) !important; border-radius:var(--r-sm) !important;
  font-size:13px; margin:8px 0 0 !important;
}
.woocommerce-checkout #payment .payment_box::before{ display:none !important; }

@media (max-width:900px){
  .jo-co__grid{ grid-template-columns:1fr !important; }
  .jo-co__side{ order:1; }   /* address first, then the summary and the pay button */
  .jo-co__main{ padding:18px 16px; }
}

/* ==========================================================================
   HEADER, two rows on desktop: the wordmark centred above a centred menu.
   Nine categories cannot share one row with a centred logo without the
   menu running into it; the classic stacked layout holds them all.
   ========================================================================== */
@media (min-width:900px){
  .jo-hd__in{
    height:auto !important; min-height:0 !important;
    grid-template-columns:1fr auto 1fr !important;
    grid-template-areas:"navside logo act" "nav nav nav" !important;
    row-gap:0; padding-top:14px;
  }
  .jo-hd__navside{ grid-area:navside; }
  .jo-logo{ grid-area:logo; padding-bottom:2px; }
  .jo-hd__act{ grid-area:act; }
  .jo-nav{ grid-area:nav; justify-self:center; min-width:0; padding:10px 0 12px; }
  .jo-nav__ul{ gap:clamp(16px,2vw,30px); flex-wrap:wrap; justify-content:center; }
  .jo-nav__ul > li > a{ font-size:13.5px; letter-spacing:.08em; white-space:nowrap; }
}
@media (min-width:900px){ :root{ --hd:118px; } }   /* stacked header height, for sticky offsets */

/* Flatsome leftovers rendered as plain layout */
.jo-ux--row{ display:grid; gap:28px; margin:8px 0 18px; }
@media (min-width:820px){ .jo-ux--row{ grid-template-columns:repeat(12,1fr); } .jo-ux--col{ grid-column:span var(--span,12); } }
.jo-ux__t{ font-family:var(--f-disp); font-size:20px; margin:0 0 12px; }
.jo-ux__gap{ height:18px; }
.jo-ux .wpcf7 input:not([type=submit]), .jo-ux .wpcf7 textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; font:inherit; background:#fff; margin:0 0 12px;
}
.jo-ux .wpcf7 input[type=submit]{ background:var(--ink); color:var(--paper); border:0; border-radius:99px; padding:13px 26px; font:inherit; font-weight:600; cursor:pointer; }
.jo-ux .wpcf7 label{ display:block; font-size:13.5px; color:var(--mute); margin-bottom:4px; }

/* Mobile hero: arrows sit on the photograph, not on the copy */
@media (max-width:899px){
  .jo-hero__nav{ top:calc(100vw * 3 / 4 - 26px); transform:none; }
  .jo-hero__nav:active{ transform:scale(.97); }
}

/* search results + 404 */
.jo-results__hd{ text-align:center; padding:8px 0 28px; }
.jo-results__form{ display:flex; gap:10px; max-width:560px; margin:18px auto 0; }
.jo-results__form input{ flex:1; border:1px solid var(--line); border-radius:99px; padding:13px 20px; font:inherit; background:#fff; }
.jo-results__t{ font-family:var(--f-disp); font-size:22px; margin:0 0 18px; }
.jo-results__posts{ list-style:none; padding:0; margin:0; display:grid; gap:14px; max-width:720px; }
.jo-results__posts a{ font-weight:600; color:var(--ink); }
.jo-results__posts span{ display:block; color:var(--mute); font-size:14px; margin-top:2px; }
.jo-404{ text-align:center; padding-bottom:40px; }
.jo-404__lede{ color:var(--mute); max-width:44ch; margin:6px auto 0; }
.jo-404__home{ margin-top:28px; }
.jo-catlinks{ list-style:none; padding:0; margin:22px auto 0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.jo-catlinks a{ display:inline-block; padding:9px 16px; border:1px solid var(--line); border-radius:99px; color:var(--ink); font-size:14px; }
.jo-catlinks a:hover{ background:var(--cream); }

/* retired product: the new range takes the buy button's place */
.jo-instead{ margin:18px 0 22px; padding:20px 18px 18px; background:var(--cream); border-radius:var(--r); }
.jo-instead__t{ font-family:var(--f-disp); font-size:19px; margin:2px 0 14px; }
.jo-instead__grid.products{ display:grid !important; grid-template-columns:repeat(2,1fr); gap:12px; margin:0; }
.jo-instead__grid .jo-card__t{ font-size:13px; }
.jo-instead__all{ margin-top:14px; width:100%; text-align:center; }

/* gold-filled band on the home page */
.jo-gold{ display:grid; grid-template-columns:minmax(0,50%) minmax(0,50%); align-items:center; background:var(--cream); margin:clamp(30px,4vw,60px) 0 0; }
.jo-gold__img{ height:100%; min-height:320px; }
.jo-gold__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.jo-gold__in{ max-width:560px; margin-inline:auto; padding:clamp(40px,5vw,80px) var(--gut); }
.jo-gold h2{ font-family:var(--f-disp); font-size:clamp(28px,3.2vw,42px); font-weight:400; margin:6px 0 16px; }
.jo-gold__lede{ color:var(--ink-2); line-height:1.9; margin-bottom:22px; }
.jo-gold__pts{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:12px; }
.jo-gold__pts li{ display:flex; gap:10px; align-items:flex-start; line-height:1.6; }
.jo-gold__pts .jo-i{ width:18px; height:18px; color:var(--gold, #b8913a); flex:none; margin-top:4px; }
@media (max-width:820px){ .jo-gold{ grid-template-columns:1fr; } .jo-gold__img{ min-height:0; aspect-ratio:4/3; } }


/* ==========================================================================
   Conversion pass (design review): trust strip, thumbs on mobile, card CTA,
   shipping line, bigger hero
   ========================================================================== */
.jo-promo__row{ list-style:none; margin:0 auto; padding:0; display:flex; justify-content:center; gap:clamp(14px,3vw,44px); max-width:var(--wrap); }
.jo-promo__row li{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.jo-promo__row .jo-i{ width:15px; height:15px; color:var(--gold-2); flex:none; }
/* the copies only exist for the mobile marquee; must out-rank .jo-promo__row li{display:flex} */
.jo-promo__row .jo-promo__dup{ display:none; }
@media (max-width:640px){
  .jo-promo{ padding:7px 0; overflow:hidden; }
  .jo-promo__row{ gap:26px; justify-content:flex-start; padding-inline:16px; animation:jo-promo-slide 18s linear infinite; width:max-content; }
  .jo-promo__row .jo-promo__dup{ display:flex; }
  @keyframes jo-promo-slide{ from{ transform:translateX(0); } to{ transform:translateX(calc(100% / var(--jo-promo-copies,4))); } }
}
@media (prefers-reduced-motion:reduce){
  .jo-promo__row{ animation:none; }
}

.jo-shipline{ display:flex; align-items:center; gap:7px; margin:6px 0 0; font-size:13.5px; color:var(--ink-2); }
.jo-shipline .jo-i{ width:17px; height:17px; color:var(--gold); flex:none; }
.jo-shipline b{ color:var(--ink); }

/* mobile gallery: thumbnails instead of dots, the lifestyle shots are visible */
@media (max-width:900px){
  .jo-gal__dots{ display:none !important; }
  /* one row that scrolls sideways, never a second row under the first */
  .jo-gal__thumbs{ display:flex !important; flex-wrap:nowrap !important; justify-content:flex-start !important; order:2; gap:8px; padding:10px var(--gut) 0; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; }
  .jo-gal__thumbs::-webkit-scrollbar{ display:none; }
  .jo-gal__thumbs button{ flex:0 0 62px !important; width:62px !important; height:62px !important; border-radius:8px; scroll-snap-align:start; }
  /* a taller frame: portrait shots of the piece on a wrist fill it */
  .jo-gal__f{ aspect-ratio:4/5 !important; max-height:48vh !important; }
}
@media (max-width:380px){
  .jo-gal__f{ max-height:44vh !important; }
  .jo-gal__thumbs button img{ object-fit:cover; padding:0; }
}

/* card CTA is always there; hover only lifts it */
.jo-card__cta{ opacity:1 !important; transform:none !important; }

/* trust trio under the buy button */
.jo-buy__form + .jo-paynote + .jo-buy__micro{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 18px; padding:0; }
.jo-buy__form + .jo-paynote + .jo-buy__micro li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; font-size:12px; line-height:1.35; }
.jo-buy__form + .jo-paynote + .jo-buy__micro li .jo-i{ width:20px; height:20px; color:var(--gold); }
.jo-buy__form + .jo-paynote + .jo-buy__micro li b{ display:block; font-size:12.5px; }

/* home hero: the headline leads */
@media (min-width:900px){
  .jo-hero__copy .jo-hero__h{ font-size:clamp(34px,3.4vw,52px) !important; max-width:13ch; }
}

/* lightbox: arrows you can see, a counter, dots, no background scroll */
.jo-lb{ touch-action:none; }
.jo-lb__nav{
  width:52px !important; height:52px !important;
  background:rgba(255,253,250,.92) !important; color:var(--ink) !important;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
}
.jo-lb__nav svg{ width:24px; height:24px; }
.jo-lb__nav:hover{ background:#fff !important; }
.jo-lb__count{ position:absolute; top:22px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; letter-spacing:.12em; z-index:3; opacity:.85; }
.jo-lb__dots{ position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:3; }
.jo-lb__dots button{ width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.35); padding:0; }
.jo-lb__dots button.is-on{ background:#fff; }
.jo-lb__stage{ touch-action:none; }
@media (max-width:900px){
  .jo-lb__nav{ top:auto !important; bottom:44px; transform:none !important; width:46px !important; height:46px !important; }
  .jo-lb__nav.is-prev{ left:18px; } .jo-lb__nav.is-next{ right:18px; }
  .jo-lb__stage, .jo-lb__stage img{ max-height:64dvh; }
}

/* ==========================================================================
   Drawer: a small storefront, not a list of links
   ========================================================================== */
.jo-drawer{ width:min(88vw,380px) !important; max-width:380px !important; }
.jo-drawer__hd{ padding:18px 20px 14px !important; }
.jo-drawer__logo{ display:flex; flex-direction:column; align-items:flex-start; color:var(--ink); line-height:1; }
.jo-drawer__logo .jo-logo__m{ font-size:17px; }
.jo-drawer__logo .jo-logo__s{ font-size:9px; margin-top:3px; }
.jo-drawer__promo{ display:flex; align-items:center; gap:8px; margin:0; padding:10px 20px; background:var(--ink); color:var(--paper); font-size:12px; letter-spacing:.02em; }
.jo-drawer__promo .jo-i{ width:16px; height:16px; color:var(--gold-2); flex:none; }
.jo-drawer__k{ margin:18px 20px 8px; font-size:11px; letter-spacing:.18em; color:var(--mute); text-transform:uppercase; }
.jo-drawer__cats{ list-style:none; margin:0; padding:0 12px; }
.jo-drawer__cats a{ display:flex; align-items:center; gap:12px; padding:8px 8px; border-radius:12px; color:var(--ink); }
.jo-drawer__cats a:hover, .jo-drawer__cats a:active{ background:var(--cream); }
.jo-drawer__img{ width:52px; height:52px; border-radius:50%; overflow:hidden; flex:none; background:var(--cream); }
.jo-drawer__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.jo-drawer__n{ flex:1; font-size:15.5px; font-weight:500; }
.jo-drawer__c{ font-size:12px; color:var(--mute); }
.jo-drawer__cats .jo-i{ width:16px; height:16px; color:var(--mute); transform:scaleX(-1); }
.jo-drawer__all{ margin:12px 20px 4px; text-align:center; display:block; }
.jo-drawer__links{ list-style:none; margin:0; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; }
.jo-drawer__links a{ display:block; padding:8px 0; font-size:14px; color:var(--ink-2); border-bottom:1px solid var(--line-2); }
.jo-drawer__trust{ list-style:none; margin:20px 20px 0; padding:14px 12px; background:var(--cream); border-radius:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.jo-drawer__trust li{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:600; line-height:1.3; }
.jo-drawer__trust small{ font-weight:400; color:var(--mute); font-size:11px; }
.jo-drawer__trust .jo-i{ width:20px; height:20px; color:var(--gold); }
.jo-drawer__ft{ margin-top:auto; padding:18px 20px 26px; text-align:center; }
.jo-drawer__wa{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:99px; background:#e9f7ee; color:#1c6a45; font-weight:600; font-size:14px; }
.jo-drawer__wa .jo-i{ width:17px; height:17px; }
.jo-drawer__contact{ margin:12px 0 4px; font-size:13px; color:var(--mute); }
.jo-drawer__contact a{ color:var(--ink); }
.jo-drawer__social{ margin:0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.jo-drawer__social a{ color:var(--mute); margin:0 8px; }

/* ==========================================================================
   Checkout: stepper, quiet summary, form first
   ========================================================================== */
.jo-steps{
  list-style:none; margin:0 auto 26px; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); max-width:520px;
}
.jo-steps li{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  position:relative; font-size:12.5px; color:var(--mute); text-align:center;
}
/* the connector runs from this circle to the next one, behind both */
.jo-steps li::after{
  content:""; position:absolute; top:14px; z-index:0;
  height:2px; background:var(--line);
  inset-inline-start:calc(-50% + 18px); inset-inline-end:calc(50% + 18px);
}
.jo-steps li:first-child::after{ display:none; }
.jo-steps__n{
  position:relative; z-index:1;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper); border:2px solid var(--line);
  font-size:12.5px; font-weight:700; color:var(--mute);
}
.jo-steps__n .jo-i{ width:15px; height:15px; stroke-width:2.4; }
.jo-steps__l{ line-height:1.25; }
.jo-steps li.is-done{ color:var(--ink-2); }
.jo-steps li.is-done .jo-steps__n{ background:var(--gold); border-color:var(--gold); color:#fff; }
.jo-steps li.is-done::after, .jo-steps li.is-now::after{ background:var(--gold); }
.jo-steps li.is-now{ color:var(--ink); font-weight:700; }
.jo-steps li.is-now .jo-steps__n{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
@media (max-width:520px){
  .jo-steps{ margin-bottom:18px; }
  .jo-steps li{ font-size:11.5px; }
  .jo-steps li::after{ inset-inline-start:calc(-50% + 16px); inset-inline-end:calc(50% + 16px); }
}

/* payment method marks */
.jo-gwm{ display:inline-flex; gap:5px; align-items:center; margin-inline-start:10px; vertical-align:middle; }
.jo-gwm .jo-pay__m{ width:34px; height:22px; opacity:1; }
.jo-gwm__bank{ display:grid; place-items:center; width:26px; height:22px; color:var(--mute); }
.jo-gwm__bank .jo-i{ width:16px; height:16px; }

.jo-co__side .jo-sum{ background:#fff !important; border:1px solid var(--line-2) !important; }
.woocommerce-checkout #payment .payment_box{ background:transparent !important; border-inline-start:2px solid var(--line) !important; border-radius:0 !important; padding:6px 12px !important; color:var(--mute); }
.woocommerce-checkout #payment li.wc_payment_method{ background:#fff; }
.jo-thanks{ margin:26px 0 10px; }
.jo-thanks__code{ background:var(--cream); border-radius:var(--r); padding:22px 24px; text-align:center; margin-bottom:26px; }
.jo-thanks__code h3{ font-family:var(--f-disp); font-size:22px; margin:6px 0 8px; }
.jo-thanks__code b{ font-family:var(--f-ui); letter-spacing:.1em; background:#fff; padding:2px 10px; border-radius:6px; border:1px dashed var(--gold); }
.jo-thanks__t{ font-family:var(--f-disp); font-size:20px; margin:0 0 14px; }
.jo-thanks__grid.products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:820px){ .jo-thanks__grid.products{ grid-template-columns:repeat(2,1fr); } .jo-steps{ margin-bottom:16px; } }

/* one-tap adds */
.jo-xsell__i{ display:flex; flex-direction:column; gap:8px; }
.jo-xsell__add, .jo-mini__upadd, .jo-cartx__add{ border:1px solid var(--ink); background:transparent; color:var(--ink); border-radius:99px; padding:9px 14px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; position:relative; }
.jo-xsell__add:hover, .jo-mini__upadd:hover, .jo-cartx__add:hover{ background:var(--ink); color:var(--paper); }
.jo-xsell__add i{ display:none; font-style:normal; }
.jo-xsell__add.is-done span{ display:none; } .jo-xsell__add.is-done i{ display:inline; }
.jo-xsell__add.is-loading, .jo-mini__upadd.is-loading{ opacity:.5; pointer-events:none; }
.jo-mini__up{ margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); }
.jo-mini__upt{ margin:0 0 8px; font-size:12px; letter-spacing:.14em; color:var(--mute); text-transform:uppercase; }
.jo-mini__upi{ display:flex; align-items:center; gap:10px; }
.jo-mini__upi img{ width:54px; height:54px; border-radius:8px; object-fit:cover; flex:none; }
.jo-mini__upi span{ flex:1; display:flex; flex-direction:column; font-size:13px; line-height:1.3; }
.jo-mini__upi em{ font-style:normal; color:var(--mute); }
.jo-mini__upadd{ padding:8px 12px; font-size:12.5px; }

/* live purchases toast */
.jo-toast{ position:fixed; z-index:350; bottom:calc(84px + env(safe-area-inset-bottom)); inset-inline-start:14px; max-width:320px; display:flex; align-items:center; gap:10px; padding:10px 12px; background:#fff; border:1px solid var(--line-2); border-radius:14px; box-shadow:0 18px 40px -20px rgba(26,22,19,.45); transform:translateY(20px); opacity:0; pointer-events:none; transition:opacity .35s var(--e), transform .35s var(--e); }
.jo-toast.is-on{ opacity:1; transform:none; pointer-events:auto; }
.jo-toast img{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex:none; background:var(--cream); }
.jo-toast__b{ font-size:12.5px; line-height:1.35; color:var(--ink-2); }
.jo-toast__b a{ color:var(--ink); font-weight:600; }
.jo-toast__b small{ display:block; color:var(--mute); margin-top:2px; }
.jo-toast__x{ border:0; background:transparent; font-size:18px; color:var(--mute); cursor:pointer; padding:0 2px; }
@media (min-width:900px){ .jo-toast{ bottom:24px; } }

/* drawer: proof header, hold, eta, gift */
.jo-mini__hero{ position:relative; height:120px; overflow:hidden; }
.jo-mini__hero img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.72); }
.jo-mini__proof{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; color:#fff; text-align:center; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.jo-mini__stars{ color:#f2c76b; letter-spacing:.12em; font-size:13px; }
.jo-mini__proof b{ font-size:15px; }
.jo-mini__hold{ font-size:12px; opacity:.95; background:rgba(0,0,0,.28); padding:3px 10px; border-radius:99px; margin-top:4px; }
.jo-mini__hold time{ font-weight:700; }
.jo-eta{ display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:13px; color:var(--ink-2); }
.jo-eta .jo-i{ width:17px; height:17px; color:var(--gold); flex:none; }
.jo-eta time{ font-weight:700; color:var(--ink); }
.jo-giftline{
  display:flex; align-items:center; gap:10px; margin:10px 0 0; padding:11px 14px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  font-size:13px; line-height:1.45; color:var(--ink-2);
}
.jo-giftline .jo-i{ flex:none; width:20px; height:20px; color:var(--gold); stroke-width:1.5; }
.jo-giftline b{ color:var(--ink); font-weight:700; }
.jo-giftline.is-on{ border-color:var(--gold); background:linear-gradient(0deg, rgba(176,141,87,.07), rgba(176,141,87,.07)), var(--paper); }
.jo-gift__tag{
  display:inline-flex; align-items:center; gap:4px; margin-inline-start:6px; padding:2px 9px;
  border-radius:99px; border:1px solid var(--gold); background:var(--paper);
  color:var(--ink); font-size:11px; font-weight:600; line-height:1.5; vertical-align:middle;
}
.jo-gift__tag .jo-i{ width:12px; height:12px; color:var(--gold); stroke-width:1.8; }
.jo-gift__q{ color:var(--mute); }

/* tiers: badges, struck prices */
.jo-tier{ position:relative; overflow:visible; }
.jo-tier__flag{ position:absolute; top:-9px; inset-inline-start:50%; transform:translateX(50%); background:var(--ink); color:var(--paper); font-size:10px; letter-spacing:.06em; padding:2px 8px; border-radius:99px; white-space:nowrap; }
.jo-tier__flag.is-gold{ background:var(--gold); }
.jo-tier__p{ display:block; font-size:13px; margin-top:2px; }
.jo-tier__p del{ color:var(--mute); font-size:11.5px; margin-inline-start:4px; }
.jo-offer__tiers{ padding-top:8px; }

/* the gateway label and its marks sit on one line, marks at the far edge */
.woocommerce-checkout #payment label[for^="payment_method"]{ display:flex !important; align-items:center; gap:10px; width:100%; }
.woocommerce-checkout #payment .jo-gwm{ margin-inline-start:auto !important; }


}

/* ---------- breathing room under the stepper (cart and checkout) ---------- */
.jo-steps{ margin-bottom:34px !important; }
@media (max-width:520px){ .jo-steps{ margin-bottom:28px !important; } }
.jo-co__nudge{ max-width:720px; margin:0 auto 26px; }
.jo-co__nudge .jo-meter{ margin-bottom:0; }

/* ---------- breathing room between the spec pills and the buy row ---------- */
@media (min-width:901px){ .jo-chips.jo-chips{ margin-bottom:18px !important; } }


/* ==========================================================================
   FOOTER ON PHONES — composed, not stacked
   brand → WhatsApp → contact line → two link columns → payment marks.
   The brand and contact blocks dissolve (display:contents) so their pieces
   can be ordered on one grid without touching the desktop markup.
   ========================================================================== */
@media (max-width:640px){
  .jo-ft{ padding-top:40px; }
  .jo-ft__grid{
    display:grid !important; grid-template-columns:1fr 1fr !important;
    gap:0 18px !important; padding-bottom:8px !important; text-align:center;
  }
  .jo-ft__brand, .jo-ft__contact-col{ display:contents; }

  .jo-ft__brand .jo-logo__m{ order:1; grid-column:1 / -1; margin:0 auto 10px; font-size:18px; letter-spacing:.32em; }
  .jo-ft__brand > p{ order:2; grid-column:1 / -1; margin:0 auto 16px; max-width:36ch; font-size:13px; line-height:1.75; color:#a49c93; }
  .jo-ft__social{ order:3; grid-column:1 / -1; justify-content:center; gap:10px; margin:0 0 26px !important; }
  .jo-ft__social a{
    font-size:12px; letter-spacing:.04em; color:#d9d2c9;
    border:1px solid rgba(255,255,255,.16); border-radius:99px; padding:7px 14px;
  }

  .jo-ft__contact-col > h3{ display:none; }
  .jo-ft__wa{
    order:4; grid-column:1 / -1; display:flex !important; flex-direction:row !important; align-items:center; gap:10px !important;
    justify-content:center; width:100%; margin:0 0 14px !important;
    padding:14px 18px !important; border-radius:14px !important;
    border:1px solid var(--gold-2) !important; color:var(--paper) !important; font-size:14.5px !important; font-weight:600;
  }
  .jo-ft__wa .jo-i{ color:var(--gold-2) !important; width:19px !important; height:19px !important; }
  .jo-ft__contact{
    order:5; grid-column:1 / -1; display:flex !important; flex-wrap:wrap; justify-content:center;
    gap:4px 14px !important; margin:0 0 30px !important; padding:0;
  }
  .jo-ft__contact li{ margin:0 !important; font-size:12.5px !important; color:#a49c93 !important; }
  .jo-ft__contact a{ color:#d9d2c9; }

  .jo-ft__col:not(.jo-ft__contact-col){
    order:6; text-align:start; padding:22px 0 6px; border-top:1px solid rgba(255,255,255,.09);
  }
  .jo-ft__col h3{ margin:0 0 10px !important; font-size:12px !important; letter-spacing:.06em; }
  .jo-ft__col ul{ display:flex; flex-direction:column; gap:0 !important; }
  .jo-ft__col li{ margin:0 !important; }
  .jo-ft__col a{ display:block; padding:6px 0; font-size:13.5px; line-height:1.4; color:#c2bab1; }

  .jo-ft__brand .jo-secure{
    order:7; grid-column:1 / -1; align-items:center !important; text-align:center;
    margin:18px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.09);
  }
  .jo-ft__brand .jo-secure__marks{ justify-content:center !important; }

  .jo-ft__base{ padding:16px 0 calc(22px + env(safe-area-inset-bottom)); }
  .jo-ft__base .jo-wrap{ flex-direction:column; gap:4px; text-align:center; }
}

/* ---------- menu drawer: the two buttons, in the house style ---------- */
.jo-drawer__all{
  display:flex !important; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 20px; margin:14px 20px 6px;
  background:transparent !important; color:var(--ink) !important;
  border:1px solid var(--ink) !important; border-radius:12px;
  font-size:14.5px; font-weight:600; line-height:1;
}
.jo-drawer__all::after{ content:"←"; font-weight:400; }
.jo-drawer__all:hover{ background:var(--ink) !important; color:var(--paper) !important; }
.jo-drawer__wa{
  background:var(--paper) !important; color:var(--ink) !important;
  border:1px solid var(--gold); font-weight:600;
}
.jo-drawer__wa .jo-i{ color:var(--gold); }

/* ==========================================================================
   MOBILE TYPE SYSTEM (≤900px)
   Measured on every mobile surface: product cards at 13px, prices 13.5,
   tags 9.5–11.5, meta 11–13.5, checkout fields 15.5 (iOS zooms below 16).
   One role scale replaces the drift. Assistant carries everything; Frank
   Ruhl stays the logotype. Hierarchy is size AND weight, never size alone.
     micro 12.5 · meta 14 · ui 15–16 · input 16 · card 15 / price 17
     body 16.5 · h3 18 · product title 26
   ========================================================================== */
@media (max-width:900px){
  :root{
    --t-micro:12.5px; --t-meta:14px; --t-ui:15.5px; --t-ui-l:16px;
    --t-body:16.5px; --t-card:15px; --t-price:17px; --t-h3:18px;
  }

  /* micro: tags, badges, legal, quiet labels */
  .jo-opt__tag, .jo-tier__flag, .jo-tier__save, .jo-card__tag, .jo-gift__tag,
  .jo-secure__badge, .jo-news__fine, .jo-secure__t, .jo-ft__base p, .jo-ft__by,
  .jo-lead__ok, .jo-lead__ok a, .jo-sum__note, .woocommerce-shipping-destination,
  .jo-drawer__k, .jo-chipnav em, .jo-speccards__l, .woocommerce-shipping-calculator a,
  .jo-news__ok span, .jo-news__ok a{
    font-size:var(--t-micro) !important; line-height:1.45 !important;
  }
  .jo-opt__tag, .jo-tier__flag, .jo-card__tag, .jo-gift__tag, .jo-drawer__k{ letter-spacing:.02em; }

  /* meta: counts, crumbs, steps, notes, secondary lines */
  .jo-browse__c, .jo-crumb a, .jo-crumb span, .woocommerce-result-count, .jo-line__sku,
  .jo-steps__l, .jo-ft__contact li, .jo-drawer__c, .jo-drawer__contact, .jo-drawer__contact a,
  .jo-drawer__trust small, .jo-drawer__social a, .jo-ft__social a, .jo-urg, .jo-deliver__b em,
  .jo-shipline, .jo-paynote, .jo-paynote b, .jo-buy__form > p, .jo-assure span,
  .jo-opt__feat span, .jo-drawer__trust span,
  .jo-eyebrow, .payment_box p, .woocommerce-checkout-review-order-table th,
  .jo-cpn__form label, .jo-gift__row span, .jo-gift__row strong{
    font-size:var(--t-meta) !important; line-height:1.5 !important;
  }
  .jo-steps__l{ font-size:13.5px !important; }
  .jo-eyebrow{ letter-spacing:.04em; }

  /* the strips across the top and the ticker */
  .jo-promo__row span, .jo-promo__row strong{ font-size:13px !important; }
  .jo-ticker span{ font-size:13.5px !important; }

  /* messages that drive a decision read at UI size */
  .jo-meter__t, .jo-meter__t strong, .jo-giftline, .jo-giftline b, .jo-drawer__promo,
  .jo-instal, .jo-instal strong, .jo-deliver__b, .jo-deliver__b strong{
    font-size:15px !important; line-height:1.5 !important;
  }

  /* ui: links, menus, buttons, choices, table cells */
  .jo-drawer__links a, .jo-drawer__n, .jo-chipnav a, .jo-ask, .jo-clamp__btn,
  .wc_payment_method label, .jo-tier__q, .jo-cartx__t, .woocommerce-cart-form th,
  .woocommerce-cart-form td, .cart_totals th, .cart_totals td, .shop_table th, .shop_table td,
  .jo-cpn summary, .jo-cpn__toggle, .jo-sum th, .jo-sum td{
    font-size:var(--t-ui) !important; line-height:1.45 !important;
  }
  .woocommerce-checkout-review-order-table th{ font-size:13px !important; letter-spacing:.02em; }
  .jo-cartx__n, .jo-xsell__n, .jo-cartx__add, .jo-xsell__add, .jo-tier__p,
  .jo-tier__p .woocommerce-Price-amount{ font-size:14.5px !important; line-height:1.4 !important; }
  .jo-cartx__p, .jo-cartx__p .woocommerce-Price-amount, .jo-xsell__p,
  .jo-xsell__p .woocommerce-Price-amount{ font-size:15.5px !important; font-weight:700; }

  .jo-btn, .button, button.single_add_to_cart_button, #place_order,
  .jo-drawer__wa, .jo-ft__wa{ font-size:var(--t-ui-l) !important; }
  .jo-card__cta .jo-btn, .jo-card__cta .button{ font-size:15px !important; min-height:44px !important; }

  /* forms: 16px or iOS zooms on every tap */
  input.input-text, input[type=text], input[type=email], input[type=tel], input[type=number],
  input[type=search], input[type=password], select, textarea, .qty{
    font-size:16px !important;
  }
  .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
  .woocommerce form .form-row select, .woocommerce .quantity .qty{ font-size:16px !important; }
  .form-row label, .jo-lbl, .woocommerce form .form-row label{ font-size:14.5px !important; font-weight:600; line-height:1.4 !important; }
  .jo-co__trust b, .jo-co__trust span{ font-size:13.5px !important; line-height:1.35 !important; }
  .woocommerce-privacy-policy-text p, .woocommerce-privacy-policy-text a, p.jo-secure,
  .wc_payment_method .note, .payment_box .note{ font-size:var(--t-micro) !important; line-height:1.55 !important; }

  /* product cards */
  .jo-card__t, .jo-instead__grid .jo-card__t{
    font-size:var(--t-card) !important; line-height:1.38 !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .jo-card__price, .jo-card__price .woocommerce-Price-amount{ font-size:var(--t-price) !important; font-weight:700; }
  .jo-card__price del, .jo-card__price del .woocommerce-Price-amount{ font-size:14px !important; font-weight:400; }

  /* reading */
  .jo-hero__lede, .jo-arch__lede, .jo-arch__seobody p, .jo-story2__in p, .jo-proof__sub,
  .jo-news__lede, .jo-lead__copy p, .jo-rv p, .woocommerce-product-details__short-description li,
  .jo-buy__lede, .jo-desc p, .woocommerce-Tabs-panel p{
    font-size:var(--t-body) !important; line-height:1.7 !important;
  }
  .jo-rv h3{ font-size:var(--t-h3) !important; line-height:1.35 !important; }

  /* the product title leads the page */
  .jo-pdp__head .jo-buy__t{ font-size:26px !important; line-height:1.24 !important; }

  /* light on dark: a touch more air and tracking */
  .jo-ft__col a{ font-size:15px !important; letter-spacing:.01em; }
  .jo-ft__brand > p{ font-size:14.5px !important; line-height:1.8 !important; }
  .jo-ft__col h3{ font-size:13px !important; }
}


/* ---------- lightbox deep zoom ---------- */
.jo-lb__zoom{
  position:absolute; top:14px; right:72px; z-index:3;
  width:46px; height:46px; display:grid; place-items:center;
  color:#fff; background:rgba(255,255,255,.16); border:0; border-radius:50%; cursor:pointer;
  transition:background .2s;
}
.jo-lb__zoom:hover, .jo-lb__zoom[aria-pressed=true]{ background:rgba(255,255,255,.3); }
.jo-lb__zoom svg{ width:22px; height:22px; }
.jo-lb__zoom[aria-pressed=true] .jo-lb__zoom-v{ display:none; }   /* + becomes − */
.jo-lb__stage{ cursor:zoom-in; }
.jo-lb.is-deep .jo-lb__stage{ cursor:grab; }
.jo-lb.is-deep .jo-lb__stage:active{ cursor:grabbing; }
.jo-lb__stage img{ will-change:transform; user-select:none; -webkit-user-drag:none; }
.jo-lb.is-deep .jo-lb__nav,
.jo-lb.is-deep .jo-lb__dots,
.jo-lb.is-deep .jo-lb__count{ opacity:0; pointer-events:none; transition:opacity .2s; }
.jo-lb__stage.is-zoom img{ transform:none; }   /* the old 2.2x tap zoom is retired */
@media (max-width:900px){
  .jo-lb__zoom{ top:10px; right:62px; width:42px; height:42px; }
}

/* ==========================================================================
   CONTACT (page-contact.php)
   One decisive channel (WhatsApp, ink), two quiet ones (call, mail), the
   message form, then the shop in Karmiel with today's hours. Mobile first.
   ========================================================================== */
.jo-ct{ background:var(--paper); padding:clamp(28px,5vw,72px) 0 clamp(56px,7vw,104px); }
.jo-ct__in{ max-width:1120px; }

.jo-ct__hd{ max-width:640px; margin-bottom:clamp(26px,4vw,48px); }
.jo-ct__t{
  font-family:var(--f-disp); font-weight:500; letter-spacing:-.015em;
  font-size:clamp(34px,5.4vw,58px); line-height:1.05; margin:0 0 14px; color:var(--ink);
  text-wrap:balance;
}
.jo-ct__lede{ font-size:clamp(16.5px,1.6vw,19px); line-height:1.65; color:var(--ink-2); margin:0 0 16px; max-width:46ch; }
.jo-ct__status{
  display:inline-flex; align-items:center; gap:9px; margin:0;
  font-size:14.5px; font-weight:600; color:var(--ink-2);
  padding:7px 14px 7px 16px; border:1px solid var(--line); border-radius:999px; background:#fff;
}
.jo-ct__dot{ width:8px; height:8px; border-radius:50%; background:var(--mute); flex:none; }
.jo-ct__status.is-open{ color:var(--ink); border-color:rgba(156,118,57,.35); }
.jo-ct__status.is-open .jo-ct__dot{ background:var(--gold); box-shadow:0 0 0 4px rgba(200,167,104,.22); }

.jo-ct__grid{ display:grid; gap:clamp(28px,4vw,56px); }
@media (min-width:960px){
  .jo-ct__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:start;
    grid-template-areas:"reach form" "visit form"; row-gap:0;
  }
  .jo-ct__reach{ grid-area:reach; }
  .jo-ct__visit{ grid-area:visit; }
  .jo-ct__form{ grid-area:form; position:sticky; top:calc(var(--hd) + 24px); }
}

/* the decisive channel */
.jo-ct__wa{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; border-radius:16px;
  background:var(--ink); color:var(--paper);
  box-shadow:0 18px 40px -24px rgba(26,22,19,.6);
  transition:transform .25s var(--e), box-shadow .25s var(--e);
}
.jo-ct__wa:hover{ transform:translateY(-2px); box-shadow:0 22px 46px -24px rgba(26,22,19,.7); }
.jo-ct__wa:active{ transform:translateY(0); }
.jo-ct__wa-ico{
  width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:rgba(200,167,104,.16); color:var(--gold-2);
}
.jo-ct__wa-ico .jo-i{ width:24px; height:24px; stroke-width:1.6; }
.jo-ct__wa-t{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.jo-ct__wa-t b{ font-size:18px; font-weight:700; letter-spacing:.005em; }
.jo-ct__wa-t small{ font-size:14px; color:#cfc6bb; }
.jo-ct__go{ flex:none; display:grid; place-items:center; color:currentColor; opacity:.7; }
.jo-ct__go .jo-i{ width:20px; height:20px; transform:scaleX(-1); }   /* forward, in Hebrew, is left */

/* the quiet channels */
.jo-ct__lines{ list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--line); }
.jo-ct__lines li{ border-bottom:1px solid var(--line); }
.jo-ct__lines a{
  display:flex; align-items:center; gap:14px; padding:16px 4px; color:var(--ink);
  transition:background .2s var(--e);
}
.jo-ct__lines a:hover{ background:var(--cream); }
.jo-ct__ico{
  width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--gold); background:#fff;
}
.jo-ct__ico .jo-i{ width:19px; height:19px; stroke-width:1.5; }
.jo-ct__kv{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.jo-ct__kv small{ font-size:13.5px; color:var(--mute); }
.jo-ct__kv b{ font-size:17px; font-weight:600; text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jo-ct__lines .jo-ct__go{ color:var(--mute); opacity:1; }

/* the shop */
.jo-ct__visit{ margin-top:0; }
@media (min-width:960px){ .jo-ct__visit{ margin-top:44px; } }
.jo-ct__h{ font-family:var(--f-disp); font-size:clamp(22px,2.2vw,26px); font-weight:600; margin:0 0 14px; color:var(--ink); letter-spacing:-.005em; }
.jo-ct__addr{ font-style:normal; display:flex; gap:12px; align-items:flex-start; font-size:16.5px; line-height:1.55; color:var(--ink); }
.jo-ct__addr .jo-i{ width:20px; height:20px; color:var(--gold); flex:none; margin-top:3px; }
.jo-ct__addr small{ font-size:14px; color:var(--mute); }
.jo-ct__navs{ display:flex; gap:10px; margin:16px 0 28px; flex-wrap:wrap; }
.jo-ct__nav{
  display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px;
  border:1px solid var(--ink); border-radius:12px; color:var(--ink);
  font-size:15px; font-weight:600; transition:background .2s var(--e), color .2s var(--e);
}
.jo-ct__nav .jo-i{ width:17px; height:17px; }
.jo-ct__nav:hover{ background:var(--ink); color:var(--paper); }
.jo-ct__h3{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; margin:0 0 8px; color:var(--ink); }
.jo-ct__h3 .jo-i{ width:17px; height:17px; color:var(--gold); }
.jo-ct__hours{ margin:0; max-width:420px; }
.jo-ct__hours > div{
  display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  padding:9px 12px; border-radius:10px; font-size:15.5px; color:var(--ink-2);
}
.jo-ct__hours dt{ margin:0; }
.jo-ct__hours dd{ margin:0; font-variant-numeric:tabular-nums; }
.jo-ct__hours .is-closed{ color:var(--mute); }
.jo-ct__hours .is-today{ background:var(--cream); color:var(--ink); font-weight:700; }
.jo-ct__hours em{
  font-style:normal; font-size:12.5px; font-weight:700; color:var(--gold);
  border:1px solid rgba(156,118,57,.35); border-radius:999px; padding:1px 9px;
}

/* the form */
.jo-ct__form{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:clamp(22px,3vw,36px); box-shadow:var(--shadow);
}
.jo-ct__fsub{ font-size:15px; color:var(--mute); margin:-6px 0 20px; }
.jo-ct__form .wpcf7 p{ margin:0 0 16px; }
.jo-ct__form .wpcf7 label{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4; }
.jo-ct__form .wpcf7 br{ display:none; }
.jo-ct__form .wpcf7-form-control-wrap{ display:block; margin-top:7px; }
.jo-ct__form .wpcf7 input[type=text],
.jo-ct__form .wpcf7 input[type=email],
.jo-ct__form .wpcf7 input[type=tel],
.jo-ct__form .wpcf7 textarea{
  width:100%; font:inherit; font-size:16px !important; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:13px 14px; transition:border-color .2s var(--e), box-shadow .2s var(--e), background .2s var(--e);
}
.jo-ct__form .wpcf7 input[type=text],
.jo-ct__form .wpcf7 input[type=email],
.jo-ct__form .wpcf7 input[type=tel]{ height:52px; }
.jo-ct__form .wpcf7 textarea{ min-height:140px; resize:vertical; line-height:1.6; }
.jo-ct__form .wpcf7 input:focus,
.jo-ct__form .wpcf7 textarea:focus{
  outline:none; background:#fff; border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(200,167,104,.2);
}
.jo-ct__form .wpcf7 input[type=email]{ direction:ltr; text-align:right; }
.jo-ct__form .wpcf7-submit{
  width:100%; height:54px; margin-top:4px; border:0; border-radius:12px; cursor:pointer;
  background:var(--ink); color:var(--paper); font:inherit; font-size:16px; font-weight:700;
  transition:background .2s var(--e), transform .2s var(--e);
}
.jo-ct__form .wpcf7-submit:hover{ background:#2b2520; }
.jo-ct__form .wpcf7-submit:active{ transform:translateY(1px); }
.jo-ct__form .wpcf7-spinner{ display:block; margin:10px auto 0; }
.jo-ct__form .wpcf7-not-valid{ border-color:var(--warn) !important; }
.jo-ct__form .wpcf7-not-valid-tip{ font-size:13.5px; color:var(--warn); margin-top:6px; }
.jo-ct__form .wpcf7 form .wpcf7-response-output{
  margin:16px 0 0; padding:12px 14px; border-radius:12px; font-size:14.5px; line-height:1.5;
  border:1px solid var(--line); background:var(--cream); color:var(--ink);
}
.jo-ct__form .wpcf7 form.sent .wpcf7-response-output{ border-color:rgba(156,118,57,.45); }
.jo-ct__form .wpcf7 form.invalid .wpcf7-response-output,
.jo-ct__form .wpcf7 form.failed .wpcf7-response-output{ border-color:rgba(156,58,42,.4); color:var(--warn); }

.jo-ct a:focus-visible, .jo-ct button:focus-visible, .jo-ct input:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .jo-ct__wa, .jo-ct__wa:hover{ transition:none; transform:none; }
}

/* category header and sort bar are .jo-wrap; later "padding:X 0 Y" shorthands
   zeroed the gutter on phones and the text ran to the screen edge */
.jo-arch__hd.jo-wrap, .jo-arch__bar.jo-wrap{ padding-inline:var(--gut) !important; }

/* Contact Form 7 forms follow the page: right to left, labels on the right */
.wpcf7, .wpcf7 form{ direction:rtl; text-align:right; }
.wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 input[type=url]{ direction:ltr; text-align:right; }