/*
Theme Name: JoJo Theme
Theme URI: https://jojoaquatics.com
Author: JoJo Aquatics
Author URI: https://jojoaquatics.com
Description: Custom block theme for JoJo Aquatics 2026. WordPress 7.0 + WooCommerce.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.3
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jojo-theme
*/

/* ============================================================
   Front-end component CSS for the JoJo design system.
   Tokens live in assets/css/tokens.css (loaded first). This file
   only styles the registered block-style variations, brand
   micro-interactions, and the WooCommerce storefront skin.
   No raw brand hex here, tokens only.
   ============================================================ */

/* ---------- Buttons: pill + lift/press feel ---------- */
.wp-block-button__link {
  border-radius: var(--radius-pill);
  font-weight: var(--fw-extrabold);
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button__link:active { transform: scale(0.97); }

.wp-block-button.is-style-jojo-outline .wp-block-button__link {
  background: transparent; color: var(--blue-700); box-shadow: none;
  border: 2px solid var(--blue-200);
}
.wp-block-button.is-style-jojo-outline .wp-block-button__link:hover {
  background: var(--blue-50); border-color: var(--blue-300);
}
.wp-block-button.is-style-jojo-subtle .wp-block-button__link {
  background: var(--blue-50); color: var(--blue-700); box-shadow: none;
}
.wp-block-button.is-style-jojo-subtle .wp-block-button__link:hover { background: var(--blue-100); }
.wp-block-button.is-style-jojo-ghost .wp-block-button__link {
  background: transparent; color: var(--blue-700); box-shadow: none;
}
.wp-block-button.is-style-jojo-ghost .wp-block-button__link:hover { background: var(--ink-100); }
.wp-block-button.is-style-jojo-coral .wp-block-button__link {
  background: var(--coral-400); color: var(--white); box-shadow: var(--shadow-accent);
}
.wp-block-button.is-style-jojo-coral .wp-block-button__link:hover { background: var(--coral-500); }

/* ---------- Group cards ---------- */
.wp-block-group.is-style-jojo-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.wp-block-group.is-style-jojo-card-flat {
  background: var(--surface-page);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}
.wp-block-group.is-style-jojo-wash { position: relative; isolation: isolate; background: none; }
.wp-block-group.is-style-jojo-wash::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--teal-50) 0%, transparent 55%),
    radial-gradient(120% 90% at 0% 100%, var(--blue-50) 0%, transparent 55%),
    var(--surface-page);
}

/* ---------- Badges (inline pills on paragraphs) ---------- */
[class*="is-style-jojo-badge-"] {
  display: inline-block;
  font: var(--fw-extrabold) var(--text-2xs)/1.4 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.is-style-jojo-badge-brand { background: var(--blue-50);  color: var(--blue-700); }
.is-style-jojo-badge-teal  { background: var(--teal-50);  color: var(--teal-600); }
.is-style-jojo-badge-sunny { background: #FFF3D6;         color: var(--amber-600); }
.is-style-jojo-badge-sale  { background: var(--coral-50); color: var(--coral-600); }

/* ---------- Eyebrow + Chewy display ---------- */
.is-style-jojo-eyebrow {
  font: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--teal-600);
}
.is-style-jojo-display {
  font-family: var(--font-display);
  color: var(--brand-primary-ink);
  line-height: var(--leading-tight);
}

/* ---------- Sticky translucent header ---------- */
.jojo-header-bar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
header.wp-block-template-part:has(.jojo-header-bar) {
  position: sticky; top: 0; z-index: var(--z-sticky);
}

/* ---------- Announcement bar ---------- */
.jojo-announce { font: var(--fw-bold) var(--text-sm)/1.4 var(--font-body); }

/* ---------- Links in navy surfaces ---------- */
.has-blue-900-background-color a,
.jojo-footer a { color: rgba(255, 255, 255, 0.82); }
.has-blue-900-background-color a:hover,
.jojo-footer a:hover { color: #fff; }

/* ---------- Italic sci-names + mono numerals ---------- */
.jojo-sci, em.jojo-sci { font-style: italic; }
.jojo-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ============================================================
   WooCommerce storefront skin
   ============================================================ */
.woocommerce-page,
.wc-block-components-product-name { font-family: var(--font-body); }

/* Product cards in product-collection / product-template */
.wp-block-woocommerce-product-template li.product,
.wc-block-product {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.wp-block-woocommerce-product-template li.product:hover,
.wc-block-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.wp-block-woocommerce-product-template .wp-block-post-title,
.wc-block-product .wp-block-post-title {
  font-weight: var(--fw-extrabold);
  color: var(--text-strong);
}

/* Prices + SKUs in mono */
.woocommerce-Price-amount,
.wc-block-components-product-price,
.wp-block-woocommerce-product-price,
.wc-block-components-product-sku,
.product_meta .sku { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* Add-to-cart buttons inherit the pill button */
.wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-components-product-button .wc-block-components-product-button__button,
.woocommerce a.button,
.woocommerce button.button {
  border-radius: var(--radius-pill);
  font-weight: var(--fw-extrabold);
  background: var(--blue-600);
  color: var(--white);
  box-shadow: var(--shadow-brand);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--blue-700); }

/* Out of stock / placeholder eyebrow */
.jojo-coming-soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; aspect-ratio: 1 / 1; background: var(--ink-100); color: var(--ink-400);
  border-radius: var(--radius-lg);
}
.jojo-coming-soon .jojo-coming-soon__label {
  font: var(--fw-extrabold) var(--text-2xs)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* Technical data table */
.jojo-techtable { width: 100%; border-collapse: collapse; }
.jojo-techtable th, .jojo-techtable td {
  text-align: left; padding: 12px 20px;
  border-bottom: 1px solid var(--border-subtle);
  font: var(--type-body-sm);
}
.jojo-techtable td.jojo-techtable__val { text-align: right; font-weight: var(--fw-extrabold); color: var(--text-strong); }

/* KB card hover chevron */
.kb-card-link { transition: background var(--dur-base) var(--ease-out); }
.kb-card-link:hover { background: var(--blue-50); }

/* ---------- Header nav spacing + alignment ---------- */
.jojo-nav .wp-block-navigation__container { gap: 2px; align-items: center; }
.jojo-nav .wp-block-navigation-item > a.wp-block-navigation-item__content {
  padding: 12px 14px;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.jojo-nav .wp-block-navigation-item > a.wp-block-navigation-item__content:hover {
  color: var(--blue-700); border-bottom-color: var(--blue-600); text-decoration: none;
}
.jojo-logo { margin: 0; }
.jojo-header-bar .wp-block-search__input { border: 1px solid var(--border-default); }
.jojo-header-bar .wc-block-mini-cart__button { color: var(--blue-900); }

/* Card style on columns (KB topic cards, home KB teaser) */
.wp-block-column.is-style-jojo-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

/* ============================================================
   Homepage 1:1 polish
   ============================================================ */

/* Hero headline — large Chewy like the bible */
.jojo-hero-h1 {
  font-family: var(--font-display);
  color: var(--brand-primary-ink);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  margin: 0;
}

/* Location chip on hero image */
.jojo-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font: var(--fw-extrabold) var(--text-sm)/1 var(--font-body);
  color: var(--blue-900);
  box-shadow: var(--shadow-sm);
}
.jojo-hero-tile { box-shadow: var(--shadow-lg); }

/* Buttons with a trailing icon */
.wp-block-button.jojo-btn-icon .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; }

/* Value strip with icon tiles */
.jojo-valuestrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jojo-value { display: flex; gap: 12px; align-items: flex-start; }
.jojo-value__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-lg);
  background: var(--blue-50); color: var(--blue-600);
}
.jojo-value__text { display: flex; flex-direction: column; }
.jojo-value__text strong { font: var(--fw-extrabold) var(--text-base)/1.3 var(--font-body); color: var(--text-strong); }
.jojo-value__text span { font: var(--type-body-sm); color: var(--text-muted); }
@media (max-width: 781px) { .jojo-valuestrip { grid-template-columns: 1fr; } }

/* Announcement bar with icons */
.jojo-announce { gap: 24px; }
.jojo-announce__item { display: inline-flex; align-items: center; gap: 8px; font: var(--fw-bold) var(--text-sm)/1 var(--font-body); }
.jojo-announce__dot { opacity: .4; }

/* Header action icons */
.jojo-actions { display: inline-flex; align-items: center; gap: 6px; }
.jojo-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  color: var(--ink-600); transition: background var(--dur-base) var(--ease-out);
}
.jojo-iconbtn:hover { background: var(--ink-100); color: var(--blue-700); }

/* Cart as a solid blue circle (like the bible) */
.jojo-header-bar .wc-block-mini-cart__button {
  background: var(--blue-600); color: #fff;
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  padding: 0; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-brand);
}
.jojo-header-bar .wc-block-mini-cart__button:hover { background: var(--blue-700); }
.jojo-header-bar .wc-block-mini-cart__amount { display: none; }

/* ============================================================
   [jojo_shop] section — sidebar + toolbar + rich cards (1:1)
   ============================================================ */
.jojo-shop { box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 24px 24px 8px; }
.jojo-crumbs { display: flex; align-items: center; gap: 8px; font: var(--fw-bold) var(--text-sm)/1 var(--font-body); color: var(--text-muted); margin-bottom: 14px; }
.jojo-crumbs a { color: var(--text-muted); text-decoration: none; }
.jojo-crumbs a:hover { color: var(--blue-700); }
.jojo-crumbs span { color: var(--text-strong); font-weight: 800; }
.jojo-crumbs svg { color: var(--ink-300); }
.jojo-shop__title { font-family: var(--font-heading); font-weight: var(--fw-extrabold); font-size: var(--text-4xl); line-height: var(--leading-tight); color: var(--text-strong); margin: 0 0 20px; }
.jojo-shop__grid-wrap { display: grid; grid-template-columns: 248px 1fr; gap: 28px; align-items: start; }

/* Sidebar */
.jojo-side__title { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--text-strong); margin: 0 0 12px; }
.jojo-side__cats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; }
.jojo-side__cat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-radius: var(--radius-md);
  font: var(--fw-extrabold) var(--text-sm)/1 var(--font-body); color: var(--text-body);
  text-decoration: none; transition: background var(--dur-base) var(--ease-out);
}
.jojo-side__cat:hover { background: var(--ink-50); }
.jojo-side__cat.is-active { background: var(--blue-50); color: var(--blue-700); }
.jojo-side__cat svg { color: var(--ink-300); }
.jojo-side__card { background: var(--blue-900); color: #fff; border-radius: var(--radius-2xl); padding: var(--space-5); }
.jojo-side__card strong { display: block; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-xl); line-height: var(--leading-snug); color: #fff; margin: 10px 0 4px; }
.jojo-side__card p { font: var(--type-body-sm); color: rgba(255,255,255,.8); margin: 0 0 14px; }
.jojo-side__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--teal-400); color: var(--blue-900); font: var(--fw-extrabold) var(--text-sm)/1 var(--font-body); padding: 10px 16px; border-radius: var(--radius-pill); text-decoration: none; }
.jojo-side__btn:hover { background: var(--teal-300); }

/* Toolbar */
.jojo-toolbar {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm); padding: 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px;
}
.jojo-toolbar__search { flex: 1 1 220px; min-width: 180px; display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--border-default); border-radius: var(--radius-lg); padding: 8px 14px; color: var(--ink-400); height: 36px; }
.jojo-toolbar__search input { border: 0; outline: 0; flex: 1; font: var(--type-body-sm); color: var(--text-body); background: transparent; }
.jojo-toolbar select { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 36px; border: 2px solid var(--border-default); border-radius: var(--radius-lg); padding: 0 38px 0 12px; font: var(--fw-bold) var(--text-sm)/1 var(--font-body); color: var(--blue-900); cursor: pointer; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238395A6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.jojo-toolbar__right { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.jojo-f-stockwrap { display: inline-flex; align-items: center; gap: 8px; font: var(--fw-bold) var(--text-sm)/1 var(--font-body); color: var(--text-body); white-space: nowrap; }
.jojo-f-layout { display: inline-flex; background: var(--ink-100); border-radius: var(--radius-pill); padding: 3px; }
.jojo-f-layout button { width: 38px; height: 32px; border: 0; background: transparent; border-radius: var(--radius-pill); cursor: pointer; color: var(--ink-400); display: inline-flex; align-items: center; justify-content: center; }
.jojo-f-layout button.is-on { background: #fff; color: var(--blue-700); box-shadow: var(--shadow-sm); }
.jojo-count { font: var(--type-body-sm); color: var(--text-muted); margin: 0 0 14px; }

/* Grid + cards */
.jojo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.jojo-card2 { box-sizing: border-box; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); overflow: visible; display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.jojo-card2:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.jojo-card2__media { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.jojo-card2__media .jojo-card2__img, .jojo-card2__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jojo-card2__media .jojo-coming-soon { position: absolute; inset: 0; background: transparent; }
.jojo-badge { position: absolute; top: 14px; left: 14px; z-index: 2;
  font: var(--fw-extrabold) var(--text-xs)/1.4 var(--font-body); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: var(--radius-pill); }
.jojo-badge-brand { background: var(--blue-50);  color: var(--blue-700); }
.jojo-badge-teal  { background: var(--teal-50);  color: var(--teal-600); }
.jojo-badge-sunny { background: #FFF3D6;         color: var(--amber-600); }
.jojo-badge-sale  { background: var(--coral-50); color: var(--coral-600); }
.jojo-wish { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: var(--radius-pill); background: rgba(255,255,255,.92); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-400); box-shadow: var(--shadow-sm); }
.jojo-card2__body { padding: 16px; display: flex; flex-direction: column; gap: 7px; }
.jojo-card2__eyebrow { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: .07em; color: var(--teal-600); }
.jojo-card2__name { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--text-strong); text-decoration: none; }
.jojo-card2__name:hover { color: var(--blue-700); }
.jojo-card2__sci { font-style: italic; font-weight: 500; font-size: var(--text-sm); color: var(--text-muted); }
.jojo-card2__buy { display: flex; flex-direction: column; gap: 13px; }
.jojo-card2__price { font-family: var(--font-body); font-weight: var(--fw-black); font-size: var(--text-2xl); line-height: 1; color: var(--text-strong); text-align: center; }
.jojo-card2__add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 22px; border-radius: var(--radius-pill); background: var(--blue-600); color: #fff; font: var(--fw-extrabold) var(--text-base)/1 var(--font-body); text-decoration: none; box-shadow: var(--shadow-brand); transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring); }
.jojo-card2__add:hover { background: var(--blue-700); transform: translateY(-2px); }
.jojo-card2__add.is-oos { background: var(--ink-100); color: var(--ink-400); box-shadow: none; }

/* Text wrapper + description (description shows in list view only) */
.jojo-card2__text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.jojo-card2__blurb { font: var(--type-body-sm); color: var(--text-muted); margin: 2px 0 0; max-width: 520px; }
.jojo-grid:not(.is-list) .jojo-card2__blurb { display: none; }
.jojo-grid:not(.is-list) .jojo-card2__add svg { display: none; }

/* List view — matches the design-guide ProductRow (image | text+desc | price/add) */
.jojo-grid.is-list { grid-template-columns: 1fr; }
.jojo-grid.is-list .jojo-card2 { flex-direction: row; align-items: stretch; overflow: hidden; }
.jojo-grid.is-list .jojo-card2__media { width: 128px; flex: none; aspect-ratio: auto; align-self: stretch; border-radius: 0; }
.jojo-grid.is-list .jojo-card2__body { flex-direction: row; align-items: center; gap: 18px; padding: 14px 18px; }
.jojo-grid.is-list .jojo-card2__text { flex: 1; gap: 5px; }
.jojo-grid.is-list .jojo-card2__buy { flex-direction: column; align-items: center; gap: 10px; padding: 0 18px; flex: none; }
.jojo-grid.is-list .jojo-card2__price { text-align: center; }
.jojo-grid.is-list .jojo-card2__add { width: auto; }
.jojo-grid.is-list .jojo-badge, .jojo-grid.is-list .jojo-wish { display: none; }

/* Pager */
.jojo-pager { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.jojo-pager button { min-width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: #fff; color: var(--text-body); font: var(--fw-extrabold) var(--text-sm) var(--font-body); cursor: pointer; }
.jojo-pager button.is-on { background: var(--blue-600); color: #fff; border-color: var(--blue-600); box-shadow: var(--shadow-sm); }

@media (max-width: 900px) { .jojo-shop__grid-wrap { grid-template-columns: 1fr; } .jojo-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .jojo-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Fix WP font-size presets for digit-leading slugs (2xs,2xl..7xl).
   WordPress leaves --wp--preset--font-size--{2xs,2xl,3xl,4xl,5xl,6xl,7xl}
   empty, so the generated .has-*-font-size classes resolve to nothing.
   Re-point them at the literal --text-* tokens. :root raises specificity
   above WP's own !important rule.
   ============================================================ */
:root .has-2xs-font-size { font-size: var(--text-2xs) !important; }
:root .has-2xl-font-size { font-size: var(--text-2xl) !important; }
:root .has-3xl-font-size { font-size: var(--text-3xl) !important; }
:root .has-4xl-font-size { font-size: var(--text-4xl) !important; }
:root .has-5xl-font-size { font-size: var(--text-5xl) !important; }
:root .has-6xl-font-size { font-size: var(--text-6xl) !important; }
:root .has-7xl-font-size { font-size: var(--text-7xl) !important; }

/* Pager prev/next */
.jojo-pager button.is-disabled { opacity: .45; cursor: default; }
.jojo-pager button:not(.is-on):not(.is-disabled):hover { background: var(--blue-50); color: var(--blue-700); }

/* ============================================================
   Contact page (matches the brand guide)
   ============================================================ */
.jojo-contact { max-width: 1100px; margin: 0 auto; }
.jojo-contact .jojo-crumbs { margin-bottom: 24px; }
.jojo-contact__head { max-width: 620px; margin-bottom: 32px; }
.jojo-contact__title {
  font-family: var(--font-display); color: var(--blue-900);
  font-size: clamp(34px, 4vw, 52px); line-height: 1.05; margin: 0;
}
.jojo-contact__intro { font-size: var(--text-lg); line-height: 1.5; color: var(--text-body); margin: 10px 0 0; }

.jojo-contact__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }

/* Form card */
.jojo-contact__card { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); padding: 32px; }
.jojo-form { display: flex; flex-direction: column; gap: 18px; }
.jojo-field { display: flex; flex-direction: column; gap: 6px; }
.jojo-field label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--text-sm); color: var(--text-strong); }
.jojo-field input, .jojo-field select, .jojo-field textarea {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); line-height: 1.5;
  color: var(--text-strong); padding: 12px 14px; border: 2px solid var(--border-default);
  border-radius: var(--radius-lg); outline: none; background: #fff; width: 100%;
}
.jojo-field textarea { resize: vertical; }
.jojo-field input:focus, .jojo-field select:focus, .jojo-field textarea:focus { border-color: var(--blue-600); box-shadow: var(--ring); }
.jojo-btn-primary {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-600); color: #fff; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-base);
  padding: 13px 22px; border-radius: var(--radius-pill); box-shadow: var(--shadow-brand);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-out);
}
.jojo-btn-primary:hover { background: var(--blue-700); transform: translateY(-2px); }

/* Form submission feedback + spam honeypot (used by jojo-forms.php) */
.jojo-form-note { border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 18px; font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); line-height: 1.45; scroll-margin-top: 140px; }
.jojo-form-note--ok { background: var(--teal-50); border: 1.5px solid var(--teal-100); color: var(--blue-900); }
.jojo-form-note--err { background: #fdecec; border: 1.5px solid #f6c9c9; color: #9a2020; }
.jojo-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Aside */
.jojo-contact__aside { display: flex; flex-direction: column; gap: 24px; }
.jojo-quote { background: var(--teal-50); border-left: 5px solid var(--teal-400); border-radius: var(--radius-xl); padding: var(--space-5); display: flex; align-items: center; gap: 16px; }
.jojo-quote img { width: 60px; flex: none; }
.jojo-quote p { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--text-lg); line-height: 1.45; color: var(--blue-900); margin: 0; }
.jojo-aside-block h3 { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--text-strong); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.jojo-aside-block h3 svg { color: var(--blue-600); }
.jojo-aside-block p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; color: var(--text-body); margin: 0; }
.jojo-aside-block a { color: var(--text-link); font-weight: var(--fw-extrabold); }
.jojo-claims { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-5); }
.jojo-claims h4 { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-xl); color: var(--text-strong); margin: 0 0 6px; }
.jojo-claims p { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); margin: 0; }
.jojo-claims__btn { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; background: var(--coral-400); color: #fff; font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-sm); text-decoration: none; padding: 11px 18px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.jojo-claims__btn:hover { background: var(--coral-500); }

@media (max-width: 860px) { .jojo-contact__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Live Arrival (DOA) claim page
   ============================================================ */
.jojo-claim { max-width: 1100px; margin: 0 auto; }
.jojo-claim .jojo-crumbs { margin-bottom: 22px; }
.jojo-claim__hero { max-width: 720px; margin-bottom: 28px; display: flex; flex-direction: column; gap: 12px; }
.jojo-pill-eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--teal-50); color: var(--teal-600); padding: 6px 14px; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.jojo-claim__title { font-family: var(--font-display); color: var(--blue-900); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04; margin: 0; }
.jojo-claim__intro { font-size: var(--text-lg); line-height: 1.5; color: var(--text-body); margin: 0; }

.jojo-claim__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) 0.85fr; gap: 36px; align-items: start; }
.jojo-claim__main { display: flex; flex-direction: column; gap: 20px; }
.jojo-claim-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); padding: 28px; }

.jojo-sectionhead { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.jojo-num { flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--blue-50); color: var(--blue-700); font-family: var(--font-body); font-weight: var(--fw-black); font-size: var(--text-base); line-height: 34px; text-align: center; }
.jojo-sectionhead h2 { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--text-strong); margin: 0; }
.jojo-sectionhead p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); margin: 3px 0 0; }

.jojo-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jojo-span2 { grid-column: span 2; }
.jojo-req { color: var(--coral-500); }
.jojo-hint { font-weight: 600; font-size: var(--text-xs); color: var(--text-faint); }

.jojo-items { display: flex; flex-direction: column; gap: 12px; }
.jojo-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 14px; background: var(--surface-page); }
.jojo-item__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jojo-item__ey { font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue-700); }
.jojo-item__remove { border: none; background: none; cursor: pointer; font-weight: 700; font-size: var(--text-xs); color: var(--text-muted); }
.jojo-grid-itemrow { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }

.jojo-step { display: inline-flex; align-items: center; border: 2px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; width: max-content; }
.jojo-step button { width: 40px; height: 44px; border: none; background: #fff; cursor: pointer; color: var(--blue-700); display: inline-flex; align-items: center; justify-content: center; }
.jojo-step button:hover { background: var(--blue-50); }
.jojo-step input { width: 52px; text-align: center; border: none; border-left: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); height: 44px; font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-base); color: var(--text-strong); outline: none; }

.jojo-additem { margin-top: 12px; }
.jojo-btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--blue-700); border: 2px solid var(--blue-200); border-radius: var(--radius-pill); padding: 9px 16px; font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-sm); cursor: pointer; }
.jojo-btn-outline:hover { background: var(--blue-50); border-color: var(--blue-300); }

.jojo-check { display: flex; align-items: center; gap: 10px; margin-top: 16px; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); color: var(--text-body); }
.jojo-check--top { align-items: flex-start; font-weight: 400; }
.jojo-check--top span { font-size: var(--text-sm); line-height: 1.5; color: var(--text-body); }
.jojo-check input { width: 18px; height: 18px; flex: none; accent-color: var(--blue-600); margin-top: 2px; }

.jojo-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; border: 2px dashed var(--border-default); background: var(--surface-page); border-radius: var(--radius-2xl); padding: 34px 24px; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.jojo-drop:hover { border-color: var(--blue-600); background: var(--blue-50); }
.jojo-drop__icon { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--blue-100); color: var(--blue-700); display: inline-flex; align-items: center; justify-content: center; }
.jojo-drop strong { font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-base); color: var(--text-strong); }
.jojo-drop__hint { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); max-width: 420px; }
.jojo-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; margin-top: 14px; }
.jojo-photo { margin: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.jojo-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.jojo-photo figcaption { padding: 7px 8px; font-size: var(--text-2xs); font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.jojo-submit-row { margin-top: 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.jojo-submit-note { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); color: var(--text-muted); }

/* Aside */
.jojo-claim__aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.jojo-clockcard { background: var(--blue-900); border-radius: var(--radius-2xl); padding: var(--space-5); color: #fff; box-shadow: var(--shadow-lg); }
.jojo-clockcard__ey { display: flex; align-items: center; gap: 8px; color: var(--teal-200); font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.jojo-clockcard__time { font-family: var(--font-mono); font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; letter-spacing: 0.01em; }
.jojo-clockcard p { font-size: var(--text-sm); line-height: 1.5; color: rgba(255,255,255,0.72); margin: 12px 0 0; }

.jojo-guarantee { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.jojo-guarantee__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.jojo-guarantee__icon { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--teal-50); color: var(--teal-500); display: inline-flex; align-items: center; justify-content: center; }
.jojo-guarantee h3 { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-xl); color: var(--text-strong); margin: 0; }
.jojo-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.jojo-steps li { display: flex; gap: 12px; }
.jojo-steps__n { flex: none; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--blue-50); color: var(--blue-700); font-family: var(--font-body); font-weight: var(--fw-black); font-size: var(--text-xs); line-height: 24px; text-align: center; }
.jojo-steps strong { font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-sm); color: var(--text-strong); }
.jojo-steps p { font-size: var(--text-sm); line-height: 1.45; color: var(--text-muted); margin: 2px 0 0; }
.jojo-claim__email { font-size: var(--text-sm); color: var(--text-muted); text-align: center; margin: 0; }
.jojo-claim__email a { color: var(--text-link); font-weight: var(--fw-extrabold); }

@media (max-width: 900px) { .jojo-claim__grid { grid-template-columns: 1fr; } .jojo-claim__aside { position: static; } }
@media (max-width: 560px) { .jojo-grid2, .jojo-grid-itemrow { grid-template-columns: 1fr; } .jojo-span2 { grid-column: auto; } }

/* ============================================================
   Knowledge Base landing
   ============================================================ */
.jojo-kb { max-width: 1100px; margin: 0 auto; }
.jojo-kb .jojo-crumbs { margin-bottom: 24px; }
.jojo-kb__head { margin-bottom: 36px; }
.jojo-kb__title { font-family: var(--font-display); color: var(--blue-900); font-size: clamp(34px, 4vw, 52px); line-height: 1.05; margin: 0 0 12px; }
.jojo-kb__intro { font-size: var(--text-lg); line-height: 1.55; color: var(--text-body); margin: 0; }

.jojo-kb__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jojo-kbcard { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); padding: var(--space-6); display: flex; flex-direction: column; gap: 14px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.jojo-kbcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.jojo-kbcard__head { display: flex; align-items: center; justify-content: center; gap: 12px; }
.jojo-kbcard__icon { flex: none; width: 52px; height: 52px; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; }
.jojo-kbcard__head h2 { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--text-strong); margin: 0; }
.jojo-kbcard__body { font-size: var(--text-sm); line-height: 1.55; color: var(--text-muted); margin: 0; }
.jojo-kbcard__links { display: flex; flex-direction: column; margin-top: 4px; }
.jojo-kbcard .kb-card-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -10px; padding: 9px 10px; border-radius: 10px; border-top: 1px solid var(--border-subtle); font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); color: var(--blue-700); text-decoration: none; }
.jojo-kbcard .kb-card-link:hover { background: var(--blue-50); }
.jojo-kbcard .kb-chevron { display: inline-flex; color: var(--blue-400); transition: transform var(--dur-base) var(--ease-out); }
.jojo-kbcard .kb-card-link:hover .kb-chevron { transform: translateX(4px); }

.jojo-kb-about { background: var(--surface-page); border-radius: var(--radius-2xl); padding: var(--space-8); margin-top: 28px; }
.jojo-kb-about__head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
.jojo-kb-about__icon { flex: none; width: 52px; height: 52px; border-radius: var(--radius-lg); background: #fff; color: var(--blue-600); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.jojo-kb-about__head h3 { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-2xl); color: var(--text-strong); margin: 0; }
.jojo-kb-about p { font-size: var(--text-base); line-height: 1.6; color: var(--text-body); margin: 0 0 8px; }
.jojo-kb-about__foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.jojo-kb-about__sign { font-style: italic; font-size: var(--text-sm); color: var(--text-muted); text-align: right; margin: 4px 0 0; }

.jojo-kb-callout { margin-top: 28px; background: var(--blue-900); border-radius: var(--radius-2xl); padding: var(--space-8); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; box-shadow: var(--shadow-lg); }
.jojo-kb-callout__icon { flex: none; width: 64px; height: 64px; border-radius: var(--radius-xl); background: rgba(255,255,255,0.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.jojo-kb-callout__text { flex: 1; min-width: 280px; }
.jojo-kb-callout__text h3 { font-family: var(--font-display); color: #fff; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; margin: 0 0 6px; }
.jojo-kb-callout__text p { font-size: var(--text-base); line-height: 1.5; color: rgba(255,255,255,0.82); margin: 0; max-width: 560px; }
.jojo-kb-callout__btn { flex: none; display: inline-flex; align-items: center; gap: 10px; background: var(--coral-400); color: #fff; font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-base); text-decoration: none; padding: 14px 24px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.jojo-kb-callout__btn:hover { background: var(--coral-500); }

@media (max-width: 860px) { .jojo-kb__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Product detail page (PDP)
   ============================================================ */
.jojo-pdp { max-width: 1240px; margin: 0 auto; }
.jojo-pdp .jojo-crumbs { margin-bottom: 18px; }
.jojo-pdp__top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.jojo-pdp__media-wrap { position: sticky; top: 120px; }
.jojo-pdp__media { position: relative; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 1/1; }
.jojo-pdp__media .jojo-pdp__img, .jojo-pdp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.jojo-pdp__media .jojo-coming-soon { position: absolute; inset: 0; }
.jojo-pdp__media > p { display: contents; }
.jojo-pdp__media > p:empty { display: none; }
/* WooCommerce native gallery fitted into the brand square (zoom + lightbox). */
.jojo-pdp__media .woocommerce-product-gallery { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 1 !important; }
.jojo-pdp__media .woocommerce-product-gallery__wrapper { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; }
.jojo-pdp__media .woocommerce-product-gallery__image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.jojo-pdp__media .woocommerce-product-gallery__image a { display: block; width: 100%; height: 100%; }
/* Hover-zoom: WC's jquery.zoom overlay is low-res (registered "large" size is
   500px) so it reads as a muddy doubled square. Hide it and drive a crisp
   cursor-following transform-zoom on the real image instead (wired in the
   product footer script). */
.jojo-pdp__media .woocommerce-product-gallery .zoomImg { display: none !important; }
.jojo-pdp__media .wp-post-image { transition: transform .2s var(--ease-out, ease); }
.jojo-pdp__media.is-zoom { cursor: zoom-in; }
.jojo-pdp__media.is-zoom .wp-post-image { transform: scale(1.9); }
.jojo-pdp__media .woocommerce-product-gallery__trigger { position: absolute; top: 12px; left: 12px; z-index: 4; width: 36px; height: 36px; border-radius: var(--radius-pill); background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); text-indent: 0; font-size: 0; }
.jojo-pdp__media .woocommerce-product-gallery__trigger::before { content: ""; position: absolute; inset: 0; background: var(--ink-400); -webkit-mask: no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E"); mask: no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E"); }

.jojo-pdp__buy { display: flex; flex-direction: column; gap: 12px; }
/* one consistent rhythm: let the column gap own the spacing instead of
   stacking extra top-margins (kept the buy box balanced against the image). */
.jojo-pdp__buy .jojo-pdf-btn { margin-top: 0; }
.jojo-pdp__buy .jojo-share { margin-top: 2px; }
.jojo-pdp__eyebrow { font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sky-500); }
.jojo-pdp__name { font-family: var(--font-heading); font-weight: var(--fw-extrabold); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; color: var(--text-strong); margin: 0; }
/* Drop the empty wpautop <p> wedged between the eyebrow and title (it added
   16px+16px margins on top of two 12px gaps = a 56px gap). Re-add a single
   16px so the eyebrow -> title distance is exactly half (28px), shifting the
   rest of the column up. */
.jojo-pdp__buy > p:empty { display: none; }
.jojo-pdp__buy .jojo-pdp__name { margin-top: 16px; }
.jojo-pdp__sci { font-style: italic; font-weight: 500; font-size: var(--text-lg); color: var(--text-muted); margin: 0; }
.jojo-pdp__blurb { font-size: var(--text-lg); line-height: 1.5; color: var(--text-body); }
.jojo-pdp__blurb p { margin: 0; }
.jojo-pdp__price { font-family: var(--font-body); font-weight: var(--fw-black); font-size: var(--text-4xl); color: var(--text-strong); }
.jojo-pdp__price .woocommerce-Price-amount { font-family: var(--font-body); }

.jojo-pdp__stock { background: var(--surface-page); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.jojo-stockline { display: flex; align-items: center; gap: 10px; }
.jojo-stockline__i { color: var(--blue-500); display: inline-flex; }
.jojo-stockline__k { font-size: var(--text-sm); color: var(--text-muted); width: 110px; }
.jojo-stockline strong { font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-sm); color: var(--text-strong); }
.jojo-stockline .jojo-instock { color: var(--green-600); }
.jojo-stockline .jojo-oos { color: var(--red-600); }

.jojo-pdp__cart { display: flex; gap: 12px; align-items: center; }
.jojo-pdp__add { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue-600); color: #fff; font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-base); text-decoration: none; padding: 14px 20px; border-radius: var(--radius-pill); box-shadow: var(--shadow-brand); transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring); }
.jojo-pdp__add:hover { background: var(--blue-700); transform: translateY(-2px); }
.jojo-pdp__add.is-oos { background: var(--ink-100); color: var(--ink-400); box-shadow: none; }
.jojo-pdp__total { font-family: var(--font-body); }
.jojo-pdp__total .woocommerce-Price-amount { font-family: var(--font-body); }

.jojo-pdp__guarantee { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--teal-50); border: 1.5px solid var(--teal-100); border-radius: var(--radius-lg); }
/* Download care-guide PDF button (PDP buy column + care-guide aside). */
.jojo-pdf-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; width: 100%; box-sizing: border-box; background: #fff; color: var(--blue-700); border: 2px solid var(--blue-200); border-radius: var(--radius-pill); padding: 11px 16px; font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-sm); text-decoration: none; transition: background var(--dur-base, .2s) var(--ease-out, ease), border-color var(--dur-base, .2s) var(--ease-out, ease); }
.jojo-pdf-btn:hover { background: var(--blue-50); border-color: var(--blue-300); }
.jojo-pdf-btn svg { flex: none; }
.jojo-pdp__guarantee-i { color: var(--teal-600); display: inline-flex; flex: none; }
.jojo-pdp__guarantee span { font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); line-height: 1.4; color: var(--blue-900); }

/* Product share row (under the buy box) */
.jojo-share { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.jojo-share__label { font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.jojo-share__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.jojo-share__btn {
  position: relative;
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--ink-100); color: var(--ink-600); text-decoration: none;
  transition: background var(--dur-base, .2s) var(--ease-out, ease), color var(--dur-base, .2s) var(--ease-out, ease), transform var(--dur-base, .2s) var(--ease-out, ease);
}
.jojo-share__btn svg { width: 18px; height: 18px; }
.jojo-share__btn:hover { background: var(--blue-600); color: #fff; transform: translateY(-1px); }
.jojo-share__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.jojo-share__copied {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--blue-900); color: #fff; font: 600 11px/1 var(--font-body);
  padding: 5px 8px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base, .2s) var(--ease-out, ease);
}
.jojo-share__btn.is-copied { background: var(--blue-600); color: #fff; }
.jojo-share__btn.is-copied .jojo-share__copied { opacity: 1; }

/* Download button + share on one line (wraps on narrow widths) */
.jojo-pdp__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 4px; }
.jojo-pdp__foot .jojo-pdf-btn { width: auto; margin-top: 0; padding: 9px 16px; }
.jojo-pdp__foot .jojo-pdf-btn svg { width: 16px; height: 16px; }
.jojo-pdp__foot .jojo-share { margin-top: 0; }
.jojo-pdp__foot .jojo-share__label { display: none; } /* icons are self-evident inline; frees space for one line */

/* Care guide + tech two-column */
.jojo-pdp__detail { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: start; margin-top: 48px; }
.jojo-pdp__guide h2 { font-family: var(--font-heading); font-weight: var(--fw-extrabold); font-size: var(--text-2xl); color: var(--text-strong); margin: 0 0 8px; }
.jojo-pdp__guide-h { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-xl); color: var(--blue-800); margin: 22px 0 6px; }
.jojo-pdp__guide p { font-size: var(--text-base); line-height: 1.65; color: var(--text-body); margin: 0; }
.jojo-pdp__guide-more { margin: 24px 0 0; }
.jojo-pdp__guide-more a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-sm); color: var(--blue-700); text-decoration: none; }
.jojo-pdp__guide-more a svg { flex: none; transition: transform var(--dur-base, .2s) var(--ease-out, ease); }
.jojo-pdp__guide-more a:hover { color: var(--blue-800); }
.jojo-pdp__guide-more a:hover svg { transform: translateX(3px); }
.jojo-pdp__tech { position: sticky; top: 120px; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-md); }
.jojo-pdp__tech-head { background: var(--blue-900); padding: 16px 20px; }
.jojo-pdp__tech-head h3 { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-xl); color: #fff; margin: 0; }
.jojo-pdp__tech dl { margin: 0; }
.jojo-techrow { display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--border-subtle); }
.jojo-techrow dt { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.jojo-techrow dd { font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-sm); color: var(--text-strong); margin: 0; text-align: right; }

.jojo-pdp__similar { margin-top: 56px; }
.jojo-pdp__similar h2 { font-family: var(--font-heading); font-weight: var(--fw-extrabold); font-size: var(--text-3xl); color: var(--text-strong); margin: 0 0 18px; }
.jojo-pdp__similar .jojo-grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) { .jojo-pdp__top, .jojo-pdp__detail { grid-template-columns: 1fr; } .jojo-pdp__media-wrap, .jojo-pdp__tech { position: static; } .jojo-pdp__similar .jojo-grid { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   Single KB article + prose
   ============================================================ */
.jojo-article { max-width: 880px; margin: 0 auto; }
.jojo-article--two { max-width: 1140px; }
.jojo-article .jojo-crumbs { margin-bottom: 22px; }
.jojo-article__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.jojo-article--two .jojo-article__grid { grid-template-columns: minmax(0,1fr) 320px; }
.jojo-article__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--blue-50); color: var(--blue-700); padding: 5px 13px; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 16px; }
.jojo-article__title { font-family: var(--font-display); color: var(--blue-900); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; margin: 0 0 24px; }
.jojo-article__cta { margin-top: 36px; background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: var(--space-5); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.jojo-article__cta img { width: 52px; flex: none; }
.jojo-article__cta-text { flex: 1; min-width: 220px; }
.jojo-article__cta-text strong { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-xl); color: var(--text-strong); display: block; margin-bottom: 2px; }
.jojo-article__cta-text span { font-size: var(--text-sm); color: var(--text-muted); }
.jojo-article__aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.jojo-shopcard { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-md); }
.jojo-shopcard__media { display: block; aspect-ratio: 1/1; overflow: hidden; }
.jojo-shopcard__media img, .jojo-shopcard__media .jojo-card2__img { width: 100%; height: 100%; object-fit: cover; }
.jojo-shopcard__media .jojo-coming-soon { aspect-ratio: 1/1; }
.jojo-shopcard__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.jojo-shopcard__eyebrow { font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sky-500); }
.jojo-shopcard__name { font-family: var(--font-body); font-weight: var(--fw-black); font-size: var(--text-lg); color: var(--text-strong); }
.jojo-shopcard__pricerow { display: flex; align-items: baseline; gap: 8px; }
.jojo-shopcard__price { font-family: var(--font-body); font-weight: var(--fw-black); font-size: var(--text-2xl); color: var(--text-strong); }
.jojo-shopcard__pricerow .jojo-instock { font-weight: 700; font-size: var(--text-xs); color: var(--green-600); }
.jojo-shopcard__pricerow .jojo-oos { font-weight: 700; font-size: var(--text-xs); color: var(--red-600); }
.jojo-article__guarantee { display: flex; gap: 10px; align-items: flex-start; background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: var(--radius-xl); padding: var(--space-4); }
.jojo-article__guarantee span:last-child { font-weight: 700; font-size: var(--text-sm); line-height: 1.45; color: var(--blue-900); }

/* Prose (article body — mirrors the brand guide .md-body) */
.jojo-prose { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--text-body); }
.jojo-prose > *:first-child { margin-top: 0; }
.jojo-prose h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--blue-900); margin: 38px 0 14px; }
.jojo-prose h3 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1.25; color: var(--blue-800); margin: 28px 0 10px; }
.jojo-prose h4 { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--blue-800); margin: 22px 0 8px; }
.jojo-prose p { margin: 0 0 16px; }
.jojo-prose strong { color: var(--text-strong); font-weight: 800; }
.jojo-prose em { font-style: italic; }
.jojo-prose a { color: var(--text-link); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid color-mix(in srgb, var(--text-link) 35%, transparent); }
.jojo-prose a:hover { border-bottom-color: var(--text-link); }
.jojo-prose ul, .jojo-prose ol { margin: 0 0 18px; padding-left: 4px; display: flex; flex-direction: column; gap: 8px; list-style: none; }
.jojo-prose ul li { position: relative; padding-left: 26px; }
.jojo-prose ul li::before { content: ''; position: absolute; left: 6px; top: 11px; width: 7px; height: 7px; border-radius: 999px; background: var(--teal-400); }
.jojo-prose ol { counter-reset: jp; }
.jojo-prose ol li { position: relative; padding-left: 38px; counter-increment: jp; }
.jojo-prose ol li::before { content: counter(jp); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 999px; background: var(--blue-50); color: var(--blue-700); font-weight: 800; font-size: 13px; line-height: 24px; text-align: center; }
.jojo-prose blockquote { margin: 0 0 24px; padding: 16px 20px; background: var(--teal-50); border-left: 5px solid var(--teal-400); border-radius: var(--radius-lg); font-size: 19px; line-height: 1.5; color: var(--blue-900); font-weight: 600; }
.jojo-prose hr { border: none; border-top: 1px solid var(--border-subtle); margin: 32px 0; }

@media (max-width: 900px) { .jojo-article--two .jojo-article__grid { grid-template-columns: 1fr; } .jojo-article__aside { position: static; } }

/* ============================================================
   Cart + Checkout (WooCommerce blocks, brand-skinned)
   ============================================================ */
/* Section / step titles -> navy heading font */
.wc-block-cart__totals-title,
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__label {
  font-family: var(--font-heading) !important;
  color: var(--text-strong);
}
.wc-block-components-checkout-step__title { font-weight: var(--fw-bold); }

/* Money in mono */
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value,
.wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-components-order-summary-item__total-price {
  font-family: var(--font-mono); font-feature-settings: "tnum" 1; color: var(--text-strong);
}

/* Order summary / totals as a brand card */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-totals-wrapper.wc-block-cart__totals {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

/* Cart item rows */
.wc-block-cart-items__row { border-color: var(--border-subtle); }
.wc-block-cart-item__product-name,
.wc-block-components-product-name { font-weight: var(--fw-extrabold); color: var(--text-strong); }

/* Inputs (checkout fields) */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select__container,
.wc-block-components-combobox .components-form-token-field__input-container,
.wc-block-components-address-form input,
.wc-blocks-components-select__container {
  border: 2px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input.is-active input {
  border-color: var(--blue-600) !important;
  box-shadow: var(--ring) !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step__heading-content { color: var(--text-muted); }

/* Buttons (Proceed to checkout, Place order, mini-cart actions) -> brand pill */
.wc-block-components-button.contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button,
.wc-block-mini-cart__footer-actions .wc-block-components-button.contained {
  background: var(--blue-600) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-extrabold) !important;
  box-shadow: var(--shadow-brand);
}
.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--blue-700) !important; }
.wc-block-components-button.outlined {
  border-radius: var(--radius-pill) !important; border-color: var(--blue-200) !important; color: var(--blue-700) !important;
}

/* Quantity selector pill */
.wc-block-components-quantity-selector { border: 2px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }

/* ---------- Mini-cart drawer (matches the bible cart drawer) ---------- */
.wc-block-mini-cart__drawer .wc-block-components-drawer__content { background: var(--surface-page); }
.wc-block-mini-cart__title { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--text-strong); }
.wc-block-mini-cart__title-text { color: var(--text-strong); }
.wc-block-mini-cart__items::before {
  content: "Every order is covered by our Live Arrival Guarantee.";
  display: block; background: var(--teal-50); color: var(--teal-600);
  padding: 12px 20px; font: var(--fw-bold) var(--text-sm)/1.4 var(--font-body); text-align: center;
}
.wc-block-mini-cart__footer { background: #fff; border-top: 1px solid var(--border-subtle); }
.wc-block-mini-cart__footer .wc-block-components-totals-item__value { font-family: var(--font-mono); }

/* ============================================================
   Info / policy pages eyebrow (teal variant) + Care Guides index
   (mirrors the design-guide CareGuidesIndex card grid)
   ============================================================ */
.jojo-article__eyebrow--teal { background: var(--teal-50); color: var(--teal-600); }

.jojo-careindex { max-width: 1100px; margin: 0 auto; }
.jojo-careindex .jojo-crumbs { margin-bottom: 22px; }
.jojo-careindex__head { max-width: 720px; margin-bottom: 16px; }
.jojo-careindex__title { font-family: var(--font-display); color: var(--blue-900); font-size: clamp(32px, 4vw, 50px); line-height: 1.05; margin: 0 0 8px; }
.jojo-careindex__intro { max-width: 720px; margin-bottom: 32px; }
.jojo-careindex__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.jojo-careindex__card { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); padding: var(--space-5); text-decoration: none; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.jojo-careindex__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.jojo-careindex__cardhead { display: flex; align-items: center; gap: 12px; }
.jojo-careindex__thumb { width: 52px; height: 52px; border-radius: var(--radius-lg); overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; color: var(--ink-300); }
.jojo-careindex__thumb img { width: 100%; height: 100%; object-fit: cover; padding: 0; box-sizing: border-box; }
.jojo-careindex__cardmeta { display: flex; flex-direction: column; }
.jojo-careindex__cardeyebrow { font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--sky-500); }
.jojo-careindex__cardtitle { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-xl); color: var(--text-strong); margin-top: 2px; }
.jojo-careindex__excerpt { font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jojo-careindex__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--text-sm); color: var(--blue-700); }

/* Footer bottom-bar legal links (match design-guide spacing) */
.jojo-footer-legal { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 0; }
.jojo-footer-legal a { color: rgba(255,255,255,0.72); font-weight: 700; text-decoration: none; }
.jojo-footer-legal a:hover { color: #fff; }
.jojo-footer-legal__mail { color: rgba(255,255,255,0.82) !important; }

/* Newsletter band: shown only where the design guide shows it
   (home/shop, product, contact, care-guide articles). The band lives in the
   shared footer; body.jojo-show-news opts a page in. */
.jojo-newsletter { display: none; }
body.jojo-show-news .jojo-newsletter { display: block; }


/* ============================================================
   Header tightening — exact match to the bible header
   ============================================================ */
.jojo-logo img { height: 56px; width: auto !important; }

/* Active nav item: navy text + blue underline (like the bible) */
.jojo-nav .current-menu-item > a.wp-block-navigation-item__content,
.jojo-nav .current_page_item > a.wp-block-navigation-item__content,
.jojo-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--blue-700); border-bottom-color: var(--blue-600);
}

/* Search: white rounded-rect (radius-lg), 2px border, gray magnifier on the LEFT */
.jojo-header-bar .wp-block-search__inside-wrapper {
  flex-direction: row-reverse; align-items: center; gap: 8px;
  background: #fff; border: 2px solid var(--border-default); border-radius: var(--radius-lg);
  height: 44px; padding: 0 14px;
}
.jojo-header-bar .wp-block-search__input {
  flex: 1; border: none !important; background: transparent; box-shadow: none; padding: 0;
  font: 600 var(--text-base)/1 var(--font-body); color: var(--blue-900); height: 100%;
}
.jojo-header-bar .wp-block-search__input::placeholder { color: var(--ink-400); font-weight: 400; }
.jojo-header-bar .wp-block-search__button {
  background: transparent !important; color: var(--ink-400) !important; box-shadow: none !important;
  border: none !important; padding: 0 !important; min-width: 0 !important; width: auto !important;
  margin: 0 !important; transform: none !important;
}
.jojo-header-bar .wp-block-search__button:hover { color: var(--ink-500) !important; }

/* Center the search on the page; logo left, actions + cart right */
@media (min-width: 901px) {
  .jojo-header-bar > .wp-block-group { position: relative; justify-content: flex-start !important; }
  .jojo-header-bar > .wp-block-group > .wp-block-search {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 400px !important; margin: 0;
  }
  .jojo-header-bar .jojo-actions { margin-left: auto !important; }
}

/* Front page IS the shop — show the Shop nav item active, like the bible */
body.home .jojo-nav .wp-block-navigation-item:first-child > a.wp-block-navigation-item__content {
  color: var(--blue-700); border-bottom-color: var(--blue-600);
}


/* Filter toolbar: in-stock checkbox styled like the bible (rounded square) */
.jojo-f-stock {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 20px; height: 20px; border: 2px solid var(--border-default); border-radius: 6px;
  background: #fff; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.jojo-f-stock:checked {
  border-color: var(--blue-600);
  background: var(--blue-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
}
.jojo-f-stock:focus-visible { outline: none; box-shadow: var(--ring); }

/* Kill the stray empty <p> wpautop injects inside product cards (added ~46px dead gap) */
.jojo-card2__body > p, .jojo-card2 p:empty, .jojo-grid p:empty { display: none !important; margin: 0 !important; }

/* Card children use border-box so width:100% + padding doesn't overflow (Add-to-cart button) */
.jojo-card2, .jojo-card2 *, .jojo-card2 *::before, .jojo-card2 *::after { box-sizing: border-box; }

/* ============================================================
   Footer — match the design-guide proportions exactly
   ============================================================ */
.jojo-footer .wp-block-columns { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
.jojo-footer .wp-block-column { width: auto !important; flex-basis: auto !important; }
.jojo-footer img { height: 40px !important; width: auto !important; }
.jojo-footer .wp-block-column:first-child p { max-width: 260px; }
.jojo-footer-links { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 12px 0 0; padding: 0; }
.jojo-footer-links li { margin: 0; }
.jojo-footer-links a { font-size: var(--text-sm); font-weight: var(--fw-regular); text-decoration: none; }
.jojo-footer a { text-decoration: none; }
.jojo-footer a:hover { text-decoration: none; color: #fff; }

/* DOA quantity stepper: border-box + no inherited field padding (was rendering 72px tall) */
.jojo-step { box-sizing: border-box; }
.jojo-step button { box-sizing: border-box; padding: 0; }
.jojo-step input { box-sizing: border-box; padding: 0; }

/* Form fields border-box so width:100% + padding doesn't overflow the column (claim + contact) */
.jojo-field input, .jojo-field select, .jojo-field textarea { box-sizing: border-box; }

/* ============================================================
   MOBILE (<= 900px) — mobile-only corrections.
   The desktop header layout lives entirely in @media (min-width:901px),
   so nothing here can overlap or alter the desktop display.
   ============================================================ */
@media (max-width: 900px) {

  /* (1 + 2) Header bar was a single nowrap flex row built for desktop.
     On phones the search form kept its ~400px width, overran the
     viewport (page width hit 649px / sideways scroll) and squeezed the
     logo down to 0px.
     Flatten the two header groups into one flex context so the layout
     reads cleanly on a phone: the logo gets its own row, the menu toggle
     sits at the left of the account/wishlist/cart row (instead of a lonely
     third row), and the search spans a full-width row of its own. */
  .jojo-header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 10px;
  }
  /* promote the inner row group's children up to the bar's flex context */
  .jojo-header-bar > .wp-block-group:not(:has(.wp-block-navigation)) { display: contents; }
  .jojo-header-bar .jojo-logo { flex: 0 0 100%; order: 0; text-align: center; padding-top: 5px; } /* own row, centered, 5px under the announcement bar */
  .jojo-header-bar .jojo-logo img { display: block; margin-left: auto; margin-right: auto; }
  /* nav group = the menu toggle on mobile: strip its desktop indent and
     drop it to the left of the icon row */
  .jojo-header-bar > .wp-block-group:has(.wp-block-navigation) {
    order: 1; flex: 0 0 auto;
    margin: 0 !important; padding: 0 !important;
  }
  .jojo-header-bar .jojo-actions { order: 2; margin-left: auto; } /* icons hug the right */
  .jojo-header-bar .wc-block-mini-cart { order: 3; }
  .jojo-header-bar > .wp-block-group > .wp-block-search {
    order: 4; flex: 0 0 100%; width: 100% !important; margin: 0;
  }

  /* Swap WordPress's default 2-bar toggle (reads as "=") for a clean,
     evenly weighted 3-line hamburger in the brand navy. */
  .jojo-header-bar .wp-block-navigation__responsive-container-open > svg { display: none; }
  .jojo-header-bar .wp-block-navigation__responsive-container-open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232e4358' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='17' x2='20' y2='17'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
  }

  /* Mobile menu overlay must fill the screen. The header's backdrop-filter
     makes it the containing block for the toggle's position:fixed overlay,
     which boxed the open menu into the header (~176px tall) and forced an
     internal scroll. Drop the filter only while the menu is open (the
     full-screen overlay covers the header anyway) so the blur survives
     otherwise. */
  .jojo-header-bar:has(.wp-block-navigation__responsive-container.is-menu-open) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Tighten the open menu's top spacing. WordPress stacks a 16px container
     pad + 46px dialog margin + 56px content pad (~118px of dead space)
     above the first link. Pull it up so the links sit just under the
     close button. */
  .jojo-nav .wp-block-navigation__responsive-container.is-menu-open {
    padding-top: 8px; padding-bottom: 8px;
    bottom: auto !important;            /* release the full-height inset so the panel can crop */
    height: auto !important;            /* hug the menu instead of filling the screen */
    max-height: calc(100vh - 16px); overflow-y: auto;   /* safety if the menu ever grows tall */
    box-shadow: 0 10px 24px rgba(16, 42, 67, 0.12);     /* panel edge against the page below */
  }
  .jojo-nav .wp-block-navigation__responsive-dialog { margin-top: 0 !important; }
  .jojo-nav .wp-block-navigation__responsive-container-content { padding-top: 20px !important; padding-bottom: 20px !important; }
  .jojo-nav .wp-block-navigation__responsive-container-close { top: 8px !important; right: 16px !important; }

  /* (3) Footer kept its 4-column desktop grid on phones, hyphen-breaking
     the labels ("KNOWL EDGE", "Custome r service"). Brand block goes
     full width, the three link columns sit two-up. */
  .jojo-footer .wp-block-columns { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .jojo-footer .wp-block-column:first-child { grid-column: 1 / -1; }
  .jojo-footer .wp-block-column:first-child p { max-width: none; }

  /* (4) Tap targets: nav toggle (and close) were 24x24; raise to 44.
     Search submit icon gets a 44px-tall, wider hit area without
     changing its look. */
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .jojo-header-bar .wp-block-search__button {
    min-width: 36px !important; min-height: 44px !important;
  }

  /* (5) Inputs: all visible text-entry fields already measure 16px with
     44-54px heights, so this is a guard - never let a control force
     horizontal overflow, and floor text inputs at 16px so iOS won't
     auto-zoom the page on focus. */
  .jojo-header-bar .wp-block-search__input { font-size: 16px; }
  input, select, textarea { max-width: 100%; box-sizing: border-box; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select, textarea { font-size: max(16px, 1em); }

  /* (6) Announcement bar: both promos on a single line instead of stacking.
     Tighten gap/padding and scale the text down with the viewport so it
     stays one line from ~330px up; nowrap forces the line, the small font
     keeps it inside the viewport (no sideways scroll). */
  .jojo-announce {
    flex-wrap: nowrap;
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .jojo-announce__item {
    font-size: clamp(10px, 2.9vw, 11.5px);
    white-space: nowrap;
  }

  /* (7) Wishlist: the TI wishlist plugin collapses its manage-list table
     into centered, full-width stacked cells on phones (floating checkbox,
     a lone "x", everything centered). Rebuild each row as a product card
     that matches the cart/shop styling. Selectors are scoped under the
     full table class so they outrank the plugin's width:100% !important
     mobile rules. */
  .tinv-wishlist table.tinvwl-table-manage-list,
  .tinv-wishlist table.tinvwl-table-manage-list tbody { display: block; width: 100%; }
  .tinv-wishlist table.tinvwl-table-manage-list thead { display: none; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody tr.wishlist_item {
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    position: relative;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-sm);
    padding: 14px;
    margin: 0 0 14px;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody tr.wishlist_item > td {
    display: block; width: auto !important; text-align: left;
    border: 0; padding: 0; margin: 0; background: none;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-cb { display: none !important; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-thumbnail img {
    width: 88px !important; max-width: 88px !important; height: 88px;
    object-fit: cover; border-radius: var(--radius-lg, 12px); margin: 0;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-name { grid-column: 2; grid-row: 1; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-name a {
    font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-base);
    color: var(--text-strong); text-decoration: none; line-height: 1.25;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-price {
    grid-column: 2; grid-row: 2; font-weight: var(--fw-extrabold); color: var(--blue-900);
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-price del { opacity: .5; font-weight: 400; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-stock { grid-column: 2; grid-row: 3; font-size: var(--text-sm); }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-stock p { margin: 0 !important; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-date {
    grid-column: 2; grid-row: 4; font-size: var(--text-xs); color: var(--text-muted);
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-remove {
    position: absolute; top: 10px; right: 10px; left: auto !important; width: auto !important; display: block !important;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-remove button {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--ink-100, #eef1f4); color: var(--ink-500, #5b6b7b);
    border: 0; padding: 0; min-width: 0; line-height: 1;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-action { grid-column: 1 / -1; grid-row: 5; margin-top: 10px; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-action .button {
    display: block; width: 100%; text-align: center;
    background: var(--blue-600); color: #fff; border: 0; border-radius: var(--radius-lg, 12px);
    padding: 12px 16px; font-weight: var(--fw-extrabold); box-shadow: var(--shadow-brand); text-decoration: none;
  }
}

/* ============================================================
   Wishlist (desktop >=901px): same card treatment as the mobile
   view, but the rows flow as a responsive 2-3 column grid instead
   of the plain plugin table. Mobile (<=900px) keeps its own
   single-column card rules above.
   ============================================================ */
@media (min-width: 901px) {
  .tinv-wishlist table.tinvwl-table-manage-list { display: block; width: 100%; border: 0; }
  .tinv-wishlist table.tinvwl-table-manage-list thead { display: none; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody tr.wishlist_item {
    display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; row-gap: 4px;
    align-items: start; position: relative; margin: 0;
    background: #fff; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl, 16px); box-shadow: var(--shadow-sm); padding: 16px;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody tr.wishlist_item > td {
    display: block; width: auto !important; text-align: left; border: 0 !important; padding: 0; margin: 0; background: none;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-cb { display: none !important; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-thumbnail img {
    width: 96px !important; max-width: 96px !important; height: 96px; object-fit: cover;
    border-radius: var(--radius-lg, 12px); margin: 0;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-name { grid-column: 2; grid-row: 1; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-name a {
    font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-base);
    color: var(--text-strong); text-decoration: none; line-height: 1.25;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-price { grid-column: 2; grid-row: 2; font-weight: var(--fw-extrabold); color: var(--blue-900); }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-price del { opacity: .5; font-weight: 400; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-stock { grid-column: 2; grid-row: 3; font-size: var(--text-sm); }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-stock p { margin: 0 !important; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-date { grid-column: 2; grid-row: 4; font-size: var(--text-xs); color: var(--text-muted); }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-remove {
    position: absolute; top: 12px; right: 12px; left: auto !important; width: auto !important; display: block !important;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-remove button {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--ink-100, #eef1f4); color: var(--ink-500, #5b6b7b);
    border: 0; padding: 0; min-width: 0; line-height: 1;
  }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-action { grid-column: 1 / -1; grid-row: 5; margin-top: 12px; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-action .button {
    display: block; width: 100%; text-align: center; background: var(--blue-600); color: #fff;
    border: 0; border-radius: var(--radius-lg, 12px); padding: 12px 16px; font-weight: var(--fw-extrabold);
    box-shadow: var(--shadow-brand); text-decoration: none;
  }
  /* keep the bulk-actions footer flowing below the card grid */
  .tinv-wishlist table.tinvwl-table-manage-list tfoot,
  .tinv-wishlist table.tinvwl-table-manage-list tfoot tr,
  .tinv-wishlist table.tinvwl-table-manage-list tfoot td { display: block; width: auto; border: 0; }
  .tinv-wishlist table.tinvwl-table-manage-list tfoot { margin-top: 24px; }
}

/* ============================================================
   Fish-tank toolbar background (decorative). The .jojo-tank layer
   sits behind the filter controls and is purely additive: it does
   NOT change the toolbar's flex layout, padding, or control sizes.
   ============================================================ */
.jojo-toolbar { position: relative; overflow: hidden; isolation: isolate; }
.jojo-toolbar > :not(.jojo-tank) { position: relative; z-index: 1; }
.jojo-tank { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.jojo-tank svg { width: 100%; height: 100%; display: block; }

/* Keep the two floating controls legible over the water (frosted pill). */
.jojo-f-stockwrap { background: rgba(255,255,255,.80); padding: 7px 13px; border-radius: var(--radius-pill); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: var(--shadow-sm); }
.jojo-f-layout { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: var(--shadow-sm); }

@keyframes jt-swim-r { from { transform: translateX(-340px); } to { transform: translateX(1400px); } }
@keyframes jt-swim-l { from { transform: translateX(1400px); } to { transform: translateX(-340px); } }
@keyframes jt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes jt-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes jt-tail { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes jt-finwave { 0%, 100% { transform: rotate(-3deg) scaleY(1); } 50% { transform: rotate(3deg) scaleY(1.06); } }
@keyframes jt-bubble { 0% { transform: translateY(0) scale(.5); opacity: 0; } 12% { opacity: .85; } 70% { opacity: .85; } 100% { transform: translate(6px,-120px) scale(1.1); opacity: 0; } }
@keyframes jt-drift { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: .7; } 85% { opacity: .7; } 100% { transform: translate(40px,-60px); opacity: 0; } }
@keyframes jt-shimmer { 0%, 100% { opacity: .32; } 50% { opacity: .62; } }
@keyframes jt-caustic { 0%, 100% { transform: translateX(0); opacity: .3; } 50% { transform: translateX(40px); opacity: .5; } }
@keyframes jt-ripple { 0%, 100% { transform: translateX(0); opacity: .35; } 50% { transform: translateX(-20px); opacity: .6; } }
@keyframes jt-pulse { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes jt-flag { 0%, 100% { transform: scaleY(1) skewX(0deg); } 50% { transform: scaleY(.82) skewX(-4deg); } }
@keyframes jt-streak { 0%, 100% { opacity: .04; } 50% { opacity: .1; } }
@keyframes jt-snail { from { transform: translateX(-40px); } to { transform: translateX(1240px); } }

.jt-swim-r { animation: jt-swim-r var(--d, 28s) linear infinite; animation-delay: var(--delay, 0s); }
.jt-swim-l { animation: jt-swim-l var(--d, 28s) linear infinite; animation-delay: var(--delay, 0s); }
.jt-bob { animation: jt-bob var(--d, 3.4s) ease-in-out infinite; }
.jt-tail { transform-box: fill-box; transform-origin: 100% 50%; animation: jt-tail var(--d, 1.1s) ease-in-out infinite; }
.jt-finwave { transform-box: fill-box; transform-origin: 100% 50%; animation: jt-finwave var(--d, 2.4s) ease-in-out infinite; }
.jt-plant { transform-box: fill-box; transform-origin: 50% 100%; animation: jt-sway var(--d, 6s) ease-in-out infinite; }
.jt-bub { animation: jt-bubble var(--d, 5s) ease-in infinite; animation-delay: var(--delay, 0s); }
.jt-drift { animation: jt-drift var(--d, 13s) linear infinite; animation-delay: var(--delay, 0s); }
.jt-shimmer { animation: jt-shimmer 6s ease-in-out infinite; }
.jt-caustic { animation: jt-caustic 9s ease-in-out infinite; }
.jt-ripple { animation: jt-ripple 7s ease-in-out infinite; }
.jt-pulse { animation: jt-pulse var(--d, 3.6s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.jt-flag { transform-box: fill-box; transform-origin: 0% 50%; animation: jt-flag 2.4s ease-in-out infinite; }
.jt-streak { animation: jt-streak 7s ease-in-out infinite; }
.jt-snail { animation: jt-snail var(--d, 60s) linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .jt-swim-r, .jt-swim-l, .jt-bob, .jt-tail, .jt-finwave, .jt-plant, .jt-bub, .jt-drift, .jt-shimmer, .jt-caustic, .jt-ripple, .jt-pulse, .jt-flag, .jt-streak, .jt-snail { animation: none; }
}

/* ============================================================
   WooCommerce My Account — brand skin
   Scoped to .jojo-account (page-my-account.html wrapper). Targets
   classic WooCommerce account markup (woocommerce-MyAccount-*).
   ============================================================ */
.jojo-account .woocommerce { display: grid; grid-template-columns: 248px 1fr; gap: 36px; align-items: start; }

/* Account navigation (left rail) */
.jojo-account .woocommerce-MyAccount-navigation { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 10px; position: sticky; top: 24px; }
.jojo-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.jojo-account .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-lg); font: var(--fw-bold) var(--text-sm)/1.2 var(--font-body); color: var(--text-body); text-decoration: none; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.jojo-account .woocommerce-MyAccount-navigation li a:hover { background: var(--ink-50); color: var(--blue-700); }
.jojo-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--blue-50); color: var(--blue-700); }
.jojo-account .woocommerce-MyAccount-navigation li--logout a { color: var(--ink-500); }

/* Content panel (right) */
.jojo-account .woocommerce-MyAccount-content { min-width: 0; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: var(--space-6); }
.jojo-account .woocommerce-MyAccount-content > p { color: var(--text-body); line-height: var(--leading-relaxed); }
.jojo-account .woocommerce-MyAccount-content a:not(.button) { color: var(--blue-700); font-weight: 700; }
.jojo-account .woocommerce-MyAccount-content mark { background: var(--teal-50); color: var(--blue-900); padding: 0 4px; border-radius: 4px; }

/* Headings */
.jojo-account h2, .jojo-account h3, .jojo-account legend { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--text-strong); }

/* Tables (orders, downloads) */
.jojo-account table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.jojo-account table.shop_table thead th { text-align: left; font: var(--fw-extrabold) var(--text-xs)/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); background: var(--surface-page); padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.jojo-account table.shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-body); vertical-align: middle; }
.jojo-account table.shop_table tr:last-child td { border-bottom: 0; }
.jojo-account table.shop_table .woocommerce-Price-amount { font-family: var(--font-mono); font-feature-settings: "tnum" 1; color: var(--text-strong); }
.jojo-account .woocommerce-orders-table__cell-order-actions { text-align: right; }

/* Forms: login, register, addresses, edit-account, password */
.jojo-account form .form-row, .jojo-account .woocommerce-form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.jojo-account form label { font: var(--fw-bold) var(--text-sm)/1.3 var(--font-body); color: var(--text-strong); }
.jojo-account input.input-text,
.jojo-account input[type="text"],
.jojo-account input[type="email"],
.jojo-account input[type="tel"],
.jojo-account input[type="password"],
.jojo-account select,
.jojo-account textarea { font: 600 var(--text-base)/1.5 var(--font-body); color: var(--text-strong); padding: 12px 14px; border: 2px solid var(--border-default); border-radius: var(--radius-lg); background: #fff; width: 100%; box-sizing: border-box; outline: none; }
.jojo-account input:focus, .jojo-account select:focus, .jojo-account textarea:focus { border-color: var(--blue-600); box-shadow: var(--ring); }
.jojo-account .woocommerce-form__label-for-checkbox { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }

/* Login / register two-up */
.jojo-account .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.jojo-account .col-1, .jojo-account .col-2 { background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: var(--space-5); }
.jojo-account .woocommerce-form-login__rememberme { font-weight: 600; }
.jojo-account .lost_password a { color: var(--blue-700); font-weight: 700; }

/* Addresses */
.jojo-account .woocommerce-Addresses.u-columns { grid-template-columns: 1fr 1fr; }
.jojo-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.jojo-account address { font-style: normal; color: var(--text-body); line-height: 1.6; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 16px; background: var(--surface-page); }

/* Buttons (classic account) */
.jojo-account .button, .jojo-account button.button, .jojo-account input.button { border-radius: var(--radius-pill); font-weight: var(--fw-extrabold); background: var(--blue-600); color: #fff; box-shadow: var(--shadow-brand); border: 0; padding: 12px 22px; cursor: pointer; }
.jojo-account .button:hover { background: var(--blue-700); }

/* Notices */
.jojo-account .woocommerce-message, .jojo-account .woocommerce-info, .jojo-account .woocommerce-error { list-style: none; border-radius: var(--radius-lg); padding: 14px 16px; margin: 0 0 18px; font: 700 var(--text-sm)/1.45 var(--font-body); border: 1.5px solid transparent; }
.jojo-account .woocommerce-message { background: var(--teal-50); border-color: var(--teal-100); color: var(--blue-900); }
.jojo-account .woocommerce-info { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-900); }
.jojo-account .woocommerce-error { background: #fdecec; border-color: #f6c9c9; color: #9a2020; }

/* Pagination */
.jojo-account .woocommerce-pagination ul { display: flex; gap: 6px; list-style: none; padding: 0; margin: 18px 0 0; }
.jojo-account .woocommerce-pagination a, .jojo-account .woocommerce-pagination span { display: inline-flex; min-width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); color: var(--blue-700); font-weight: 700; text-decoration: none; }
.jojo-account .woocommerce-pagination .current { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }

/* Responsive: stack nav above content */
@media (max-width: 782px) {
  .jojo-account .woocommerce { grid-template-columns: 1fr; }
  .jojo-account .woocommerce-MyAccount-navigation { position: static; }
  .jojo-account .u-columns, .jojo-account .woocommerce-Addresses.u-columns { grid-template-columns: 1fr; }
}

/* ============================================================
   404, search results, and KB topic archive listings
   ============================================================ */
.jojo-404 .wp-block-buttons { justify-content: center; }
.jojo-404 p.has-lg-font-size { color: var(--ink-600); margin-top: 14px; }

/* Branded listing grid: search results + guide_topic archives */
.jojo-listing .wp-block-post-template { gap: 26px !important; }
.jojo-listing .wp-block-post-template > li { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.jojo-listing .wp-block-post-template > li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.jojo-listing .wp-block-post-featured-image { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-100); }
.jojo-listing .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jojo-listing .wp-block-post-title { margin: 16px 18px 6px; font-family: var(--font-heading); font-weight: var(--fw-bold); line-height: var(--leading-snug); }
.jojo-listing .wp-block-post-title a { color: var(--text-strong); text-decoration: none; }
.jojo-listing .wp-block-post-title a:hover { color: var(--blue-700); }
.jojo-listing .wp-block-post-excerpt { margin: 0 18px 18px; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.55; }
.jojo-listing .wp-block-post-excerpt__more-text { font-weight: 700; color: var(--blue-700); }

/* No-results / empty search state */
.jojo-noresults { background: var(--surface-page); border: 1px dashed var(--border-default); border-radius: var(--radius-2xl); padding: var(--space-6); text-align: center; max-width: 620px; margin: 8px auto 0; }
.jojo-noresults h2 { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--text-strong); }
.jojo-noresults p { color: var(--text-muted); margin: 8px 0 18px; }
.jojo-noresults .wp-block-search__inside-wrapper { max-width: 420px; margin: 0 auto; border: 2px solid var(--border-default); border-radius: var(--radius-pill); overflow: hidden; }

/* Pagination (shared) */
.jojo-listing .wp-block-query-pagination { gap: 8px; }
.jojo-listing .wp-block-query-pagination a, .jojo-listing .wp-block-query-pagination .current { font-weight: 700; color: var(--blue-700); }
.jojo-listing .wp-block-query-pagination .current { color: var(--text-strong); }

@media (max-width: 900px) { .jojo-listing .wp-block-post-template { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .jojo-listing .wp-block-post-template { grid-template-columns: 1fr !important; } }

/* ============================================================
   Order received (thank-you) + empty states polish
   ============================================================ */
/* Classic order-received markup */
.woocommerce-order .woocommerce-thankyou-order-received { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-2xl); color: var(--blue-700); line-height: var(--leading-snug); }
.woocommerce-order .woocommerce-order-overview { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 22px 0 28px; border: 0; }
.woocommerce-order .woocommerce-order-overview li { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 12px 16px; font: var(--fw-extrabold) var(--text-xs)/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500); }
.woocommerce-order .woocommerce-order-overview li strong { display: block; margin-top: 6px; font: 600 var(--text-base)/1.3 var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--blue-700); }

/* Block order-confirmation markup */
.wc-block-order-confirmation-status__title,
.wc-block-order-confirmation-summary,
.wp-block-woocommerce-order-confirmation-summary { font-family: var(--font-heading); }
.wc-block-order-confirmation-summary-list-item__key { color: var(--ink-500); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-xs); }
.wc-block-order-confirmation-summary-list-item__value { font-family: var(--font-mono); color: var(--text-strong); }

/* Empty cart state (block + classic) */
.wc-block-cart__empty-cart__title,
.cart-empty.woocommerce-info { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--text-strong); }
.cart-empty.woocommerce-info { background: var(--surface-page); border: 1px dashed var(--border-default); border-radius: var(--radius-2xl); padding: var(--space-6); text-align: center; color: var(--text-muted); }

/* Empty wishlist state (TInvWishlist) */
.tinv-wishlist .tinv-wishlist-empty { background: var(--surface-page); border: 1px dashed var(--border-default); border-radius: var(--radius-2xl); padding: var(--space-6); text-align: center; color: var(--text-muted); font-weight: 600; }

/* ============================================================
   Shop toolbar controls: frosted glass over the water (35% fill).
   Overrides the solid fills so the tank scene shows through.
   ============================================================ */
.jojo-toolbar__search {
  background: rgba(255, 255, 255, .35);
  border-color: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.jojo-toolbar select {
  background-color: rgba(255, 255, 255, .35);
  border-color: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.jojo-f-stockwrap { background: rgba(255, 255, 255, .35); }
.jojo-f-layout { background: rgba(255, 255, 255, .35); }

/* ============================================================
   Article meta line + "On this page" TOC (policy / info pages)
   ============================================================ */
.jojo-article__meta { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 22px; font: var(--fw-bold) var(--text-sm)/1 var(--font-body); color: var(--text-muted); }
.jojo-article__meta svg { color: var(--ink-400); }
.jojo-toc { background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 18px 20px; margin: 0 0 30px; }
.jojo-toc__label { display: block; font: var(--fw-extrabold) var(--text-2xs)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 12px; }
.jojo-toc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.jojo-toc li { position: relative; padding-left: 16px; }
.jojo-toc li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 999px; background: var(--teal-400); }
.jojo-toc a { color: var(--blue-700); font-weight: 700; font-size: var(--text-sm); text-decoration: none; border-bottom: 1.5px solid transparent; }
.jojo-toc a:hover { border-bottom-color: var(--blue-300); }
.jojo-prose h2[id], .jojo-prose h3[id] { scroll-margin-top: 90px; }
@media (max-width: 600px) { .jojo-toc ul { grid-template-columns: 1fr; } }

/* ===== KB funnel: FAQ + cross-sell + related guides (SEO plan, Stream B) ===== */
.jojo-faq { margin-top: 40px; }
.jojo-faq__title, .jojo-related__title { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-2xl); color: var(--text-strong); margin: 0 0 16px; }
.jojo-faq__item { padding: 16px 0; border-top: 1px solid var(--border-subtle); }
.jojo-faq__item:first-of-type { border-top: 0; padding-top: 0; }
.jojo-faq__q { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-lg); color: var(--text-strong); margin: 0 0 6px; }
.jojo-faq__a { font-size: var(--text-base); color: var(--text-muted); margin: 0; line-height: 1.6; }

.jojo-xsell { margin-top: 40px; }
.jojo-xsell__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.jojo-xsell__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; text-decoration: none; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base, .2s) var(--ease-out, ease), transform var(--dur-base, .2s) var(--ease-out, ease); }
.jojo-xsell__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.jojo-xsell__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.jojo-xsell__media .jojo-xsell__img { width: 100%; height: 100%; object-fit: cover; }
.jojo-xsell__media .jojo-coming-soon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ink-400); }
.jojo-xsell__name { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-sm); color: var(--text-strong); padding: 10px 12px 0; }
.jojo-xsell__price { font-size: var(--text-sm); color: var(--text-muted); padding: 2px 12px 12px; }

.jojo-related { margin-top: 40px; }
.jojo-related__list { display: grid; gap: 10px; }
.jojo-related__link { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); text-decoration: none; color: var(--text-strong); transition: border-color var(--dur-base, .2s) var(--ease-out, ease), background var(--dur-base, .2s) var(--ease-out, ease); }
.jojo-related__link:hover { border-color: var(--blue-300); background: #fff; }
.jojo-related__link svg { margin-left: auto; color: var(--blue-600); flex: none; }
.jojo-related__eyebrow { width: 100%; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--teal-500); font-weight: var(--fw-bold); }
.jojo-related__name { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-base); }
@media (max-width: 700px) { .jojo-xsell__row { grid-template-columns: repeat(2, 1fr); } }

/* ===== Collection pages: below-grid buyer guide + FAQ (SEO plan, item 6) ===== */
.jojo-shop__guide { max-width: 860px; margin: 8px auto 0; padding: 40px 16px 8px; border-top: 1px solid var(--border-subtle); }
.jojo-shop__guide .jojo-faq { margin-top: 44px; }
@media (max-width: 900px) { .jojo-shop__guide { padding-left: 0; padding-right: 0; } }